ericwyuan/GarminHealthLab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Set up Garmin Health Lab project structure

Browse Source 
- 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>
This commit is contained in:
ericwyuan
2026-08-23 11:11:29 +08:00
commit d73405decb
34 changed files with 1699 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "garmin-health-lab-client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"axios": "^1.5.0",
"recharts": "^2.8.0",
"tailwindcss": "^3.3.2",
"date-fns": "^2.30.0"
},
"devDependencies": {
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"typescript": "^5.1.3",
"react-scripts": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

12
client/public/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="佳明健康数据分析平台">
<title>Garmin Health Lab - 佳明健康数据分析</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

26
client/src/App.tsx Normal file
View File

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

129
client/src/components/Layout.css Normal file
View File

@@ -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;
}
}

58
client/src/components/Layout.tsx Normal file
View File

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

24
client/src/index.css Normal file
View File

@@ -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%;
}

10
client/src/index.tsx Normal file
View File

@@ -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>
);

13
client/src/pages/Analysis.tsx Normal file
View File

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

35
client/src/pages/Dashboard.tsx Normal file
View File

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

20
client/src/pages/DataSync.tsx Normal file
View File

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

59
client/src/pages/Pages.css Normal file
View File

@@ -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);
}

13
client/src/pages/Recommendations.tsx Normal file
View File

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

13
client/src/pages/Settings.tsx Normal file
View File

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

78
client/src/services/api.ts Normal file
View File

@@ -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();

37
client/src/types/index.ts Normal file
View File

@@ -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;
}

21
client/tsconfig.json Normal file
View File

@@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"moduleResolution": "node",
"jsx": "react-jsx"
},
"include": ["src"],
"exclude": ["node_modules"]
}