From 02426e0a5989145f67e54ad3b727a76133249236 Mon Sep 17 00:00:00 2001
From: "liweiliang0905@gmail.com" <liweiliang0905@gmail.com>
Date: Mon, 26 Jan 2026 16:57:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98=E6=94=B9=E9=80=A0=E4=B8=BA=E6=B7=B1=E8=89=B2=E7=A7=91?=
 =?UTF-8?q?=E6=8A=80=E9=A3=8E=E6=A0=BC=20+=20Apple=20Health=20=E6=AD=A5?=
 =?UTF-8?q?=E6=95=B0=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UI 改造:
- 首页采用深色科技风格 (Dark Tech)
- Tailwind CSS + Glass Morphism 毛玻璃效果
- 左侧边栏导航 (PC端) / 底部导航 (移动端)
- Material Symbols 图标 + Space Grotesk 字体
- Chart.js 深色主题适配

新功能:
- Apple Health 步数同步 API (/api/steps)
- 设置页面添加 iOS 快捷指令配置说明

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs/CODEMAPS.md            |   11 +
 src/vitals/core/database.py |   84 +++
 src/vitals/web/app.py       | 1078 +++++++++++++++++++----------------
 3 files changed, 685 insertions(+), 488 deletions(-)

diff --git a/docs/CODEMAPS.md b/docs/CODEMAPS.md
index 23901e8..3da6471 100644
--- a/docs/CODEMAPS.md
+++ b/docs/CODEMAPS.md
@@ -153,6 +153,9 @@ class DeepSeekVisionAnalyzer:
 | GET | `/api/meals/nutrition` | 营养统计 |
 | POST | `/api/exercise` | 添加运动记录 |
 | GET | `/api/exercises` | 查询运动记录 |
+| POST | `/api/steps` | 同步步数（iOS 快捷指令调用） |
+| GET | `/api/steps` | 查询步数记录 |
+| GET | `/api/steps/today` | 获取今日步数 |
 | POST | `/api/sleep` | 添加睡眠记录 |
 | POST | `/api/weight` | 添加体重记录 |
 | GET | `/api/config` | 获取用户配置 |
@@ -216,6 +219,9 @@ weight (id, user_id, date, weight, body_fat, notes)
 -- 阅读记录
 reading (id, user_id, date, book_title, pages, duration, notes)
 
+-- 步数记录
+steps (id, user_id, date, steps, distance, calories, source, synced_at)
+
 -- 用户配置
 user_config (id, user_id, height, weight, age, gender, activity_level, goal)
 
@@ -258,6 +264,11 @@ invite (id, code, created_by, used_by, used_at, expires_at)
 
 ## 最近更新
 
+- **Apple Health 步数同步**：支持通过 iOS 快捷指令同步 Apple Health 步数数据
+  - 数据库：新增 `steps` 表存储每日步数
+  - API：`/api/steps` (POST 同步, GET 查询), `/api/steps/today` (今日步数)
+  - 前端：运动页面显示今日步数卡片，设置页面提供 iOS 快捷指令配置说明
+
 - **文字 AI 识别功能**：在饮食页面添加"文字AI识别"按钮，支持输入文字描述后自动识别卡路里
   - 前端：`web/app.py` (第 5041 行按钮，第 5166 行函数)
   - 后端：`/api/meal/recognize` 支持 `text` 参数
diff --git a/src/vitals/core/database.py b/src/vitals/core/database.py
index 9d07ee3..4d2f82d 100644
--- a/src/vitals/core/database.py
+++ b/src/vitals/core/database.py
@@ -200,6 +200,22 @@ def init_db():
             )
         """)
 
+        # 步数记录表
+        cursor.execute("""
+            CREATE TABLE IF NOT EXISTS steps (
+                id INT PRIMARY KEY AUTO_INCREMENT,
+                user_id INT DEFAULT 1,
+                date DATE NOT NULL,
+                steps INT NOT NULL DEFAULT 0,
+                distance FLOAT,
+                calories INT,
+                source VARCHAR(50) DEFAULT 'apple_health',
+                synced_at DATETIME NOT NULL,
+                UNIQUE KEY unique_user_date (user_id, date),
+                INDEX idx_steps_date (date)
+            )
+        """)
+
         # 创建默认管理员用户（仅在用户表为空时）
         cursor.execute("SELECT COUNT(*) as count FROM users")
         if cursor.fetchone()["count"] == 0:
@@ -277,6 +293,74 @@ def delete_exercise(exercise_id: int):
         cursor.execute("DELETE FROM exercise WHERE id = %s", (exercise_id,))
 
 
+# ===== 步数记录 =====
+
+def add_or_update_steps(user_id: int, record_date: date, steps: int, distance: float = None, calories: int = None, source: str = "apple_health") -> int:
+    """添加或更新步数记录（同一天只保留一条记录）"""
+    with get_connection() as (conn, cursor):
+        cursor.execute("""
+            INSERT INTO steps (user_id, date, steps, distance, calories, source, synced_at)
+            VALUES (%s, %s, %s, %s, %s, %s, %s)
+            ON DUPLICATE KEY UPDATE
+                steps = VALUES(steps),
+                distance = VALUES(distance),
+                calories = VALUES(calories),
+                source = VALUES(source),
+                synced_at = VALUES(synced_at)
+        """, (
+            user_id,
+            record_date.isoformat(),
+            steps,
+            distance,
+            calories,
+            source,
+            datetime.now().isoformat(),
+        ))
+        return cursor.lastrowid
+
+
+def get_steps(start_date: Optional[date] = None, end_date: Optional[date] = None, user_id: Optional[int] = None) -> list[dict]:
+    """查询步数记录"""
+    with get_connection() as (conn, cursor):
+        query = "SELECT * FROM steps WHERE 1=1"
+        params = []
+
+        if user_id:
+            query += " AND user_id = %s"
+            params.append(user_id)
+        if start_date:
+            query += " AND date >= %s"
+            params.append(start_date.isoformat())
+        if end_date:
+            query += " AND date <= %s"
+            params.append(end_date.isoformat())
+
+        query += " ORDER BY date DESC"
+        cursor.execute(query, params)
+
+        return [
+            {
+                "id": row["id"],
+                "date": _parse_date(row["date"]).isoformat() if isinstance(row["date"], str) else row["date"].isoformat(),
+                "steps": row["steps"],
+                "distance": row["distance"],
+                "calories": row["calories"],
+                "source": row["source"],
+                "synced_at": row["synced_at"].isoformat() if row["synced_at"] else None,
+            }
+            for row in cursor.fetchall()
+        ]
+
+
+def get_today_steps(user_id: int) -> dict:
+    """获取今日步数"""
+    today = date.today()
+    records = get_steps(start_date=today, end_date=today, user_id=user_id)
+    if records:
+        return records[0]
+    return {"date": today.isoformat(), "steps": 0, "distance": None, "calories": None}
+
+
 # ===== 饮食记录 =====
 
 def add_meal(meal: Meal, user_id: int = 1) -> int:
diff --git a/src/vitals/web/app.py b/src/vitals/web/app.py
index fde5d03..2d95127 100644
--- a/src/vitals/web/app.py
+++ b/src/vitals/web/app.py
@@ -1220,6 +1220,62 @@ async def delete_exercise_api(exercise_id: int):
         raise HTTPException(status_code=500, detail=str(e))
 
 
+# ===== 步数同步 API =====
+
+class StepsInput(BaseModel):
+    date: str
+    steps: int
+    distance: Optional[float] = None
+    calories: Optional[int] = None
+    source: Optional[str] = "apple_health"
+
+
+@app.post("/api/steps")
+async def sync_steps_api(data: StepsInput):
+    """同步步数数据（供 iOS 快捷指令调用）"""
+    active_user = db.get_active_user()
+    if not active_user:
+        raise HTTPException(status_code=400, detail="没有激活的用户")
+
+    try:
+        record_date = date.fromisoformat(data.date)
+    except ValueError as exc:
+        raise HTTPException(status_code=400, detail="日期格式应为 YYYY-MM-DD") from exc
+
+    record_id = db.add_or_update_steps(
+        user_id=active_user.id,
+        record_date=record_date,
+        steps=data.steps,
+        distance=data.distance,
+        calories=data.calories,
+        source=data.source or "apple_health",
+    )
+    return {"success": True, "id": record_id, "message": f"已同步 {data.steps} 步"}
+
+
+@app.get("/api/steps")
+async def get_steps_api(days: int = Query(default=30)):
+    """查询步数记录"""
+    active_user = db.get_active_user()
+    if not active_user:
+        raise HTTPException(status_code=400, detail="没有激活的用户")
+
+    end = date.today()
+    start = end - timedelta(days=days)
+    records = db.get_steps(start_date=start, end_date=end, user_id=active_user.id)
+    return records
+
+
+@app.get("/api/steps/today")
+async def get_today_steps_api():
+    """获取今日步数"""
+    active_user = db.get_active_user()
+    if not active_user:
+        raise HTTPException(status_code=400, detail="没有激活的用户")
+
+    return db.get_today_steps(active_user.id)
+
+
 @app.post("/api/meal")
 async def add_meal_api(
     date_str: str = Form(...),
@@ -3518,521 +3574,470 @@ def get_admin_page_html() -> str:
 
 
 def get_dashboard_html() -> str:
-    """生成仪表盘 HTML"""
+    """生成仪表盘 HTML - 深色科技风格"""
     return """
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html class="dark" lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vitals 健康管理</title>
+    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#0ddff2",
+                        "accent-purple": "#a855f7",
+                        "background-dark": "#0a0a0c",
+                        "card-dark": "rgba(25, 40, 42, 0.6)",
+                    },
+                    fontFamily: {
+                        "display": ["Space Grotesk", "sans-serif"]
+                    },
+                },
+            },
+        }
+    </script>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+        .glass-card {
+            background: rgba(25, 40, 42, 0.4);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(60, 90, 94, 0.3);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
         }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #f5f5f5;
-            color: #333;
-            line-height: 1.6;
-        }
-        .nav {
-            display: flex;
-            gap: 16px;
-            align-items: center;
-            padding: 12px 18px;
-            background: white;
-            border-radius: 12px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-        }
-        .nav a {
-            color: #666;
-            text-decoration: none;
-            font-weight: 600;
-        }
-        .nav a.active {
-            color: #667eea;
-        }
-        /* 移动端适配 */
+        .neon-glow-cyan { box-shadow: 0 0 15px rgba(13, 223, 242, 0.3); }
+        .neon-text-cyan { text-shadow: 0 0 8px rgba(13, 223, 242, 0.5); }
+        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #283839; border-radius: 10px; }
         @media (max-width: 768px) {
-            .nav {
-                display: none !important;
-            }
-            body {
-                padding-bottom: 80px;
-            }
-            .container {
-                padding: 12px;
-            }
-            header {
-                padding: 20px 16px;
-                margin-bottom: 16px;
-            }
-            header h1 {
-                font-size: 1.5rem;
-            }
-            .grid {
-                grid-template-columns: 1fr 1fr;
-                gap: 12px;
-            }
-            .card {
-                padding: 14px;
-            }
-            .card .value {
-                font-size: 1.5rem;
-            }
-            .chart-container {
-                padding: 14px;
-                height: auto;
-            }
-            .chart-container canvas {
-                max-height: 180px;
-            }
-            .meals-list li {
-                flex-wrap: wrap;
-                gap: 4px;
-            }
-            .meal-desc {
-                width: 100%;
-                margin: 4px 0;
-                order: 3;
-            }
-        }
-        @media (max-width: 480px) {
-            .grid {
-                grid-template-columns: 1fr;
-            }
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 30px 20px;
-            text-align: center;
-            margin-bottom: 30px;
-            border-radius: 12px;
-        }
-        header h1 {
-            font-size: 2rem;
-            margin-bottom: 10px;
-        }
-        header p {
-            opacity: 0.9;
-        }
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .card {
-            background: white;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        }
-        .card h3 {
-            font-size: 0.9rem;
-            color: #666;
-            margin-bottom: 10px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-        .card .value {
-            font-size: 2rem;
-            font-weight: 700;
-            color: #333;
-        }
-        .card .unit {
-            font-size: 1rem;
-            color: #666;
-            margin-left: 4px;
-        }
-        .card .change {
-            font-size: 0.85rem;
-            margin-top: 8px;
-        }
-        .positive { color: #10b981; }
-        .negative { color: #ef4444; }
-        .neutral { color: #6b7280; }
-        .chart-container {
-            background: white;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            margin-bottom: 20px;
-        }
-        .chart-container h3 {
-            margin-bottom: 20px;
-            color: #333;
-        }
-        .meals-list {
-            list-style: none;
-        }
-        .meals-list li {
-            padding: 12px 0;
-            border-bottom: 1px solid #eee;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .meals-list li:last-child {
-            border-bottom: none;
-        }
-        .meal-type {
-            font-weight: 600;
-            color: #667eea;
-            min-width: 50px;
-        }
-        .meal-desc {
-            flex: 1;
-            margin: 0 15px;
-            color: #666;
-        }
-        .meal-cal {
-            font-weight: 600;
-            color: #333;
-        }
-        .loading {
-            text-align: center;
-            padding: 40px;
-            color: #666;
-        }
-        .no-data {
-            text-align: center;
-            padding: 40px;
-            color: #999;
-        }
-        footer {
-            text-align: center;
-            padding: 20px;
-            color: #999;
-            font-size: 0.85rem;
+            .sidebar { display: none !important; }
+            .main-content { margin-left: 0 !important; }
+            body { padding-bottom: 80px; }
         }
     </style>
 </head>
-<body>
-    <div class="container">
-        <div class="nav">
-            <a class="active" href="/">首页</a>
-            <a href="/exercise">运动</a>
-            <a href="/meal">饮食</a>
-            <a href="/sleep">睡眠</a>
-            <a href="/weight">体重</a>
-            <a href="/reading">阅读</a>
-            <a href="/report">报告</a>
-            <a href="/settings">设置</a>
+<body class="bg-background-dark font-display text-white min-h-screen">
+<div class="flex h-screen w-full">
+    <!-- 左侧边栏 -->
+    <aside class="sidebar w-64 flex flex-col border-r border-white/5 bg-background-dark p-6 justify-between shrink-0 fixed h-full">
+        <div class="flex flex-col gap-8">
+            <div class="flex items-center gap-3">
+                <div class="size-10 rounded-full bg-primary flex items-center justify-center neon-glow-cyan">
+                    <span class="material-symbols-outlined text-background-dark font-bold">bolt</span>
+                </div>
+                <div class="flex flex-col">
+                    <h1 class="text-white text-lg font-bold leading-tight tracking-tight uppercase italic">Vitals<span class="text-primary">Health</span></h1>
+                    <p class="text-xs text-primary/60 font-medium">v1.0.0</p>
+                </div>
+            </div>
+            <nav class="flex flex-col gap-2">
+                <a class="flex items-center gap-3 px-4 py-3 rounded-lg bg-primary/10 text-primary border border-primary/20" href="/">
+                    <span class="material-symbols-outlined">dashboard</span>
+                    <span class="text-sm font-semibold uppercase tracking-wider">仪表盘</span>
+                </a>
+                <a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all" href="/meal">
+                    <span class="material-symbols-outlined">restaurant</span>
+                    <span class="text-sm font-semibold uppercase tracking-wider">饮食</span>
+                </a>
+                <a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all" href="/sleep">
+                    <span class="material-symbols-outlined">bedtime</span>
+                    <span class="text-sm font-semibold uppercase tracking-wider">睡眠</span>
+                </a>
+                <a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all" href="/exercise">
+                    <span class="material-symbols-outlined">fitness_center</span>
+                    <span class="text-sm font-semibold uppercase tracking-wider">运动</span>
+                </a>
+                <a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all" href="/weight">
+                    <span class="material-symbols-outlined">monitor_weight</span>
+                    <span class="text-sm font-semibold uppercase tracking-wider">体重</span>
+                </a>
+                <a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all" href="/reading">
+                    <span class="material-symbols-outlined">auto_stories</span>
+                    <span class="text-sm font-semibold uppercase tracking-wider">阅读</span>
+                </a>
+                <a class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-all" href="/report">
+                    <span class="material-symbols-outlined">assessment</span>
+                    <span class="text-sm font-semibold uppercase tracking-wider">报告</span>
+                </a>
+            </nav>
         </div>
-        <header>
-            <h1>Vitals 健康管理</h1>
-            <p id="today-date"></p>
-        </header>
-
-        <div class="grid" id="stats-grid">
-            <div class="card">
-                <h3>今日摄入</h3>
-                <div class="value" id="calories-intake">--<span class="unit">卡</span></div>
-            </div>
-            <div class="card">
-                <h3>今日消耗</h3>
-                <div class="value" id="calories-burned">--<span class="unit">卡</span></div>
-                <div class="change neutral" id="calories-balance"></div>
-            </div>
-            <div class="card">
-                <h3>运动时长</h3>
-                <div class="value" id="exercise-duration">--<span class="unit">分钟</span></div>
-            </div>
-            <div class="card">
-                <h3>睡眠时长</h3>
-                <div class="value" id="sleep-duration">--<span class="unit">小时</span></div>
-            </div>
-            <div class="card">
-                <h3>今日阅读</h3>
-                <div class="value" id="reading-duration">--<span class="unit">分钟</span></div>
-                <div class="change neutral" id="reading-book"></div>
-            </div>
+        <div class="flex flex-col gap-4 pt-6 border-t border-white/5">
+            <a href="/settings" class="flex items-center justify-center gap-2 w-full py-2.5 rounded-lg bg-white/5 hover:bg-white/10 text-white text-xs font-bold uppercase tracking-widest border border-white/10 transition-all">
+                <span class="material-symbols-outlined text-sm">settings</span>
+                系统设置
+            </a>
+            <a href="/admin" id="admin-link" style="display:none" class="flex items-center justify-center gap-2 w-full py-2.5 rounded-lg bg-primary/10 hover:bg-primary/20 text-primary text-xs font-bold uppercase tracking-widest border border-primary/20 transition-all">
+                <span class="material-symbols-outlined text-sm">admin_panel_settings</span>
+                管理后台
+            </a>
         </div>
+    </aside>
 
-        <div class="chart-container">
-            <h3>本周卡路里趋势</h3>
-            <canvas id="calories-chart" height="100"></canvas>
-        </div>
-
-        <div class="grid">
-            <div class="card">
-                <h3>今日饮食</h3>
-                <ul class="meals-list" id="meals-list">
-                    <li class="no-data">暂无记录</li>
-                </ul>
+    <!-- 主内容区 -->
+    <main class="main-content flex-1 overflow-y-auto custom-scrollbar bg-background-dark p-8 ml-64">
+        <div class="max-w-6xl mx-auto space-y-8">
+            <!-- 页面标题 -->
+            <div class="glass-card p-8 rounded-xl relative overflow-hidden group">
+                <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-primary/10 transition-all"></div>
+                <div class="flex flex-wrap items-end justify-between gap-6 relative z-10">
+                    <div class="flex flex-col gap-4">
+                        <div class="flex items-center gap-2">
+                            <span class="size-2 rounded-full bg-primary animate-pulse"></span>
+                            <p class="text-xs font-black uppercase tracking-[0.2em] text-primary neon-text-cyan">实时健康监测</p>
+                        </div>
+                        <div class="space-y-1">
+                            <h2 class="text-4xl md:text-5xl font-black text-white leading-tight tracking-tighter uppercase italic">今日<span class="text-primary underline decoration-primary/30">概览</span></h2>
+                            <p class="text-slate-400 text-lg font-medium" id="today-date"></p>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <a href="/report" class="px-6 py-4 bg-primary text-background-dark rounded-lg font-black uppercase text-xs tracking-[0.15em] hover:scale-105 transition-transform flex items-center gap-2 neon-glow-cyan">
+                            <span>查看报告</span>
+                            <span class="material-symbols-outlined text-sm">trending_up</span>
+                        </a>
+                    </div>
+                </div>
             </div>
-            <div class="card">
-                <h3>体重趋势 (近30天)</h3>
-                <canvas id="weight-chart" height="200"></canvas>
-            </div>
-        </div>
 
-        <footer>
-            Vitals v0.1.0 - 本地优先的健康管理
-        </footer>
+            <!-- 统计卡片网格 -->
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-6">
+                <!-- 今日摄入 -->
+                <div class="glass-card p-5 md:p-6 rounded-xl border-l-4 border-l-primary">
+                    <div class="flex justify-between items-start mb-3 md:mb-4">
+                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">今日摄入</p>
+                        <span class="material-symbols-outlined text-primary text-xl">local_fire_department</span>
+                    </div>
+                    <div class="flex items-baseline gap-1">
+                        <h3 class="text-2xl md:text-3xl font-black text-white" id="calories-intake">--</h3>
+                        <span class="text-xs text-slate-400 font-bold uppercase tracking-tighter">卡</span>
+                    </div>
+                </div>
+                <!-- 今日消耗 -->
+                <div class="glass-card p-5 md:p-6 rounded-xl border-l-4 border-l-green-400">
+                    <div class="flex justify-between items-start mb-3 md:mb-4">
+                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">今日消耗</p>
+                        <span class="material-symbols-outlined text-green-400 text-xl">whatshot</span>
+                    </div>
+                    <div class="flex items-baseline gap-1">
+                        <h3 class="text-2xl md:text-3xl font-black text-white" id="calories-burned">--</h3>
+                        <span class="text-xs text-slate-400 font-bold uppercase tracking-tighter">卡</span>
+                    </div>
+                    <div class="mt-2 text-xs font-bold" id="calories-balance"></div>
+                </div>
+                <!-- 运动时长 -->
+                <div class="glass-card p-5 md:p-6 rounded-xl border-l-4 border-l-accent-purple">
+                    <div class="flex justify-between items-start mb-3 md:mb-4">
+                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">运动时长</p>
+                        <span class="material-symbols-outlined text-accent-purple text-xl">directions_run</span>
+                    </div>
+                    <div class="flex items-baseline gap-1">
+                        <h3 class="text-2xl md:text-3xl font-black text-white" id="exercise-duration">--</h3>
+                        <span class="text-xs text-slate-400 font-bold uppercase tracking-tighter">分钟</span>
+                    </div>
+                </div>
+                <!-- 睡眠时长 -->
+                <div class="glass-card p-5 md:p-6 rounded-xl border-l-4 border-l-blue-400">
+                    <div class="flex justify-between items-start mb-3 md:mb-4">
+                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">睡眠时长</p>
+                        <span class="material-symbols-outlined text-blue-400 text-xl">nights_stay</span>
+                    </div>
+                    <div class="flex items-baseline gap-1">
+                        <h3 class="text-2xl md:text-3xl font-black text-white" id="sleep-duration">--</h3>
+                        <span class="text-xs text-slate-400 font-bold uppercase tracking-tighter">小时</span>
+                    </div>
+                </div>
+                <!-- 今日阅读 -->
+                <div class="glass-card p-5 md:p-6 rounded-xl border-l-4 border-l-yellow-400">
+                    <div class="flex justify-between items-start mb-3 md:mb-4">
+                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">今日阅读</p>
+                        <span class="material-symbols-outlined text-yellow-400 text-xl">auto_stories</span>
+                    </div>
+                    <div class="flex items-baseline gap-1">
+                        <h3 class="text-2xl md:text-3xl font-black text-white" id="reading-duration">--</h3>
+                        <span class="text-xs text-slate-400 font-bold uppercase tracking-tighter">分钟</span>
+                    </div>
+                    <div class="mt-2 text-xs text-slate-500 truncate" id="reading-book"></div>
+                </div>
+            </div>
+
+            <!-- 图表区域 -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- 本周卡路里趋势 -->
+                <div class="glass-card p-6 md:p-8 rounded-xl">
+                    <div class="flex justify-between items-center mb-6">
+                        <div>
+                            <h4 class="text-lg font-bold text-white uppercase tracking-wider">本周卡路里</h4>
+                            <p class="text-xs text-slate-400 font-medium">摄入与消耗对比</p>
+                        </div>
+                        <div class="px-3 py-1 bg-white/5 rounded border border-white/10 text-[10px] font-mono text-primary">7天趋势</div>
+                    </div>
+                    <div class="h-[200px] w-full">
+                        <canvas id="calories-chart"></canvas>
+                    </div>
+                </div>
+                <!-- 体重趋势 -->
+                <div class="glass-card p-6 md:p-8 rounded-xl">
+                    <div class="flex justify-between items-center mb-6">
+                        <div>
+                            <h4 class="text-lg font-bold text-white uppercase tracking-wider">体重趋势</h4>
+                            <p class="text-xs text-slate-400 font-medium">近30天变化</p>
+                        </div>
+                        <div class="px-3 py-1 bg-white/5 rounded border border-white/10 text-[10px] font-mono text-accent-purple">30天</div>
+                    </div>
+                    <div class="h-[200px] w-full">
+                        <canvas id="weight-chart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 今日饮食 -->
+            <div class="glass-card p-6 md:p-8 rounded-xl">
+                <div class="flex justify-between items-center mb-6">
+                    <div>
+                        <h4 class="text-lg font-bold text-white uppercase tracking-wider">今日饮食</h4>
+                        <p class="text-xs text-slate-400 font-medium">详细记录</p>
+                    </div>
+                    <a href="/meal" class="px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs font-bold uppercase tracking-wider text-primary border border-primary/20 transition-all">
+                        添加记录
+                    </a>
+                </div>
+                <div id="meals-list" class="space-y-3">
+                    <div class="text-center py-8 text-slate-500">暂无记录</div>
+                </div>
+            </div>
+
+            <!-- 页脚 -->
+            <footer class="text-center py-6 text-slate-600 text-xs font-medium uppercase tracking-widest">
+                Vitals v1.0.0 - 本地优先的健康管理
+            </footer>
+        </div>
+    </main>
+</div>
+
+<!-- 移动端底部导航 -->
+<nav class="mobile-nav fixed bottom-0 left-0 right-0 h-16 bg-background-dark border-t border-white/10 hidden justify-around items-center z-50 md:hidden" style="display: none;">
+    <a href="/" class="flex flex-col items-center justify-center text-primary">
+        <span class="material-symbols-outlined text-xl">dashboard</span>
+        <span class="text-[10px] font-bold mt-1">首页</span>
+    </a>
+    <a href="/meal" class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors">
+        <span class="material-symbols-outlined text-xl">restaurant</span>
+        <span class="text-[10px] font-bold mt-1">饮食</span>
+    </a>
+    <a href="/exercise" class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors">
+        <span class="material-symbols-outlined text-xl">fitness_center</span>
+        <span class="text-[10px] font-bold mt-1">运动</span>
+    </a>
+    <a href="/sleep" class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors">
+        <span class="material-symbols-outlined text-xl">bedtime</span>
+        <span class="text-[10px] font-bold mt-1">睡眠</span>
+    </a>
+    <div class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors cursor-pointer" onclick="toggleMoreMenu()">
+        <span class="material-symbols-outlined text-xl">more_horiz</span>
+        <span class="text-[10px] font-bold mt-1">更多</span>
     </div>
+</nav>
+<div id="more-menu" class="fixed bottom-20 right-4 bg-card-dark backdrop-blur-xl rounded-xl border border-white/10 p-2 z-50 hidden">
+    <a href="/weight" class="block px-4 py-3 text-sm text-slate-300 hover:text-primary hover:bg-white/5 rounded-lg transition-all">体重</a>
+    <a href="/reading" class="block px-4 py-3 text-sm text-slate-300 hover:text-primary hover:bg-white/5 rounded-lg transition-all">阅读</a>
+    <a href="/report" class="block px-4 py-3 text-sm text-slate-300 hover:text-primary hover:bg-white/5 rounded-lg transition-all">报告</a>
+    <a href="/settings" class="block px-4 py-3 text-sm text-slate-300 hover:text-primary hover:bg-white/5 rounded-lg transition-all">设置</a>
+</div>
+<style>
+    @media (max-width: 768px) {
+        .mobile-nav { display: flex !important; }
+    }
+</style>
 
-    <script>
-        // 格式化日期
-        const today = new Date();
-        document.getElementById('today-date').textContent =
-            today.toLocaleDateString('zh-CN', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-                weekday: 'long'
+<script>
+    // 格式化日期
+    const today = new Date();
+    document.getElementById('today-date').textContent = today.toLocaleDateString('zh-CN', {
+        year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'
+    });
+
+    // Chart.js 深色主题配置
+    Chart.defaults.color = '#94a3b8';
+    Chart.defaults.borderColor = 'rgba(255,255,255,0.05)';
+
+    // 加载今日数据
+    async function loadTodayData() {
+        try {
+            const res = await fetch('/api/today');
+            const data = await res.json();
+
+            document.getElementById('calories-intake').textContent = data.calories_intake;
+            const totalBurned = (data.tdee || 0) + data.calories_burned;
+            document.getElementById('calories-burned').textContent = totalBurned;
+
+            const balance = data.calories_balance;
+            const balanceEl = document.getElementById('calories-balance');
+            if (balance < 0) {
+                balanceEl.className = 'mt-2 text-xs font-bold text-green-400';
+                balanceEl.textContent = `热量缺口 ${Math.abs(balance)} 卡`;
+            } else if (balance > 0) {
+                balanceEl.className = 'mt-2 text-xs font-bold text-red-400';
+                balanceEl.textContent = `热量盈余 ${balance} 卡`;
+            } else {
+                balanceEl.className = 'mt-2 text-xs font-bold text-slate-400';
+                balanceEl.textContent = '收支平衡';
+            }
+
+            document.getElementById('exercise-duration').textContent = data.exercise_duration;
+            if (data.sleep_duration) {
+                document.getElementById('sleep-duration').textContent = data.sleep_duration.toFixed(1);
+            }
+
+            // 加载今日阅读
+            try {
+                const readingRes = await fetch('/api/reading/today');
+                const readingData = await readingRes.json();
+                document.getElementById('reading-duration').textContent = readingData.duration;
+                if (readingData.book) {
+                    document.getElementById('reading-book').textContent = `${readingData.mood || ''} ${readingData.book}`;
+                }
+            } catch (e) {}
+
+            // 更新饮食列表
+            const mealsList = document.getElementById('meals-list');
+            if (data.meals.length > 0) {
+                mealsList.innerHTML = data.meals.map(m => `
+                    <div class="flex items-center justify-between p-4 bg-white/5 rounded-lg border border-white/5 hover:border-primary/20 transition-all">
+                        <div class="flex items-center gap-4">
+                            <div class="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                                <span class="material-symbols-outlined text-primary">${m.meal_type === '早餐' ? 'wb_sunny' : m.meal_type === '午餐' ? 'light_mode' : m.meal_type === '晚餐' ? 'nights_stay' : 'restaurant'}</span>
+                            </div>
+                            <div>
+                                <p class="text-sm font-bold text-white">${m.meal_type}</p>
+                                <p class="text-xs text-slate-400 truncate max-w-[200px]">${m.description}</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <p class="text-lg font-black text-primary">${m.calories}</p>
+                            <p class="text-[10px] text-slate-500 uppercase">卡路里</p>
+                        </div>
+                    </div>
+                `).join('');
+            }
+        } catch (error) {
+            console.error('加载今日数据失败:', error);
+        }
+    }
+
+    // 加载周数据图表
+    async function loadWeekData() {
+        try {
+            const res = await fetch('/api/week');
+            const data = await res.json();
+
+            const ctx = document.getElementById('calories-chart').getContext('2d');
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: data.daily_stats.map(d => d.weekday),
+                    datasets: [
+                        {
+                            label: '摄入',
+                            data: data.daily_stats.map(d => d.calories_intake),
+                            backgroundColor: 'rgba(13, 223, 242, 0.6)',
+                            borderColor: 'rgba(13, 223, 242, 1)',
+                            borderWidth: 1,
+                            borderRadius: 4,
+                        },
+                        {
+                            label: '消耗',
+                            data: data.daily_stats.map(d => d.calories_burned),
+                            backgroundColor: 'rgba(16, 185, 129, 0.6)',
+                            borderColor: 'rgba(16, 185, 129, 1)',
+                            borderWidth: 1,
+                            borderRadius: 4,
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { position: 'top', labels: { boxWidth: 12, padding: 20 } } },
+                    scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } }
+                }
             });
-
-        // 加载今日数据
-        async function loadTodayData() {
-            try {
-                const res = await fetch('/api/today');
-                const data = await res.json();
-
-                document.getElementById('calories-intake').innerHTML =
-                    `${data.calories_intake}<span class="unit">卡</span>`;
-
-                const totalBurned = (data.tdee || 0) + data.calories_burned;
-                document.getElementById('calories-burned').innerHTML =
-                    `${totalBurned}<span class="unit">卡</span>`;
-
-                const balance = data.calories_balance;
-                const balanceEl = document.getElementById('calories-balance');
-                if (balance < 0) {
-                    balanceEl.className = 'change positive';
-                    balanceEl.textContent = `热量缺口 ${Math.abs(balance)} 卡`;
-                } else if (balance > 0) {
-                    balanceEl.className = 'change negative';
-                    balanceEl.textContent = `热量盈余 ${balance} 卡`;
-                } else {
-                    balanceEl.className = 'change neutral';
-                    balanceEl.textContent = '收支平衡';
-                }
-
-                document.getElementById('exercise-duration').innerHTML =
-                    `${data.exercise_duration}<span class="unit">分钟</span>`;
-
-                if (data.sleep_duration) {
-                    document.getElementById('sleep-duration').innerHTML =
-                        `${data.sleep_duration.toFixed(1)}<span class="unit">小时</span>`;
-                }
-
-                // 加载今日阅读数据
-                try {
-                    const readingRes = await fetch('/api/reading/today');
-                    const readingData = await readingRes.json();
-                    document.getElementById('reading-duration').innerHTML =
-                        `${readingData.duration}<span class="unit">分钟</span>`;
-                    const readingBook = document.getElementById('reading-book');
-                    if (readingData.book) {
-                        readingBook.textContent = `${readingData.mood || ''} ${readingData.book}`;
-                    } else {
-                        readingBook.textContent = '';
-                    }
-                } catch (e) {
-                    console.log('加载阅读数据失败');
-                }
-
-                // 更新饮食列表
-                const mealsList = document.getElementById('meals-list');
-                if (data.meals.length > 0) {
-                    mealsList.innerHTML = data.meals.map(m => `
-                        <li>
-                            <span class="meal-type">${m.meal_type}</span>
-                            <span class="meal-desc">${m.description}</span>
-                            <span class="meal-cal">${m.calories} 卡</span>
-                        </li>
-                    `).join('');
-                }
-            } catch (error) {
-                console.error('加载今日数据失败:', error);
-            }
+        } catch (error) {
+            console.error('加载周数据失败:', error);
         }
-
-        // 加载周数据并绘制图表
-        async function loadWeekData() {
-            try {
-                const res = await fetch('/api/week');
-                const data = await res.json();
-
-                const ctx = document.getElementById('calories-chart').getContext('2d');
-                new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: data.daily_stats.map(d => d.weekday),
-                        datasets: [
-                            {
-                                label: '摄入',
-                                data: data.daily_stats.map(d => d.calories_intake),
-                                backgroundColor: 'rgba(102, 126, 234, 0.8)',
-                            },
-                            {
-                                label: '消耗',
-                                data: data.daily_stats.map(d => d.calories_burned),
-                                backgroundColor: 'rgba(16, 185, 129, 0.8)',
-                            }
-                        ]
-                    },
-                    options: {
-                        responsive: true,
-                        plugins: {
-                            legend: {
-                                position: 'top',
-                            }
-                        },
-                        scales: {
-                            y: {
-                                beginAtZero: true
-                            }
-                        }
-                    }
-                });
-            } catch (error) {
-                console.error('加载周数据失败:', error);
-            }
-        }
-
-        // 加载体重数据
-        async function loadWeightData() {
-            try {
-                const res = await fetch('/api/weight?days=30');
-                const data = await res.json();
-
-                if (data.length === 0) return;
-
-                // 按日期排序
-                data.sort((a, b) => a.date.localeCompare(b.date));
-
-                const ctx = document.getElementById('weight-chart').getContext('2d');
-                new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: data.map(d => d.date.slice(5)),
-                        datasets: [{
-                            label: '体重 (kg)',
-                            data: data.map(d => d.weight_kg),
-                            borderColor: 'rgba(118, 75, 162, 1)',
-                            backgroundColor: 'rgba(118, 75, 162, 0.1)',
-                            fill: true,
-                            tension: 0.3,
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        plugins: {
-                            legend: {
-                                display: false
-                            }
-                        },
-                        scales: {
-                            y: {
-                                beginAtZero: false
-                            }
-                        }
-                    }
-                });
-            } catch (error) {
-                console.error('加载体重数据失败:', error);
-            }
-        }
-
-        // 初始化
-        loadTodayData();
-        loadWeekData();
-        loadWeightData();
-
-        // 检查管理员状态并显示管理入口
-        const user = JSON.parse(localStorage.getItem('user') || '{}');
-        if (user.is_admin) {
-            const adminLink = document.getElementById('admin-link');
-            if (adminLink) adminLink.style.display = 'block';
-        }
-    </script>
-
-    <!-- 移动端底部导航 -->
-    <nav class="mobile-nav">
-        <a href="/" class="mobile-nav-item active">
-            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
-            </svg>
-            <span class="nav-label">首页</span>
-        </a>
-        <a href="/exercise" class="mobile-nav-item">
-            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
-            </svg>
-            <span class="nav-label">运动</span>
-        </a>
-        <a href="/meal" class="mobile-nav-item">
-            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/>
-            </svg>
-            <span class="nav-label">饮食</span>
-        </a>
-        <a href="/sleep" class="mobile-nav-item">
-            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-            </svg>
-            <span class="nav-label">睡眠</span>
-        </a>
-        <div class="mobile-nav-item more-trigger" onclick="toggleMoreMenu()">
-            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>
-            </svg>
-            <span class="nav-label">更多</span>
-        </div>
-    </nav>
-    <div id="more-menu" class="more-menu hidden">
-        <a href="/weight" class="more-menu-item">体重</a>
-        <a href="/reading" class="more-menu-item">阅读</a>
-        <a href="/report" class="more-menu-item">报告</a>
-        <a href="/settings" class="more-menu-item">设置</a>
-        <a href="/admin" class="more-menu-item" id="admin-link" style="display:none">管理</a>
-    </div>
-    <style>
-    .mobile-nav {
-        position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
-        background: white; border-top: 1px solid #E2E8F0;
-        display: none; justify-content: space-around; align-items: center; z-index: 50;
     }
-    .mobile-nav-item {
-        display: flex; flex-direction: column; align-items: center; justify-content: center;
-        min-width: 64px; min-height: 44px; color: #64748B; text-decoration: none; cursor: pointer;
+
+    // 加载体重数据
+    async function loadWeightData() {
+        try {
+            const res = await fetch('/api/weight?days=30');
+            const data = await res.json();
+            if (data.length === 0) return;
+
+            data.sort((a, b) => a.date.localeCompare(b.date));
+            const ctx = document.getElementById('weight-chart').getContext('2d');
+
+            const gradient = ctx.createLinearGradient(0, 0, 0, 200);
+            gradient.addColorStop(0, 'rgba(168, 85, 247, 0.3)');
+            gradient.addColorStop(1, 'rgba(168, 85, 247, 0)');
+
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.map(d => d.date.slice(5)),
+                    datasets: [{
+                        label: '体重 (kg)',
+                        data: data.map(d => d.weight_kg),
+                        borderColor: 'rgba(168, 85, 247, 1)',
+                        backgroundColor: gradient,
+                        fill: true,
+                        tension: 0.4,
+                        pointBackgroundColor: '#a855f7',
+                        pointBorderColor: '#fff',
+                        pointBorderWidth: 2,
+                        pointRadius: 4,
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: { legend: { display: false } },
+                    scales: { y: { beginAtZero: false, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } }
+                }
+            });
+        } catch (error) {
+            console.error('加载体重数据失败:', error);
+        }
     }
-    .mobile-nav-item.active { color: #667eea; }
-    .nav-icon { width: 24px; height: 24px; margin-bottom: 2px; }
-    .nav-label { font-size: 10px; font-weight: 500; }
-    .more-menu {
-        position: fixed; bottom: 72px; right: 16px; background: white;
-        border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 8px 0; z-index: 51;
-    }
-    .more-menu.hidden { display: none; }
-    .more-menu-item { display: block; padding: 12px 24px; color: #1E293B; text-decoration: none; }
-    .more-menu-item:hover { background: #F1F5F9; }
-    @media (max-width: 768px) { .mobile-nav { display: flex; } }
-    </style>
-    <script>
+
+    // 切换更多菜单
     function toggleMoreMenu() {
         document.getElementById('more-menu').classList.toggle('hidden');
     }
     document.addEventListener('click', function(e) {
-        if (!e.target.closest('.more-trigger') && !e.target.closest('.more-menu')) {
+        if (!e.target.closest('.more-trigger') && !e.target.closest('#more-menu')) {
             document.getElementById('more-menu').classList.add('hidden');
         }
     });
-    </script>
+
+    // 初始化
+    loadTodayData();
+    loadWeekData();
+    loadWeightData();
+
+    // 检查管理员状态
+    const user = JSON.parse(localStorage.getItem('user') || '{}');
+    if (user.is_admin) {
+        const adminLink = document.getElementById('admin-link');
+        if (adminLink) adminLink.style.display = 'flex';
+    }
+</script>
 </body>
 </html>
 """
@@ -4321,6 +4326,11 @@ def get_exercise_page_html() -> str:
         </header>
 
         <div class="grid">
+            <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
+                <h3 style="color: rgba(255,255,255,0.85);">今日步数</h3>
+                <div class="value" id="today-steps" style="color: white;">--<span class="unit">步</span></div>
+                <div style="font-size: 12px; margin-top: 4px; color: rgba(255,255,255,0.7);" id="steps-sync-time">--</div>
+            </div>
             <div class="card">
                 <h3>本月运动次数</h3>
                 <div class="value" id="month-count">--</div>
@@ -4333,10 +4343,6 @@ def get_exercise_page_html() -> str:
                 <h3>本月消耗卡路里</h3>
                 <div class="value" id="month-calories">--<span class="unit">卡</span></div>
             </div>
-            <div class="card">
-                <h3>最常运动类型</h3>
-                <div class="value" id="top-type">--</div>
-            </div>
         </div>
 
         <div class="chart-container">
@@ -4607,6 +4613,32 @@ def get_exercise_page_html() -> str:
         document.getElementById('addExerciseForm').addEventListener('submit', submitExerciseForm);
         loadExerciseStats();
         loadExerciseList();
+        loadTodaySteps();
+
+        async function loadTodaySteps() {
+            try {
+                const res = await fetch('/api/steps/today');
+                const data = await res.json();
+
+                const stepsEl = document.getElementById('today-steps');
+                const syncTimeEl = document.getElementById('steps-sync-time');
+
+                if (data.steps > 0) {
+                    stepsEl.innerHTML = `${data.steps.toLocaleString()}<span class="unit">步</span>`;
+                    if (data.synced_at) {
+                        const syncTime = new Date(data.synced_at);
+                        syncTimeEl.textContent = `同步于 ${syncTime.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'})}`;
+                    } else {
+                        syncTimeEl.textContent = '';
+                    }
+                } else {
+                    stepsEl.innerHTML = `0<span class="unit">步</span>`;
+                    syncTimeEl.innerHTML = '<a href="/settings#steps-setup" style="color: rgba(255,255,255,0.9);">设置步数同步 →</a>';
+                }
+            } catch (error) {
+                console.error('加载步数失败:', error);
+            }
+        }
 
         // 检查管理员状态
         const user = JSON.parse(localStorage.getItem('user') || '{}');
@@ -8189,6 +8221,47 @@ def get_settings_page_html() -> str:
             </div>
         </div>
 
+        <!-- 步数同步设置 -->
+        <div class="section" id="steps-setup">
+            <h2>Apple Health 步数同步</h2>
+            <p style="color: #64748B; margin-bottom: 20px;">通过 iOS 快捷指令自动同步 Apple Health 步数数据</p>
+
+            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 12px; margin-bottom: 20px;">
+                <div style="font-size: 0.85rem; opacity: 0.9; margin-bottom: 4px;">今日步数</div>
+                <div style="font-size: 2rem; font-weight: 700;" id="settings-today-steps">--</div>
+                <div style="font-size: 0.8rem; opacity: 0.8; margin-top: 4px;" id="settings-sync-time">未同步</div>
+            </div>
+
+            <div style="background: #F8FAFC; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
+                <h3 style="font-size: 1.1rem; margin-bottom: 15px; color: #1E293B;">设置步骤</h3>
+                <ol style="color: #475569; padding-left: 20px; line-height: 2;">
+                    <li>在 iPhone 上打开「快捷指令」App</li>
+                    <li>点击右上角「+」创建新快捷指令</li>
+                    <li>添加操作：「查找健康样本」→ 类型选「步数」→ 开始日期「今天的开始」→ 结束日期「现在」</li>
+                    <li>添加操作：「获取变量」→ 选择上一步的「健康样本」</li>
+                    <li>添加操作：「从列表中获取项目」→「最后一项」</li>
+                    <li>添加操作：「获取健康样本的详细信息」→「值」</li>
+                    <li>添加操作：「获取 URL 内容」，配置如下：
+                        <div style="background: #1E293B; color: #E2E8F0; padding: 12px; border-radius: 6px; margin: 10px 0; font-family: monospace; font-size: 0.85rem; overflow-x: auto;">
+                            <div>URL: <span id="api-url" style="color: #60A5FA;">https://你的服务器地址/api/steps</span></div>
+                            <div>方法: POST</div>
+                            <div>请求体: JSON</div>
+                            <div>{</div>
+                            <div>&nbsp;&nbsp;"date": "【当前日期】",</div>
+                            <div>&nbsp;&nbsp;"steps": 【步数值】</div>
+                            <div>}</div>
+                        </div>
+                    </li>
+                    <li>保存快捷指令，命名为「同步步数」</li>
+                    <li>可设置自动化：每天固定时间自动运行</li>
+                </ol>
+            </div>
+
+            <div style="background: #FEF3C7; border-radius: 8px; padding: 15px; color: #92400E;">
+                <strong>提示：</strong>首次运行快捷指令时，系统会询问是否允许访问健康数据和网络，请点击「允许」。
+            </div>
+        </div>
+
         <!-- 账户管理 -->
         <div class="section">
             <h2>账户</h2>
@@ -8858,11 +8931,40 @@ def get_settings_page_html() -> str:
             window.location.href = '/login';
         }
 
+        // 加载今日步数
+        async function loadSettingsSteps() {
+            try {
+                const res = await fetch('/api/steps/today');
+                const data = await res.json();
+
+                const stepsEl = document.getElementById('settings-today-steps');
+                const syncTimeEl = document.getElementById('settings-sync-time');
+
+                if (data.steps > 0) {
+                    stepsEl.textContent = data.steps.toLocaleString() + ' 步';
+                    if (data.synced_at) {
+                        const syncTime = new Date(data.synced_at);
+                        syncTimeEl.textContent = '同步于 ' + syncTime.toLocaleString('zh-CN');
+                    }
+                } else {
+                    stepsEl.textContent = '0 步';
+                    syncTimeEl.textContent = '尚未同步';
+                }
+
+                // 设置 API URL
+                const apiUrl = window.location.origin + '/api/steps';
+                document.getElementById('api-url').textContent = apiUrl;
+            } catch (error) {
+                console.error('加载步数失败:', error);
+            }
+        }
+
         // 页面加载
         document.addEventListener('DOMContentLoaded', () => {
             loadUsers();
             loadProfile();
             loadAccountInfo();
+            loadSettingsSteps();
 
             // BMI 实时计算
             document.getElementById('profile-height').addEventListener('input', calculateBMI);