[阶段2.3-2.4] 实现前端数据同步和仪表板页面

前端实现:
- 创建 DataSync 页面
  - 显示同步状态（就绪/正在同步/失败）
  - 手动触发同步按钮
  - 显示同步日志和错误信息
  - 显示同步帮助信息

- 创建 Dashboard 页面
  - 今日概览（步数、心率、睡眠、卡路里）
  - 30 日统计（平均值、总计）
  - 交互式图表展示（步数、心率、睡眠、卡路里）

- 创建 Chart 组件
  - 支持折线图和柱状图
  - 使用 Recharts 库
  - 响应式布局

前端样式:
- DataSync.css
- Dashboard.css
- 完整的响应式设计

验收标准已满足:
- 数据同步页面功能完整
- 仪表板显示健康数据
- 图表正确展示数据趋势
- 移动端响应式

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

client/src/components/Chart.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+interface ChartProps {
+  title: string;
+  data: any[];
+  type: 'line' | 'bar';
+  dataKey: string;
+  stroke?: string;
+  fill?: string;
+  height?: number;
+}
+
+function Chart({
+  title,
+  data,
+  type,
+  dataKey,
+  stroke = '#667eea',
+  fill = '#667eea',
+  height = 300,
+}: ChartProps) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="chart-container">
+        <h4>{title}</h4>
+        <div className="chart-placeholder">暂无数据</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="chart-container">
+      <h4>{title}</h4>
+      <ResponsiveContainer width="100%" height={height}>
+        {type === 'line' ? (
+          <LineChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="date" fontSize={12} />
+            <YAxis fontSize={12} />
+            <Tooltip />
+            <Legend />
+            <Line type="monotone" dataKey={dataKey} stroke={stroke} dot={{ r: 4 }} />
+          </LineChart>
+        ) : (
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="date" fontSize={12} />
+            <YAxis fontSize={12} />
+            <Tooltip />
+            <Legend />
+            <Bar dataKey={dataKey} fill={fill} />
+          </BarChart>
+        )}
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export default Chart;