d73405decb
- Initialize monorepo with root workspace configuration - Set up Express.js backend with TypeScript - Set up React 18 frontend with TypeScript - Create database schema with SQLite - Implement project architecture and documentation - Add development and deployment guidelines Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import './Layout.css';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
function Layout({ children }: LayoutProps) {
|
|
const location = useLocation();
|
|
|
|
const navigationItems = [
|
|
{ path: '/', label: '仪表板', icon: '📊' },
|
|
{ path: '/sync', label: '数据同步', icon: '🔄' },
|
|
{ path: '/analysis', label: '数据分析', icon: '📈' },
|
|
{ path: '/recommendations', label: '健康建议', icon: '💡' },
|
|
{ path: '/settings', label: '设置', icon: '⚙️' },
|
|
];
|
|
|
|
return (
|
|
<div className="layout">
|
|
<header className="header">
|
|
<div className="header-content">
|
|
<h1 className="logo">🏃 Garmin Health Lab</h1>
|
|
<p className="tagline">佳明健康数据分析平台</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="container">
|
|
<nav className="sidebar">
|
|
<ul className="nav-list">
|
|
{navigationItems.map(item => (
|
|
<li key={item.path}>
|
|
<Link
|
|
to={item.path}
|
|
className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
|
|
>
|
|
<span className="icon">{item.icon}</span>
|
|
<span className="label">{item.label}</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<main className="content">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
|
|
<footer className="footer">
|
|
<p>© 2024 Garmin Health Lab. All rights reserved.</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Layout;
|