Initial commit: Set up Garmin Health Lab project structure

- 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>

client/src/App.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Layout from './components/Layout';
+import Dashboard from './pages/Dashboard';
+import DataSync from './pages/DataSync';
+import Analysis from './pages/Analysis';
+import Recommendations from './pages/Recommendations';
+import Settings from './pages/Settings';
+
+function App() {
+  return (
+    <Router>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/sync" element={<DataSync />} />
+          <Route path="/analysis" element={<Analysis />} />
+          <Route path="/recommendations" element={<Recommendations />} />
+          <Route path="/settings" element={<Settings />} />
+        </Routes>
+      </Layout>
+    </Router>
+  );
+}
+
+export default App;

client/src/components/Layout.css

@@ -0,0 +1,129 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.logo {
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.tagline {
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.sidebar {
+  width: 250px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: fit-content;
+  position: sticky;
+  top: 2rem;
+}
+
+.nav-list {
+  list-style: none;
+  padding: 0;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  text-decoration: none;
+  color: #333;
+  border-left: 3px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.nav-link:hover {
+  background-color: #f5f5f5;
+  border-left-color: #667eea;
+}
+
+.nav-link.active {
+  background-color: #f0f0ff;
+  border-left-color: #667eea;
+  color: #667eea;
+  font-weight: 600;
+}
+
+.icon {
+  font-size: 1.2rem;
+}
+
+.label {
+  flex: 1;
+}
+
+.content {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.footer {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+  font-size: 0.9rem;
+  border-top: 1px solid #eee;
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    padding: 1rem;
+  }
+
+  .sidebar {
+    width: 100%;
+    position: static;
+  }
+
+  .nav-list {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+  }
+
+  .nav-link {
+    flex: 1;
+    min-width: 100px;
+    font-size: 0.9rem;
+  }
+
+  .logo {
+    font-size: 1.4rem;
+  }
+}

client/src/components/Layout.tsx

@@ -0,0 +1,58 @@
+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;

client/src/index.css

@@ -0,0 +1,24 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f5f5f5;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+}

client/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

client/src/pages/Analysis.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Pages.css';
+
+function Analysis() {
+  return (
+    <div className="page">
+      <h2>数据分析</h2>
+      <p className="placeholder">数据分析页面即将推出...</p>
+    </div>
+  );
+}
+
+export default Analysis;

client/src/pages/Dashboard.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import { apiClient } from '../services/api';
+import './Pages.css';
+
+function Dashboard() {
+  const [loading, setLoading] = useState(true);
+  const [summary, setSummary] = useState<any>(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        // TODO: Fetch health summary data
+        setLoading(false);
+      } catch (error) {
+        console.error('Failed to load summary:', error);
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
+  if (loading) {
+    return <div className="page-loading">加载中...</div>;
+  }
+
+  return (
+    <div className="page">
+      <h2>健康仪表板</h2>
+      <p className="placeholder">仪表板内容即将推出...</p>
+    </div>
+  );
+}
+
+export default Dashboard;

client/src/pages/DataSync.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Pages.css';
+
+function DataSync() {
+  const handleSync = async () => {
+    // TODO: Implement data sync
+  };
+
+  return (
+    <div className="page">
+      <h2>数据同步</h2>
+      <p className="placeholder">数据同步功能即将推出...</p>
+      <button onClick={handleSync} className="btn btn-primary">
+        同步 Garmin 数据
+      </button>
+    </div>
+  );
+}
+
+export default DataSync;

client/src/pages/Pages.css

@@ -0,0 +1,59 @@
+.page {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.page h2 {
+  color: #333;
+  margin-bottom: 1.5rem;
+  font-size: 1.8rem;
+}
+
+.page-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  font-size: 1.2rem;
+  color: #666;
+}
+
+.placeholder {
+  color: #999;
+  font-size: 1.1rem;
+  padding: 2rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 1rem;
+}
+
+.btn-primary {
+  background-color: #667eea;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #5568d3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}

client/src/pages/Recommendations.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Pages.css';
+
+function Recommendations() {
+  return (
+    <div className="page">
+      <h2>健康建议</h2>
+      <p className="placeholder">健康建议页面即将推出...</p>
+    </div>
+  );
+}
+
+export default Recommendations;

client/src/pages/Settings.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Pages.css';
+
+function Settings() {
+  return (
+    <div className="page">
+      <h2>设置</h2>
+      <p className="placeholder">设置页面即将推出...</p>
+    </div>
+  );
+}
+
+export default Settings;

client/src/services/api.ts

@@ -0,0 +1,78 @@
+import axios, { AxiosInstance } from 'axios';
+
+const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000/api';
+
+class ApiClient {
+  private client: AxiosInstance;
+
+  constructor() {
+    this.client = axios.create({
+      baseURL: API_BASE_URL,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  // Auth endpoints
+  login(email: string, password: string) {
+    return this.client.post('/auth/login', { email, password });
+  }
+
+  logout() {
+    return this.client.post('/auth/logout');
+  }
+
+  // Garmin endpoints
+  syncGarminData() {
+    return this.client.post('/garmin/sync');
+  }
+
+  getGarminSyncStatus() {
+    return this.client.get('/garmin/status');
+  }
+
+  // Health endpoints
+  getHealthSummary(startDate?: string, endDate?: string) {
+    return this.client.get('/health/summary', {
+      params: { startDate, endDate }
+    });
+  }
+
+  getStepsData(startDate?: string, endDate?: string) {
+    return this.client.get('/health/steps', {
+      params: { startDate, endDate }
+    });
+  }
+
+  getHeartRateData(startDate?: string, endDate?: string) {
+    return this.client.get('/health/heart-rate', {
+      params: { startDate, endDate }
+    });
+  }
+
+  getSleepData(startDate?: string, endDate?: string) {
+    return this.client.get('/health/sleep', {
+      params: { startDate, endDate }
+    });
+  }
+
+  getActivities(startDate?: string, endDate?: string) {
+    return this.client.get('/health/activities', {
+      params: { startDate, endDate }
+    });
+  }
+
+  // Analysis endpoints
+  getTrends(metricType?: string) {
+    return this.client.get('/analysis/trends', {
+      params: { metricType }
+    });
+  }
+
+  getRecommendations() {
+    return this.client.get('/analysis/recommendations');
+  }
+}
+
+export const apiClient = new ApiClient();

client/src/types/index.ts

@@ -0,0 +1,37 @@
+export interface HealthSummary {
+  date: string;
+  steps: number;
+  heartRate?: number;
+  sleep?: {
+    duration: number;
+    quality: number;
+  };
+  caloriesBurned?: number;
+  stress?: number;
+}
+
+export interface Activity {
+  id: string;
+  activityType: string;
+  startTime: string;
+  endTime: string;
+  duration: number;
+  distance?: number;
+  calories?: number;
+  heartRateAverage?: number;
+  heartRateMax?: number;
+}
+
+export interface Recommendation {
+  id: string;
+  category: string;
+  recommendation: string;
+  priority: 'high' | 'medium' | 'low';
+  basedOn: string[];
+}
+
+export interface TrendData {
+  date: string;
+  value: number;
+  [key: string]: any;
+}