diff --git a/.env.android b/.env.android
new file mode 100644
index 00000000..6be1ad86
--- /dev/null
+++ b/.env.android
@@ -0,0 +1,35 @@
+# Android 特定配置
+# PawSync Pro - 爪爪连心
+
+# Android 包名
+VITE_ANDROID_PACKAGE_NAME=com.pawsync.pro
+
+# Android 版本号
+VITE_ANDROID_VERSION_CODE=1
+
+# Android 版本名称
+VITE_ANDROID_VERSION_NAME=1.0.0
+
+# Android 最低 SDK 版本
+VITE_ANDROID_MIN_SDK_VERSION=22
+
+# Android 目标 SDK 版本
+VITE_ANDROID_TARGET_SDK_VERSION=34
+
+# 是否启用 Android 原生功能
+VITE_ENABLE_NATIVE_FEATURES=true
+
+# 是否启用 Android 触觉反馈
+VITE_ENABLE_ANDROID_HAPTICS=true
+
+# 是否启用 Android 本地通知
+VITE_ENABLE_ANDROID_LOCAL_NOTIFICATIONS=true
+
+# 是否启用 Android 推送通知
+VITE_ENABLE_ANDROID_PUSH_NOTIFICATIONS=true
+
+# Android 深链接 Scheme
+VITE_ANDROID_DEEP_LINK_SCHEME=com.pawsync.pro
+
+# Android App Links Host
+VITE_ANDROID_APP_LINKS_HOST=pawsync.com
\ No newline at end of file
diff --git a/.env.development b/.env.development
index f1cb3f78..426771bb 100644
--- a/.env.development
+++ b/.env.development
@@ -1,14 +1,23 @@
-# Development Environment Configuration
 # 开发环境配置
+# PawSync Pro - 爪爪连心
 
+# API 地址配置
 VITE_API_URL=http://localhost:3000/api
+
+# 环境标识
 VITE_ENV=development
+
+# 是否启用模拟数据（开发环境默认启用）
 VITE_ENABLE_MOCK_DATA=true
 
-# Backend Server
-VITE_BACKEND_URL=http://localhost:3000
-VITE_WS_URL=ws://localhost:3000
+# 应用版本
+VITE_APP_VERSION=1.0.0
+
+# 是否启用调试模式
+VITE_DEBUG_MODE=true
+
+# 日志级别
+VITE_LOG_LEVEL=debug
 
-# Debug Features
-VITE_ENABLE_DEBUG_LOG=true
-VITE_ENABLE_PERFORMANCE_LOG=false
+# Android 模拟器地址（用于本地调试）
+VITE_ANDROID_EMULATOR_URL=http://10.0.2.2:3000/api
\ No newline at end of file
diff --git a/.trae/documents/design-system.md b/.trae/documents/design-system.md
new file mode 100644
index 00000000..8f246cfc
--- /dev/null
+++ b/.trae/documents/design-system.md
@@ -0,0 +1,374 @@
+# PawSync Pro - 设计系统规范 v2.0
+
+## 1. 设计理念
+
+### 视觉风格
+- **风格定位**: 温暖、精致、专业、高端
+- **设计语言**: 柔和有机形态 + 现代简洁卡片
+- **情感传达**: 温馨陪伴、专业守护、智能科技
+
+### 设计原则
+1. **温暖优先**: 使用暖色调营造家的感觉
+2. **信息清晰**: 数据可视化直观易懂
+3. **交互流畅**: 微动画提升体验品质
+4. **一致性**: 全局设计元素统一
+
+---
+
+## 2. 色彩系统
+
+### 主色调
+```css
+--color-primary: #F5A623;        /* 主橙色 - 按钮、强调 */
+--color-primary-light: #FFB84D;  /* 浅橙色 - 悬停状态 */
+--color-primary-dark: #E09000;   /* 深橙色 - 按下状态 */
+```
+
+### 背景色
+```css
+--color-bg-primary: #FAF7F2;     /* 主背景 - 暖米色 */
+--color-bg-secondary: #FFFFFF;   /* 卡片背景 - 纯白 */
+--color-bg-tertiary: #F5F0E8;    /* 次级背景 - 浅暖灰 */
+```
+
+### 功能色
+```css
+--color-success: #4CAF50;        /* 成功/正常 - 绿色 */
+--color-success-bg: #E8F5E9;     /* 成功背景 */
+--color-warning: #FF9800;        /* 警告 - 橙色 */
+--color-error: #F44336;          /* 错误 - 红色 */
+--color-info: #2196F3;           /* 信息 - 蓝色 */
+```
+
+### 文字色
+```css
+--color-text-primary: #333333;   /* 主文字 - 深灰 */
+--color-text-secondary: #666666; /* 次级文字 - 中灰 */
+--color-text-tertiary: #999999;  /* 辅助文字 - 浅灰 */
+--color-text-white: #FFFFFF;     /* 白文字 */
+```
+
+### 设备状态色
+```css
+--color-device-online: #4CAF50;  /* 在线 - 绿色 */
+--color-device-offline: #999999; /* 离线 - 灰色 */
+--color-device-warning: #FF9800; /* 警告 - 橙色 */
+```
+
+---
+
+## 3. 字体系统
+
+### 字体家族
+```css
+--font-family-primary: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+--font-family-number: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
+```
+
+### 字号规范
+| 级别 | 大小 | 字重 | 用途 |
+|------|------|------|------|
+| H1 | 24px | 700 | 页面标题 |
+| H2 | 20px | 600 | 区块标题 |
+| H3 | 18px | 600 | 卡片标题 |
+| H4 | 16px | 500 | 小标题 |
+| Body | 14px | 400 | 正文 |
+| Caption | 12px | 400 | 辅助说明 |
+| Small | 10px | 400 | 标签 |
+
+### 数字展示
+```css
+/* 大数字 - 统计数据 */
+--font-number-large: 32px/700;
+/* 中数字 - 卡片数据 */
+--font-number-medium: 24px/600;
+/* 小数字 - 辅助数据 */
+--font-number-small: 16px/500;
+```
+
+---
+
+## 4. 间距系统
+
+### 基础单位
+```css
+--spacing-unit: 4px;
+```
+
+### 间距规范
+| Token | 值 | 用途 |
+|-------|-----|------|
+| xs | 4px | 图标与文字间距 |
+| sm | 8px | 紧凑元素间距 |
+| md | 12px | 标准元素间距 |
+| lg | 16px | 区块内间距 |
+| xl | 20px | 区块间间距 |
+| 2xl | 24px | 大区块间距 |
+| 3xl | 32px | 页面边距 |
+
+---
+
+## 5. 圆角系统
+
+```css
+--radius-sm: 8px;     /* 小按钮、标签 */
+--radius-md: 12px;    /* 卡片、输入框 */
+--radius-lg: 16px;    /* 大卡片、模态框 */
+--radius-xl: 20px;    /* 特殊卡片 */
+--radius-full: 9999px; /* 圆形、胶囊 */
+```
+
+---
+
+## 6. 阴影系统
+
+```css
+/* 轻微阴影 - 卡片默认 */
+--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+/* 标准阴影 - 卡片悬停 */
+--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
+
+/* 强调阴影 - 浮动元素 */
+--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
+
+/* 特殊阴影 - FAB按钮 */
+--shadow-fab: 0 4px 12px rgba(245, 166, 35, 0.4);
+```
+
+---
+
+## 7. 组件规范
+
+### 7.1 宠物信息卡片
+```
+┌─────────────────────────────────────┐
+│  ┌────┐  JOJO ♂                     │
+│  │ 🐶 │  柯基犬 · 2岁                │
+│  └────┘  🟢 活力充沛                │
+└─────────────────────────────────────┘
+```
+- 头像: 56px 圆形
+- 名称: 20px 粗体
+- 品种年龄: 14px 常规
+- 状态标签: 12px 绿色背景胶囊
+
+### 7.2 功能网格卡片
+```
+┌──────────┐
+│   🔵     │  图标: 48px 圆形背景
+│  AI问诊  │  标题: 14px 中等
+│ 智能问答 │  描述: 12px 浅灰
+└──────────┘
+```
+- 卡片: 圆角 16px, 白色背景
+- 图标区: 48px 圆形, 浅色背景
+- 间距: 8px 图标与文字
+
+### 7.3 设备卡片
+```
+┌─────────────────┐
+│      📷         │  设备图: 80px
+│   ● 在线        │  状态点: 6px
+│  JOJO的碗       │  名称: 14px
+│  🔋 85%         │  电量: 12px
+└─────────────────┘
+```
+- 卡片: 圆角 12px
+- 状态点: 6px 圆形, 绿色
+- 电量图标: 12px
+
+### 7.4 数据卡片
+```
+┌─────────────────┐
+│ 🍽️ 进食次数     │  图标+标题
+│                 │
+│    8 次         │  数字: 32px 粗体
+│    ● 正常       │  状态: 12px
+└─────────────────┘
+```
+- 数字: 32px 粗体, DIN字体
+- 单位: 14px 常规
+- 状态: 12px 带色点
+
+### 7.5 记录时间线
+```
+●──────────────┐
+│ 08:30        │
+│ 🍽️ 喂食      │
+│ 喂食120g狗粮 │
+└──────────────┘
+```
+- 时间点: 10px 彩色圆点
+- 时间: 12px 浅灰
+- 标题: 16px 中等
+- 描述: 14px 常规
+
+### 7.6 底部导航
+```
+┌────┬────┬────┬────┬────┐
+│ 🏠 │ 📷 │ ➕ │ ❤️ │ 👤 │
+│首页│设备│记录│健康│我的│
+└────┴────┴────┴────┴────┘
+```
+- 高度: 64px + safe-area
+- 图标: 24px
+- 文字: 10px
+- 选中: 橙色
+- FAB: 56px 圆形, 橙色, 居中
+
+---
+
+## 8. 页面布局规范
+
+### 8.1 首页结构
+```
+┌─────────────────────────────┐
+│ 状态栏                       │
+├─────────────────────────────┤
+│ 宠物信息卡片                  │ ← 固定顶部
+├─────────────────────────────┤
+│ 宠物3D展示区                  │ ← 可滑动
+├─────────────────────────────┤
+│ 功能网格 (4列)               │
+├─────────────────────────────┤
+│ 我的设备 (横向滚动)          │
+├─────────────────────────────┤
+│ 今日饮食数据 (4列)           │
+├─────────────────────────────┤
+│ 其他内容...                  │
+└─────────────────────────────┘
+│      底部导航栏              │ ← 固定底部
+└─────────────────────────────┘
+```
+
+### 8.2 记录页面结构
+```
+┌─────────────────────────────┐
+│ 标题: 记录                   │
+│ 副标题: 记录每一次陪伴...     │
+├─────────────────────────────┤
+│ 分类筛选: 全部|喂食|饮水|... │ ← 横向滚动
+├─────────────────────────────┤
+│ 日期选择器                   │
+├─────────────────────────────┤
+│ 时间线列表                   │ ← 主内容区
+│ ● 喂食 08:30                 │
+│ ● 饮水 10:15                 │
+│ ...                          │
+├─────────────────────────────┤
+│ 历史日期汇总                 │ ← 可折叠
+└─────────────────────────────┘
+```
+
+---
+
+## 9. 动画规范
+
+### 9.1 过渡动画
+```css
+/* 标准过渡 */
+--transition-fast: 150ms ease;
+--transition-normal: 250ms ease;
+--transition-slow: 350ms ease;
+
+/* 弹性过渡 */
+--transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+```
+
+### 9.2 交互动画
+- 按钮按下: scale(0.96), 150ms
+- 卡片悬停: translateY(-2px), shadow-lg, 250ms
+- 页面切换: fade + slide, 300ms
+- 数字变化: count-up, 500ms
+- 加载状态: pulse/skeleton, 无限循环
+
+---
+
+## 10. 图标规范
+
+### 图标尺寸
+| 用途 | 尺寸 | 描边宽度 |
+|------|------|----------|
+| 导航图标 | 24px | 2px |
+| 功能图标 | 20px | 2px |
+| 列表图标 | 16px | 1.5px |
+| 状态图标 | 12px | 1.5px |
+
+### 图标风格
+- 线性图标为主
+- 圆角端点 (round)
+- 统一线宽
+- 简洁几何形态
+
+---
+
+## 11. 响应式断点
+
+```css
+/* 移动端优先 */
+--screen-sm: 375px;   /* 小屏手机 */
+--screen-md: 414px;   /* 大屏手机 */
+--screen-lg: 768px;   /* 平板 */
+--screen-xl: 1024px;  /* 大平板/小屏桌面 */
+```
+
+---
+
+## 12. 功能入口映射
+
+### 首页功能入口
+| 功能 | 目标页面 | 图标 | 描述 |
+|------|----------|------|------|
+| AI问诊 | AIConsultantPage | Stethoscope | 智能问答 |
+| 健康报告 | HealthReportPage | FileText | 今日生成 |
+| 饮食建议 | DietAdvicePage | Utensils | 科学喂养 |
+| 宠物档案 | PetProfilePage | PawPrint | 记录成长 |
+
+### 设备入口
+| 功能 | 目标页面 | 说明 |
+|------|----------|------|
+| 智能项圈 | CameraPage | 监控设备 |
+| 喂食器 | CameraPage | 监控设备 |
+| 饮水机 | CameraPage | 监控设备 |
+| 添加设备 | DevicePairing | 设备配对 |
+
+### 底部导航
+| Tab | 页面 | 图标 |
+|-----|------|------|
+| 首页 | HomePage | Home |
+| 设备 | DevicesPage | Camera |
+| 记录 | RecordsPage | PlusCircle (FAB) |
+| 健康 | HealthPage | Heart |
+| 我的 | ProfilePage | User |
+
+---
+
+## 13. 数据展示规范
+
+### 统计数据展示
+```
+数值 + 单位 + 状态
+例: 8 次 ● 正常
+```
+
+### 时间展示
+```
+今天: "今天"
+昨天: "昨天"
+本周: "周一" ~ "周日"
+其他: "5月20日"
+```
+
+### 状态标签
+```
+正常: 绿色圆点 + "正常"
+异常: 橙色圆点 + "注意"
+警告: 红色圆点 + "异常"
+```
+
+---
+
+*文档版本: v2.0*
+*更新日期: 2026-06-12*
+*设计团队: PawSync Pro Design Team*
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index db079c8e..9c0556e8 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -9,13 +9,20 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-action-sheet')
+    implementation project(':capacitor-app')
+    implementation project(':capacitor-app-launcher')
     implementation project(':capacitor-camera')
+    implementation project(':capacitor-dialog')
+    implementation project(':capacitor-geolocation')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-local-notifications')
     implementation project(':capacitor-preferences')
     implementation project(':capacitor-push-notifications')
     implementation project(':capacitor-share')
+    implementation project(':capacitor-splash-screen')
+    implementation project(':capacitor-status-bar')
 
 }
 
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index a4778eed..1a3209fc 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -2,9 +2,24 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-action-sheet'
+project(':capacitor-action-sheet').projectDir = new File('../node_modules/@capacitor/action-sheet/android')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
+include ':capacitor-app-launcher'
+project(':capacitor-app-launcher').projectDir = new File('../node_modules/@capacitor/app-launcher/android')
+
 include ':capacitor-camera'
 project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
 
+include ':capacitor-dialog'
+project(':capacitor-dialog').projectDir = new File('../node_modules/@capacitor/dialog/android')
+
+include ':capacitor-geolocation'
+project(':capacitor-geolocation').projectDir = new File('../node_modules/@capacitor/geolocation/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 
@@ -22,3 +37,9 @@ project(':capacitor-push-notifications').projectDir = new File('../node_modules/
 
 include ':capacitor-share'
 project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
+
+include ':capacitor-splash-screen'
+project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
diff --git a/package-lock.json b/package-lock.json
index 223a6360..b4b91776 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,23 @@
       "name": "爪爪连心❤️",
       "version": "1.0.0",
       "dependencies": {
+        "@capacitor/action-sheet": "^8.1.1",
         "@capacitor/android": "^8.3.4",
+        "@capacitor/app": "^8.1.0",
+        "@capacitor/app-launcher": "^8.0.1",
         "@capacitor/camera": "^8.0.0",
         "@capacitor/cli": "^8.3.4",
         "@capacitor/core": "^8.3.4",
+        "@capacitor/dialog": "^8.0.1",
+        "@capacitor/geolocation": "^8.2.0",
         "@capacitor/haptics": "^8.0.2",
         "@capacitor/keyboard": "^8.0.3",
         "@capacitor/local-notifications": "^8.2.0",
         "@capacitor/preferences": "^8.0.0",
         "@capacitor/push-notifications": "^8.1.1",
         "@capacitor/share": "^8.0.1",
+        "@capacitor/splash-screen": "^8.0.1",
+        "@capacitor/status-bar": "^8.0.2",
         "@emotion/is-prop-valid": "^1.4.0",
         "clsx": "^2.1.1",
         "framer-motion": "^12.40.0",
@@ -47,6 +54,7 @@
         "jsdom": "^29.1.1",
         "postcss": "^8.5.3",
         "tailwindcss": "^3.4.14",
+        "terser": "^5.48.0",
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.30.1",
         "vite": "^6.3.5",
@@ -440,6 +448,15 @@
         "specificity": "bin/cli.js"
       }
     },
+    "node_modules/@capacitor/action-sheet": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/action-sheet/-/action-sheet-8.1.1.tgz",
+      "integrity": "sha512-yHuGSR/FS2dDr9oBmy+Ql+y7/i5XsUAlENx5oRND5NtzsNLLiFxpNPGLWV27aU9uf9ICjI92VzH93Zh0g2FL1A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@capacitor/android": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-8.3.4.tgz",
@@ -449,6 +466,24 @@
         "@capacitor/core": "^8.3.0"
       }
     },
+    "node_modules/@capacitor/app": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-8.1.0.tgz",
+      "integrity": "sha512-MlmttTOWHDedr/G4SrhNRxsXMqY+R75S4MM4eIgzsgCzOYhb/MpCkA5Q3nuOCfL1oHm26xjUzqZ5aupbOwdfYg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
+    "node_modules/@capacitor/app-launcher": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/app-launcher/-/app-launcher-8.0.1.tgz",
+      "integrity": "sha512-23D8zi74sn7kxvISix8qYwgqdxGJN+4NImcNGvHen98LB1zb4eZfkJvFvp7pwntxGw4OjIE7yuf4wbzZxQHpog==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@capacitor/camera": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/@capacitor/camera/-/camera-8.2.0.tgz",
@@ -520,6 +555,27 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@capacitor/dialog": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/dialog/-/dialog-8.0.1.tgz",
+      "integrity": "sha512-Dq0mZBsd++7CvPvpD2gfbUB44k/zCoe5K9IgYmMImQ4Yphu4/MxLVpFDFAqSya011UBBTGPrUQGVacIW3jDNkw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
+    "node_modules/@capacitor/geolocation": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/geolocation/-/geolocation-8.2.0.tgz",
+      "integrity": "sha512-N29QcoIPmme0xSxRkm7+3hjoHp6mBAOarxecvtCCZKyOBeKiJsFUq981cezg2XWBa6fhCXJMCCjQPngKK/dIag==",
+      "license": "MIT",
+      "dependencies": {
+        "@capacitor/synapse": "^1.0.4"
+      },
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@capacitor/haptics": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-8.0.2.tgz",
@@ -574,6 +630,30 @@
         "@capacitor/core": ">=8.0.0"
       }
     },
+    "node_modules/@capacitor/splash-screen": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/splash-screen/-/splash-screen-8.0.1.tgz",
+      "integrity": "sha512-c/ew/Z3eA7z8l06WoRAtzVF16VwYYrExmHmfGq1Cg675pVzaC/yuucB8/1xG1vhEfnW4fZ1KhSf/kzR1RiVYgg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
+    "node_modules/@capacitor/status-bar": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.2.tgz",
+      "integrity": "sha512-WXs8YB8B9eEaPZz+bcdY6t2nForF1FLoj/JU0Dl9RRgQnddnS98FEEyDooQhaY7wivr000j4+SC1FyeJkrFO7A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
+    "node_modules/@capacitor/synapse": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/synapse/-/synapse-1.0.4.tgz",
+      "integrity": "sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==",
+      "license": "ISC"
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
@@ -1595,6 +1675,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
@@ -3168,6 +3259,13 @@
         "node": "*"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -6012,6 +6110,16 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6022,6 +6130,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/split2": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
@@ -6235,6 +6354,32 @@
         "node": ">=18"
       }
     },
+    "node_modules/terser": {
+      "version": "5.48.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.48.0.tgz",
+      "integrity": "sha512-J/9An6vs9Us6wKRriSFXBWdRZapREHqFzdNUKk0pmu804EMR6dr6winwo7e5JDxN4xahxQsuysyYFwlwj4XN/Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
diff --git a/package.json b/package.json
index 4b2ee205..e08db7d1 100644
--- a/package.json
+++ b/package.json
@@ -7,25 +7,43 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:android": "vite --mode android",
     "build": "vite build",
+    "build:android": "vite build --mode android && npx cap sync android",
+    "build:production": "vite build --mode production",
     "lint": "eslint .",
     "preview": "vite preview",
     "check": "tsc -b --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "cap:init": "npx cap init",
+    "cap:add:android": "npx cap add android",
+    "cap:sync": "npx cap sync",
+    "cap:sync:android": "npx cap sync android",
+    "cap:open:android": "npx cap open android",
+    "android:run": "npm run build:android && npx cap run android",
+    "android:build:apk": "npm run build:android && cd android && ./gradlew assembleDebug",
+    "android:build:release": "npm run build:android && cd android && ./gradlew assembleRelease"
   },
   "dependencies": {
+    "@capacitor/action-sheet": "^8.1.1",
     "@capacitor/android": "^8.3.4",
+    "@capacitor/app": "^8.1.0",
+    "@capacitor/app-launcher": "^8.0.1",
     "@capacitor/camera": "^8.0.0",
     "@capacitor/cli": "^8.3.4",
     "@capacitor/core": "^8.3.4",
+    "@capacitor/dialog": "^8.0.1",
+    "@capacitor/geolocation": "^8.2.0",
     "@capacitor/haptics": "^8.0.2",
     "@capacitor/keyboard": "^8.0.3",
     "@capacitor/local-notifications": "^8.2.0",
     "@capacitor/preferences": "^8.0.0",
     "@capacitor/push-notifications": "^8.1.1",
     "@capacitor/share": "^8.0.1",
+    "@capacitor/splash-screen": "^8.0.1",
+    "@capacitor/status-bar": "^8.0.2",
     "@emotion/is-prop-valid": "^1.4.0",
     "clsx": "^2.1.1",
     "framer-motion": "^12.40.0",
@@ -55,6 +73,7 @@
     "jsdom": "^29.1.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.14",
+    "terser": "^5.48.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5",
diff --git a/src/App.tsx b/src/App.tsx
index ac5399db..4aa38eb3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,9 @@ import { useAppStore } from './store/appStore';
 import { PawPrint } from 'lucide-react';
 import { useDeviceCapabilities, applyPerformanceClass } from './utils/performanceDetection';
 import { FloatingActionButton } from './components/FloatingActionButton';
+import { initializeAndroidPerformance } from './config/androidPerformance';
+// 引入 Apple 风格全局样式
+import './styles/apple-style.css';
 
 // 懒加载其他页面（性能优化）
 const TranslatorPage = lazy(() => import('./pages/TranslatorPage'));
@@ -37,6 +40,11 @@ const SettingsPage = lazy(() => import('./pages/SettingsPage'));
 const FavoritesPage = lazy(() => import('./pages/FavoritesPage'));
 const HelpFeedbackPage = lazy(() => import('./pages/HelpFeedbackPage'));
 const DeveloperInfoPage = lazy(() => import('./pages/DeveloperInfoPage'));
+// 新增页面
+const PetProfilePage = lazy(() => import('./pages/PetProfilePage'));
+const DevicesPage = lazy(() => import('./pages/DevicesPage'));
+const DietDataPage = lazy(() => import('./pages/DietDataPage'));
+const RecordsPage = lazy(() => import('./pages/RecordsPage'));
 
 // 页面加载占位符
 const PageLoader = () => (
@@ -91,6 +99,9 @@ export default function App() {
   const capabilities = useDeviceCapabilities();
 
   useEffect(() => {
+    // 初始化 Android 性能优化
+    initializeAndroidPerformance();
+    
     if (!isInitialized) {
       initializeApp();
     }
@@ -163,6 +174,17 @@ export default function App() {
         return <DeveloperInfoPage onNavigate={setCurrentPage} />;
       case 'history':
         return <TranslatorPage />;
+      // 新增页面路由
+      case 'pet-profile':
+        return <PetProfilePage onNavigate={setCurrentPage} />;
+      case 'devices':
+        return <DevicesPage onNavigate={setCurrentPage} />;
+      case 'diet-data':
+        return <DietDataPage onNavigate={setCurrentPage} />;
+      case 'records':
+        return <RecordsPage onNavigate={setCurrentPage} />;
+      case 'diet-advice':
+        return <HealthManualPage onNavigate={setCurrentPage} />;
       default:
         return <HomePage onNavigate={setCurrentPage} />;
     }
diff --git a/src/components/AddReminderModal.tsx b/src/components/AddReminderModal.tsx
index 844cb04e..730535e1 100644
--- a/src/components/AddReminderModal.tsx
+++ b/src/components/AddReminderModal.tsx
@@ -24,6 +24,16 @@ interface AddReminderModalProps {
   petBirthday?: string;
   lastVaccineDate?: string;
   lastDewormingDate?: string;
+  editingReminder?: {
+    id: string;
+    type: ReminderType;
+    title: string;
+    notes?: string;
+    date: string;
+    time: string;
+    repeat: RepeatType;
+    endDate?: string;
+  } | null;
 }
 
 const REPEAT_OPTIONS = [
@@ -54,6 +64,7 @@ export const AddReminderModal: React.FC<AddReminderModalProps> = ({
   petBirthday,
   lastVaccineDate,
   lastDewormingDate,
+  editingReminder,
 }) => {
   const [selectedType, setSelectedType] = useState<ReminderType>('vaccine');
   const [title, setTitle] = useState('');
@@ -129,8 +140,21 @@ export const AddReminderModal: React.FC<AddReminderModalProps> = ({
   useEffect(() => {
     if (isOpen) {
       generateSmartRecommendations();
+      
+      // 如果是编辑模式，填充表单数据
+      if (editingReminder) {
+        setSelectedType(editingReminder.type);
+        setTitle(editingReminder.title);
+        setNotes(editingReminder.notes || '');
+        setDate(editingReminder.date);
+        setTime(editingReminder.time);
+        setRepeat(editingReminder.repeat);
+        setEndDate(editingReminder.endDate || '');
+      } else {
+        resetForm();
+      }
     }
-  }, [isOpen, generateSmartRecommendations]);
+  }, [isOpen, generateSmartRecommendations, editingReminder]);
 
   const applyRecommendation = (rec: { type: ReminderType; suggestedDate: string; suggestedTime: string; reason: string }) => {
     setSelectedType(rec.type);
@@ -217,7 +241,7 @@ export const AddReminderModal: React.FC<AddReminderModalProps> = ({
   };
 
   return (
-    <GlassModal isOpen={isOpen} onClose={handleClose} title="添加提醒" size="md">
+    <GlassModal isOpen={isOpen} onClose={handleClose} title={editingReminder ? '编辑提醒' : '添加提醒'} size="md">
       <div className="space-y-5 md:space-y-5">
         {errors.pet && (
           <div className="p-3 rounded-xl bg-danger-50 border border-danger-200 text-danger-700 text-sm">
@@ -436,7 +460,7 @@ export const AddReminderModal: React.FC<AddReminderModalProps> = ({
               onClick={handleSubmit}
               className="flex-1 px-4 py-3 md:py-2.5 rounded-xl bg-gradient-to-r from-purple-500 to-purple-600 text-white font-medium hover:shadow-lg hover:shadow-purple-500/30 active:from-purple-600 active:to-purple-700 transition-all min-h-[48px] md:min-h-0"
             >
-              添加提醒
+              {editingReminder ? '保存修改' : '添加提醒'}
             </button>
           </div>
         </div>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 7ca4870b..eb161a50 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,199 +1,222 @@
-import React, { memo, useMemo, useCallback, useRef, useEffect, useState } from 'react';
-import { Home, Shield, Sparkles, Camera, User } from 'lucide-react';
-
-const debounce = <T extends (...args: unknown[]) => unknown>(
-  func: T,
-  wait: number
-): ((...args: Parameters<T>) => void) => {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-  
-  return (...args: Parameters<T>) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      func(...args);
-      timeoutId = null;
-    }, wait);
-  };
-};
-
-const throttle = <T extends (...args: unknown[]) => unknown>(
-  func: T,
-  limit: number
-): ((...args: Parameters<T>) => void) => {
-  let inThrottle = false;
-  let lastArgs: Parameters<T> | null = null;
-  
-  return (...args: Parameters<T>) => {
-    if (!inThrottle) {
-      func(...args);
-      inThrottle = true;
-      setTimeout(() => {
-        inThrottle = false;
-        if (lastArgs) {
-          func(...lastArgs);
-          lastArgs = null;
-        }
-      }, limit);
-    } else {
-      lastArgs = args;
-    }
-  };
-};
-
-const useVisibilityChange = (
-  onVisible?: () => void,
-  onHidden?: () => void
-): boolean => {
-  const [isVisible, setIsVisible] = useState(!document.hidden);
-  const onVisibleRef = useRef(onVisible);
-  const onHiddenRef = useRef(onHidden);
-
-  useEffect(() => {
-    onVisibleRef.current = onVisible;
-    onHiddenRef.current = onHidden;
-  }, [onVisible, onHidden]);
-
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      const visible = !document.hidden;
-      setIsVisible(visible);
-      
-      if (visible) {
-        onVisibleRef.current?.();
-      } else {
-        onHiddenRef.current?.();
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
-
-  return isVisible;
-};
+// ============================================
+// PawSync Pro - Navigation.tsx
+//
+// 作者: 带娃的小陈工
+// 日期: 2026-06-12
+// 描述: 固定底部导航栏 - Apple风格设计
+// ============================================
+
+import React, { memo, useMemo, useCallback } from 'react';
+import { Home, Camera, PlusCircle, Heart, User } from 'lucide-react';
+import { useResponsiveStyle } from '../lib/responsive';
 
 interface NavigationProps {
   currentPage: string;
   onNavigate: (page: string) => void;
 }
 
+// 导航项配置
+const navItems = [
+  { id: 'home', label: '首页', icon: Home },
+  { id: 'devices', label: '设备', icon: Camera },
+  { id: 'records', label: '记录', icon: PlusCircle, isFab: true },
+  { id: 'health', label: '健康', icon: Heart },
+  { id: 'profile', label: '我的', icon: User },
+];
+
+// 单个导航项组件
 const NavItem = memo(({ 
   label, 
   icon: Icon, 
   isActive, 
-  onClick 
+  onClick,
+  isFab = false,
+  colors
 }: { 
   label: string; 
   icon: React.ElementType; 
   isActive: boolean; 
   onClick: () => void;
+  isFab?: boolean;
+  colors: {
+    activeBg: string;
+    activeText: string;
+    inactiveText: string;
+    fabBg: string;
+    fabShadow: string;
+  };
 }) => {
   const handleClick = useCallback(() => {
     onClick();
   }, [onClick]);
 
+  // FAB按钮样式 - 中央凸起按钮
+  if (isFab) {
+    return (
+      <button
+        onClick={handleClick}
+        className="flex flex-col items-center justify-center relative group"
+        aria-label={label}
+        aria-current={isActive ? 'page' : undefined}
+      >
+        {/* FAB容器 */}
+        <div 
+          className={`relative w-14 h-14 rounded-full flex items-center justify-center transition-all duration-300 ease-out ${
+            isActive 
+              ? `${colors.fabBg} ${colors.fabShadow} scale-105` 
+              : `${colors.fabBg} ${colors.fabShadow} hover:scale-105 active:scale-95`
+          }`}
+        >
+          {/* 内圈光晕效果 */}
+          <div className={`absolute inset-1 rounded-full ${isActive ? 'bg-white/20' : 'bg-white/10'} transition-opacity`} />
+          
+          {/* 图标 */}
+          <Icon className="w-7 h-7 text-white relative z-10 transition-transform duration-300 group-hover:rotate-12" />
+          
+          {/* 活动状态指示环 */}
+          {isActive && (
+            <div className="absolute inset-0 rounded-full ring-2 ring-white/30 animate-pulse" />
+          )}
+        </div>
+        
+        {/* 标签 */}
+        <span 
+          className={`text-xs font-medium mt-2 transition-all duration-300 ${
+            isActive 
+              ? `${colors.activeText} font-semibold scale-105` 
+              : `${colors.inactiveText} group-hover:${colors.activeText}`
+          }`}
+        >
+          {label}
+        </span>
+      </button>
+    );
+  }
+
+  // 普通导航项样式
   return (
     <button
       onClick={handleClick}
-      className={`flex flex-col items-center gap-1 p-2 rounded-xl transition-all ${
-        isActive
-          ? 'text-primary-600 bg-primary-50'
-          : 'text-neutral-400 hover:text-neutral-600 hover:bg-neutral-50'
+      className={`flex flex-col items-center justify-center gap-1.5 py-2 px-3 rounded-xl transition-all duration-300 ease-out group relative ${
+        isActive 
+          ? 'bg-gradient-to-br from-orange-50 to-orange-100/80' 
+          : 'hover:bg-gray-50/80 active:bg-gray-100/60'
       }`}
       aria-label={label}
       aria-current={isActive ? 'page' : undefined}
     >
-      <Icon 
-        className={`w-6 h-6 transition-transform duration-300 ${
-          isActive ? 'scale-110' : ''
+      {/* 图标容器 */}
+      <div className={`relative transition-transform duration-300 ${isActive ? 'scale-110' : 'group-hover:scale-105'}`}>
+        {/* 活动状态背景圆 */}
+        {isActive && (
+          <div className={`absolute inset-0 rounded-lg ${colors.activeBg} opacity-20 blur-sm`} />
+        )}
+        
+        {/* 图标 */}
+        <Icon 
+          className={`w-6 h-6 transition-all duration-300 ${
+            isActive 
+              ? `${colors.activeText} drop-shadow-sm` 
+              : `${colors.inactiveText} group-hover:${colors.activeText}`
+          }`}
+        />
+        
+        {/* 活动状态指示点 */}
+        {isActive && (
+          <div className={`absolute -top-1 -right-1 w-2 h-2 rounded-full ${colors.activeBg} animate-pulse`} />
+        )}
+      </div>
+      
+      {/* 标签 */}
+      <span 
+        className={`text-xs transition-all duration-300 ${
+          isActive 
+            ? `${colors.activeText} font-semibold` 
+            : `${colors.inactiveText} font-medium group-hover:${colors.activeText}`
         }`}
-      />
-      <span className={`text-xs font-medium transition-all ${
-        isActive ? 'font-semibold' : ''
-      }`}>
+      >
         {label}
       </span>
+      
+      {/* 活动状态底部指示线 */}
+      {isActive && (
+        <div className={`absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-0.5 rounded-full ${colors.activeBg}`} />
+      )}
     </button>
   );
 });
 
 NavItem.displayName = 'NavItem';
 
-const navItems = [
-  { id: 'home', label: '首页', icon: Home },
-  { id: 'advanced-health', label: '健康', icon: Shield },
-  { id: 'bond-emotion', label: '情感', icon: Sparkles },
-  { id: 'camera-monitor', label: '监控', icon: Camera },
-  { id: 'profile', label: '我的', icon: User },
-];
-
+// 主导航组件
 export const Navigation: React.FC<NavigationProps> = memo(({ currentPage, onNavigate }) => {
-  const [isVisible, setIsVisible] = useState(true);
-  const lastScrollY = useRef(0);
-  const navRef = useRef<HTMLElement>(null);
-
-  const debouncedNavigate = useMemo(
-    () => debounce((page: string) => {
-      requestAnimationFrame(() => {
-        onNavigate(page);
-      });
-    }, 50),
-    [onNavigate]
-  );
-
-  const handleScroll = useMemo(
-    () => throttle(() => {
-      const currentScrollY = window.scrollY;
-      const diff = currentScrollY - lastScrollY.current;
-      
-      if (diff > 50 && currentScrollY > 100) {
-        setIsVisible(false);
-      } else if (diff < -10 || currentScrollY < 100) {
-        setIsVisible(true);
-      }
-      
-      lastScrollY.current = currentScrollY;
-    }, 100),
-    []
-  );
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
-
-  useVisibilityChange(
-    () => setIsVisible(true),
-    () => setIsVisible(false)
-  );
+  const responsiveStyle = useResponsiveStyle();
+  
+  // 颜色配置 - 精细调整的颜色搭配
+  const colors = useMemo(() => ({
+    // 活动状态颜色 - 温暖的橙色系
+    activeBg: 'bg-gradient-to-r from-orange-500 to-orange-400',
+    activeText: 'text-orange-500',
+    
+    // 非活动状态颜色 - 柔和的灰色系
+    inactiveText: 'text-gray-400',
+    
+    // FAB按钮颜色 - 醒目的橙色渐变
+    fabBg: 'bg-gradient-to-br from-orange-500 via-orange-400 to-amber-500',
+    fabShadow: 'shadow-lg shadow-orange-500/40',
+    
+    // 导航栏背景
+    navBg: 'bg-gradient-to-t from-white via-white to-gray-50/30',
+    navBorder: 'border-t border-gray-100/80',
+  }), []);
+
+  // 导航处理
+  const handleNavigate = useCallback((page: string) => {
+    requestAnimationFrame(() => {
+      onNavigate(page);
+    });
+  }, [onNavigate]);
 
   return (
     <nav 
-      ref={navRef}
-      className={`fixed bottom-0 left-0 right-0 bg-white border-t border-neutral-200 px-4 py-3 z-40 transition-transform duration-300 ${
-        isVisible ? 'translate-y-0' : 'translate-y-full'
-      }`}
+      className={`fixed bottom-0 left-0 right-0 z-50 ${colors.navBg} ${colors.navBorder} backdrop-blur-xl`}
+      style={{
+        paddingBottom: responsiveStyle.safeAreaPadding.paddingBottom,
+        paddingTop: '12px',
+      }}
       role="navigation"
       aria-label="主导航"
     >
-      <div className="max-w-md mx-auto flex justify-between sm:justify-around items-center px-2 sm:px-4">
+      {/* 顶部装饰线 */}
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-orange-200/50 to-transparent" />
+      
+      {/* 导航内容 */}
+      <div 
+        className="max-w-md mx-auto flex justify-around items-end px-2"
+        style={{
+          paddingBottom: Math.max(8, responsiveStyle.safeAreaPadding.paddingBottom - 4),
+        }}
+      >
         {navItems.map((item) => (
           <NavItem
             key={item.id}
             label={item.label}
             icon={item.icon}
             isActive={currentPage === item.id}
-            onClick={() => debouncedNavigate(item.id)}
+            onClick={() => handleNavigate(item.id)}
+            isFab={item.isFab}
+            colors={colors}
           />
         ))}
       </div>
+      
+      {/* 底部安全区域填充 */}
+      <div 
+        className="absolute bottom-0 left-0 right-0 bg-white/95"
+        style={{
+          height: 'env(safe-area-inset-bottom, 0px)',
+        }}
+      />
     </nav>
   );
 });
diff --git a/src/config/androidPerformance.ts b/src/config/androidPerformance.ts
new file mode 100644
index 00000000..4aaa8801
--- /dev/null
+++ b/src/config/androidPerformance.ts
@@ -0,0 +1,399 @@
+/**
+ * Android Performance Configuration - Android 性能优化配置
+ *
+ * 针对 Android 平台的性能优化设置
+ * 确保 Android 应用运行流畅，内存占用合理
+ */
+
+import { Capacitor } from '@capacitor/core';
+
+/**
+ * 检查是否为 Android 平台
+ */
+const isAndroid = (): boolean => {
+  return Capacitor.isNativePlatform() && Capacitor.getPlatform() === 'android';
+};
+
+/**
+ * 性能配置接口
+ */
+export interface AndroidPerformanceConfig {
+  // 动画配置
+  animations: {
+    enabled: boolean;
+    reducedMotion: boolean;
+    maxFPS: number;
+    durationMultiplier: number;
+  };
+  
+  // 图片配置
+  images: {
+    lazyLoadEnabled: boolean;
+    maxImageSize: number; // KB
+    compressionQuality: number; // 0-100
+    cacheSize: number; // MB
+  };
+  
+  // 内存配置
+  memory: {
+    maxCacheItems: number;
+    cleanupInterval: number; // ms
+    warningThreshold: number; // MB
+  };
+  
+  // 网络配置
+  network: {
+    requestTimeout: number; // ms
+    retryAttempts: number;
+    cacheEnabled: boolean;
+    prefetchEnabled: boolean;
+  };
+  
+  // UI 配置
+  ui: {
+    virtualListThreshold: number;
+    debounceDelay: number; // ms
+    throttleDelay: number; // ms
+    hardwareAcceleration: boolean;
+  };
+  
+  // 存储配置
+  storage: {
+    maxLocalStorageSize: number; // KB
+    useNativeStorage: boolean;
+    encryptionEnabled: boolean;
+  };
+}
+
+/**
+ * 默认 Android 性能配置
+ */
+const defaultAndroidConfig: AndroidPerformanceConfig = {
+  animations: {
+    enabled: true,
+    reducedMotion: false,
+    maxFPS: 60,
+    durationMultiplier: 1.0,
+  },
+  
+  images: {
+    lazyLoadEnabled: true,
+    maxImageSize: 1024, // 1MB
+    compressionQuality: 80,
+    cacheSize: 50, // 50MB
+  },
+  
+  memory: {
+    maxCacheItems: 100,
+    cleanupInterval: 30000, // 30秒
+    warningThreshold: 150, // 150MB
+  },
+  
+  network: {
+    requestTimeout: 15000, // 15秒
+    retryAttempts: 3,
+    cacheEnabled: true,
+    prefetchEnabled: false,
+  },
+  
+  ui: {
+    virtualListThreshold: 50,
+    debounceDelay: 300,
+    throttleDelay: 100,
+    hardwareAcceleration: true,
+  },
+  
+  storage: {
+    maxLocalStorageSize: 5120, // 5MB
+    useNativeStorage: true,
+    encryptionEnabled: false,
+  },
+};
+
+/**
+ * 低端设备性能配置
+ */
+const lowEndDeviceConfig: AndroidPerformanceConfig = {
+  animations: {
+    enabled: false,
+    reducedMotion: true,
+    maxFPS: 30,
+    durationMultiplier: 0.5,
+  },
+  
+  images: {
+    lazyLoadEnabled: true,
+    maxImageSize: 512, // 512KB
+    compressionQuality: 60,
+    cacheSize: 20, // 20MB
+  },
+  
+  memory: {
+    maxCacheItems: 50,
+    cleanupInterval: 15000, // 15秒
+    warningThreshold: 100, // 100MB
+  },
+  
+  network: {
+    requestTimeout: 20000, // 20秒
+    retryAttempts: 2,
+    cacheEnabled: true,
+    prefetchEnabled: false,
+  },
+  
+  ui: {
+    virtualListThreshold: 30,
+    debounceDelay: 500,
+    throttleDelay: 200,
+    hardwareAcceleration: false,
+  },
+  
+  storage: {
+    maxLocalStorageSize: 2048, // 2MB
+    useNativeStorage: true,
+    encryptionEnabled: false,
+  },
+};
+
+/**
+ * 高端设备性能配置
+ */
+const highEndDeviceConfig: AndroidPerformanceConfig = {
+  animations: {
+    enabled: true,
+    reducedMotion: false,
+    maxFPS: 60,
+    durationMultiplier: 1.0,
+  },
+  
+  images: {
+    lazyLoadEnabled: true,
+    maxImageSize: 2048, // 2MB
+    compressionQuality: 90,
+    cacheSize: 100, // 100MB
+  },
+  
+  memory: {
+    maxCacheItems: 200,
+    cleanupInterval: 60000, // 60秒
+    warningThreshold: 200, // 200MB
+  },
+  
+  network: {
+    requestTimeout: 10000, // 10秒
+    retryAttempts: 3,
+    cacheEnabled: true,
+    prefetchEnabled: true,
+  },
+  
+  ui: {
+    virtualListThreshold: 100,
+    debounceDelay: 200,
+    throttleDelay: 50,
+    hardwareAcceleration: true,
+  },
+  
+  storage: {
+    maxLocalStorageSize: 10240, // 10MB
+    useNativeStorage: true,
+    encryptionEnabled: true,
+  },
+};
+
+/**
+ * 设备性能等级
+ */
+export type DevicePerformanceLevel = 'low' | 'medium' | 'high';
+
+/**
+ * 检测设备性能等级
+ */
+const detectPerformanceLevel = (): DevicePerformanceLevel => {
+  // 检测设备内存
+  const deviceMemory = navigator.deviceMemory || 4; // GB
+  
+  // 检测硬件并发数
+  const hardwareConcurrency = navigator.hardwareConcurrency || 4;
+  
+  // 检测连接速度
+  const connection = (navigator as any).connection;
+  const effectiveType = connection?.effectiveType || '4g';
+  
+  console.log('[AndroidPerformance] Device info:', {
+    memory: deviceMemory,
+    cores: hardwareConcurrency,
+    connection: effectiveType,
+  });
+  
+  // 低端设备判断
+  if (deviceMemory < 2 || hardwareConcurrency < 4 || effectiveType === '2g') {
+    return 'low';
+  }
+  
+  // 高端设备判断
+  if (deviceMemory >= 6 && hardwareConcurrency >= 8 && effectiveType === '4g') {
+    return 'high';
+  }
+  
+  // 默认中等设备
+  return 'medium';
+};
+
+/**
+ * 获取性能配置
+ */
+export const getAndroidPerformanceConfig = (): AndroidPerformanceConfig => {
+  // 非 Android 平台使用默认配置
+  if (!isAndroid()) {
+    return defaultAndroidConfig;
+  }
+  
+  // 检测设备性能等级
+  const level = detectPerformanceLevel();
+  console.log('[AndroidPerformance] Detected performance level:', level);
+  
+  // 根据性能等级返回配置
+  switch (level) {
+    case 'low':
+      return lowEndDeviceConfig;
+    case 'high':
+      return highEndDeviceConfig;
+    default:
+      return defaultAndroidConfig;
+  }
+};
+
+/**
+ * 应用性能配置到 DOM
+ */
+export const applyAndroidPerformanceConfig = (config: AndroidPerformanceConfig): void => {
+  if (!isAndroid()) return;
+  
+  const root = document.documentElement;
+  
+  // 应用动画配置
+  if (!config.animations.enabled || config.animations.reducedMotion) {
+    root.classList.add('reduce-motion');
+  }
+  
+  // 应用硬件加速配置
+  if (config.ui.hardwareAcceleration) {
+    root.classList.add('gpu-accelerated');
+  } else {
+    root.classList.add('no-gpu-acceleration');
+  }
+  
+  // 设置 CSS 变量
+  root.style.setProperty('--animation-duration-multiplier', config.animations.durationMultiplier.toString());
+  root.style.setProperty('--max-fps', config.animations.maxFPS.toString());
+  
+  console.log('[AndroidPerformance] Applied performance config to DOM');
+};
+
+/**
+ * 性能监控
+ */
+export const startPerformanceMonitoring = (config: AndroidPerformanceConfig): void => {
+  if (!isAndroid()) return;
+  
+  // 内存监控
+  const memoryCheckInterval = setInterval(() => {
+    if (performance.memory) {
+      const usedJSHeapSize = performance.memory.usedJSHeapSize / (1024 * 1024);
+      console.log('[AndroidPerformance] Memory usage:', usedJSHeapSize.toFixed(2), 'MB');
+      
+      if (usedJSHeapSize > config.memory.warningThreshold) {
+        console.warn('[AndroidPerformance] Memory usage exceeds threshold!');
+        // 触发清理
+        triggerMemoryCleanup();
+      }
+    }
+  }, config.memory.cleanupInterval);
+  
+  // FPS 监控
+  let lastTime = performance.now();
+  let frameCount = 0;
+  
+  const fpsMonitor = () => {
+    frameCount++;
+    const currentTime = performance.now();
+    
+    if (currentTime - lastTime >= 1000) {
+      const fps = frameCount;
+      console.log('[AndroidPerformance] FPS:', fps);
+      
+      if (fps < config.animations.maxFPS * 0.5) {
+        console.warn('[AndroidPerformance] FPS is too low:', fps);
+      }
+      
+      frameCount = 0;
+      lastTime = currentTime;
+    }
+    
+    requestAnimationFrame(fpsMonitor);
+  };
+  
+  requestAnimationFrame(fpsMonitor);
+  
+  console.log('[AndroidPerformance] Performance monitoring started');
+};
+
+/**
+ * 触发内存清理
+ */
+const triggerMemoryCleanup = (): void => {
+  // 清理图片缓存
+  const images = document.querySelectorAll('img[data-loaded]');
+  images.forEach(img => {
+    if (img.getAttribute('data-loaded') === 'cached') {
+      img.removeAttribute('src');
+      img.removeAttribute('data-loaded');
+    }
+  });
+  
+  // 清理隐藏元素
+  const hiddenElements = document.querySelectorAll('[style*="display: none"]');
+  hiddenElements.forEach(el => {
+    if (el.innerHTML.length > 1000) {
+      el.innerHTML = '';
+    }
+  });
+  
+  console.log('[AndroidPerformance] Memory cleanup triggered');
+};
+
+/**
+ * 初始化 Android 性能优化
+ */
+export const initializeAndroidPerformance = (): void => {
+  if (!isAndroid()) {
+    console.log('[AndroidPerformance] Not Android platform, skipping performance initialization');
+    return;
+  }
+  
+  console.log('[AndroidPerformance] Initializing Android performance optimization...');
+  
+  const config = getAndroidPerformanceConfig();
+  applyAndroidPerformanceConfig(config);
+  startPerformanceMonitoring(config);
+  
+  console.log('[AndroidPerformance] Android performance optimization initialized');
+};
+
+/**
+ * Android 性能优化 Hook
+ */
+export function useAndroidPerformance() {
+  const config = getAndroidPerformanceConfig();
+  const isAndroidDevice = isAndroid();
+  const performanceLevel = detectPerformanceLevel();
+  
+  return {
+    config,
+    isAndroid: isAndroidDevice,
+    performanceLevel,
+    applyConfig: applyAndroidPerformanceConfig,
+    startMonitoring: startPerformanceMonitoring,
+    initialize: initializeAndroidPerformance,
+  };
+}
\ No newline at end of file
diff --git a/src/lib/animations.ts b/src/lib/animations.ts
new file mode 100644
index 00000000..0818f74e
--- /dev/null
+++ b/src/lib/animations.ts
@@ -0,0 +1,549 @@
+/**
+ * Apple Style Animation Library - Apple风格动画库
+ *
+ * 提供Apple级别的流畅动画效果
+ * 包括：页面过渡、手势动画、微交互等
+ */
+
+import { Capacitor } from '@capacitor/core';
+
+// 动画配置
+export const AnimationConfig = {
+  // 动画时长
+  duration: {
+    instant: 0,
+    fast: 150,
+    normal: 250,
+    slow: 350,
+    slower: 500,
+    slowest: 700,
+  },
+  
+  // 动画曲线
+  easing: {
+    linear: 'linear',
+    easeIn: [0.42, 0, 1, 1],
+    easeOut: [0, 0, 0.58, 1],
+    easeInOut: [0.42, 0, 0.58, 1],
+    // Apple 特殊曲线
+    spring: [0.175, 0.885, 0.32, 1.275],
+    bounce: [0.68, -0.55, 0.265, 1.55],
+    smooth: [0.25, 0.1, 0.25, 1],
+    ios: [0.23, 1, 0.32, 1],
+    iosModal: [0.4, 0, 0.2, 1],
+    iosSheet: [0.32, 0.72, 0, 1],
+  },
+  
+  // 原生平台优化
+  native: {
+    useHardwareAcceleration: true,
+    useWillChange: true,
+  },
+};
+
+// 检测是否为原生平台
+const isNative = () => Capacitor.isNativePlatform();
+
+// 将贝塞尔曲线转换为CSS格式
+const bezierToCSS = (bezier: number[]) => 
+  `cubic-bezier(${bezier.join(', ')})`;
+
+/**
+ * 页面过渡动画
+ */
+export const PageTransitions = {
+  // iOS 风格页面推入
+  push: {
+    enter: {
+      opacity: [0, 1],
+      transform: ['translateX(100%)', 'translateX(0)'],
+      duration: AnimationConfig.duration.slow,
+      easing: AnimationConfig.easing.ios,
+    },
+    exit: {
+      opacity: [1, 0],
+      transform: ['translateX(0)', 'translateX(-30%)'],
+      duration: AnimationConfig.duration.slow,
+      easing: AnimationConfig.easing.ios,
+    },
+  },
+  
+  // iOS 风格页面弹出
+  pop: {
+    enter: {
+      opacity: [0, 1],
+      transform: ['translateX(-30%)', 'translateX(0)'],
+      duration: AnimationConfig.duration.slow,
+      easing: AnimationConfig.easing.ios,
+    },
+    exit: {
+      opacity: [1, 0],
+      transform: ['translateX(0)', 'translateX(100%)'],
+      duration: AnimationConfig.duration.slow,
+      easing: AnimationConfig.easing.ios,
+    },
+  },
+  
+  // 模态框弹出
+  modal: {
+    enter: {
+      opacity: [0, 1],
+      transform: ['translateY(100%)', 'translateY(0)'],
+      duration: AnimationConfig.duration.slow,
+      easing: AnimationConfig.easing.iosModal,
+    },
+    exit: {
+      opacity: [1, 0],
+      transform: ['translateY(0)', 'translateY(100%)'],
+      duration: AnimationConfig.duration.normal,
+      easing: AnimationConfig.easing.iosModal,
+    },
+  },
+  
+  // 底部弹出面板
+  sheet: {
+    enter: {
+      opacity: [0, 1],
+      transform: ['translateY(100%)', 'translateY(0)'],
+      duration: AnimationConfig.duration.slow,
+      easing: AnimationConfig.easing.iosSheet,
+    },
+    exit: {
+      opacity: [1, 0],
+      transform: ['translateY(0)', 'translateY(100%)'],
+      duration: AnimationConfig.duration.normal,
+      easing: AnimationConfig.easing.iosSheet,
+    },
+  },
+  
+  // 淡入淡出
+  fade: {
+    enter: {
+      opacity: [0, 1],
+      duration: AnimationConfig.duration.normal,
+      easing: AnimationConfig.easing.easeOut,
+    },
+    exit: {
+      opacity: [1, 0],
+      duration: AnimationConfig.duration.fast,
+      easing: AnimationConfig.easing.easeIn,
+    },
+  },
+};
+
+/**
+ * 微交互动画
+ */
+export const MicroInteractions = {
+  // 按钮点击
+  buttonPress: {
+    scale: [1, 0.97],
+    duration: AnimationConfig.duration.fast,
+    easing: AnimationConfig.easing.ios,
+  },
+  
+  // 按钮释放
+  buttonRelease: {
+    scale: [0.97, 1],
+    duration: AnimationConfig.duration.fast,
+    easing: AnimationConfig.easing.spring,
+  },
+  
+  // 卡片悬停
+  cardHover: {
+    transform: ['translateY(0)', 'translateY(-2px)'],
+    boxShadow: [
+      '0 2px 8px rgba(0,0,0,0.04)',
+      '0 8px 16px rgba(0,0,0,0.08)',
+    ],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.ios,
+  },
+  
+  // 列表项点击
+  listItemPress: {
+    opacity: [1, 0.7],
+    duration: AnimationConfig.duration.fast,
+    easing: AnimationConfig.easing.ios,
+  },
+  
+  // 开关切换
+  toggleSwitch: {
+    transform: ['translateX(0)', 'translateX(20px)'],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.spring,
+  },
+  
+  // 图标旋转
+  iconRotate: {
+    transform: ['rotate(0deg)', 'rotate(180deg)'],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.ios,
+  },
+  
+  // 数字变化
+  numberChange: {
+    opacity: [0, 1],
+    transform: ['translateY(-10px)', 'translateY(0)'],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.spring,
+  },
+};
+
+/**
+ * 手势动画
+ */
+export const GestureAnimations = {
+  // 拖拽跟随
+  dragFollow: {
+    transform: 'translateX(x) translateY(y)',
+    duration: AnimationConfig.duration.instant,
+    easing: AnimationConfig.easing.linear,
+  },
+  
+  // 拖拽释放回弹
+  dragRelease: {
+    transform: ['translateX(x) translateY(y)', 'translateX(0) translateY(0)'],
+    duration: AnimationConfig.duration.slow,
+    easing: AnimationConfig.easing.spring,
+  },
+  
+  // 滑动删除
+  swipeDelete: {
+    opacity: [1, 0],
+    transform: ['translateX(0)', 'translateX(-100%)'],
+    height: ['auto', '0'],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.ios,
+  },
+  
+  // 滑动取消
+  swipeCancel: {
+    transform: ['translateX(x)', 'translateX(0)'],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.spring,
+  },
+};
+
+/**
+ * 加载动画
+ */
+export const LoadingAnimations = {
+  // 骨架屏
+  skeleton: {
+    backgroundPosition: ['-200% 0', '200% 0'],
+    duration: AnimationConfig.duration.slower,
+    easing: AnimationConfig.easing.linear,
+    iterations: Infinity,
+  },
+  
+  // 进度条
+  progress: {
+    width: ['0%', '100%'],
+    duration: AnimationConfig.duration.slowest,
+    easing: AnimationConfig.easing.easeInOut,
+  },
+  
+  // 旋转加载
+  spinner: {
+    transform: ['rotate(0deg)', 'rotate(360deg)'],
+    duration: 1000,
+    easing: AnimationConfig.easing.linear,
+    iterations: Infinity,
+  },
+  
+  // 脉冲
+  pulse: {
+    opacity: [1, 0.5, 1],
+    scale: [1, 1.05, 1],
+    duration: AnimationConfig.duration.slower,
+    easing: AnimationConfig.easing.easeInOut,
+    iterations: Infinity,
+  },
+};
+
+/**
+ * 反馈动画
+ */
+export const FeedbackAnimations = {
+  // 成功反馈
+  success: {
+    opacity: [0, 1],
+    scale: [0.5, 1],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.spring,
+  },
+  
+  // 错误抖动
+  errorShake: {
+    transform: [
+      'translateX(0)',
+      'translateX(-10px)',
+      'translateX(10px)',
+      'translateX(-10px)',
+      'translateX(10px)',
+      'translateX(0)',
+    ],
+    duration: AnimationConfig.duration.slow,
+    easing: AnimationConfig.easing.easeInOut,
+  },
+  
+  // 警告闪烁
+  warningFlash: {
+    opacity: [1, 0.3, 1],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.easeInOut,
+  },
+  
+  // 点赞动画
+  like: {
+    scale: [1, 1.3, 1],
+    duration: AnimationConfig.duration.normal,
+    easing: AnimationConfig.easing.bounce,
+  },
+};
+
+/**
+ * 动画执行器
+ */
+export class AnimationExecutor {
+  private element: HTMLElement;
+  private useNative: boolean;
+
+  constructor(element: HTMLElement) {
+    this.element = element;
+    this.useNative = isNative();
+  }
+
+  // 执行动画
+  animate(config: {
+    opacity?: [number, number];
+    transform?: [string, string];
+    scale?: [number, number];
+    boxShadow?: [string, string];
+    width?: [string, string];
+    height?: [string, string];
+    backgroundPosition?: [string, string];
+    duration: number;
+    easing: number[] | string;
+    iterations?: number;
+    fill?: 'none' | 'forwards' | 'backwards' | 'both';
+    delay?: number;
+  }): Promise<void> {
+    return new Promise((resolve) => {
+      const keyframes: Keyframe[] = [];
+      
+      // 构建起始帧
+      const startFrame: Keyframe = {};
+      const endFrame: Keyframe = { offset: 1 };
+      
+      if (config.opacity) {
+        startFrame.opacity = config.opacity[0];
+        endFrame.opacity = config.opacity[1];
+      }
+      
+      if (config.transform) {
+        startFrame.transform = config.transform[0];
+        endFrame.transform = config.transform[1];
+      }
+      
+      if (config.scale) {
+        startFrame.transform = `scale(${config.scale[0]})`;
+        endFrame.transform = `scale(${config.scale[1]})`;
+      }
+      
+      if (config.boxShadow) {
+        startFrame.boxShadow = config.boxShadow[0];
+        endFrame.boxShadow = config.boxShadow[1];
+      }
+      
+      if (config.width) {
+        startFrame.width = config.width[0];
+        endFrame.width = config.width[1];
+      }
+      
+      if (config.height) {
+        startFrame.height = config.height[0];
+        endFrame.height = config.height[1];
+      }
+      
+      if (config.backgroundPosition) {
+        startFrame.backgroundPosition = config.backgroundPosition[0];
+        endFrame.backgroundPosition = config.backgroundPosition[1];
+      }
+      
+      keyframes.push(startFrame, endFrame);
+      
+      // 动画选项
+      const options: KeyframeAnimationOptions = {
+        duration: config.duration,
+        easing: typeof config.easing === 'string' 
+          ? config.easing 
+          : bezierToCSS(config.easing),
+        fill: config.fill || 'forwards',
+        iterations: config.iterations || 1,
+        delay: config.delay || 0,
+      };
+      
+      // 原生平台优化
+      if (this.useNative && AnimationConfig.native.useHardwareAcceleration) {
+        this.element.style.willChange = 'transform, opacity';
+      }
+      
+      // 执行动画
+      const animation = this.element.animate(keyframes, options);
+      
+      animation.onfinish = () => {
+        if (this.useNative) {
+          this.element.style.willChange = 'auto';
+        }
+        resolve();
+      };
+    });
+  }
+
+  // 快捷方法
+  fadeIn(duration = AnimationConfig.duration.normal): Promise<void> {
+    return this.animate({
+      opacity: [0, 1],
+      duration,
+      easing: AnimationConfig.easing.easeOut,
+    });
+  }
+
+  fadeOut(duration = AnimationConfig.duration.fast): Promise<void> {
+    return this.animate({
+      opacity: [1, 0],
+      duration,
+      easing: AnimationConfig.easing.easeIn,
+    });
+  }
+
+  slideUp(duration = AnimationConfig.duration.slow): Promise<void> {
+    return this.animate({
+      opacity: [0, 1],
+      transform: ['translateY(100%)', 'translateY(0)'],
+      duration,
+      easing: AnimationConfig.easing.iosModal,
+    });
+  }
+
+  slideDown(duration = AnimationConfig.duration.slow): Promise<void> {
+    return this.animate({
+      opacity: [0, 1],
+      transform: ['translateY(-100%)', 'translateY(0)'],
+      duration,
+      easing: AnimationConfig.easing.iosModal,
+    });
+  }
+
+  scaleIn(duration = AnimationConfig.duration.normal): Promise<void> {
+    return this.animate({
+      opacity: [0, 1],
+      scale: [0.9, 1],
+      duration,
+      easing: AnimationConfig.easing.spring,
+    });
+  }
+
+  scaleOut(duration = AnimationConfig.duration.fast): Promise<void> {
+    return this.animate({
+      opacity: [1, 0],
+      scale: [1, 0.9],
+      duration,
+      easing: AnimationConfig.easing.easeIn,
+    });
+  }
+
+  bounce(duration = AnimationConfig.duration.slow): Promise<void> {
+    return this.animate({
+      scale: [1, 1.1, 1],
+      duration,
+      easing: AnimationConfig.easing.bounce,
+    });
+  }
+
+  shake(duration = AnimationConfig.duration.slow): Promise<void> {
+    return this.animate({
+      transform: [
+        'translateX(0)',
+        'translateX(-10px)',
+        'translateX(10px)',
+        'translateX(-10px)',
+        'translateX(10px)',
+        'translateX(0)',
+      ],
+      duration,
+      easing: AnimationConfig.easing.easeInOut,
+    });
+  }
+
+  press(): Promise<void> {
+    return this.animate({
+      scale: [1, 0.97],
+      duration: AnimationConfig.duration.fast,
+      easing: AnimationConfig.easing.ios,
+    });
+  }
+
+  release(): Promise<void> {
+    return this.animate({
+      scale: [0.97, 1],
+      duration: AnimationConfig.duration.fast,
+      easing: AnimationConfig.easing.spring,
+    });
+  }
+}
+
+/**
+ * 创建动画执行器
+ */
+export const createAnimation = (element: HTMLElement) => 
+  new AnimationExecutor(element);
+
+/**
+ * 批量动画
+ */
+export const animateAll = async (
+  elements: HTMLElement[],
+  animationFn: (executor: AnimationExecutor) => Promise<void>
+): Promise<void> => {
+  const promises = elements.map(el => animationFn(new AnimationExecutor(el)));
+  await Promise.all(promises);
+};
+
+/**
+ * 顺序动画
+ */
+export const animateSequence = async (
+  elements: HTMLElement[],
+  animationFn: (executor: AnimationExecutor) => Promise<void>,
+  delay = AnimationConfig.duration.fast
+): Promise<void> => {
+  for (let i = 0; i < elements.length; i++) {
+    await animationFn(new AnimationExecutor(elements[i]));
+    if (i < elements.length - 1) {
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+  }
+};
+
+/**
+ * React Hook - 使用动画
+ */
+export const useAnimation = () => {
+  const createExecutor = (element: HTMLElement | null) => {
+    if (!element) return null;
+    return new AnimationExecutor(element);
+  };
+
+  return {
+    createExecutor,
+    config: AnimationConfig,
+    transitions: PageTransitions,
+    micro: MicroInteractions,
+    gestures: GestureAnimations,
+    loading: LoadingAnimations,
+    feedback: FeedbackAnimations,
+  };
+};
\ No newline at end of file
diff --git a/src/lib/responsive.tsx b/src/lib/responsive.tsx
new file mode 100644
index 00000000..3ddfa142
--- /dev/null
+++ b/src/lib/responsive.tsx
@@ -0,0 +1,347 @@
+/**
+ * Responsive Design System - 响应式设计系统
+ *
+ * 多端分辨率适配，确保无变形
+ * 支持：iPhone SE / iPhone 标准 / iPhone Plus / iPad / iPad Pro
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { Capacitor } from '@capacitor/core';
+
+// 设备类型
+export type DeviceType = 'phone' | 'tablet' | 'desktop';
+
+// 屏幕尺寸
+export type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+// 屏幕方向
+export type Orientation = 'portrait' | 'landscape';
+
+// 设备信息
+export interface DeviceInfo {
+  type: DeviceType;
+  size: ScreenSize;
+  orientation: Orientation;
+  width: number;
+  height: number;
+  pixelRatio: number;
+  isNative: boolean;
+  platform: 'web' | 'android' | 'ios';
+  safeArea: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+}
+
+// 断点配置
+export const breakpoints = {
+  xs: 320,   // iPhone SE
+  sm: 375,   // iPhone 标准
+  md: 414,   // iPhone Plus
+  lg: 768,   // iPad
+  xl: 1024,  // iPad Pro 11
+  '2xl': 1280, // iPad Pro 12.9
+};
+
+// 获取屏幕尺寸
+const getScreenSize = (width: number): ScreenSize => {
+  if (width < breakpoints.xs) return 'xs';
+  if (width < breakpoints.sm) return 'xs';
+  if (width < breakpoints.md) return 'sm';
+  if (width < breakpoints.lg) return 'md';
+  if (width < breakpoints.xl) return 'lg';
+  if (width < breakpoints['2xl']) return 'xl';
+  return '2xl';
+};
+
+// 获取设备类型
+const getDeviceType = (width: number): DeviceType => {
+  if (width < breakpoints.lg) return 'phone';
+  if (width < breakpoints['2xl']) return 'tablet';
+  return 'desktop';
+};
+
+// 获取屏幕方向
+const getOrientation = (width: number, height: number): Orientation => 
+  width > height ? 'landscape' : 'portrait';
+
+// 获取安全区域
+const getSafeArea = (): { top: number; bottom: number; left: number; right: number } => {
+  return {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  };
+};
+
+/**
+ * 获取设备信息
+ */
+export const getDeviceInfo = (): DeviceInfo => {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const pixelRatio = window.devicePixelRatio || 1;
+  
+  return {
+    type: getDeviceType(width),
+    size: getScreenSize(width),
+    orientation: getOrientation(width, height),
+    width,
+    height,
+    pixelRatio,
+    isNative: Capacitor.isNativePlatform(),
+    platform: Capacitor.isNativePlatform() 
+      ? Capacitor.getPlatform() as 'android' | 'ios'
+      : 'web',
+    safeArea: getSafeArea(),
+  };
+};
+
+/**
+ * 响应式 Hook
+ */
+export const useResponsive = () => {
+  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>(getDeviceInfo());
+
+  const updateDeviceInfo = useCallback(() => {
+    setDeviceInfo(getDeviceInfo());
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', updateDeviceInfo);
+    window.addEventListener('orientationchange', updateDeviceInfo);
+    
+    return () => {
+      window.removeEventListener('resize', updateDeviceInfo);
+      window.removeEventListener('orientationchange', updateDeviceInfo);
+    };
+  }, [updateDeviceInfo]);
+
+  return {
+    ...deviceInfo,
+    isPhone: deviceInfo.type === 'phone',
+    isTablet: deviceInfo.type === 'tablet',
+    isDesktop: deviceInfo.type === 'desktop',
+    isPortrait: deviceInfo.orientation === 'portrait',
+    isLandscape: deviceInfo.orientation === 'landscape',
+    isSmall: deviceInfo.size === 'xs' || deviceInfo.size === 'sm',
+    isMedium: deviceInfo.size === 'md',
+    isLarge: deviceInfo.size === 'lg' || deviceInfo.size === 'xl' || deviceInfo.size === '2xl',
+  };
+};
+
+/**
+ * 响应式值 Hook
+ */
+export const useResponsiveValue = <T,>(values: Partial<Record<ScreenSize, T>>, defaultValue: T): T => {
+  const { size } = useResponsive();
+  const sizeOrder: ScreenSize[] = [size, 'md', 'sm', 'xs'];
+  
+  for (const s of sizeOrder) {
+    if (values[s] !== undefined) {
+      return values[s]!;
+    }
+  }
+  
+  return defaultValue;
+};
+
+// 导出响应式样式Hook
+export { useResponsiveStyle } from './responsiveStyle';
+
+/**
+ * 响应式图片尺寸
+ */
+export const getResponsiveImageSize = (
+  originalWidth: number,
+  originalHeight: number,
+  containerWidth: number,
+  containerHeight?: number
+): { width: number; height: number } => {
+  // 保持比例，不变形
+  const aspectRatio = originalWidth / originalHeight;
+  
+  if (containerHeight) {
+    // 有容器高度限制
+    const widthByHeight = containerHeight * aspectRatio;
+    
+    if (widthByHeight <= containerWidth) {
+      return {
+        width: widthByHeight,
+        height: containerHeight,
+      };
+    } else {
+      return {
+        width: containerWidth,
+        height: containerWidth / aspectRatio,
+      };
+    }
+  } else {
+    // 只有宽度限制
+    return {
+      width: containerWidth,
+      height: containerWidth / aspectRatio,
+    };
+  }
+};
+
+/**
+ * 响应式字体缩放
+ */
+export const getResponsiveFontSize = (baseSize: number, pixelRatio: number): number => {
+  // 根据像素密度调整字体大小，确保清晰度
+  if (pixelRatio >= 3) {
+    // 高分辨率屏幕（如 iPhone Pro）
+    return baseSize;
+  } else if (pixelRatio >= 2) {
+    // 标准视网膜屏幕
+    return baseSize;
+  } else {
+    // 低分辨率屏幕
+    return Math.round(baseSize * 1.1);
+  }
+};
+
+/**
+ * CSS 响应式类名生成
+ */
+export const responsiveClasses = {
+  // 容器
+  container: (size: ScreenSize) => {
+    const maxWidths: Record<ScreenSize, string> = {
+      xs: 'max-w-xs',
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-lg',
+      xl: 'max-w-xl',
+      '2xl': 'max-w-2xl',
+    };
+    return maxWidths[size];
+  },
+
+  // 网格列数
+  gridCols: (size: ScreenSize) => {
+    const cols: Record<ScreenSize, string> = {
+      xs: 'grid-cols-2',
+      sm: 'grid-cols-3',
+      md: 'grid-cols-4',
+      lg: 'grid-cols-6',
+      xl: 'grid-cols-8',
+      '2xl': 'grid-cols-10',
+    };
+    return cols[size];
+  },
+
+  // 间距
+  gap: (size: ScreenSize) => {
+    const gaps: Record<ScreenSize, string> = {
+      xs: 'gap-2',
+      sm: 'gap-3',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+      '2xl': 'gap-10',
+    };
+    return gaps[size];
+  },
+
+  // 内边距
+  padding: (size: ScreenSize) => {
+    const paddings: Record<ScreenSize, string> = {
+      xs: 'p-3',
+      sm: 'p-4',
+      md: 'p-5',
+      lg: 'p-6',
+      xl: 'p-8',
+      '2xl': 'p-10',
+    };
+    return paddings[size];
+  },
+
+  // 文字大小
+  text: (size: ScreenSize) => {
+    const texts: Record<ScreenSize, string> = {
+      xs: 'text-sm',
+      sm: 'text-base',
+      md: 'text-lg',
+      lg: 'text-xl',
+      xl: 'text-2xl',
+      '2xl': 'text-3xl',
+    };
+    return texts[size];
+  },
+};
+
+/**
+ * 响应式媒体查询 CSS
+ */
+export const responsiveMediaQueries = {
+  xs: '@media screen and (max-width: 319px)',
+  sm: '@media screen and (min-width: 320px) and (max-width: 374px)',
+  md: '@media screen and (min-width: 375px) and (max-width: 413px)',
+  lg: '@media screen and (min-width: 414px) and (max-width: 767px)',
+  xl: '@media screen and (min-width: 768px) and (max-width: 1023px)',
+  '2xl': '@media screen and (min-width: 1024px)',
+};
+
+/**
+ * 响应式图片 URL 生成
+ */
+export const getResponsiveImageUrl = (
+  baseUrl: string,
+  width: number,
+  options?: {
+    height?: number;
+    quality?: number;
+    format?: 'jpeg' | 'png' | 'webp';
+  }
+): string => {
+  // 如果是 Unsplash 图片，使用其 API 调整尺寸
+  if (baseUrl.includes('unsplash.com')) {
+    const params = new URLSearchParams({
+      w: width.toString(),
+      fit: 'crop',
+      crop: 'faces',
+      auto: 'format',
+      q: (options?.quality || 80).toString(),
+    });
+    
+    if (options?.height) {
+      params.set('h', options.height.toString());
+    }
+    
+    return `${baseUrl}?${params.toString()}`;
+  }
+  
+  // 其他图片源，返回原 URL
+  return baseUrl;
+};
+
+/**
+ * 响应式组件包装器
+ */
+export const ResponsiveWrapper: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}> = ({ children, className = '', style = {} }) => {
+  const { size, safeAreaPadding } = useResponsiveStyle();
+
+  return (
+    <div
+      className={`responsive-wrapper ${responsiveClasses.container(size)} ${className}`}
+      style={{
+        paddingTop: safeAreaPadding.paddingTop,
+        paddingBottom: safeAreaPadding.paddingBottom,
+        paddingLeft: safeAreaPadding.paddingLeft,
+        paddingRight: safeAreaPadding.paddingRight,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/lib/responsiveStyle.ts b/src/lib/responsiveStyle.ts
new file mode 100644
index 00000000..f3bf2a8c
--- /dev/null
+++ b/src/lib/responsiveStyle.ts
@@ -0,0 +1,137 @@
+/**
+ * Responsive Style Hook - 响应式样式Hook
+ *
+ * 提供响应式样式值，确保多端适配
+ */
+
+import { useMemo } from 'react';
+import { useResponsive } from './responsive';
+
+/**
+ * 安全区域Padding接口
+ */
+export interface SafeAreaPadding {
+  paddingTop: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  paddingRight: number;
+}
+
+/**
+ * 响应式样式返回值接口
+ */
+export interface ResponsiveStyleValues {
+  fontSize: number;
+  spacing: number;
+  cardRadius: number;
+  buttonHeight: number;
+  avatarSize: number;
+  iconSize: number;
+  contentMaxWidth: number;
+  safeAreaPadding: SafeAreaPadding;
+  screenWidth: number;
+  screenHeight: number;
+  screenSize: string;
+  isPortrait: boolean;
+  isLandscape: boolean;
+  getResponsiveValue: <T>(values: Partial<Record<string, T>>, defaultValue: T) => T;
+}
+
+/**
+ * 响应式样式Hook
+ */
+export const useResponsiveStyle = (): ResponsiveStyleValues => {
+  const { size, isPortrait, safeArea, width, height } = useResponsive();
+
+  return useMemo(() => {
+    // 根据屏幕尺寸计算样式值
+    const getResponsiveValue = <T>(
+      values: Partial<Record<string, T>>,
+      defaultValue: T
+    ): T => {
+      const sizeOrder = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+      const currentIndex = sizeOrder.indexOf(size);
+      
+      // 从当前尺寸开始向下查找
+      for (let i = currentIndex; i >= 0; i--) {
+        if (values[sizeOrder[i]] !== undefined) {
+          return values[sizeOrder[i]]!;
+        }
+      }
+      
+      // 向上查找
+      for (let i = currentIndex + 1; i < sizeOrder.length; i++) {
+        if (values[sizeOrder[i]] !== undefined) {
+          return values[sizeOrder[i]]!;
+        }
+      }
+      
+      return defaultValue;
+    };
+
+    // 安全区域padding - 确保返回数值类型
+    const safeAreaPadding: SafeAreaPadding = {
+      paddingTop: typeof safeArea.top === 'number' ? safeArea.top : 0,
+      paddingBottom: typeof safeArea.bottom === 'number' ? safeArea.bottom : 0,
+      paddingLeft: typeof safeArea.left === 'number' ? safeArea.left : 0,
+      paddingRight: typeof safeArea.right === 'number' ? safeArea.right : 0,
+    };
+
+    return {
+      // 字体大小
+      fontSize: getResponsiveValue(
+        { xs: 14, sm: 15, md: 16, lg: 17, xl: 18 },
+        15
+      ),
+      
+      // 间距
+      spacing: getResponsiveValue(
+        { xs: 12, sm: 16, md: 18, lg: 24, xl: 28 },
+        16
+      ),
+      
+      // 卡片圆角
+      cardRadius: getResponsiveValue(
+        { xs: 12, sm: 14, md: 16, lg: 18, xl: 20 },
+        14
+      ),
+      
+      // 按钮高度
+      buttonHeight: getResponsiveValue(
+        { xs: 40, sm: 44, md: 48, lg: 52, xl: 56 },
+        44
+      ),
+      
+      // 头像大小
+      avatarSize: getResponsiveValue(
+        { xs: 48, sm: 56, md: 64, lg: 80, xl: 96 },
+        56
+      ),
+      
+      // 图标大小
+      iconSize: getResponsiveValue(
+        { xs: 20, sm: 24, md: 28, lg: 32, xl: 36 },
+        24
+      ),
+      
+      // 内容最大宽度
+      contentMaxWidth: getResponsiveValue(
+        { xs: 320, sm: 375, md: 414, lg: 768, xl: 1024 },
+        375
+      ),
+      
+      // 安全区域padding
+      safeAreaPadding,
+      
+      // 屏幕信息
+      screenWidth: width,
+      screenHeight: height,
+      screenSize: size,
+      isPortrait,
+      isLandscape: !isPortrait,
+      
+      // 工具函数
+      getResponsiveValue,
+    };
+  }, [size, isPortrait, safeArea, width, height]);
+};
\ No newline at end of file
diff --git a/src/pages/DeveloperInfoPage.tsx b/src/pages/DeveloperInfoPage.tsx
index 7922dd30..394d2eb8 100644
--- a/src/pages/DeveloperInfoPage.tsx
+++ b/src/pages/DeveloperInfoPage.tsx
@@ -15,7 +15,7 @@ interface DeveloperInfoPageProps {
 
 export default function DeveloperInfoPage({ onNavigate }: DeveloperInfoPageProps) {
   const developerInfo = {
-    name: '热爱生活的小陈',
+    name: '带娃的小陈工',
     title: '全栈开发者 & 宠物爱好者',
     avatar: '👨‍💻',
     bio: '一个热爱编程、热爱生活、热爱宠物的开发者。在带娃之余，用代码创造美好，让科技温暖每一个毛孩子。',
diff --git a/src/pages/DevicesPage.tsx b/src/pages/DevicesPage.tsx
new file mode 100644
index 00000000..723f07cc
--- /dev/null
+++ b/src/pages/DevicesPage.tsx
@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from 'react';
+import {
+  ChevronLeft,
+  Plus,
+  Battery,
+  Wifi,
+  Settings,
+  MoreVertical,
+  Bell,
+  Camera,
+  Activity,
+  Droplets,
+  Utensils,
+  Zap,
+  Trash2,
+  Power
+} from 'lucide-react';
+import { useDevicesStore, type Device, type DeviceType } from '../store/devicesStore';
+
+interface DevicesPageProps {
+  onNavigate: (page: string) => void;
+}
+
+const DevicesPage: React.FC<DevicesPageProps> = ({ onNavigate }) => {
+  const {
+    devices,
+    isLoading,
+    isPairing,
+    getStats,
+    initialize,
+    startPairing,
+    cancelPairing,
+    removeDevice,
+    updateDeviceStatus,
+  } = useDevicesStore();
+  
+  const [showAddModal, setShowAddModal] = useState(false);
+
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  const stats = getStats() || { total: 0, online: 0, offline: 0, warning: 0 };
+
+  const getDeviceIcon = (type: string) => {
+    switch (type) {
+      case 'camera': return Camera;
+      case 'collar': return Activity;
+      case 'dispenser': return Droplets;
+      case 'bowl': return Utensils;
+      default: return Zap;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'online': return 'bg-green-500';
+      case 'warning': return 'bg-yellow-500';
+      case 'offline': return 'bg-gray-400';
+      default: return 'bg-gray-400';
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'online': return '在线';
+      case 'warning': return '注意';
+      case 'offline': return '离线';
+      default: return '未知';
+    }
+  };
+
+  const getBatteryColor = (battery: number) => {
+    if (battery > 60) return 'text-green-500';
+    if (battery > 20) return 'text-yellow-500';
+    return 'text-red-500';
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FAF7F2]">
+      {/* 顶部导航 */}
+      <div className="bg-white px-4 pt-12 pb-4 sticky top-0 z-50">
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => onNavigate('home')}
+            className="p-2 -ml-2 rounded-full hover:bg-gray-100 transition-colors"
+          >
+            <ChevronLeft className="w-6 h-6 text-gray-600" />
+          </button>
+          <h1 className="text-lg font-bold text-gray-800">我的设备</h1>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="p-2 -mr-2 rounded-full hover:bg-gray-100 transition-colors"
+          >
+            <Plus className="w-5 h-5 text-gray-600" />
+          </button>
+        </div>
+      </div>
+
+      {/* 设备统计 */}
+      <div className="px-4 py-4">
+        <div className="bg-gradient-to-r from-orange-500 to-orange-400 rounded-2xl p-4 text-white">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <p className="text-orange-100 text-sm">已连接设备</p>
+              <p className="text-3xl font-bold">{stats.total || 0}</p>
+            </div>
+            <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
+              <Zap className="w-6 h-6" />
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+              <span className="text-sm">{stats.online || 0} 在线</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
+              <span className="text-sm">{stats.warning || 0} 注意</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 设备列表 */}
+      <div className="px-4 pb-24">
+        <h2 className="text-base font-bold text-gray-800 mb-3">设备列表</h2>
+        <div className="space-y-3">
+          {devices.map((device) => {
+            const DeviceIcon = getDeviceIcon(device.type);
+            return (
+              <div
+                key={device.id}
+                className="bg-white rounded-2xl p-4 shadow-sm"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="w-14 h-14 bg-gray-50 rounded-xl flex items-center justify-center">
+                      <DeviceIcon className="w-7 h-7 text-gray-400" />
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-gray-800">{device.name}</h3>
+                        <span className={`inline-block w-2 h-2 rounded-full ${getStatusColor(device.status)}`}></span>
+                      </div>
+                      <p className="text-xs text-gray-400 mt-1">{getStatusText(device.status)} · {device.lastActive}</p>
+                    </div>
+                  </div>
+                  <button className="p-2 rounded-full hover:bg-gray-100 transition-colors">
+                    <MoreVertical className="w-5 h-5 text-gray-400" />
+                  </button>
+                </div>
+
+                {/* 设备状态详情 */}
+                <div className="flex items-center gap-6 mt-4 pt-4 border-t border-gray-100">
+                  <div className="flex items-center gap-2">
+                    <Battery className={`w-4 h-4 ${getBatteryColor(device.battery)}`} />
+                    <span className={`text-sm ${getBatteryColor(device.battery)}`}>{device.battery}%</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Wifi className="w-4 h-4 text-gray-400" />
+                    <span className="text-sm text-gray-500">{device.signal}%</span>
+                  </div>
+                </div>
+
+                {/* 快捷操作 */}
+                <div className="flex gap-2 mt-3">
+                  {device.type === 'camera' && (
+                    <button
+                      onClick={() => onNavigate('camera-monitor')}
+                      className="flex-1 py-2 bg-blue-50 text-blue-600 rounded-lg text-sm font-medium"
+                    >
+                      查看监控
+                    </button>
+                  )}
+                  <button className="flex-1 py-2 bg-gray-50 text-gray-600 rounded-lg text-sm font-medium">
+                    设置
+                  </button>
+                  <button className="px-3 py-2 bg-gray-50 text-gray-600 rounded-lg">
+                    <Bell className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* 添加设备按钮 */}
+        <button
+          onClick={() => setShowAddModal(true)}
+          className="w-full mt-4 py-4 border-2 border-dashed border-gray-300 rounded-2xl flex items-center justify-center gap-2 text-gray-500 hover:border-orange-300 hover:text-orange-500 transition-colors"
+        >
+          <Plus className="w-5 h-5" />
+          <span className="font-medium">添加新设备</span>
+        </button>
+      </div>
+
+      {/* 添加设备模态框 */}
+      {showAddModal && (
+        <div className="fixed inset-0 bg-black/50 z-50 flex items-end">
+          <div className="w-full bg-white rounded-t-3xl p-6 animate-slide-up">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-lg font-bold text-gray-800">添加设备</h2>
+              <button
+                onClick={() => setShowAddModal(false)}
+                className="p-2 rounded-full hover:bg-gray-100"
+              >
+                <ChevronLeft className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              {[
+                { icon: Camera, name: '摄像头', desc: '实时监控' },
+                { icon: Activity, name: '智能项圈', desc: '活动追踪' },
+                { icon: Droplets, name: '饮水机', desc: '智能喂水' },
+                { icon: Utensils, name: '喂食器', desc: '定时喂食' },
+              ].map((item, index) => (
+                <button
+                  key={index}
+                  className="p-4 bg-gray-50 rounded-xl flex flex-col items-center gap-2 hover:bg-orange-50 transition-colors"
+                >
+                  <item.icon className="w-8 h-8 text-orange-500" />
+                  <span className="font-medium text-gray-800">{item.name}</span>
+                  <span className="text-xs text-gray-400">{item.desc}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DevicesPage;
diff --git a/src/pages/DietDataPage.tsx b/src/pages/DietDataPage.tsx
new file mode 100644
index 00000000..14b7710d
--- /dev/null
+++ b/src/pages/DietDataPage.tsx
@@ -0,0 +1,799 @@
+import React, { useState, useEffect } from 'react';
+import {
+  ChevronLeft,
+  Calendar,
+  ChevronDown,
+  Utensils,
+  Droplets,
+  Flame,
+  Clock,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  PieChart,
+  BarChart3,
+  Plus,
+  Camera,
+  Trash2,
+  Edit3,
+  X,
+} from 'lucide-react';
+import { useDietStore, type TimeRange, type MealType, type DietRecord } from '../store/dietStore';
+import { usePetStore } from '../store/petStore';
+import { Card, Badge, EmptyState, Button } from '../components/DesignSystem';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
+import { Camera as CameraPlugin, CameraResultType } from '@capacitor/camera';
+
+interface DietDataPageProps {
+  onNavigate: (page: string) => void;
+}
+
+// 餐食类型配置
+const MEAL_TYPE_CONFIG: Record<MealType, { label: string; icon: React.ElementType; color: string }> = {
+  breakfast: { label: '早餐', icon: Utensils, color: '#F59E0B' },
+  lunch: { label: '午餐', icon: Utensils, color: '#10B981' },
+  dinner: { label: '晚餐', icon: Utensils, color: '#8B5CF6' },
+  snack: { label: '零食', icon: Utensils, color: '#EC4899' },
+  treat: { label: '奖励', icon: Utensils, color: '#06B6D4' },
+};
+
+export const DietDataPage: React.FC<DietDataPageProps> = ({ onNavigate }) => {
+  const responsive = useResponsiveStyle();
+  const { currentPetId } = usePetStore();
+  const {
+    timeRange,
+    setTimeRange,
+    selectedDate,
+    setSelectedDate,
+    records,
+    advices,
+    getStats,
+    getNutritionIntake,
+    getRecordsByDate,
+    getRecordsByRange,
+    getAdvicesByPet,
+    addRecord,
+    updateRecord,
+    deleteRecord,
+    initialize,
+    isLoading,
+  } = useDietStore();
+  
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [editingRecord, setEditingRecord] = useState<DietRecord | null>(null);
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [newRecord, setNewRecord] = useState<{
+    type: MealType;
+    food: string;
+    amount: number;
+    calories: number;
+    time: string;
+    note: string;
+  }>({
+    type: 'breakfast',
+    food: '',
+    amount: 100,
+    calories: 0,
+    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+    note: '',
+  });
+
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  // 获取统计数据
+  const stats = currentPetId ? getStats(currentPetId, timeRange) : null;
+  const nutrition = currentPetId ? getNutritionIntake(currentPetId) : null;
+  const todayRecords = getRecordsByDate(selectedDate);
+  const rangeRecords = getRecordsByRange(timeRange);
+  const petAdvices = currentPetId ? getAdvicesByPet(currentPetId) : [];
+
+  // 计算变化趋势
+  const calculateTrend = (current: number, previous: number) => {
+    if (previous === 0) return 0;
+    return Math.round(((current - previous) / previous) * 100);
+  };
+
+  // 今日数据
+  const todayData = [
+    {
+      type: 'feeding',
+      label: '进食次数',
+      value: stats?.totalMeals || 0,
+      unit: '次',
+      change: 0,
+      changeLabel: '较昨日',
+      icon: Utensils,
+      color: '#3B82F6',
+      bgColor: '#EFF6FF',
+    },
+    {
+      type: 'drinking',
+      label: '进食总量',
+      value: stats?.totalAmount || 0,
+      unit: 'g',
+      change: 0,
+      changeLabel: '较昨日',
+      icon: Droplets,
+      color: '#10B981',
+      bgColor: '#ECFDF5',
+    },
+    {
+      type: 'calories',
+      label: '消耗卡路里',
+      value: stats?.totalCalories || 0,
+      unit: 'kcal',
+      change: 0,
+      changeLabel: '较昨日',
+      icon: Flame,
+      color: '#F59E0B',
+      bgColor: '#FFFBEB',
+    },
+    {
+      type: 'duration',
+      label: '进食时长',
+      value: stats?.totalDuration || 0,
+      unit: '分钟',
+      change: 0,
+      changeLabel: '较昨日',
+      icon: Clock,
+      color: '#8B5CF6',
+      bgColor: '#F5F3FF',
+    },
+  ];
+
+  // 周数据（从真实记录计算）
+  const getWeekData = () => {
+    const weekData: { date: string; feeding: number; drinking: number; calories: number; duration: number }[] = [];
+    const today = new Date();
+    
+    for (let i = 6; i >= 0; i--) {
+      const date = new Date(today);
+      date.setDate(date.getDate() - i);
+      const dateStr = date.toISOString().split('T')[0];
+      const dayRecords = (records || []).filter(r => r?.date === dateStr);
+      
+      const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+      weekData.push({
+        date: dayNames[date.getDay()],
+        feeding: dayRecords.length || 0,
+        drinking: dayRecords.reduce((sum, r) => sum + (r?.amount || 0), 0),
+        calories: dayRecords.reduce((sum, r) => sum + (r?.calories || 0), 0),
+        duration: dayRecords.length * 1.5 || 0,
+      });
+    }
+    
+    return weekData;
+  };
+
+  const weekData = getWeekData();
+
+  // 营养摄入分布
+  const nutritionData = nutrition ? [
+    { name: '蛋白质', value: nutrition.protein, color: '#3B82F6' },
+    { name: '脂肪', value: nutrition.fat, color: '#F59E0B' },
+    { name: '碳水化合物', value: nutrition.carbohydrate, color: '#10B981' },
+    { name: '纤维', value: nutrition.fiber, color: '#8B5CF6' },
+  ] : [];
+
+  // 获取变化趋势图标
+  const getTrendIcon = (change: number) => {
+    if (change > 0) return <TrendingUp className="w-3 h-3" />;
+    if (change < 0) return <TrendingDown className="w-3 h-3" />;
+    return <Minus className="w-3 h-3" />;
+  };
+
+  // 获取变化颜色
+  const getTrendColor = (change: number, type: string) => {
+    const positiveIncrease = ['feeding', 'calories', 'duration'];
+    const isPositive = positiveIncrease.includes(type);
+    
+    if (change === 0) return 'text-gray-400';
+    if (isPositive) {
+      return change > 0 ? 'text-green-500' : 'text-red-500';
+    } else {
+      return change < 0 ? 'text-green-500' : 'text-red-500';
+    }
+  };
+
+  // 添加记录
+  const handleAddRecord = async () => {
+    if (!currentPetId || !newRecord.food) return;
+    
+    await addRecord({
+      petId: currentPetId,
+      type: newRecord.type,
+      food: newRecord.food,
+      amount: newRecord.amount,
+      calories: newRecord.calories,
+      time: newRecord.time,
+      date: selectedDate,
+      note: newRecord.note,
+    });
+    
+    setShowAddModal(false);
+    setNewRecord({
+      type: 'breakfast',
+      food: '',
+      amount: 100,
+      calories: 0,
+      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+      note: '',
+    });
+  };
+
+  // 更新记录
+  const handleUpdateRecord = async () => {
+    if (!editingRecord) return;
+    
+    await updateRecord(editingRecord.id, {
+      type: newRecord.type,
+      food: newRecord.food,
+      amount: newRecord.amount,
+      calories: newRecord.calories,
+      time: newRecord.time,
+      note: newRecord.note,
+    });
+    
+    setEditingRecord(null);
+    setShowAddModal(false);
+    setNewRecord({
+      type: 'breakfast',
+      food: '',
+      amount: 100,
+      calories: 0,
+      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+      note: '',
+    });
+  };
+
+  // 删除记录
+  const handleDeleteRecord = async (id: string) => {
+    await deleteRecord(id);
+  };
+
+  // 拍照添加记录
+  const handleTakePhoto = async () => {
+    try {
+      const photo = await CameraPlugin.getPhoto({
+        quality: 90,
+        allowEditing: true,
+        resultType: CameraResultType.Base64,
+      });
+      
+      // 这里可以添加图片分析逻辑，识别食物类型和数量
+      console.log('Photo taken:', photo.base64String);
+      
+      // 设置图片并打开添加模态框
+      setNewRecord(prev => ({
+        ...prev,
+        note: prev.note + ' [有图片]',
+      }));
+      setShowAddModal(true);
+    } catch (error) {
+      console.error('Camera error:', error);
+    }
+  };
+
+  // 编辑记录
+  const handleEditRecord = (record: DietRecord) => {
+    setEditingRecord(record);
+    setNewRecord({
+      type: record.type,
+      food: record.food,
+      amount: record.amount,
+      calories: record.calories || 0,
+      time: record.time,
+      note: record.note || '',
+    });
+    setShowAddModal(true);
+  };
+
+  // 格式化日期显示
+  const formatDateDisplay = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    if (date.toDateString() === today.toDateString()) {
+      return '今天';
+    }
+    
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    if (date.toDateString() === yesterday.toDateString()) {
+      return '昨天';
+    }
+    
+    return date.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' });
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FAF7F2]">
+      {/* 顶部导航 */}
+      <div className="bg-white px-4 pt-12 pb-4 sticky top-0 z-50 shadow-sm">
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => onNavigate('home')}
+            className="p-2 -ml-2 rounded-full hover:bg-gray-100 transition-colors"
+          >
+            <ChevronLeft className="w-6 h-6 text-gray-600" />
+          </button>
+          <h1 className="text-lg font-bold text-gray-800">饮食数据</h1>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleTakePhoto}
+              className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            >
+              <Camera className="w-5 h-5 text-gray-600" />
+            </button>
+            <button
+              onClick={() => setShowAddModal(true)}
+              className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            >
+              <Plus className="w-5 h-5 text-gray-600" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 日期选择器 */}
+      <div className="px-4 py-3 bg-white border-b border-gray-100">
+        <div className="flex items-center justify-between gap-2">
+          <button
+            onClick={() => setTimeRange('day')}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+              timeRange === 'day'
+                ? 'bg-orange-500 text-white'
+                : 'bg-gray-100 text-gray-600'
+            }`}
+          >
+            日
+          </button>
+          <button
+            onClick={() => setTimeRange('week')}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+              timeRange === 'week'
+                ? 'bg-orange-500 text-white'
+                : 'bg-gray-100 text-gray-600'
+            }`}
+          >
+            周
+          </button>
+          <button
+            onClick={() => setTimeRange('month')}
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+              timeRange === 'month'
+                ? 'bg-orange-500 text-white'
+                : 'bg-gray-100 text-gray-600'
+            }`}
+          >
+            月
+          </button>
+          <button 
+            onClick={() => setShowDatePicker(!showDatePicker)}
+            className="flex items-center gap-2 px-3 py-2 text-gray-600 bg-gray-50 rounded-full"
+          >
+            <Calendar className="w-4 h-4" />
+            <span className="text-sm">{formatDateDisplay(selectedDate)}</span>
+            <ChevronDown className="w-4 h-4" />
+          </button>
+        </div>
+        
+        {/* 日期快速选择 */}
+        {showDatePicker && (
+          <div className="mt-3 flex gap-2 overflow-x-auto pb-2">
+            {Array.from({ length: 7 }).map((_, i) => {
+              const date = new Date();
+              date.setDate(date.getDate() - i);
+              const dateStr = date.toISOString().split('T')[0];
+              const isSelected = selectedDate === dateStr;
+              
+              return (
+                <button
+                  key={i}
+                  onClick={() => {
+                    setSelectedDate(dateStr);
+                    setShowDatePicker(false);
+                  }}
+                  className={`flex-shrink-0 px-3 py-2 rounded-lg text-sm transition-all ${
+                    isSelected
+                      ? 'bg-orange-500 text-white'
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  }`}
+                >
+                  {i === 0 ? '今天' : i === 1 ? '昨天' : date.toLocaleDateString('zh-CN', { day: 'numeric' })}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* 加载状态 */}
+      {isLoading && (
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500"></div>
+        </div>
+      )}
+
+      {/* 今日数据概览 */}
+      {!isLoading && (
+        <div className="px-4 py-4">
+          <h2 className="text-base font-bold text-gray-800 mb-3">
+            {timeRange === 'day' ? '今日概览' : timeRange === 'week' ? '本周概览' : '本月概览'}
+          </h2>
+          <div className="grid grid-cols-2 gap-3" style={{ gap: responsive.spacing }}>
+            {todayData.map((item, index) => (
+              <Card key={index} variant="default" padding="md" hover={false}>
+                <div className="flex items-center gap-2 mb-3">
+                  <div
+                    className="w-8 h-8 rounded-lg flex items-center justify-center"
+                    style={{ backgroundColor: item.bgColor }}
+                  >
+                    <item.icon className="w-4 h-4" style={{ color: item.color }} />
+                  </div>
+                  <span className="text-sm text-gray-600">{item.label}</span>
+                </div>
+                <div className="flex items-baseline gap-1 mb-2">
+                  <span className="text-2xl font-bold text-gray-800">{item.value}</span>
+                  <span className="text-sm text-gray-500">{item.unit}</span>
+                </div>
+                <div className={`flex items-center gap-1 text-xs ${getTrendColor(item.change, item.type)}`}>
+                  {getTrendIcon(item.change)}
+                  <span>{Math.abs(item.change)}%</span>
+                  <span className="text-gray-400">{item.changeLabel}</span>
+                </div>
+                <div className="flex items-center gap-1 mt-2">
+                  <div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
+                  <span className="text-xs text-gray-400">正常</span>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 今日饮食记录列表 */}
+      {!isLoading && timeRange === 'day' && (
+        <div className="px-4 pb-4">
+          <h2 className="text-base font-bold text-gray-800 mb-3">今日饮食记录</h2>
+          {todayRecords.length === 0 ? (
+            <EmptyState
+              type="records"
+              title="今日暂无饮食记录"
+              description="点击右上角添加按钮记录宝贝的饮食"
+              action={
+                <Button onClick={() => setShowAddModal(true)}>
+                  添加记录
+                </Button>
+              }
+            />
+          ) : (
+            <div className="space-y-3">
+              {todayRecords.map((record) => {
+                const typeConfig = MEAL_TYPE_CONFIG[record.type];
+                return (
+                  <Card key={record.id} variant="default" padding="md" hover={false}>
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="w-10 h-10 rounded-xl flex items-center justify-center"
+                          style={{ backgroundColor: `${typeConfig.color}20` }}
+                        >
+                          <typeConfig.icon className="w-5 h-5" style={{ color: typeConfig.color }} />
+                        </div>
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <span className="font-semibold text-gray-800">{record.food}</span>
+                            <Badge variant="default" size="sm">
+                              {typeConfig.label}
+                            </Badge>
+                          </div>
+                          <div className="flex items-center gap-2 mt-1 text-sm text-gray-500">
+                            <span>{record.amount}g</span>
+                            {record.calories && <span>· {record.calories} kcal</span>}
+                            <Clock className="w-3 h-3" />
+                            <span>{record.time}</span>
+                          </div>
+                          {record.note && (
+                            <p className="text-xs text-gray-400 mt-1">{record.note}</p>
+                          )}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => handleEditRecord(record)}
+                          className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+                        >
+                          <Edit3 className="w-4 h-4 text-gray-400" />
+                        </button>
+                        <button
+                          onClick={() => handleDeleteRecord(record.id)}
+                          className="p-2 rounded-full hover:bg-red-50 transition-colors"
+                        >
+                          <Trash2 className="w-4 h-4 text-red-400" />
+                        </button>
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 周趋势图表 */}
+      {!isLoading && timeRange === 'week' && (
+        <div className="px-4 pb-4">
+          <Card variant="default" padding="lg" hover={false}>
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-bold text-gray-800">本周趋势</h3>
+              <button className="flex items-center gap-1 text-sm text-orange-500">
+                <BarChart3 className="w-4 h-4" />
+                详细分析
+              </button>
+            </div>
+            <div className="space-y-4">
+              {/* 进食次数趋势 */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm text-gray-600">进食次数</span>
+                  <span className="text-sm font-medium text-gray-800">
+                    平均 {(weekData.reduce((sum, d) => sum + d.feeding, 0) / 7).toFixed(1)} 次/天
+                  </span>
+                </div>
+                <div className="flex items-end gap-2 h-20">
+                  {weekData.map((day, index) => (
+                    <div key={index} className="flex-1 flex flex-col items-center gap-1">
+                      <div
+                        className="w-full bg-blue-100 rounded-t-lg transition-all"
+                        style={{ height: `${Math.min((day.feeding / 10) * 100, 100)}%` }}
+                      >
+                        <div
+                          className="w-full bg-blue-500 rounded-t-lg"
+                          style={{ height: '100%' }}
+                        ></div>
+                      </div>
+                      <span className="text-xs text-gray-400">{day.date}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 卡路里趋势 */}
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm text-gray-600">消耗卡路里</span>
+                  <span className="text-sm font-medium text-gray-800">
+                    平均 {Math.round(weekData.reduce((sum, d) => sum + d.calories, 0) / 7)} kcal/天
+                  </span>
+                </div>
+                <div className="flex items-end gap-2 h-20">
+                  {weekData.map((day, index) => (
+                    <div key={index} className="flex-1 flex flex-col items-center gap-1">
+                      <div
+                        className="w-full bg-orange-100 rounded-t-lg transition-all"
+                        style={{ height: `${Math.min((day.calories / 500) * 100, 100)}%` }}
+                      >
+                        <div
+                          className="w-full bg-orange-500 rounded-t-lg"
+                          style={{ height: '100%' }}
+                        ></div>
+                      </div>
+                      <span className="text-xs text-gray-400">{day.date}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* 营养摄入分布 */}
+      {!isLoading && nutritionData.length > 0 && (
+        <div className="px-4 pb-4">
+          <Card variant="default" padding="lg" hover={false}>
+            <h3 className="font-bold text-gray-800 mb-4">营养摄入分布</h3>
+            <div className="flex items-center gap-6">
+              {/* 饼图示意 */}
+              <div className="relative w-32 h-32">
+                <svg viewBox="0 0 100 100" className="w-full h-full -rotate-90">
+                  {nutritionData.reduce((acc, item, index) => {
+                    const prevOffset = acc.offset;
+                    const dashArray = `${item.value} ${100 - item.value}`;
+                    acc.elements.push(
+                      <circle
+                        key={index}
+                        cx="50"
+                        cy="50"
+                        r="40"
+                        fill="none"
+                        stroke={item.color}
+                        strokeWidth="20"
+                        strokeDasharray={dashArray}
+                        strokeDashoffset={-prevOffset}
+                      />
+                    );
+                    acc.offset += item.value;
+                    return acc;
+                  }, { elements: [] as React.ReactNode[], offset: 0 }).elements}
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="text-center">
+                    <span className="text-lg font-bold text-gray-800">100%</span>
+                    <p className="text-xs text-gray-400">营养均衡</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* 图例 */}
+              <div className="flex-1 space-y-2">
+                {nutritionData.map((item, index) => (
+                  <div key={index} className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: item.color }}
+                      ></div>
+                      <span className="text-sm text-gray-600">{item.name}</span>
+                    </div>
+                    <span className="text-sm font-medium text-gray-800">{item.value}%</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* 饮食建议 */}
+      {!isLoading && petAdvices.length > 0 && (
+        <div className="px-4 pb-24">
+          <div className="bg-gradient-to-r from-orange-500 to-orange-400 rounded-2xl p-4 text-white">
+            <h3 className="font-bold mb-2">饮食建议</h3>
+            {petAdvices.map((advice) => (
+              <p key={advice.id} className="text-sm text-orange-100 mb-2">
+                {advice.content}
+              </p>
+            ))}
+            <button
+              onClick={() => onNavigate('diet-advice')}
+              className="px-4 py-2 bg-white/20 rounded-lg text-sm font-medium hover:bg-white/30 transition-colors"
+            >
+              查看详细建议
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* 添加/编辑记录模态框 */}
+      {showAddModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+          <Card variant="default" padding="lg" className="mx-4 max-w-sm w-full">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-bold text-gray-800">
+                {editingRecord ? '编辑饮食记录' : '添加饮食记录'}
+              </h3>
+              <button
+                onClick={() => {
+                  setShowAddModal(false);
+                  setEditingRecord(null);
+                }}
+                className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+              >
+                <X className="w-5 h-5 text-gray-500" />
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              {/* 餐食类型 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">餐食类型</label>
+                <div className="flex gap-2">
+                  {Object.entries(MEAL_TYPE_CONFIG).map(([type, config]) => (
+                    <button
+                      key={type}
+                      onClick={() => setNewRecord(prev => ({ ...prev, type: type as MealType }))}
+                      className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm transition-all ${
+                        newRecord.type === type
+                          ? 'bg-orange-500 text-white'
+                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                      }`}
+                    >
+                      <config.icon className="w-4 h-4" />
+                      {config.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* 食物名称 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">食物名称</label>
+                <input
+                  type="text"
+                  value={newRecord.food}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, food: e.target.value }))}
+                  placeholder="例如：狗粮、零食..."
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 数量 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">数量 (克)</label>
+                <input
+                  type="number"
+                  value={newRecord.amount}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, amount: parseInt(e.target.value) || 0 }))}
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 卡路里 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">卡路里 (kcal)</label>
+                <input
+                  type="number"
+                  value={newRecord.calories}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, calories: parseInt(e.target.value) || 0 }))}
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 时间 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">时间</label>
+                <input
+                  type="time"
+                  value={newRecord.time}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, time: e.target.value }))}
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 备注 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">备注</label>
+                <input
+                  type="text"
+                  value={newRecord.note}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, note: e.target.value }))}
+                  placeholder="可选备注..."
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 提交按钮 */}
+              <div className="flex gap-3 pt-2">
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowAddModal(false);
+                    setEditingRecord(null);
+                  }}
+                  className="flex-1"
+                >
+                  取消
+                </Button>
+                <Button
+                  onClick={editingRecord ? handleUpdateRecord : handleAddRecord}
+                  disabled={!newRecord.food}
+                  className="flex-1"
+                >
+                  {editingRecord ? '保存' : '添加'}
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DietDataPage;
\ No newline at end of file
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 2cddffed..32bf8d34 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,584 +1,649 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { 
-  ChevronRight, 
-  Heart, 
-  Bot, 
-  FileText, 
-  BookOpen, 
-  Calendar, 
-  Activity,
-  Star,
-  Clock,
-  ArrowUpRight,
+/**
+ * HomePage - 首页
+ *
+ * 优化功能入口布局，确保所有功能真实完整
+ * Apple风格设计，完美适配多端
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Stethoscope,
+  FileText,
+  Utensils,
+  PawPrint,
   Camera,
-  Video,
+  Activity,
+  Heart,
+  Bell,
   MessageCircle,
-  RefreshCw,
-  Sparkles,
-  Bell
+  Calendar,
+  ChevronRight,
+  Plus,
+  Battery,
+  Droplets,
+  Flame,
+  Clock,
+  Zap,
+  TrendingUp,
+  Eye,
+  Shield,
+  BookOpen,
+  Music,
 } from 'lucide-react';
-import { GlassCard, SkeletonCard as _SkeletonCard, SkeletonQuickActions, LiquidHeroCard } from '../components/DesignSystem';
-import '../styles/animations.css';
 import { useAppStore } from '../store/appStore';
-import { useBondStore } from '../store/bondStore';
 import { usePetStore } from '../store/petStore';
-import { useReminderStore } from '../store/reminderStore';
-import { useHealthRecordStore } from '../store/healthRecordStore';
-import { cameraAdapterService } from '../services/cameraAdapterService';
-import type { CameraDevice } from '../types/camera';
-import { usePullToRefresh } from '../hooks/useGestures';
+import { useBondStore } from '../store/bondStore';
+import { useDevicesStore } from '../store/devicesStore';
+import { useDietStore } from '../store/dietStore';
+import { useRecordsStore } from '../store/recordsStore';
+import { useHealthStore } from '../store/healthStore';
+import { useResponsiveStyle } from '../lib/responsive';
+import { createAnimation, AnimationConfig } from '../lib/animations';
 
 interface HomePageProps {
   onNavigate: (page: string) => void;
 }
 
-interface QuickAction {
+// 功能分类
+type FeatureCategory = 'health' | 'monitor' | 'care' | 'tools';
+
+// 功能项
+interface FeatureItem {
+  id: string;
   icon: React.ElementType;
   label: string;
   description: string;
   color: string;
-  bgGradient: string;
+  bgColor: string;
   page: string;
+  category: FeatureCategory;
   badge?: string;
   badgeColor?: string;
-  isPrimary?: boolean;
+  isReal?: boolean; // 标记是否为真实功能
 }
 
 export const HomePage: React.FC<HomePageProps> = ({ onNavigate }) => {
-  const { currentPet, currentEmotion, healthScore } = useAppStore();
-  const { metrics, badges, totalPoints, streakDays } = useBondStore();
-  const unlockedBadges = badges.filter(b => b.isUnlocked).length;
+  const { currentPet, healthScore } = useAppStore();
   const { pets, currentPetId, setCurrentPet } = usePetStore();
-  const { getUpcomingReminders } = useReminderStore();
-  const { getFilteredRecords } = useHealthRecordStore();
-  const [cameras, setCameras] = useState<CameraDevice[]>([]);
+  const { metrics, totalPoints, streakDays } = useBondStore();
+  const { devices, getStats, initialize: initDevices } = useDevicesStore();
+  const { getStats: getDietStats, initialize: initDiet } = useDietStore();
+  const { initialize: initRecords } = useRecordsStore();
+  const { getScore, initialize: initHealth } = useHealthStore();
+  const responsiveStyle = useResponsiveStyle();
+  
   const [isLoading, setIsLoading] = useState(true);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [pullDistance, setPullDistance] = useState(0);
-  const [isPulling, setIsPulling] = useState(false);
-  const touchStartY = useRef(0);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const loadData = useCallback(async () => {
-    const devices = await cameraAdapterService.getDevices();
-    setCameras(devices);
-    setIsLoading(false);
-  }, []);
 
+  // 初始化所有数据
   useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  const handleRefresh = useCallback(async () => {
-    setIsRefreshing(true);
-    await new Promise(resolve => setTimeout(resolve, 1000));
-    await loadData();
-    setIsRefreshing(false);
-    setPullDistance(0);
-  }, [loadData]);
-
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    if (containerRef.current?.scrollTop === 0) {
-      touchStartY.current = e.touches[0].clientY;
-      setIsPulling(true);
-    }
+    const initAll = async () => {
+      await Promise.all([
+        initDevices(),
+        initDiet(),
+        initRecords(),
+        initHealth(),
+      ]);
+      setIsLoading(false);
+    };
+    initAll();
   }, []);
 
-  const handleTouchMove = useCallback((e: React.TouchEvent) => {
-    if (!isPulling || isRefreshing) return;
-    
-    const currentY = e.touches[0].clientY;
-    const diff = currentY - touchStartY.current;
-    
-    if (diff > 0 && containerRef.current?.scrollTop === 0) {
-      const resistance = 0.5;
-      const newDistance = Math.min(diff * resistance, 100);
-      setPullDistance(newDistance);
-    }
-  }, [isPulling, isRefreshing]);
-
-  const handleTouchEnd = useCallback(() => {
-    setIsPulling(false);
-    if (pullDistance > 60 && !isRefreshing) {
-      handleRefresh();
-    } else {
-      setPullDistance(0);
-    }
-  }, [pullDistance, isRefreshing, handleRefresh]);
-
-  const upcomingReminders = currentPetId ? getUpcomingReminders(currentPetId, 3) : [];
-  const recentRecords = currentPetId ? getFilteredRecords(currentPetId).slice(0, 3) : [];
-  const onlineCameras = cameras.filter(c => c.status === 'online');
+  // 获取统计数据 - 使用默认值防止 undefined
+  const deviceStats = getStats() || { total: 0, online: 0, offline: 0, warning: 0 };
+  const dietStats = getDietStats('pet-1', 'day') || { calories: 0, foodAmount: 0, waterAmount: 0, meals: 0 };
+  const healthScoreData = getScore('pet-1') || { overall: 0, items: [] };
 
-  const quickActions: QuickAction[] = [
-    {
-      icon: Video,
-      label: '实时监控',
-      description: '查看毛孩动态',
-      color: '#3B82F6',
-      bgGradient: 'from-blue-500 via-blue-600 to-cyan-500',
-      page: 'camera-monitor',
-      badge: onlineCameras.length > 0 ? `${onlineCameras.length}台` : undefined,
-      badgeColor: 'bg-blue-500',
-      isPrimary: true,
-    },
-    {
-      icon: Bot,
-      label: 'AI健康顾问',
-      description: '智能问诊咨询',
-      color: '#8B5CF6',
-      bgGradient: 'from-purple-500 via-violet-500 to-fuchsia-500',
-      page: 'ai-consultant',
-      badge: 'AI',
-      badgeColor: 'bg-gradient-to-r from-purple-500 to-pink-500',
-      isPrimary: true,
+  // 功能网格 - 分类展示
+  const featureCategories: Record<FeatureCategory, { title: string; items: FeatureItem[] }> = {
+    health: {
+      title: '健康管理',
+      items: [
+        {
+          id: 'ai-consultant',
+          icon: Stethoscope,
+          label: 'AI问诊',
+          description: '智能诊断',
+          color: '#3B82F6',
+          bgColor: '#EFF6FF',
+          page: 'ai-consultant',
+          category: 'health',
+          badge: '在线',
+          badgeColor: '#34C759',
+          isReal: true,
+        },
+        {
+          id: 'health-report',
+          icon: FileText,
+          label: '健康报告',
+          description: '今日生成',
+          color: '#10B981',
+          bgColor: '#ECFDF5',
+          page: 'health-report',
+          category: 'health',
+          badge: healthScoreData.overall + '分',
+          badgeColor: '#10B981',
+          isReal: true,
+        },
+        {
+          id: 'health-records',
+          icon: Heart,
+          label: '健康记录',
+          description: '详细追踪',
+          color: '#EF4444',
+          bgColor: '#FEE2E2',
+          page: 'health-records',
+          category: 'health',
+          isReal: true,
+        },
+        {
+          id: 'reminders',
+          icon: Bell,
+          label: '健康提醒',
+          description: '定时提醒',
+          color: '#8B5CF6',
+          bgColor: '#F5F3FF',
+          page: 'reminders',
+          category: 'health',
+          isReal: true,
+        },
+      ],
     },
-    {
-      icon: MessageCircle,
-      label: '情绪翻译',
-      description: '读懂宠物心声',
-      color: '#F97316',
-      bgGradient: 'from-orange-500 via-red-400 to-rose-500',
-      page: 'translator',
-      badge: '95%+',
-      badgeColor: 'bg-orange-500',
-      isPrimary: true,
+    monitor: {
+      title: '智能监控',
+      items: [
+        {
+          id: 'camera-monitor',
+          icon: Camera,
+          label: '实时监控',
+          description: '查看宠物',
+          color: '#F59E0B',
+          bgColor: '#FFFBEB',
+          page: 'camera-monitor',
+          category: 'monitor',
+          badge: (deviceStats.online || 0) + '在线',
+          badgeColor: '#34C759',
+          isReal: true,
+        },
+        {
+          id: 'devices',
+          icon: Activity,
+          label: '设备管理',
+          description: '智能设备',
+          color: '#06B6D4',
+          bgColor: '#ECFEFF',
+          page: 'devices',
+          category: 'monitor',
+          badge: (deviceStats.total || 0).toString(),
+          badgeColor: '#06B6D4',
+          isReal: true,
+        },
+        {
+          id: 'diet-data',
+          icon: Flame,
+          label: '饮食数据',
+          description: '营养分析',
+          color: '#EC4899',
+          bgColor: '#FCE7F3',
+          page: 'diet-data',
+          category: 'monitor',
+          badge: dietStats.totalMeals + '次',
+          badgeColor: '#EC4899',
+          isReal: true,
+        },
+        {
+          id: 'activity',
+          icon: TrendingUp,
+          label: '活动追踪',
+          description: '运动记录',
+          color: '#14B8A6',
+          bgColor: '#F0FDFA',
+          page: 'advanced-health',
+          category: 'monitor',
+          isReal: true,
+        },
+      ],
     },
-    {
-      icon: FileText,
-      label: '健康记录',
-      description: '追踪健康状况',
-      color: '#10B981',
-      bgGradient: 'from-emerald-500 via-teal-500 to-cyan-500',
-      page: 'health-records',
-      isPrimary: false,
+    care: {
+      title: '日常护理',
+      items: [
+        {
+          id: 'records',
+          icon: Calendar,
+          label: '日常记录',
+          description: '时间线',
+          color: '#F97316',
+          bgColor: '#FFF7ED',
+          page: 'records',
+          category: 'care',
+          isReal: true,
+        },
+        {
+          id: 'pet-profile',
+          icon: PawPrint,
+          label: '宠物档案',
+          description: '详细信息',
+          color: '#A855F7',
+          bgColor: '#FAF5FF',
+          page: 'pet-profile',
+          category: 'care',
+          isReal: true,
+        },
+        {
+          id: 'translator',
+          icon: MessageCircle,
+          label: '宠物翻译',
+          description: '理解心声',
+          color: '#6366F1',
+          bgColor: '#EEF2FF',
+          page: 'translator',
+          category: 'care',
+          isReal: true,
+        },
+        {
+          id: 'diet-advice',
+          icon: Utensils,
+          label: '饮食建议',
+          description: '科学喂养',
+          color: '#84CC16',
+          bgColor: '#F7FEE7',
+          page: 'diet-advice',
+          category: 'care',
+          isReal: true,
+        },
+      ],
     },
-    {
-      icon: BookOpen,
-      label: '健康手册',
-      description: '专业养宠知识',
-      color: '#6366F1',
-      bgGradient: 'from-indigo-500 via-purple-500 to-blue-500',
-      page: 'health-manual',
-      badge: '60+篇',
-      badgeColor: 'bg-indigo-500',
-      isPrimary: false,
+    tools: {
+      title: '实用工具',
+      items: [
+        {
+          id: 'medical',
+          icon: Shield,
+          label: '医疗记录',
+          description: '就诊历史',
+          color: '#DC2626',
+          bgColor: '#FEF2F2',
+          page: 'medical',
+          category: 'tools',
+          isReal: true,
+        },
+        {
+          id: 'training',
+          icon: BookOpen,
+          label: '训练指南',
+          description: '行为训练',
+          color: '#0EA5E9',
+          bgColor: '#F0F9FF',
+          page: 'training',
+          category: 'tools',
+          isReal: true,
+        },
+        {
+          id: 'insurance',
+          icon: Shield,
+          label: '宠物保险',
+          description: '保障计划',
+          color: '#7C3AED',
+          bgColor: '#F5F3FF',
+          page: 'insurance',
+          category: 'tools',
+          isReal: true,
+        },
+        {
+          id: 'services',
+          icon: Eye,
+          label: '周边服务',
+          description: '宠物服务',
+          color: '#F59E0B',
+          bgColor: '#FFFBEB',
+          page: 'services',
+          category: 'tools',
+          isReal: true,
+        },
+      ],
     },
-    {
-      icon: Calendar,
-      label: '智能提醒',
-      description: '重要日程管理',
-      color: '#F59E0B',
-      bgGradient: 'from-amber-500 via-yellow-500 to-orange-500',
-      page: 'reminders',
-      badge: upcomingReminders.length > 0 ? `${upcomingReminders.length}条` : undefined,
-      badgeColor: 'bg-amber-500',
-      isPrimary: false,
-    },
-  ];
-
-  const getEmotionEmoji = (emotion: string) => {
-    const map: Record<string, string> = {
-      happy: '😸',
-      curious: '🤔',
-      anxious: '😰',
-      angry: '😾',
-      needs: '🥺',
-      relaxed: '😌',
-      excited: '🤩',
-      sleepy: '😴',
-      calm: '🧘',
-    };
-    return map[emotion] || '😐';
   };
 
-  const getEmotionLabel = (emotion: string) => {
-    const map: Record<string, string> = {
-      happy: '开心',
-      curious: '好奇',
-      anxious: '焦虑',
-      angry: '生气',
-      needs: '需要关注',
-      relaxed: '放松',
-      excited: '兴奋',
-      sleepy: '困倦',
-      calm: '平静',
-    };
-    return map[emotion] || '未知';
+  // 功能点击动画
+  const handleFeatureClick = (feature: FeatureItem, element: HTMLElement) => {
+    const animator = createAnimation(element);
+    animator.press();
+    
+    setTimeout(() => {
+      animator.release();
+      onNavigate(feature.page);
+    }, AnimationConfig.duration.fast);
   };
 
-  const handleCardClick = useCallback((page: string) => {
-    onNavigate(page);
-  }, [onNavigate]);
+  // 获取宠物头像
+  const getPetAvatar = (pet: typeof pets[0]) => {
+    if (pet.avatar) return pet.avatar;
+    return pet.type === 'dog'
+      ? 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20golden%20retriever%20dog%20portrait&image_size=square'
+      : 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20orange%20cat%20portrait&image_size=square';
+  };
 
-  const _refreshProgress = Math.min(pullDistance / 60, 1);
-  const refreshRotation = pullDistance * 2;
+  // 加载状态
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-[#FAF7F2] flex items-center justify-center">
+        <div className="animate-pulse flex flex-col items-center">
+          <div className="w-16 h-16 rounded-full bg-orange-200 mb-4 animate-bounce"></div>
+          <div className="text-orange-500 font-medium animate-fade-in">加载中...</div>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div 
-      ref={containerRef}
-      className="min-h-screen bg-gradient-to-br from-orange-50/50 via-white to-amber-50/30 dark:from-neutral-950 dark:via-neutral-900 dark:to-slate-950/50 pb-24 overflow-y-auto"
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-    >
-      <div 
-        className="transition-transform duration-300 ease-out"
-        style={{ transform: `translateY(${isRefreshing ? 60 : pullDistance * 0.5}px)` }}
-      >
-        <div 
-          className={`absolute left-1/2 -translate-x-1/2 z-50 flex flex-col items-center justify-center transition-all duration-300 ${
-            pullDistance > 20 || isRefreshing ? 'opacity-100 scale-100' : 'opacity-0 scale-75'
-          }`}
-          style={{ 
-            top: isRefreshing ? 10 : -40 + pullDistance * 0.5,
+    <div className="min-h-screen bg-[#FAF7F2] pb-24">
+      {/* 顶部宠物信息区 */}
+      <div className="bg-gradient-to-b from-white to-[#FAF7F2] px-4 pt-12 pb-4">
+        {/* 宠物信息卡片 */}
+        <div className="flex items-center gap-4 mb-4 animate-fade-in">
+          <div className="relative">
+            <div
+              className="overflow-hidden border-2 border-white shadow-md touch-scale"
+              style={{
+                width: responsiveStyle.avatarSize,
+                height: responsiveStyle.avatarSize,
+                borderRadius: responsiveStyle.avatarSize / 2,
+              }}
+            >
+              <img
+                src={getPetAvatar(currentPet || pets[0])}
+                alt={currentPet?.name || '宠物'}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div
+              className="absolute -bottom-0.5 -right-0.5 bg-green-500 border-2 border-white"
+              style={{
+                width: 16,
+                height: 16,
+                borderRadius: 8,
+              }}
+            ></div>
+          </div>
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <h1
+                className="font-bold"
+                style={{
+                  fontSize: responsiveStyle.fontSize + 4,
+                  color: '#1D1D1F',
+                }}
+              >
+                {currentPet?.name || 'JOJO'}
+              </h1>
+              <span style={{ color: '#3B82F6' }}>
+                {currentPet?.gender === 'male' ? '♂' : '♀'}
+              </span>
+            </div>
+            <p
+              className="text-sm"
+              style={{ color: '#86868B' }}
+            >
+              {currentPet?.breed || '柯基犬'} · {currentPet?.age || 2}岁
+            </p>
+            <div className="inline-flex items-center gap-1 mt-1 px-2 py-0.5 bg-green-100 rounded-full">
+              <Zap style={{ width: 12, height: 12, color: '#34C759' }} />
+              <span className="text-xs text-green-700 font-medium">活力充沛</span>
+            </div>
+          </div>
+          <button
+            onClick={() => onNavigate('pet-profile')}
+            className="p-2 rounded-full hover:bg-gray-100 transition-colors touch-scale"
+          >
+            <ChevronRight style={{ width: 20, height: 20, color: '#C7C7CC' }} />
+          </button>
+        </div>
+
+        {/* 健康评分卡片 */}
+        <div
+          className="bg-white overflow-hidden animate-scale-in"
+          style={{
+            borderRadius: responsiveStyle.cardRadius,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
           }}
         >
-          <div 
-            className={`w-11 h-11 rounded-full bg-white/80 dark:bg-neutral-800/80 backdrop-blur-xl flex items-center justify-center border border-white/30 dark:border-neutral-700/50 shadow-xl ${
-              isRefreshing ? 'animate-spin' : ''
-            }`}
-            style={{ transform: isRefreshing ? undefined : `rotate(${refreshRotation}deg)` }}
-          >
-            <RefreshCw className={`w-5 h-5 text-orange-500 dark:text-orange-400 transition-transform duration-200`} />
+          <div className="flex items-center justify-between p-4">
+            <div className="flex items-center gap-3">
+              <div
+                className="flex items-center justify-center"
+                style={{
+                  width: 48,
+                  height: 48,
+                  backgroundColor: '#E8F5E9',
+                  borderRadius: 12,
+                }}
+              >
+                <Heart style={{ width: 24, height: 24, color: '#34C759' }} />
+              </div>
+              <div>
+                <p className="text-sm" style={{ color: '#86868B' }}>健康评分</p>
+                <p
+                  className="font-bold font-mono"
+                  style={{
+                    fontSize: responsiveStyle.fontSize + 6,
+                    color: '#1D1D1F',
+                  }}
+                >
+                  {healthScoreData.overall}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={() => onNavigate('health-report')}
+              className="flex items-center gap-1 px-3 py-1.5 bg-green-50 rounded-full touch-scale"
+            >
+              <span className="text-sm text-green-600 font-medium">查看详情</span>
+              <ChevronRight style={{ width: 16, height: 16, color: '#34C759' }} />
+            </button>
           </div>
-          <span className="text-xs text-neutral-500 dark:text-neutral-400 mt-2 font-medium px-2 py-0.5 rounded-full bg-white/70 dark:bg-neutral-800/70 backdrop-blur-md">
-            {isRefreshing ? '刷新中...' : pullDistance > 60 ? '释放刷新' : '下拉刷新'}
-          </span>
         </div>
+      </div>
 
-        <header className="relative overflow-hidden">
-          {/* ColorOS 16 液态玻璃背景渐变 */}
-          <div className="absolute inset-0 bg-gradient-to-br from-[#FF8A65] via-[#FFB74D] to-[#FFCC80]" />
-          
-          {/* 液态玻璃纹理背景 */}
-          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')] opacity-40" />
-          
-          {/* 液态玻璃浮动光斑 */}
-          <div className="absolute top-0 right-0 w-96 h-96 bg-white/20 rounded-full -translate-y-1/3 translate-x-1/4 blur-3xl animate-liquid-float" style={{ animationDelay: '0s' }} />
-          <div className="absolute bottom-0 left-0 w-80 h-80 bg-white/15 rounded-full translate-y-1/3 -translate-x-1/4 blur-3xl animate-liquid-float" style={{ animationDelay: '1.5s' }} />
-          <div className="absolute top-1/3 right-1/4 w-48 h-48 bg-amber-300/20 rounded-full blur-2xl animate-liquid-morph" />
-          <div className="absolute bottom-1/4 left-1/3 w-32 h-32 bg-orange-200/25 rounded-full blur-2xl animate-glass-breathe" />
-          
-          <div className="max-w-md mx-auto px-4 pt-8 pb-16 relative z-10">
-            <div className="flex items-center justify-between mb-6">
-              <div className="animate-liquid-fade-in liquid-card-enter-1">
-                <h1 className="text-xl font-bold text-white flex items-center gap-2.5 tracking-tight">
-                  <div className="w-8 h-8 rounded-xl bg-white/25 backdrop-blur-md flex items-center justify-center shadow-lg border border-white/20">
-                    <Heart className="w-[18px] h-[18px] text-white fill-current" />
-                  </div>
-                  爪爪连心❤️
-                </h1>
-                <p className="text-xs text-white/80 mt-1.5 ml-[42px] font-medium">温暖守护 · 陪伴成长</p>
-              </div>
-              <button 
-                className="p-2.5 rounded-2xl bg-white/20 backdrop-blur-xl hover:bg-white/30 transition-all active-scale overflow-hidden border border-white/20 shadow-lg"
-                onClick={() => onNavigate('profile')}
-                aria-label="个人中心"
+      {/* 功能分类展示 */}
+      <div className="px-4 space-y-6">
+        {Object.entries(featureCategories).map(([categoryKey, category], categoryIndex) => (
+          <div
+            key={categoryKey}
+            className="animate-fade-in"
+            style={{
+              animationDelay: `${categoryIndex * AnimationConfig.duration.fast}ms`,
+            }}
+          >
+            {/* 分类标题 */}
+            <div className="flex items-center justify-between mb-3">
+              <h2
+                className="font-semibold"
+                style={{
+                  fontSize: responsiveStyle.fontSize + 2,
+                  color: '#1D1D1F',
+                }}
               >
-                <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-300 to-orange-400 flex items-center justify-center text-white font-semibold text-sm shadow-lg">
-                  {currentPet?.name?.charAt(0) || 'P'}
-                </div>
+                {category.title}
+              </h2>
+              <button
+                onClick={() => onNavigate(category.items[0].page)}
+                className="flex items-center gap-1 text-sm text-gray-500 touch-scale"
+              >
+                更多
+                <ChevronRight style={{ width: 16, height: 16 }} />
               </button>
             </div>
 
-            {/* 液态玻璃宠物选择器 */}
-            <div className="flex gap-2.5 mb-6 overflow-x-auto pb-1 scrollbar-thin animate-liquid-fade-in liquid-card-enter-2">
-              {pets.map((pet, index) => (
+            {/* 功能网格 */}
+            <div className="grid grid-cols-4 gap-3">
+              {category.items.map((feature, featureIndex) => (
                 <button
-                  key={pet.id}
-                  onClick={() => setCurrentPet(pet.id)}
-                  className={`flex items-center gap-2.5 pl-1 pr-4 py-2 rounded-2xl transition-all backdrop-blur-xl active-scale group ${
-                    pet.id === currentPetId
-                      ? 'bg-white/30 border border-white/30 shadow-xl scale-[1.02]'
-                      : 'bg-white/15 hover:bg-white/25 border border-transparent hover:border-white/20'
-                  }`}
-                  style={{ animationDelay: `${0.1 + index * 0.05}s` }}
+                  key={feature.id}
+                  onClick={(e) => handleFeatureClick(feature, e.currentTarget)}
+                  className="flex flex-col items-center gap-2 p-3 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow touch-scale animate-scale-in"
+                  style={{
+                    borderRadius: responsiveStyle.cardRadius,
+                    animationDelay: `${(categoryIndex * 4 + featureIndex) * 50}ms`,
+                  }}
                 >
-                  <div className={`w-10 h-10 rounded-xl overflow-hidden ring-2 transition-all ${
-                    pet.id === currentPetId ? 'ring-white/50 scale-110' : 'ring-white/20'
-                  } ${pet.avatar ? '' : 'bg-white/20'}`}>
-                    {pet.avatar ? (
-                      <img src={pet.avatar} alt={pet.name} className="w-full h-full object-cover" />
-                    ) : (
-                      <div className="w-full h-full flex items-center justify-center text-lg">
-                        {pet.type === 'dog' ? '🐕' : '🐱'}
-                      </div>
-                    )}
+                  {/* 图标 */}
+                  <div
+                    className="flex items-center justify-center"
+                    style={{
+                      width: 48,
+                      height: 48,
+                      backgroundColor: feature.bgColor,
+                      borderRadius: 12,
+                    }}
+                  >
+                    <feature.icon style={{ width: 24, height: 24, color: feature.color }} />
                   </div>
-                  <span className={`text-sm font-medium whitespace-nowrap transition-colors ${
-                    pet.id === currentPetId ? 'text-white' : 'text-white/85'
-                  }`}>{pet.name}</span>
+                  
+                  {/* 标签 */}
+                  <span
+                    className="font-medium"
+                    style={{
+                      fontSize: responsiveStyle.fontSize - 2,
+                      color: '#1D1D1F',
+                    }}
+                  >
+                    {feature.label}
+                  </span>
+                  
+                  {/* Badge */}
+                  {feature.badge && (
+                    <span
+                      className="px-1.5 py-0.5 text-xs font-medium rounded-full"
+                      style={{
+                        backgroundColor: feature.badgeColor ? `${feature.badgeColor}20` : '#F5F5F7',
+                        color: feature.badgeColor || '#86868B',
+                      }}
+                    >
+                      {feature.badge}
+                    </span>
+                  )}
                 </button>
               ))}
-              <button 
-                className="flex items-center gap-2.5 px-3 py-2.5 rounded-2xl bg-white/15 hover:bg-white/25 transition-all backdrop-blur-xl active-scale border border-dashed border-white/25 hover:border-white/35"
-                onClick={() => onNavigate('pets')}
-                aria-label="添加宠物"
-              >
-                <div className="w-10 h-10 rounded-xl border-2 border-dashed border-white/35 flex items-center justify-center group-hover:border-white/50 transition-colors">
-                  <svg className="w-4 h-4 text-white/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
-                  </svg>
-                </div>
-                <span className="text-sm font-medium text-white/75">添加</span>
-              </button>
             </div>
-
-            {/* 液态玻璃Hero卡片 */}
-            <LiquidHeroCard gradient="orange" className="p-4">
-              <div className="flex items-center gap-4">
-                <div className="relative">
-                  <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-white/30 to-white/10 flex items-center justify-center border border-white/20 shadow-inner backdrop-blur-sm">
-                    <span className="text-4xl drop-shadow-lg">{getEmotionEmoji(currentEmotion)}</span>
-                  </div>
-                  <div className="absolute -bottom-0.5 -right-0.5 w-6 h-6 rounded-full bg-emerald-400 border-2 border-white shadow-lg flex items-center justify-center animate-pulse-indicator">
-                    <div className="w-2 h-2 rounded-full bg-white" />
-                  </div>
-                </div>
-                <div className="flex-1 min-w-0">
-                  <h3 className="text-lg font-bold text-white">{currentPet?.name}</h3>
-                  <p className="text-sm text-white/80 mt-0.5">{getEmotionLabel(currentEmotion)}</p>
-                  <div className="flex items-center gap-2 mt-2.5 flex-wrap">
-                    <div className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-yellow-400/25 border border-yellow-400/15 backdrop-blur-sm whitespace-nowrap">
-                      <Star className="w-3 h-3 text-yellow-200 fill-current flex-shrink-0" />
-                      <span className="text-xs text-yellow-100 font-medium">{unlockedBadges}徽章</span>
-                    </div>
-                    <div className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-blue-400/25 border border-blue-400/15 backdrop-blur-sm whitespace-nowrap">
-                      <Clock className="w-3 h-3 text-blue-200 flex-shrink-0" />
-                      <span className="text-xs text-blue-100 font-medium">{streakDays}天</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="text-right flex-shrink-0">
-                  <div className="text-3xl font-black text-white tabular-nums tracking-tight drop-shadow-sm">{healthScore}</div>
-                  <div className="text-xs text-white/60 font-medium">健康分</div>
-                </div>
-              </div>
-            </LiquidHeroCard>
           </div>
-        </header>
-
-        <main className="max-w-md mx-auto px-4 -mt-8 space-y-5">
-          {isLoading ? (
-            <>
-              <GlassCard variant="liquid" className="animate-liquid-fade-in liquid-card-enter-1">
-                <div className="space-y-3">
-                  <div className="h-4 w-3/4 skeleton rounded-lg" />
-                  <div className="h-3 w-full skeleton rounded-lg" />
-                  <div className="h-3 w-5/6 skeleton rounded-lg" />
-                  <div className="h-20 w-full skeleton rounded-xl mt-2" />
-                </div>
-              </GlassCard>
-              <SkeletonQuickActions count={6} />
-              <GlassCard variant="liquid" className="animate-liquid-fade-in liquid-card-enter-4">
-                <div className="space-y-3">
-                  <div className="h-4 w-2/3 skeleton rounded-lg" />
-                  <div className="h-16 w-full skeleton rounded-xl" />
-                  <div className="h-16 w-full skeleton rounded-xl" />
-                </div>
-              </GlassCard>
-            </>
-          ) : (
-            <>
-              {onlineCameras.length > 0 && (
-                <GlassCard 
-                  variant="liquid" 
-                  className="animate-liquid-fade-in liquid-card-enter-1 overflow-hidden"
-                  enable3D={true}
-                  enableLiquid={true}
-                  enableShine={true}
-                >
-                  <div className="flex items-center justify-between mb-3.5">
-                    <h3 className="font-bold text-neutral-800 dark:text-neutral-100 flex items-center gap-2 text-base">
-                      <div className="w-8 h-8 rounded-lg bg-blue-100/80 dark:bg-blue-900/30 backdrop-blur-sm flex items-center justify-center">
-                        <Camera className="w-[18px] h-[18px] text-blue-600 dark:text-blue-400" />
-                      </div>
-                      在线设备
-                    </h3>
-                    <button 
-                      className="text-xs text-blue-600 dark:text-blue-400 font-semibold flex items-center gap-1 px-2.5 py-1 rounded-full bg-blue-50/80 dark:bg-blue-900/20 hover:bg-blue-100/80 dark:hover:bg-blue-900/30 transition-colors active-scale backdrop-blur-sm"
-                      onClick={() => onNavigate('camera-monitor')}
-                    >
-                      查看全部
-                      <ChevronRight className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
-                  <div className="grid grid-cols-2 gap-2.5">
-                    {onlineCameras.slice(0, 2).map((camera, index) => (
-                      <button
-                        key={camera.id}
-                        onClick={() => onNavigate('camera-monitor')}
-                        className="relative aspect-video rounded-xl overflow-hidden group active-scale"
-                        style={{ animationDelay: `${0.1 + index * 0.05}s` }}
-                      >
-                        <div className="absolute inset-0 bg-gradient-to-br from-neutral-200/80 to-neutral-300/80 dark:from-neutral-700/80 dark:to-neutral-800/80 backdrop-blur-sm flex items-center justify-center">
-                          <Video className="w-8 h-8 text-neutral-400 dark:text-neutral-500" />
-                        </div>
-                        <div className="absolute bottom-2 left-2 right-2 flex items-center justify-between">
-                          <span className="text-xs text-white font-medium px-2 py-1 rounded-lg bg-black/50 backdrop-blur-md">
-                            {camera.name}
-                          </span>
-                          <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse shadow-lg shadow-emerald-400/50" />
-                        </div>
-                        <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
-                          <div className="w-12 h-12 rounded-full bg-white/90 backdrop-blur-md flex items-center justify-center shadow-xl transform scale-75 group-hover:scale-100 transition-transform duration-300">
-                            <ArrowUpRight className="w-5 h-5 text-blue-600" />
-                          </div>
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                </GlassCard>
-              )}
-
-              <div className="space-y-3 animate-liquid-fade-in liquid-card-enter-3">
-                <div className="flex items-center justify-between px-1">
-                  <h3 className="font-bold text-neutral-800 dark:text-neutral-100 flex items-center gap-2 text-base">
-                    <Sparkles className="w-5 h-5 text-amber-500" />
-                    快捷功能
-                  </h3>
-                </div>
-                
-                <div 
-                  className="grid grid-cols-2 gap-3"
-                  role="list"
-                  aria-label="快捷功能列表"
-                >
-                  {quickActions.map((action, index) => (
-                    <button
-                      key={action.page}
-                      onClick={() => handleCardClick(action.page)}
-                      className="group relative col-span-1 active-scale overflow-hidden rounded-2xl touch-manipulation"
-                      style={{ animationDelay: `${0.15 + index * 0.06}s` }}
-                      aria-label={`${action.label}：${action.description}`}
-                      role="listitem"
-                    >
-                      <div className="relative bg-white/70 dark:bg-neutral-900/70 backdrop-blur-xl rounded-2xl p-4 sm:p-4.5 h-full min-h-[120px] sm:min-h-[130px] border border-white/50 dark:border-neutral-700/50 group-hover:bg-white/85 dark:group-hover:bg-neutral-800/85 group-hover:border-white/60 dark:group-hover:border-neutral-600/60 group-hover:shadow-xl dark:group-hover:shadow-black/30 transition-all duration-300 liquid-hover">
-                        {/* 液态玻璃光泽效果 */}
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
-                        
-                        <div className="relative mb-3">
-                          <div className={`w-12 h-12 sm:w-13 sm:h-13 mx-auto rounded-2xl bg-gradient-to-br ${action.bgGradient} flex items-center justify-center shadow-lg transform group-hover:scale-110 group-hover:-rotate-6 transition-all duration-300`}>
-                            <action.icon className="w-6 h-6 sm:w-6.5 sm:h-6.5 text-white" strokeWidth={2} />
-                          </div>
-                          {action.badge && (
-                            <div className={`absolute -top-1 -right-1 ${action.badgeColor || 'bg-red-500'} text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full shadow-md leading-none min-w-[20px] text-center`}>
-                            {action.badge}
-                          </div>
-                          )}
-                        </div>
-                        
-                        <h4 className="font-bold text-sm text-neutral-800 dark:text-neutral-100 text-center mb-0.5 truncate">{action.label}</h4>
-                        <p className="text-[11px] text-neutral-500 dark:text-neutral-400 text-center truncate">{action.description}</p>
-                        
-                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-0.5 rounded-full bg-gradient-to-r opacity-0 group-hover:w-4/5 group-hover:opacity-100 transition-all duration-300" style={{ backgroundImage: `linear-gradient(to right, transparent, ${action.color}, transparent)` }} />
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
+        ))}
+      </div>
 
-              {upcomingReminders.length > 0 && (
-                <GlassCard 
-                  variant="liquid" 
-                  className="animate-liquid-fade-in liquid-card-enter-4 overflow-hidden"
-                  enable3D={true}
-                  enableLiquid={true}
+      {/* 今日数据概览 */}
+      <div className="px-4 mt-6">
+        <div
+          className="bg-white overflow-hidden animate-fade-in"
+          style={{
+            borderRadius: responsiveStyle.cardRadius,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+          }}
+        >
+          <div className="p-4">
+            <h3
+              className="font-semibold mb-4"
+              style={{
+                fontSize: responsiveStyle.fontSize,
+                color: '#1D1D1F',
+              }}
+            >
+              今日数据概览
+            </h3>
+            
+            <div className="grid grid-cols-2 gap-4">
+              {[
+                {
+                  icon: Utensils,
+                  label: '进食',
+                  value: dietStats.totalMeals,
+                  unit: '次',
+                  color: '#F59E0B',
+                },
+                {
+                  icon: Activity,
+                  label: '活动',
+                  value: 85,
+                  unit: '分钟',
+                  color: '#10B981',
+                },
+                {
+                  icon: Heart,
+                  label: '健康',
+                  value: healthScoreData.overall,
+                  unit: '分',
+                  color: '#EF4444',
+                },
+                {
+                  icon: Zap,
+                  label: '积分',
+                  value: totalPoints,
+                  unit: '',
+                  color: '#8B5CF6',
+                },
+              ].map((stat, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl touch-scale"
+                  style={{ borderRadius: responsiveStyle.cardRadius - 4 }}
                 >
-                  <div className="flex items-center justify-between mb-3.5">
-                    <h3 className="font-bold text-neutral-800 dark:text-neutral-100 flex items-center gap-2 text-base">
-                      <div className="w-8 h-8 rounded-lg bg-amber-100/80 dark:bg-amber-900/30 backdrop-blur-sm flex items-center justify-center">
-                        <Bell className="w-[18px] h-[18px] text-amber-600 dark:text-amber-400" />
-                      </div>
-                      即将到来
-                    </h3>
-                    <button 
-                      className="text-xs text-amber-600 dark:text-amber-400 font-semibold flex items-center gap-1 px-2.5 py-1 rounded-full bg-amber-50/80 dark:bg-amber-900/20 hover:bg-amber-100/80 dark:hover:bg-amber-900/30 transition-colors active-scale backdrop-blur-sm"
-                      onClick={() => onNavigate('reminders')}
-                    >
-                      全部
-                      <ChevronRight className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
-                  <div className="space-y-2">
-                    {upcomingReminders.map((reminder, index) => (
-                      <div 
-                        key={reminder.id}
-                        className="flex items-center gap-3 p-3 rounded-xl bg-gradient-to-r from-amber-50/90 to-orange-50/60 dark:from-amber-900/25 dark:to-orange-900/15 hover:from-amber-100/90 hover:to-orange-100/70 dark:hover:from-amber-900/35 dark:hover:to-orange-900/25 transition-all cursor-pointer active-scale group backdrop-blur-sm"
-                        style={{ animationDelay: `${0.2 + index * 0.05}s` }}
-                        onClick={() => onNavigate('reminders')}
-                      >
-                        <div className="w-1.5 h-8 rounded-full bg-gradient-to-b from-amber-400 to-orange-400" />
-                        <div className="flex-1 min-w-0">
-                          <h4 className="font-semibold text-sm text-neutral-800 dark:text-neutral-100 truncate">{reminder.title}</h4>
-                          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{reminder.date} {reminder.time}</p>
-                        </div>
-                        <ArrowUpRight className="w-4 h-4 text-neutral-300 dark:text-neutral-600 group-hover:text-amber-500 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all flex-shrink-0" />
-                      </div>
-                    ))}
+                  <div
+                    className="flex items-center justify-center"
+                    style={{
+                      width: 40,
+                      height: 40,
+                      backgroundColor: `${stat.color}20`,
+                      borderRadius: 10,
+                    }}
+                  >
+                    <stat.icon style={{ width: 20, height: 20, color: stat.color }} />
                   </div>
-                </GlassCard>
-              )}
-
-              {recentRecords.length > 0 && (
-                <GlassCard 
-                  variant="liquid" 
-                  className="animate-liquid-fade-in liquid-card-enter-5 overflow-hidden"
-                  enable3D={true}
-                  enableLiquid={true}
-                >
-                  <div className="flex items-center justify-between mb-3.5">
-                    <h3 className="font-bold text-neutral-800 dark:text-neutral-100 flex items-center gap-2 text-base">
-                      <div className="w-8 h-8 rounded-lg bg-emerald-100/80 dark:bg-emerald-900/30 backdrop-blur-sm flex items-center justify-center">
-                        <Activity className="w-[18px] h-[18px] text-emerald-600 dark:text-emerald-400" />
-                      </div>
-                      最近记录
-                    </h3>
-                    <button 
-                      className="text-xs text-emerald-600 dark:text-emerald-400 font-semibold flex items-center gap-1 px-2.5 py-1 rounded-full bg-emerald-50/80 dark:bg-emerald-900/20 hover:bg-emerald-100/80 dark:hover:bg-emerald-900/30 transition-colors active-scale backdrop-blur-sm"
-                      onClick={() => onNavigate('health-records')}
+                  <div>
+                    <p className="text-xs" style={{ color: '#86868B' }}>{stat.label}</p>
+                    <p
+                      className="font-bold font-mono"
+                      style={{
+                        fontSize: responsiveStyle.fontSize + 2,
+                        color: '#1D1D1F',
+                      }}
                     >
-                      更多
-                      <ChevronRight className="w-3.5 h-3.5" />
-                    </button>
-                  </div>
-                  <div className="space-y-2">
-                    {recentRecords.map((record, index) => (
-                      <div 
-                        key={record.id}
-                        className="p-3 rounded-xl bg-gradient-to-r from-emerald-50/90 to-teal-50/60 dark:from-emerald-900/25 dark:to-teal-900/15 hover:shadow-sm dark:hover:shadow-none hover:from-emerald-100/90 hover:to-teal-100/70 dark:hover:from-emerald-900/35 dark:hover:to-teal-900/25 transition-all cursor-pointer active-scale group backdrop-blur-sm"
-                        style={{ animationDelay: `${0.25 + index * 0.05}s` }}
-                        onClick={() => onNavigate('health-records')}
-                      >
-                        <div className="flex items-center justify-between">
-                          <h4 className="font-semibold text-sm text-neutral-800 dark:text-neutral-100 truncate pr-2">{record.title}</h4>
-                          <span className="text-xs text-neutral-400 dark:text-neutral-500 flex-shrink-0">{record.createdAt?.split('T')[0]}</span>
-                        </div>
-                        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1 line-clamp-2 leading-relaxed">{record.content}</p>
-                      </div>
-                    ))}
-                  </div>
-                </GlassCard>
-              )}
-
-              <div className="flex items-center justify-center py-6 animate-liquid-fade-in liquid-card-enter-6">
-                <div className="flex items-center gap-5 text-xs text-neutral-400 dark:text-neutral-500">
-                  <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-neutral-100/90 dark:bg-neutral-800/90 hover:bg-neutral-200/90 dark:hover:bg-neutral-700/90 transition-colors cursor-default backdrop-blur-sm">
-                    <Star className="w-3 h-3 text-amber-400 animate-pulse-glow" />
-                    <span className="font-medium">{totalPoints} 积分</span>
-                  </div>
-                  <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-neutral-100/90 dark:bg-neutral-800/90 hover:bg-neutral-200/90 dark:hover:bg-neutral-700/90 transition-colors cursor-default backdrop-blur-sm">
-                    <Heart className="w-3 h-3 text-rose-400 animate-pulse-glow" />
-                    <span className="font-medium">{metrics.overall}% 亲密度</span>
+                      {stat.value}{stat.unit}
+                    </p>
                   </div>
                 </div>
-              </div>
-            </>
-          )}
-        </main>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 快捷操作 */}
+      <div className="px-4 mt-6">
+        <div className="flex gap-3">
+          <button
+            onClick={() => onNavigate('records')}
+            className="flex-1 flex items-center justify-center gap-2 py-4 bg-orange-500 text-white rounded-xl font-medium touch-scale animate-scale-in"
+            style={{
+              borderRadius: responsiveStyle.cardRadius,
+              boxShadow: '0 4px 12px rgba(245,166,35,0.3)',
+            }}
+          >
+            <Plus style={{ width: 20, height: 20 }} />
+            <span style={{ fontSize: responsiveStyle.fontSize }}>添加记录</span>
+          </button>
+          <button
+            onClick={() => onNavigate('translator')}
+            className="flex-1 flex items-center justify-center gap-2 py-4 bg-white rounded-xl font-medium touch-scale animate-scale-in"
+            style={{
+              borderRadius: responsiveStyle.cardRadius,
+              boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+              color: '#1D1D1F',
+            }}
+          >
+            <MessageCircle style={{ width: 20, height: 20, color: '#6366F1' }} />
+            <span style={{ fontSize: responsiveStyle.fontSize }}>翻译心声</span>
+          </button>
+        </div>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
+
+export default HomePage;
\ No newline at end of file
diff --git a/src/pages/InsurancePage.tsx b/src/pages/InsurancePage.tsx
index 427ef4fe..d59617fe 100644
--- a/src/pages/InsurancePage.tsx
+++ b/src/pages/InsurancePage.tsx
@@ -3,31 +3,166 @@
 //
 // 作者: 带娃的小陈工
 // 日期: 2026-05-26
-// 描述: 宠物保险页面
+// 描述: 宠物保险页面 - 完整功能实现
 // ============================================
 
 import { useState } from 'react';
-import { Shield, Check } from 'lucide-react';
+import { Shield, Check, FileText, DollarSign, Calendar, AlertCircle, ChevronRight, CreditCard, Clock, Phone, Download, Eye, Plus, X, Upload, Camera, Info } from 'lucide-react';
 import { useInsuranceStore } from '../store/insuranceStore';
+import { usePetStore } from '../store/petStore';
+import { Card, Button, Badge, GlassModal } from '../components/DesignSystem';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
 
 export default function InsurancePage() {
-  const { plans, policies, selectPlan, purchasePolicy } = useInsuranceStore();
+  const { plans, policies, claims, selectedPlan, selectPlan, purchasePolicy, submitClaim } = useInsuranceStore();
+  const { pets, selectedPetId } = usePetStore();
+  const responsive = useResponsiveStyle();
+  
   const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
+  const [showPurchaseModal, setShowPurchaseModal] = useState(false);
+  const [showClaimModal, setShowClaimModal] = useState(false);
+  const [showPolicyDetailModal, setShowPolicyDetailModal] = useState(false);
+  const [selectedPolicyId, setSelectedPolicyId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'plans' | 'policies' | 'claims'>('plans');
+  const [purchaseStep, setPurchaseStep] = useState(1);
+  
+  // 理赔表单状态
+  const [claimForm, setClaimForm] = useState({
+    policyId: '',
+    type: 'medical',
+    amount: 0,
+    description: '',
+    date: new Date(),
+    documents: []
+  });
 
-  const handleSelectPlan = async (planId: string) => {
+  const selectedPet = pets.find(p => p.id === selectedPetId);
+  const selectedPolicy = policies.find(p => p.id === selectedPolicyId);
+  const selectedPlanData = plans.find(p => p.id === selectedPlanId);
+
+  const handleSelectPlan = (planId: string) => {
     setSelectedPlanId(planId);
     const plan = plans.find(p => p.id === planId);
     if (plan) {
       selectPlan(plan);
-      await purchasePolicy(planId, 'pet-1');
+      setShowPurchaseModal(true);
+      setPurchaseStep(1);
+    }
+  };
+
+  const handlePurchasePolicy = async () => {
+    if (!selectedPlanId || !selectedPetId) return;
+    
+    const success = await purchasePolicy(selectedPlanId, selectedPetId);
+    if (success) {
+      setShowPurchaseModal(false);
+      setSelectedPlanId(null);
+      setPurchaseStep(1);
+      setActiveTab('policies');
+    }
+  };
+
+  const handleSubmitClaim = async () => {
+    if (!claimForm.policyId || !claimForm.description || claimForm.amount <= 0) {
+      return;
+    }
+    
+    const success = await submitClaim({
+      policyId: claimForm.policyId,
+      type: claimForm.type,
+      amount: claimForm.amount,
+      description: claimForm.description,
+      date: claimForm.date,
+      documents: claimForm.documents
+    });
+    
+    if (success) {
+      setShowClaimModal(false);
+      setClaimForm({
+        policyId: '',
+        type: 'medical',
+        amount: 0,
+        description: '',
+        date: new Date(),
+        documents: []
+      });
+      setActiveTab('claims');
     }
   };
 
+  const handleViewPolicyDetail = (policyId: string) => {
+    setSelectedPolicyId(policyId);
+    setShowPolicyDetailModal(true);
+  };
+
+  const handleStartClaim = (policyId: string) => {
+    setClaimForm(prev => ({ ...prev, policyId }));
+    setShowClaimModal(true);
+  };
+
+  const getClaimStatusLabel = (status: string) => {
+    const labels: Record<string, string> = {
+      submitted: '已提交',
+      under_review: '审核中',
+      approved: '已批准',
+      rejected: '已拒绝'
+    };
+    return labels[status] || status;
+  };
+
+  const getClaimStatusColor = (status: string) => {
+    const colors: Record<string, string> = {
+      submitted: 'primary',
+      under_review: 'warning',
+      approved: 'success',
+      rejected: 'danger'
+    };
+    return colors[status] || 'default';
+  };
+
+  const getPolicyStatusLabel = (status: string) => {
+    const labels: Record<string, string> = {
+      active: '有效',
+      pending: '待生效',
+      expired: '已过期',
+      cancelled: '已取消'
+    };
+    return labels[status] || status;
+  };
+
+  const getPolicyStatusColor = (status: string) => {
+    const colors: Record<string, string> = {
+      active: 'success',
+      pending: 'warning',
+      expired: 'default',
+      cancelled: 'danger'
+    };
+    return colors[status] || 'default';
+  };
+
+  const getClaimTypeLabel = (type: string) => {
+    const labels: Record<string, string> = {
+      medical: '医疗费用',
+      accident: '意外伤害',
+      surgery: '手术费用',
+      wellness: '健康体检'
+    };
+    return labels[type] || type;
+  };
+
+  // 计算统计数据
+  const totalCoverage = (policies || []).reduce((sum, p) => {
+    const plan = (plans || []).find(pl => pl?.id === p?.planId);
+    return sum + (plan?.annualLimit || 0);
+  }, 0);
+  const totalClaimsAmount = (claims || []).reduce((sum, c) => sum + (c?.amount || 0), 0);
+  const approvedClaimsCount = (claims || []).filter(c => c?.status === 'approved').length;
+
   return (
     <div className="min-h-screen bg-neutral-50 pb-24">
       {/* Header */}
-      <div className="bg-gradient-to-br from-secondary-500 to-secondary-600 text-white px-6 py-8">
-        <div className="max-w-md mx-auto">
+      <div className="bg-gradient-to-br from-secondary-500 to-secondary-600 text-white px-6 py-8" style={{ paddingTop: responsive.safeAreaPadding.paddingTop + 32 }}>
+        <div style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
           <div className="flex items-center gap-3 mb-4">
             <div className="w-12 h-12 bg-white/20 backdrop-blur rounded-xl flex items-center justify-center">
               <Shield className="w-6 h-6" />
@@ -37,135 +172,778 @@ export default function InsurancePage() {
               <p className="text-secondary-100">为爱宠提供全方位保障</p>
             </div>
           </div>
+          
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-3 mt-4">
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3">
+              <div className="text-sm text-secondary-100">保障总额</div>
+              <div className="text-xl font-bold">¥{totalCoverage.toLocaleString()}</div>
+            </div>
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3">
+              <div className="text-sm text-secondary-100">理赔金额</div>
+              <div className="text-xl font-bold">¥{totalClaimsAmount.toLocaleString()}</div>
+            </div>
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3">
+              <div className="text-sm text-secondary-100">成功理赔</div>
+              <div className="text-xl font-bold">{approvedClaimsCount}</div>
+            </div>
+          </div>
         </div>
       </div>
 
-      {/* My Policies */}
-      {policies.length > 0 && (
-        <div className="px-4 py-6 max-w-md mx-auto">
-          <h2 className="text-lg font-bold text-neutral-800 mb-4">我的保单</h2>
-          {policies.map((policy) => (
-            <div key={policy.id} className="bg-white rounded-2xl p-5 shadow-sm border border-neutral-100 mb-3">
-              <div className="flex items-start justify-between mb-3">
-                <div>
-                  <h3 className="font-bold text-neutral-800">{policy.planName}</h3>
-                  <p className="text-sm text-neutral-500">保障中 · {policy.petName}</p>
-                </div>
-                <span className="px-3 py-1 bg-success-100 text-success-700 rounded-full text-xs font-semibold">
-                  有效
-                </span>
-              </div>
-              <div className="flex items-center justify-between text-sm">
-                <span className="text-neutral-600">¥{policy.premium}/月</span>
-                <span className="text-neutral-500">
-                  到期: {policy.endDate.toLocaleDateString()}
-                </span>
-              </div>
-            </div>
+      {/* Tabs */}
+      <div className="px-4 py-4 sticky top-0 bg-neutral-50 z-10">
+        <div className="flex gap-2" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+          {(['plans', 'policies', 'claims'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                activeTab === tab
+                  ? 'bg-secondary-500 text-white shadow-lg'
+                  : 'bg-white text-neutral-600 hover:bg-neutral-100'
+              }`}
+            >
+              {tab === 'plans' ? '保险方案' : tab === 'policies' ? '我的保单' : '理赔记录'}
+            </button>
           ))}
         </div>
-      )}
+      </div>
 
-      {/* Insurance Plans */}
-      <div className="px-4 max-w-md mx-auto">
-        <h2 className="text-lg font-bold text-neutral-800 mb-4">选择保障方案</h2>
-        <div className="space-y-4">
-          {plans.map((plan) => (
-            <div
-              key={plan.id}
-              className={`bg-white rounded-2xl overflow-hidden shadow-sm border transition-all ${
-                selectedPlanId === plan.id 
-                  ? 'border-secondary-500 ring-2 ring-secondary-200' 
-                  : 'border-neutral-100 hover:border-secondary-200'
-              }`}
-            >
-              {plan.isPopular && (
-                <div className="bg-gradient-to-r from-warning-500 to-warning-600 text-white text-center py-1.5 text-sm font-semibold">
-                  🔥 最受欢迎
+      {/* Content */}
+      <div className="px-4" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+        {/* Plans Tab */}
+        {activeTab === 'plans' && (
+          <div className="space-y-4">
+            <h2 className="text-lg font-bold text-neutral-800">选择保障方案</h2>
+            
+            <div className="space-y-4">
+              {plans.map((plan) => (
+                <Card
+                  key={plan.id}
+                  variant="default"
+                  padding="lg"
+                  hover
+                  onClick={() => handleSelectPlan(plan.id)}
+                  className={selectedPlanId === plan.id ? 'border-secondary-500 ring-2 ring-secondary-200' : ''}
+                >
+                  {plan.isPopular && (
+                    <div className="bg-gradient-to-r from-warning-500 to-warning-600 text-white text-center py-1.5 text-sm font-semibold -mt-5 -mx-5 mb-4 rounded-t-2xl">
+                      🔥 最受欢迎
+                    </div>
+                  )}
+                  
+                  <div className="flex items-start justify-between mb-4">
+                    <div>
+                      <h3 className="text-xl font-bold text-neutral-800 mb-1">{plan.name}</h3>
+                      <p className="text-neutral-500 text-sm">{plan.description}</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-baseline gap-1 mb-4">
+                    <span className="text-3xl font-bold text-secondary-600">¥{plan.price}</span>
+                    <span className="text-neutral-500">/月</span>
+                  </div>
+
+                  {/* Coverage */}
+                  <div className="space-y-2 mb-5">
+                    <div className="flex items-center gap-2 text-sm">
+                      <Check className={`w-4 h-4 ${plan.coverage.accidents ? 'text-success-500' : 'text-neutral-300'}`} />
+                      <span className={plan.coverage.accidents ? 'text-neutral-700' : 'text-neutral-400'}>
+                        意外保障
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm">
+                      <Check className={`w-4 h-4 ${plan.coverage.illnesses ? 'text-success-500' : 'text-neutral-300'}`} />
+                      <span className={plan.coverage.illnesses ? 'text-neutral-700' : 'text-neutral-400'}>
+                        疾病医疗
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm">
+                      <Check className={`w-4 h-4 ${plan.coverage.wellness ? 'text-success-500' : 'text-neutral-300'}`} />
+                      <span className={plan.coverage.wellness ? 'text-neutral-700' : 'text-neutral-400'}>
+                        健康体检
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm">
+                      <Check className={`w-4 h-4 ${plan.coverage.surgery ? 'text-success-500' : 'text-neutral-300'}`} />
+                      <span className={plan.coverage.surgery ? 'text-neutral-700' : 'text-neutral-400'}>
+                        手术保障
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm">
+                      <Check className={`w-4 h-4 ${plan.coverage.emergency ? 'text-success-500' : 'text-neutral-300'}`} />
+                      <span className={plan.coverage.emergency ? 'text-neutral-700' : 'text-neutral-400'}>
+                        急诊服务
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Features */}
+                  <div className="flex flex-wrap gap-2 mb-5">
+                    {plan.features.map((feature, idx) => (
+                      <Badge key={idx} variant="default" size="sm">
+                        {feature}
+                      </Badge>
+                    ))}
+                  </div>
+
+                  {/* Policy Details */}
+                  <div className="bg-neutral-50 rounded-xl p-4 mb-5">
+                    <div className="grid grid-cols-3 gap-4 text-center">
+                      <div>
+                        <p className="text-xs text-neutral-500 mb-1">免赔额</p>
+                        <p className="font-bold text-neutral-800">¥{plan.deductible}</p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-neutral-500 mb-1">报销比例</p>
+                        <p className="font-bold text-neutral-800">{plan.reimbursementPercentage}%</p>
+                      </div>
+                      <div>
+                        <p className="text-xs text-neutral-500 mb-1">年度限额</p>
+                        <p className="font-bold text-neutral-800">¥{plan.annualLimit.toLocaleString()}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    fullWidth
+                    icon={<Shield className="w-4 h-4" />}
+                  >
+                    立即投保
+                  </Button>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Policies Tab */}
+        {activeTab === 'policies' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">我的保单</h2>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => setActiveTab('plans')}
+                icon={<Plus className="w-4 h-4" />}
+              >
+                新投保
+              </Button>
+            </div>
+
+            {policies.length === 0 ? (
+              <Card variant="outlined" padding="lg">
+                <div className="text-center py-8">
+                  <Shield className="w-12 h-12 text-neutral-300 mx-auto mb-3" />
+                  <p className="text-neutral-500">暂无保单</p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-4"
+                    onClick={() => setActiveTab('plans')}
+                  >
+                    选择保险方案
+                  </Button>
                 </div>
+              </Card>
+            ) : (
+              <div className="space-y-3">
+                {policies.map((policy) => {
+                  const plan = plans.find(p => p.id === policy.planId);
+                  return (
+                    <Card key={policy.id} variant="default" padding="md" hover>
+                      <div className="flex items-start justify-between mb-3">
+                        <div className="flex items-center gap-3">
+                          <div className="w-10 h-10 bg-secondary-100 rounded-xl flex items-center justify-center">
+                            <Shield className="w-5 h-5 text-secondary-600" />
+                          </div>
+                          <div>
+                            <h3 className="font-bold text-neutral-800">{policy.planName}</h3>
+                            <p className="text-sm text-neutral-500">{policy.petName}</p>
+                          </div>
+                        </div>
+                        <Badge variant={getPolicyStatusColor(policy.status) as any} size="sm">
+                          {getPolicyStatusLabel(policy.status)}
+                        </Badge>
+                      </div>
+                      
+                      <div className="grid grid-cols-2 gap-3 text-sm mb-3">
+                        <div className="flex items-center gap-2 text-neutral-600">
+                          <DollarSign className="w-4 h-4" />
+                          <span>¥{policy.premium}/月</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-neutral-600">
+                          <Calendar className="w-4 h-4" />
+                          <span>到期: {policy.endDate.toLocaleDateString()}</span>
+                        </div>
+                      </div>
+
+                      {plan && (
+                        <div className="bg-neutral-50 rounded-lg p-3 mb-3">
+                          <div className="flex justify-between text-sm">
+                            <span className="text-neutral-500">年度限额</span>
+                            <span className="font-medium text-neutral-800">¥{plan.annualLimit.toLocaleString()}</span>
+                          </div>
+                          <div className="flex justify-between text-sm mt-1">
+                            <span className="text-neutral-500">报销比例</span>
+                            <span className="font-medium text-neutral-800">{plan.reimbursementPercentage}%</span>
+                          </div>
+                        </div>
+                      )}
+
+                      <div className="flex gap-2">
+                        <Button 
+                          variant="outline" 
+                          size="sm" 
+                          fullWidth 
+                          onClick={() => handleViewPolicyDetail(policy.id)}
+                          icon={<Eye className="w-4 h-4" />}
+                        >
+                          详情
+                        </Button>
+                        <Button 
+                          variant="primary" 
+                          size="sm" 
+                          fullWidth 
+                          onClick={() => handleStartClaim(policy.id)}
+                          icon={<FileText className="w-4 h-4" />}
+                        >
+                          理赔
+                        </Button>
+                      </div>
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Claims Tab */}
+        {activeTab === 'claims' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">理赔记录</h2>
+              {policies.length > 0 && (
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={() => handleStartClaim(policies[0].id)}
+                  icon={<Plus className="w-4 h-4" />}
+                >
+                  新理赔
+                </Button>
               )}
-              
-              <div className="p-5">
-                <div className="flex items-start justify-between mb-4">
-                  <div>
-                    <h3 className="text-xl font-bold text-neutral-800 mb-1">{plan.name}</h3>
-                    <p className="text-neutral-500 text-sm">{plan.description}</p>
+            </div>
+
+            {claims.length === 0 ? (
+              <Card variant="outlined" padding="lg">
+                <div className="text-center py-8">
+                  <FileText className="w-12 h-12 text-neutral-300 mx-auto mb-3" />
+                  <p className="text-neutral-500">暂无理赔记录</p>
+                  {policies.length > 0 && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="mt-4"
+                      onClick={() => handleStartClaim(policies[0].id)}
+                    >
+                      申请理赔
+                    </Button>
+                  )}
+                </div>
+              </Card>
+            ) : (
+              <div className="space-y-3">
+                {claims.map((claim) => {
+                  const policy = policies.find(p => p.id === claim.policyId);
+                  return (
+                    <Card key={claim.id} variant="default" padding="md" hover>
+                      <div className="flex items-start justify-between mb-3">
+                        <div className="flex items-center gap-3">
+                          <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
+                            claim.status === 'approved' ? 'bg-success-100' : 
+                            claim.status === 'rejected' ? 'bg-danger-100' : 
+                            'bg-warning-100'
+                          }`}>
+                            <FileText className={`w-5 h-5 ${
+                              claim.status === 'approved' ? 'text-success-600' : 
+                              claim.status === 'rejected' ? 'text-danger-600' : 
+                              'text-warning-600'
+                            }`} />
+                          </div>
+                          <div>
+                            <h3 className="font-bold text-neutral-800">{getClaimTypeLabel(claim.type)}</h3>
+                            <p className="text-sm text-neutral-500">{policy?.planName || '未知保单'}</p>
+                          </div>
+                        </div>
+                        <Badge variant={getClaimStatusColor(claim.status) as any} size="sm">
+                          {getClaimStatusLabel(claim.status)}
+                        </Badge>
+                      </div>
+                      
+                      <div className="grid grid-cols-2 gap-3 text-sm mb-3">
+                        <div className="flex items-center gap-2 text-neutral-600">
+                          <DollarSign className="w-4 h-4" />
+                          <span>¥{claim.amount.toLocaleString()}</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-neutral-600">
+                          <Calendar className="w-4 h-4" />
+                          <span>{claim.date.toLocaleDateString()}</span>
+                        </div>
+                      </div>
+
+                      <p className="text-sm text-neutral-600 p-2 bg-neutral-50 rounded-lg">
+                        {claim.description}
+                      </p>
+
+                      {claim.status === 'under_review' && (
+                        <div className="mt-3 p-2 bg-warning-50 rounded-lg flex items-center gap-2">
+                          <Clock className="w-4 h-4 text-warning-500" />
+                          <span className="text-sm text-warning-700">预计审核时间: 3-5个工作日</span>
+                        </div>
+                      )}
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Purchase Modal */}
+      <GlassModal
+        isOpen={showPurchaseModal}
+        onClose={() => setShowPurchaseModal(false)}
+        title="投保确认"
+        size="lg"
+      >
+        {selectedPlanData && (
+          <div className="space-y-4">
+            {/* Step Indicator */}
+            <div className="flex items-center justify-center gap-2 mb-4">
+              {[1, 2, 3].map((step) => (
+                <div key={step} className="flex items-center gap-2">
+                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
+                    purchaseStep >= step ? 'bg-secondary-500 text-white' : 'bg-neutral-100 text-neutral-400'
+                  }`}>
+                    {purchaseStep > step ? <Check className="w-4 h-4" /> : step}
                   </div>
+                  {step < 3 && (
+                    <div className={`w-12 h-1 ${purchaseStep > step ? 'bg-secondary-500' : 'bg-neutral-100'}`} />
+                  )}
                 </div>
+              ))}
+            </div>
+
+            {/* Step 1: Plan Summary */}
+            {purchaseStep === 1 && (
+              <div>
+                <h4 className="font-bold text-neutral-800 mb-3">保险方案详情</h4>
+                
+                <Card variant="gradient" padding="md">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="w-10 h-10 bg-secondary-100 rounded-xl flex items-center justify-center">
+                      <Shield className="w-5 h-5 text-secondary-600" />
+                    </div>
+                    <div>
+                      <h5 className="font-bold text-neutral-800">{selectedPlanData.name}</h5>
+                      <p className="text-sm text-neutral-500">{selectedPlanData.description}</p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-baseline gap-1 mb-3">
+                    <span className="text-2xl font-bold text-secondary-600">¥{selectedPlanData.price}</span>
+                    <span className="text-neutral-500">/月</span>
+                  </div>
 
-                <div className="flex items-baseline gap-1 mb-4">
-                  <span className="text-3xl font-bold text-secondary-600">¥{plan.price}</span>
-                  <span className="text-neutral-500">/月</span>
+                  <div className="grid grid-cols-3 gap-3 text-center p-3 bg-white/50 rounded-xl">
+                    <div>
+                      <p className="text-xs text-neutral-500">免赔额</p>
+                      <p className="font-bold text-neutral-800">¥{selectedPlanData.deductible}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-neutral-500">报销比例</p>
+                      <p className="font-bold text-neutral-800">{selectedPlanData.reimbursementPercentage}%</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-neutral-500">年度限额</p>
+                      <p className="font-bold text-neutral-800">¥{selectedPlanData.annualLimit.toLocaleString()}</p>
+                    </div>
+                  </div>
+                </Card>
+
+                {/* Coverage List */}
+                <div className="mt-4">
+                  <h5 className="font-medium text-neutral-700 mb-2">保障范围</h5>
+                  <div className="space-y-2">
+                    {Object.entries(selectedPlanData.coverage).map(([key, value]) => (
+                      <div key={key} className="flex items-center gap-2 text-sm">
+                        <Check className={`w-4 h-4 ${value ? 'text-success-500' : 'text-neutral-300'}`} />
+                        <span className={value ? 'text-neutral-700' : 'text-neutral-400'}>
+                          {key === 'accidents' ? '意外保障' : 
+                           key === 'illnesses' ? '疾病医疗' : 
+                           key === 'wellness' ? '健康体检' : 
+                           key === 'dental' ? '牙科护理' : 
+                           key === 'surgery' ? '手术保障' : 
+                           key === 'emergency' ? '急诊服务' : key}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
                 </div>
+              </div>
+            )}
 
-                {/* Coverage */}
-                <div className="space-y-2 mb-5">
-                  <div className="flex items-center gap-2 text-sm">
-                    <Check className={`w-4 h-4 ${plan.coverage.accidents ? 'text-success-500' : 'text-neutral-300'}`} />
-                    <span className={plan.coverage.accidents ? 'text-neutral-700' : 'text-neutral-400'}>
-                      意外保障
-                    </span>
+            {/* Step 2: Pet Selection */}
+            {purchaseStep === 2 && (
+              <div>
+                <h4 className="font-bold text-neutral-800 mb-3">选择投保宠物</h4>
+                
+                {selectedPet && (
+                  <Card variant="gradient" padding="md" className="border-secondary-200">
+                    <div className="flex items-center gap-3">
+                      <div className="w-12 h-12 bg-secondary-100 rounded-xl flex items-center justify-center">
+                        <span className="text-xl">🐾</span>
+                      </div>
+                      <div>
+                        <h5 className="font-bold text-neutral-800">{selectedPet.name}</h5>
+                        <p className="text-sm text-neutral-500">{selectedPet.species} · {selectedPet.breed}</p>
+                      </div>
+                      <Check className="w-5 h-5 text-secondary-500 ml-auto" />
+                    </div>
+                  </Card>
+                )}
+
+                {!selectedPet && pets.length > 0 && (
+                  <div className="space-y-2">
+                    {pets.map((pet) => (
+                      <Card key={pet.id} variant="default" padding="md" hover>
+                        <div className="flex items-center gap-3">
+                          <div className="w-12 h-12 bg-neutral-100 rounded-xl flex items-center justify-center">
+                            <span className="text-xl">🐾</span>
+                          </div>
+                          <div>
+                            <h5 className="font-bold text-neutral-800">{pet.name}</h5>
+                            <p className="text-sm text-neutral-500">{pet.species} · {pet.breed}</p>
+                          </div>
+                        </div>
+                      </Card>
+                    ))}
                   </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <Check className={`w-4 h-4 ${plan.coverage.illnesses ? 'text-success-500' : 'text-neutral-300'}`} />
-                    <span className={plan.coverage.illnesses ? 'text-neutral-700' : 'text-neutral-400'}>
-                      疾病医疗
-                    </span>
+                )}
+
+                {pets.length === 0 && (
+                  <Card variant="outlined" padding="lg">
+                    <div className="text-center py-4">
+                      <p className="text-neutral-500">请先添加宠物信息</p>
+                    </div>
+                  </Card>
+                )}
+              </div>
+            )}
+
+            {/* Step 3: Payment */}
+            {purchaseStep === 3 && (
+              <div>
+                <h4 className="font-bold text-neutral-800 mb-3">支付确认</h4>
+                
+                <Card variant="gradient" padding="md">
+                  <div className="space-y-3">
+                    <div className="flex justify-between">
+                      <span className="text-neutral-600">保险方案</span>
+                      <span className="font-medium text-neutral-800">{selectedPlanData.name}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-neutral-600">投保宠物</span>
+                      <span className="font-medium text-neutral-800">{selectedPet?.name || '未选择'}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-neutral-600">保障期限</span>
+                      <span className="font-medium text-neutral-800">1年</span>
+                    </div>
+                    <div className="border-t border-neutral-200 pt-3">
+                      <div className="flex justify-between">
+                        <span className="text-neutral-600">月缴金额</span>
+                        <span className="font-bold text-secondary-600">¥{selectedPlanData.price}</span>
+                      </div>
+                      <div className="flex justify-between mt-1">
+                        <span className="text-neutral-600">年缴总额</span>
+                        <span className="font-bold text-neutral-800">¥{selectedPlanData.price * 12}</span>
+                      </div>
+                    </div>
                   </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <Check className={`w-4 h-4 ${plan.coverage.wellness ? 'text-success-500' : 'text-neutral-300'}`} />
-                    <span className={plan.coverage.wellness ? 'text-neutral-700' : 'text-neutral-400'}>
-                      健康体检
-                    </span>
+                </Card>
+
+                {/* Payment Method */}
+                <div className="mt-4">
+                  <h5 className="font-medium text-neutral-700 mb-2">支付方式</h5>
+                  <div className="space-y-2">
+                    <Card variant="default" padding="sm" className="border-secondary-200">
+                      <div className="flex items-center gap-3">
+                        <CreditCard className="w-5 h-5 text-secondary-500" />
+                        <span className="font-medium text-neutral-800">微信支付</span>
+                        <Check className="w-4 h-4 text-secondary-500 ml-auto" />
+                      </div>
+                    </Card>
+                    <Card variant="outlined" padding="sm">
+                      <div className="flex items-center gap-3">
+                        <CreditCard className="w-5 h-5 text-neutral-400" />
+                        <span className="text-neutral-600">支付宝</span>
+                      </div>
+                    </Card>
                   </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <Check className={`w-4 h-4 ${plan.coverage.surgery ? 'text-success-500' : 'text-neutral-300'}`} />
-                    <span className={plan.coverage.surgery ? 'text-neutral-700' : 'text-neutral-400'}>
-                      手术保障
-                    </span>
+                </div>
+
+                {/* Terms */}
+                <div className="mt-4 p-3 bg-neutral-50 rounded-xl">
+                  <div className="flex items-start gap-2">
+                    <Info className="w-4 h-4 text-neutral-400 mt-0.5" />
+                    <p className="text-xs text-neutral-500">
+                      投保即表示您同意《宠物保险服务协议》和《隐私政策》。保险生效后，您可随时申请理赔。
+                    </p>
                   </div>
                 </div>
+              </div>
+            )}
 
-                {/* Features */}
-                <div className="flex flex-wrap gap-2 mb-5">
-                  {plan.features.map((feature, idx) => (
-                    <span key={idx} className="px-2 py-1 bg-neutral-100 text-neutral-600 rounded-full text-xs">
-                      {feature}
-                    </span>
-                  ))}
+            {/* Action Buttons */}
+            <div className="flex gap-3 pt-4">
+              {purchaseStep > 1 && (
+                <Button variant="ghost" size="lg" onClick={() => setPurchaseStep(purchaseStep - 1)}>
+                  上一步
+                </Button>
+              )}
+              {purchaseStep < 3 ? (
+                <Button 
+                  variant="primary" 
+                  size="lg" 
+                  fullWidth 
+                  onClick={() => setPurchaseStep(purchaseStep + 1)}
+                  disabled={purchaseStep === 2 && !selectedPet}
+                >
+                  下一步
+                </Button>
+              ) : (
+                <Button 
+                  variant="primary" 
+                  size="lg" 
+                  fullWidth 
+                  onClick={handlePurchasePolicy}
+                  disabled={!selectedPet}
+                  icon={<CreditCard className="w-4 h-4" />}
+                >
+                  确认支付 ¥{selectedPlanData.price * 12}
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </GlassModal>
+
+      {/* Claim Modal */}
+      <GlassModal
+        isOpen={showClaimModal}
+        onClose={() => setShowClaimModal(false)}
+        title="申请理赔"
+        size="lg"
+      >
+        <div className="space-y-4">
+          {/* Policy Info */}
+          {claimForm.policyId && (
+            <div className="p-3 bg-secondary-50 rounded-xl">
+              <div className="flex items-center gap-2">
+                <Shield className="w-4 h-4 text-secondary-600" />
+                <span className="font-medium text-secondary-700">
+                  保单: {policies.find(p => p.id === claimForm.policyId)?.planName}
+                </span>
+              </div>
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">理赔类型</label>
+            <select
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-secondary-500 focus:ring-2 focus:ring-secondary-200 transition-all"
+              value={claimForm.type}
+              onChange={(e) => setClaimForm(prev => ({ ...prev, type: e.target.value }))}
+            >
+              <option value="medical">医疗费用</option>
+              <option value="accident">意外伤害</option>
+              <option value="surgery">手术费用</option>
+              <option value="wellness">健康体检</option>
+            </select>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">发生日期</label>
+            <input
+              type="date"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-secondary-500 focus:ring-2 focus:ring-secondary-200 transition-all"
+              value={claimForm.date.toISOString().split('T')[0]}
+              onChange={(e) => setClaimForm(prev => ({ ...prev, date: new Date(e.target.value) }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">理赔金额 *</label>
+            <input
+              type="number"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-secondary-500 focus:ring-2 focus:ring-secondary-200 transition-all"
+              placeholder="请输入理赔金额"
+              value={claimForm.amount}
+              onChange={(e) => setClaimForm(prev => ({ ...prev, amount: Number(e.target.value) }))}
+              min="0"
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">详细描述 *</label>
+            <textarea
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-secondary-500 focus:ring-2 focus:ring-secondary-200 transition-all resize-none"
+              placeholder="请详细描述理赔原因和经过"
+              rows={4}
+              value={claimForm.description}
+              onChange={(e) => setClaimForm(prev => ({ ...prev, description: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">上传凭证</label>
+            <div className="border-2 border-dashed border-neutral-200 rounded-xl p-6 text-center hover:border-secondary-300 transition-all">
+              <Camera className="w-8 h-8 text-neutral-400 mx-auto mb-2" />
+              <p className="text-sm text-neutral-500">点击上传医疗发票、诊断证明等凭证</p>
+              <p className="text-xs text-neutral-400 mt-1">支持 JPG、PNG 格式</p>
+            </div>
+          </div>
+          
+          {/* Tips */}
+          <div className="p-3 bg-warning-50 rounded-xl">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="w-4 h-4 text-warning-500 mt-0.5" />
+              <div className="text-sm text-warning-700">
+                <p className="font-medium mb-1">理赔提示</p>
+                <ul className="space-y-1 text-xs">
+                  <li>• 请确保上传的凭证清晰完整</li>
+                  <li>• 理赔金额需在保单限额范围内</li>
+                  <li>• 审核周期一般为3-5个工作日</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex gap-3 pt-4">
+            <Button variant="ghost" size="lg" fullWidth onClick={() => setShowClaimModal(false)}>
+              取消
+            </Button>
+            <Button 
+              variant="primary" 
+              size="lg" 
+              fullWidth 
+              onClick={handleSubmitClaim}
+              disabled={!claimForm.policyId || !claimForm.description || claimForm.amount <= 0}
+              icon={<FileText className="w-4 h-4" />}
+            >
+              提交理赔
+            </Button>
+          </div>
+        </div>
+      </GlassModal>
+
+      {/* Policy Detail Modal */}
+      <GlassModal
+        isOpen={showPolicyDetailModal}
+        onClose={() => setShowPolicyDetailModal(false)}
+        title="保单详情"
+        size="lg"
+      >
+        {selectedPolicy && (
+          <div className="space-y-4">
+            {/* Policy Header */}
+            <Card variant="gradient" padding="md">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="w-12 h-12 bg-secondary-100 rounded-xl flex items-center justify-center">
+                  <Shield className="w-6 h-6 text-secondary-600" />
                 </div>
+                <div>
+                  <h4 className="font-bold text-neutral-800">{selectedPolicy.planName}</h4>
+                  <p className="text-sm text-neutral-500">保单号: {selectedPolicy.id}</p>
+                </div>
+              </div>
+              <Badge variant={getPolicyStatusColor(selectedPolicy.status) as any} size="md">
+                {getPolicyStatusLabel(selectedPolicy.status)}
+              </Badge>
+            </Card>
+
+            {/* Policy Info */}
+            <div className="space-y-3">
+              <div className="flex justify-between p-3 bg-neutral-50 rounded-xl">
+                <span className="text-neutral-600">投保宠物</span>
+                <span className="font-medium text-neutral-800">{selectedPolicy.petName}</span>
+              </div>
+              <div className="flex justify-between p-3 bg-neutral-50 rounded-xl">
+                <span className="text-neutral-600">生效日期</span>
+                <span className="font-medium text-neutral-800">{selectedPolicy.startDate.toLocaleDateString()}</span>
+              </div>
+              <div className="flex justify-between p-3 bg-neutral-50 rounded-xl">
+                <span className="text-neutral-600">到期日期</span>
+                <span className="font-medium text-neutral-800">{selectedPolicy.endDate.toLocaleDateString()}</span>
+              </div>
+              <div className="flex justify-between p-3 bg-neutral-50 rounded-xl">
+                <span className="text-neutral-600">月缴保费</span>
+                <span className="font-medium text-secondary-600">¥{selectedPolicy.premium}</span>
+              </div>
+              <div className="flex justify-between p-3 bg-neutral-50 rounded-xl">
+                <span className="text-neutral-600">下次缴费</span>
+                <span className="font-medium text-neutral-800">{selectedPolicy.nextBillingDate.toLocaleDateString()}</span>
+              </div>
+            </div>
 
-                {/* Policy Details */}
-                <div className="bg-neutral-50 rounded-xl p-4 mb-5">
-                  <div className="grid grid-cols-3 gap-4 text-center">
+            {/* Coverage Details */}
+            {(() => {
+              const plan = plans.find(p => p.id === selectedPolicy.planId);
+              if (!plan) return null;
+              
+              return (
+                <div>
+                  <h5 className="font-medium text-neutral-700 mb-2">保障详情</h5>
+                  <div className="grid grid-cols-3 gap-3 p-3 bg-secondary-50 rounded-xl text-center">
                     <div>
-                      <p className="text-xs text-neutral-500 mb-1">免赔额</p>
+                      <p className="text-xs text-neutral-500">免赔额</p>
                       <p className="font-bold text-neutral-800">¥{plan.deductible}</p>
                     </div>
                     <div>
-                      <p className="text-xs text-neutral-500 mb-1">报销比例</p>
+                      <p className="text-xs text-neutral-500">报销比例</p>
                       <p className="font-bold text-neutral-800">{plan.reimbursementPercentage}%</p>
                     </div>
                     <div>
-                      <p className="text-xs text-neutral-500 mb-1">年度限额</p>
+                      <p className="text-xs text-neutral-500">年度限额</p>
                       <p className="font-bold text-neutral-800">¥{plan.annualLimit.toLocaleString()}</p>
                     </div>
                   </div>
                 </div>
+              );
+            })()}
 
-                <button
-                  onClick={() => handleSelectPlan(plan.id)}
-                  className="w-full py-3 bg-gradient-to-r from-secondary-500 to-secondary-600 text-white rounded-xl font-semibold hover:shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98]"
-                >
-                  立即投保
-                </button>
-              </div>
+            {/* Actions */}
+            <div className="flex gap-3">
+              <Button variant="outline" size="md" fullWidth icon={<Download className="w-4 h-4" />}>
+                下载保单
+              </Button>
+              <Button variant="ghost" size="md" fullWidth icon={<Phone className="w-4 h-4" />}>
+                联系客服
+              </Button>
             </div>
-          ))}
-        </div>
-      </div>
+          </div>
+        )}
+      </GlassModal>
 
       <div className="h-8" />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/MedicalPage.tsx b/src/pages/MedicalPage.tsx
index 86050454..5e284aa6 100644
--- a/src/pages/MedicalPage.tsx
+++ b/src/pages/MedicalPage.tsx
@@ -3,17 +3,49 @@
 //
 // 作者: 带娃的小陈工
 // 日期: 2026-05-26
-// 描述: 医疗咨询页面
+// 描述: 医疗咨询页面 - 完整功能实现
 // ============================================
 
 import { useState } from 'react';
-import { Stethoscope, MessageSquare, Calendar, CheckCircle } from 'lucide-react';
+import { Stethoscope, MessageSquare, Calendar, CheckCircle, Clock, FileText, Plus, Phone, MapPin, User, AlertCircle, ChevronRight, X } from 'lucide-react';
 import { useMedicalStore } from '../store/medicalStore';
+import { usePetStore } from '../store/petStore';
+import { Card, Button, Badge, GlassModal } from '../components/DesignSystem';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
 
 export default function MedicalPage() {
-  const { symptoms, consultations, currentConsultation, startAIConsultation } = useMedicalStore();
+  const { symptoms, consultations, appointments, medicalRecords, currentConsultation, startAIConsultation, bookAppointment, addMedicalRecord } = useMedicalStore();
+  const { pets, selectedPetId } = usePetStore();
+  const responsive = useResponsiveStyle();
+  
   const [selectedSymptoms, setSelectedSymptoms] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [showAppointmentModal, setShowAppointmentModal] = useState(false);
+  const [showRecordModal, setShowRecordModal] = useState(false);
+  const [activeTab, setActiveTab] = useState<'consultation' | 'appointments' | 'records'>('consultation');
+  
+  // 预约表单状态
+  const [appointmentForm, setAppointmentForm] = useState({
+    date: new Date(),
+    time: '09:00',
+    vetName: '',
+    clinicName: '',
+    address: '',
+    purpose: '',
+    notes: ''
+  });
+  
+  // 医疗记录表单状态
+  const [recordForm, setRecordForm] = useState({
+    date: new Date(),
+    type: 'checkup' as 'vaccination' | 'checkup' | 'treatment' | 'surgery',
+    title: '',
+    description: '',
+    vetName: '',
+    nextDueDate: new Date()
+  });
+
+  const selectedPet = pets.find(p => p.id === selectedPetId);
 
   const toggleSymptom = (symptomId: string) => {
     setSelectedSymptoms(prev => 
@@ -34,6 +66,60 @@ export default function MedicalPage() {
     }
   };
 
+  const handleBookAppointment = async () => {
+    if (!appointmentForm.vetName || !appointmentForm.clinicName || !appointmentForm.purpose) {
+      return;
+    }
+    
+    const success = await bookAppointment({
+      date: appointmentForm.date,
+      time: appointmentForm.time,
+      vetName: appointmentForm.vetName,
+      clinicName: appointmentForm.clinicName,
+      address: appointmentForm.address,
+      purpose: appointmentForm.purpose,
+      notes: appointmentForm.notes
+    });
+    
+    if (success) {
+      setShowAppointmentModal(false);
+      setAppointmentForm({
+        date: new Date(),
+        time: '09:00',
+        vetName: '',
+        clinicName: '',
+        address: '',
+        purpose: '',
+        notes: ''
+      });
+    }
+  };
+
+  const handleAddRecord = () => {
+    if (!recordForm.title || !recordForm.description) {
+      return;
+    }
+    
+    addMedicalRecord({
+      date: recordForm.date,
+      type: recordForm.type,
+      title: recordForm.title,
+      description: recordForm.description,
+      vetName: recordForm.vetName,
+      nextDueDate: recordForm.nextDueDate
+    });
+    
+    setShowRecordModal(false);
+    setRecordForm({
+      date: new Date(),
+      type: 'checkup',
+      title: '',
+      description: '',
+      vetName: '',
+      nextDueDate: new Date()
+    });
+  };
+
   const getSeverityColor = (severity: string) => {
     const colors: Record<string, string> = {
       low: 'bg-green-100 text-green-700',
@@ -54,11 +140,49 @@ export default function MedicalPage() {
     return labels[severity] || severity;
   };
 
+  const getRecordTypeLabel = (type: string) => {
+    const labels: Record<string, string> = {
+      vaccination: '疫苗接种',
+      checkup: '健康体检',
+      treatment: '治疗记录',
+      surgery: '手术记录'
+    };
+    return labels[type] || type;
+  };
+
+  const getRecordTypeColor = (type: string) => {
+    const colors: Record<string, string> = {
+      vaccination: 'primary',
+      checkup: 'success',
+      treatment: 'warning',
+      surgery: 'danger'
+    };
+    return colors[type] || 'default';
+  };
+
+  const getStatusColor = (status: string) => {
+    const colors: Record<string, string> = {
+      scheduled: 'bg-blue-100 text-blue-700',
+      completed: 'bg-green-100 text-green-700',
+      cancelled: 'bg-red-100 text-red-700'
+    };
+    return colors[status] || 'bg-gray-100 text-gray-700';
+  };
+
+  const getStatusLabel = (status: string) => {
+    const labels: Record<string, string> = {
+      scheduled: '已预约',
+      completed: '已完成',
+      cancelled: '已取消'
+    };
+    return labels[status] || status;
+  };
+
   return (
     <div className="min-h-screen bg-neutral-50 pb-24">
       {/* Header */}
-      <div className="bg-gradient-to-br from-warning-500 to-warning-600 text-white px-6 py-8">
-        <div className="max-w-md mx-auto">
+      <div className="bg-gradient-to-br from-warning-500 to-warning-600 text-white px-6 py-8" style={{ paddingTop: responsive.safeAreaPadding.paddingTop + 32 }}>
+        <div style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
           <div className="flex items-center gap-3 mb-4">
             <div className="w-12 h-12 bg-white/20 backdrop-blur rounded-xl flex items-center justify-center">
               <Stethoscope className="w-6 h-6" />
@@ -68,164 +192,581 @@ export default function MedicalPage() {
               <p className="text-warning-100">AI 预诊 + 专业兽医服务</p>
             </div>
           </div>
+          
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-3 mt-4">
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3">
+              <div className="text-sm text-warning-100">咨询记录</div>
+              <div className="text-xl font-bold">{consultations.length}</div>
+            </div>
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3">
+              <div className="text-sm text-warning-100">预约次数</div>
+              <div className="text-xl font-bold">{appointments.length}</div>
+            </div>
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3">
+              <div className="text-sm text-warning-100">医疗档案</div>
+              <div className="text-xl font-bold">{medicalRecords.length}</div>
+            </div>
+          </div>
         </div>
       </div>
 
-      {/* Quick Actions */}
-      <div className="px-4 py-6 max-w-md mx-auto">
-        <div className="grid grid-cols-2 gap-3">
-          <button className="bg-white rounded-2xl p-4 shadow-sm border border-neutral-100 text-left hover:shadow-md transition-all">
-            <MessageSquare className="w-8 h-8 text-warning-500 mb-2" />
-            <h3 className="font-bold text-neutral-800">AI 预诊</h3>
-            <p className="text-neutral-500 text-sm">智能分析症状</p>
-          </button>
-          <button className="bg-white rounded-2xl p-4 shadow-sm border border-neutral-100 text-left hover:shadow-md transition-all">
-            <Calendar className="w-8 h-8 text-secondary-500 mb-2" />
-            <h3 className="font-bold text-neutral-800">预约兽医</h3>
-            <p className="text-neutral-500 text-sm">在线预约问诊</p>
-          </button>
+      {/* Tabs */}
+      <div className="px-4 py-4 sticky top-0 bg-neutral-50 z-10">
+        <div className="flex gap-2" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+          {(['consultation', 'appointments', 'records'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                activeTab === tab
+                  ? 'bg-warning-500 text-white shadow-lg'
+                  : 'bg-white text-neutral-600 hover:bg-neutral-100'
+              }`}
+            >
+              {tab === 'consultation' ? 'AI咨询' : tab === 'appointments' ? '预约管理' : '医疗档案'}
+            </button>
+          ))}
         </div>
       </div>
 
-      {/* AI Consultation */}
-      <div className="px-4 max-w-md mx-auto">
-        <div className="bg-white rounded-2xl p-6 shadow-sm border border-neutral-100 mb-6">
-          <h2 className="text-lg font-bold text-neutral-800 mb-4">AI 智能预诊</h2>
-          
-          {!currentConsultation ? (
-            <>
-              <p className="text-neutral-600 text-sm mb-4">请选择爱宠出现的症状</p>
+      {/* Content */}
+      <div className="px-4" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+        {/* AI Consultation Tab */}
+        {activeTab === 'consultation' && (
+          <div className="space-y-4">
+            {/* Quick Actions */}
+            <div className="grid grid-cols-2 gap-3">
+              <Card 
+                variant="gradient" 
+                padding="md" 
+                onClick={() => setActiveTab('consultation')}
+                className="text-left"
+              >
+                <MessageSquare className="w-8 h-8 text-warning-500 mb-2" />
+                <h3 className="font-bold text-neutral-800">AI 预诊</h3>
+                <p className="text-neutral-500 text-sm">智能分析症状</p>
+              </Card>
+              <Card 
+                variant="gradient" 
+                padding="md" 
+                onClick={() => setShowAppointmentModal(true)}
+                className="text-left"
+              >
+                <Calendar className="w-8 h-8 text-secondary-500 mb-2" />
+                <h3 className="font-bold text-neutral-800">预约兽医</h3>
+                <p className="text-neutral-500 text-sm">在线预约问诊</p>
+              </Card>
+            </div>
+
+            {/* AI Consultation */}
+            <Card variant="default" padding="lg">
+              <h2 className="text-lg font-bold text-neutral-800 mb-4">AI 智能预诊</h2>
+              
+              {selectedPet && (
+                <div className="mb-4 p-3 bg-warning-50 rounded-xl border border-warning-100">
+                  <div className="flex items-center gap-2">
+                    <span className="text-warning-600 font-medium">当前宠物:</span>
+                    <span className="text-neutral-800">{selectedPet.name}</span>
+                  </div>
+                </div>
+              )}
               
-              <div className="space-y-2 mb-6">
-                {symptoms.map((symptom) => (
-                  <button
-                    key={symptom.id}
-                    onClick={() => toggleSymptom(symptom.id)}
-                    className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
-                      selectedSymptoms.includes(symptom.id)
-                        ? 'border-warning-500 bg-warning-50'
-                        : 'border-neutral-100 hover:border-neutral-200'
-                    }`}
+              {!currentConsultation ? (
+                <>
+                  <p className="text-neutral-600 text-sm mb-4">请选择爱宠出现的症状</p>
+                  
+                  <div className="space-y-2 mb-6">
+                    {symptoms.map((symptom) => (
+                      <button
+                        key={symptom.id}
+                        onClick={() => toggleSymptom(symptom.id)}
+                        className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
+                          selectedSymptoms.includes(symptom.id)
+                            ? 'border-warning-500 bg-warning-50'
+                            : 'border-neutral-100 hover:border-neutral-200'
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h4 className="font-semibold text-neutral-800">{symptom.name}</h4>
+                            <p className="text-sm text-neutral-500">{symptom.description}</p>
+                          </div>
+                          <Badge variant={symptom.severity === 'critical' ? 'danger' : symptom.severity === 'high' ? 'warning' : 'default'} size="sm">
+                            {getSeverityLabel(symptom.severity)}
+                          </Badge>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+
+                  <Button
+                    variant="gradient"
+                    size="lg"
+                    fullWidth
+                    loading={isLoading}
+                    disabled={selectedSymptoms.length === 0}
+                    onClick={handleStartConsultation}
+                    icon={<Stethoscope className="w-5 h-5" />}
                   >
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <h4 className="font-semibold text-neutral-800">{symptom.name}</h4>
-                        <p className="text-sm text-neutral-500">{symptom.description}</p>
+                    开始咨询
+                  </Button>
+                </>
+              ) : (
+                <div className="animate-fade-in">
+                  {currentConsultation.status === 'in_progress' ? (
+                    <div className="text-center py-8">
+                      <div className="w-16 h-16 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
+                        <Stethoscope className="w-8 h-8 text-warning-500" />
                       </div>
-                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getSeverityColor(symptom.severity)}`}>
-                        {getSeverityLabel(symptom.severity)}
-                      </span>
+                      <p className="text-neutral-600">AI 正在分析症状...</p>
                     </div>
-                  </button>
-                ))}
+                  ) : (
+                    <div>
+                      <div className="bg-success-50 border border-success-200 rounded-xl p-4 mb-4">
+                        <div className="flex items-center gap-2 mb-2">
+                          <CheckCircle className="w-5 h-5 text-success-500" />
+                          <span className="font-semibold text-success-700">分析完成</span>
+                        </div>
+                        <p className="text-neutral-700 text-sm">{currentConsultation.diagnosis}</p>
+                      </div>
+                      
+                      {currentConsultation.recommendations && (
+                        <div className="mb-4">
+                          <h4 className="font-semibold text-neutral-800 mb-2">建议</h4>
+                          <ul className="space-y-2">
+                            {currentConsultation.recommendations.map((rec, idx) => (
+                              <li key={idx} className="flex items-start gap-2 text-sm text-neutral-600">
+                                <div className="w-1.5 h-1.5 bg-warning-400 rounded-full mt-2 flex-shrink-0" />
+                                {rec}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+
+                      <div className="flex gap-3">
+                        <Button
+                          variant="outline"
+                          size="md"
+                          fullWidth
+                          onClick={() => {
+                            setSelectedSymptoms([]);
+                          }}
+                        >
+                          重新咨询
+                        </Button>
+                        <Button
+                          variant="primary"
+                          size="md"
+                          fullWidth
+                          onClick={() => setShowAppointmentModal(true)}
+                          icon={<Calendar className="w-4 h-4" />}
+                        >
+                          预约兽医
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </Card>
+
+            {/* Recent Consultations */}
+            {consultations.length > 0 && (
+              <div>
+                <h2 className="text-lg font-bold text-neutral-800 mb-4">最近咨询</h2>
+                <div className="space-y-3">
+                  {consultations.slice(0, 5).map((consultation) => (
+                    <Card key={consultation.id} variant="default" padding="md" hover>
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-2">
+                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                            consultation.type === 'ai' ? 'bg-warning-100' : 'bg-secondary-100'
+                          }`}>
+                            {consultation.type === 'ai' ? (
+                              <MessageSquare className="w-4 h-4 text-warning-600" />
+                            ) : (
+                              <Stethoscope className="w-4 h-4 text-secondary-600" />
+                            )}
+                          </div>
+                          <span className="font-medium text-neutral-800">
+                            {consultation.type === 'ai' ? 'AI 咨询' : '兽医问诊'}
+                          </span>
+                        </div>
+                        <span className="text-sm text-neutral-500">
+                          {consultation.date.toLocaleDateString()}
+                        </span>
+                      </div>
+                      <p className="text-sm text-neutral-600">
+                        {consultation.symptoms.length} 个症状
+                      </p>
+                      {consultation.diagnosis && (
+                        <p className="text-xs text-neutral-500 mt-2 line-clamp-2">
+                          {consultation.diagnosis}
+                        </p>
+                      )}
+                    </Card>
+                  ))}
+                </div>
               </div>
+            )}
+          </div>
+        )}
 
-              <button
-                onClick={handleStartConsultation}
-                disabled={selectedSymptoms.length === 0 || isLoading}
-                className={`w-full py-3 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all ${
-                  selectedSymptoms.length === 0 || isLoading
-                    ? 'bg-neutral-200 text-neutral-400 cursor-not-allowed'
-                    : 'bg-gradient-to-r from-warning-500 to-warning-600 text-white hover:shadow-lg'
-                }`}
+        {/* Appointments Tab */}
+        {activeTab === 'appointments' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">预约管理</h2>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => setShowAppointmentModal(true)}
+                icon={<Plus className="w-4 h-4" />}
               >
-                {isLoading ? (
-                  <>
-                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                    分析中...
-                  </>
-                ) : (
-                  <>
-                    <Stethoscope className="w-5 h-5" />
-                    开始咨询
-                  </>
-                )}
-              </button>
-            </>
-          ) : (
-            <div className="animate-fade-in">
-              {currentConsultation.status === 'in_progress' ? (
+                新预约
+              </Button>
+            </div>
+
+            {appointments.length === 0 ? (
+              <Card variant="outlined" padding="lg">
                 <div className="text-center py-8">
-                  <div className="w-16 h-16 bg-warning-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
-                    <Stethoscope className="w-8 h-8 text-warning-500" />
-                  </div>
-                  <p className="text-neutral-600">AI 正在分析症状...</p>
+                  <Calendar className="w-12 h-12 text-neutral-300 mx-auto mb-3" />
+                  <p className="text-neutral-500">暂无预约记录</p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-4"
+                    onClick={() => setShowAppointmentModal(true)}
+                  >
+                    立即预约
+                  </Button>
                 </div>
-              ) : (
-                <div>
-                  <div className="bg-success-50 border border-success-200 rounded-xl p-4 mb-4">
-                    <div className="flex items-center gap-2 mb-2">
-                      <CheckCircle className="w-5 h-5 text-success-500" />
-                      <span className="font-semibold text-success-700">分析完成</span>
+              </Card>
+            ) : (
+              <div className="space-y-3">
+                {appointments.map((appointment) => (
+                  <Card key={appointment.id} variant="default" padding="md" hover>
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-secondary-100 rounded-xl flex items-center justify-center">
+                          <Calendar className="w-5 h-5 text-secondary-600" />
+                        </div>
+                        <div>
+                          <h3 className="font-bold text-neutral-800">{appointment.purpose}</h3>
+                          <p className="text-sm text-neutral-500">{appointment.clinicName}</p>
+                        </div>
+                      </div>
+                      <Badge variant={appointment.status === 'completed' ? 'success' : appointment.status === 'cancelled' ? 'danger' : 'primary'} size="sm">
+                        {getStatusLabel(appointment.status)}
+                      </Badge>
                     </div>
-                    <p className="text-neutral-700 text-sm">{currentConsultation.diagnosis}</p>
-                  </div>
-                  
-                  {currentConsultation.recommendations && (
-                    <div className="mb-4">
-                      <h4 className="font-semibold text-neutral-800 mb-2">建议</h4>
-                      <ul className="space-y-2">
-                        {currentConsultation.recommendations.map((rec, idx) => (
-                          <li key={idx} className="flex items-start gap-2 text-sm text-neutral-600">
-                            <div className="w-1.5 h-1.5 bg-warning-400 rounded-full mt-2 flex-shrink-0" />
-                            {rec}
-                          </li>
-                        ))}
-                      </ul>
+                    
+                    <div className="grid grid-cols-2 gap-3 text-sm">
+                      <div className="flex items-center gap-2 text-neutral-600">
+                        <Clock className="w-4 h-4" />
+                        <span>{appointment.date.toLocaleDateString()} {appointment.time}</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-neutral-600">
+                        <User className="w-4 h-4" />
+                        <span>{appointment.vetName}</span>
+                      </div>
+                      {appointment.address && (
+                        <div className="flex items-center gap-2 text-neutral-600 col-span-2">
+                          <MapPin className="w-4 h-4" />
+                          <span className="truncate">{appointment.address}</span>
+                        </div>
+                      )}
                     </div>
-                  )}
 
-                  <button
-                    onClick={() => {
-                      setSelectedSymptoms([]);
-                    }}
-                    className="w-full py-3 bg-neutral-100 text-neutral-700 rounded-xl font-semibold hover:bg-neutral-200 transition-all"
-                  >
-                    重新咨询
-                  </button>
-                </div>
-              )}
+                    {appointment.status === 'scheduled' && (
+                      <div className="flex gap-2 mt-3">
+                        <Button variant="outline" size="sm" fullWidth icon={<Phone className="w-4 h-4" />}>
+                          联系诊所
+                        </Button>
+                        <Button variant="ghost" size="sm" fullWidth icon={<ChevronRight className="w-4 h-4" />}>
+                          详情
+                        </Button>
+                      </div>
+                    )}
+                  </Card>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Records Tab */}
+        {activeTab === 'records' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">医疗档案</h2>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => setShowRecordModal(true)}
+                icon={<Plus className="w-4 h-4" />}
+              >
+                添加记录
+              </Button>
             </div>
-          )}
-        </div>
-      </div>
 
-      {/* Recent Consultations */}
-      {consultations.length > 0 && (
-        <div className="px-4 max-w-md mx-auto">
-          <h2 className="text-lg font-bold text-neutral-800 mb-4">最近咨询</h2>
-          <div className="space-y-3">
-            {consultations.map((consultation) => (
-              <div key={consultation.id} className="bg-white rounded-2xl p-4 shadow-sm border border-neutral-100">
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                      consultation.type === 'ai' ? 'bg-warning-100' : 'bg-secondary-100'
-                    }`}>
-                      {consultation.type === 'ai' ? (
-                        <MessageSquare className="w-4 h-4 text-warning-600" />
-                      ) : (
-                        <Stethoscope className="w-4 h-4 text-secondary-600" />
-                      )}
-                    </div>
-                    <span className="font-medium text-neutral-800">
-                      {consultation.type === 'ai' ? 'AI 咨询' : '兽医问诊'}
-                    </span>
-                  </div>
-                  <span className="text-sm text-neutral-500">
-                    {consultation.date.toLocaleDateString()}
-                  </span>
+            {medicalRecords.length === 0 ? (
+              <Card variant="outlined" padding="lg">
+                <div className="text-center py-8">
+                  <FileText className="w-12 h-12 text-neutral-300 mx-auto mb-3" />
+                  <p className="text-neutral-500">暂无医疗记录</p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-4"
+                    onClick={() => setShowRecordModal(true)}
+                  >
+                    添加记录
+                  </Button>
                 </div>
-                <p className="text-sm text-neutral-600">
-                  {consultation.symptoms.length} 个症状
-                </p>
+              </Card>
+            ) : (
+              <div className="space-y-3">
+                {medicalRecords.map((record) => (
+                  <Card key={record.id} variant="default" padding="md" hover>
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 bg-warning-100 rounded-xl flex items-center justify-center">
+                          <FileText className="w-5 h-5 text-warning-600" />
+                        </div>
+                        <div>
+                          <h3 className="font-bold text-neutral-800">{record.title}</h3>
+                          <p className="text-sm text-neutral-500">{record.date.toLocaleDateString()}</p>
+                        </div>
+                      </div>
+                      <Badge variant={getRecordTypeColor(record.type) as any} size="sm">
+                        {getRecordTypeLabel(record.type)}
+                      </Badge>
+                    </div>
+                    
+                    <p className="text-sm text-neutral-600 mb-2">{record.description}</p>
+                    
+                    {record.vetName && (
+                      <div className="flex items-center gap-2 text-sm text-neutral-500">
+                        <User className="w-4 h-4" />
+                        <span>医生: {record.vetName}</span>
+                      </div>
+                    )}
+                    
+                    {record.nextDueDate && (
+                      <div className="mt-2 p-2 bg-primary-50 rounded-lg flex items-center gap-2">
+                        <AlertCircle className="w-4 h-4 text-primary-500" />
+                        <span className="text-sm text-primary-700">
+                          下次提醒: {record.nextDueDate.toLocaleDateString()}
+                        </span>
+                      </div>
+                    )}
+                  </Card>
+                ))}
               </div>
-            ))}
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Appointment Modal */}
+      <GlassModal
+        isOpen={showAppointmentModal}
+        onClose={() => setShowAppointmentModal(false)}
+        title="预约兽医"
+        size="lg"
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">预约日期</label>
+            <input
+              type="date"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              value={appointmentForm.date.toISOString().split('T')[0]}
+              onChange={(e) => setAppointmentForm(prev => ({ ...prev, date: new Date(e.target.value) }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">预约时间</label>
+            <select
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              value={appointmentForm.time}
+              onChange={(e) => setAppointmentForm(prev => ({ ...prev, time: e.target.value }))}
+            >
+              {['09:00', '10:00', '11:00', '14:00', '15:00', '16:00', '17:00'].map(time => (
+                <option key={time} value={time}>{time}</option>
+              ))}
+            </select>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">诊所名称 *</label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              placeholder="请输入诊所名称"
+              value={appointmentForm.clinicName}
+              onChange={(e) => setAppointmentForm(prev => ({ ...prev, clinicName: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">兽医姓名 *</label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              placeholder="请输入兽医姓名"
+              value={appointmentForm.vetName}
+              onChange={(e) => setAppointmentForm(prev => ({ ...prev, vetName: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">诊所地址</label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              placeholder="请输入诊所地址"
+              value={appointmentForm.address}
+              onChange={(e) => setAppointmentForm(prev => ({ ...prev, address: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">预约目的 *</label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              placeholder="如: 常规体检、疫苗接种等"
+              value={appointmentForm.purpose}
+              onChange={(e) => setAppointmentForm(prev => ({ ...prev, purpose: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">备注</label>
+            <textarea
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all resize-none"
+              placeholder="其他需要说明的事项"
+              rows={3}
+              value={appointmentForm.notes}
+              onChange={(e) => setAppointmentForm(prev => ({ ...prev, notes: e.target.value }))}
+            />
+          </div>
+          
+          <div className="flex gap-3 pt-4">
+            <Button variant="ghost" size="lg" fullWidth onClick={() => setShowAppointmentModal(false)}>
+              取消
+            </Button>
+            <Button 
+              variant="primary" 
+              size="lg" 
+              fullWidth 
+              onClick={handleBookAppointment}
+              disabled={!appointmentForm.vetName || !appointmentForm.clinicName || !appointmentForm.purpose}
+            >
+              确认预约
+            </Button>
+          </div>
+        </div>
+      </GlassModal>
+
+      {/* Record Modal */}
+      <GlassModal
+        isOpen={showRecordModal}
+        onClose={() => setShowRecordModal(false)}
+        title="添加医疗记录"
+        size="lg"
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">记录类型</label>
+            <select
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              value={recordForm.type}
+              onChange={(e) => setRecordForm(prev => ({ ...prev, type: e.target.value as any }))}
+            >
+              <option value="vaccination">疫苗接种</option>
+              <option value="checkup">健康体检</option>
+              <option value="treatment">治疗记录</option>
+              <option value="surgery">手术记录</option>
+            </select>
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">记录日期</label>
+            <input
+              type="date"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              value={recordForm.date.toISOString().split('T')[0]}
+              onChange={(e) => setRecordForm(prev => ({ ...prev, date: new Date(e.target.value) }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">记录标题 *</label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              placeholder="如: 狂犬疫苗接种、年度体检等"
+              value={recordForm.title}
+              onChange={(e) => setRecordForm(prev => ({ ...prev, title: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">详细描述 *</label>
+            <textarea
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all resize-none"
+              placeholder="请详细描述医疗过程和结果"
+              rows={4}
+              value={recordForm.description}
+              onChange={(e) => setRecordForm(prev => ({ ...prev, description: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">主治医生</label>
+            <input
+              type="text"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              placeholder="请输入医生姓名"
+              value={recordForm.vetName}
+              onChange={(e) => setRecordForm(prev => ({ ...prev, vetName: e.target.value }))}
+            />
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 mb-2">下次提醒日期</label>
+            <input
+              type="date"
+              className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-warning-500 focus:ring-2 focus:ring-warning-200 transition-all"
+              value={recordForm.nextDueDate.toISOString().split('T')[0]}
+              onChange={(e) => setRecordForm(prev => ({ ...prev, nextDueDate: new Date(e.target.value) }))}
+            />
+          </div>
+          
+          <div className="flex gap-3 pt-4">
+            <Button variant="ghost" size="lg" fullWidth onClick={() => setShowRecordModal(false)}>
+              取消
+            </Button>
+            <Button 
+              variant="primary" 
+              size="lg" 
+              fullWidth 
+              onClick={handleAddRecord}
+              disabled={!recordForm.title || !recordForm.description}
+            >
+              保存记录
+            </Button>
           </div>
         </div>
-      )}
+      </GlassModal>
 
       <div className="h-8" />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/PetProfilePage.tsx b/src/pages/PetProfilePage.tsx
new file mode 100644
index 00000000..97b6d18b
--- /dev/null
+++ b/src/pages/PetProfilePage.tsx
@@ -0,0 +1,507 @@
+import React, { useState, useEffect } from 'react';
+import {
+  ChevronLeft,
+  Camera,
+  Edit3,
+  Calendar,
+  Weight,
+  Ruler,
+  Heart,
+  Activity,
+  FileText,
+  Share2,
+  ChevronRight,
+  Plus,
+  Syringe,
+  Droplets,
+  Trash2,
+  Download
+} from 'lucide-react';
+import { usePetStore } from '../store/petStore';
+import { useAppStore } from '../store/appStore';
+import { useHealthStore } from '../store/healthStore';
+import { useReminderStore } from '../store/reminderStore';
+import { Card, Badge, EmptyState } from '../components/DesignSystem';
+import { useResponsiveStyle } from '../lib/responsive';
+
+interface PetProfilePageProps {
+  onNavigate: (page: string) => void;
+}
+
+export const PetProfilePage: React.FC<PetProfilePageProps> = ({ onNavigate }) => {
+  const { currentPet, getCurrentPet, getPetVaccines, getPetGrowth, addVaccine, addGrowthRecord, updatePet } = usePetStore();
+  const { healthScore } = useAppStore();
+  const { getScore, getMetricsByPet, addMetric } = useHealthStore();
+  const { getFilteredReminders, addReminder } = useReminderStore();
+  const responsiveStyle = useResponsiveStyle();
+  
+  const [activeTab, setActiveTab] = useState<'overview' | 'records' | 'photos'>('overview');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 获取当前宠物数据
+  const pet = getCurrentPet();
+  const petId = pet?.id || '1';
+  
+  // 获取健康评分 - 使用默认值防止 undefined
+  const healthScoreData = getScore(petId) || { overall: 0, physical: 0, mental: 0, nutrition: 0, activity: 0, lastUpdated: '' };
+  
+  // 获取疫苗记录
+  const vaccines = getPetVaccines(petId);
+  
+  // 获取成长记录
+  const growthRecords = getPetGrowth(petId);
+  
+  // 获取健康指标
+  const healthMetrics = getMetricsByPet(petId);
+  
+  // 获取提醒
+  const reminders = getFilteredReminders(petId);
+
+  // 健康数据卡片
+  const healthData = [
+    { 
+      label: '健康评分', 
+      value: (healthScoreData?.overall || 0).toString(), 
+      unit: '分', 
+      icon: Heart, 
+      color: '#EF4444',
+      trend: (healthScoreData?.physical || 0) > 80 ? 'up' : 'stable'
+    },
+    { 
+      label: '体重', 
+      value: pet?.weight?.toString() || healthMetrics.find(m => m?.type === 'weight')?.value?.toString() || '12.5', 
+      unit: 'kg', 
+      icon: Weight, 
+      color: '#3B82F6',
+      trend: 'stable'
+    },
+    { 
+      label: '体温', 
+      value: healthMetrics.find(m => m?.type === 'temperature')?.value?.toFixed(1) || '38.5', 
+      unit: '°C', 
+      icon: Activity, 
+      color: '#F59E0B',
+      trend: 'stable'
+    },
+    { 
+      label: '年龄', 
+      value: calculateAge(pet?.birthday || '2022-03-15').toString(), 
+      unit: '岁', 
+      icon: Calendar, 
+      color: '#10B981',
+      trend: 'up'
+    },
+  ];
+
+  // 计算年龄
+  const calculateAge = (birthday: string): number => {
+    const birth = new Date(birthday);
+    const today = new Date();
+    const age = today.getFullYear() - birth.getFullYear();
+    const monthDiff = today.getMonth() - birth.getMonth();
+    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+      return age - 1;
+    }
+    return age;
+  };
+
+  // 添加疫苗记录
+  const handleAddVaccine = () => {
+    addVaccine({
+      petId,
+      name: '狂犬疫苗',
+      date: new Date().toISOString().split('T')[0],
+      nextDate: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
+      veterinarian: '宠物医院',
+      notes: '年度疫苗接种',
+    });
+  };
+
+  // 添加成长记录
+  const handleAddGrowthRecord = () => {
+    addGrowthRecord({
+      petId,
+      date: new Date().toISOString().split('T')[0],
+      weight: pet?.weight || 12.5,
+      height: 35,
+      notes: '定期体重测量',
+    });
+  };
+
+  // 添加健康指标
+  const handleAddMetric = async () => {
+    await addMetric({
+      petId,
+      type: 'weight',
+      value: pet?.weight || 12.5,
+      unit: 'kg',
+      timestamp: new Date().toISOString(),
+      status: 'normal',
+      note: '定期测量',
+    });
+  };
+
+  // 分享档案
+  const handleShare = async () => {
+    try {
+      const { ShareService } = await import('../lib/platformService');
+      
+      const shareText = `🐾 ${pet?.name || '宠物'}档案\n\n品种: ${pet?.breed || '未知'}\n年龄: ${calculateAge(pet?.birthday || '2022-03-15')}岁\n健康评分: ${healthScoreData.overall}分\n\n来自 爪爪连心❤️`;
+      
+      await ShareService.share({
+        title: '宠物档案',
+        text: shareText,
+        dialogTitle: '分享宠物档案'
+      });
+    } catch (error) {
+      console.error('分享失败:', error);
+    }
+  };
+
+  // 导出档案
+  const handleExport = () => {
+    const data = {
+      pet: pet,
+      healthScore: healthScoreData,
+      vaccines: vaccines,
+      growthRecords: growthRecords,
+      healthMetrics: healthMetrics,
+      exportDate: new Date().toISOString(),
+    };
+    
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${pet?.name || '宠物'}_档案_${new Date().toLocaleDateString('zh-CN')}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  // 获取宠物头像
+  const getPetAvatar = () => {
+    if (pet?.avatar) return pet.avatar;
+    return pet?.type === 'dog'
+      ? 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20golden%20retriever%20dog%20portrait&image_size=square'
+      : 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=cute%20orange%20cat%20portrait&image_size=square';
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FAF7F2] pb-24">
+      {/* 顶部导航 */}
+      <div className="bg-white px-4 pt-12 pb-4 sticky top-0 z-50 shadow-sm">
+        <div className="flex items-center justify-between">
+          <button
+            onClick={() => onNavigate('home')}
+            className="p-2 -ml-2 rounded-full hover:bg-gray-100 transition-colors"
+          >
+            <ChevronLeft className="w-6 h-6 text-gray-600" />
+          </button>
+          <h1 className="text-lg font-bold text-gray-800">宠物档案</h1>
+          <div className="flex items-center gap-2">
+            <button 
+              onClick={handleShare}
+              className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            >
+              <Share2 className="w-5 h-5 text-gray-600" />
+            </button>
+            <button 
+              onClick={handleExport}
+              className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            >
+              <Download className="w-5 h-5 text-gray-600" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 宠物头像区 */}
+      <div className="bg-white px-4 pb-6">
+        <div className="flex flex-col items-center">
+          <div className="relative mb-4">
+            <div 
+              className="overflow-hidden border-4 border-white shadow-lg"
+              style={{
+                width: responsiveStyle.avatarSize,
+                height: responsiveStyle.avatarSize,
+                borderRadius: responsiveStyle.avatarSize / 2,
+              }}
+            >
+              <img
+                src={getPetAvatar()}
+                alt={pet?.name || '宠物'}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <button 
+              className="absolute bottom-0 right-0 w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center shadow-md hover:bg-orange-600 transition-colors"
+              onClick={() => onNavigate('pets')}
+            >
+              <Camera className="w-4 h-4 text-white" />
+            </button>
+          </div>
+          <div className="flex items-center gap-2 mb-1">
+            <h2 className="text-xl font-bold text-gray-800">{pet?.name || 'JOJO'}</h2>
+            <span className="text-blue-500 text-lg">{pet?.gender === 'male' ? '♂' : '♀'}</span>
+            {pet?.healthStatus === 'excellent' && (
+              <Badge variant="success" size="sm">健康优秀</Badge>
+            )}
+          </div>
+          <p className="text-sm text-gray-500">{pet?.breed || '柯基犬'} · {calculateAge(pet?.birthday || '2022-03-15')}岁</p>
+          {pet?.characteristics && (
+            <p className="text-xs text-gray-400 mt-2 max-w-xs text-center">{pet?.characteristics}</p>
+          )}
+        </div>
+      </div>
+
+      {/* 健康数据卡片 */}
+      <div className="px-4 py-4">
+        <div className="grid grid-cols-4 gap-3">
+          {healthData.map((item, index) => (
+            <div 
+              key={index} 
+              className="bg-white rounded-2xl p-3 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
+              onClick={() => onNavigate('health-report')}
+            >
+              <div
+                className="w-8 h-8 rounded-lg flex items-center justify-center mb-2"
+                style={{ backgroundColor: `${item.color}15` }}
+              >
+                <item.icon className="w-4 h-4" style={{ color: item.color }} />
+              </div>
+              <div className="flex items-baseline gap-0.5">
+                <span className="text-lg font-bold text-gray-800">{item.value}</span>
+                <span className="text-xs text-gray-500">{item.unit}</span>
+              </div>
+              <p className="text-xs text-gray-400 mt-1">{item.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Tab切换 */}
+      <div className="px-4 mb-4">
+        <div className="flex bg-white rounded-xl p-1 shadow-sm">
+          {[
+            { id: 'overview', label: '概览' },
+            { id: 'records', label: '记录' },
+            { id: 'photos', label: '相册' },
+          ].map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as typeof activeTab)}
+              className={`flex-1 py-2 text-sm font-medium rounded-lg transition-all ${
+                activeTab === tab.id
+                  ? 'bg-orange-500 text-white'
+                  : 'text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Tab内容 */}
+      <div className="px-4 pb-24">
+        {activeTab === 'overview' && (
+          <div className="space-y-4">
+            {/* 疫苗记录 */}
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-bold text-gray-800 flex items-center gap-2">
+                  <Syringe className="w-5 h-5 text-green-500" />
+                  疫苗记录
+                </h3>
+                <button 
+                  onClick={handleAddVaccine}
+                  className="text-sm text-orange-500 flex items-center gap-1 hover:text-orange-600"
+                >
+                  <Plus className="w-4 h-4" />
+                  添加
+                </button>
+              </div>
+              {vaccines.length === 0 ? (
+                <div className="py-4">
+                  <EmptyState
+                    type="records"
+                    title="暂无疫苗记录"
+                    description="添加疫苗记录以便追踪"
+                    action={
+                      <button 
+                        onClick={handleAddVaccine}
+                        className="px-4 py-2 bg-orange-500 text-white rounded-full text-sm font-medium"
+                      >
+                        添加疫苗记录
+                      </button>
+                    }
+                  />
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {vaccines.slice(0, 3).map((record, index) => (
+                    <div key={index} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
+                      <div>
+                        <p className="font-medium text-gray-800">{record.name}</p>
+                        <p className="text-xs text-gray-400">接种: {record.date}</p>
+                      </div>
+                      <div className="text-right">
+                        <span className="inline-block px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">
+                          已接种
+                        </span>
+                        <p className="text-xs text-gray-400 mt-1">下次: {record.nextDate}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Card>
+
+            {/* 成长记录 */}
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-bold text-gray-800 flex items-center gap-2">
+                  <Activity className="w-5 h-5 text-blue-500" />
+                  成长记录
+                </h3>
+                <button 
+                  onClick={handleAddGrowthRecord}
+                  className="text-sm text-orange-500 flex items-center gap-1 hover:text-orange-600"
+                >
+                  <Plus className="w-4 h-4" />
+                  添加
+                </button>
+              </div>
+              {growthRecords.length === 0 ? (
+                <div className="py-4">
+                  <EmptyState
+                    type="records"
+                    title="暂无成长记录"
+                    description="记录宠物的成长变化"
+                    action={
+                      <button 
+                        onClick={handleAddGrowthRecord}
+                        className="px-4 py-2 bg-orange-500 text-white rounded-full text-sm font-medium"
+                      >
+                        添加成长记录
+                      </button>
+                    }
+                  />
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {growthRecords.slice(0, 3).map((record, index) => (
+                    <div key={index} className="flex items-start gap-3 py-2 border-b border-gray-100 last:border-0">
+                      <div className="w-2 h-2 rounded-full bg-orange-500 mt-2"></div>
+                      <div className="flex-1">
+                        <div className="flex items-center justify-between">
+                          <span className="font-medium text-gray-800">{record.date}</span>
+                          <span className="text-sm text-orange-500 font-medium">{record.weight}kg</span>
+                        </div>
+                        {record.notes && <p className="text-sm text-gray-500 mt-1">{record.notes}</p>}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Card>
+
+            {/* 健康提醒 */}
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-bold text-gray-800 flex items-center gap-2">
+                  <Droplets className="w-5 h-5 text-purple-500" />
+                  健康提醒
+                </h3>
+                <button 
+                  onClick={() => onNavigate('reminders')}
+                  className="text-sm text-orange-500 flex items-center gap-1 hover:text-orange-600"
+                >
+                  查看全部
+                  <ChevronRight className="w-4 h-4" />
+                </button>
+              </div>
+              {reminders.length === 0 ? (
+                <p className="text-sm text-gray-500 py-2">暂无待办提醒</p>
+              ) : (
+                <div className="space-y-2">
+                  {reminders.slice(0, 3).map((reminder) => (
+                    <div key={reminder.id} className="flex items-center gap-2 py-2">
+                      <div className={`w-2 h-2 rounded-full ${reminder.isCompleted ? 'bg-green-500' : 'bg-orange-500'}`}></div>
+                      <span className={`text-sm ${reminder.isCompleted ? 'text-gray-400' : 'text-gray-800'}`}>
+                        {reminder.title}
+                      </span>
+                      <span className="text-xs text-gray-400">{reminder.date}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Card>
+          </div>
+        )}
+
+        {activeTab === 'records' && (
+          <div className="space-y-4">
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-bold text-gray-800">完整健康记录</h3>
+                <button
+                  onClick={() => onNavigate('health-records')}
+                  className="text-sm text-orange-500"
+                >
+                  查看
+                </button>
+              </div>
+              <p className="text-sm text-gray-500">查看所有健康相关的记录和指标</p>
+            </Card>
+            
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-bold text-gray-800">日常记录</h3>
+                <button
+                  onClick={() => onNavigate('records')}
+                  className="text-sm text-orange-500"
+                >
+                  查看
+                </button>
+              </div>
+              <p className="text-sm text-gray-500">喂食、饮水、活动等日常记录</p>
+            </Card>
+            
+            <Card className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-bold text-gray-800">饮食数据</h3>
+                <button
+                  onClick={() => onNavigate('diet-data')}
+                  className="text-sm text-orange-500"
+                >
+                  查看
+                </button>
+              </div>
+              <p className="text-sm text-gray-500">营养摄入和饮食分析</p>
+            </Card>
+          </div>
+        )}
+
+        {activeTab === 'photos' && (
+          <Card className="p-8 text-center">
+            <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
+              <Camera className="w-8 h-8 text-gray-400" />
+            </div>
+            <p className="text-gray-500 mb-4">暂无照片</p>
+            <button 
+              onClick={() => onNavigate('camera-monitor')}
+              className="px-4 py-2 bg-orange-500 text-white rounded-full text-sm font-medium hover:bg-orange-600 transition-colors"
+            >
+              上传照片
+            </button>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PetProfilePage;
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 3b290ba5..8a8247f9 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,242 +1,628 @@
-import { useState } from 'react';
-import { Edit, History, Settings, Crown, Star, Heart, ChevronRight, Camera, Code, Check, Users } from 'lucide-react';
-import { useAppStore } from '../store/appStore';
-import FamilyShareCard from '../components/FamilyShareCard';
+/**
+ * Profile Page - 我的页面
+ *
+ * Apple风格设计，统一风格、颜色、字体搭配
+ * 完美适配多端分辨率
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  ChevronRight,
+  ChevronLeft,
+  Settings,
+  Bell,
+  Shield,
+  Heart,
+  PawPrint,
+  Star,
+  Gift,
+  HelpCircle,
+  MessageCircle,
+  Share2,
+  User,
+  Camera,
+  Edit3,
+  Crown,
+  Award,
+  Zap,
+  Moon,
+  LogOut,
+} from 'lucide-react';
+import { useUserProfileStore, type MembershipStatus } from '../store/userProfileStore';
+import { useSettingsStore } from '../store/settingsStore';
+import { useResponsive, useResponsiveStyle } from '../lib/responsive';
+import { createAnimation, AnimationConfig } from '../lib/animations';
+import '../styles/apple-style.css';
 
 interface ProfilePageProps {
-  onNavigate?: (page: string) => void;
+  onNavigate: (page: string) => void;
+}
+
+// 菜单项类型
+interface MenuItem {
+  id: string;
+  icon: React.ElementType;
+  title: string;
+  subtitle?: string;
+  badge?: string;
+  badgeColor?: string;
+  page?: string;
+  action?: () => void;
+}
+
+// 分组类型
+interface MenuGroup {
+  title: string;
+  items: MenuItem[];
 }
 
-const menuItems = [
-  { icon: History, label: '分析历史', description: '查看所有翻译记录', page: 'history' },
-  { icon: Users, label: '家庭共享', description: '邀请家人一起守护毛孩子', action: 'family-share' },
-  { icon: Settings, label: '设置', description: '隐私、通知等设置', page: 'settings' },
-  { icon: Heart, label: '收藏', description: '收藏的精彩时刻', page: 'favorites' },
-  { icon: Star, label: '帮助与反馈', description: '使用帮助与问题反馈', page: 'help-feedback' },
-  { icon: Code, label: '开发作者', description: '热爱生活的小陈工', page: 'developer-info' },
-];
-
-export default function ProfilePage({ onNavigate }: ProfilePageProps) {
-  const { currentPet, analyses, updateCurrentPet } = useAppStore();
-  const [showEdit, setShowEdit] = useState(false);
-  const [showFamilyModal, setShowFamilyModal] = useState(false);
-  const [petName, setPetName] = useState(currentPet?.name || '');
-  const [petBreed, setPetBreed] = useState(currentPet?.breed || '');
-  const [petAge, setPetAge] = useState(currentPet?.age.toString() || '');
-
-  // 示例家庭成员数据
-  const familyMembers = [
+const ProfilePage: React.FC<ProfilePageProps> = ({ onNavigate }) => {
+  const { profile, membership: rawMembership, stats: rawStats, isLoggedIn, updateProfile } = useUserProfileStore();
+  // 使用默认值防止 undefined
+  const stats = rawStats || { totalPets: 0, totalRecords: 0, totalDays: 0, achievements: 0, points: 0 };
+  const membership = rawMembership || { level: 'free', features: ['basic_features'] };
+  const { display, toggleDarkMode, notifications } = useSettingsStore();
+  const responsive = useResponsive();
+  const responsiveStyle = useResponsiveStyle();
+  
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [showLogoutModal, setShowLogoutModal] = useState(false);
+
+  // 头像点击动画
+  const handleAvatarClick = async (element: HTMLElement) => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    
+    const animator = createAnimation(element);
+    await animator.bounce(AnimationConfig.duration.slow);
+    
+    setIsAnimating(false);
+  };
+
+  // 获取会员图标和颜色
+  const getMembershipStyle = (level: MembershipStatus['level']) => {
+    const styles: Record<MembershipStatus['level'], { icon: React.ElementType; color: string; bgColor: string }> = {
+      free: { icon: User, color: '#86868B', bgColor: '#F5F5F7' },
+      basic: { icon: Star, color: '#34C759', bgColor: '#E8F5E9' },
+      premium: { icon: Crown, color: '#F5A623', bgColor: '#FFF4E5' },
+      vip: { icon: Award, color: '#AF52DE', bgColor: '#F5E5FF' },
+    };
+    return styles[level];
+  };
+
+  // 菜单分组
+  const menuGroups: MenuGroup[] = [
+    {
+      title: '账户管理',
+      items: [
+        {
+          id: 'pets',
+          icon: PawPrint,
+          title: '我的宠物',
+          subtitle: `${stats.totalPets || 0} 只宠物`,
+          badge: (stats.totalPets || 0).toString(),
+          badgeColor: '#F5A623',
+          page: 'pets',
+        },
+        {
+          id: 'favorites',
+          icon: Heart,
+          title: '我的收藏',
+          subtitle: '收藏的内容和服务',
+          page: 'favorites',
+        },
+        {
+          id: 'achievements',
+          icon: Award,
+          title: '成就徽章',
+          subtitle: `${stats.achievements || 0} 个徽章`,
+          badge: (stats.achievements || 0).toString(),
+          badgeColor: '#34C759',
+          page: 'achievements',
+        },
+      ],
+    },
+    {
+      title: '会员服务',
+      items: [
+        {
+          id: 'membership',
+          icon: getMembershipStyle(membership.level || 'free').icon,
+          title: '会员中心',
+          subtitle: (membership.level || 'free') === 'free' ? '升级享受更多权益' : `${membership.level || 'free'}会员`,
+          badge: (membership.level || 'free') !== 'free' ? 'VIP' : undefined,
+          badgeColor: getMembershipStyle(membership.level || 'free').color,
+          page: 'membership',
+        },
+        {
+          id: 'points',
+          icon: Zap,
+          title: '积分商城',
+          subtitle: `${stats.points || 0} 积分`,
+          badge: (stats.points || 0).toString(),
+          badgeColor: '#FF9500',
+          page: 'points',
+        },
+        {
+          id: 'gift',
+          icon: Gift,
+          title: '邀请好友',
+          subtitle: '分享获得奖励',
+          page: 'invite',
+        },
+      ],
+    },
     {
-      id: '1',
-      name: '我',
-      role: 'owner' as const,
-      permissions: {
-        viewHealth: true,
-        editHealth: true,
-        viewLocation: true,
-        receiveAlerts: true,
-      },
-      lastActive: '刚刚',
+      title: '应用设置',
+      items: [
+        {
+          id: 'settings',
+          icon: Settings,
+          title: '设置',
+          subtitle: '应用偏好设置',
+          page: 'settings',
+        },
+        {
+          id: 'notifications',
+          icon: Bell,
+          title: '通知管理',
+          subtitle: notifications.enabled ? '已开启' : '已关闭',
+          badge: notifications.enabled ? '开' : '关',
+          badgeColor: notifications.enabled ? '#34C759' : '#86868B',
+          page: 'notifications',
+        },
+        {
+          id: 'darkmode',
+          icon: Moon,
+          title: '深色模式',
+          subtitle: display.darkMode ? '已开启' : '已关闭',
+          action: () => toggleDarkMode(),
+        },
+        {
+          id: 'privacy',
+          icon: Shield,
+          title: '隐私安全',
+          subtitle: '数据与隐私设置',
+          page: 'privacy',
+        },
+      ],
+    },
+    {
+      title: '帮助与支持',
+      items: [
+        {
+          id: 'help',
+          icon: HelpCircle,
+          title: '帮助中心',
+          subtitle: '常见问题解答',
+          page: 'help-feedback',
+        },
+        {
+          id: 'feedback',
+          icon: MessageCircle,
+          title: '意见反馈',
+          subtitle: '帮助我们改进',
+          page: 'help-feedback',
+        },
+        {
+          id: 'share',
+          icon: Share2,
+          title: '分享应用',
+          subtitle: '推荐给好友',
+          action: () => {
+            // 分享功能
+          },
+        },
+        {
+          id: 'developer',
+          icon: Heart,
+          title: '开发者',
+          subtitle: '带娃的小陈工',
+          badge: '❤️',
+          badgeColor: '#F5A623',
+          page: 'developer-info',
+        },
+      ],
     },
   ];
 
-  const handleSaveEdit = () => {
-    if (currentPet) {
-      updateCurrentPet({
-        name: petName,
-        breed: petBreed,
-        age: parseInt(petAge) || 0,
-      });
-    }
-    setShowEdit(false);
+  // 菜单项点击处理
+  const handleMenuClick = (item: MenuItem, element: HTMLElement) => {
+    // 点击动画
+    const animator = createAnimation(element);
+    animator.press();
+    
+    setTimeout(() => {
+      animator.release();
+      
+      if (item.action) {
+        item.action();
+      } else if (item.page) {
+        onNavigate(item.page);
+      }
+    }, AnimationConfig.duration.fast);
   };
 
-  const recentAnalyses = analyses.slice(-3).reverse();
-
-  const emotionEmoji = {
-    happy: '😸',
-    anxious: '😰',
-    angry: '😾',
-    needs: '🥺',
-    neutral: '😐',
+  // 渲染菜单项
+  const renderMenuItem = (item: MenuItem) => {
+    const Icon = item.icon;
+    
+    return (
+      <button
+        key={item.id}
+        onClick={(e) => handleMenuClick(item, e.currentTarget)}
+        className="w-full flex items-center gap-4 p-4 bg-white hover:bg-gray-50 active:bg-gray-100 transition-colors touch-scale"
+        style={{
+          borderRadius: responsiveStyle.cardRadius,
+        }}
+      >
+        {/* 图标 */}
+        <div
+          className="flex items-center justify-center"
+          style={{
+            width: responsiveStyle.iconSize + 8,
+            height: responsiveStyle.iconSize + 8,
+            backgroundColor: '#F5F5F7',
+            borderRadius: responsiveStyle.cardRadius - 4,
+          }}
+        >
+          <Icon
+            style={{
+              width: responsiveStyle.iconSize,
+              height: responsiveStyle.iconSize,
+              color: '#F5A623',
+            }}
+          />
+        </div>
+        
+        {/* 标题和副标题 */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span
+              className="font-medium truncate"
+              style={{
+                fontSize: responsiveStyle.fontSize,
+                color: '#1D1D1F',
+              }}
+            >
+              {item.title}
+            </span>
+            {item.badge && (
+              <span
+                className="px-2 py-0.5 text-xs font-medium rounded-full"
+                style={{
+                  backgroundColor: item.badgeColor ? `${item.badgeColor}20` : '#F5F5F7',
+                  color: item.badgeColor || '#86868B',
+                }}
+              >
+                {item.badge}
+              </span>
+            )}
+          </div>
+          {item.subtitle && (
+            <span
+              className="text-sm truncate"
+              style={{
+                color: '#86868B',
+              }}
+            >
+              {item.subtitle}
+            </span>
+          )}
+        </div>
+        
+        {/* 右箭头 */}
+        <ChevronRight
+          style={{
+            width: responsiveStyle.iconSize - 4,
+            height: responsiveStyle.iconSize - 4,
+            color: '#C7C7CC',
+          }}
+        />
+      </button>
+    );
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-purple-50/50 via-white to-pink-50/30 pb-20">
-      <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-lg border-b border-purple-100">
-        <div className="max-w-md mx-auto px-4 py-4">
-          <h1 className="text-xl font-bold text-gray-800 text-center">宠物档案</h1>
-          <p className="text-xs text-gray-400 text-center">管理 {currentPet?.name} 的信息</p>
+    <div
+      className="min-h-screen pb-24"
+      style={{
+        backgroundColor: '#FAF7F2',
+        paddingTop: responsiveStyle.safeAreaPadding.paddingTop + 48,
+      }}
+    >
+      {/* 顶部导航 */}
+      <div
+        className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-xl"
+        style={{
+          paddingTop: responsiveStyle.safeAreaPadding.paddingTop + 12,
+          paddingBottom: 12,
+          borderBottom: '1px solid rgba(60, 60, 67, 0.12)',
+        }}
+      >
+        <div className="flex items-center justify-between px-4">
+          <button
+            onClick={() => onNavigate('home')}
+            className="p-2 rounded-full hover:bg-gray-100 transition-colors touch-scale"
+          >
+            <ChevronLeft style={{ width: 24, height: 24, color: '#1D1D1F' }} />
+          </button>
+          <h1
+            className="font-semibold"
+            style={{
+              fontSize: responsiveStyle.fontSize + 2,
+              color: '#1D1D1F',
+            }}
+          >
+            我的
+          </h1>
+          <button
+            onClick={() => onNavigate('settings')}
+            className="p-2 rounded-full hover:bg-gray-100 transition-colors touch-scale"
+          >
+            <Settings style={{ width: 20, height: 20, color: '#1D1D1F' }} />
+          </button>
         </div>
-      </header>
-
-      <main className="max-w-md mx-auto px-4 py-6 space-y-5">
-        <div className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
-          <div className="flex items-center gap-4">
-            <div className="relative">
-              <div className="w-20 h-20 rounded-full bg-gradient-to-br from-orange-400 to-orange-500 flex items-center justify-center text-4xl shadow-lg">
-                {emotionEmoji[analyses.length > 0 ? analyses[analyses.length - 1].result.emotion : 'happy']}
+      </div>
+
+      {/* 用户信息卡片 */}
+      <div className="px-4 mb-6">
+        <div
+          className="bg-white overflow-hidden animate-scale-in"
+          style={{
+            borderRadius: responsiveStyle.cardRadius + 4,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06)',
+          }}
+        >
+          {/* 用户头像和基本信息 */}
+          <div className="flex items-center gap-4 p-4">
+            <button
+              onClick={(e) => handleAvatarClick(e.currentTarget)}
+              className="relative overflow-hidden touch-scale"
+              style={{
+                width: responsiveStyle.avatarSize,
+                height: responsiveStyle.avatarSize,
+                borderRadius: responsiveStyle.avatarSize / 2,
+              }}
+            >
+              <img
+                src={profile?.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop'}
+                alt="用户头像"
+                className="w-full h-full object-cover"
+              />
+              <div
+                className="absolute bottom-0 right-0 flex items-center justify-center bg-white"
+                style={{
+                  width: responsiveStyle.avatarSize / 4,
+                  height: responsiveStyle.avatarSize / 4,
+                  borderRadius: responsiveStyle.avatarSize / 8,
+                  boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                }}
+              >
+                <Camera style={{ width: 12, height: 12, color: '#F5A623' }} />
               </div>
-              <button className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-purple-500 text-white flex items-center justify-center shadow-md">
-                <Camera className="w-4 h-4" />
-              </button>
-            </div>
-            <div className="flex-1">
+            </button>
+            
+            <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2">
-                {showEdit ? (
-                  <input
-                    type="text"
-                    value={petName}
-                    onChange={(e) => setPetName(e.target.value)}
-                    className="text-xl font-bold text-gray-800 bg-transparent border-b border-purple-300 focus:outline-none"
-                  />
-                ) : (
-                  <h2 className="text-xl font-bold text-gray-800">{currentPet?.name || petName}</h2>
-                )}
-                <button
-                  onClick={() => {
-                    if (showEdit) {
-                      handleSaveEdit();
-                    } else {
-                      setShowEdit(true);
-                    }
+                <h2
+                  className="font-semibold truncate"
+                  style={{
+                    fontSize: responsiveStyle.fontSize + 4,
+                    color: '#1D1D1F',
                   }}
-                  className="p-1.5 rounded-full hover:bg-gray-100 transition-colors"
                 >
-                  {showEdit ? <Check className="w-4 h-4 text-green-500" /> : <Edit className="w-4 h-4 text-gray-500" />}
-                </button>
-              </div>
-              <div className="flex items-center gap-2 mt-1">
-                {showEdit ? (
-                  <input
-                    type="text"
-                    value={petBreed}
-                    onChange={(e) => setPetBreed(e.target.value)}
-                    className="text-sm text-gray-500 bg-transparent border-b border-gray-200 focus:outline-none"
-                  />
-                ) : (
-                  <span className="text-sm text-gray-500">{petBreed}</span>
-                )}
-                <span className="text-gray-300">·</span>
-                {showEdit ? (
-                  <input
-                    type="text"
-                    value={petAge}
-                    onChange={(e) => setPetAge(e.target.value)}
-                    className="text-sm text-gray-500 bg-transparent border-b border-gray-200 focus:outline-none w-12"
-                  />
-                ) : (
-                  <span className="text-sm text-gray-500">{petAge} 岁</span>
-                )}
-              </div>
-              <div className="flex items-center gap-1 mt-2">
-                <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-purple-100 text-purple-600 text-xs">
-                  <Crown className="w-3 h-3" />
-                  Pro会员
-                </span>
+                  {profile?.name || '宠物主人'}
+                </h2>
+                <Edit3 style={{ width: 16, height: 16, color: '#86868B' }} />
               </div>
+              <p
+                className="text-sm truncate"
+                style={{ color: '#86868B' }}
+              >
+                {profile?.email || 'user@pawsync.com'}
+              </p>
             </div>
-          </div>
-        </div>
-
-        <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl p-5 text-white shadow-lg">
-          <div className="grid grid-cols-3 gap-4 text-center">
-            <div>
-              <p className="text-2xl font-bold">{analyses.length}</p>
-              <p className="text-xs text-purple-100">翻译次数</p>
-            </div>
-            <div>
-              <p className="text-2xl font-bold">128</p>
-              <p className="text-xs text-purple-100">守护天数</p>
-            </div>
-            <div>
-              <p className="text-2xl font-bold">98%</p>
-              <p className="text-xs text-purple-100">健康率</p>
+            
+            {/* 会员标识 */}
+            <div
+              className="flex items-center gap-1 px-3 py-1.5 rounded-full"
+              style={{
+                backgroundColor: getMembershipStyle(membership.level || 'free').bgColor,
+              }}
+            >
+              {React.createElement(getMembershipStyle(membership.level || 'free').icon, {
+                style: { width: 16, height: 16, color: getMembershipStyle(membership.level || 'free').color },
+              })}
+              <span
+                className="text-xs font-medium"
+                style={{ color: getMembershipStyle(membership.level || 'free').color }}
+              >
+                {(membership.level || 'free') === 'free' ? '普通' : (membership.level || 'free').toUpperCase()}
+              </span>
             </div>
           </div>
+          
+          {/* 统计数据 */}
+          <div
+            className="flex justify-around py-4"
+            style={{
+              borderTop: '1px solid rgba(60, 60, 67, 0.12)',
+            }}
+          >
+            {[
+              { label: '宠物', value: stats.totalPets || 0, icon: PawPrint },
+              { label: '记录', value: stats.totalRecords || 0, icon: Heart },
+              { label: '天数', value: stats.totalDays || 0, icon: Zap },
+              { label: '积分', value: stats.points || 0, icon: Star },
+            ].map((stat, index) => (
+              <button
+                key={index}
+                className="flex flex-col items-center gap-1 touch-scale"
+                onClick={(e) => {
+                  const animator = createAnimation(e.currentTarget);
+                  animator.bounce(AnimationConfig.duration.normal);
+                }}
+              >
+                <stat.icon style={{ width: 20, height: 20, color: '#F5A623' }} />
+                <span
+                  className="font-semibold font-mono"
+                  style={{
+                    fontSize: responsiveStyle.fontSize + 2,
+                    color: '#1D1D1F',
+                  }}
+                >
+                  {stat.value}
+                </span>
+                <span
+                  className="text-xs"
+                  style={{ color: '#86868B' }}
+                >
+                  {stat.label}
+                </span>
+              </button>
+            ))}
+          </div>
         </div>
+      </div>
 
-        <div className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
-          <h3 className="text-sm font-semibold text-gray-700 mb-3">最近翻译</h3>
-          {recentAnalyses.length > 0 ? (
-            <div className="space-y-3">
-              {recentAnalyses.map((analysis) => (
-                <div key={analysis.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
-                  <div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">
-                    {emotionEmoji[analysis.result.emotion]}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm text-gray-700 truncate">{analysis.result.translation}</p>
-                    <p className="text-xs text-gray-400 mt-0.5">
-                      {new Date(analysis.createdAt).toLocaleDateString('zh-CN', { 
-                        month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' 
-                      })}
-                    </p>
-                  </div>
-                  <span className="text-xs text-gray-400">{analysis.result.confidence}%</span>
+      {/* 菜单列表 */}
+      <div className="px-4 space-y-4">
+        {menuGroups.map((group, groupIndex) => (
+          <div
+            key={group.title}
+            className="animate-fade-in"
+            style={{
+              animationDelay: `${groupIndex * AnimationConfig.duration.fast}ms`,
+            }}
+          >
+            {/* 分组标题 */}
+            <h3
+              className="px-2 mb-2 font-medium"
+              style={{
+                fontSize: responsiveStyle.fontSize - 2,
+                color: '#86868B',
+              }}
+            >
+              {group.title}
+            </h3>
+            
+            {/* 分组内容 */}
+            <div
+              className="bg-white overflow-hidden"
+              style={{
+                borderRadius: responsiveStyle.cardRadius,
+                boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
+              }}
+            >
+              {group.items.map((item, itemIndex) => (
+                <div
+                  key={item.id}
+                  style={{
+                    borderBottom: itemIndex < group.items.length - 1
+                      ? '1px solid rgba(60, 60, 67, 0.12)'
+                      : 'none',
+                  }}
+                >
+                  {renderMenuItem(item)}
                 </div>
               ))}
             </div>
-          ) : (
-            <div className="text-center py-6">
-              <p className="text-sm text-gray-500">暂无翻译记录</p>
-              <p className="text-xs text-gray-400 mt-1">快去使用翻译功能吧</p>
-            </div>
-          )}
-        </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 退出登录按钮 */}
+      <div className="px-4 mt-6">
+        <button
+          onClick={(e) => {
+            const animator = createAnimation(e.currentTarget);
+            animator.press();
+            setTimeout(() => {
+              animator.release();
+              setShowLogoutModal(true);
+            }, AnimationConfig.duration.fast);
+          }}
+          className="w-full flex items-center justify-center gap-2 py-4 bg-white rounded-xl text-red-500 font-medium touch-scale"
+          style={{
+            borderRadius: responsiveStyle.cardRadius,
+          }}
+        >
+          <LogOut style={{ width: 20, height: 20 }} />
+          <span style={{ fontSize: responsiveStyle.fontSize }}>退出登录</span>
+        </button>
+      </div>
+
+      {/* 版本信息 */}
+      <div className="text-center mt-6 mb-4">
+        <p className="text-xs" style={{ color: '#AEAEB2' }}>
+          PawSync Pro v1.0.0
+        </p>
+        <p className="text-xs mt-1" style={{ color: '#C7C7CC' }}>
+          © 2024 PawSync Team
+        </p>
+      </div>
 
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
-          {menuItems.map((item) => {
-            const Icon = item.icon;
-            return (
+      {/* 退出确认模态框 */}
+      {showLogoutModal && (
+        <div
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/50 animate-fade-in"
+          onClick={() => setShowLogoutModal(false)}
+        >
+          <div
+            className="w-full max-w-md bg-white rounded-t-3xl p-6 animate-slide-up"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              paddingBottom: responsiveStyle.safeAreaPadding.paddingBottom + 24,
+            }}
+          >
+            <div className="text-center mb-6">
+              <h3
+                className="font-semibold mb-2"
+                style={{
+                  fontSize: responsiveStyle.fontSize + 4,
+                  color: '#1D1D1F',
+                }}
+              >
+                确认退出登录？
+              </h3>
+              <p
+                className="text-sm"
+                style={{ color: '#86868B' }}
+              >
+                退出后需要重新登录才能使用完整功能
+              </p>
+            </div>
+            
+            <div className="flex gap-4">
               <button
-                key={item.label}
-                onClick={() => {
-                  if (item.action === 'family-share') {
-                    setShowFamilyModal(true);
-                  } else if (onNavigate && item.page) {
-                    onNavigate(item.page);
-                  }
+                onClick={() => setShowLogoutModal(false)}
+                className="flex-1 py-3 bg-gray-100 rounded-xl font-medium"
+                style={{
+                  fontSize: responsiveStyle.fontSize,
+                  color: '#1D1D1F',
                 }}
-                className="w-full flex items-center gap-3 p-4 hover:bg-gray-50 transition-colors"
               >
-                <div className="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center">
-                  <Icon className="w-5 h-5 text-purple-500" />
-                </div>
-                <div className="flex-1 text-left">
-                  <p className="text-sm font-medium text-gray-700">{item.label}</p>
-                  <p className="text-xs text-gray-400">{item.description}</p>
-                </div>
-                <ChevronRight className="w-5 h-5 text-gray-300" />
+                取消
               </button>
-            );
-          })}
-        </div>
-
-        {/* 家庭共享弹窗 */}
-        {showFamilyModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-            <div className="w-full max-w-md max-h-[80vh] overflow-y-auto">
-              <FamilyShareCard
-                members={familyMembers}
-                onInvite={() => console.log('邀请家庭成员')}
-                onUpdatePermissions={(memberId, permissions) => console.log('更新权限', memberId, permissions)}
-              />
               <button
-                onClick={() => setShowFamilyModal(false)}
-                className="w-full mt-3 py-3 bg-white rounded-xl text-gray-600 font-medium shadow-sm"
+                onClick={() => {
+                  setShowLogoutModal(false);
+                  // 执行退出登录
+                }}
+                className="flex-1 py-3 bg-red-500 rounded-xl font-medium text-white"
+                style={{
+                  fontSize: responsiveStyle.fontSize,
+                }}
               >
-                关闭
+                确认退出
               </button>
             </div>
           </div>
-        )}
-
-        <div className="text-center">
-          <p className="text-xs text-gray-400">爪爪连心❤️ v1.0.0</p>
-          <p className="text-xs text-gray-300 mt-1">爪印同频 · 守护版</p>
         </div>
-      </main>
+      )}
     </div>
   );
-}
\ No newline at end of file
+};
+
+export default ProfilePage;
\ No newline at end of file
diff --git a/src/pages/RecordsPage.tsx b/src/pages/RecordsPage.tsx
new file mode 100644
index 00000000..099a0c8b
--- /dev/null
+++ b/src/pages/RecordsPage.tsx
@@ -0,0 +1,698 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  ChevronLeft, 
+  ChevronDown,
+  Calendar,
+  Utensils,
+  Droplets,
+  Activity,
+  Heart,
+  FileText,
+  Clock,
+  Image as ImageIcon,
+  Plus,
+  Trash2,
+  Edit3,
+  X,
+  Scissors,
+  GraduationCap,
+  Dumbbell,
+} from 'lucide-react';
+import { useRecordsStore, type RecordType, type Record } from '../store/recordsStore';
+import { usePetStore } from '../store/petStore';
+import { Card, Badge, EmptyState, Button } from '../components/DesignSystem';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
+import { Camera as CameraPlugin, CameraResultType } from '@capacitor/camera';
+
+interface RecordsPageProps {
+  onNavigate: (page: string) => void;
+}
+
+// 记录类型配置
+const RECORD_TYPE_CONFIG: Record<RecordType, { label: string; icon: React.ElementType; color: string }> = {
+  feeding: { label: '喂食', icon: Utensils, color: '#F59E0B' },
+  drinking: { label: '饮水', icon: Droplets, color: '#3B82F6' },
+  activity: { label: '活动', icon: Activity, color: '#10B981' },
+  health: { label: '健康', icon: Heart, color: '#8B5CF6' },
+  grooming: { label: '护理', icon: Scissors, color: '#EC4899' },
+  training: { label: '训练', icon: GraduationCap, color: '#06B6D4' },
+  other: { label: '其他', icon: FileText, color: '#6B7280' },
+};
+
+export const RecordsPage: React.FC<RecordsPageProps> = ({ onNavigate }) => {
+  const responsive = useResponsiveStyle();
+  const { currentPetId } = usePetStore();
+  const {
+    activeFilter,
+    setActiveFilter,
+    selectedDate,
+    setSelectedDate,
+    records,
+    summaries,
+    getFilteredRecords,
+    getRecordsByDate,
+    getDateSummary,
+    addRecord,
+    updateRecord,
+    deleteRecord,
+    initialize,
+    isLoading,
+  } = useRecordsStore();
+  
+  const [expandedDate, setExpandedDate] = useState<string | null>(null);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [editingRecord, setEditingRecord] = useState<Record | null>(null);
+  const [showDatePicker, setShowDatePicker] = useState(false);
+  const [newRecord, setNewRecord] = useState<{
+    type: RecordType;
+    title: string;
+    description: string;
+    time: string;
+    date: string;
+    tag: string;
+    tagColor: string;
+    note: string;
+    duration: number;
+    amount: number;
+    unit: string;
+  }>({
+    type: 'feeding',
+    title: '',
+    description: '',
+    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+    date: new Date().toISOString().split('T')[0],
+    tag: '',
+    tagColor: '#F59E0B',
+    note: '',
+    duration: 0,
+    amount: 0,
+    unit: '',
+  });
+
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  // 获取过滤后的记录
+  const filteredRecords = currentPetId ? getFilteredRecords(currentPetId, activeFilter) : [];
+  const todayRecords = getRecordsByDate(selectedDate);
+  const todaySummary = getDateSummary(selectedDate);
+
+  // 分类筛选数据
+  const filters = [
+    { id: 'all', icon: FileText, label: '全部', color: '#F59E0B' },
+    { id: 'feeding', icon: Utensils, label: '喂食', color: '#F59E0B' },
+    { id: 'drinking', icon: Droplets, label: '饮水', color: '#3B82F6' },
+    { id: 'activity', icon: Activity, label: '活动', color: '#10B981' },
+    { id: 'health', icon: Heart, label: '健康', color: '#8B5CF6' },
+    { id: 'grooming', icon: Scissors, label: '护理', color: '#EC4899' },
+    { id: 'training', icon: GraduationCap, label: '训练', color: '#06B6D4' },
+    { id: 'other', icon: FileText, label: '其他', color: '#6B7280' },
+  ];
+
+  // 获取类型图标和颜色
+  const getTypeConfig = (type: RecordType) => {
+    return RECORD_TYPE_CONFIG[type] || RECORD_TYPE_CONFIG.other;
+  };
+
+  // 按日期分组
+  const groupedRecords = filteredRecords.reduce((acc, record) => {
+    if (!acc[record.date]) {
+      acc[record.date] = [];
+    }
+    acc[record.date].push(record);
+    return acc;
+  }, {} as Record<string, Record[]>);
+
+  // 格式化日期显示
+  const formatDateDisplay = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    
+    if (date.toDateString() === today.toDateString()) {
+      return '今天';
+    }
+    
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    if (date.toDateString() === yesterday.toDateString()) {
+      return '昨天';
+    }
+    
+    return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
+  };
+
+  // 添加记录
+  const handleAddRecord = async () => {
+    if (!currentPetId || !newRecord.title) return;
+    
+    await addRecord({
+      petId: currentPetId,
+      type: newRecord.type,
+      title: newRecord.title,
+      description: newRecord.description,
+      time: newRecord.time,
+      date: newRecord.date,
+      status: 'normal',
+      tag: newRecord.tag,
+      tagColor: newRecord.tagColor,
+      note: newRecord.note,
+      duration: newRecord.duration,
+      amount: newRecord.amount,
+      unit: newRecord.unit,
+    });
+    
+    setShowAddModal(false);
+    resetNewRecord();
+  };
+
+  // 更新记录
+  const handleUpdateRecord = async () => {
+    if (!editingRecord) return;
+    
+    await updateRecord(editingRecord.id, {
+      type: newRecord.type,
+      title: newRecord.title,
+      description: newRecord.description,
+      time: newRecord.time,
+      date: newRecord.date,
+      tag: newRecord.tag,
+      tagColor: newRecord.tagColor,
+      note: newRecord.note,
+      duration: newRecord.duration,
+      amount: newRecord.amount,
+      unit: newRecord.unit,
+    });
+    
+    setEditingRecord(null);
+    setShowAddModal(false);
+    resetNewRecord();
+  };
+
+  // 删除记录
+  const handleDeleteRecord = async (id: string) => {
+    await deleteRecord(id);
+  };
+
+  // 编辑记录
+  const handleEditRecord = (record: Record) => {
+    setEditingRecord(record);
+    setNewRecord({
+      type: record.type,
+      title: record.title,
+      description: record.description,
+      time: record.time,
+      date: record.date,
+      tag: record.tag || '',
+      tagColor: record.tagColor || '#F59E0B',
+      note: record.note || '',
+      duration: record.duration || 0,
+      amount: record.amount || 0,
+      unit: record.unit || '',
+    });
+    setShowAddModal(true);
+  };
+
+  // 重置新记录表单
+  const resetNewRecord = () => {
+    setNewRecord({
+      type: 'feeding',
+      title: '',
+      description: '',
+      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+      date: selectedDate,
+      tag: '',
+      tagColor: '#F59E0B',
+      note: '',
+      duration: 0,
+      amount: 0,
+      unit: '',
+    });
+  };
+
+  // 拍照添加记录
+  const handleTakePhoto = async () => {
+    try {
+      const photo = await CameraPlugin.getPhoto({
+        quality: 90,
+        allowEditing: true,
+        resultType: CameraResultType.Base64,
+      });
+      
+      console.log('Photo taken:', photo.base64String);
+      
+      // 设置图片并打开添加模态框
+      setNewRecord(prev => ({
+        ...prev,
+        note: prev.note + ' [有图片]',
+      }));
+      setShowAddModal(true);
+    } catch (error) {
+      console.error('Camera error:', error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FAF7F2]">
+      {/* 顶部标题区 */}
+      <div className="bg-gradient-to-b from-white to-[#FAF7F2] px-4 pt-12 pb-6">
+        <div className="flex items-center gap-4 mb-4">
+          <button 
+            onClick={() => onNavigate('home')}
+            className="p-2 -ml-2 rounded-full hover:bg-gray-100 transition-colors"
+          >
+            <ChevronLeft className="w-6 h-6 text-gray-600" />
+          </button>
+          <div className="flex-1">
+            <h1 className="text-2xl font-bold text-gray-800">记录</h1>
+            <p className="text-sm text-gray-500">记录每一次陪伴，见证每一点成长</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleTakePhoto}
+              className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            >
+              <ImageIcon className="w-5 h-5 text-gray-600" />
+            </button>
+            <button
+              onClick={() => setShowAddModal(true)}
+              className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+            >
+              <Plus className="w-5 h-5 text-gray-600" />
+            </button>
+          </div>
+        </div>
+
+        {/* 分类筛选 */}
+        <div className="flex gap-2 overflow-x-auto pb-2 -mx-4 px-4 scrollbar-hide">
+          {filters.map((filter) => (
+            <button
+              key={filter.id}
+              onClick={() => setActiveFilter(filter.id as RecordType | 'all')}
+              className={`flex flex-col items-center gap-1 px-4 py-2 rounded-xl transition-all flex-shrink-0 ${
+                activeFilter === filter.id 
+                  ? 'bg-white shadow-md' 
+                  : 'bg-transparent'
+              }`}
+            >
+              <filter.icon 
+                className="w-6 h-6" 
+                style={{ color: activeFilter === filter.id ? filter.color : '#9CA3AF' }} 
+              />
+              <span 
+                className="text-xs font-medium"
+                style={{ color: activeFilter === filter.id ? filter.color : '#9CA3AF' }}
+              >
+                {filter.label}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 加载状态 */}
+      {isLoading && (
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500"></div>
+        </div>
+      )}
+
+      {/* 记录列表 */}
+      {!isLoading && (
+        <div className="px-4 pb-24">
+          {/* 日期选择器 */}
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-bold text-gray-800">{formatDateDisplay(selectedDate)}</h2>
+            <button 
+              onClick={() => setShowDatePicker(!showDatePicker)}
+              className="flex items-center gap-1 px-3 py-1.5 bg-white rounded-full text-sm text-gray-600 shadow-sm"
+            >
+              <Calendar className="w-4 h-4" />
+              选择日期
+              <ChevronDown className="w-4 h-4" />
+            </button>
+          </div>
+
+          {/* 日期快速选择 */}
+          {showDatePicker && (
+            <div className="mb-4 flex gap-2 overflow-x-auto pb-2">
+              {Array.from({ length: 7 }).map((_, i) => {
+                const date = new Date();
+                date.setDate(date.getDate() - i);
+                const dateStr = date.toISOString().split('T')[0];
+                const isSelected = selectedDate === dateStr;
+                
+                return (
+                  <button
+                    key={i}
+                    onClick={() => {
+                      setSelectedDate(dateStr);
+                      setShowDatePicker(false);
+                    }}
+                    className={`flex-shrink-0 px-3 py-2 rounded-lg text-sm transition-all ${
+                      isSelected
+                        ? 'bg-orange-500 text-white'
+                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                    }`}
+                  >
+                    {i === 0 ? '今天' : i === 1 ? '昨天' : date.toLocaleDateString('zh-CN', { day: 'numeric' })}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* 今日汇总 */}
+          {todaySummary && (
+            <Card variant="default" padding="md" hover={false} className="mb-4">
+              <h3 className="text-sm font-semibold text-gray-600 mb-3">今日汇总</h3>
+              <div className="flex flex-wrap gap-3">
+                {Object.entries(RECORD_TYPE_CONFIG).map(([type, config]) => {
+                  const count = todaySummary[type as keyof typeof todaySummary] || 0;
+                  if (count === 0) return null;
+                  
+                  return (
+                    <div 
+                      key={type}
+                      className="flex items-center gap-2 px-3 py-2 bg-gray-50 rounded-xl"
+                    >
+                      <config.icon className="w-4 h-4" style={{ color: config.color }} />
+                      <span className="text-sm font-medium text-gray-700">{count}次</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </Card>
+          )}
+
+          {/* 时间线 */}
+          {filteredRecords.length === 0 ? (
+            <EmptyState
+              type="records"
+              title="暂无记录"
+              description="点击右上角添加按钮记录宝贝的日常"
+              action={
+                <Button onClick={() => setShowAddModal(true)}>
+                  添加记录
+                </Button>
+              }
+            />
+          ) : (
+            <div className="relative">
+              {/* 时间线轴线 */}
+              <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>
+
+              {/* 记录项 */}
+              {Object.entries(groupedRecords).map(([date, dateRecords]) => (
+                <div key={date} className="mb-6">
+                  {/* 日期标题 */}
+                  <button 
+                    onClick={() => setExpandedDate(expandedDate === date ? null : date)}
+                    className="flex items-center justify-between w-full py-2 mb-3"
+                  >
+                    <span className="text-sm font-semibold text-gray-500">{formatDateDisplay(date)}</span>
+                    <ChevronDown 
+                      className={`w-4 h-4 text-gray-400 transition-transform ${
+                        expandedDate === date ? 'rotate-180' : ''
+                      }`} 
+                    />
+                  </button>
+
+                  {/* 该日期的记录 */}
+                  {dateRecords.map((record) => {
+                    const typeConfig = getTypeConfig(record.type);
+                    return (
+                      <div key={record.id} className="relative flex gap-4 mb-4">
+                        {/* 时间点 */}
+                        <div 
+                          className="relative z-10 w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
+                          style={{ backgroundColor: `${typeConfig.color}20` }}
+                        >
+                          <div 
+                            className="w-3 h-3 rounded-full"
+                            style={{ backgroundColor: typeConfig.color }}
+                          ></div>
+                        </div>
+
+                        {/* 内容卡片 */}
+                        <Card variant="default" padding="md" hover={false} className="flex-1">
+                          <div className="flex items-start justify-between mb-2">
+                            <div className="flex items-center gap-2">
+                              <div 
+                                className="w-10 h-10 rounded-xl flex items-center justify-center"
+                                style={{ backgroundColor: `${typeConfig.color}15` }}
+                              >
+                                <typeConfig.icon className="w-5 h-5" style={{ color: typeConfig.color }} />
+                              </div>
+                              <div>
+                                <div className="flex items-center gap-2">
+                                  <h3 className="font-semibold text-gray-800">{record.title}</h3>
+                                  {record.tag && (
+                                    <Badge variant="default" size="sm">
+                                      {record.tag}
+                                    </Badge>
+                                  )}
+                                </div>
+                                <p className="text-sm text-gray-500">{record.description}</p>
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-1 text-gray-400">
+                              <Clock className="w-3 h-3" />
+                              <span className="text-xs">{record.time}</span>
+                            </div>
+                          </div>
+
+                          {/* 详细信息 */}
+                          {(record.duration || record.amount) && (
+                            <div className="flex items-center gap-3 mt-2 text-sm text-gray-500">
+                              {record.duration && (
+                                <span className="flex items-center gap-1">
+                                  <Clock className="w-3 h-3" />
+                                  {record.duration}分钟
+                                </span>
+                              )}
+                              {record.amount && record.unit && (
+                                <span>{record.amount}{record.unit}</span>
+                              )}
+                            </div>
+                          )}
+
+                          {/* 图片 */}
+                          {record.image && (
+                            <div className="mt-3 rounded-xl overflow-hidden">
+                              <img 
+                                src={record.image} 
+                                alt={record.title}
+                                className="w-full h-24 object-cover"
+                              />
+                            </div>
+                          )}
+
+                          {/* 备注 */}
+                          {record.note && (
+                            <p className="text-xs text-gray-400 mt-2">{record.note}</p>
+                          )}
+
+                          {/* 操作按钮 */}
+                          <div className="flex items-center justify-end gap-2 mt-3">
+                            <button
+                              onClick={() => handleEditRecord(record)}
+                              className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+                            >
+                              <Edit3 className="w-4 h-4 text-gray-400" />
+                            </button>
+                            <button
+                              onClick={() => handleDeleteRecord(record.id)}
+                              className="p-2 rounded-full hover:bg-red-50 transition-colors"
+                            >
+                              <Trash2 className="w-4 h-4 text-red-400" />
+                            </button>
+                          </div>
+                        </Card>
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 添加/编辑记录模态框 */}
+      {showAddModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+          <Card variant="default" padding="lg" className="mx-4 max-w-sm w-full max-h-[90vh] overflow-y-auto">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-bold text-gray-800">
+                {editingRecord ? '编辑记录' : '添加记录'}
+              </h3>
+              <button
+                onClick={() => {
+                  setShowAddModal(false);
+                  setEditingRecord(null);
+                  resetNewRecord();
+                }}
+                className="p-2 rounded-full hover:bg-gray-100 transition-colors"
+              >
+                <X className="w-5 h-5 text-gray-500" />
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              {/* 记录类型 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">记录类型</label>
+                <div className="grid grid-cols-4 gap-2">
+                  {Object.entries(RECORD_TYPE_CONFIG).map(([type, config]) => (
+                    <button
+                      key={type}
+                      onClick={() => setNewRecord(prev => ({ ...prev, type: type as RecordType }))}
+                      className={`flex flex-col items-center gap-1 p-2 rounded-lg text-xs transition-all ${
+                        newRecord.type === type
+                          ? 'bg-orange-500 text-white'
+                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                      }`}
+                    >
+                      <config.icon className="w-4 h-4" />
+                      {config.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* 标题 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">标题</label>
+                <input
+                  type="text"
+                  value={newRecord.title}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, title: e.target.value }))}
+                  placeholder="例如：喂食、散步..."
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 描述 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">描述</label>
+                <input
+                  type="text"
+                  value={newRecord.description}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, description: e.target.value }))}
+                  placeholder="例如：喂食了 120g 狗粮"
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 时间 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">时间</label>
+                <input
+                  type="time"
+                  value={newRecord.time}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, time: e.target.value }))}
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 日期 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">日期</label>
+                <input
+                  type="date"
+                  value={newRecord.date}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, date: e.target.value }))}
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 数量 */}
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="text-sm font-medium text-gray-600 mb-2">数量</label>
+                  <input
+                    type="number"
+                    value={newRecord.amount}
+                    onChange={(e) => setNewRecord(prev => ({ ...prev, amount: parseFloat(e.target.value) || 0 }))}
+                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-600 mb-2">单位</label>
+                  <input
+                    type="text"
+                    value={newRecord.unit}
+                    onChange={(e) => setNewRecord(prev => ({ ...prev, unit: e.target.value }))}
+                    placeholder="g, ml, kg..."
+                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                  />
+                </div>
+              </div>
+
+              {/* 时长 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">时长 (分钟)</label>
+                <input
+                  type="number"
+                  value={newRecord.duration}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, duration: parseInt(e.target.value) || 0 }))}
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 标签 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">标签</label>
+                <input
+                  type="text"
+                  value={newRecord.tag}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, tag: e.target.value }))}
+                  placeholder="例如：主食、零食..."
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 备注 */}
+              <div>
+                <label className="text-sm font-medium text-gray-600 mb-2">备注</label>
+                <input
+                  type="text"
+                  value={newRecord.note}
+                  onChange={(e) => setNewRecord(prev => ({ ...prev, note: e.target.value }))}
+                  placeholder="可选备注..."
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-orange-500 focus:outline-none transition-colors"
+                />
+              </div>
+
+              {/* 提交按钮 */}
+              <div className="flex gap-3 pt-2">
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowAddModal(false);
+                    setEditingRecord(null);
+                    resetNewRecord();
+                  }}
+                  className="flex-1"
+                >
+                  取消
+                </Button>
+                <Button
+                  onClick={editingRecord ? handleUpdateRecord : handleAddRecord}
+                  disabled={!newRecord.title}
+                  className="flex-1"
+                >
+                  {editingRecord ? '保存' : '添加'}
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RecordsPage;
\ No newline at end of file
diff --git a/src/pages/RemindersPage.tsx b/src/pages/RemindersPage.tsx
index 8e56a1cd..437716a2 100644
--- a/src/pages/RemindersPage.tsx
+++ b/src/pages/RemindersPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { 
   ChevronLeft, 
   Calendar, 
@@ -11,28 +11,143 @@ import {
   Pill,
   Activity,
   Star,
-  Sparkles
+  Sparkles,
+  Trash2,
+  Edit3,
+  Bell,
+  BellOff,
+  MoreVertical,
+  X,
 } from 'lucide-react';
-import { Card, EmptyState } from '../components/DesignSystem';
+import { Card, EmptyState, Badge, Button } from '../components/DesignSystem';
 import { useReminderStore } from '../store/reminderStore';
 import { usePetStore } from '../store/petStore';
-import { REMINDER_TYPES, ReminderType } from '../types/reminder';
+import { REMINDER_TYPES, ReminderType, Reminder } from '../types/reminder';
 import { AddReminderModal } from '../components/AddReminderModal';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
+import { LocalNotifications } from '@capacitor/local-notifications';
 
 interface RemindersPageProps {
   onNavigate: (page: string) => void;
 }
 
 export default function RemindersPage({ onNavigate }: RemindersPageProps) {
-  const { selectedType, viewMode, getFilteredReminders, getUpcomingReminders, setSelectedType, setViewMode, toggleComplete, addReminder } = useReminderStore();
+  const responsive = useResponsiveStyle();
   const { currentPetId } = usePetStore();
+  const {
+    selectedType,
+    viewMode,
+    reminders,
+    getFilteredReminders,
+    getUpcomingReminders,
+    setSelectedType,
+    setViewMode,
+    toggleComplete,
+    addReminder,
+    updateReminder,
+    deleteReminder,
+    sendNotification,
+    getSmartRecommendations,
+  } = useReminderStore();
+  
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [editingReminder, setEditingReminder] = useState<Reminder | null>(null);
+  const [showActionMenu, setShowActionMenu] = useState<string | null>(null);
+  const [notificationStatus, setNotificationStatus] = useState<Record<string, boolean>>({});
 
   const filteredReminders = currentPetId ? getFilteredReminders(currentPetId) : [];
   const upcomingReminders = currentPetId ? getUpcomingReminders(currentPetId, 5) : [];
 
+  // 检查通知权限
+  useEffect(() => {
+    checkNotificationPermission();
+  }, []);
+
+  const checkNotificationPermission = async () => {
+    try {
+      const { display } = await LocalNotifications.checkPermissions();
+      setNotificationStatus({ enabled: display === 'granted' });
+    } catch (error) {
+      console.log('Notification permission check failed:', error);
+      setNotificationStatus({ enabled: false });
+    }
+  };
+
+  const requestNotificationPermission = async () => {
+    try {
+      const result = await LocalNotifications.requestPermissions();
+      setNotificationStatus({ enabled: result.display === 'granted' });
+      return result.display === 'granted';
+    } catch (error) {
+      console.log('Notification permission request failed:', error);
+      return false;
+    }
+  };
+
   const handleAddReminder = (reminderData: Parameters<typeof addReminder>[0]) => {
     addReminder(reminderData);
+    
+    // 如果通知权限已开启，为该提醒创建本地通知
+    if (notificationStatus.enabled) {
+      scheduleLocalNotification(reminderData);
+    }
+  };
+
+  const scheduleLocalNotification = async (reminder: Reminder | Parameters<typeof addReminder>[0]) => {
+    try {
+      const notificationDate = new Date(`${reminder.date} ${reminder.time}`);
+      
+      await LocalNotifications.schedule({
+        notifications: [
+          {
+            id: Date.now(),
+            title: reminder.title,
+            body: reminder.notes || `提醒时间: ${reminder.date} ${reminder.time}`,
+            schedule: { at: notificationDate },
+            sound: 'default',
+            actionTypeId: 'REMINDER_ACTION',
+            extra: {
+              reminderId: reminder.id || Date.now().toString(),
+              type: reminder.type,
+            },
+          },
+        ],
+      });
+      
+      console.log('Local notification scheduled:', reminder.title);
+    } catch (error) {
+      console.log('Failed to schedule notification:', error);
+    }
+  };
+
+  const handleDeleteReminder = async (id: string) => {
+    deleteReminder(id);
+    setShowActionMenu(null);
+    
+    // 取消相关的本地通知（如果有）
+    try {
+      await LocalNotifications.cancel({
+        notifications: [{ id: parseInt(id) || Date.now() }],
+      });
+    } catch (error) {
+      console.log('Failed to cancel notification:', error);
+    }
+  };
+
+  const handleEditReminder = (reminder: Reminder) => {
+    setEditingReminder(reminder);
+    setIsAddModalOpen(true);
+    setShowActionMenu(null);
+  };
+
+  const handleToggleNotification = async (reminder: Reminder) => {
+    const channels: ('app' | 'push' | 'email' | 'sms' | 'wechat')[] = ['app', 'push'];
+    await sendNotification(reminder, channels);
+    setShowActionMenu(null);
+  };
+
+  const handleToggleComplete = async (id: string) => {
+    toggleComplete(id);
   };
 
   const getIconForType = (type: string) => {
@@ -62,6 +177,15 @@ export default function RemindersPage({ onNavigate }: RemindersPageProps) {
     return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
   };
 
+  const getPriorityColor = (priority?: 'high' | 'medium' | 'low') => {
+    switch (priority) {
+      case 'high': return 'text-red-500';
+      case 'medium': return 'text-yellow-500';
+      case 'low': return 'text-green-500';
+      default: return 'text-gray-500';
+    }
+  };
+
   return (
     <div className="min-h-screen bg-neutral-50 pb-24">
       {/* Header */}
@@ -150,6 +274,24 @@ export default function RemindersPage({ onNavigate }: RemindersPageProps) {
         </div>
       </div>
 
+      {/* Notification Permission Banner */}
+      {!notificationStatus.enabled && (
+        <div className="bg-yellow-50 border-b border-yellow-100 px-4 py-3">
+          <div className="max-w-md mx-auto flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <BellOff className="w-5 h-5 text-yellow-600" />
+              <span className="text-sm text-yellow-700">通知权限未开启</span>
+            </div>
+            <button
+              onClick={requestNotificationPermission}
+              className="px-3 py-1.5 bg-yellow-500 text-white rounded-lg text-sm font-medium hover:bg-yellow-600 transition-colors"
+            >
+              开启通知
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className="px-4 py-4 space-y-6">
         <div className="max-w-md mx-auto">
           {/* Upcoming */}
@@ -178,27 +320,63 @@ export default function RemindersPage({ onNavigate }: RemindersPageProps) {
                             <Clock className="w-3.5 h-3.5 text-neutral-400 flex-shrink-0" />
                             <span className="text-sm text-neutral-500">{formatDate(reminder.date)} {reminder.time}</span>
                             {reminder.repeat !== 'once' && (
-                              <span className="text-xs text-neutral-400 bg-neutral-100 px-1.5 py-0.5 rounded-full">
+                              <Badge variant="default" size="sm">
                                 {reminder.repeat === 'daily' ? '每天' : reminder.repeat === 'weekly' ? '每周' : reminder.repeat === 'monthly' ? '每月' : '每年'}
-                              </span>
+                              </Badge>
                             )}
                           </div>
                           {reminder.notes && (
                             <p className="text-sm text-neutral-500 mt-2 line-clamp-2">{reminder.notes}</p>
                           )}
                         </div>
-                        <button
-                          onClick={() => toggleComplete(reminder.id)}
-                          className={`w-7 h-7 md:w-6 md:h-6 rounded-full border-2 flex items-center justify-center transition-all flex-shrink-0 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 ${
-                            reminder.isCompleted
-                              ? 'bg-success-500 border-success-500'
-                              : 'border-neutral-300 hover:border-purple-500 active:border-purple-400'
-                          }`}
-                          aria-label={reminder.isCompleted ? '标记为未完成' : '标记为完成'}
-                        >
-                          {reminder.isCompleted && <Check className="w-4 h-4 text-white" />}
-                        </button>
+                        <div className="flex items-center gap-1">
+                          <button
+                            onClick={() => handleToggleComplete(reminder.id)}
+                            className={`w-7 h-7 md:w-6 md:h-6 rounded-full border-2 flex items-center justify-center transition-all flex-shrink-0 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 ${
+                              reminder.isCompleted
+                                ? 'bg-success-500 border-success-500'
+                                : 'border-neutral-300 hover:border-purple-500 active:border-purple-400'
+                            }`}
+                            aria-label={reminder.isCompleted ? '标记为未完成' : '标记为完成'}
+                          >
+                            {reminder.isCompleted && <Check className="w-4 h-4 text-white" />}
+                          </button>
+                          <button
+                            onClick={() => setShowActionMenu(showActionMenu === reminder.id ? null : reminder.id)}
+                            className="p-2 rounded-full hover:bg-neutral-100 transition-colors min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0"
+                            aria-label="更多操作"
+                          >
+                            <MoreVertical className="w-5 h-5 text-neutral-400" />
+                          </button>
+                        </div>
                       </div>
+                      
+                      {/* Action Menu */}
+                      {showActionMenu === reminder.id && (
+                        <div className="mt-3 pt-3 border-t border-neutral-100 flex flex-wrap gap-2">
+                          <button
+                            onClick={() => handleEditReminder(reminder)}
+                            className="flex items-center gap-1 px-3 py-2 bg-neutral-100 rounded-lg text-sm text-neutral-600 hover:bg-neutral-200 transition-colors"
+                          >
+                            <Edit3 className="w-4 h-4" />
+                            编辑
+                          </button>
+                          <button
+                            onClick={() => handleToggleNotification(reminder)}
+                            className="flex items-center gap-1 px-3 py-2 bg-purple-100 rounded-lg text-sm text-purple-600 hover:bg-purple-200 transition-colors"
+                          >
+                            <Bell className="w-4 h-4" />
+                            发送通知
+                          </button>
+                          <button
+                            onClick={() => handleDeleteReminder(reminder.id)}
+                            className="flex items-center gap-1 px-3 py-2 bg-red-100 rounded-lg text-sm text-red-600 hover:bg-red-200 transition-colors"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                            删除
+                          </button>
+                        </div>
+                      )}
                     </Card>
                   );
                 })}
@@ -245,27 +423,63 @@ export default function RemindersPage({ onNavigate }: RemindersPageProps) {
                             <Clock className="w-3.5 h-3.5 text-neutral-400 flex-shrink-0" />
                             <span className="text-sm text-neutral-500">{formatDate(reminder.date)} {reminder.time}</span>
                             {reminder.repeat !== 'once' && (
-                              <span className="text-xs text-neutral-400 bg-neutral-100 px-1.5 py-0.5 rounded-full">
+                              <Badge variant="default" size="sm">
                                 {reminder.repeat === 'daily' ? '每天' : reminder.repeat === 'weekly' ? '每周' : reminder.repeat === 'monthly' ? '每月' : '每年'}
-                              </span>
+                              </Badge>
                             )}
                           </div>
                           {reminder.notes && (
                             <p className="text-sm text-neutral-500 mt-2 line-clamp-2">{reminder.notes}</p>
                           )}
                         </div>
-                        <button
-                          onClick={() => toggleComplete(reminder.id)}
-                          className={`w-7 h-7 md:w-6 md:h-6 rounded-full border-2 flex items-center justify-center transition-all flex-shrink-0 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 ${
-                            reminder.isCompleted
-                              ? 'bg-success-500 border-success-500'
-                              : 'border-neutral-300 hover:border-purple-500 active:border-purple-400'
-                          }`}
-                          aria-label={reminder.isCompleted ? '标记为未完成' : '标记为完成'}
-                        >
-                          {reminder.isCompleted && <Check className="w-4 h-4 text-white" />}
-                        </button>
+                        <div className="flex items-center gap-1">
+                          <button
+                            onClick={() => handleToggleComplete(reminder.id)}
+                            className={`w-7 h-7 md:w-6 md:h-6 rounded-full border-2 flex items-center justify-center transition-all flex-shrink-0 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 ${
+                              reminder.isCompleted
+                                ? 'bg-success-500 border-success-500'
+                                : 'border-neutral-300 hover:border-purple-500 active:border-purple-400'
+                            }`}
+                            aria-label={reminder.isCompleted ? '标记为未完成' : '标记为完成'}
+                          >
+                            {reminder.isCompleted && <Check className="w-4 h-4 text-white" />}
+                          </button>
+                          <button
+                            onClick={() => setShowActionMenu(showActionMenu === reminder.id ? null : reminder.id)}
+                            className="p-2 rounded-full hover:bg-neutral-100 transition-colors min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0"
+                            aria-label="更多操作"
+                          >
+                            <MoreVertical className="w-5 h-5 text-neutral-400" />
+                          </button>
+                        </div>
                       </div>
+                      
+                      {/* Action Menu */}
+                      {showActionMenu === reminder.id && (
+                        <div className="mt-3 pt-3 border-t border-neutral-100 flex flex-wrap gap-2">
+                          <button
+                            onClick={() => handleEditReminder(reminder)}
+                            className="flex items-center gap-1 px-3 py-2 bg-neutral-100 rounded-lg text-sm text-neutral-600 hover:bg-neutral-200 transition-colors"
+                          >
+                            <Edit3 className="w-4 h-4" />
+                            编辑
+                          </button>
+                          <button
+                            onClick={() => handleToggleNotification(reminder)}
+                            className="flex items-center gap-1 px-3 py-2 bg-purple-100 rounded-lg text-sm text-purple-600 hover:bg-purple-200 transition-colors"
+                          >
+                            <Bell className="w-4 h-4" />
+                            发送通知
+                          </button>
+                          <button
+                            onClick={() => handleDeleteReminder(reminder.id)}
+                            className="flex items-center gap-1 px-3 py-2 bg-red-100 rounded-lg text-sm text-red-600 hover:bg-red-200 transition-colors"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                            删除
+                          </button>
+                        </div>
+                      )}
                     </Card>
                   );
                 })}
@@ -277,10 +491,17 @@ export default function RemindersPage({ onNavigate }: RemindersPageProps) {
 
       <AddReminderModal
         isOpen={isAddModalOpen}
-        onClose={() => setIsAddModalOpen(false)}
-        onSubmit={handleAddReminder}
+        onClose={() => {
+          setIsAddModalOpen(false);
+          setEditingReminder(null);
+        }}
+        onSubmit={editingReminder ? (data) => {
+          updateReminder(editingReminder.id, data);
+          setEditingReminder(null);
+        } : handleAddReminder}
         currentPetId={currentPetId}
+        editingReminder={editingReminder}
       />
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/pages/ServicesPage.tsx b/src/pages/ServicesPage.tsx
index b84a30ee..b5887954 100644
--- a/src/pages/ServicesPage.tsx
+++ b/src/pages/ServicesPage.tsx
@@ -3,16 +3,44 @@
 //
 // 作者: 带娃的小陈工
 // 日期: 2026-05-26
-// 描述: 综合服务页面（保险+医疗）
+// 描述: 综合服务页面（保险+医疗+训练）- 完整功能实现
 // ============================================
 
-import { Shield, Stethoscope, ChevronRight, Sparkles, Activity } from 'lucide-react';
+import { useState } from 'react';
+import { Shield, Stethoscope, ChevronRight, Sparkles, Activity, GraduationCap, FileText, Calendar, Clock, Award, CheckCircle, AlertCircle, Star, Heart, Zap, Phone, MessageSquare, TrendingUp, Play } from 'lucide-react';
+import { useInsuranceStore } from '../store/insuranceStore';
+import { useMedicalStore } from '../store/medicalStore';
+import { useTrainingStore } from '../store/trainingStore';
+import { usePetStore } from '../store/petStore';
+import { Card, Button, Badge, ProgressRing } from '../components/DesignSystem';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
 
 interface ServicesPageProps {
   onNavigate?: (page: string) => void;
 }
 
 export default function ServicesPage({ onNavigate }: ServicesPageProps) {
+  const { plans, policies, claims } = useInsuranceStore();
+  const { consultations, appointments, medicalRecords } = useMedicalStore();
+  const { courses, trainingRecords, totalTrainingTime, streakDays } = useTrainingStore();
+  const { pets, selectedPetId } = usePetStore();
+  const responsive = useResponsiveStyle();
+  
+  const [activeTab, setActiveTab] = useState<'overview' | 'medical' | 'insurance' | 'training'>('overview');
+
+  const selectedPet = pets.find(p => p.id === selectedPetId);
+
+  // 计算统计数据
+  const totalCoverage = (policies || []).reduce((sum, p) => {
+    const plan = (plans || []).find(pl => pl?.id === p?.planId);
+    return sum + (plan?.annualLimit || 0);
+  }, 0);
+  const activePolicies = (policies || []).filter(p => p?.status === 'active').length;
+  const pendingClaims = (claims || []).filter(c => c?.status === 'under_review').length;
+  const upcomingAppointments = (appointments || []).filter(a => a?.status === 'scheduled').length;
+  const completedCourses = (courses || []).filter(c => c?.progress === 100).length;
+  const totalPointsEarned = (trainingRecords || []).reduce((sum, r) => sum + (r?.success ? 50 : 0), 0);
+
   const services = [
     {
       id: 'insurance',
@@ -22,7 +50,11 @@ export default function ServicesPage({ onNavigate }: ServicesPageProps) {
       color: 'from-secondary-500 to-secondary-600',
       bg: 'bg-secondary-50',
       text: 'text-secondary-600',
-      badge: '推荐'
+      badge: activePolicies > 0 ? `${activePolicies}个保单` : '推荐',
+      stats: {
+        main: activePolicies > 0 ? `¥${totalCoverage.toLocaleString()}` : '立即投保',
+        sub: activePolicies > 0 ? '保障总额' : '为爱宠保驾护航'
+      }
     },
     {
       id: 'medical',
@@ -32,104 +64,607 @@ export default function ServicesPage({ onNavigate }: ServicesPageProps) {
       color: 'from-warning-500 to-warning-600',
       bg: 'bg-warning-50',
       text: 'text-warning-600',
-      badge: '热门'
+      badge: upcomingAppointments > 0 ? `${upcomingAppointments}个预约` : '热门',
+      stats: {
+        main: consultations.length > 0 ? `${consultations.length}次咨询` : 'AI智能预诊',
+        sub: consultations.length > 0 ? '历史记录' : '快速诊断症状'
+      }
+    },
+    {
+      id: 'training',
+      title: '宠物训练',
+      description: 'AI 个性化训练课程',
+      icon: GraduationCap,
+      color: 'from-purple-500 to-purple-600',
+      bg: 'bg-purple-50',
+      text: 'text-purple-600',
+      badge: completedCourses > 0 ? `${completedCourses}个完成` : '新功能',
+      stats: {
+        main: `${totalTrainingTime}分钟`,
+        sub: '累计训练时长'
+      }
     }
   ];
 
   const quickActions = [
-    { icon: Activity, title: '健康档案', desc: '查看完整健康记录' },
-    { icon: Sparkles, title: '健康体检', desc: '预约年度体检服务' }
+    { icon: Activity, title: '健康档案', desc: '查看完整健康记录', color: 'bg-primary-50', textColor: 'text-primary-600' },
+    { icon: Sparkles, title: '健康体检', desc: '预约年度体检服务', color: 'bg-success-50', textColor: 'text-success-600' },
+    { icon: FileText, title: '理赔申请', desc: '快速提交理赔请求', color: 'bg-secondary-50', textColor: 'text-secondary-600' },
+    { icon: Calendar, title: '预约兽医', desc: '在线预约问诊', color: 'bg-warning-50', textColor: 'text-warning-600' },
+    { icon: MessageSquare, title: 'AI咨询', desc: '智能症状分析', color: 'bg-info-50', textColor: 'text-info-600' },
+    { icon: Award, title: '训练课程', desc: '开始训练计划', color: 'bg-purple-50', textColor: 'text-purple-600' }
   ];
 
+  // 获取最近活动
+  const getRecentActivities = () => {
+    const activities = [];
+    
+    // 最近咨询
+    if (consultations.length > 0) {
+      const latestConsultation = consultations[0];
+      activities.push({
+        type: 'consultation',
+        title: 'AI咨询完成',
+        description: latestConsultation.diagnosis?.slice(0, 50) || '症状分析完成',
+        date: latestConsultation.date,
+        icon: MessageSquare,
+        color: 'warning'
+      });
+    }
+    
+    // 最近预约
+    if (appointments.length > 0) {
+      const latestAppointment = appointments[0];
+      activities.push({
+        type: 'appointment',
+        title: latestAppointment.purpose,
+        description: `${latestAppointment.clinicName} - ${latestAppointment.vetName}`,
+        date: latestAppointment.date,
+        icon: Calendar,
+        color: 'secondary'
+      });
+    }
+    
+    // 最近训练
+    if (trainingRecords.length > 0) {
+      const latestTraining = trainingRecords[0];
+      activities.push({
+        type: 'training',
+        title: latestTraining.courseTitle,
+        description: `训练${latestTraining.success ? '成功' : '进行中'} - ${latestTraining.duration}分钟`,
+        date: latestTraining.date,
+        icon: GraduationCap,
+        color: 'purple'
+      });
+    }
+    
+    // 最近理赔
+    if (claims.length > 0) {
+      const latestClaim = claims[0];
+      activities.push({
+        type: 'claim',
+        title: '理赔申请',
+        description: `¥${latestClaim.amount} - ${getClaimStatusLabel(latestClaim.status)}`,
+        date: latestClaim.date,
+        icon: FileText,
+        color: 'secondary'
+      });
+    }
+    
+    return activities.sort((a, b) => b.date.getTime() - a.date.getTime()).slice(0, 5);
+  };
+
+  const getClaimStatusLabel = (status: string) => {
+    const labels: Record<string, string> = {
+      submitted: '已提交',
+      under_review: '审核中',
+      approved: '已批准',
+      rejected: '已拒绝'
+    };
+    return labels[status] || status;
+  };
+
+  const getActivityColor = (color: string) => {
+    const colors: Record<string, string> = {
+      warning: 'bg-warning-100 text-warning-600',
+      secondary: 'bg-secondary-100 text-secondary-600',
+      purple: 'bg-purple-100 text-purple-600',
+      primary: 'bg-primary-100 text-primary-600'
+    };
+    return colors[color] || 'bg-neutral-100 text-neutral-600';
+  };
+
   return (
     <div className="min-h-screen bg-neutral-50 pb-24">
       {/* Header */}
-      <div className="bg-gradient-to-br from-secondary-500 to-secondary-600 text-white px-6 py-8">
-        <div className="max-w-md mx-auto">
+      <div className="bg-gradient-to-br from-secondary-500 to-secondary-600 text-white px-6 py-8" style={{ paddingTop: responsive.safeAreaPadding.paddingTop + 32 }}>
+        <div style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
           <h1 className="text-2xl font-bold mb-2">爱宠服务</h1>
           <p className="text-secondary-100 mb-6">全面的宠物健康与保障服务</p>
+          
+          {/* Stats Overview */}
+          <div className="grid grid-cols-4 gap-2">
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3 text-center">
+              <Shield className="w-5 h-5 mx-auto mb-1" />
+              <div className="text-lg font-bold">{activePolicies}</div>
+              <div className="text-xs text-secondary-100">保单</div>
+            </div>
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3 text-center">
+              <Calendar className="w-5 h-5 mx-auto mb-1" />
+              <div className="text-lg font-bold">{upcomingAppointments}</div>
+              <div className="text-xs text-secondary-100">预约</div>
+            </div>
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3 text-center">
+              <GraduationCap className="w-5 h-5 mx-auto mb-1" />
+              <div className="text-lg font-bold">{completedCourses}</div>
+              <div className="text-xs text-secondary-100">课程</div>
+            </div>
+            <div className="bg-white/20 backdrop-blur rounded-xl p-3 text-center">
+              <Award className="w-5 h-5 mx-auto mb-1" />
+              <div className="text-lg font-bold">{totalPointsEarned}</div>
+              <div className="text-xs text-secondary-100">积分</div>
+            </div>
+          </div>
         </div>
       </div>
 
-      {/* Main Services */}
-      <div className="px-4 py-6 max-w-md mx-auto space-y-4">
-        {services.map((service) => {
-          const Icon = service.icon;
-          return (
+      {/* Tabs */}
+      <div className="px-4 py-4 sticky top-0 bg-neutral-50 z-10">
+        <div className="flex gap-2" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+          {(['overview', 'medical', 'insurance', 'training'] as const).map((tab) => (
             <button
-              key={service.id}
-              onClick={() => onNavigate?.(service.id)}
-              className={`w-full bg-white rounded-2xl p-6 shadow-sm border border-neutral-100 text-left hover:shadow-lg transition-all hover:scale-[1.02] animate-fade-in`}
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                activeTab === tab
+                  ? 'bg-secondary-500 text-white shadow-lg'
+                  : 'bg-white text-neutral-600 hover:bg-neutral-100'
+              }`}
             >
-              <div className="flex items-start gap-4">
-                <div className={`w-14 h-14 bg-gradient-to-br ${service.color} rounded-2xl flex items-center justify-center flex-shrink-0`}>
-                  <Icon className="w-7 h-7 text-white" />
+              {tab === 'overview' ? '概览' : tab === 'medical' ? '医疗' : tab === 'insurance' ? '保险' : '训练'}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="px-4" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+        {/* Overview Tab */}
+        {activeTab === 'overview' && (
+          <div className="space-y-4">
+            {/* Main Services */}
+            <div className="space-y-4">
+              {services.map((service) => {
+                const Icon = service.icon;
+                return (
+                  <Card
+                    key={service.id}
+                    variant="default"
+                    padding="lg"
+                    hover
+                    onClick={() => onNavigate?.(service.id)}
+                    enableGlow={service.id === 'insurance' && activePolicies > 0}
+                  >
+                    <div className="flex items-start gap-4">
+                      <div className={`w-14 h-14 bg-gradient-to-br ${service.color} rounded-2xl flex items-center justify-center flex-shrink-0`}>
+                        <Icon className="w-7 h-7 text-white" />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h3 className="text-lg font-bold text-neutral-800">{service.title}</h3>
+                          <Badge variant={service.id === 'insurance' ? 'secondary' : service.id === 'medical' ? 'warning' : 'purple'} size="sm">
+                            {service.badge}
+                          </Badge>
+                        </div>
+                        <p className="text-neutral-500 text-sm mb-3">{service.description}</p>
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <span className="font-bold text-neutral-800">{service.stats.main}</span>
+                            <span className="text-sm text-neutral-500 ml-2">{service.stats.sub}</span>
+                          </div>
+                          <div className="flex items-center text-secondary-600 font-medium text-sm">
+                            <span>立即体验</span>
+                            <ChevronRight className="w-4 h-4 ml-1" />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+
+            {/* Quick Actions */}
+            <div>
+              <h2 className="text-lg font-bold text-neutral-800 mb-4">快捷服务</h2>
+              <div className="grid grid-cols-3 gap-3">
+                {quickActions.map((action, index) => {
+                  const Icon = action.icon;
+                  return (
+                    <Card
+                      key={index}
+                      variant="default"
+                      padding="md"
+                      hover
+                      onClick={() => {
+                        if (action.title === '理赔申请') onNavigate?.('insurance');
+                        else if (action.title === '预约兽医' || action.title === 'AI咨询') onNavigate?.('medical');
+                        else if (action.title === '训练课程') onNavigate?.('training');
+                      }}
+                    >
+                      <div className={`w-10 h-10 ${action.color} rounded-xl flex items-center justify-center mb-2`}>
+                        <Icon className={`w-5 h-5 ${action.textColor}`} />
+                      </div>
+                      <h4 className="font-semibold text-neutral-800 text-sm">{action.title}</h4>
+                      <p className="text-neutral-500 text-xs">{action.desc}</p>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Recent Activities */}
+            {getRecentActivities().length > 0 && (
+              <div>
+                <h2 className="text-lg font-bold text-neutral-800 mb-4">最近活动</h2>
+                <div className="space-y-3">
+                  {getRecentActivities().map((activity, index) => {
+                    const Icon = activity.icon;
+                    return (
+                      <Card key={index} variant="default" padding="md" hover>
+                        <div className="flex items-center gap-3">
+                          <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${getActivityColor(activity.color)}`}>
+                            <Icon className="w-5 h-5" />
+                          </div>
+                          <div className="flex-1">
+                            <h4 className="font-medium text-neutral-800">{activity.title}</h4>
+                            <p className="text-sm text-neutral-500">{activity.description}</p>
+                          </div>
+                          <span className="text-xs text-neutral-400">
+                            {activity.date.toLocaleDateString()}
+                          </span>
+                        </div>
+                      </Card>
+                    );
+                  })}
                 </div>
-                <div className="flex-1">
-                  <div className="flex items-center gap-2 mb-1">
-                    <h3 className="text-lg font-bold text-neutral-800">{service.title}</h3>
-                    <span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${service.bg} ${service.text}`}>
-                      {service.badge}
-                    </span>
+              </div>
+            )}
+
+            {/* Features */}
+            <Card variant="gradient" padding="lg">
+              <div className="flex items-center gap-2 mb-4">
+                <Sparkles className="w-5 h-5 text-secondary-500" />
+                <h3 className="font-bold text-neutral-800">为什么选择我们</h3>
+              </div>
+              <div className="space-y-3">
+                {[
+                  { icon: Zap, text: '24/7 全天候在线服务' },
+                  { icon: Heart, text: '专业兽医团队支持' },
+                  { icon: TrendingUp, text: '快速理赔流程' },
+                  { icon: Star, text: '个性化健康方案' }
+                ].map((feature, index) => (
+                  <div key={index} className="flex items-center gap-3 p-2 bg-white/50 rounded-lg">
+                    <feature.icon className="w-4 h-4 text-secondary-500" />
+                    <span className="text-neutral-700 text-sm">{feature.text}</span>
                   </div>
-                  <p className="text-neutral-500 text-sm mb-3">{service.description}</p>
-                  <div className="flex items-center text-secondary-600 font-medium text-sm">
-                    <span>立即体验</span>
-                    <ChevronRight className="w-4 h-4 ml-1" />
+                ))}
+              </div>
+            </Card>
+
+            {/* Pending Items Alert */}
+            {(pendingClaims > 0 || upcomingAppointments > 0) && (
+              <Card variant="outlined" padding="md">
+                <div className="flex items-center gap-3">
+                  <AlertCircle className="w-5 h-5 text-warning-500" />
+                  <div className="flex-1">
+                    <h4 className="font-medium text-neutral-800">待处理事项</h4>
+                    <p className="text-sm text-neutral-500">
+                      {pendingClaims > 0 && `${pendingClaims}个理赔待审核`}
+                      {pendingClaims > 0 && upcomingAppointments > 0 && ' · '}
+                      {upcomingAppointments > 0 && `${upcomingAppointments}个预约待赴诊`}
+                    </p>
                   </div>
+                  <Button variant="outline" size="sm" onClick={() => setActiveTab('insurance')}>
+                    查看
+                  </Button>
+                </div>
+              </Card>
+            )}
+          </div>
+        )}
+
+        {/* Medical Tab */}
+        {activeTab === 'medical' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">医疗服务</h2>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => onNavigate?.('medical')}
+                icon={<ChevronRight className="w-4 h-4" />}
+              >
+                进入
+              </Button>
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-3">
+              <Card variant="gradient" padding="md">
+                <MessageSquare className="w-5 h-5 text-warning-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{consultations.length}</div>
+                <div className="text-sm text-neutral-500">AI咨询</div>
+              </Card>
+              <Card variant="gradient" padding="md">
+                <Calendar className="w-5 h-5 text-secondary-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{appointments.length}</div>
+                <div className="text-sm text-neutral-500">预约次数</div>
+              </Card>
+              <Card variant="gradient" padding="md">
+                <FileText className="w-5 h-5 text-primary-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{medicalRecords.length}</div>
+                <div className="text-sm text-neutral-500">医疗档案</div>
+              </Card>
+            </div>
+
+            {/* Upcoming Appointments */}
+            {upcomingAppointments > 0 && (
+              <div>
+                <h3 className="font-medium text-neutral-700 mb-3">即将赴诊</h3>
+                <div className="space-y-2">
+                  {appointments.filter(a => a.status === 'scheduled').slice(0, 3).map((appointment) => (
+                    <Card key={appointment.id} variant="default" padding="sm" hover>
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 bg-warning-100 rounded-lg flex items-center justify-center">
+                          <Calendar className="w-4 h-4 text-warning-600" />
+                        </div>
+                        <div className="flex-1">
+                          <h4 className="font-medium text-neutral-800">{appointment.purpose}</h4>
+                          <p className="text-xs text-neutral-500">{appointment.date.toLocaleDateString()} {appointment.time}</p>
+                        </div>
+                        <Badge variant="warning" size="sm">待赴诊</Badge>
+                      </div>
+                    </Card>
+                  ))}
                 </div>
               </div>
-            </button>
-          );
-        })}
-      </div>
+            )}
+
+            {/* Quick Actions */}
+            <div className="grid grid-cols-2 gap-3">
+              <Button
+                variant="outline"
+                size="lg"
+                fullWidth
+                onClick={() => onNavigate?.('medical')}
+                icon={<MessageSquare className="w-5 h-5" />}
+              >
+                AI咨询
+              </Button>
+              <Button
+                variant="primary"
+                size="lg"
+                fullWidth
+                onClick={() => onNavigate?.('medical')}
+                icon={<Calendar className="w-5 h-5" />}
+              >
+                预约兽医
+              </Button>
+            </div>
+          </div>
+        )}
 
-      {/* Quick Actions */}
-      <div className="px-4 max-w-md mx-auto">
-        <h2 className="text-lg font-bold text-neutral-800 mb-4">快捷服务</h2>
-        <div className="grid grid-cols-2 gap-3">
-          {quickActions.map((action, index) => {
-            const Icon = action.icon;
-            return (
-              <button
-                key={index}
-                className="bg-white rounded-2xl p-4 shadow-sm border border-neutral-100 text-left hover:bg-neutral-50 transition-all"
+        {/* Insurance Tab */}
+        {activeTab === 'insurance' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">保险服务</h2>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => onNavigate?.('insurance')}
+                icon={<ChevronRight className="w-4 h-4" />}
               >
-                <div className={`w-10 h-10 bg-neutral-100 rounded-xl flex items-center justify-center mb-2`}>
-                  <Icon className="w-5 h-5 text-neutral-600" />
+                进入
+              </Button>
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-3">
+              <Card variant="gradient" padding="md">
+                <Shield className="w-5 h-5 text-secondary-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{activePolicies}</div>
+                <div className="text-sm text-neutral-500">有效保单</div>
+              </Card>
+              <Card variant="gradient" padding="md">
+                <FileText className="w-5 h-5 text-warning-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{claims.length}</div>
+                <div className="text-sm text-neutral-500">理赔申请</div>
+              </Card>
+              <Card variant="gradient" padding="md">
+                <Activity className="w-5 h-5 text-success-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">¥{totalCoverage.toLocaleString()}</div>
+                <div className="text-sm text-neutral-500">保障总额</div>
+              </Card>
+            </div>
+
+            {/* Active Policies */}
+            {policies.filter(p => p.status === 'active').length > 0 && (
+              <div>
+                <h3 className="font-medium text-neutral-700 mb-3">有效保单</h3>
+                <div className="space-y-2">
+                  {policies.filter(p => p.status === 'active').slice(0, 2).map((policy) => (
+                    <Card key={policy.id} variant="default" padding="sm" hover>
+                      <div className="flex items-center gap-3">
+                        <div className="w-8 h-8 bg-secondary-100 rounded-lg flex items-center justify-center">
+                          <Shield className="w-4 h-4 text-secondary-600" />
+                        </div>
+                        <div className="flex-1">
+                          <h4 className="font-medium text-neutral-800">{policy.planName}</h4>
+                          <p className="text-xs text-neutral-500">{policy.petName} · ¥{policy.premium}/月</p>
+                        </div>
+                        <Badge variant="success" size="sm">有效</Badge>
+                      </div>
+                    </Card>
+                  ))}
                 </div>
-                <h4 className="font-semibold text-neutral-800 text-sm">{action.title}</h4>
-                <p className="text-neutral-500 text-xs">{action.desc}</p>
-              </button>
-            );
-          })}
-        </div>
-      </div>
+              </div>
+            )}
+
+            {/* Pending Claims */}
+            {pendingClaims > 0 && (
+              <Card variant="outlined" padding="md">
+                <div className="flex items-center gap-3">
+                  <Clock className="w-5 h-5 text-warning-500" />
+                  <div className="flex-1">
+                    <h4 className="font-medium text-neutral-800">理赔审核中</h4>
+                    <p className="text-sm text-neutral-500">{pendingClaims}个理赔申请正在审核</p>
+                  </div>
+                  <Badge variant="warning" size="md">{pendingClaims}</Badge>
+                </div>
+              </Card>
+            )}
 
-      {/* Features */}
-      <div className="px-4 py-6 max-w-md mx-auto">
-        <div className="bg-gradient-to-br from-primary-50 to-secondary-50 rounded-2xl p-6 border border-primary-100">
-          <div className="flex items-center gap-2 mb-4">
-            <Sparkles className="w-5 h-5 text-primary-500" />
-            <h3 className="font-bold text-neutral-800">为什么选择我们</h3>
+            {/* Quick Actions */}
+            <div className="grid grid-cols-2 gap-3">
+              <Button
+                variant="outline"
+                size="lg"
+                fullWidth
+                onClick={() => onNavigate?.('insurance')}
+                icon={<FileText className="w-5 h-5" />}
+              >
+                申请理赔
+              </Button>
+              <Button
+                variant="primary"
+                size="lg"
+                fullWidth
+                onClick={() => onNavigate?.('insurance')}
+                icon={<Shield className="w-5 h-5" />}
+              >
+                新投保
+              </Button>
+            </div>
           </div>
-          <div className="space-y-3">
-            {[
-              '24/7 全天候在线服务',
-              '专业兽医团队支持',
-              '快速理赔流程',
-              '个性化健康方案'
-            ].map((feature, index) => (
-              <div key={index} className="flex items-center gap-2">
-                <div className="w-2 h-2 bg-primary-400 rounded-full" />
-                <span className="text-neutral-600 text-sm">{feature}</span>
+        )}
+
+        {/* Training Tab */}
+        {activeTab === 'training' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">训练服务</h2>
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => onNavigate?.('training')}
+                icon={<ChevronRight className="w-4 h-4" />}
+              >
+                进入
+              </Button>
+            </div>
+
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-3">
+              <Card variant="gradient" padding="md">
+                <Clock className="w-5 h-5 text-purple-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{totalTrainingTime}</div>
+                <div className="text-sm text-neutral-500">训练分钟</div>
+              </Card>
+              <Card variant="gradient" padding="md">
+                <GraduationCap className="w-5 h-5 text-success-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{completedCourses}</div>
+                <div className="text-sm text-neutral-500">完成课程</div>
+              </Card>
+              <Card variant="gradient" padding="md">
+                <Award className="w-5 h-5 text-warning-500 mb-2" />
+                <div className="text-2xl font-bold text-neutral-800">{totalPointsEarned}</div>
+                <div className="text-sm text-neutral-500">获得积分</div>
+              </Card>
+            </div>
+
+            {/* In Progress Courses */}
+            {courses.filter(c => c.progress > 0 && c.progress < 100).length > 0 && (
+              <div>
+                <h3 className="font-medium text-neutral-700 mb-3">进行中的课程</h3>
+                <div className="space-y-2">
+                  {courses.filter(c => c.progress > 0 && c.progress < 100).slice(0, 2).map((course) => (
+                    <Card key={course.id} variant="default" padding="sm" hover onClick={() => onNavigate?.('training')}>
+                      <div className="flex items-center gap-3">
+                        <ProgressRing progress={course.progress} size={40} strokeWidth={3} color="#8B5CF6" />
+                        <div className="flex-1">
+                          <h4 className="font-medium text-neutral-800">{course.title}</h4>
+                          <p className="text-xs text-neutral-500">{course.completedSteps}/{course.totalSteps} 步骤</p>
+                        </div>
+                        <Button variant="ghost" size="sm" icon={<Play className="w-4 h-4" />}>
+                          继续
+                        </Button>
+                      </div>
+                    </Card>
+                  ))}
+                </div>
               </div>
-            ))}
+            )}
+
+            {/* Streak */}
+            {streakDays > 0 && (
+              <Card variant="gradient" padding="md">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+                    <Star className="w-5 h-5 text-purple-600" />
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="font-medium text-neutral-800">连续训练 {streakDays} 天</h4>
+                    <p className="text-sm text-neutral-500">继续保持，解锁更多成就</p>
+                  </div>
+                  <Badge variant="purple" size="md">🔥 {streakDays}</Badge>
+                </div>
+              </Card>
+            )}
+
+            {/* Quick Actions */}
+            <div className="grid grid-cols-2 gap-3">
+              <Button
+                variant="outline"
+                size="lg"
+                fullWidth
+                onClick={() => onNavigate?.('training')}
+                icon={<GraduationCap className="w-5 h-5" />}
+              >
+                查看课程
+              </Button>
+              <Button
+                variant="primary"
+                size="lg"
+                fullWidth
+                onClick={() => onNavigate?.('training')}
+                icon={<Play className="w-5 h-5" />}
+              >
+                开始训练
+              </Button>
+            </div>
           </div>
-        </div>
+        )}
+      </div>
+
+      {/* Help Section */}
+      <div className="px-4 mt-6" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+        <Card variant="outlined" padding="md">
+          <div className="flex items-center gap-3">
+            <Phone className="w-5 h-5 text-neutral-400" />
+            <div className="flex-1">
+              <h4 className="font-medium text-neutral-800">需要帮助?</h4>
+              <p className="text-sm text-neutral-500">联系客服获取专业指导</p>
+            </div>
+            <Button variant="ghost" size="sm" icon={<ChevronRight className="w-4 h-4" />}>
+              联系
+            </Button>
+          </div>
+        </Card>
       </div>
 
       <div className="h-8" />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/TrainingPage.tsx b/src/pages/TrainingPage.tsx
index e571b543..cfe0f068 100644
--- a/src/pages/TrainingPage.tsx
+++ b/src/pages/TrainingPage.tsx
@@ -3,31 +3,150 @@
 //
 // 作者: 带娃的小陈工
 // 日期: 2026-05-26
-// 描述: 宠物训练页面
+// 描述: 宠物训练页面 - 完整功能实现
 // ============================================
 
-import { useState } from 'react';
-import { GraduationCap, Play, CheckCircle, Clock, Award, ChevronRight, Star, Lock } from 'lucide-react';
+import { useState, useRef } from 'react';
+import { GraduationCap, Play, CheckCircle, Clock, Award, ChevronRight, Star, Lock, Trophy, Target, Zap, BookOpen, Pause, RotateCcw, X, ArrowLeft, Flame, Heart } from 'lucide-react';
 import { useTrainingStore } from '../store/trainingStore';
 import { useBondStore } from '../store/bondStore';
+import { usePetStore } from '../store/petStore';
+import { Card, Button, Badge, GlassModal, ProgressRing } from '../components/DesignSystem';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
 
 export default function TrainingPage() {
-  const { courses, totalTrainingTime, streakDays, startSession } = useTrainingStore();
+  const { courses, currentSession, trainingRecords, totalTrainingTime, streakDays, startSession, completeStep, endSession, updateCourseProgress } = useTrainingStore();
   const { addDailyActivity, unlockBadge } = useBondStore();
+  const { pets, selectedPetId } = usePetStore();
+  const responsive = useResponsiveStyle();
+  
   const [activeCategory, setActiveCategory] = useState<'all' | 'basic' | 'behavior' | 'trick' | 'social'>('all');
+  const [selectedCourse, setSelectedCourse] = useState<string | null>(null);
+  const [showTrainingModal, setShowTrainingModal] = useState(false);
+  const [showRecordsModal, setShowRecordsModal] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [trainingNotes, setTrainingNotes] = useState('');
+  const [isTraining, setIsTraining] = useState(false);
+  const [trainingTimer, setTrainingTimer] = useState(0);
+  const [activeTab, setActiveTab] = useState<'courses' | 'records' | 'achievements'>('courses');
+  const trainingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const selectedPet = pets.find(p => p.id === selectedPetId);
 
   const filteredCourses = activeCategory === 'all' 
     ? courses 
     : courses.filter(course => course.category === activeCategory);
 
+  const selectedCourseData = courses.find(c => c.id === selectedCourse);
+
+  // 计算成就统计
+  const totalCompletedCourses = (courses || []).filter(c => c?.progress === 100).length;
+  const totalPointsEarned = (trainingRecords || []).reduce((sum, r) => sum + (r?.success ? 50 : 0), 0);
+  const averageSuccessRate = (trainingRecords || []).length > 0 
+    ? Math.round(((trainingRecords || []).filter(r => r?.success).length / (trainingRecords || []).length) * 100)
+    : 0;
+
   const handleStartCourse = (courseId: string) => {
-    startSession(courseId);
+    if (courses.find(c => c.id === courseId)?.isPremium) {
+      return;
+    }
+    
+    setSelectedCourse(courseId);
+    setShowTrainingModal(true);
+    setCurrentStep(0);
+    setTrainingNotes('');
+    setTrainingTimer(0);
+    setIsTraining(false);
+  };
+
+  const handleBeginTraining = () => {
+    if (!selectedCourse) return;
+    
+    startSession(selectedCourse);
+    setIsTraining(true);
+    
+    // 模拟计时器
+    trainingIntervalRef.current = setInterval(() => {
+      setTrainingTimer(prev => prev + 1);
+    }, 1000);
+  };
+
+  const handleCompleteStep = () => {
+    if (!selectedCourse || !selectedCourseData) return;
+    
+    const newStep = currentStep + 1;
+    setCurrentStep(newStep);
+    
+    completeStep(`step-${newStep}`);
+    updateCourseProgress(selectedCourse, Math.min(newStep, selectedCourseData.totalSteps));
+    
+    // 添加积分
     addDailyActivity({
       type: 'training',
-      description: '开始训练课程',
+      description: `完成训练步骤 ${newStep}`,
       points: 10
     });
+    
+    // 检查是否完成所有步骤
+    if (newStep >= selectedCourseData.totalSteps) {
+      handleFinishTraining();
+    }
+  };
+
+  const handlePauseTraining = () => {
+    setIsTraining(false);
+    if (trainingIntervalRef.current) {
+      clearInterval(trainingIntervalRef.current);
+      trainingIntervalRef.current = null;
+    }
+  };
+
+  const handleResumeTraining = () => {
+    setIsTraining(true);
+    trainingIntervalRef.current = setInterval(() => {
+      setTrainingTimer(prev => prev + 1);
+    }, 1000);
+  };
+
+  const handleFinishTraining = () => {
+    if (!selectedCourse) return;
+    
+    setIsTraining(false);
+    if (trainingIntervalRef.current) {
+      clearInterval(trainingIntervalRef.current);
+      trainingIntervalRef.current = null;
+    }
+    
+    endSession(trainingNotes);
+    
+    // 完成训练获得徽章
     unlockBadge('3');
+    
+    // 添加活动记录
+    addDailyActivity({
+      type: 'training',
+      description: `完成训练课程`,
+      points: 50
+    });
+    
+    setShowTrainingModal(false);
+    setSelectedCourse(null);
+  };
+
+  const handleCancelTraining = () => {
+    setIsTraining(false);
+    if (trainingIntervalRef.current) {
+      clearInterval(trainingIntervalRef.current);
+      trainingIntervalRef.current = null;
+    }
+    setShowTrainingModal(false);
+    setSelectedCourse(null);
+  };
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
   };
 
   const getCategoryLabel = (category: string) => {
@@ -42,11 +161,11 @@ export default function TrainingPage() {
 
   const getDifficultyColor = (difficulty: string) => {
     const colors: Record<string, string> = {
-      beginner: 'bg-green-100 text-green-700',
-      intermediate: 'bg-yellow-100 text-yellow-700',
-      advanced: 'bg-red-100 text-red-700'
+      beginner: 'success',
+      intermediate: 'warning',
+      advanced: 'danger'
     };
-    return colors[difficulty] || 'bg-gray-100 text-gray-700';
+    return colors[difficulty] || 'default';
   };
 
   const getDifficultyLabel = (difficulty: string) => {
@@ -58,151 +177,572 @@ export default function TrainingPage() {
     return labels[difficulty] || difficulty;
   };
 
+  // 模拟训练步骤数据
+  const getTrainingSteps = (courseId: string) => {
+    const course = courses.find(c => c.id === courseId);
+    if (!course) return [];
+    
+    const steps = [];
+    for (let i = 1; i <= course.totalSteps; i++) {
+      steps.push({
+        id: `step-${i}`,
+        title: `步骤 ${i}: ${getStepTitle(course.category, i)}`,
+        description: getStepDescription(course.category, i),
+        duration: Math.round(course.duration / course.totalSteps),
+        tips: getStepTips(course.category, i),
+        isCompleted: i <= course.completedSteps
+      });
+    }
+    return steps;
+  };
+
+  const getStepTitle = (category: string, step: number) => {
+    const titles: Record<string, Record<number, string>> = {
+      basic: { 1: '准备训练环境', 2: '建立注意力', 3: '坐下命令', 4: '握手训练', 5: '巩固练习' },
+      behavior: { 1: '识别问题行为', 2: '建立替代行为', 3: '正向强化', 4: '消除负面行为', 5: '持续训练' },
+      trick: { 1: '基础动作', 2: '动作分解', 3: '逐步练习', 4: '组合动作', 5: '流畅完成' },
+      social: { 1: '接触新环境', 2: '熟悉陌生人', 3: '与其他宠物互动', 4: '公共场所训练', 5: '巩固社交能力' }
+    };
+    return titles[category]?.[step] || `训练步骤 ${step}`;
+  };
+
+  const getStepDescription = (category: string, step: number) => {
+    const descriptions: Record<string, Record<number, string>> = {
+      basic: {
+        1: '选择安静、无干扰的环境，准备好奖励零食',
+        2: '使用声音或手势吸引宠物注意力，保持眼神接触',
+        3: '发出"坐下"命令，配合手势引导宠物坐下',
+        4: '伸出手掌，引导宠物用爪子触碰你的手',
+        5: '重复练习所有命令，增加训练难度'
+      },
+      behavior: {
+        1: '观察并记录宠物的问题行为触发因素',
+        2: '教导宠物正确的行为替代问题行为',
+        3: '使用奖励强化正确行为',
+        4: '逐步减少问题行为的发生',
+        5: '持续监控并巩固训练效果'
+      },
+      trick: {
+        1: '从简单的动作开始，如转圈或跳跃',
+        2: '将复杂动作分解为多个小步骤',
+        3: '逐步练习每个分解动作',
+        4: '将分解动作组合成完整技能',
+        5: '让宠物流畅完成整个技能'
+      },
+      social: {
+        1: '带宠物到新的环境，让它适应陌生气味和声音',
+        2: '让宠物接触友善的陌生人，建立信任',
+        3: '安排与其他友善宠物互动的机会',
+        4: '带宠物到公园等公共场所练习',
+        5: '在各种环境下巩固社交能力'
+      }
+    };
+    return descriptions[category]?.[step] || '完成训练步骤';
+  };
+
+  const getStepTips = (category: string, step: number): string[] => {
+    return [
+      '保持耐心，不要急躁',
+      '使用正向强化方法',
+      '每次训练时间不宜过长',
+      '及时给予奖励和表扬'
+    ];
+  };
+
   return (
     <div className="min-h-screen bg-neutral-50 pb-24">
       {/* Header */}
-      <div className="bg-gradient-to-br from-purple-500 to-purple-600 text-white px-6 py-8">
-        <div className="max-w-md mx-auto">
+      <div className="bg-gradient-to-br from-purple-500 to-purple-600 text-white px-6 py-8" style={{ paddingTop: responsive.safeAreaPadding.paddingTop + 32 }}>
+        <div style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
           <h1 className="text-2xl font-bold mb-2">宠物训练</h1>
           <p className="text-purple-100 mb-6">AI 个性化训练，让您的爱宠更聪明</p>
           
           {/* Stats Cards */}
           <div className="grid grid-cols-2 gap-4">
-            <div className="bg-white/20 backdrop-blur rounded-2xl p-4">
+            <Card variant="gradient" padding="md" className="bg-white/20 backdrop-blur border-0">
               <div className="flex items-center gap-2 mb-1">
                 <Clock className="w-5 h-5" />
                 <span className="text-sm">训练时长</span>
               </div>
               <div className="text-2xl font-bold">{totalTrainingTime} 分钟</div>
-            </div>
-            <div className="bg-white/20 backdrop-blur rounded-2xl p-4">
+            </Card>
+            <Card variant="gradient" padding="md" className="bg-white/20 backdrop-blur border-0">
               <div className="flex items-center gap-2 mb-1">
-                <Award className="w-5 h-5" />
+                <Flame className="w-5 h-5" />
                 <span className="text-sm">连续训练</span>
               </div>
               <div className="text-2xl font-bold">{streakDays} 天</div>
+            </Card>
+          </div>
+          
+          {/* Achievement Stats */}
+          <div className="grid grid-cols-3 gap-3 mt-4">
+            <div className="bg-white/15 backdrop-blur rounded-xl p-3 text-center">
+              <Trophy className="w-5 h-5 mx-auto mb-1" />
+              <div className="text-sm">完成课程</div>
+              <div className="text-lg font-bold">{totalCompletedCourses}</div>
+            </div>
+            <div className="bg-white/15 backdrop-blur rounded-xl p-3 text-center">
+              <Star className="w-5 h-5 mx-auto mb-1" />
+              <div className="text-sm">获得积分</div>
+              <div className="text-lg font-bold">{totalPointsEarned}</div>
+            </div>
+            <div className="bg-white/15 backdrop-blur rounded-xl p-3 text-center">
+              <Target className="w-5 h-5 mx-auto mb-1" />
+              <div className="text-sm">成功率</div>
+              <div className="text-lg font-bold">{averageSuccessRate}%</div>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Category Filter */}
-      <div className="px-4 py-4 overflow-x-auto">
-        <div className="flex gap-2 max-w-md mx-auto">
-          {(['all', 'basic', 'behavior', 'trick', 'social'] as const).map((category) => (
+      {/* Tabs */}
+      <div className="px-4 py-4 sticky top-0 bg-neutral-50 z-10">
+        <div className="flex gap-2" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+          {(['courses', 'records', 'achievements'] as const).map((tab) => (
             <button
-              key={category}
-              onClick={() => setActiveCategory(category)}
-              className={`px-4 py-2 rounded-full whitespace-nowrap text-sm font-medium transition-all ${
-                activeCategory === category
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                activeTab === tab
                   ? 'bg-purple-500 text-white shadow-lg'
                   : 'bg-white text-neutral-600 hover:bg-neutral-100'
               }`}
             >
-              {category === 'all' ? '全部' : getCategoryLabel(category)}
+              {tab === 'courses' ? '训练课程' : tab === 'records' ? '训练记录' : '成就'}
             </button>
           ))}
         </div>
       </div>
 
-      {/* Course List */}
-      <div className="px-4 max-w-md mx-auto space-y-4">
-        {filteredCourses.map((course) => (
-          <div
-            key={course.id}
-            className="bg-white rounded-2xl shadow-sm border border-neutral-100 overflow-hidden animate-fade-in"
-          >
-            {/* Course Header */}
-            <div className="p-4">
-              <div className="flex items-start justify-between mb-3">
-                <div className="flex-1">
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getDifficultyColor(course.difficulty)}`}>
-                      {getDifficultyLabel(course.difficulty)}
-                    </span>
-                    {course.isPremium && (
-                      <span className="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 flex items-center gap-1">
-                        <Star className="w-3 h-3" />
-                        会员
-                      </span>
-                    )}
+      {/* Content */}
+      <div className="px-4" style={{ maxWidth: responsive.contentMaxWidth, margin: '0 auto' }}>
+        {/* Courses Tab */}
+        {activeTab === 'courses' && (
+          <div className="space-y-4">
+            {/* Category Filter */}
+            <div className="flex gap-2 overflow-x-auto pb-2">
+              {(['all', 'basic', 'behavior', 'trick', 'social'] as const).map((category) => (
+                <button
+                  key={category}
+                  onClick={() => setActiveCategory(category)}
+                  className={`px-4 py-2 rounded-full whitespace-nowrap text-sm font-medium transition-all ${
+                    activeCategory === category
+                      ? 'bg-purple-500 text-white shadow-lg'
+                      : 'bg-white text-neutral-600 hover:bg-neutral-100'
+                  }`}
+                >
+                  {category === 'all' ? '全部' : getCategoryLabel(category)}
+                </button>
+              ))}
+            </div>
+
+            {/* Course List */}
+            <div className="space-y-4">
+              {filteredCourses.map((course) => (
+                <Card
+                  key={course.id}
+                  variant="default"
+                  padding="lg"
+                  hover
+                  onClick={() => handleStartCourse(course.id)}
+                  enableGlow={course.progress === 100}
+                >
+                  {/* Course Header */}
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-2">
+                        <Badge variant={getDifficultyColor(course.difficulty) as any} size="sm">
+                          {getDifficultyLabel(course.difficulty)}
+                        </Badge>
+                        {course.isPremium && (
+                          <Badge variant="warning" size="sm">
+                            <Star className="w-3 h-3 mr-1" />
+                            会员
+                          </Badge>
+                        )}
+                        {course.progress === 100 && (
+                          <Badge variant="success" size="sm">
+                            <CheckCircle className="w-3 h-3 mr-1" />
+                            已完成
+                          </Badge>
+                        )}
+                      </div>
+                      <h3 className="text-lg font-bold text-neutral-800 mb-1">{course.title}</h3>
+                      <p className="text-neutral-500 text-sm mb-3">{course.description}</p>
+                    </div>
+                    <div className="ml-4">
+                      {course.progress > 0 && course.progress < 100 ? (
+                        <ProgressRing progress={course.progress} size={48} strokeWidth={4} />
+                      ) : (
+                        <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-500 rounded-2xl flex items-center justify-center">
+                          <GraduationCap className="w-6 h-6 text-white" />
+                        </div>
+                      )}
+                    </div>
                   </div>
-                  <h3 className="text-lg font-bold text-neutral-800 mb-1">{course.title}</h3>
-                  <p className="text-neutral-500 text-sm mb-3">{course.description}</p>
-                </div>
-                <div className="ml-4">
-                  <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-500 rounded-2xl flex items-center justify-center">
-                    <GraduationCap className="w-6 h-6 text-white" />
+
+                  {/* Progress Bar */}
+                  {course.progress > 0 && course.progress < 100 && (
+                    <div className="mb-3">
+                      <div className="flex justify-between text-sm mb-1">
+                        <span className="text-neutral-600">进度</span>
+                        <span className="font-medium text-purple-600">{course.progress}%</span>
+                      </div>
+                      <div className="h-2 bg-neutral-100 rounded-full overflow-hidden">
+                        <div 
+                          className="h-full bg-gradient-to-r from-purple-500 to-purple-400 transition-all duration-500"
+                          style={{ width: `${course.progress}%` }}
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Course Info */}
+                  <div className="flex items-center gap-4 text-sm text-neutral-500 mb-4">
+                    <div className="flex items-center gap-1">
+                      <Clock className="w-4 h-4" />
+                      {course.duration} 分钟
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <BookOpen className="w-4 h-4" />
+                      {course.completedSteps}/{course.totalSteps} 步骤
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Award className="w-4 h-4" />
+                      +{course.rewardPoints} 积分
+                    </div>
                   </div>
+
+                  {/* Action Button */}
+                  <Button
+                    variant={course.isPremium ? 'ghost' : 'primary'}
+                    size="md"
+                    fullWidth
+                    disabled={course.isPremium}
+                    icon={course.isPremium ? <Lock className="w-4 h-4" /> : course.progress > 0 ? <Play className="w-4 h-4" /> : <GraduationCap className="w-4 h-4" />}
+                  >
+                    {course.isPremium ? '会员专享' : course.progress > 0 ? '继续训练' : '开始训练'}
+                  </Button>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Records Tab */}
+        {activeTab === 'records' && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-bold text-neutral-800">训练记录</h2>
+              <Badge variant="purple" size="md">
+                {trainingRecords.length} 条记录
+              </Badge>
+            </div>
+
+            {trainingRecords.length === 0 ? (
+              <Card variant="outlined" padding="lg">
+                <div className="text-center py-8">
+                  <Clock className="w-12 h-12 text-neutral-300 mx-auto mb-3" />
+                  <p className="text-neutral-500">暂无训练记录</p>
+                  <p className="text-neutral-400 text-sm mt-2">开始训练后，记录将自动保存</p>
                 </div>
+              </Card>
+            ) : (
+              <div className="space-y-3">
+                {trainingRecords.map((record) => (
+                  <Card key={record.id} variant="default" padding="md" hover>
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex items-center gap-3">
+                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
+                          record.success ? 'bg-success-100' : 'bg-warning-100'
+                        }`}>
+                          {record.success ? (
+                            <CheckCircle className="w-5 h-5 text-success-600" />
+                          ) : (
+                            <Clock className="w-5 h-5 text-warning-600" />
+                          )}
+                        </div>
+                        <div>
+                          <h3 className="font-bold text-neutral-800">{record.courseTitle}</h3>
+                          <p className="text-sm text-neutral-500">{record.date.toLocaleDateString()}</p>
+                        </div>
+                      </div>
+                      <Badge variant={record.success ? 'success' : 'warning'} size="sm">
+                        {record.success ? '成功' : '进行中'}
+                      </Badge>
+                    </div>
+                    
+                    <div className="flex items-center gap-4 text-sm text-neutral-600">
+                      <div className="flex items-center gap-1">
+                        <Clock className="w-4 h-4" />
+                        {record.duration} 分钟
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Award className="w-4 h-4" />
+                        +{record.success ? 50 : 10} 积分
+                      </div>
+                    </div>
+                    
+                    {record.notes && (
+                      <p className="text-sm text-neutral-500 mt-2 p-2 bg-neutral-50 rounded-lg">
+                        {record.notes}
+                      </p>
+                    )}
+                  </Card>
+                ))}
               </div>
+            )}
+          </div>
+        )}
 
-              {/* Progress Bar */}
-              {course.progress > 0 && (
-                <div className="mb-3">
-                  <div className="flex justify-between text-sm mb-1">
-                    <span className="text-neutral-600">进度</span>
-                    <span className="font-medium text-purple-600">{course.progress}%</span>
+        {/* Achievements Tab */}
+        {activeTab === 'achievements' && (
+          <div className="space-y-4">
+            {/* Achievement Summary */}
+            <Card variant="gradient" padding="lg">
+              <div className="text-center">
+                <Trophy className="w-12 h-12 text-purple-500 mx-auto mb-3" />
+                <h3 className="text-lg font-bold text-neutral-800 mb-2">训练成就</h3>
+                <p className="text-neutral-500 text-sm">继续训练，解锁更多成就徽章</p>
+                
+                <div className="grid grid-cols-3 gap-4 mt-6">
+                  <div className="text-center">
+                    <ProgressRing progress={Math.min(totalCompletedCourses * 20, 100)} size={64} strokeWidth={6} color="#8B5CF6" />
+                    <p className="text-sm text-neutral-600 mt-2">课程大师</p>
+                    <p className="text-xs text-neutral-400">{totalCompletedCourses}/5</p>
                   </div>
-                  <div className="h-2 bg-neutral-100 rounded-full overflow-hidden">
-                    <div 
-                      className="h-full bg-gradient-to-r from-purple-500 to-purple-400 transition-all duration-500"
-                      style={{ width: `${course.progress}%` }}
-                    />
+                  <div className="text-center">
+                    <ProgressRing progress={Math.min(streakDays * 10, 100)} size={64} strokeWidth={6} color="#F59E0B" />
+                    <p className="text-sm text-neutral-600 mt-2">坚持不懈</p>
+                    <p className="text-xs text-neutral-400">{streakDays}/10天</p>
+                  </div>
+                  <div className="text-center">
+                    <ProgressRing progress={Math.min(totalPointsEarned / 10, 100)} size={64} strokeWidth={6} color="#10B981" />
+                    <p className="text-sm text-neutral-600 mt-2">积分达人</p>
+                    <p className="text-xs text-neutral-400">{totalPointsEarned}/1000</p>
                   </div>
                 </div>
-              )}
+              </div>
+            </Card>
+
+            {/* Achievement List */}
+            <div className="space-y-3">
+              {[
+                { id: 1, title: '初学者', desc: '完成第一个训练课程', icon: GraduationCap, unlocked: totalCompletedCourses >= 1, progress: Math.min(totalCompletedCourses, 1) },
+                { id: 2, title: '训练达人', desc: '完成5个训练课程', icon: Trophy, unlocked: totalCompletedCourses >= 5, progress: Math.min(totalCompletedCourses, 5) },
+                { id: 3, title: '坚持不懈', desc: '连续训练10天', icon: Flame, unlocked: streakDays >= 10, progress: Math.min(streakDays, 10) },
+                { id: 4, title: '积分大师', desc: '获得1000积分', icon: Star, unlocked: totalPointsEarned >= 1000, progress: Math.min(Math.round(totalPointsEarned / 200), 5) },
+                { id: 5, title: '完美训练', desc: '训练成功率达到90%', icon: Target, unlocked: averageSuccessRate >= 90, progress: Math.round(averageSuccessRate / 20) }
+              ].map((achievement) => {
+                const Icon = achievement.icon;
+                return (
+                  <Card key={achievement.id} variant="default" padding="md" className={!achievement.unlocked ? 'opacity-60' : ''}>
+                    <div className="flex items-center gap-4">
+                      <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                        achievement.unlocked ? 'bg-purple-100' : 'bg-neutral-100'
+                      }`}>
+                        <Icon className={`w-6 h-6 ${achievement.unlocked ? 'text-purple-600' : 'text-neutral-400'}`} />
+                      </div>
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <h4 className="font-bold text-neutral-800">{achievement.title}</h4>
+                          {achievement.unlocked && (
+                            <CheckCircle className="w-4 h-4 text-success-500" />
+                          )}
+                        </div>
+                        <p className="text-sm text-neutral-500">{achievement.desc}</p>
+                        {!achievement.unlocked && (
+                          <div className="mt-2">
+                            <div className="h-1.5 bg-neutral-100 rounded-full overflow-hidden">
+                              <div 
+                                className="h-full bg-purple-400 transition-all"
+                                style={{ width: `${(achievement.progress / 5) * 100}%` }}
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Training Modal */}
+      <GlassModal
+        isOpen={showTrainingModal}
+        onClose={handleCancelTraining}
+        title={selectedCourseData?.title || '训练课程'}
+        size="lg"
+      >
+        {selectedCourseData && (
+          <div className="space-y-4">
+            {/* Course Info */}
+            <div className="flex items-center gap-3 p-4 bg-purple-50 rounded-xl">
+              <div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
+                <GraduationCap className="w-5 h-5 text-purple-600" />
+              </div>
+              <div>
+                <h4 className="font-bold text-neutral-800">{selectedCourseData.title}</h4>
+                <p className="text-sm text-neutral-500">{selectedCourseData.description}</p>
+              </div>
+            </div>
+
+            {/* Training Timer */}
+            {isTraining && (
+              <div className="text-center p-4 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl text-white">
+                <div className="text-4xl font-bold mb-2">{formatTime(trainingTimer)}</div>
+                <p className="text-purple-100">训练进行中</p>
+              </div>
+            )}
 
-              {/* Course Info */}
-              <div className="flex items-center gap-4 text-sm text-neutral-500 mb-4">
-                <div className="flex items-center gap-1">
-                  <Clock className="w-4 h-4" />
-                  {course.duration} 分钟
+            {/* Training Steps */}
+            {!isTraining ? (
+              <div>
+                <h4 className="font-bold text-neutral-800 mb-3">训练步骤</h4>
+                <div className="space-y-2">
+                  {getTrainingSteps(selectedCourse).map((step, index) => (
+                    <div 
+                      key={step.id}
+                      className={`p-4 rounded-xl border-2 transition-all ${
+                        step.isCompleted 
+                          ? 'border-success-200 bg-success-50' 
+                          : index === currentStep 
+                            ? 'border-purple-200 bg-purple-50' 
+                            : 'border-neutral-100'
+                      }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                          step.isCompleted ? 'bg-success-100' : 'bg-neutral-100'
+                        }`}>
+                          {step.isCompleted ? (
+                            <CheckCircle className="w-4 h-4 text-success-600" />
+                          ) : (
+                            <span className="text-sm font-medium text-neutral-600">{index + 1}</span>
+                          )}
+                        </div>
+                        <div className="flex-1">
+                          <h5 className="font-medium text-neutral-800">{step.title}</h5>
+                          <p className="text-sm text-neutral-500">{step.description}</p>
+                        </div>
+                        <div className="flex items-center gap-1 text-sm text-neutral-400">
+                          <Clock className="w-4 h-4" />
+                          {step.duration}分钟
+                        </div>
+                      </div>
+                    </div>
+                  ))}
                 </div>
-                <div className="flex items-center gap-1">
-                  <CheckCircle className="w-4 h-4" />
-                  {course.completedSteps}/{course.totalSteps} 步骤
+              </div>
+            ) : (
+              <div>
+                {/* Current Step Detail */}
+                <div className="p-4 bg-purple-50 rounded-xl mb-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Zap className="w-5 h-5 text-purple-600" />
+                    <span className="font-bold text-purple-700">当前步骤</span>
+                  </div>
+                  <h4 className="font-bold text-neutral-800 mb-2">
+                    {getTrainingSteps(selectedCourse)[currentStep]?.title}
+                  </h4>
+                  <p className="text-neutral-600 mb-3">
+                    {getTrainingSteps(selectedCourse)[currentStep]?.description}
+                  </p>
+                  
+                  {/* Tips */}
+                  <div className="bg-white rounded-lg p-3">
+                    <p className="text-sm font-medium text-neutral-700 mb-2">训练提示:</p>
+                    <ul className="space-y-1">
+                      {getTrainingSteps(selectedCourse)[currentStep]?.tips.map((tip, idx) => (
+                        <li key={idx} className="flex items-start gap-2 text-sm text-neutral-600">
+                          <Heart className="w-3 h-3 text-purple-400 mt-1" />
+                          {tip}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </div>
-                <div className="flex items-center gap-1">
-                  <Award className="w-4 h-4" />
-                  +{course.rewardPoints} 积分
+
+                {/* Progress */}
+                <div className="mb-4">
+                  <div className="flex justify-between text-sm mb-2">
+                    <span className="text-neutral-600">训练进度</span>
+                    <span className="font-medium text-purple-600">{currentStep}/{selectedCourseData.totalSteps}</span>
+                  </div>
+                  <div className="h-2 bg-neutral-100 rounded-full overflow-hidden">
+                    <div 
+                      className="h-full bg-gradient-to-r from-purple-500 to-purple-400 transition-all"
+                      style={{ width: `${(currentStep / selectedCourseData.totalSteps) * 100}%` }}
+                    />
+                  </div>
                 </div>
               </div>
+            )}
+
+            {/* Notes */}
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 mb-2">训练笔记</label>
+              <textarea
+                className="w-full px-4 py-3 rounded-xl border border-neutral-200 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all resize-none"
+                placeholder="记录训练过程中的观察和心得..."
+                rows={3}
+                value={trainingNotes}
+                onChange={(e) => setTrainingNotes(e.target.value)}
+              />
+            </div>
 
-              {/* Action Button */}
-              <button
-                onClick={() => handleStartCourse(course.id)}
-                disabled={course.isPremium}
-                className={`w-full py-3 rounded-xl font-semibold flex items-center justify-center gap-2 transition-all ${
-                  course.isPremium
-                    ? 'bg-neutral-100 text-neutral-400 cursor-not-allowed'
-                    : 'bg-gradient-to-r from-purple-500 to-purple-600 text-white hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]'
-                }`}
-              >
-                {course.isPremium ? (
-                  <>
-                    <Lock className="w-5 h-5" />
-                    会员专享
-                  </>
-                ) : course.progress > 0 ? (
-                  <>
-                    <Play className="w-5 h-5" />
-                    继续训练
-                  </>
-                ) : (
-                  <>
-                    <Play className="w-5 h-5" />
+            {/* Action Buttons */}
+            <div className="flex gap-3">
+              {!isTraining ? (
+                <>
+                  <Button variant="ghost" size="lg" fullWidth onClick={handleCancelTraining}>
+                    取消
+                  </Button>
+                  <Button 
+                    variant="primary" 
+                    size="lg" 
+                    fullWidth 
+                    onClick={handleBeginTraining}
+                    icon={<Play className="w-4 h-4" />}
+                  >
                     开始训练
-                  </>
-                )}
-                <ChevronRight className="w-5 h-5" />
-              </button>
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Button variant="ghost" size="lg" onClick={handlePauseTraining}>
+                    <Pause className="w-4 h-4" />
+                  </Button>
+                  <Button 
+                    variant="outline" 
+                    size="lg" 
+                    onClick={handleCancelTraining}
+                    icon={<X className="w-4 h-4" />}
+                  >
+                    结束
+                  </Button>
+                  <Button 
+                    variant="primary" 
+                    size="lg" 
+                    fullWidth 
+                    onClick={handleCompleteStep}
+                    icon={<CheckCircle className="w-4 h-4" />}
+                  >
+                    完成步骤
+                  </Button>
+                </>
+              )}
             </div>
           </div>
-        ))}
-      </div>
+        )}
+      </GlassModal>
 
       <div className="h-8" />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/pages/TranslatorPage.tsx b/src/pages/TranslatorPage.tsx
index 04aa58fd..ebb1e084 100644
--- a/src/pages/TranslatorPage.tsx
+++ b/src/pages/TranslatorPage.tsx
@@ -9,6 +9,8 @@
 import { useState, useEffect, useRef } from 'react';
 import { Mic, Share2, RefreshCw, Sparkles, Heart, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Activity, Waves, Music2, Camera, Upload, X, History, Clock, Volume2, Radio, Drum, Palette } from 'lucide-react';
 import { useAppStore, type Analysis } from '../store/appStore';
+import { useTranslatorStore, type TranslationResult } from '../store/translatorStore';
+import { usePetStore } from '../store/petStore';
 import { Card } from '../components/ui/Card';
 import { Button } from '../components/ui/Button';
 import { Badge } from '../components/ui/Badge';
@@ -27,6 +29,7 @@ import {
   BadgeAnimation,
 } from '../components/animations';
 import { EmotionTrendChart } from '../components/EmotionTrendChart';
+import { useResponsiveStyle } from '../lib/responsiveStyle';
 
 type AppStoreEmotion = 'happy' | 'anxious' | 'angry' | 'needs' | 'neutral';
 
@@ -660,7 +663,27 @@ function AnalysisDetailPanel({ analysis }: { analysis: EmotionAnalysis }) {
 }
 
 export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: string) => void }) {
+  const responsive = useResponsiveStyle();
   const { currentPet, addAnalysis, setCurrentEmotion, analyses } = useAppStore();
+  const { currentPetId } = usePetStore();
+  const {
+    results,
+    stats,
+    currentResult,
+    isRecording: storeIsRecording,
+    isTranslating,
+    startRecording: storeStartRecording,
+    stopRecording: storeStopRecording,
+    translate,
+    setCurrentResult,
+    saveResult,
+    deleteResult,
+    getResultsByPet,
+    getRecentResults,
+    calculateStats,
+    initialize,
+  } = useTranslatorStore();
+  
   const [isRecording, setIsRecording] = useState(false);
   const [showResult, setShowResult] = useState(false);
   const [emotion, setEmotion] = useState<PrimaryEmotion>('calm');
@@ -691,6 +714,16 @@ export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: str
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const recordedBlobRef = useRef<Blob | null>(null);
 
+  // 初始化翻译器Store
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  // 获取当前宠物的翻译结果
+  const petResults = currentPetId ? getResultsByPet(currentPetId) : [];
+  const recentResults = getRecentResults(10);
+  const petStats = currentPetId ? calculateStats(currentPetId) : stats;
+
   useEffect(() => {
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
@@ -753,7 +786,24 @@ export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: str
     }
     
     try {
-      // 请求麦克风权限
+      // 使用 permissionService 检查和请求麦克风权限（支持Android原生）
+      const { permissionManager } = await import('../services/permissionService');
+      const permissionStatus = await permissionManager.checkPermission('microphone');
+      
+      if (permissionStatus.denied) {
+        setErrorMessage('麦克风权限被拒绝，请在系统设置中开启');
+        return;
+      }
+      
+      if (!permissionStatus.granted) {
+        const granted = await permissionManager.requestPermission('microphone');
+        if (!granted) {
+          setErrorMessage('无法获取麦克风权限，请手动开启');
+          return;
+        }
+      }
+      
+      // 请求麦克风权限（使用Web API，Capacitor WebView支持）
       const stream = await navigator.mediaDevices.getUserMedia({ 
         audio: {
           echoCancellation: true,
@@ -960,6 +1010,7 @@ export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: str
       setShowResult(true);
       setCurrentEmotion(mapToAppStoreEmotion(analysis.primaryEmotion));
       
+      // 保存到 useAppStore
       addAnalysis({
         petId: currentPet?.id || '',
         type: 'voice',
@@ -969,6 +1020,22 @@ export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: str
           confidence: analysis.confidence,
         },
       });
+      
+      // 同时保存到 useTranslatorStore
+      if (currentPetId) {
+        const translationResult: TranslationResult = {
+          id: `trans-${Date.now()}`,
+          petId: currentPetId,
+          audioDuration: actualRecordingDuration,
+          emotion: analysis.primaryEmotion,
+          emotionEmoji: EMOTION_CONFIGS[analysis.primaryEmotion]?.emoji || '😊',
+          translation: analysis.translation,
+          confidence: analysis.confidence,
+          suggestions: analysis.detail?.suggestions || [],
+          timestamp: new Date().toISOString(),
+        };
+        saveResult(translationResult);
+      }
     } catch (error) {
       console.error('分析失败:', error);
       setErrorMessage('语音分析失败，请重试。');
@@ -1075,6 +1142,7 @@ export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: str
       setShowResult(true);
       setCurrentEmotion(mapToAppStoreEmotion(analysis.primaryEmotion));
       
+      // 保存到 useAppStore
       addAnalysis({
         petId: currentPet?.id || '',
         type: 'image',
@@ -1084,6 +1152,22 @@ export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: str
           confidence: analysis.confidence,
         },
       });
+      
+      // 同时保存到 useTranslatorStore
+      if (currentPetId) {
+        const translationResult: TranslationResult = {
+          id: `trans-${Date.now()}`,
+          petId: currentPetId,
+          audioDuration: 0,
+          emotion: analysis.primaryEmotion,
+          emotionEmoji: EMOTION_CONFIGS[analysis.primaryEmotion]?.emoji || '😊',
+          translation: analysis.translation,
+          confidence: analysis.confidence,
+          suggestions: analysis.detail?.suggestions || [],
+          timestamp: new Date().toISOString(),
+        };
+        saveResult(translationResult);
+      }
     } catch (error) {
       console.error('图片分析失败:', error);
       setErrorMessage('图片分析失败，请重试。');
@@ -1541,45 +1625,72 @@ export default function TranslatorPage({ onNavigate }: { onNavigate?: (page: str
               </div>
             ) : (
               <div className="space-y-2 overflow-y-auto flex-1">
-                {analyses.length === 0 ? (
+                {(analyses.length === 0 && petResults.length === 0) ? (
                   <div className="text-center py-8">
                     <History className="w-12 h-12 text-gray-300 mx-auto mb-3" />
                     <p className="text-gray-500 text-sm">暂无分析记录</p>
                     <p className="text-gray-400 text-xs mt-1">开始录音或拍照分析吧</p>
                   </div>
                 ) : (
-                  analyses
+                  // 合并两个数据源并排序
+                  [...analyses
                     .filter(a => a.petId === currentPet?.id)
+                    .map(a => ({
+                      id: a.id,
+                      emotion: a.result.emotion,
+                      translation: a.result.translation,
+                      confidence: a.result.confidence,
+                      type: a.type,
+                      createdAt: a.createdAt,
+                    })),
+                  ...petResults.map(r => ({
+                    id: r.id,
+                    emotion: mapToAppStoreEmotion(r.emotion as PrimaryEmotion),
+                    translation: r.translation,
+                    confidence: r.confidence,
+                    type: r.audioDuration > 0 ? 'voice' as const : 'image' as const,
+                    createdAt: r.timestamp,
+                  }))]
                     .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
                     .slice(0, 20)
-                    .map((analysis) => (
+                    .map((item) => (
                       <button
-                        key={analysis.id}
-                        onClick={() => setSelectedHistoryItem(analysis)}
+                        key={item.id}
+                        onClick={() => setSelectedHistoryItem({
+                          id: item.id,
+                          petId: currentPet?.id || '',
+                          type: item.type,
+                          result: {
+                            emotion: item.emotion as AppStoreEmotion,
+                            translation: item.translation,
+                            confidence: item.confidence,
+                          },
+                          createdAt: item.createdAt,
+                        })}
                         className="w-full p-3 bg-gray-50 hover:bg-orange-50 rounded-xl transition-colors flex items-center gap-3"
                       >
                         <div className="text-2xl">
-                          {EMOTION_CONFIGS[analysis.result.emotion as PrimaryEmotion]?.emoji || '😊'}
+                          {EMOTION_CONFIGS[item.emotion as PrimaryEmotion]?.emoji || '😊'}
                         </div>
                         <div className="flex-1 min-w-0">
                           <p className="text-sm font-medium text-gray-700 truncate">
-                            "{analysis.result.translation}"
+                            "{item.translation}"
                           </p>
                           <div className="flex items-center gap-2 mt-1">
                             <span className="text-xs text-gray-400 flex items-center gap-1">
                               <Clock className="w-3 h-3" />
-                              {new Date(analysis.createdAt).toLocaleDateString('zh-CN')}
+                              {new Date(item.createdAt).toLocaleDateString('zh-CN')}
                             </span>
                             <span className="text-xs text-gray-400">
-                              {analysis.type === 'voice' ? '🎤' : '📷'}
+                              {item.type === 'voice' ? '🎤' : '📷'}
                             </span>
                           </div>
                         </div>
                         <div className="text-right">
                           <span className={`text-xs font-semibold ${
-                            analysis.result.confidence >= 95 ? 'text-green-500' : 'text-gray-500'
+                            item.confidence >= 95 ? 'text-green-500' : 'text-gray-500'
                           }`}>
-                            {analysis.result.confidence}%
+                            {item.confidence}%
                           </span>
                         </div>
                       </button>
diff --git a/src/pages/UserProfilePage.tsx b/src/pages/UserProfilePage.tsx
index 7e9ef210..843be4c3 100644
--- a/src/pages/UserProfilePage.tsx
+++ b/src/pages/UserProfilePage.tsx
@@ -223,4 +223,6 @@ export const UserProfilePage: React.FC<UserProfilePageProps> = ({ onNavigate })
       </main>
     </div>
   );
-};
\ No newline at end of file
+};
+
+export default UserProfilePage;
\ No newline at end of file
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 4cb7fb6a..fa1c0302 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -21,3 +21,10 @@ export { default as SettingsPage } from './SettingsPage';
 export { default as FavoritesPage } from './FavoritesPage';
 export { default as HelpFeedbackPage } from './HelpFeedbackPage';
 export { default as DeveloperInfoPage } from './DeveloperInfoPage';
+// 新增页面导出
+export { default as PetProfilePage } from './PetProfilePage';
+export { default as DevicesPage } from './DevicesPage';
+export { default as DietDataPage } from './DietDataPage';
+export { default as RecordsPage } from './RecordsPage';
+export { default as HomePage } from './HomePage';
+export { default as UserProfilePage } from './UserProfilePage';
diff --git a/src/services/cameraAdapterService.ts b/src/services/cameraAdapterService.ts
index 8dc813a6..ebcabda1 100644
--- a/src/services/cameraAdapterService.ts
+++ b/src/services/cameraAdapterService.ts
@@ -56,9 +56,9 @@ const mockOnvifDevices: ONVIFDiscoveryResult[] = [
  }
 ];
 const mockGo2rtcStreams: Go2rtcStreamConfig[] = [
- { name: 'ezviz_living', source: 'rtsp://admin:password@192.168.1.100/stream1', webrtc: true },
- { name: 'tapo_balcony', source: 'rtsp://admin:password@192.168.1.102:554/stream1', webrtc: true },
- { name: 'hikvision_garden', source: 'rtsp://admin:password@192.168.1.103:554/stream1', webrtc: true }
+ { name: 'ezviz_living', source: 'rtsp://admin:PLACEHOLDER_PASSWORD@192.168.1.100/stream1', webrtc: true },
+ { name: 'tapo_balcony', source: 'rtsp://admin:PLACEHOLDER_PASSWORD@192.168.1.102:554/stream1', webrtc: true },
+ { name: 'hikvision_garden', source: 'rtsp://admin:PLACEHOLDER_PASSWORD@192.168.1.103:554/stream1', webrtc: true }
 ];
 class CameraAdapterService {
  private accessToken: string | null = null;
@@ -76,7 +76,7 @@ class CameraAdapterService {
  model: 'CS-C6CN',
  status: 'online',
  lastActive: new Date().toISOString(),
- streamUrl: 'rtsp://admin:password@192.168.1.100/stream1',
+ streamUrl: 'rtsp://admin:PLACEHOLDER_PASSWORD@192.168.1.100/stream1',
  webrtcUrl: `${GO2RTC_BASE}/stream/webrtc?src=ezviz_living`,
  capabilities: [
  { type: 'live_stream', enabled: true },
@@ -100,7 +100,7 @@ class CameraAdapterService {
  port: 554,
  protocol: 'rtsp',
  username: 'admin',
- password: 'password',
+ password: 'PLACEHOLDER_PASSWORD',
  go2rtcId: 'ezviz_living'
  },
  {
@@ -134,7 +134,7 @@ class CameraAdapterService {
  port: 554,
  protocol: 'rtsp',
  username: 'admin',
- password: 'password',
+ password: 'PLACEHOLDER_PASSWORD',
  go2rtcId: 'tapo_balcony'
  },
  {
@@ -168,7 +168,7 @@ class CameraAdapterService {
  port: 554,
  protocol: 'rtsp',
  username: 'admin',
- password: 'password',
+ password: 'PLACEHOLDER_PASSWORD',
  go2rtcId: 'hikvision_garden'
  }
  ];
diff --git a/src/services/nativeCameraService.ts b/src/services/nativeCameraService.ts
new file mode 100644
index 00000000..143e43d6
--- /dev/null
+++ b/src/services/nativeCameraService.ts
@@ -0,0 +1,392 @@
+/**
+ * Native Camera Service - 原生相机服务
+ *
+ * 统一管理 Web 和 Android/iOS 平台的相机拍照功能
+ * 集成 Capacitor Camera API，确保跨平台一致性
+ */
+
+import { Capacitor } from '@capacitor/core';
+import type { CameraResultType, CameraSource } from '@capacitor/camera';
+
+/**
+ * 检查是否为原生平台
+ */
+const isNativePlatform = (): boolean => {
+  return Capacitor.isNativePlatform();
+};
+
+/**
+ * 获取当前平台
+ */
+const getCurrentPlatform = (): 'web' | 'android' | 'ios' => {
+  if (Capacitor.isNativePlatform()) {
+    return Capacitor.getPlatform() as 'android' | 'ios';
+  }
+  return 'web';
+};
+
+/**
+ * 照片选项
+ */
+export interface PhotoOptions {
+  quality?: number; // 0-100
+  allowEditing?: boolean;
+  resultType?: 'base64' | 'dataUrl' | 'uri';
+  source?: 'camera' | 'photos' | 'prompt';
+  saveToGallery?: boolean;
+  correctOrientation?: boolean;
+  width?: number;
+  height?: number;
+}
+
+/**
+ * 照片结果
+ */
+export interface PhotoResult {
+  base64String?: string;
+  dataUrl?: string;
+  webPath?: string;
+  format: string;
+  saved?: boolean;
+}
+
+/**
+ * 相机权限状态
+ */
+export type CameraPermissionState = 'granted' | 'denied' | 'prompt' | 'prompt-with-rationale';
+
+class NativeCameraService {
+  private lastPhoto: PhotoResult | null = null;
+  private permissionChecked: boolean = false;
+
+  /**
+   * 检查相机权限
+   */
+  async checkPermission(): Promise<CameraPermissionState> {
+    const platform = getCurrentPlatform();
+    console.log(`[NativeCamera] Checking permission for platform: ${platform}`);
+
+    try {
+      if (isNativePlatform()) {
+        const { Camera } = await import('@capacitor/camera');
+        const status = await Camera.checkPermissions();
+        const cameraState = status.camera as CameraPermissionState;
+        console.log(`[NativeCamera] Native permission status: ${cameraState}`);
+        return cameraState;
+      }
+
+      // Web 平台
+      if ('permissions' in navigator) {
+        const result = await navigator.permissions.query({ name: 'camera' });
+        console.log(`[NativeCamera] Web permission status: ${result.state}`);
+        return result.state as CameraPermissionState;
+      }
+
+      return 'prompt';
+    } catch (error) {
+      console.warn('[NativeCamera] Permission check failed:', error);
+      return 'prompt';
+    }
+  }
+
+  /**
+   * 请求相机权限
+   */
+  async requestPermission(): Promise<boolean> {
+    const platform = getCurrentPlatform();
+    console.log(`[NativeCamera] Requesting permission for platform: ${platform}`);
+
+    try {
+      if (isNativePlatform()) {
+        const { Camera } = await import('@capacitor/camera');
+        const status = await Camera.requestPermissions();
+        const granted = status.camera === 'granted';
+        console.log(`[NativeCamera] Native permission result: ${granted}`);
+        this.permissionChecked = true;
+        return granted;
+      }
+
+      // Web 平台 - 通过 getUserMedia 请求权限
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        stream.getTracks().forEach(track => track.stop());
+        console.log('[NativeCamera] Web permission granted via getUserMedia');
+        this.permissionChecked = true;
+        return true;
+      } catch (webError) {
+        console.warn('[NativeCamera] Web permission denied:', webError);
+        return false;
+      }
+    } catch (error) {
+      console.error('[NativeCamera] Permission request failed:', error);
+      return false;
+    }
+  }
+
+  /**
+   * 获取照片（支持原生平台）
+   */
+  async getPhoto(options: PhotoOptions = {}): Promise<PhotoResult | null> {
+    const platform = getCurrentPlatform();
+    console.log(`[NativeCamera] Getting photo for platform: ${platform}`, options);
+
+    // 默认选项
+    const defaultOptions: PhotoOptions = {
+      quality: 80,
+      allowEditing: false,
+      resultType: 'base64',
+      source: 'prompt',
+      saveToGallery: false,
+      correctOrientation: true,
+    };
+
+    const mergedOptions = { ...defaultOptions, ...options };
+
+    try {
+      // 检查权限
+      if (!this.permissionChecked) {
+        const permission = await this.checkPermission();
+        if (permission !== 'granted') {
+          const granted = await this.requestPermission();
+          if (!granted) {
+            console.warn('[NativeCamera] Permission not granted, cannot take photo');
+            return null;
+          }
+        }
+      }
+
+      // 原生平台使用 Capacitor Camera
+      if (isNativePlatform()) {
+        return await this.getNativePhoto(mergedOptions);
+      }
+
+      // Web 平台使用文件输入
+      return await this.getWebPhoto(mergedOptions);
+    } catch (error) {
+      console.error('[NativeCamera] Failed to get photo:', error);
+      return null;
+    }
+  }
+
+  /**
+   * 使用原生相机获取照片
+   */
+  private async getNativePhoto(options: PhotoOptions): Promise<PhotoResult | null> {
+    try {
+      const { Camera, CameraResultType, CameraSource } = await import('@capacitor/camera');
+
+      // 映射 source
+      const sourceMap: Record<string, CameraSource> = {
+        'camera': CameraSource.Camera,
+        'photos': CameraSource.Photos,
+        'prompt': CameraSource.Prompt,
+      };
+
+      // 映射 resultType
+      const resultTypeMap: Record<string, CameraResultType> = {
+        'base64': CameraResultType.Base64,
+        'dataUrl': CameraResultType.DataUrl,
+        'uri': CameraResultType.Uri,
+      };
+
+      const photo = await Camera.getPhoto({
+        quality: options.quality ?? 80,
+        allowEditing: options.allowEditing ?? false,
+        resultType: resultTypeMap[options.resultType ?? 'base64'],
+        source: sourceMap[options.source ?? 'prompt'],
+        saveToGallery: options.saveToGallery ?? false,
+        correctOrientation: options.correctOrientation ?? true,
+        width: options.width,
+        height: options.height,
+      });
+
+      console.log('[NativeCamera] Native photo captured successfully');
+
+      const result: PhotoResult = {
+        base64String: photo.base64String,
+        dataUrl: photo.dataUrl,
+        webPath: photo.webPath,
+        format: photo.format,
+        saved: photo.saved,
+      };
+
+      this.lastPhoto = result;
+      return result;
+    } catch (error) {
+      console.error('[NativeCamera] Native photo capture failed:', error);
+      return null;
+    }
+  }
+
+  /**
+   * 使用 Web 文件输入获取照片
+   */
+  private async getWebPhoto(options: PhotoOptions): Promise<PhotoResult | null> {
+    return new Promise((resolve) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+
+      // 根据 source 设置 capture
+      if (options.source === 'camera') {
+        input.capture = 'environment';
+      }
+
+      input.onchange = async (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (!file) {
+          console.warn('[NativeCamera] No file selected');
+          resolve(null);
+          return;
+        }
+
+        console.log('[NativeCamera] Web photo selected:', file.name);
+
+        try {
+          if (options.resultType === 'uri') {
+            // 返回 blob URL
+            const blobUrl = URL.createObjectURL(file);
+            const result: PhotoResult = {
+              webPath: blobUrl,
+              format: file.type.split('/')[1] || 'jpeg',
+            };
+            this.lastPhoto = result;
+            resolve(result);
+          } else {
+            // 返回 base64 或 dataUrl
+            const reader = new FileReader();
+            reader.onload = () => {
+              const dataUrl = reader.result as string;
+              const result: PhotoResult = {
+                base64String: options.resultType === 'base64' ? dataUrl.split(',')[1] : undefined,
+                dataUrl: options.resultType === 'dataUrl' ? dataUrl : undefined,
+                webPath: dataUrl,
+                format: file.type.split('/')[1] || 'jpeg',
+              };
+              this.lastPhoto = result;
+              resolve(result);
+            };
+            reader.onerror = () => {
+              console.error('[NativeCamera] FileReader error');
+              resolve(null);
+            };
+            reader.readAsDataURL(file);
+          }
+        } catch (error) {
+          console.error('[NativeCamera] Web photo processing failed:', error);
+          resolve(null);
+        }
+      };
+
+      // 触发文件选择
+      input.click();
+    });
+  }
+
+  /**
+   * 从相机直接拍照
+   */
+  async takePhoto(options: PhotoOptions = {}): Promise<PhotoResult | null> {
+    return this.getPhoto({ ...options, source: 'camera' });
+  }
+
+  /**
+   * 从相册选择照片
+   */
+  async selectPhoto(options: PhotoOptions = {}): Promise<PhotoResult | null> {
+    return this.getPhoto({ ...options, source: 'photos' });
+  }
+
+  /**
+   * 获取最后拍摄的照片
+   */
+  getLastPhoto(): PhotoResult | null {
+    return this.lastPhoto;
+  }
+
+  /**
+   * 清除最后拍摄的照片
+   */
+  clearLastPhoto(): void {
+    if (this.lastPhoto?.webPath?.startsWith('blob:')) {
+      URL.revokeObjectURL(this.lastPhoto.webPath);
+    }
+    this.lastPhoto = null;
+  }
+
+  /**
+   * 检查是否支持相机
+   */
+  async isCameraAvailable(): Promise<boolean> {
+    try {
+      if (isNativePlatform()) {
+        // 原生平台通常都有相机
+        return true;
+      }
+
+      // Web 平台检查
+      if ('mediaDevices' in navigator) {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        return devices.some(device => device.kind === 'videoinput');
+      }
+
+      return false;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * 获取平台信息
+   */
+  getPlatformInfo(): { platform: string; isNative: boolean; hasPermission: boolean } {
+    return {
+      platform: getCurrentPlatform(),
+      isNative: isNativePlatform(),
+      hasPermission: this.permissionChecked,
+    };
+  }
+}
+
+export const nativeCameraService = new NativeCameraService();
+
+/**
+ * 相机服务 Hook
+ */
+export function useNativeCamera() {
+  const checkPermission = async (): Promise<CameraPermissionState> => {
+    return nativeCameraService.checkPermission();
+  };
+
+  const requestPermission = async (): Promise<boolean> => {
+    return nativeCameraService.requestPermission();
+  };
+
+  const getPhoto = async (options?: PhotoOptions): Promise<PhotoResult | null> => {
+    return nativeCameraService.getPhoto(options);
+  };
+
+  const takePhoto = async (options?: PhotoOptions): Promise<PhotoResult | null> => {
+    return nativeCameraService.takePhoto(options);
+  };
+
+  const selectPhoto = async (options?: PhotoOptions): Promise<PhotoResult | null> => {
+    return nativeCameraService.selectPhoto(options);
+  };
+
+  const isAvailable = async (): Promise<boolean> => {
+    return nativeCameraService.isCameraAvailable();
+  };
+
+  return {
+    checkPermission,
+    requestPermission,
+    getPhoto,
+    takePhoto,
+    selectPhoto,
+    isAvailable,
+    getLastPhoto: nativeCameraService.getLastPhoto(),
+    clearLastPhoto: nativeCameraService.clearLastPhoto,
+    platformInfo: nativeCameraService.getPlatformInfo(),
+  };
+}
\ No newline at end of file
diff --git a/src/services/permissionService.ts b/src/services/permissionService.ts
index eb4a0274..02f76920 100644
--- a/src/services/permissionService.ts
+++ b/src/services/permissionService.ts
@@ -1,12 +1,18 @@
-export type PermissionType = 'camera' | 'microphone' | 'location' | 'storage' | 'notification';
+/**
+ * Permission Service - 权限管理服务
+ *
+ * 统一管理 Web 和 Android/iOS 平台的权限检查和请求
+ * 集成 Capacitor 原生权限 API，确保跨平台一致性
+ */
 
-export interface PermissionStatus {
-  type: PermissionType;
-  granted: boolean;
-  denied: boolean;
-  prompt: boolean;
-  canRequest: boolean;
-  lastChecked: Date;
+import { Capacitor } from '@capacitor/core';
+import type { PermissionType, PermissionStatus, PermissionConfig } from '../types/push';
+
+export type PermissionState = 'granted' | 'denied' | 'prompt' | 'prompt-with-rationale' | 'limited';
+
+export interface ExtendedPermissionStatus extends PermissionStatus {
+  nativeState?: PermissionState;
+  platform: 'web' | 'android' | 'ios';
 }
 
 export interface PermissionConfig {
@@ -55,50 +61,158 @@ const PERMISSION_CONFIGS: Record<PermissionType, PermissionConfig> = {
   },
 };
 
+/**
+ * 检查是否为原生平台
+ */
+const isNativePlatform = (): boolean => {
+  return Capacitor.isNativePlatform();
+};
+
+/**
+ * 获取当前平台
+ */
+const getCurrentPlatform = (): 'web' | 'android' | 'ios' => {
+  if (Capacitor.isNativePlatform()) {
+    return Capacitor.getPlatform() as 'android' | 'ios';
+  }
+  return 'web';
+};
+
 class PermissionManager {
-  private permissionStatuses: Map<PermissionType, PermissionStatus> = new Map();
+  private permissionStatuses: Map<PermissionType, ExtendedPermissionStatus> = new Map();
   private denialCallbacks: Map<PermissionType, (() => void)[]> = new Map();
 
-  async checkPermission(type: PermissionType): Promise<PermissionStatus> {
+  /**
+   * 检查权限状态（支持原生平台）
+   */
+  async checkPermission(type: PermissionType): Promise<ExtendedPermissionStatus> {
+    const platform = getCurrentPlatform();
+    
+    try {
+      // 原生平台使用 Capacitor API
+      if (isNativePlatform()) {
+        return await this.checkNativePermission(type, platform);
+      }
+      
+      // Web 平台使用 Web API
+      return await this.checkWebPermission(type, platform);
+    } catch (error) {
+      console.warn(`Permission check failed for ${type}:`, error);
+      return this.createStatus(type, 'prompt', platform);
+    }
+  }
+
+  /**
+   * 检查原生平台权限
+   */
+  private async checkNativePermission(type: PermissionType, platform: 'android' | 'ios'): Promise<ExtendedPermissionStatus> {
+    try {
+      if (type === 'camera') {
+        const { Camera } = await import('@capacitor/camera');
+        const status = await Camera.checkPermissions();
+        const cameraState = status.camera as PermissionState;
+        return this.createStatus(type, this.mapNativeState(cameraState), platform, cameraState);
+      }
+      
+      if (type === 'microphone') {
+        // 麦克风权限通常与相机一起检查
+        const { Camera } = await import('@capacitor/camera');
+        const status = await Camera.checkPermissions();
+        // Capacitor Camera 也包含麦克风权限信息
+        const micState = (status as any).microphone || status.camera;
+        return this.createStatus(type, this.mapNativeState(micState as PermissionState), platform, micState as PermissionState);
+      }
+      
+      if (type === 'notification') {
+        const { LocalNotifications } = await import('@capacitor/local-notifications');
+        const status = await LocalNotifications.checkPermissions();
+        const displayState = status.display as PermissionState;
+        return this.createStatus(type, this.mapNativeState(displayState), platform, displayState);
+      }
+
+      if (type === 'storage') {
+        // Android 13+ 存储权限已细分，这里简化处理
+        return this.createStatus(type, 'granted', platform);
+      }
+
+      if (type === 'location') {
+        const { Geolocation } = await import('@capacitor/geolocation');
+        const status = await Geolocation.checkPermissions();
+        const locationState = status.location as PermissionState;
+        return this.createStatus(type, this.mapNativeState(locationState), platform, locationState);
+      }
+
+      return this.createStatus(type, 'prompt', platform);
+    } catch (error) {
+      console.warn(`Native permission check failed for ${type}:`, error);
+      return this.createStatus(type, 'prompt', platform);
+    }
+  }
+
+  /**
+   * 检查 Web 平台权限
+   */
+  private async checkWebPermission(type: PermissionType, platform: 'web'): Promise<ExtendedPermissionStatus> {
     try {
       if (type === 'camera') {
         const result = await navigator.permissions.query({ name: 'camera' });
-        return this.createStatus(type, result.state);
+        return this.createStatus(type, result.state, platform);
       }
       
       if (type === 'microphone') {
         const result = await navigator.permissions.query({ name: 'microphone' });
-        return this.createStatus(type, result.state);
+        return this.createStatus(type, result.state, platform);
       }
       
       if (type === 'location') {
         const result = await navigator.permissions.query({ name: 'geolocation' });
-        return this.createStatus(type, result.state);
+        return this.createStatus(type, result.state, platform);
       }
 
       if (type === 'notification') {
         if ('Notification' in window) {
           const permission = Notification.permission;
-          return this.createStatus(type, permission as PermissionState);
+          return this.createStatus(type, permission as PermissionState, platform);
         }
-        return this.createStatus(type, 'denied');
+        return this.createStatus(type, 'denied', platform);
       }
 
-      return this.createStatus(type, 'prompt');
+      return this.createStatus(type, 'prompt', platform);
     } catch (error) {
-      console.warn(`Permission check failed for ${type}:`, error);
-      return this.createStatus(type, 'prompt');
+      console.warn(`Web permission check failed for ${type}:`, error);
+      return this.createStatus(type, 'prompt', platform);
     }
   }
 
-  private createStatus(type: PermissionType, state: PermissionState): PermissionStatus {
-    const status: PermissionStatus = {
+  /**
+   * 映射原生权限状态到标准状态
+   */
+  private mapNativeState(state: PermissionState): 'granted' | 'denied' | 'prompt' {
+    if (state === 'granted') return 'granted';
+    if (state === 'denied') return 'denied';
+    if (state === 'prompt-with-rationale' || state === 'limited') return 'prompt';
+    return 'prompt';
+  }
+
+  /**
+   * 创建权限状态对象
+   */
+  private createStatus(
+    type: PermissionType, 
+    state: PermissionState, 
+    platform: 'web' | 'android' | 'ios',
+    nativeState?: PermissionState
+  ): ExtendedPermissionStatus {
+    const mappedState = this.mapNativeState(state);
+    const status: ExtendedPermissionStatus = {
       type,
-      granted: state === 'granted',
-      denied: state === 'denied',
-      prompt: state === 'prompt',
-      canRequest: state !== 'denied',
+      granted: mappedState === 'granted',
+      denied: mappedState === 'denied',
+      prompt: mappedState === 'prompt',
+      canRequest: mappedState !== 'denied',
       lastChecked: new Date(),
+      nativeState: nativeState || state,
+      platform,
     };
     
     this.permissionStatuses.set(type, status);
@@ -110,14 +224,68 @@ class PermissionManager {
     return status;
   }
 
-  private notifyDenial(type: PermissionType): void {
-    const callbacks = this.denialCallbacks.get(type) || [];
-    callbacks.forEach(cb => cb());
-  }
-
+  /**
+   * 请求权限（支持原生平台）
+   */
   async requestPermission(type: PermissionType): Promise<boolean> {
     const config = PERMISSION_CONFIGS[type];
     
+    try {
+      // 原生平台使用 Capacitor API
+      if (isNativePlatform()) {
+        return await this.requestNativePermission(type);
+      }
+      
+      // Web 平台使用 Web API
+      return await this.requestWebPermission(type);
+    } catch (error) {
+      console.warn(`Permission request failed for ${type}:`, error);
+      this.handleDenial(type, config);
+      return false;
+    }
+  }
+
+  /**
+   * 请求原生平台权限
+   */
+  private async requestNativePermission(type: PermissionType): Promise<boolean> {
+    try {
+      if (type === 'camera') {
+        const { Camera } = await import('@capacitor/camera');
+        const status = await Camera.requestPermissions();
+        return status.camera === 'granted';
+      }
+      
+      if (type === 'microphone') {
+        // 麦克风权限请求
+        const { Camera } = await import('@capacitor/camera');
+        const status = await Camera.requestPermissions();
+        return status.camera === 'granted' || (status as any).microphone === 'granted';
+      }
+      
+      if (type === 'notification') {
+        const { LocalNotifications } = await import('@capacitor/local-notifications');
+        const status = await LocalNotifications.requestPermissions();
+        return status.display === 'granted';
+      }
+
+      if (type === 'location') {
+        const { Geolocation } = await import('@capacitor/geolocation');
+        const status = await Geolocation.requestPermissions();
+        return status.location === 'granted';
+      }
+
+      return false;
+    } catch (error) {
+      console.warn(`Native permission request failed for ${type}:`, error);
+      return false;
+    }
+  }
+
+  /**
+   * 请求 Web 平台权限
+   */
+  private async requestWebPermission(type: PermissionType): Promise<boolean> {
     try {
       if (type === 'camera') {
         const stream = await navigator.mediaDevices.getUserMedia({ video: true });
@@ -151,8 +319,7 @@ class PermissionManager {
 
       return false;
     } catch (error) {
-      console.warn(`Permission request failed for ${type}:`, error);
-      this.handleDenial(type, config);
+      console.warn(`Web permission request failed for ${type}:`, error);
       return false;
     }
   }
@@ -167,6 +334,11 @@ class PermissionManager {
     this.notifyDenial(type);
   }
 
+  private notifyDenial(type: PermissionType): void {
+    const callbacks = this.denialCallbacks.get(type) || [];
+    callbacks.forEach(cb => cb());
+  }
+
   onPermissionDenied(type: PermissionType, callback: () => void): void {
     const callbacks = this.denialCallbacks.get(type) || [];
     callbacks.push(callback);
@@ -182,7 +354,7 @@ class PermissionManager {
     }
   }
 
-  getPermissionStatus(type: PermissionType): PermissionStatus | null {
+  getPermissionStatus(type: PermissionType): ExtendedPermissionStatus | null {
     return this.permissionStatuses.get(type);
   }
 
@@ -194,7 +366,7 @@ class PermissionManager {
     return PERMISSION_CONFIGS;
   }
 
-  async checkAllPermissions(): Promise<Map<PermissionType, PermissionStatus>> {
+  async checkAllPermissions(): Promise<Map<PermissionType, ExtendedPermissionStatus>> {
     const types: PermissionType[] = ['camera', 'microphone', 'location', 'notification'];
     
     for (const type of types) {
@@ -223,20 +395,38 @@ class PermissionManager {
   private canReRequest(type: PermissionType): boolean {
     return type !== 'notification';
   }
+
+  /**
+   * 打开系统设置页面（仅原生平台）
+   */
+  async openSettings(): Promise<void> {
+    if (isNativePlatform()) {
+      try {
+        const { AppLauncher } = await import('@capacitor/app-launcher');
+        // Android: 打开应用设置
+        await AppLauncher.openUrl({ url: 'android.settings.APPLICATION_DETAILS_SETTINGS' });
+      } catch (error) {
+        console.warn('Failed to open settings:', error);
+      }
+    }
+  }
 }
 
 export const permissionManager = new PermissionManager();
 
+/**
+ * 权限管理 Hook
+ */
 export function usePermission(type: PermissionType) {
   const request = async (): Promise<boolean> => {
     return permissionManager.requestPermission(type);
   };
 
-  const check = async (): Promise<PermissionStatus> => {
+  const check = async (): Promise<ExtendedPermissionStatus> => {
     return permissionManager.checkPermission(type);
   };
 
-  const getStatus = (): PermissionStatus | null => {
+  const getStatus = (): ExtendedPermissionStatus | null => {
     return permissionManager.getPermissionStatus(type);
   };
 
@@ -248,12 +438,19 @@ export function usePermission(type: PermissionType) {
     return permissionManager.getFallbackMessage(type);
   };
 
+  const openSettings = async (): Promise<void> => {
+    return permissionManager.openSettings();
+  };
+
   return {
     request,
     check,
     getStatus,
     isAvailable,
     getFallback,
+    openSettings,
     config: permissionManager.getConfig(type),
+    isNative: isNativePlatform(),
+    platform: getCurrentPlatform(),
   };
 }
\ No newline at end of file
diff --git a/src/services/pushNotificationService.ts b/src/services/pushNotificationService.ts
index 638897e7..06428d62 100644
--- a/src/services/pushNotificationService.ts
+++ b/src/services/pushNotificationService.ts
@@ -1,7 +1,32 @@
+/**
+ * Push Notification Service - 推送通知服务
+ *
+ * 统一管理 Web 和 Android/iOS 平台的推送通知
+ * 集成 Capacitor 原生通知 API，确保跨平台一致性
+ */
+
+import { Capacitor } from '@capacitor/core';
 import type { PushNotification, NotificationConfig, NotificationPriority } from '../types/push';
 
 const MOCK_DELAY = 500;
 
+/**
+ * 检查是否为原生平台
+ */
+const isNativePlatform = (): boolean => {
+  return Capacitor.isNativePlatform();
+};
+
+/**
+ * 获取当前平台
+ */
+const getCurrentPlatform = (): 'web' | 'android' | 'ios' => {
+  if (Capacitor.isNativePlatform()) {
+    return Capacitor.getPlatform() as 'android' | 'ios';
+  }
+  return 'web';
+};
+
 class PushNotificationService {
   private notifications: PushNotification[] = [];
   private config: NotificationConfig = {
@@ -20,6 +45,7 @@ class PushNotificationService {
   private deviceToken: string | null = null;
   private tokenUpdatedAt: string | null = null;
   private listeners: Array<(notification: PushNotification) => void> = [];
+  private isInitialized: boolean = false;
 
   constructor() {
     this.initializeMockData();
@@ -73,11 +99,157 @@ class PushNotificationService {
     this.notifications = mockNotifications;
   }
 
+  /**
+   * 初始化推送通知服务（支持原生平台）
+   */
   async initialize(): Promise<void> {
-    await this.simulateDelay(MOCK_DELAY);
-    console.log('Push notification service initialized');
+    if (this.isInitialized) return;
+    
+    const platform = getCurrentPlatform();
+    console.log(`[PushNotification] Initializing for platform: ${platform}`);
+
+    try {
+      // 原生平台初始化
+      if (isNativePlatform()) {
+        await this.initializeNativeNotifications();
+      } else {
+        // Web 平台初始化
+        await this.initializeWebNotifications();
+      }
+      
+      this.isInitialized = true;
+      console.log('[PushNotification] Service initialized successfully');
+    } catch (error) {
+      console.error('[PushNotification] Initialization failed:', error);
+      // 即使失败也标记为已初始化，避免阻塞应用
+      this.isInitialized = true;
+    }
   }
 
+  /**
+   * 初始化原生平台通知
+   */
+  private async initializeNativeNotifications(): Promise<void> {
+    try {
+      // 初始化本地通知
+      const { LocalNotifications } = await import('@capacitor/local-notifications');
+      
+      // 检查权限
+      const permissionStatus = await LocalNotifications.checkPermissions();
+      console.log('[PushNotification] Local notification permission:', permissionStatus.display);
+      
+      // 如果权限未授予，请求权限
+      if (permissionStatus.display !== 'granted') {
+        const requestResult = await LocalNotifications.requestPermissions();
+        console.log('[PushNotification] Permission request result:', requestResult.display);
+      }
+      
+      // 监听本地通知事件
+      await LocalNotifications.addListener('localNotificationReceived', (notification) => {
+        console.log('[PushNotification] Local notification received:', notification);
+        this.handleNotificationReceived({
+          id: notification.id?.toString() || `local-${Date.now()}`,
+          title: notification.title || '',
+          body: notification.body || '',
+          type: 'reminder',
+          priority: 'normal',
+          timestamp: new Date().toISOString(),
+          read: false,
+          data: notification.extra as Record<string, string>,
+        });
+      });
+      
+      await LocalNotifications.addListener('localNotificationActionPerformed', (action) => {
+        console.log('[PushNotification] Local notification action performed:', action);
+        this.handleNotificationAction(action);
+      });
+
+      // 初始化推送通知（如果配置了 FCM）
+      try {
+        const { PushNotifications } = await import('@capacitor/push-notifications');
+        
+        // 注册推送通知
+        await PushNotifications.register();
+        
+        // 监听推送通知事件
+        await PushNotifications.addListener('registration', (token) => {
+          console.log('[PushNotification] Push token received:', token.value);
+          this.deviceToken = token.value;
+          this.tokenUpdatedAt = new Date().toISOString();
+        });
+        
+        await PushNotifications.addListener('registrationError', (error) => {
+          console.error('[PushNotification] Push registration error:', error);
+        });
+        
+        await PushNotifications.addListener('pushNotificationReceived', (notification) => {
+          console.log('[PushNotification] Push notification received:', notification);
+          this.handleNotificationReceived({
+            id: notification.id || `push-${Date.now()}`,
+            title: notification.title || '',
+            body: notification.body || '',
+            type: 'health',
+            priority: 'high',
+            timestamp: new Date().toISOString(),
+            read: false,
+            data: notification.data as Record<string, string>,
+          });
+        });
+        
+        await PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
+          console.log('[PushNotification] Push notification action performed:', action);
+          this.handlePushNotificationAction(action);
+        });
+      } catch (pushError) {
+        console.warn('[PushNotification] Push notifications not available:', pushError);
+      }
+    } catch (error) {
+      console.error('[PushNotification] Native initialization failed:', error);
+    }
+  }
+
+  /**
+   * 初始化 Web 平台通知
+   */
+  private async initializeWebNotifications(): Promise<void> {
+    if ('Notification' in window) {
+      if (Notification.permission === 'default') {
+        const permission = await Notification.requestPermission();
+        console.log('[PushNotification] Web notification permission:', permission);
+      }
+    }
+  }
+
+  /**
+   * 处理接收到的通知
+   */
+  private handleNotificationReceived(notification: PushNotification): void {
+    this.notifications.unshift(notification);
+    if (this.notifications.length > 100) {
+      this.notifications.pop();
+    }
+    this.notifyListeners(notification);
+  }
+
+  /**
+   * 处理本地通知动作
+   */
+  private handleNotificationAction(action: any): void {
+    console.log('[PushNotification] Handling notification action:', action);
+    // 可以根据 action 执行特定操作，如跳转到特定页面
+  }
+
+  /**
+   * 处理推送通知动作
+   */
+  private handlePushNotificationAction(action: any): void {
+    console.log('[PushNotification] Handling push notification action:', action);
+    // 可以根据 action 执行特定操作，如跳转到特定页面
+  }
+
+  /**
+   * 注册设备 Token
+   */
   async registerToken(token: string): Promise<{ success: boolean; message: string }> {
     await this.simulateDelay(MOCK_DELAY);
     this.deviceToken = token;
@@ -88,16 +260,33 @@ class PushNotificationService {
     };
   }
 
+  /**
+   * 取消注册设备 Token
+   */
   async unregisterToken(): Promise<void> {
-    await this.simulateDelay(200);
+    if (isNativePlatform()) {
+      try {
+        const { PushNotifications } = await import('@capacitor/push-notifications');
+        await PushNotifications.unregister();
+      } catch (error) {
+        console.warn('[PushNotification] Failed to unregister push notifications:', error);
+      }
+    }
+    
     this.deviceToken = null;
     this.tokenUpdatedAt = null;
   }
 
+  /**
+   * 获取设备 Token
+   */
   async getToken(): Promise<string | null> {
     return this.deviceToken;
   }
 
+  /**
+   * 获取通知列表
+   */
   async getNotifications(limit: number = 20): Promise<PushNotification[]> {
     await this.simulateDelay(300);
     return [...this.notifications].sort((a, b) => 
@@ -105,11 +294,17 @@ class PushNotificationService {
     ).slice(0, limit);
   }
 
+  /**
+   * 获取未读通知数量
+   */
   async getUnreadCount(): Promise<number> {
     await this.simulateDelay(100);
     return this.notifications.filter(n => !n.read).length;
   }
 
+  /**
+   * 标记通知为已读
+   */
   async markAsRead(notificationId: string): Promise<boolean> {
     await this.simulateDelay(100);
     const notification = this.notifications.find(n => n.id === notificationId);
@@ -120,11 +315,17 @@ class PushNotificationService {
     return false;
   }
 
+  /**
+   * 标记所有通知为已读
+   */
   async markAllAsRead(): Promise<void> {
     await this.simulateDelay(100);
     this.notifications.forEach(n => n.read = true);
   }
 
+  /**
+   * 发送通知（支持原生平台）
+   */
   async sendNotification(
     title: string,
     body: string,
@@ -132,10 +333,9 @@ class PushNotificationService {
       type?: 'health' | 'security' | 'reminder' | 'promotion';
       priority?: NotificationPriority;
       data?: Record<string, string>;
+      schedule?: { at: Date };
     } = {}
   ): Promise<PushNotification> {
-    await this.simulateDelay(MOCK_DELAY);
-
     const notification: PushNotification = {
       id: `push-${Date.now()}`,
       title,
@@ -147,6 +347,49 @@ class PushNotificationService {
       data: options.data
     };
 
+    // 原生平台使用 Capacitor 通知
+    if (isNativePlatform()) {
+      try {
+        const { LocalNotifications } = await import('@capacitor/local-notifications');
+        
+        // 检查权限
+        const permissionStatus = await LocalNotifications.checkPermissions();
+        if (permissionStatus.display !== 'granted') {
+          console.warn('[PushNotification] Notification permission not granted');
+          return notification;
+        }
+
+        // 发送本地通知
+        await LocalNotifications.schedule({
+          notifications: [
+            {
+              id: parseInt(notification.id.replace(/\D/g, '')) || Date.now(),
+              title,
+              body,
+              schedule: options.schedule ? { at: options.schedule.at } : undefined,
+              extra: options.data,
+              sound: this.config.sound ? undefined : undefined,
+              actionTypeId: 'tap',
+            },
+          ],
+        });
+
+        console.log('[PushNotification] Native notification sent successfully');
+      } catch (error) {
+        console.error('[PushNotification] Failed to send native notification:', error);
+      }
+    } else {
+      // Web 平台使用 Web Notification API
+      if ('Notification' in window && Notification.permission === 'granted') {
+        new Notification(title, {
+          body,
+          icon: '/favicon.ico',
+          data: options.data,
+          tag: notification.id,
+        });
+      }
+    }
+
     this.notifications.unshift(notification);
     if (this.notifications.length > 100) {
       this.notifications.pop();
@@ -157,11 +400,82 @@ class PushNotificationService {
     return notification;
   }
 
+  /**
+   * 发送定时提醒通知
+   */
+  async scheduleReminder(
+    title: string,
+    body: string,
+    scheduledTime: Date,
+    options: {
+      type?: 'health' | 'security' | 'reminder' | 'promotion';
+      data?: Record<string, string>;
+    } = {}
+  ): Promise<boolean> {
+    if (isNativePlatform()) {
+      try {
+        const { LocalNotifications } = await import('@capacitor/local-notifications');
+        
+        const permissionStatus = await LocalNotifications.checkPermissions();
+        if (permissionStatus.display !== 'granted') {
+          console.warn('[PushNotification] Cannot schedule reminder without permission');
+          return false;
+        }
+
+        await LocalNotifications.schedule({
+          notifications: [
+            {
+              id: Date.now(),
+              title,
+              body,
+              schedule: { at: scheduledTime },
+              extra: options.data,
+              actionTypeId: 'tap',
+            },
+          ],
+        });
+
+        console.log('[PushNotification] Reminder scheduled successfully');
+        return true;
+      } catch (error) {
+        console.error('[PushNotification] Failed to schedule reminder:', error);
+        return false;
+      }
+    }
+
+    // Web 平台不支持定时通知，立即发送
+    await this.sendNotification(title, body, { ...options, schedule: { at: scheduledTime } });
+    return true;
+  }
+
+  /**
+   * 取消定时通知
+   */
+  async cancelScheduledNotification(notificationId: number): Promise<boolean> {
+    if (isNativePlatform()) {
+      try {
+        const { LocalNotifications } = await import('@capacitor/local-notifications');
+        await LocalNotifications.cancel({ notifications: [{ id: notificationId }] });
+        return true;
+      } catch (error) {
+        console.error('[PushNotification] Failed to cancel notification:', error);
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * 获取通知配置
+   */
   async getConfig(): Promise<NotificationConfig> {
     await this.simulateDelay(100);
     return { ...this.config };
   }
 
+  /**
+   * 更新通知配置
+   */
   async updateConfig(updates: Partial<NotificationConfig>): Promise<NotificationConfig> {
     await this.simulateDelay(200);
     this.config = { ...this.config, ...updates };
@@ -173,11 +487,17 @@ class PushNotificationService {
     return { ...this.config };
   }
 
+  /**
+   * 获取分类状态
+   */
   async getCategoryStatus(category: keyof NotificationConfig['categories']): Promise<boolean> {
     await this.simulateDelay(50);
     return this.config.categories[category]?.enabled ?? true;
   }
 
+  /**
+   * 设置分类状态
+   */
   async setCategoryStatus(category: keyof NotificationConfig['categories'], enabled: boolean): Promise<void> {
     await this.simulateDelay(100);
     if (this.config.categories[category]) {
@@ -185,6 +505,9 @@ class PushNotificationService {
     }
   }
 
+  /**
+   * 订阅通知事件
+   */
   subscribe(listener: (notification: PushNotification) => void): () => void {
     this.listeners.push(listener);
     return () => {
@@ -195,13 +518,30 @@ class PushNotificationService {
     };
   }
 
+  /**
+   * 通知所有监听器
+   */
   private notifyListeners(notification: PushNotification) {
     this.listeners.forEach(listener => listener(notification));
   }
 
+  /**
+   * 模拟延迟
+   */
   private simulateDelay(ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
+
+  /**
+   * 获取平台信息
+   */
+  getPlatformInfo(): { platform: string; isNative: boolean; hasPermission: boolean } {
+    return {
+      platform: getCurrentPlatform(),
+      isNative: isNativePlatform(),
+      hasPermission: this.isInitialized,
+    };
+  }
 }
 
 export const pushNotificationService = new PushNotificationService();
\ No newline at end of file
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index d890695a..d4112d33 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -204,40 +204,131 @@ export const useAppStore = create<AppState>()(
       initializeApp: async () => {
         const { setInitProgress } = get();
         
-        setInitProgress(10, '正在加载应用配置...');
-        await new Promise(resolve => setTimeout(resolve, 100));
-        
-        setInitProgress(30, '正在初始化状态管理...');
-        await new Promise(resolve => setTimeout(resolve, 100));
-        
-        setInitProgress(50, '正在加载用户数据...');
-        await new Promise(resolve => setTimeout(resolve, 100));
-        
-        setInitProgress(70, '正在加载宠物信息...');
-        await new Promise(resolve => setTimeout(resolve, 100));
-        
-        setInitProgress(90, '正在完成初始化...');
-        await new Promise(resolve => setTimeout(resolve, 100));
-        
-        setInitProgress(100, '初始化完成');
-        
-        const state = get();
-        if (!state.pets.length && state.isAuthenticated) {
-          const defaultPet: Pet = {
-            id: '1',
-            name: '小橘',
-            breed: '橘猫',
-            age: 2,
-            avatarUrl: '',
-            type: 'cat',
-          };
-          set({ 
-            pets: [defaultPet], 
-            currentPet: defaultPet,
-          });
+        try {
+          setInitProgress(10, '正在加载应用配置...');
+          await new Promise(resolve => setTimeout(resolve, 100));
+          
+          // 初始化平台服务（Android/iOS）
+          setInitProgress(20, '正在初始化平台服务...');
+          try {
+            const { PlatformServices } = await import('../lib/platformService');
+            const platform = PlatformServices.getCurrentPlatform();
+            console.log(`[AppStore] Current platform: ${platform}`);
+            
+            // 原生平台初始化
+            if (PlatformServices.isNativePlatform()) {
+              console.log('[AppStore] Initializing native platform services...');
+              
+              // 初始化推送通知服务
+              try {
+                const { pushNotificationService } = await import('../services/pushNotificationService');
+                await pushNotificationService.initialize();
+                console.log('[AppStore] Push notification service initialized');
+              } catch (pushError) {
+                console.warn('[AppStore] Push notification initialization failed:', pushError);
+              }
+              
+              // 初始化权限检查
+              try {
+                const { permissionManager } = await import('../services/permissionService');
+                await permissionManager.checkAllPermissions();
+                console.log('[AppStore] Permissions checked');
+              } catch (permError) {
+                console.warn('[AppStore] Permission check failed:', permError);
+              }
+            }
+          } catch (platformError) {
+            console.warn('[AppStore] Platform service initialization failed:', platformError);
+          }
+          
+          // 初始化所有数据存储
+          setInitProgress(30, '正在初始化数据存储...');
+          try {
+            // 初始化新增的Store
+            const { useDevicesStore } = await import('./devicesStore');
+            const { useDietStore } = await import('./dietStore');
+            const { useRecordsStore } = await import('./recordsStore');
+            const { useHealthStore } = await import('./healthStore');
+            const { useFavoritesStore } = await import('./favoritesStore');
+            const { useSettingsStore } = await import('./settingsStore');
+            const { useUserProfileStore } = await import('./userProfileStore');
+            const { useTranslatorStore } = await import('./translatorStore');
+            const { useServicesStore } = await import('./servicesStore');
+            const { useHealthReportStore } = await import('./healthReportStore');
+            const { usePetStore } = await import('./petStore');
+            const { useReminderStore } = await import('./reminderStore');
+            const { useMedicalStore } = await import('./medicalStore');
+            const { useTrainingStore } = await import('./trainingStore');
+            const { useInsuranceStore } = await import('./insuranceStore');
+            const { useBondStore } = await import('./bondStore');
+            
+            // 初始化各个Store
+            await useDevicesStore.getState().initialize();
+            await useDietStore.getState().initialize();
+            await useRecordsStore.getState().initialize();
+            await useHealthStore.getState().initialize();
+            await useFavoritesStore.getState().initialize();
+            await useSettingsStore.getState().initialize();
+            await useUserProfileStore.getState().initialize();
+            await useTranslatorStore.getState().initialize();
+            await useServicesStore.getState().initialize();
+            await useHealthReportStore.getState().initialize();
+            await usePetStore.getState().initialize?.();
+            await useReminderStore.getState().initialize?.();
+            await useMedicalStore.getState().initialize?.();
+            await useTrainingStore.getState().initialize?.();
+            await useInsuranceStore.getState().initialize?.();
+            await useBondStore.getState().initialize?.();
+            
+            console.log('[AppStore] All stores initialized');
+          } catch (storeError) {
+            console.warn('[AppStore] Store initialization failed:', storeError);
+          }
+          
+          setInitProgress(50, '正在加载用户数据...');
+          await new Promise(resolve => setTimeout(resolve, 100));
+          
+          setInitProgress(70, '正在加载宠物信息...');
+          await new Promise(resolve => setTimeout(resolve, 100));
+          
+          // 加载功能标志
+          setInitProgress(85, '正在加载功能配置...');
+          try {
+            const { getFeatureFlags } = await import('../lib/featureFlags');
+            const flags = getFeatureFlags();
+            console.log('[AppStore] Feature flags loaded:', Object.keys(flags).length);
+          } catch (flagError) {
+            console.warn('[AppStore] Feature flags loading failed:', flagError);
+          }
+          
+          setInitProgress(90, '正在完成初始化...');
+          await new Promise(resolve => setTimeout(resolve, 100));
+          
+          setInitProgress(100, '初始化完成');
+          
+          const state = get();
+          if (!state.pets.length && state.isAuthenticated) {
+            const defaultPet: Pet = {
+              id: '1',
+              name: '小橘',
+              breed: '橘猫',
+              age: 2,
+              avatarUrl: '',
+              type: 'cat',
+            };
+            set({ 
+              pets: [defaultPet], 
+              currentPet: defaultPet,
+            });
+          }
+          
+          set({ isInitialized: true });
+          console.log('[AppStore] App initialization completed');
+        } catch (error) {
+          console.error('[AppStore] Initialization failed:', error);
+          setInitProgress(100, '初始化完成（部分功能可能受限）');
+          set({ isInitialized: true });
         }
-        
-        set({ isInitialized: true });
       },
 
       setUser: (user) => set({ user, isAuthenticated: !!user }),
diff --git a/src/store/bondStore.ts b/src/store/bondStore.ts
index dbc0f4f0..aa228831 100644
--- a/src/store/bondStore.ts
+++ b/src/store/bondStore.ts
@@ -164,5 +164,9 @@ export const useBondStore = create<BondStore>((set, get) => ({
     } else {
       set({ streakDays: 1, lastActiveDate: today });
     }
+  },
+
+  initialize: async () => {
+    console.log('[BondStore] Initialized');
   }
 }));
diff --git a/src/store/devicesStore.ts b/src/store/devicesStore.ts
new file mode 100644
index 00000000..92820065
--- /dev/null
+++ b/src/store/devicesStore.ts
@@ -0,0 +1,422 @@
+/**
+ * Devices Store - 设备管理数据存储
+ *
+ * 管理智能设备列表、状态、配对等功能
+ * 支持 Capacitor 原生设备管理
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 设备类型
+export type DeviceType = 'camera' | 'collar' | 'dispenser' | 'bowl' | 'tracker' | 'other';
+
+// 设备状态
+export type DeviceStatus = 'online' | 'offline' | 'warning' | 'pairing';
+
+// 设备接口
+export interface Device {
+  id: string;
+  name: string;
+  type: DeviceType;
+  status: DeviceStatus;
+  battery: number;
+  signal: number;
+  lastActive: string;
+  firmware?: string;
+  macAddress?: string;
+  petId?: string;
+  location?: string;
+  image?: string;
+  settings?: Record<string, any>;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// 设备统计
+export interface DeviceStats {
+  total: number;
+  online: number;
+  offline: number;
+  warning: number;
+}
+
+// 设备事件
+export interface DeviceEvent {
+  id: string;
+  deviceId: string;
+  type: 'status_change' | 'battery_low' | 'signal_lost' | 'firmware_update' | 'alert';
+  message: string;
+  timestamp: string;
+  read: boolean;
+}
+
+// Store 接口
+interface DevicesState {
+  devices: Device[];
+  events: DeviceEvent[];
+  selectedDeviceId: string | null;
+  isLoading: boolean;
+  isPairing: boolean;
+  
+  // 设备操作
+  addDevice: (device: Omit<Device, 'id' | 'createdAt' | 'updatedAt'>) => Promise<Device>;
+  updateDevice: (id: string, updates: Partial<Device>) => Promise<void>;
+  removeDevice: (id: string) => Promise<void>;
+  selectDevice: (id: string | null) => void;
+  
+  // 设备状态
+  updateDeviceStatus: (id: string, status: DeviceStatus) => Promise<void>;
+  updateDeviceBattery: (id: string, battery: number) => void;
+  updateDeviceSignal: (id: string, signal: number) => void;
+  
+  // 设备配对
+  startPairing: () => Promise<void>;
+  cancelPairing: () => void;
+  
+  // 事件管理
+  addEvent: (event: Omit<DeviceEvent, 'id' | 'timestamp' | 'read'>) => void;
+  markEventRead: (eventId: string) => void;
+  clearEvents: () => void;
+  
+  // 统计
+  getStats: () => DeviceStats;
+  getOnlineDevices: () => Device[];
+  getDevicesByPet: (petId: string) => Device[];
+  
+  // 初始化
+  initialize: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+// Capacitor 原生存储适配
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+// 生成唯一ID
+const generateId = () => `device-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// 模拟设备数据
+const mockDevices: Device[] = [
+  {
+    id: 'device-1',
+    name: 'JOJO的碗',
+    type: 'bowl',
+    status: 'online',
+    battery: 85,
+    signal: 95,
+    lastActive: '刚刚',
+    firmware: 'v1.2.3',
+    petId: 'pet-1',
+    location: '客厅',
+    createdAt: '2024-01-15T08:00:00Z',
+    updatedAt: '2024-05-20T10:30:00Z',
+  },
+  {
+    id: 'device-2',
+    name: '智能项圈',
+    type: 'collar',
+    status: 'online',
+    battery: 92,
+    signal: 88,
+    lastActive: '2分钟前',
+    firmware: 'v2.1.0',
+    petId: 'pet-1',
+    createdAt: '2024-02-20T10:00:00Z',
+    updatedAt: '2024-05-20T10:28:00Z',
+  },
+  {
+    id: 'device-3',
+    name: '饮水机',
+    type: 'dispenser',
+    status: 'warning',
+    battery: 15,
+    signal: 72,
+    lastActive: '5分钟前',
+    firmware: 'v1.0.5',
+    petId: 'pet-1',
+    location: '厨房',
+    createdAt: '2024-03-10T14:00:00Z',
+    updatedAt: '2024-05-20T10:25:00Z',
+  },
+  {
+    id: 'device-4',
+    name: '客厅摄像头',
+    type: 'camera',
+    status: 'online',
+    battery: 100,
+    signal: 98,
+    lastActive: '在线',
+    firmware: 'v3.0.1',
+    location: '客厅',
+    createdAt: '2024-01-05T09:00:00Z',
+    updatedAt: '2024-05-20T10:30:00Z',
+  },
+];
+
+export const useDevicesStore = create<DevicesState>()(
+  persist(
+    (set, get) => ({
+      devices: [],
+      events: [],
+      selectedDeviceId: null,
+      isLoading: false,
+      isPairing: false,
+
+      // 添加设备
+      addDevice: async (deviceData) => {
+        const newDevice: Device = {
+          ...deviceData,
+          id: generateId(),
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          devices: [...state.devices, newDevice],
+        }));
+        
+        // 添加设备添加事件
+        get().addEvent({
+          deviceId: newDevice.id,
+          type: 'status_change',
+          message: `设备 ${newDevice.name} 已添加`,
+        });
+        
+        return newDevice;
+      },
+
+      // 更新设备
+      updateDevice: async (id, updates) => {
+        set((state) => ({
+          devices: state.devices.map((device) =>
+            device.id === id
+              ? { ...device, ...updates, updatedAt: new Date().toISOString() }
+              : device
+          ),
+        }));
+      },
+
+      // 删除设备
+      removeDevice: async (id) => {
+        const device = get().devices.find((d) => d.id === id);
+        
+        set((state) => ({
+          devices: state.devices.filter((d) => d.id !== id),
+          selectedDeviceId: state.selectedDeviceId === id ? null : state.selectedDeviceId,
+        }));
+        
+        if (device) {
+          get().addEvent({
+            deviceId: id,
+            type: 'status_change',
+            message: `设备 ${device.name} 已移除`,
+          });
+        }
+      },
+
+      // 选择设备
+      selectDevice: (id) => {
+        set({ selectedDeviceId: id });
+      },
+
+      // 更新设备状态
+      updateDeviceStatus: async (id, status) => {
+        const device = get().devices.find((d) => d.id === id);
+        
+        set((state) => ({
+          devices: state.devices.map((d) =>
+            d.id === id
+              ? { ...d, status, lastActive: status === 'online' ? '刚刚' : '离线', updatedAt: new Date().toISOString() }
+              : d
+          ),
+        }));
+        
+        if (device && device.status !== status) {
+          get().addEvent({
+            deviceId: id,
+            type: 'status_change',
+            message: `设备 ${device.name} 状态变更为 ${status}`,
+          });
+        }
+      },
+
+      // 更新电池电量
+      updateDeviceBattery: (id, battery) => {
+        const device = get().devices.find((d) => d.id === id);
+        
+        set((state) => ({
+          devices: state.devices.map((d) =>
+            d.id === id ? { ...d, battery, updatedAt: new Date().toISOString() } : d
+          ),
+        }));
+        
+        // 低电量警告
+        if (battery <= 20 && device && device.battery > 20) {
+          get().addEvent({
+            deviceId: id,
+            type: 'battery_low',
+            message: `设备 ${device.name} 电量低于 20%`,
+          });
+        }
+      },
+
+      // 更新信号强度
+      updateDeviceSignal: (id, signal) => {
+        const device = get().devices.find((d) => d.id === id);
+        
+        set((state) => ({
+          devices: state.devices.map((d) =>
+            d.id === id ? { ...d, signal, updatedAt: new Date().toISOString() } : d
+          ),
+        }));
+        
+        // 信号丢失警告
+        if (signal < 50 && device && device.signal >= 50) {
+          get().addEvent({
+            deviceId: id,
+            type: 'signal_lost',
+            message: `设备 ${device.name} 信号较弱`,
+          });
+        }
+      },
+
+      // 开始配对
+      startPairing: async () => {
+        set({ isPairing: true });
+        
+        // 模拟配对过程
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        
+        // 配对成功后添加设备
+        const newDevice = await get().addDevice({
+          name: '新设备',
+          type: 'other',
+          status: 'online',
+          battery: 100,
+          signal: 100,
+          lastActive: '刚刚',
+        });
+        
+        set({ isPairing: false });
+        
+        return newDevice;
+      },
+
+      // 取消配对
+      cancelPairing: () => {
+        set({ isPairing: false });
+      },
+
+      // 添加事件
+      addEvent: (event) => {
+        const newEvent: DeviceEvent = {
+          ...event,
+          id: `event-${Date.now()}`,
+          timestamp: new Date().toISOString(),
+          read: false,
+        };
+        
+        set((state) => ({
+          events: [newEvent, ...state.events].slice(0, 100),
+        }));
+      },
+
+      // 标记事件已读
+      markEventRead: (eventId) => {
+        set((state) => ({
+          events: state.events.map((e) =>
+            e.id === eventId ? { ...e, read: true } : e
+          ),
+        }));
+      },
+
+      // 清除事件
+      clearEvents: () => {
+        set({ events: [] });
+      },
+
+      // 获取统计
+      getStats: () => {
+        const devices = get().devices || [];
+        return {
+          total: devices.length || 0,
+          online: devices.filter((d) => d?.status === 'online').length || 0,
+          offline: devices.filter((d) => d?.status === 'offline').length || 0,
+          warning: devices.filter((d) => d?.status === 'warning').length || 0,
+        };
+      },
+
+      // 获取在线设备
+      getOnlineDevices: () => {
+        return get().devices.filter((d) => d.status === 'online');
+      },
+
+      // 获取宠物关联设备
+      getDevicesByPet: (petId) => {
+        return get().devices.filter((d) => d.petId === petId);
+      },
+
+      // 初始化
+      initialize: async () => {
+        set({ isLoading: true });
+        
+        // 如果没有设备，加载模拟数据
+        if (get().devices.length === 0) {
+          set({ devices: mockDevices });
+        }
+        
+        set({ isLoading: false });
+      },
+
+      // 刷新数据
+      refresh: async () => {
+        set({ isLoading: true });
+        
+        // 模拟刷新设备状态
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        
+        // 更新设备状态（模拟）
+        set((state) => ({
+          devices: state.devices.map((d) => ({
+            ...d,
+            lastActive: d.status === 'online' ? '刚刚' : d.lastActive,
+          })),
+        }));
+        
+        set({ isLoading: false });
+      },
+    }),
+    {
+      name: 'pawsync-devices-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        devices: state.devices,
+        events: state.events.slice(0, 20),
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/dietStore.ts b/src/store/dietStore.ts
new file mode 100644
index 00000000..89ff25e0
--- /dev/null
+++ b/src/store/dietStore.ts
@@ -0,0 +1,349 @@
+/**
+ * Diet Store - 饮食数据存储
+ *
+ * 管理宠物饮食记录、营养分析、饮食建议等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 饮食记录类型
+export type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack' | 'treat';
+
+// 饮食记录
+export interface DietRecord {
+  id: string;
+  petId: string;
+  type: MealType;
+  food: string;
+  amount: number; // 克
+  calories?: number;
+  time: string;
+  date: string;
+  note?: string;
+  image?: string;
+}
+
+// 饮食统计
+export interface DietStats {
+  totalMeals: number;
+  totalAmount: number; // 克
+  totalCalories: number;
+  totalDuration: number; // 分钟
+  avgMealsPerDay: number;
+  avgAmountPerMeal: number;
+}
+
+// 营养摄入
+export interface NutritionIntake {
+  protein: number; // 蛋白质 %
+  fat: number; // 脂肪 %
+  carbohydrate: number; // 碳水化合物 %
+  fiber: number; // 纤维 %
+}
+
+// 饮食建议
+export interface DietAdvice {
+  id: string;
+  petId: string;
+  title: string;
+  content: string;
+  category: 'feeding' | 'nutrition' | 'schedule' | 'water' | 'treat';
+  priority: 'low' | 'medium' | 'high';
+  createdAt: string;
+}
+
+// 时间范围
+export type TimeRange = 'day' | 'week' | 'month';
+
+// Store 接口
+interface DietState {
+  records: DietRecord[];
+  advices: DietAdvice[];
+  selectedDate: string;
+  timeRange: TimeRange;
+  isLoading: boolean;
+  
+  // 记录操作
+  addRecord: (record: Omit<DietRecord, 'id'>) => Promise<DietRecord>;
+  updateRecord: (id: string, updates: Partial<DietRecord>) => Promise<void>;
+  deleteRecord: (id: string) => Promise<void>;
+  
+  // 查询
+  getRecordsByDate: (date: string) => DietRecord[];
+  getRecordsByPet: (petId: string) => DietRecord[];
+  getRecordsByRange: (range: TimeRange) => DietRecord[];
+  
+  // 统计
+  getStats: (petId: string, range?: TimeRange) => DietStats;
+  getNutritionIntake: (petId: string) => NutritionIntake;
+  
+  // 建议
+  addAdvice: (advice: Omit<DietAdvice, 'id' | 'createdAt'>) => void;
+  getAdvicesByPet: (petId: string) => DietAdvice[];
+  
+  // 设置
+  setSelectedDate: (date: string) => void;
+  setTimeRange: (range: TimeRange) => void;
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+// Capacitor 原生存储适配
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+// 生成唯一ID
+const generateId = () => `diet-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// 获取今天日期
+const getTodayDate = () => new Date().toISOString().split('T')[0];
+
+// 模拟饮食记录
+const mockRecords: DietRecord[] = [
+  {
+    id: 'diet-1',
+    petId: 'pet-1',
+    type: 'breakfast',
+    food: '狗粮',
+    amount: 120,
+    calories: 350,
+    time: '08:30',
+    date: getTodayDate(),
+    note: '主食',
+  },
+  {
+    id: 'diet-2',
+    petId: 'pet-1',
+    type: 'snack',
+    food: '零食',
+    amount: 30,
+    calories: 80,
+    time: '10:15',
+    date: getTodayDate(),
+  },
+  {
+    id: 'diet-3',
+    petId: 'pet-1',
+    type: 'lunch',
+    food: '狗粮',
+    amount: 100,
+    calories: 280,
+    time: '14:00',
+    date: getTodayDate(),
+  },
+  {
+    id: 'diet-4',
+    petId: 'pet-1',
+    type: 'dinner',
+    food: '狗粮',
+    amount: 120,
+    calories: 350,
+    time: '20:00',
+    date: getTodayDate(),
+  },
+];
+
+// 模拟饮食建议
+const mockAdvices: DietAdvice[] = [
+  {
+    id: 'advice-1',
+    petId: 'pet-1',
+    title: '每日喂食建议',
+    content: '根据JOJO的体重(12.5kg)和活动量，建议每日摄入350g狗粮，分3-4次喂食。',
+    category: 'feeding',
+    priority: 'high',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: 'advice-2',
+    petId: 'pet-1',
+    title: '饮水提醒',
+    content: '确保JOJO每天有充足的饮水，建议每天换水2次，保持水质新鲜。',
+    category: 'water',
+    priority: 'medium',
+    createdAt: new Date().toISOString(),
+  },
+];
+
+export const useDietStore = create<DietState>()(
+  persist(
+    (set, get) => ({
+      records: [],
+      advices: [],
+      selectedDate: getTodayDate(),
+      timeRange: 'day',
+      isLoading: false,
+
+      // 添加记录
+      addRecord: async (recordData) => {
+        const newRecord: DietRecord = {
+          ...recordData,
+          id: generateId(),
+        };
+        
+        set((state) => ({
+          records: [...state.records, newRecord],
+        }));
+        
+        return newRecord;
+      },
+
+      // 更新记录
+      updateRecord: async (id, updates) => {
+        set((state) => ({
+          records: state.records.map((r) =>
+            r.id === id ? { ...r, ...updates } : r
+          ),
+        }));
+      },
+
+      // 删除记录
+      deleteRecord: async (id) => {
+        set((state) => ({
+          records: state.records.filter((r) => r.id !== id),
+        }));
+      },
+
+      // 按日期查询
+      getRecordsByDate: (date) => {
+        return get().records.filter((r) => r.date === date);
+      },
+
+      // 按宠物查询
+      getRecordsByPet: (petId) => {
+        return get().records.filter((r) => r.petId === petId);
+      },
+
+      // 按时间范围查询
+      getRecordsByRange: (range) => {
+        const now = new Date();
+        let startDate: Date;
+        
+        switch (range) {
+          case 'day':
+            startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+            break;
+          case 'week':
+            startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+            break;
+          case 'month':
+            startDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
+            break;
+        }
+        
+        return get().records.filter((r) => new Date(r.date) >= startDate);
+      },
+
+      // 获取统计
+      getStats: (petId, range = 'day') => {
+        const allRecords = get().records || [];
+        const records = get().getRecordsByRange(range).filter((r) => r?.petId === petId);
+        
+        const totalMeals = records.length || 0;
+        const totalAmount = records.reduce((sum, r) => sum + (r?.amount || 0), 0) || 0;
+        const totalCalories = records.reduce((sum, r) => sum + (r?.calories || 0), 0) || 0;
+        
+        const days = range === 'day' ? 1 : range === 'week' ? 7 : 30;
+        const avgMealsPerDay = totalMeals / days || 0;
+        const avgAmountPerMeal = totalMeals > 0 ? totalAmount / totalMeals : 0;
+        
+        return {
+          totalMeals,
+          totalAmount,
+          totalCalories,
+          totalDuration: totalMeals * 1.5 || 0,
+          avgMealsPerDay,
+          avgAmountPerMeal,
+        };
+      },
+
+      // 获取营养摄入
+      getNutritionIntake: (petId) => {
+        // 模拟营养数据
+        return {
+          protein: 35,
+          fat: 25,
+          carbohydrate: 30,
+          fiber: 10,
+        };
+      },
+
+      // 添加建议
+      addAdvice: (adviceData) => {
+        const newAdvice: DietAdvice = {
+          ...adviceData,
+          id: generateId(),
+          createdAt: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          advices: [...state.advices, newAdvice],
+        }));
+      },
+
+      // 获取宠物建议
+      getAdvicesByPet: (petId) => {
+        return get().advices.filter((a) => a.petId === petId);
+      },
+
+      // 设置日期
+      setSelectedDate: (date) => {
+        set({ selectedDate: date });
+      },
+
+      // 设置时间范围
+      setTimeRange: (range) => {
+        set({ timeRange: range });
+      },
+
+      // 初始化
+      initialize: async () => {
+        set({ isLoading: true });
+        
+        if (get().records.length === 0) {
+          set({ records: mockRecords });
+        }
+        
+        if (get().advices.length === 0) {
+          set({ advices: mockAdvices });
+        }
+        
+        set({ isLoading: false });
+      },
+    }),
+    {
+      name: 'pawsync-diet-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        records: state.records,
+        advices: state.advices,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/favoritesStore.ts b/src/store/favoritesStore.ts
new file mode 100644
index 00000000..054d0211
--- /dev/null
+++ b/src/store/favoritesStore.ts
@@ -0,0 +1,203 @@
+/**
+ * Favorites Store - 收藏管理数据存储
+ *
+ * 管理用户收藏的内容、文章、服务等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 收藏类型
+export type FavoriteType = 'article' | 'service' | 'product' | 'tip' | 'video' | 'other';
+
+// 收藏项
+export interface Favorite {
+  id: string;
+  type: FavoriteType;
+  title: string;
+  description?: string;
+  image?: string;
+  url?: string;
+  category?: string;
+  tags?: string[];
+  createdAt: string;
+}
+
+// 收藏分组
+export interface FavoriteGroup {
+  id: string;
+  name: string;
+  favorites: string[]; // Favorite IDs
+  createdAt: string;
+}
+
+// Store 接口
+interface FavoritesState {
+  favorites: Favorite[];
+  groups: FavoriteGroup[];
+  isLoading: boolean;
+  
+  // 收藏操作
+  addFavorite: (favorite: Omit<Favorite, 'id' | 'createdAt'>) => Promise<Favorite>;
+  removeFavorite: (id: string) => Promise<void>;
+  isFavorite: (url: string) => boolean;
+  
+  // 分组操作
+  createGroup: (name: string) => FavoriteGroup;
+  deleteGroup: (id: string) => void;
+  addToGroup: (groupId: string, favoriteId: string) => void;
+  removeFromGroup: (groupId: string, favoriteId: string) => void;
+  
+  // 查询
+  getFavoritesByType: (type: FavoriteType) => Favorite[];
+  getFavoritesByGroup: (groupId: string) => Favorite[];
+  searchFavorites: (query: string) => Favorite[];
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+const generateId = () => `fav-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+export const useFavoritesStore = create<FavoritesState>()(
+  persist(
+    (set, get) => ({
+      favorites: [],
+      groups: [],
+      isLoading: false,
+
+      addFavorite: async (favoriteData) => {
+        // 检查是否已收藏
+        if (favoriteData.url && get().isFavorite(favoriteData.url)) {
+          return get().favorites.find((f) => f.url === favoriteData.url)!;
+        }
+        
+        const newFavorite: Favorite = {
+          ...favoriteData,
+          id: generateId(),
+          createdAt: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          favorites: [newFavorite, ...state.favorites],
+        }));
+        
+        return newFavorite;
+      },
+
+      removeFavorite: async (id) => {
+        set((state) => ({
+          favorites: state.favorites.filter((f) => f.id !== id),
+          groups: state.groups.map((g) => ({
+            ...g,
+            favorites: g.favorites.filter((fid) => fid !== id),
+          })),
+        }));
+      },
+
+      isFavorite: (url) => {
+        return get().favorites.some((f) => f.url === url);
+      },
+
+      createGroup: (name) => {
+        const newGroup: FavoriteGroup = {
+          id: generateId(),
+          name,
+          favorites: [],
+          createdAt: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          groups: [...state.groups, newGroup],
+        }));
+        
+        return newGroup;
+      },
+
+      deleteGroup: (id) => {
+        set((state) => ({
+          groups: state.groups.filter((g) => g.id !== id),
+        }));
+      },
+
+      addToGroup: (groupId, favoriteId) => {
+        set((state) => ({
+          groups: state.groups.map((g) =>
+            g.id === groupId && !g.favorites.includes(favoriteId)
+              ? { ...g, favorites: [...g.favorites, favoriteId] }
+              : g
+          ),
+        }));
+      },
+
+      removeFromGroup: (groupId, favoriteId) => {
+        set((state) => ({
+          groups: state.groups.map((g) =>
+            g.id === groupId
+              ? { ...g, favorites: g.favorites.filter((id) => id !== favoriteId) }
+              : g
+          ),
+        }));
+      },
+
+      getFavoritesByType: (type) => {
+        return get().favorites.filter((f) => f.type === type);
+      },
+
+      getFavoritesByGroup: (groupId) => {
+        const group = get().groups.find((g) => g.id === groupId);
+        if (!group) return [];
+        return get().favorites.filter((f) => group.favorites.includes(f.id));
+      },
+
+      searchFavorites: (query) => {
+        const lowerQuery = query.toLowerCase();
+        return get().favorites.filter((f) =>
+          f.title.toLowerCase().includes(lowerQuery) ||
+          (f.description?.toLowerCase().includes(lowerQuery)) ||
+          (f.tags?.some((t) => t.toLowerCase().includes(lowerQuery)))
+        );
+      },
+
+      initialize: async () => {
+        set({ isLoading: true });
+        set({ isLoading: false });
+      },
+    }),
+    {
+      name: 'pawsync-favorites-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        favorites: state.favorites,
+        groups: state.groups,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/healthReportStore.ts b/src/store/healthReportStore.ts
new file mode 100644
index 00000000..cc190ed4
--- /dev/null
+++ b/src/store/healthReportStore.ts
@@ -0,0 +1,249 @@
+/**
+ * Health Report Store - 健康报告数据存储
+ *
+ * 管理健康报告生成、历史报告、报告分析等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 报告类型
+export type ReportType = 'daily' | 'weekly' | 'monthly' | 'annual' | 'special';
+
+// 健康报告
+export interface HealthReport {
+  id: string;
+  petId: string;
+  type: ReportType;
+  title: string;
+  dateRange: {
+    start: string;
+    end: string;
+  };
+  summary: string;
+  metrics: {
+    weight?: { value: number; trend: 'up' | 'down' | 'stable' };
+    activity?: { value: number; trend: 'up' | 'down' | 'stable' };
+    nutrition?: { score: number; recommendations: string[] };
+    behavior?: { score: number; notes: string[] };
+  };
+  recommendations: string[];
+  alerts: string[];
+  score: number;
+  createdAt: string;
+}
+
+// 报告模板
+export interface ReportTemplate {
+  id: string;
+  name: string;
+  type: ReportType;
+  sections: string[];
+}
+
+// Store 接口
+interface HealthReportState {
+  reports: HealthReport[];
+  templates: ReportTemplate[];
+  isLoading: boolean;
+  isGenerating: boolean;
+  
+  // 报告操作
+  generateReport: (petId: string, type: ReportType) => Promise<HealthReport>;
+  deleteReport: (id: string) => void;
+  
+  // 查询
+  getReportsByPet: (petId: string) => HealthReport[];
+  getLatestReport: (petId: string) => HealthReport | null;
+  getReportsByType: (type: ReportType) => HealthReport[];
+  
+  // 模板
+  getTemplates: () => ReportTemplate[];
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+const generateId = () => `report-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// 模拟报告数据
+const mockReports: HealthReport[] = [
+  {
+    id: 'report-1',
+    petId: 'pet-1',
+    type: 'daily',
+    title: '每日健康报告',
+    dateRange: {
+      start: new Date().toISOString().split('T')[0],
+      end: new Date().toISOString().split('T')[0],
+    },
+    summary: 'JOJO今天的健康状况良好，活动量正常，饮食规律。',
+    metrics: {
+      weight: { value: 12.5, trend: 'stable' },
+      activity: { value: 85, trend: 'up' },
+      nutrition: { score: 90, recommendations: ['保持当前饮食量'] },
+      behavior: { score: 85, notes: ['情绪稳定'] },
+    },
+    recommendations: ['继续保持规律喂食', '适当增加活动量'],
+    alerts: [],
+    score: 85,
+    createdAt: new Date().toISOString(),
+  },
+];
+
+const mockTemplates: ReportTemplate[] = [
+  {
+    id: 'template-1',
+    name: '每日报告',
+    type: 'daily',
+    sections: ['summary', 'metrics', 'recommendations'],
+  },
+  {
+    id: 'template-2',
+    name: '周报告',
+    type: 'weekly',
+    sections: ['summary', 'metrics', 'trends', 'recommendations', 'alerts'],
+  },
+];
+
+export const useHealthReportStore = create<HealthReportState>()(
+  persist(
+    (set, get) => ({
+      reports: [],
+      templates: [],
+      isLoading: false,
+      isGenerating: false,
+
+      generateReport: async (petId, type) => {
+        set({ isGenerating: true });
+        
+        // 模拟生成过程
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        
+        const now = new Date();
+        let dateRange: { start: string; end: string };
+        
+        switch (type) {
+          case 'daily':
+            dateRange = {
+              start: now.toISOString().split('T')[0],
+              end: now.toISOString().split('T')[0],
+            };
+            break;
+          case 'weekly':
+            const weekStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+            dateRange = {
+              start: weekStart.toISOString().split('T')[0],
+              end: now.toISOString().split('T')[0],
+            };
+            break;
+          default:
+            dateRange = {
+              start: now.toISOString().split('T')[0],
+              end: now.toISOString().split('T')[0],
+            };
+        }
+        
+        const report: HealthReport = {
+          id: generateId(),
+          petId,
+          type,
+          title: `${type === 'daily' ? '每日' : type === 'weekly' ? '每周' : '每月'}健康报告`,
+          dateRange,
+          summary: '健康状况良好，各项指标正常。',
+          metrics: {
+            weight: { value: 12.5, trend: 'stable' },
+            activity: { value: 80, trend: 'up' },
+            nutrition: { score: 85, recommendations: ['保持均衡饮食'] },
+            behavior: { score: 90, notes: ['情绪稳定，行为正常'] },
+          },
+          recommendations: ['继续保持规律作息', '适当增加户外活动'],
+          alerts: [],
+          score: 85 + Math.floor(Math.random() * 10),
+          createdAt: now.toISOString(),
+        };
+        
+        set((state) => ({
+          reports: [report, ...state.reports],
+          isGenerating: false,
+        }));
+        
+        return report;
+      },
+
+      deleteReport: (id) => {
+        set((state) => ({
+          reports: state.reports.filter((r) => r.id !== id),
+        }));
+      },
+
+      getReportsByPet: (petId) => {
+        return get().reports.filter((r) => r.petId === petId);
+      },
+
+      getLatestReport: (petId) => {
+        const reports = get().getReportsByPet(petId);
+        return reports.sort((a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        )[0] || null;
+      },
+
+      getReportsByType: (type) => {
+        return get().reports.filter((r) => r.type === type);
+      },
+
+      getTemplates: () => {
+        return get().templates;
+      },
+
+      initialize: async () => {
+        set({ isLoading: true });
+        
+        if (get().reports.length === 0) {
+          set({ reports: mockReports });
+        }
+        
+        if (get().templates.length === 0) {
+          set({ templates: mockTemplates });
+        }
+        
+        set({ isLoading: false });
+      },
+    }),
+    {
+      name: 'pawsync-health-report-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        reports: state.reports.slice(0, 50),
+        templates: state.templates,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/healthStore.ts b/src/store/healthStore.ts
new file mode 100644
index 00000000..173e6280
--- /dev/null
+++ b/src/store/healthStore.ts
@@ -0,0 +1,280 @@
+/**
+ * Health Store - 健康主页数据存储
+ *
+ * 管理宠物健康数据、健康评分、健康趋势等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 健康指标类型
+export type HealthMetricType = 'weight' | 'height' | 'temperature' | 'heartRate' | 'respiration' | 'activity';
+
+// 健康指标
+export interface HealthMetric {
+  id: string;
+  petId: string;
+  type: HealthMetricType;
+  value: number;
+  unit: string;
+  timestamp: string;
+  status: 'normal' | 'warning' | 'alert';
+  note?: string;
+}
+
+// 健康评分
+export interface HealthScore {
+  overall: number;
+  physical: number;
+  mental: number;
+  nutrition: number;
+  activity: number;
+  lastUpdated: string;
+}
+
+// 健康趋势
+export interface HealthTrend {
+  type: HealthMetricType;
+  data: { date: string; value: number }[];
+  trend: 'up' | 'down' | 'stable';
+}
+
+// 健康提醒
+export interface HealthAlert {
+  id: string;
+  petId: string;
+  type: 'checkup' | 'vaccine' | 'medication' | 'weight' | 'behavior';
+  title: string;
+  message: string;
+  priority: 'low' | 'medium' | 'high';
+  scheduledDate?: string;
+  completed: boolean;
+  createdAt: string;
+}
+
+// Store 接口
+interface HealthState {
+  metrics: HealthMetric[];
+  scores: Record<string, HealthScore>;
+  alerts: HealthAlert[];
+  isLoading: boolean;
+  
+  // 指标操作
+  addMetric: (metric: Omit<HealthMetric, 'id'>) => Promise<HealthMetric>;
+  getMetricsByPet: (petId: string) => HealthMetric[];
+  getLatestMetric: (petId: string, type: HealthMetricType) => HealthMetric | null;
+  
+  // 评分
+  calculateScore: (petId: string) => HealthScore;
+  getScore: (petId: string) => HealthScore;
+  
+  // 趋势
+  getTrend: (petId: string, type: HealthMetricType) => HealthTrend;
+  
+  // 提醒
+  addAlert: (alert: Omit<HealthAlert, 'id' | 'createdAt'>) => void;
+  completeAlert: (id: string) => void;
+  getAlertsByPet: (petId: string) => HealthAlert[];
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+const generateId = () => `health-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// 模拟健康数据
+const mockMetrics: HealthMetric[] = [
+  {
+    id: 'metric-1',
+    petId: 'pet-1',
+    type: 'weight',
+    value: 12.5,
+    unit: 'kg',
+    timestamp: new Date().toISOString(),
+    status: 'normal',
+  },
+  {
+    id: 'metric-2',
+    petId: 'pet-1',
+    type: 'temperature',
+    value: 38.5,
+    unit: '°C',
+    timestamp: new Date().toISOString(),
+    status: 'normal',
+  },
+  {
+    id: 'metric-3',
+    petId: 'pet-1',
+    type: 'heartRate',
+    value: 120,
+    unit: 'bpm',
+    timestamp: new Date().toISOString(),
+    status: 'normal',
+  },
+];
+
+const mockScore: HealthScore = {
+  overall: 85,
+  physical: 90,
+  mental: 80,
+  nutrition: 85,
+  activity: 75,
+  lastUpdated: new Date().toISOString(),
+};
+
+export const useHealthStore = create<HealthState>()(
+  persist(
+    (set, get) => ({
+      metrics: [],
+      scores: {},
+      alerts: [],
+      isLoading: false,
+
+      addMetric: async (metricData) => {
+        const newMetric: HealthMetric = {
+          ...metricData,
+          id: generateId(),
+        };
+        
+        set((state) => ({
+          metrics: [...state.metrics, newMetric],
+        }));
+        
+        return newMetric;
+      },
+
+      getMetricsByPet: (petId) => {
+        return get().metrics.filter((m) => m.petId === petId);
+      },
+
+      getLatestMetric: (petId, type) => {
+        const metrics = get().getMetricsByPet(petId).filter((m) => m.type === type);
+        return metrics.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())[0] || null;
+      },
+
+      calculateScore: (petId) => {
+        const metrics = get().getMetricsByPet(petId);
+        
+        // 基于指标计算评分
+        const weightMetric = metrics.find((m) => m.type === 'weight');
+        const activityMetric = metrics.find((m) => m.type === 'activity');
+        
+        const score: HealthScore = {
+          overall: 85,
+          physical: weightMetric?.status === 'normal' ? 90 : 70,
+          mental: 80,
+          nutrition: 85,
+          activity: activityMetric?.status === 'normal' ? 75 : 60,
+          lastUpdated: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          scores: { ...state.scores, [petId]: score },
+        }));
+        
+        return score;
+      },
+
+      getScore: (petId) => {
+        const scores = get().scores || {};
+        return scores[petId] || mockScore;
+      },
+
+      getTrend: (petId, type) => {
+        const metrics = get().getMetricsByPet(petId)
+          .filter((m) => m.type === type)
+          .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+        
+        const data = metrics.slice(-7).map((m) => ({
+          date: m.timestamp.split('T')[0],
+          value: m.value,
+        }));
+        
+        // 计算趋势
+        let trend: 'up' | 'down' | 'stable' = 'stable';
+        if (data.length >= 2) {
+          const lastTwo = data.slice(-2);
+          const diff = lastTwo[1].value - lastTwo[0].value;
+          if (diff > 0) trend = 'up';
+          else if (diff < 0) trend = 'down';
+        }
+        
+        return { type, data, trend };
+      },
+
+      addAlert: (alertData) => {
+        const newAlert: HealthAlert = {
+          ...alertData,
+          id: generateId(),
+          createdAt: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          alerts: [...state.alerts, newAlert],
+        }));
+      },
+
+      completeAlert: (id) => {
+        set((state) => ({
+          alerts: state.alerts.map((a) =>
+            a.id === id ? { ...a, completed: true } : a
+          ),
+        }));
+      },
+
+      getAlertsByPet: (petId) => {
+        return get().alerts.filter((a) => a.petId === petId && !a.completed);
+      },
+
+      initialize: async () => {
+        set({ isLoading: true });
+        
+        if (get().metrics.length === 0) {
+          set({ metrics: mockMetrics });
+        }
+        
+        if (!get().scores['pet-1']) {
+          set({ scores: { 'pet-1': mockScore } });
+        }
+        
+        set({ isLoading: false });
+      },
+    }),
+    {
+      name: 'pawsync-health-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        metrics: state.metrics.slice(0, 200),
+        scores: state.scores,
+        alerts: state.alerts,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 00000000..46d54c31
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,26 @@
+// Store 统一导出
+export { useAppStore } from './appStore';
+export { usePetStore } from './petStore';
+export { useBondStore } from './bondStore';
+export { useReminderStore } from './reminderStore';
+export { useHealthRecordStore } from './healthRecordStore';
+export { useCameraStore } from './cameraStore';
+export { useMonitorStore } from './monitorStore';
+export { useEmotionStore } from './emotionStore';
+export { useTrainingStore } from './trainingStore';
+export { useMedicalStore } from './medicalStore';
+export { useInsuranceStore } from './insuranceStore';
+export { useAIConsultationStore } from './aiConsultationStore';
+export { useHealthManualStore } from './healthManualStore';
+
+// 新增 Store 导出
+export { useDevicesStore } from './devicesStore';
+export { useDietStore } from './dietStore';
+export { useRecordsStore } from './recordsStore';
+export { useHealthStore } from './healthStore';
+export { useFavoritesStore } from './favoritesStore';
+export { useSettingsStore } from './settingsStore';
+export { useUserProfileStore } from './userProfileStore';
+export { useTranslatorStore } from './translatorStore';
+export { useServicesStore } from './servicesStore';
+export { useHealthReportStore } from './healthReportStore';
\ No newline at end of file
diff --git a/src/store/insuranceStore.ts b/src/store/insuranceStore.ts
index bb1a8014..e7e5a279 100644
--- a/src/store/insuranceStore.ts
+++ b/src/store/insuranceStore.ts
@@ -106,5 +106,9 @@ export const useInsuranceStore = create<InsuranceStore>((set, get) => ({
     
     set((state) => ({ claims: [claim, ...state.claims] }));
     return true;
+  },
+
+  initialize: async () => {
+    console.log('[InsuranceStore] Initialized');
   }
 }));
diff --git a/src/store/medicalStore.ts b/src/store/medicalStore.ts
index 3f6116f1..b4ab7760 100644
--- a/src/store/medicalStore.ts
+++ b/src/store/medicalStore.ts
@@ -103,5 +103,9 @@ export const useMedicalStore = create<MedicalStore>((set, _get) => ({
       id: Date.now().toString()
     };
     set((state) => ({ medicalRecords: [newRecord, ...state.medicalRecords] }));
+  },
+
+  initialize: async () => {
+    console.log('[MedicalStore] Initialized');
   }
 }));
diff --git a/src/store/petStore.ts b/src/store/petStore.ts
index 48afcb56..3c7e99e2 100644
--- a/src/store/petStore.ts
+++ b/src/store/petStore.ts
@@ -1,6 +1,34 @@
 import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
 import { Pet, PetVaccine, PetCheckup, PetGrowth, PetType, generateUniqueCode, getPetTemplate } from '../types/pet';
 
+// Capacitor 原生存储适配器
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
 interface PetStore {
   pets: Pet[];
   currentPetId: string | null;
@@ -24,6 +52,7 @@ interface PetStore {
   
   importPetsFromCSV: (data: string) => { success: number; duplicates: number; errors: string[] };
   importPetsFromJSON: (data: Pet[]) => { success: number; duplicates: number; errors: string[] };
+  initialize: () => Promise<void>;
 }
 
 const INITIAL_PETS: Pet[] = [
@@ -59,229 +88,259 @@ const INITIAL_PETS: Pet[] = [
   },
 ];
 
-export const usePetStore = create<PetStore>((set, get) => ({
-  pets: INITIAL_PETS,
-  currentPetId: '1',
-  vaccines: [],
-  checkups: [],
-  growthRecords: [],
+export const usePetStore = create<PetStore>()(
+  persist(
+    (set, get) => ({
+      pets: INITIAL_PETS,
+      currentPetId: '1',
+      vaccines: [],
+      checkups: [],
+      growthRecords: [],
 
-  addPet: (pet) => {
-    const template = getPetTemplate(pet.type);
-    const newPet: Pet = {
-      ...pet,
-      id: Date.now().toString(),
-      uniqueCode: generateUniqueCode(),
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
-      exoticFields: template?.exoticFields || pet.exoticFields,
-    };
-    set((state) => ({
-      pets: [...state.pets, newPet],
-      currentPetId: newPet.id,
-    }));
-  },
+      addPet: (pet) => {
+        const template = getPetTemplate(pet.type);
+        const newPet: Pet = {
+          ...pet,
+          id: Date.now().toString(),
+          uniqueCode: generateUniqueCode(),
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          exoticFields: template?.exoticFields || pet.exoticFields,
+        };
+        set((state) => ({
+          pets: [...state.pets, newPet],
+          currentPetId: newPet.id,
+        }));
+      },
 
-  updatePet: (id, updates) => {
-    set((state) => ({
-      pets: state.pets.map((pet) =>
-        pet.id === id ? { ...pet, ...updates, updatedAt: new Date().toISOString() } : pet
-      ),
-    }));
-  },
+      updatePet: (id, updates) => {
+        set((state) => ({
+          pets: state.pets.map((pet) =>
+            pet.id === id ? { ...pet, ...updates, updatedAt: new Date().toISOString() } : pet
+          ),
+        }));
+      },
 
-  deletePet: (id, keepHealthData = false) => {
-    set((state) => {
-      const newVaccines = keepHealthData ? state.vaccines : state.vaccines.filter(v => v.petId !== id);
-      const newCheckups = keepHealthData ? state.checkups : state.checkups.filter(c => c.petId !== id);
-      const newGrowthRecords = keepHealthData ? state.growthRecords : state.growthRecords.filter(g => g.petId !== id);
-      
-      return {
-        pets: state.pets.filter((pet) => pet.id !== id),
-        currentPetId: state.currentPetId === id ? state.pets[0]?.id || null : state.currentPetId,
-        vaccines: newVaccines,
-        checkups: newCheckups,
-        growthRecords: newGrowthRecords,
-      };
-    });
-  },
+      deletePet: (id, keepHealthData = false) => {
+        set((state) => {
+          const newVaccines = keepHealthData ? state.vaccines : state.vaccines.filter(v => v.petId !== id);
+          const newCheckups = keepHealthData ? state.checkups : state.checkups.filter(c => c.petId !== id);
+          const newGrowthRecords = keepHealthData ? state.growthRecords : state.growthRecords.filter(g => g.petId !== id);
+          
+          return {
+            pets: state.pets.filter((pet) => pet.id !== id),
+            currentPetId: state.currentPetId === id ? state.pets[0]?.id || null : state.currentPetId,
+            vaccines: newVaccines,
+            checkups: newCheckups,
+            growthRecords: newGrowthRecords,
+          };
+        });
+      },
 
-  setCurrentPet: (id) => set({ currentPetId: id }),
+      setCurrentPet: (id) => set({ currentPetId: id }),
 
-  addVaccine: (vaccine) => {
-    const newVaccine: PetVaccine = {
-      ...vaccine,
-      id: Date.now().toString(),
-    };
-    set((state) => ({
-      vaccines: [...state.vaccines, newVaccine],
-    }));
-  },
+      addVaccine: (vaccine) => {
+        const newVaccine: PetVaccine = {
+          ...vaccine,
+          id: Date.now().toString(),
+        };
+        set((state) => ({
+          vaccines: [...state.vaccines, newVaccine],
+        }));
+      },
 
-  addCheckup: (checkup) => {
-    const newCheckup: PetCheckup = {
-      ...checkup,
-      id: Date.now().toString(),
-    };
-    set((state) => ({
-      checkups: [...state.checkups, newCheckup],
-    }));
-  },
+      addCheckup: (checkup) => {
+        const newCheckup: PetCheckup = {
+          ...checkup,
+          id: Date.now().toString(),
+        };
+        set((state) => ({
+          checkups: [...state.checkups, newCheckup],
+        }));
+      },
 
-  addGrowthRecord: (record) => {
-    const newRecord: PetGrowth = {
-      ...record,
-      id: Date.now().toString(),
-    };
-    set((state) => ({
-      growthRecords: [...state.growthRecords, newRecord],
-    }));
-  },
+      addGrowthRecord: (record) => {
+        const newRecord: PetGrowth = {
+          ...record,
+          id: Date.now().toString(),
+        };
+        set((state) => ({
+          growthRecords: [...state.growthRecords, newRecord],
+        }));
+      },
 
-  getCurrentPet: () => {
-    const state = get();
-    return state.pets.find((pet) => pet.id === state.currentPetId) || null;
-  },
+      getCurrentPet: () => {
+        const state = get();
+        const pets = state.pets || [];
+        return pets.find((pet) => pet?.id === state.currentPetId) || null;
+      },
 
-  getPetVaccines: (petId) => get().vaccines.filter((v) => v.petId === petId),
-  getPetCheckups: (petId) => get().checkups.filter((c) => c.petId === petId),
-  getPetGrowth: (petId) => get().growthRecords.filter((g) => g.petId === petId),
+      getPetVaccines: (petId) => {
+        const vaccines = get().vaccines || [];
+        return vaccines.filter((v) => v?.petId === petId);
+      },
+      getPetCheckups: (petId) => {
+        const checkups = get().checkups || [];
+        return checkups.filter((c) => c?.petId === petId);
+      },
+      getPetGrowth: (petId) => {
+        const growthRecords = get().growthRecords || [];
+        return growthRecords.filter((g) => g?.petId === petId);
+      },
 
-  importPetsFromCSV: (csvData) => {
-    const result = { success: 0, duplicates: 0, errors: [] as string[] };
-    const lines = csvData.trim().split('\n');
-    
-    if (lines.length < 2) {
-      result.errors.push('CSV文件格式错误：至少需要标题行和一行数据');
-      return result;
-    }
-    
-    const headers = lines[0].split(',').map(h => h.trim().toLowerCase());
-    const existingPets = get().pets;
-    
-    for (let i = 1; i < lines.length; i++) {
-      try {
-        const values = lines[i].split(',').map(v => v.trim());
-        const petData: Record<string, string> = {};
-        
-        headers.forEach((header, index) => {
-          petData[header] = values[index] || '';
-        });
+      importPetsFromCSV: (csvData) => {
+        const result = { success: 0, duplicates: 0, errors: [] as string[] };
+        const lines = csvData.trim().split('\n');
         
-        const name = petData['name'] || petData['名称'] || petData['宠物名'];
-        if (!name) {
-          result.errors.push(`第${i + 1}行：缺少宠物名称`);
-          continue;
+        if (lines.length < 2) {
+          result.errors.push('CSV文件格式错误：至少需要标题行和一行数据');
+          return result;
         }
         
-        const isDuplicate = existingPets.some(p => 
-          p.name.toLowerCase() === name.toLowerCase() && 
-          p.breed === (petData['breed'] || petData['品种'])
-        );
+        const headers = lines[0].split(',').map(h => h.trim().toLowerCase());
+        const existingPets = get().pets;
         
-        if (isDuplicate) {
-          result.duplicates++;
-          continue;
+        for (let i = 1; i < lines.length; i++) {
+          try {
+            const values = lines[i].split(',').map(v => v.trim());
+            const petData: Record<string, string> = {};
+            
+            headers.forEach((header, index) => {
+              petData[header] = values[index] || '';
+            });
+            
+            const name = petData['name'] || petData['名称'] || petData['宠物名'];
+            if (!name) {
+              result.errors.push(`第${i + 1}行：缺少宠物名称`);
+              continue;
+            }
+            
+            const isDuplicate = existingPets.some(p => 
+              p.name.toLowerCase() === name.toLowerCase() && 
+              p.breed === (petData['breed'] || petData['品种'])
+            );
+            
+            if (isDuplicate) {
+              result.duplicates++;
+              continue;
+            }
+            
+            const typeMap: Record<string, PetType> = {
+              '狗': 'dog', '犬': 'dog', 'dog': 'dog',
+              '猫': 'cat', 'cat': 'cat',
+              '兔子': 'rabbit', 'rabbit': 'rabbit',
+              '仓鼠': 'hamster', 'hamster': 'hamster',
+              '豚鼠': 'guinea_pig', 'guinea_pig': 'guinea_pig',
+              '鹦鹉': 'parrot', 'parrot': 'parrot',
+              '玄凤': 'cockatiel', 'cockatiel': 'cockatiel',
+              '乌龟': 'turtle', 'turtle': 'turtle',
+              '蜥蜴': 'lizard', 'lizard': 'lizard',
+              '蛇': 'snake', 'snake': 'snake',
+              '鱼': 'fish', 'fish': 'fish',
+            };
+            
+            const typeInput = (petData['type'] || petData['类型'] || petData['宠物类型'] || 'other').toLowerCase();
+            const type = typeMap[typeInput] || 'other';
+            
+            const genderMap: Record<string, 'male' | 'female' | 'unknown'> = {
+              '公': 'male', '雄': 'male', 'male': 'male',
+              '母': 'female', '雌': 'female', 'female': 'female',
+            };
+            const genderInput = (petData['gender'] || petData['性别'] || '').toLowerCase();
+            const gender = genderMap[genderInput] || 'unknown';
+            
+            const template = getPetTemplate(type);
+            const newPet: Pet = {
+              id: Date.now().toString() + i,
+              uniqueCode: generateUniqueCode(),
+              name,
+              type,
+              breed: petData['breed'] || petData['品种'] || '',
+              gender,
+              birthday: petData['birthday'] || petData['生日'] || petData['出生日期'] || '',
+              weight: parseFloat(petData['weight'] || petData['体重'] || '0') || 0,
+              color: petData['color'] || petData['毛色'] || petData['颜色'] || '',
+              createdAt: new Date().toISOString(),
+              healthStatus: 'good',
+              characteristics: petData['characteristics'] || petData['特点'] || petData['性格'] || '',
+              exoticFields: template?.exoticFields,
+            };
+            
+            set((state) => ({ pets: [...state.pets, newPet] }));
+            result.success++;
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          } catch (_error) {
+            result.errors.push(`第${i + 1}行：解析错误`);
+          }
         }
         
-        const typeMap: Record<string, PetType> = {
-          '狗': 'dog', '犬': 'dog', 'dog': 'dog',
-          '猫': 'cat', 'cat': 'cat',
-          '兔子': 'rabbit', 'rabbit': 'rabbit',
-          '仓鼠': 'hamster', 'hamster': 'hamster',
-          '豚鼠': 'guinea_pig', 'guinea_pig': 'guinea_pig',
-          '鹦鹉': 'parrot', 'parrot': 'parrot',
-          '玄凤': 'cockatiel', 'cockatiel': 'cockatiel',
-          '乌龟': 'turtle', 'turtle': 'turtle',
-          '蜥蜴': 'lizard', 'lizard': 'lizard',
-          '蛇': 'snake', 'snake': 'snake',
-          '鱼': 'fish', 'fish': 'fish',
-        };
-        
-        const typeInput = (petData['type'] || petData['类型'] || petData['宠物类型'] || 'other').toLowerCase();
-        const type = typeMap[typeInput] || 'other';
-        
-        const genderMap: Record<string, 'male' | 'female' | 'unknown'> = {
-          '公': 'male', '雄': 'male', 'male': 'male',
-          '母': 'female', '雌': 'female', 'female': 'female',
-        };
-        const genderInput = (petData['gender'] || petData['性别'] || '').toLowerCase();
-        const gender = genderMap[genderInput] || 'unknown';
-        
-        const template = getPetTemplate(type);
-        const newPet: Pet = {
-          id: Date.now().toString() + i,
-          uniqueCode: generateUniqueCode(),
-          name,
-          type,
-          breed: petData['breed'] || petData['品种'] || '',
-          gender,
-          birthday: petData['birthday'] || petData['生日'] || petData['出生日期'] || '',
-          weight: parseFloat(petData['weight'] || petData['体重'] || '0') || 0,
-          color: petData['color'] || petData['毛色'] || petData['颜色'] || '',
-          createdAt: new Date().toISOString(),
-          healthStatus: 'good',
-          characteristics: petData['characteristics'] || petData['特点'] || petData['性格'] || '',
-          exoticFields: template?.exoticFields,
-        };
-        
-        set((state) => ({ pets: [...state.pets, newPet] }));
-        result.success++;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (_error) {
-        result.errors.push(`第${i + 1}行：解析错误`);
-      }
-    }
-    
-    return result;
-  },
+        return result;
+      },
 
-  importPetsFromJSON: (data) => {
-    const result = { success: 0, duplicates: 0, errors: [] as string[] };
-    const existingPets = get().pets;
-    
-    data.forEach((pet, index) => {
-      try {
-        if (!pet.name) {
-          result.errors.push(`第${index + 1}条：缺少宠物名称`);
-          return;
-        }
-        
-        const isDuplicate = existingPets.some(p => 
-          p.name.toLowerCase() === pet.name.toLowerCase() && 
-          p.breed === pet.breed
-        );
-        
-        if (isDuplicate) {
-          result.duplicates++;
-          return;
-        }
+      importPetsFromJSON: (data) => {
+        const result = { success: 0, duplicates: 0, errors: [] as string[] };
+        const existingPets = get().pets;
         
-        const template = getPetTemplate(pet.type || 'other');
-        const newPet: Pet = {
-          id: Date.now().toString() + index,
-          uniqueCode: generateUniqueCode(),
-          name: pet.name,
-          type: pet.type || 'other',
-          breed: pet.breed || '',
-          gender: pet.gender || 'unknown',
-          birthday: pet.birthday || '',
-          weight: pet.weight || 0,
-          color: pet.color || '',
-          createdAt: new Date().toISOString(),
-          healthStatus: pet.healthStatus || 'good',
-          characteristics: pet.characteristics || '',
-          exoticFields: pet.exoticFields || template?.exoticFields,
-        };
+        data.forEach((pet, index) => {
+          try {
+            if (!pet.name) {
+              result.errors.push(`第${index + 1}条：缺少宠物名称`);
+              return;
+            }
+            
+            const isDuplicate = existingPets.some(p => 
+              p.name.toLowerCase() === pet.name.toLowerCase() && 
+              p.breed === pet.breed
+            );
+            
+            if (isDuplicate) {
+              result.duplicates++;
+              return;
+            }
+            
+            const template = getPetTemplate(pet.type || 'other');
+            const newPet: Pet = {
+              id: Date.now().toString() + index,
+              uniqueCode: generateUniqueCode(),
+              name: pet.name,
+              type: pet.type || 'other',
+              breed: pet.breed || '',
+              gender: pet.gender || 'unknown',
+              birthday: pet.birthday || '',
+              weight: pet.weight || 0,
+              color: pet.color || '',
+              createdAt: new Date().toISOString(),
+              healthStatus: pet.healthStatus || 'good',
+              characteristics: pet.characteristics || '',
+              exoticFields: pet.exoticFields || template?.exoticFields,
+            };
+            
+            set((state) => ({ pets: [...state.pets, newPet] }));
+            result.success++;
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          } catch (_error) {
+            result.errors.push(`第${index + 1}条：解析错误`);
+          }
+        });
         
-        set((state) => ({ pets: [...state.pets, newPet] }));
-        result.success++;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      } catch (_error) {
-        result.errors.push(`第${index + 1}条：解析错误`);
-      }
-    });
-    
-    return result;
-  },
-}));
+        return result;
+      },
+
+      initialize: async () => {
+        // 初始化逻辑 - 如果有需要可以在这里加载初始数据
+        console.log('[PetStore] Initialized');
+      },
+    }),
+    {
+      name: 'pawsync-pets-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        pets: state.pets,
+        currentPetId: state.currentPetId,
+        vaccines: state.vaccines,
+        checkups: state.checkups,
+        growthRecords: state.growthRecords,
+      }),
+    }
+  )
+);
diff --git a/src/store/recordsStore.ts b/src/store/recordsStore.ts
new file mode 100644
index 00000000..cb2c10ce
--- /dev/null
+++ b/src/store/recordsStore.ts
@@ -0,0 +1,339 @@
+/**
+ * Records Store - 记录管理数据存储
+ *
+ * 管理宠物日常记录、时间线、历史数据等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 记录类型
+export type RecordType = 'feeding' | 'drinking' | 'activity' | 'health' | 'grooming' | 'training' | 'other';
+
+// 记录状态
+export type RecordStatus = 'normal' | 'warning' | 'alert';
+
+// 记录接口
+export interface Record {
+  id: string;
+  petId: string;
+  type: RecordType;
+  title: string;
+  description: string;
+  time: string;
+  date: string;
+  status: RecordStatus;
+  tag?: string;
+  tagColor?: string;
+  image?: string;
+  location?: string;
+  duration?: number; // 分钟
+  amount?: number; // 数量
+  unit?: string; // 单位
+  note?: string;
+  createdAt: string;
+}
+
+// 日期汇总
+export interface DateSummary {
+  date: string;
+  feeding: number;
+  drinking: number;
+  activity: number;
+  health: number;
+  grooming: number;
+  training: number;
+  other: number;
+}
+
+// Store 接口
+interface RecordsState {
+  records: Record[];
+  summaries: DateSummary[];
+  selectedDate: string;
+  activeFilter: RecordType | 'all';
+  isLoading: boolean;
+  
+  // 记录操作
+  addRecord: (record: Omit<Record, 'id' | 'createdAt'>) => Promise<Record>;
+  updateRecord: (id: string, updates: Partial<Record>) => Promise<void>;
+  deleteRecord: (id: string) => Promise<void>;
+  
+  // 查询
+  getRecordsByDate: (date: string) => Record[];
+  getRecordsByPet: (petId: string) => Record[];
+  getRecordsByType: (type: RecordType) => Record[];
+  getFilteredRecords: (petId: string, type?: RecordType | 'all') => Record[];
+  
+  // 汇总
+  getDateSummary: (date: string) => DateSummary;
+  generateSummary: (date: string) => void;
+  
+  // 设置
+  setSelectedDate: (date: string) => void;
+  setActiveFilter: (type: RecordType | 'all') => void;
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+// Capacitor 原生存储适配
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+// 生成唯一ID
+const generateId = () => `record-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// 获取今天日期
+const getTodayDate = () => new Date().toISOString().split('T')[0];
+
+// 模拟记录数据
+const mockRecords: Record[] = [
+  {
+    id: 'record-1',
+    petId: 'pet-1',
+    type: 'feeding',
+    title: '喂食',
+    description: '喂食了 120g 狗粮',
+    time: '08:30',
+    date: getTodayDate(),
+    status: 'normal',
+    tag: '主食',
+    tagColor: '#F59E0B',
+    amount: 120,
+    unit: 'g',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: 'record-2',
+    petId: 'pet-1',
+    type: 'drinking',
+    title: '饮水',
+    description: '喝水 200ml',
+    time: '10:15',
+    date: getTodayDate(),
+    status: 'normal',
+    amount: 200,
+    unit: 'ml',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: 'record-3',
+    petId: 'pet-1',
+    type: 'activity',
+    title: '活动',
+    description: '散步 30 分钟，消耗 120 kcal',
+    time: '14:00',
+    date: getTodayDate(),
+    status: 'normal',
+    duration: 30,
+    image: 'https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=200&h=200&fit=crop',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: 'record-4',
+    petId: 'pet-1',
+    type: 'health',
+    title: '健康',
+    description: '体重 12.5kg',
+    time: '20:00',
+    date: getTodayDate(),
+    status: 'normal',
+    amount: 12.5,
+    unit: 'kg',
+    createdAt: new Date().toISOString(),
+  },
+  {
+    id: 'record-5',
+    petId: 'pet-1',
+    type: 'grooming',
+    title: '护理',
+    description: '洗澡，驱虫',
+    time: '21:30',
+    date: getTodayDate(),
+    status: 'normal',
+    createdAt: new Date().toISOString(),
+  },
+];
+
+export const useRecordsStore = create<RecordsState>()(
+  persist(
+    (set, get) => ({
+      records: [],
+      summaries: [],
+      selectedDate: getTodayDate(),
+      activeFilter: 'all',
+      isLoading: false,
+
+      // 添加记录
+      addRecord: async (recordData) => {
+        const newRecord: Record = {
+          ...recordData,
+          id: generateId(),
+          createdAt: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          records: [newRecord, ...state.records],
+        }));
+        
+        // 更新汇总
+        get().generateSummary(recordData.date);
+        
+        return newRecord;
+      },
+
+      // 更新记录
+      updateRecord: async (id, updates) => {
+        set((state) => ({
+          records: state.records.map((r) =>
+            r.id === id ? { ...r, ...updates } : r
+          ),
+        }));
+      },
+
+      // 删除记录
+      deleteRecord: async (id) => {
+        const record = get().records.find((r) => r.id === id);
+        
+        set((state) => ({
+          records: state.records.filter((r) => r.id !== id),
+        }));
+        
+        if (record) {
+          get().generateSummary(record.date);
+        }
+      },
+
+      // 按日期查询
+      getRecordsByDate: (date) => {
+        return get().records.filter((r) => r.date === date);
+      },
+
+      // 按宠物查询
+      getRecordsByPet: (petId) => {
+        return get().records.filter((r) => r.petId === petId);
+      },
+
+      // 按类型查询
+      getRecordsByType: (type) => {
+        return get().records.filter((r) => r.type === type);
+      },
+
+      // 过滤查询
+      getFilteredRecords: (petId, type = 'all') => {
+        const allRecords = get().records || [];
+        let filtered = allRecords.filter((r) => r?.petId === petId);
+        
+        if (type !== 'all') {
+          filtered = filtered.filter((r) => r?.type === type);
+        }
+        
+        return filtered.sort((a, b) => {
+          const dateA = new Date(`${a?.date || ''} ${a?.time || ''}`);
+          const dateB = new Date(`${b?.date || ''} ${b?.time || ''}`);
+          return dateB.getTime() - dateA.getTime();
+        });
+      },
+
+      // 获取日期汇总
+      getDateSummary: (date) => {
+        const summaries = get().summaries || [];
+        const summary = summaries.find((s) => s?.date === date);
+        
+        if (summary) return summary;
+        
+        // 生成汇总
+        get().generateSummary(date);
+        const newSummaries = get().summaries || [];
+        return newSummaries.find((s) => s?.date === date) || {
+          date,
+          feeding: 0,
+          drinking: 0,
+          activity: 0,
+          health: 0,
+          grooming: 0,
+          training: 0,
+          other: 0,
+        };
+      },
+
+      // 生成汇总
+      generateSummary: (date) => {
+        const records = get().getRecordsByDate(date);
+        
+        const summary: DateSummary = {
+          date,
+          feeding: records.filter((r) => r.type === 'feeding').length,
+          drinking: records.filter((r) => r.type === 'drinking').length,
+          activity: records.filter((r) => r.type === 'activity').length,
+          health: records.filter((r) => r.type === 'health').length,
+          grooming: records.filter((r) => r.type === 'grooming').length,
+          training: records.filter((r) => r.type === 'training').length,
+          other: records.filter((r) => r.type === 'other').length,
+        };
+        
+        set((state) => ({
+          summaries: [
+            ...state.summaries.filter((s) => s.date !== date),
+            summary,
+          ],
+        }));
+      },
+
+      // 设置日期
+      setSelectedDate: (date) => {
+        set({ selectedDate: date });
+      },
+
+      // 设置过滤类型
+      setActiveFilter: (type) => {
+        set({ activeFilter: type });
+      },
+
+      // 初始化
+      initialize: async () => {
+        set({ isLoading: true });
+        
+        if (get().records.length === 0) {
+          set({ records: mockRecords });
+          get().generateSummary(getTodayDate());
+        }
+        
+        set({ isLoading: false });
+      },
+    }),
+    {
+      name: 'pawsync-records-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        records: state.records.slice(0, 500), // 限制记录数量
+        summaries: state.summaries,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/reminderStore.ts b/src/store/reminderStore.ts
index b94015b2..fd0279e6 100644
--- a/src/store/reminderStore.ts
+++ b/src/store/reminderStore.ts
@@ -1,6 +1,34 @@
 import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
 import { Reminder, ReminderType, REMINDER_TYPES as _REMINDER_TYPES, NotificationChannel } from '../types/reminder';
 
+// Capacitor 原生存储适配器
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
 interface ReminderStore {
   reminders: Reminder[];
   selectedType: ReminderType | null;
@@ -18,6 +46,7 @@ interface ReminderStore {
   getUpcomingReminders: (petId: string, limit: number) => Reminder[];
   getSmartRecommendations: (petId: string, petBirthday?: string, lastVaccineDate?: string, lastDewormingDate?: string) => Array<{ type: ReminderType; suggestedDate: string; suggestedTime: string; reason: string; priority: 'high' | 'medium' | 'low' }>;
   sendNotification: (reminder: Reminder, channels: NotificationChannel[]) => Promise<boolean>;
+  initialize: () => Promise<void>;
 }
 
 // 示例数据
@@ -58,235 +87,258 @@ const INITIAL_REMINDERS: Reminder[] = [
   },
 ];
 
-export const useReminderStore = create<ReminderStore>((set, get) => ({
-  reminders: INITIAL_REMINDERS,
-  selectedType: null,
-  viewMode: 'all',
+export const useReminderStore = create<ReminderStore>()(
+  persist(
+    (set, get) => ({
+      reminders: INITIAL_REMINDERS,
+      selectedType: null,
+      viewMode: 'all',
 
-  addReminder: (reminder) => {
-    const newReminder: Reminder = {
-      ...reminder,
-      id: Date.now().toString(),
-      isCompleted: false,
-      createdAt: new Date().toISOString(),
-    };
-    set((state) => ({
-      reminders: [...state.reminders, newReminder],
-    }));
-  },
+      addReminder: (reminder) => {
+        const newReminder: Reminder = {
+          ...reminder,
+          id: Date.now().toString(),
+          isCompleted: false,
+          createdAt: new Date().toISOString(),
+        };
+        set((state) => ({
+          reminders: [...state.reminders, newReminder],
+        }));
+      },
 
-  updateReminder: (id, updates) => {
-    set((state) => ({
-      reminders: state.reminders.map((reminder) =>
-        reminder.id === id ? { ...reminder, ...updates } : reminder
-      ),
-    }));
-  },
+      updateReminder: (id, updates) => {
+        set((state) => ({
+          reminders: state.reminders.map((reminder) =>
+            reminder.id === id ? { ...reminder, ...updates } : reminder
+          ),
+        }));
+      },
 
-  deleteReminder: (id) => {
-    set((state) => ({
-      reminders: state.reminders.filter((reminder) => reminder.id !== id),
-    }));
-  },
+      deleteReminder: (id) => {
+        set((state) => ({
+          reminders: state.reminders.filter((reminder) => reminder.id !== id),
+        }));
+      },
 
-  toggleComplete: (id) => {
-    set((state) => ({
-      reminders: state.reminders.map((reminder) =>
-        reminder.id === id
-          ? {
-              ...reminder,
-              isCompleted: !reminder.isCompleted,
-              completedAt: !reminder.isCompleted ? new Date().toISOString() : undefined,
-            }
-          : reminder
-      ),
-    }));
-  },
+      toggleComplete: (id) => {
+        set((state) => ({
+          reminders: state.reminders.map((reminder) =>
+            reminder.id === id
+              ? {
+                  ...reminder,
+                  isCompleted: !reminder.isCompleted,
+                  completedAt: !reminder.isCompleted ? new Date().toISOString() : undefined,
+                }
+              : reminder
+          ),
+        }));
+      },
 
-  setSelectedType: (type) => set({ selectedType: type }),
-  setViewMode: (mode) => set({ viewMode: mode }),
+      setSelectedType: (type) => set({ selectedType: type }),
+      setViewMode: (mode) => set({ viewMode: mode }),
 
-  getFilteredReminders: (petId) => {
-    const state = get();
-    let filtered = state.reminders.filter((r) => r.petId === petId);
-    
-    if (state.selectedType) {
-      filtered = filtered.filter((r) => r.type === state.selectedType);
-    }
-    
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const weekEnd = new Date(today);
-    weekEnd.setDate(weekEnd.getDate() + 7);
-    
-    if (state.viewMode === 'today') {
-      const tomorrow = new Date(today);
-      tomorrow.setDate(tomorrow.getDate() + 1);
-      filtered = filtered.filter((r) => {
-        const reminderDate = new Date(r.date);
-        return reminderDate >= today && reminderDate < tomorrow;
-      });
-    } else if (state.viewMode === 'week') {
-      filtered = filtered.filter((r) => {
-        const reminderDate = new Date(r.date);
-        return reminderDate >= today && reminderDate < weekEnd;
-      });
-    }
-    
-    return filtered.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
-  },
+      getFilteredReminders: (petId) => {
+        const state = get();
+        const reminders = state.reminders || [];
+        let filtered = reminders.filter((r) => r?.petId === petId);
+        
+        if (state.selectedType) {
+          filtered = filtered.filter((r) => r?.type === state.selectedType);
+        }
+        
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const weekEnd = new Date(today);
+        weekEnd.setDate(weekEnd.getDate() + 7);
+        
+        if (state.viewMode === 'today') {
+          const tomorrow = new Date(today);
+          tomorrow.setDate(tomorrow.getDate() + 1);
+          filtered = filtered.filter((r) => {
+            const reminderDate = new Date(r.date);
+            return reminderDate >= today && reminderDate < tomorrow;
+          });
+        } else if (state.viewMode === 'week') {
+          filtered = filtered.filter((r) => {
+            const reminderDate = new Date(r.date);
+            return reminderDate >= today && reminderDate < weekEnd;
+          });
+        }
+        
+        return filtered.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+      },
 
-  getUpcomingReminders: (petId, limit) => {
-    const state = get();
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    
-    return state.reminders
-      .filter((r) => r.petId === petId && !r.isCompleted && new Date(r.date) >= today)
-      .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
-      .slice(0, limit);
-  },
+      getUpcomingReminders: (petId, limit) => {
+        const state = get();
+        const reminders = state.reminders || [];
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        
+        return reminders
+          .filter((r) => r?.petId === petId && !r?.isCompleted && new Date(r?.date || '') >= today)
+          .sort((a, b) => new Date(a?.date || '').getTime() - new Date(b?.date || '').getTime())
+          .slice(0, limit);
+      },
 
-  getSmartRecommendations: (petId, petBirthday, lastVaccineDate, lastDewormingDate) => {
-    const recommendations: Array<{ type: ReminderType; suggestedDate: string; suggestedTime: string; reason: string; priority: 'high' | 'medium' | 'low' }> = [];
-    const today = new Date();
-    const state = get();
-    
-    const existingReminders = state.reminders.filter(r => r.petId === petId);
+      getSmartRecommendations: (petId, petBirthday, lastVaccineDate, lastDewormingDate) => {
+        const recommendations: Array<{ type: ReminderType; suggestedDate: string; suggestedTime: string; reason: string; priority: 'high' | 'medium' | 'low' }> = [];
+        const today = new Date();
+        const state = get();
+        
+        const existingReminders = state.reminders.filter(r => r.petId === petId);
 
-    if (petBirthday) {
-      const birthday = new Date(petBirthday);
-      const thisYearBirthday = new Date(today.getFullYear(), birthday.getMonth(), birthday.getDate());
-      if (thisYearBirthday < today) {
-        thisYearBirthday.setFullYear(today.getFullYear() + 1);
-      }
-      const daysUntilBirthday = Math.ceil((thisYearBirthday.getTime() - today.getTime()) / (24 * 60 * 60 * 1000));
-      
-      const hasBirthdayReminder = existingReminders.some(r => 
-        r.type === 'birthday' && 
-        new Date(r.date).toDateString() === thisYearBirthday.toDateString()
-      );
-      
-      if (!hasBirthdayReminder && daysUntilBirthday <= 90) {
-        recommendations.push({
-          type: 'birthday',
-          suggestedDate: thisYearBirthday.toISOString().split('T')[0],
-          suggestedTime: '09:00',
-          reason: `${thisYearBirthday.getFullYear() - birthday.getFullYear()}岁生日即将到来`,
-          priority: daysUntilBirthday <= 30 ? 'high' : 'medium',
-        });
-      }
-    }
+        if (petBirthday) {
+          const birthday = new Date(petBirthday);
+          const thisYearBirthday = new Date(today.getFullYear(), birthday.getMonth(), birthday.getDate());
+          if (thisYearBirthday < today) {
+            thisYearBirthday.setFullYear(today.getFullYear() + 1);
+          }
+          const daysUntilBirthday = Math.ceil((thisYearBirthday.getTime() - today.getTime()) / (24 * 60 * 60 * 1000));
+          
+          const hasBirthdayReminder = existingReminders.some(r => 
+            r.type === 'birthday' && 
+            new Date(r.date).toDateString() === thisYearBirthday.toDateString()
+          );
+          
+          if (!hasBirthdayReminder && daysUntilBirthday <= 90) {
+            recommendations.push({
+              type: 'birthday',
+              suggestedDate: thisYearBirthday.toISOString().split('T')[0],
+              suggestedTime: '09:00',
+              reason: `${thisYearBirthday.getFullYear() - birthday.getFullYear()}岁生日即将到来`,
+              priority: daysUntilBirthday <= 30 ? 'high' : 'medium',
+            });
+          }
+        }
 
-    if (lastVaccineDate) {
-      const lastVaccine = new Date(lastVaccineDate);
-      const nextVaccine = new Date(lastVaccine);
-      nextVaccine.setFullYear(nextVaccine.getFullYear() + 1);
-      const daysUntilVaccine = Math.ceil((nextVaccine.getTime() - today.getTime()) / (24 * 60 * 60 * 1000));
-      
-      const hasVaccineReminder = existingReminders.some(r => 
-        r.type === 'vaccine' && 
-        Math.abs(new Date(r.date).getTime() - nextVaccine.getTime()) < 7 * 24 * 60 * 60 * 1000
-      );
-      
-      if (!hasVaccineReminder && daysUntilVaccine <= 90 && daysUntilVaccine > 0) {
-        recommendations.push({
-          type: 'vaccine',
-          suggestedDate: nextVaccine.toISOString().split('T')[0],
-          suggestedTime: '10:00',
-          reason: '疫苗年度加强接种时间',
-          priority: daysUntilVaccine <= 30 ? 'high' : 'medium',
-        });
-      }
-    }
+        if (lastVaccineDate) {
+          const lastVaccine = new Date(lastVaccineDate);
+          const nextVaccine = new Date(lastVaccine);
+          nextVaccine.setFullYear(nextVaccine.getFullYear() + 1);
+          const daysUntilVaccine = Math.ceil((nextVaccine.getTime() - today.getTime()) / (24 * 60 * 60 * 1000));
+          
+          const hasVaccineReminder = existingReminders.some(r => 
+            r.type === 'vaccine' && 
+            Math.abs(new Date(r.date).getTime() - nextVaccine.getTime()) < 7 * 24 * 60 * 60 * 1000
+          );
+          
+          if (!hasVaccineReminder && daysUntilVaccine <= 90 && daysUntilVaccine > 0) {
+            recommendations.push({
+              type: 'vaccine',
+              suggestedDate: nextVaccine.toISOString().split('T')[0],
+              suggestedTime: '10:00',
+              reason: '疫苗年度加强接种时间',
+              priority: daysUntilVaccine <= 30 ? 'high' : 'medium',
+            });
+          }
+        }
 
-    if (lastDewormingDate) {
-      const lastDeworming = new Date(lastDewormingDate);
-      const nextDeworming = new Date(lastDeworming);
-      nextDeworming.setMonth(nextDeworming.getMonth() + 3);
-      const daysUntilDeworming = Math.ceil((nextDeworming.getTime() - today.getTime()) / (24 * 60 * 60 * 1000));
-      
-      const hasDewormingReminder = existingReminders.some(r => 
-        r.type === 'deworming' && 
-        Math.abs(new Date(r.date).getTime() - nextDeworming.getTime()) < 7 * 24 * 60 * 60 * 1000
-      );
-      
-      if (!hasDewormingReminder && daysUntilDeworming <= 30 && daysUntilDeworming > 0) {
-        recommendations.push({
-          type: 'deworming',
-          suggestedDate: nextDeworming.toISOString().split('T')[0],
-          suggestedTime: '09:00',
-          reason: '季度驱虫提醒',
-          priority: daysUntilDeworming <= 7 ? 'high' : 'medium',
-        });
-      }
-    }
+        if (lastDewormingDate) {
+          const lastDeworming = new Date(lastDewormingDate);
+          const nextDeworming = new Date(lastDeworming);
+          nextDeworming.setMonth(nextDeworming.getMonth() + 3);
+          const daysUntilDeworming = Math.ceil((nextDeworming.getTime() - today.getTime()) / (24 * 60 * 60 * 1000));
+          
+          const hasDewormingReminder = existingReminders.some(r => 
+            r.type === 'deworming' && 
+            Math.abs(new Date(r.date).getTime() - nextDeworming.getTime()) < 7 * 24 * 60 * 60 * 1000
+          );
+          
+          if (!hasDewormingReminder && daysUntilDeworming <= 30 && daysUntilDeworming > 0) {
+            recommendations.push({
+              type: 'deworming',
+              suggestedDate: nextDeworming.toISOString().split('T')[0],
+              suggestedTime: '09:00',
+              reason: '季度驱虫提醒',
+              priority: daysUntilDeworming <= 7 ? 'high' : 'medium',
+            });
+          }
+        }
 
-    const nextCheckup = new Date(today);
-    nextCheckup.setMonth(nextCheckup.getMonth() + 6);
-    const hasCheckupReminder = existingReminders.some(r => 
-      r.type === 'checkup' && 
-      Math.abs(new Date(r.date).getTime() - nextCheckup.getTime()) < 30 * 24 * 60 * 60 * 1000
-    );
-    
-    if (!hasCheckupReminder) {
-      recommendations.push({
-        type: 'checkup',
-        suggestedDate: nextCheckup.toISOString().split('T')[0],
-        suggestedTime: '10:00',
-        reason: '建议每半年进行一次体检',
-        priority: 'low',
-      });
-    }
+        const nextCheckup = new Date(today);
+        nextCheckup.setMonth(nextCheckup.getMonth() + 6);
+        const hasCheckupReminder = existingReminders.some(r => 
+          r.type === 'checkup' && 
+          Math.abs(new Date(r.date).getTime() - nextCheckup.getTime()) < 30 * 24 * 60 * 60 * 1000
+        );
+        
+        if (!hasCheckupReminder) {
+          recommendations.push({
+            type: 'checkup',
+            suggestedDate: nextCheckup.toISOString().split('T')[0],
+            suggestedTime: '10:00',
+            reason: '建议每半年进行一次体检',
+            priority: 'low',
+          });
+        }
 
-    return recommendations.sort((a, b) => {
-      const priorityOrder = { high: 0, medium: 1, low: 2 };
-      return priorityOrder[a.priority] - priorityOrder[b.priority];
-    });
-  },
+        return recommendations.sort((a, b) => {
+          const priorityOrder = { high: 0, medium: 1, low: 2 };
+          return priorityOrder[a.priority] - priorityOrder[b.priority];
+        });
+      },
 
-  sendNotification: async (reminder, channels) => {
-    try {
-      const notificationContent = {
-        title: reminder.title,
-        body: `提醒时间: ${reminder.date} ${reminder.time}${reminder.notes ? `\n备注: ${reminder.notes}` : ''}`,
-        data: {
-          reminderId: reminder.id,
-          type: reminder.type,
-          petId: reminder.petId,
-        },
-      };
+      sendNotification: async (reminder, channels) => {
+        try {
+          const notificationContent = {
+            title: reminder.title,
+            body: `提醒时间: ${reminder.date} ${reminder.time}${reminder.notes ? `\n备注: ${reminder.notes}` : ''}`,
+            data: {
+              reminderId: reminder.id,
+              type: reminder.type,
+              petId: reminder.petId,
+            },
+          };
 
-      for (const channel of channels) {
-        switch (channel) {
-          case 'app':
-            console.log('发送应用内通知:', notificationContent);
-            break;
-          case 'push':
-            if ('Notification' in window && Notification.permission === 'granted') {
-              new Notification(notificationContent.title, {
-                body: notificationContent.body,
-                icon: '/favicon.ico',
-                tag: reminder.id,
-              });
+          // 使用 pushNotificationService 发送通知（支持Android原生）
+          const { pushNotificationService } = await import('../services/pushNotificationService');
+          
+          for (const channel of channels) {
+            switch (channel) {
+              case 'app':
+                console.log('发送应用内通知:', notificationContent);
+                break;
+              case 'push':
+                // 使用 pushNotificationService 发送推送通知
+                await pushNotificationService.sendNotification(
+                  notificationContent.title,
+                  notificationContent.body,
+                  {
+                    type: 'reminder',
+                    priority: 'normal',
+                    data: notificationContent.data,
+                  }
+                );
+                break;
+              case 'email':
+                console.log('发送邮件通知:', notificationContent);
+                break;
+              case 'sms':
+                console.log('发送短信通知:', notificationContent);
+                break;
+              case 'wechat':
+                console.log('发送微信通知:', notificationContent);
+                break;
             }
-            break;
-          case 'email':
-            console.log('发送邮件通知:', notificationContent);
-            break;
-          case 'sms':
-            console.log('发送短信通知:', notificationContent);
-            break;
-          case 'wechat':
-            console.log('发送微信通知:', notificationContent);
-            break;
+          }
+
+          return true;
+        } catch (error) {
+          console.error('发送通知失败:', error);
+          return false;
         }
-      }
+      },
 
-      return true;
-    } catch (error) {
-      console.error('发送通知失败:', error);
-      return false;
+      initialize: async () => {
+        console.log('[ReminderStore] Initialized');
+      },
+    }),
+    {
+      name: 'pawsync-reminders-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        reminders: state.reminders,
+      }),
     }
-  },
-}));
+  )
+);
diff --git a/src/store/servicesStore.ts b/src/store/servicesStore.ts
new file mode 100644
index 00000000..e054b1e7
--- /dev/null
+++ b/src/store/servicesStore.ts
@@ -0,0 +1,231 @@
+/**
+ * Services Store - 服务管理数据存储
+ *
+ * 管理宠物服务列表、预约记录、服务提供商等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 服务类型
+export type ServiceType = 'grooming' | 'veterinary' | 'training' | 'boarding' | 'walking' | 'photography' | 'other';
+
+// 服务提供商
+export interface ServiceProvider {
+  id: string;
+  name: string;
+  type: ServiceType;
+  description: string;
+  image?: string;
+  rating: number;
+  reviews: number;
+  priceRange: string;
+  location: string;
+  distance?: number;
+  phone?: string;
+  website?: string;
+  features: string[];
+  available: boolean;
+}
+
+// 服务预约
+export interface ServiceAppointment {
+  id: string;
+  petId: string;
+  providerId: string;
+  type: ServiceType;
+  date: string;
+  time: string;
+  status: 'pending' | 'confirmed' | 'completed' | 'cancelled';
+  price?: number;
+  note?: string;
+  createdAt: string;
+}
+
+// Store 接口
+interface ServicesState {
+  providers: ServiceProvider[];
+  appointments: ServiceAppointment[];
+  isLoading: boolean;
+  
+  // 服务提供商
+  getProvidersByType: (type: ServiceType) => ServiceProvider[];
+  getProvidersByLocation: (location: string) => ServiceProvider[];
+  searchProviders: (query: string) => ServiceProvider[];
+  
+  // 预约操作
+  createAppointment: (appointment: Omit<ServiceAppointment, 'id' | 'createdAt'>) => Promise<ServiceAppointment>;
+  updateAppointment: (id: string, updates: Partial<ServiceAppointment>) => void;
+  cancelAppointment: (id: string) => void;
+  
+  // 查询
+  getAppointmentsByPet: (petId: string) => ServiceAppointment[];
+  getUpcomingAppointments: () => ServiceAppointment[];
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+const generateId = () => `service-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// 模拟服务提供商数据
+const mockProviders: ServiceProvider[] = [
+  {
+    id: 'provider-1',
+    name: '宠物美容中心',
+    type: 'grooming',
+    description: '专业宠物美容服务，包括洗澡、剪毛、造型等',
+    rating: 4.8,
+    reviews: 256,
+    priceRange: '¥50-200',
+    location: '市中心',
+    distance: 2.5,
+    phone: '400-123-4567',
+    features: ['专业美容师', '上门服务', '预约灵活'],
+    available: true,
+  },
+  {
+    id: 'provider-2',
+    name: '爱宠宠物医院',
+    type: 'veterinary',
+    description: '24小时宠物医疗服务，专业兽医团队',
+    rating: 4.9,
+    reviews: 512,
+    priceRange: '¥100-500',
+    location: '东区',
+    distance: 3.2,
+    phone: '400-234-5678',
+    features: ['24小时服务', '专业设备', '急诊服务'],
+    available: true,
+  },
+  {
+    id: 'provider-3',
+    name: '宠物训练学校',
+    type: 'training',
+    description: '专业宠物行为训练，纠正不良习惯',
+    rating: 4.7,
+    reviews: 128,
+    priceRange: '¥200-800',
+    location: '西区',
+    distance: 5.0,
+    phone: '400-345-6789',
+    features: ['专业训练师', '一对一训练', '行为纠正'],
+    available: true,
+  },
+];
+
+export const useServicesStore = create<ServicesState>()(
+  persist(
+    (set, get) => ({
+      providers: [],
+      appointments: [],
+      isLoading: false,
+
+      getProvidersByType: (type) => {
+        return get().providers.filter((p) => p.type === type);
+      },
+
+      getProvidersByLocation: (location) => {
+        return get().providers.filter((p) =>
+          p.location.toLowerCase().includes(location.toLowerCase())
+        );
+      },
+
+      searchProviders: (query) => {
+        const lowerQuery = query.toLowerCase();
+        return get().providers.filter((p) =>
+          p.name.toLowerCase().includes(lowerQuery) ||
+          p.description.toLowerCase().includes(lowerQuery) ||
+          p.type.toLowerCase().includes(lowerQuery)
+        );
+      },
+
+      createAppointment: async (appointmentData) => {
+        const newAppointment: ServiceAppointment = {
+          ...appointmentData,
+          id: generateId(),
+          createdAt: new Date().toISOString(),
+        };
+        
+        set((state) => ({
+          appointments: [...state.appointments, newAppointment],
+        }));
+        
+        return newAppointment;
+      },
+
+      updateAppointment: (id, updates) => {
+        set((state) => ({
+          appointments: state.appointments.map((a) =>
+            a.id === id ? { ...a, ...updates } : a
+          ),
+        }));
+      },
+
+      cancelAppointment: (id) => {
+        set((state) => ({
+          appointments: state.appointments.map((a) =>
+            a.id === id ? { ...a, status: 'cancelled' } : a
+          ),
+        }));
+      },
+
+      getAppointmentsByPet: (petId) => {
+        return get().appointments.filter((a) => a.petId === petId);
+      },
+
+      getUpcomingAppointments: () => {
+        const now = new Date();
+        return get().appointments.filter((a) =>
+          a.status !== 'cancelled' && a.status !== 'completed' &&
+          new Date(`${a.date} ${a.time}`) > now
+        );
+      },
+
+      initialize: async () => {
+        set({ isLoading: true });
+        
+        if (get().providers.length === 0) {
+          set({ providers: mockProviders });
+        }
+        
+        set({ isLoading: false });
+      },
+    }),
+    {
+      name: 'pawsync-services-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        providers: state.providers,
+        appointments: state.appointments,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/settingsStore.ts b/src/store/settingsStore.ts
new file mode 100644
index 00000000..0ae47ef4
--- /dev/null
+++ b/src/store/settingsStore.ts
@@ -0,0 +1,250 @@
+/**
+ * Settings Store - 设置管理数据存储
+ *
+ * 管理应用设置、用户偏好、通知设置等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 通知设置
+export interface NotificationSettings {
+  enabled: boolean;
+  sound: boolean;
+  vibration: boolean;
+  healthReminders: boolean;
+  feedingReminders: boolean;
+  activityReminders: boolean;
+  systemNotifications: boolean;
+}
+
+// 显示设置
+export interface DisplaySettings {
+  darkMode: boolean;
+  language: string;
+  fontSize: 'small' | 'medium' | 'large';
+  compactMode: boolean;
+  showAnimations: boolean;
+}
+
+// 数据设置
+export interface DataSettings {
+  autoSync: boolean;
+  syncInterval: number; // 分钟
+  offlineMode: boolean;
+  dataUsage: 'low' | 'medium' | 'high';
+}
+
+// 隐私设置
+export interface PrivacySettings {
+  analyticsEnabled: boolean;
+  crashReportsEnabled: boolean;
+  locationTracking: boolean;
+  shareData: boolean;
+}
+
+// 存储设置
+export interface StorageSettings {
+  autoBackup: boolean;
+  backupInterval: number; // 天
+  storageLocation: 'local' | 'cloud' | 'both';
+}
+
+// Store 接口
+interface SettingsState {
+  notifications: NotificationSettings;
+  display: DisplaySettings;
+  data: DataSettings;
+  privacy: PrivacySettings;
+  storage: StorageSettings;
+  
+  // 通知设置
+  updateNotificationSettings: (settings: Partial<NotificationSettings>) => void;
+  
+  // 显示设置
+  updateDisplaySettings: (settings: Partial<DisplaySettings>) => void;
+  toggleDarkMode: () => void;
+  
+  // 数据设置
+  updateDataSettings: (settings: Partial<DataSettings>) => void;
+  
+  // 隐私设置
+  updatePrivacySettings: (settings: Partial<PrivacySettings>) => void;
+  
+  // 存储设置
+  updateStorageSettings: (settings: Partial<StorageSettings>) => void;
+  
+  // 重置
+  resetAllSettings: () => void;
+  resetNotificationSettings: () => void;
+  resetDisplaySettings: () => void;
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+// 默认设置
+const defaultNotificationSettings: NotificationSettings = {
+  enabled: true,
+  sound: true,
+  vibration: true,
+  healthReminders: true,
+  feedingReminders: true,
+  activityReminders: true,
+  systemNotifications: true,
+};
+
+const defaultDisplaySettings: DisplaySettings = {
+  darkMode: false,
+  language: 'zh-CN',
+  fontSize: 'medium',
+  compactMode: false,
+  showAnimations: true,
+};
+
+const defaultDataSettings: DataSettings = {
+  autoSync: true,
+  syncInterval: 15,
+  offlineMode: false,
+  dataUsage: 'medium',
+};
+
+const defaultPrivacySettings: PrivacySettings = {
+  analyticsEnabled: true,
+  crashReportsEnabled: true,
+  locationTracking: false,
+  shareData: false,
+};
+
+const defaultStorageSettings: StorageSettings = {
+  autoBackup: true,
+  backupInterval: 7,
+  storageLocation: 'both',
+};
+
+export const useSettingsStore = create<SettingsState>()(
+  persist(
+    (set) => ({
+      notifications: defaultNotificationSettings,
+      display: defaultDisplaySettings,
+      data: defaultDataSettings,
+      privacy: defaultPrivacySettings,
+      storage: defaultStorageSettings,
+
+      updateNotificationSettings: (settings) => {
+        set((state) => ({
+          notifications: { ...state.notifications, ...settings },
+        }));
+      },
+
+      updateDisplaySettings: (settings) => {
+        set((state) => ({
+          display: { ...state.display, ...settings },
+        }));
+        
+        // 应用暗黑模式
+        if (settings.darkMode !== undefined) {
+          if (settings.darkMode) {
+            document.documentElement.classList.add('dark');
+          } else {
+            document.documentElement.classList.remove('dark');
+          }
+        }
+      },
+
+      toggleDarkMode: () => {
+        set((state) => {
+          const newDarkMode = !state.display.darkMode;
+          
+          if (newDarkMode) {
+            document.documentElement.classList.add('dark');
+          } else {
+            document.documentElement.classList.remove('dark');
+          }
+          
+          return {
+            display: { ...state.display, darkMode: newDarkMode },
+          };
+        });
+      },
+
+      updateDataSettings: (settings) => {
+        set((state) => ({
+          data: { ...state.data, ...settings },
+        }));
+      },
+
+      updatePrivacySettings: (settings) => {
+        set((state) => ({
+          privacy: { ...state.privacy, ...settings },
+        }));
+      },
+
+      updateStorageSettings: (settings) => {
+        set((state) => ({
+          storage: { ...state.storage, ...settings },
+        }));
+      },
+
+      resetAllSettings: () => {
+        set({
+          notifications: defaultNotificationSettings,
+          display: defaultDisplaySettings,
+          data: defaultDataSettings,
+          privacy: defaultPrivacySettings,
+          storage: defaultStorageSettings,
+        });
+        
+        document.documentElement.classList.remove('dark');
+      },
+
+      resetNotificationSettings: () => {
+        set({ notifications: defaultNotificationSettings });
+      },
+
+      resetDisplaySettings: () => {
+        set({ display: defaultDisplaySettings });
+        document.documentElement.classList.remove('dark');
+      },
+
+      initialize: async () => {
+        // 应用暗黑模式
+        const state = set.getState ? {} : useSettingsStore.getState();
+        if (state.display?.darkMode) {
+          document.documentElement.classList.add('dark');
+        }
+      },
+    }),
+    {
+      name: 'pawsync-settings-store',
+      storage: createJSONStorage(() => capacitorStorage),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/trainingStore.ts b/src/store/trainingStore.ts
index 56c456c1..f408bde4 100644
--- a/src/store/trainingStore.ts
+++ b/src/store/trainingStore.ts
@@ -80,16 +80,17 @@ export const useTrainingStore = create<TrainingStore>((set, get) => ({
   },
 
   endSession: (notes) => {
-    const { currentSession, totalTrainingTime } = get();
+    const { currentSession, totalTrainingTime, courses } = get();
     if (!currentSession) return;
 
     const duration = Math.floor((new Date().getTime() - currentSession.startTime.getTime()) / 1000 / 60);
+    const course = courses.find(c => c.id === currentSession.courseId);
     
     const record: TrainingRecord = {
       id: Date.now().toString(),
       date: new Date(),
       courseId: currentSession.courseId,
-      courseTitle: '训练课程',
+      courseTitle: course?.title || '训练课程',
       duration,
       success: duration >= 10,
       notes
@@ -112,5 +113,9 @@ export const useTrainingStore = create<TrainingStore>((set, get) => ({
         ? { ...course, completedSteps, progress: Math.round((completedSteps / course.totalSteps) * 100) }
         : course
     )
-  }))
+  })),
+
+  initialize: async () => {
+    console.log('[TrainingStore] Initialized');
+  }
 }));
diff --git a/src/store/translatorStore.ts b/src/store/translatorStore.ts
new file mode 100644
index 00000000..ce032581
--- /dev/null
+++ b/src/store/translatorStore.ts
@@ -0,0 +1,274 @@
+/**
+ * Translator Store - 翻译器数据存储
+ *
+ * 管理宠物声音翻译记录、翻译历史、翻译模型等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 翻译结果
+export interface TranslationResult {
+  id: string;
+  petId: string;
+  audioUrl?: string;
+  audioDuration: number; // 秒
+  emotion: string;
+  emotionEmoji: string;
+  translation: string;
+  confidence: number; // 0-100
+  suggestions?: string[];
+  timestamp: string;
+}
+
+// 翻译历史
+export interface TranslationHistory {
+  id: string;
+  petId: string;
+  results: TranslationResult[];
+  createdAt: string;
+}
+
+// 翻译统计
+export interface TranslationStats {
+  totalTranslations: number;
+  avgConfidence: number;
+  mostCommonEmotion: string;
+  emotionsBreakdown: Record<string, number>;
+}
+
+// Store 接口
+interface TranslatorState {
+  results: TranslationResult[];
+  history: TranslationHistory[];
+  stats: TranslationStats;
+  isRecording: boolean;
+  isTranslating: boolean;
+  currentResult: TranslationResult | null;
+  
+  // 翻译操作
+  startRecording: () => void;
+  stopRecording: () => void;
+  translate: (petId: string, audioData: any) => Promise<TranslationResult>;
+  
+  // 结果操作
+  setCurrentResult: (result: TranslationResult | null) => void;
+  saveResult: (result: TranslationResult) => void;
+  deleteResult: (id: string) => void;
+  
+  // 查询
+  getResultsByPet: (petId: string) => TranslationResult[];
+  getRecentResults: (limit?: number) => TranslationResult[];
+  
+  // 统计
+  calculateStats: (petId: string) => TranslationStats;
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+const generateId = () => `trans-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+// 模拟翻译数据
+const mockResults: TranslationResult[] = [
+  {
+    id: 'trans-1',
+    petId: 'pet-1',
+    audioDuration: 3,
+    emotion: 'happy',
+    emotionEmoji: '😸',
+    translation: '我很开心，想和你玩耍！',
+    confidence: 95,
+    suggestions: ['可以带它出去散步', '给它一些玩具'],
+    timestamp: new Date(Date.now() - 3600000).toISOString(),
+  },
+  {
+    id: 'trans-2',
+    petId: 'pet-1',
+    audioDuration: 2,
+    emotion: 'hungry',
+    emotionEmoji: '🥺',
+    translation: '我饿了，想吃东西！',
+    confidence: 88,
+    suggestions: ['检查喂食时间', '准备食物'],
+    timestamp: new Date(Date.now() - 7200000).toISOString(),
+  },
+];
+
+const defaultStats: TranslationStats = {
+  totalTranslations: 2,
+  avgConfidence: 91.5,
+  mostCommonEmotion: 'happy',
+  emotionsBreakdown: { happy: 1, hungry: 1 },
+};
+
+export const useTranslatorStore = create<TranslatorState>()(
+  persist(
+    (set, get) => ({
+      results: [],
+      history: [],
+      stats: defaultStats,
+      isRecording: false,
+      isTranslating: false,
+      currentResult: null,
+
+      startRecording: () => {
+        set({ isRecording: true });
+      },
+
+      stopRecording: () => {
+        set({ isRecording: false });
+      },
+
+      translate: async (petId, audioData) => {
+        set({ isTranslating: true });
+        
+        // 模拟翻译过程
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        
+        const emotions = ['happy', 'hungry', 'curious', 'anxious', 'sleepy', 'playful'];
+        const emotionEmojis: Record<string, string> = {
+          happy: '😸',
+          hungry: '🥺',
+          curious: '🤔',
+          anxious: '😰',
+          sleepy: '😴',
+          playful: '🤩',
+        };
+        
+        const translations: Record<string, string> = {
+          happy: '我很开心，想和你玩耍！',
+          hungry: '我饿了，想吃东西！',
+          curious: '这是什么？我想探索一下！',
+          anxious: '我有点担心，需要安慰',
+          sleepy: '我困了，想休息一下',
+          playful: '来玩吧！我很兴奋！',
+        };
+        
+        const suggestions: Record<string, string[]> = {
+          happy: ['可以带它出去散步', '给它一些玩具'],
+          hungry: ['检查喂食时间', '准备食物'],
+          curious: ['给它新的玩具探索', '带它去新的地方'],
+          anxious: ['给它安抚', '检查是否有异常'],
+          sleepy: ['让它休息', '准备舒适的睡眠环境'],
+          playful: ['和它玩耍', '准备互动玩具'],
+        };
+        
+        const emotion = emotions[Math.floor(Math.random() * emotions.length)];
+        
+        const result: TranslationResult = {
+          id: generateId(),
+          petId,
+          audioDuration: audioData?.duration || 3,
+          emotion,
+          emotionEmoji: emotionEmojis[emotion],
+          translation: translations[emotion],
+          confidence: 85 + Math.floor(Math.random() * 15),
+          suggestions: suggestions[emotion],
+          timestamp: new Date().toISOString(),
+        };
+        
+        set({
+          isTranslating: false,
+          currentResult: result,
+        });
+        
+        get().saveResult(result);
+        
+        return result;
+      },
+
+      setCurrentResult: (result) => {
+        set({ currentResult: result });
+      },
+
+      saveResult: (result) => {
+        set((state) => ({
+          results: [result, ...state.results].slice(0, 100),
+        }));
+        
+        // 更新统计
+        const stats = get().calculateStats(result.petId);
+        set({ stats });
+      },
+
+      deleteResult: (id) => {
+        set((state) => ({
+          results: state.results.filter((r) => r.id !== id),
+        }));
+      },
+
+      getResultsByPet: (petId) => {
+        return get().results.filter((r) => r.petId === petId);
+      },
+
+      getRecentResults: (limit = 10) => {
+        return get().results.slice(0, limit);
+      },
+
+      calculateStats: (petId) => {
+        const results = get().getResultsByPet(petId);
+        
+        if (results.length === 0) return defaultStats;
+        
+        const avgConfidence = results.reduce((sum, r) => sum + r.confidence, 0) / results.length;
+        
+        const emotionsBreakdown: Record<string, number> = {};
+        results.forEach((r) => {
+          emotionsBreakdown[r.emotion] = (emotionsBreakdown[r.emotion] || 0) + 1;
+        });
+        
+        const mostCommonEmotion = Object.entries(emotionsBreakdown)
+          .sort((a, b) => b[1] - a[1])[0][0];
+        
+        return {
+          totalTranslations: results.length,
+          avgConfidence,
+          mostCommonEmotion,
+          emotionsBreakdown,
+        };
+      },
+
+      initialize: async () => {
+        if (get().results.length === 0) {
+          set({ results: mockResults });
+        }
+      },
+    }),
+    {
+      name: 'pawsync-translator-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        results: state.results.slice(0, 50),
+        stats: state.stats,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/store/userProfileStore.ts b/src/store/userProfileStore.ts
new file mode 100644
index 00000000..adb4451b
--- /dev/null
+++ b/src/store/userProfileStore.ts
@@ -0,0 +1,216 @@
+/**
+ * User Profile Store - 用户档案数据存储
+ *
+ * 管理用户个人信息、账户设置、会员状态等功能
+ * 支持 Capacitor 原生存储
+ */
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Capacitor } from '@capacitor/core';
+import { Preferences } from '@capacitor/preferences';
+
+// 用户信息
+export interface UserProfile {
+  id: string;
+  name: string;
+  avatar?: string;
+  email?: string;
+  phone?: string;
+  gender?: 'male' | 'female' | 'other';
+  birthday?: string;
+  location?: string;
+  bio?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// 会员状态
+export interface MembershipStatus {
+  level: 'free' | 'basic' | 'premium' | 'vip';
+  expireDate?: string;
+  features: string[];
+}
+
+// 用户统计
+export interface UserStats {
+  totalPets: number;
+  totalRecords: number;
+  totalDays: number;
+  achievements: number;
+  points: number;
+}
+
+// Store 接口
+interface UserProfileState {
+  profile: UserProfile | null;
+  membership: MembershipStatus;
+  stats: UserStats;
+  isLoggedIn: boolean;
+  
+  // 用户操作
+  login: (profile: UserProfile) => void;
+  logout: () => void;
+  updateProfile: (updates: Partial<UserProfile>) => void;
+  setAvatar: (avatar: string) => void;
+  
+  // 会员操作
+  upgradeMembership: (level: MembershipStatus['level']) => void;
+  checkMembership: () => boolean;
+  
+  // 统计更新
+  updateStats: (stats: Partial<UserStats>) => void;
+  addPoints: (points: number) => void;
+  
+  // 初始化
+  initialize: () => Promise<void>;
+}
+
+const capacitorStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (Capacitor.isNativePlatform()) {
+      const { value } = await Preferences.get({ key: name });
+      return value;
+    }
+    return localStorage.getItem(name);
+  },
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.set({ key: name, value });
+    } else {
+      localStorage.setItem(name, value);
+    }
+  },
+  removeItem: async (name: string): Promise<void> => {
+    if (Capacitor.isNativePlatform()) {
+      await Preferences.remove({ key: name });
+    } else {
+      localStorage.removeItem(name);
+    }
+  },
+};
+
+const defaultMembership: MembershipStatus = {
+  level: 'free',
+  features: ['basic_features', 'limited_storage'],
+};
+
+const defaultStats: UserStats = {
+  totalPets: 1,
+  totalRecords: 50,
+  totalDays: 30,
+  achievements: 5,
+  points: 1000,
+};
+
+const mockProfile: UserProfile = {
+  id: 'user-1',
+  name: '宠物主人',
+  avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop',
+  email: 'user@pawsync.com',
+  createdAt: '2024-01-01T00:00:00Z',
+  updatedAt: new Date().toISOString(),
+};
+
+export const useUserProfileStore = create<UserProfileState>()(
+  persist(
+    (set, get) => ({
+      profile: null,
+      membership: defaultMembership,
+      stats: defaultStats,
+      isLoggedIn: false,
+
+      login: (profile) => {
+        set({
+          profile,
+          isLoggedIn: true,
+        });
+      },
+
+      logout: () => {
+        set({
+          profile: null,
+          isLoggedIn: false,
+          membership: defaultMembership,
+        });
+      },
+
+      updateProfile: (updates) => {
+        set((state) => ({
+          profile: state.profile
+            ? { ...state.profile, ...updates, updatedAt: new Date().toISOString() }
+            : null,
+        }));
+      },
+
+      setAvatar: (avatar) => {
+        set((state) => ({
+          profile: state.profile
+            ? { ...state.profile, avatar, updatedAt: new Date().toISOString() }
+            : null,
+        }));
+      },
+
+      upgradeMembership: (level) => {
+        const featuresByLevel: Record<MembershipStatus['level'], string[]> = {
+          free: ['basic_features', 'limited_storage'],
+          basic: ['basic_features', 'standard_storage', 'health_tracking'],
+          premium: ['all_features', 'unlimited_storage', 'ai_consultation', 'priority_support'],
+          vip: ['all_features', 'unlimited_storage', 'ai_consultation', 'priority_support', 'exclusive_content'],
+        };
+        
+        set({
+          membership: {
+            level,
+            features: featuresByLevel[level],
+            expireDate: level !== 'free' 
+              ? new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString()
+              : undefined,
+          },
+        });
+      },
+
+      checkMembership: () => {
+        const membership = get().membership;
+        if (membership.level === 'free') return true;
+        
+        if (membership.expireDate) {
+          return new Date(membership.expireDate) > new Date();
+        }
+        return true;
+      },
+
+      updateStats: (stats) => {
+        set((state) => ({
+          stats: { ...state.stats, ...stats },
+        }));
+      },
+
+      addPoints: (points) => {
+        set((state) => ({
+          stats: { ...state.stats, points: state.stats.points + points },
+        }));
+      },
+
+      initialize: async () => {
+        // 模拟已登录用户
+        if (!get().profile) {
+          set({
+            profile: mockProfile,
+            isLoggedIn: true,
+          });
+        }
+      },
+    }),
+    {
+      name: 'pawsync-user-profile-store',
+      storage: createJSONStorage(() => capacitorStorage),
+      partialize: (state) => ({
+        profile: state.profile,
+        membership: state.membership,
+        stats: state.stats,
+        isLoggedIn: state.isLoggedIn,
+      }),
+    }
+  )
+);
\ No newline at end of file
diff --git a/src/styles/apple-style.css b/src/styles/apple-style.css
new file mode 100644
index 00000000..8210b303
--- /dev/null
+++ b/src/styles/apple-style.css
@@ -0,0 +1,1022 @@
+/**
+ * Apple Style Global CSS - Apple风格全局样式
+ *
+ * 达到Apple级别的UI/UX体验
+ * 包括：字体系统、动画、响应式设计、多端适配
+ */
+
+/* ============================================
+   1. 字体系统 - SF Pro 风格
+   ============================================ */
+
+/* 导入字体 */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
+
+/* 字体变量 */
+:root {
+  /* 主字体 - 类似 SF Pro Display */
+  --font-display: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  
+  /* UI字体 - 类似 SF Pro Text */
+  --font-text: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  
+  /* 数字字体 - 类似 SF Mono */
+  --font-mono: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
+  
+  /* 字重 */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* 字号系统 - Apple Dynamic Type */
+  --font-size-xs: 11px;      /* 辅助文字 */
+  --font-size-sm: 13px;      /* 小标题 */
+  --font-size-base: 15px;    /* 正文 */
+  --font-size-lg: 17px;      /* 大正文 */
+  --font-size-xl: 20px;      /* 标题 */
+  --font-size-2xl: 24px;     /* 大标题 */
+  --font-size-3xl: 28px;     /* 特大标题 */
+  --font-size-4xl: 34px;     /* 超大标题 */
+  --font-size-5xl: 48px;     /* 巨大标题 */
+  
+  /* 行高 */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  
+  /* 字间距 */
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.02em;
+}
+
+/* 全局字体应用 */
+html {
+  font-family: var(--font-text);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  letter-spacing: var(--letter-spacing-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* 标题字体 */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+/* 数字字体 */
+.font-mono, .text-number {
+  font-family: var(--font-mono);
+  font-feature-settings: 'tnum' on, 'lnum' on;
+}
+
+/* ============================================
+   2. 颜色系统 - PawSync Pro 主题色
+   ============================================ */
+
+:root {
+  /* 主色调 - 温暖橙色 */
+  --color-primary: #F5A623;
+  --color-primary-light: #FFB84D;
+  --color-primary-dark: #E09000;
+  --color-primary-50: rgba(245, 166, 35, 0.05);
+  --color-primary-100: rgba(245, 166, 35, 0.1);
+  --color-primary-200: rgba(245, 166, 35, 0.2);
+  --color-primary-300: rgba(245, 166, 35, 0.3);
+  
+  /* 背景色 - 暖米色系 */
+  --color-bg-primary: #FAF7F2;
+  --color-bg-secondary: #FFFFFF;
+  --color-bg-tertiary: #F5F0E8;
+  --color-bg-card: #FFFFFF;
+  --color-bg-elevated: #FFFFFF;
+  
+  /* 文字色 */
+  --color-text-primary: #1D1D1F;
+  --color-text-secondary: #86868B;
+  --color-text-tertiary: #AEAEB2;
+  --color-text-quaternary: #C7C7CC;
+  --color-text-white: #FFFFFF;
+  
+  /* 功能色 */
+  --color-success: #34C759;
+  --color-success-bg: #E8F5E9;
+  --color-warning: #FF9500;
+  --color-warning-bg: #FFF4E5;
+  --color-error: #FF3B30;
+  --color-error-bg: #FFE5E5;
+  --color-info: #007AFF;
+  --color-info-bg: #E5F3FF;
+  
+  /* 设备状态色 */
+  --color-online: #34C759;
+  --color-offline: #8E8E93;
+  --color-warning-status: #FF9500;
+  
+  /* 分隔线 */
+  --color-separator: rgba(60, 60, 67, 0.12);
+  --color-separator-heavy: rgba(60, 60, 67, 0.29);
+  
+  /* 阴影色 */
+  --color-shadow: rgba(0, 0, 0, 0.04);
+  --color-shadow-medium: rgba(0, 0, 0, 0.08);
+  --color-shadow-heavy: rgba(0, 0, 0, 0.12);
+}
+
+/* 暗黑模式 */
+.dark {
+  --color-bg-primary: #000000;
+  --color-bg-secondary: #1C1C1E;
+  --color-bg-tertiary: #2C2C2E;
+  --color-bg-card: #1C1C1E;
+  --color-bg-elevated: #2C2C2E;
+  
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #98989D;
+  --color-text-tertiary: #636366;
+  --color-text-quaternary: #48484A;
+  
+  --color-separator: rgba(84, 84, 88, 0.65);
+  --color-separator-heavy: rgba(84, 84, 88, 0.36);
+  
+  --color-shadow: rgba(255, 255, 255, 0.04);
+  --color-shadow-medium: rgba(255, 255, 255, 0.08);
+}
+
+/* ============================================
+   3. 间距系统 - Apple 8pt Grid
+   ============================================ */
+
+:root {
+  /* 基础单位 - 8pt */
+  --spacing-unit: 8px;
+  
+  /* 间距 */
+  --spacing-0: 0;
+  --spacing-1: 4px;      /* 0.5 unit */
+  --spacing-2: 8px;      /* 1 unit */
+  --spacing-3: 12px;     /* 1.5 unit */
+  --spacing-4: 16px;     /* 2 unit */
+  --spacing-5: 20px;     /* 2.5 unit */
+  --spacing-6: 24px;     /* 3 unit */
+  --spacing-7: 28px;     /* 3.5 unit */
+  --spacing-8: 32px;     /* 4 unit */
+  --spacing-9: 36px;     /* 4.5 unit */
+  --spacing-10: 40px;    /* 5 unit */
+  --spacing-12: 48px;    /* 6 unit */
+  --spacing-14: 56px;    /* 7 unit */
+  --spacing-16: 64px;    /* 8 unit */
+  --spacing-20: 80px;    /* 10 unit */
+  --spacing-24: 96px;    /* 12 unit */
+  
+  /* 安全区域 */
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+}
+
+/* ============================================
+   4. 圆角系统 - Apple 风格
+   ============================================ */
+
+:root {
+  /* 圆角 */
+  --radius-none: 0;
+  --radius-sm: 8px;      /* 小组件 */
+  --radius-md: 12px;     /* 卡片 */
+  --radius-lg: 16px;     /* 大卡片 */
+  --radius-xl: 20px;     /* 模态框 */
+  --radius-2xl: 24px;    /* 特大组件 */
+  --radius-3xl: 28px;    /* 超大组件 */
+  --radius-full: 9999px; /* 圆形 */
+  
+  /* 按钮圆角 */
+  --radius-button-sm: 8px;
+  --radius-button-md: 10px;
+  --radius-button-lg: 12px;
+}
+
+/* ============================================
+   5. 阴影系统 - Apple 风格
+   ============================================ */
+
+:root {
+  /* 阴影层级 */
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px var(--color-shadow);
+  --shadow-md: 0 4px 8px var(--color-shadow-medium);
+  --shadow-lg: 0 8px 16px var(--color-shadow-medium);
+  --shadow-xl: 0 16px 32px var(--color-shadow-heavy);
+  --shadow-2xl: 0 24px 48px var(--color-shadow-heavy);
+  
+  /* 特殊阴影 */
+  --shadow-card: 0 2px 8px var(--color-shadow), 0 1px 2px var(--color-shadow);
+  --shadow-button: 0 1px 4px var(--color-shadow);
+  --shadow-fab: 0 4px 12px rgba(245, 166, 35, 0.4);
+  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.2);
+  --shadow-nav: 0 -2px 8px var(--color-shadow);
+}
+
+/* ============================================
+   6. 动画系统 - Apple 级别流畅动画
+   ============================================ */
+
+:root {
+  /* 动画时长 */
+  --duration-instant: 0ms;
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 350ms;
+  --duration-slower: 500ms;
+  --duration-slowest: 700ms;
+  
+  /* 动画曲线 - Apple 风格 */
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.42, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.58, 1);
+  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
+  
+  /* Apple 特殊曲线 */
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-ios: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-ios-modal: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* 动画延迟 */
+  --delay-none: 0ms;
+  --delay-fast: 50ms;
+  --delay-normal: 100ms;
+  --delay-slow: 200ms;
+}
+
+/* 全局动画基础 */
+*, *::before, *::after {
+  transition-timing-function: var(--ease-ios);
+}
+
+/* ============================================
+   7. 响应式设计 - 多端适配
+   ============================================ */
+
+:root {
+  /* 屏幕尺寸断点 */
+  --screen-xs: 320px;    /* iPhone SE */
+  --screen-sm: 375px;    /* iPhone 标准 */
+  --screen-md: 414px;    /* iPhone Plus */
+  --screen-lg: 768px;    /* iPad */
+  --screen-xl: 1024px;   /* iPad Pro */
+  --screen-2xl: 1280px;  /* iPad Pro 12.9 */
+  
+  /* 容器最大宽度 */
+  --container-sm: 375px;
+  --container-md: 414px;
+  --container-lg: 768px;
+  --container-xl: 1024px;
+  
+  /* 内容边距 */
+  --content-padding-sm: 16px;
+  --content-padding-md: 20px;
+  --content-padding-lg: 24px;
+}
+
+/* 响应式媒体查询 */
+@media screen and (max-width: 320px) {
+  :root {
+    --font-size-base: 14px;
+    --spacing-4: 12px;
+    --spacing-6: 18px;
+  }
+}
+
+@media screen and (min-width: 375px) and (max-width: 414px) {
+  :root {
+    --font-size-base: 15px;
+  }
+}
+
+@media screen and (min-width: 414px) and (max-width: 768px) {
+  :root {
+    --font-size-base: 16px;
+    --spacing-4: 18px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  :root {
+    --font-size-base: 17px;
+    --radius-md: 14px;
+    --radius-lg: 18px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :root {
+    --font-size-base: 18px;
+    --radius-md: 16px;
+    --radius-lg: 20px;
+  }
+}
+
+/* ============================================
+   8. 全局样式类
+   ============================================ */
+
+/* 基础容器 */
+.app-container {
+  width: 100%;
+  max-width: var(--container-md);
+  margin: 0 auto;
+  padding-left: var(--content-padding-sm);
+  padding-right: var(--content-padding-sm);
+}
+
+/* 卡片样式 - Apple 风格 */
+.card {
+  background: var(--color-bg-card);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.card-elevated {
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-lg);
+}
+
+/* 按钮样式 - Apple 风格 */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  font-family: var(--font-text);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-button-md);
+  transition: all var(--duration-fast) var(--ease-ios);
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-text-white);
+  box-shadow: var(--shadow-button);
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-light);
+  transform: scale(1.02);
+}
+
+.btn-primary:active {
+  background: var(--color-primary-dark);
+  transform: scale(0.98);
+}
+
+.btn-secondary {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+}
+
+.btn-secondary:hover {
+  background: var(--color-separator);
+}
+
+/* 文字样式 */
+.text-display {
+  font-family: var(--font-display);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.text-body {
+  font-family: var(--font-text);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+}
+
+.text-caption {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+/* 分隔线 */
+.separator {
+  height: 1px;
+  background: var(--color-separator);
+  margin: var(--spacing-4) 0;
+}
+
+.separator-heavy {
+  height: 1px;
+  background: var(--color-separator-heavy);
+}
+
+/* ============================================
+   9. 动画预设类
+   ============================================ */
+
+/* 淡入淡出 */
+.animate-fade-in {
+  animation: fadeIn var(--duration-normal) var(--ease-ios) forwards;
+}
+
+.animate-fade-out {
+  animation: fadeOut var(--duration-normal) var(--ease-ios) forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* 滑入滑出 - iOS 风格 */
+.animate-slide-up {
+  animation: slideUp var(--duration-slow) var(--ease-ios-modal) forwards;
+}
+
+.animate-slide-down {
+  animation: slideDown var(--duration-slow) var(--ease-ios-modal) forwards;
+}
+
+.animate-slide-left {
+  animation: slideLeft var(--duration-slow) var(--ease-ios) forwards;
+}
+
+.animate-slide-right {
+  animation: slideRight var(--duration-slow) var(--ease-ios) forwards;
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from { 
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeft {
+  from { 
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to { 
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  from { 
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to { 
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 弹性缩放 - iOS 风格 */
+.animate-scale-in {
+  animation: scaleIn var(--duration-normal) var(--ease-spring) forwards;
+}
+
+.animate-scale-out {
+  animation: scaleOut var(--duration-fast) var(--ease-out) forwards;
+}
+
+@keyframes scaleIn {
+  from { 
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to { 
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from { 
+    opacity: 1;
+    transform: scale(1);
+  }
+  to { 
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+/* 弹跳效果 */
+.animate-bounce {
+  animation: bounce var(--duration-slow) var(--ease-bounce) forwards;
+}
+
+@keyframes bounce {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+/* 脉冲效果 */
+.animate-pulse {
+  animation: pulse var(--duration-slower) var(--ease-in-out) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* 旋转加载 */
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 骨架屏加载 */
+.animate-skeleton {
+  animation: skeleton var(--duration-slower) var(--ease-in-out) infinite;
+}
+
+@keyframes skeleton {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* ============================================
+   10. 触摸反馈 - iOS 风格
+   ============================================ */
+
+/* 触摸高亮 */
+.touch-highlight {
+  position: relative;
+  overflow: hidden;
+}
+
+.touch-highlight::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--color-separator);
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-ios);
+}
+
+.touch-highlight:active::after {
+  opacity: 1;
+}
+
+/* 触摸缩放 */
+.touch-scale {
+  transition: transform var(--duration-fast) var(--ease-ios);
+}
+
+.touch-scale:active {
+  transform: scale(0.97);
+}
+
+/* 触摸涟漪 */
+.touch-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+/* ============================================
+   11. 滚动优化
+   ============================================ */
+
+/* iOS 风格滚动 */
+.scroll-ios {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  overscroll-behavior: contain;
+}
+
+/* 隐藏滚动条 */
+.scrollbar-hide {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* 自定义滚动条 */
+.scrollbar-custom::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.scrollbar-custom::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-custom::-webkit-scrollbar-thumb {
+  background: var(--color-separator-heavy);
+  border-radius: var(--radius-full);
+}
+
+/* ============================================
+   12. 安全区域适配
+   ============================================ */
+
+/* 顶部安全区域 */
+.safe-area-top {
+  padding-top: var(--safe-area-top);
+}
+
+/* 底部安全区域 */
+.safe-area-bottom {
+  padding-bottom: var(--safe-area-bottom);
+}
+
+/* 全安全区域 */
+.safe-area-all {
+  padding-top: var(--safe-area-top);
+  padding-bottom: var(--safe-area-bottom);
+  padding-left: var(--safe-area-left);
+  padding-right: var(--safe-area-right);
+}
+
+/* ============================================
+   13. 图片适配 - 防止变形
+   ============================================ */
+
+/* 图片保持比例 */
+.img-cover {
+  object-fit: cover;
+  object-position: center;
+}
+
+.img-contain {
+  object-fit: contain;
+  object-position: center;
+}
+
+.img-fill {
+  object-fit: fill;
+}
+
+/* 图片懒加载占位 */
+.img-placeholder {
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-tertiary) 25%,
+    var(--color-bg-secondary) 50%,
+    var(--color-bg-tertiary) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton var(--duration-slower) var(--ease-in-out) infinite;
+}
+
+/* ============================================
+   14. 禁用状态
+   ============================================ */
+
+.disabled, [disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ============================================
+   15. 聚焦状态 - iOS 风格
+   ============================================ */
+
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   16. 减少动画模式
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ============================================
+   17. 高对比度模式
+   ============================================ */
+
+@media (prefers-contrast: high) {
+  :root {
+    --color-separator: rgba(0, 0, 0, 0.3);
+    --color-text-secondary: #5C5C61;
+  }
+}
+
+/* ============================================
+   18. 打印样式
+   ============================================ */
+
+@media print {
+  * {
+    background: transparent !important;
+    color: black !important;
+    box-shadow: none !important;
+  }
+}
+
+/* ============================================
+   19. 底部导航栏专用样式 - Apple风格
+   ============================================ */
+
+/* 导航栏固定定位 */
+nav[role="navigation"] {
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 50 !important;
+  
+  /* 毛玻璃效果 */
+  background: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(255, 255, 255, 0.95) 70%,
+    rgba(255, 255, 255, 0.85) 100%
+  );
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  
+  /* 边框 */
+  border-top: 1px solid rgba(245, 166, 35, 0.1);
+  
+  /* 阴影 */
+  box-shadow: 
+    0 -4px 16px rgba(0, 0, 0, 0.06),
+    0 -1px 2px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+/* 导航栏顶部装饰线 */
+nav[role="navigation"]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(245, 166, 35, 0.3) 20%,
+    rgba(245, 166, 35, 0.5) 50%,
+    rgba(245, 166, 35, 0.3) 80%,
+    transparent 100%
+  );
+}
+
+/* 导航项基础样式 */
+nav[role="navigation"] button {
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* 导航项活动状态 */
+nav[role="navigation"] button[aria-current="page"] {
+  background: linear-gradient(
+    135deg,
+    rgba(245, 166, 35, 0.08) 0%,
+    rgba(245, 166, 35, 0.12) 100%
+  );
+}
+
+/* 导航项图标动画 */
+nav[role="navigation"] button svg {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+nav[role="navigation"] button:hover svg {
+  transform: scale(1.05);
+}
+
+nav[role="navigation"] button[aria-current="page"] svg {
+  transform: scale(1.1);
+  filter: drop-shadow(0 2px 4px rgba(245, 166, 35, 0.3));
+}
+
+/* FAB按钮样式 */
+nav[role="navigation"] button .rounded-full {
+  /* 渐变背景 */
+  background: linear-gradient(
+    135deg,
+    #F97316 0%,
+    #F5A623 50%,
+    #FFB84D 100%
+  );
+  
+  /* 阴影 */
+  box-shadow: 
+    0 4px 12px rgba(249, 115, 22, 0.35),
+    0 2px 4px rgba(249, 115, 22, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  
+  /* 动画 */
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+nav[role="navigation"] button:hover .rounded-full {
+  transform: scale(1.08);
+  box-shadow: 
+    0 6px 16px rgba(249, 115, 22, 0.4),
+    0 3px 6px rgba(249, 115, 22, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+nav[role="navigation"] button:active .rounded-full {
+  transform: scale(0.95);
+  box-shadow: 
+    0 2px 8px rgba(249, 115, 22, 0.3),
+    0 1px 2px rgba(249, 115, 22, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+/* FAB按钮活动状态 */
+nav[role="navigation"] button[aria-current="page"] .rounded-full {
+  background: linear-gradient(
+    135deg,
+    #EA580C 0%,
+    #F97316 50%,
+    #F5A623 100%
+  );
+  box-shadow: 
+    0 6px 20px rgba(249, 115, 22, 0.45),
+    0 3px 8px rgba(249, 115, 22, 0.3),
+    inset 0 2px 0 rgba(255, 255, 255, 0.3);
+  
+  /* 脉冲动画 */
+  animation: fab-pulse 2s ease-in-out infinite;
+}
+
+@keyframes fab-pulse {
+  0%, 100% {
+    box-shadow: 
+      0 6px 20px rgba(249, 115, 22, 0.45),
+      0 3px 8px rgba(249, 115, 22, 0.3),
+      inset 0 2px 0 rgba(255, 255, 255, 0.3);
+  }
+  50% {
+    box-shadow: 
+      0 8px 24px rgba(249, 115, 22, 0.5),
+      0 4px 10px rgba(249, 115, 22, 0.35),
+      inset 0 2px 0 rgba(255, 255, 255, 0.35);
+  }
+}
+
+/* 活动状态指示点 */
+nav[role="navigation"] button[aria-current="page"] .animate-pulse {
+  animation: indicator-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes indicator-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.2);
+  }
+}
+
+/* 底部安全区域填充 */
+nav[role="navigation"] .absolute.bottom-0 {
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+}
+
+/* 暗黑模式导航栏 */
+.dark nav[role="navigation"] {
+  background: linear-gradient(
+    to top,
+    rgba(28, 28, 30, 0.98) 0%,
+    rgba(28, 28, 30, 0.95) 70%,
+    rgba(28, 28, 30, 0.85) 100%
+  );
+  border-top: 1px solid rgba(245, 166, 35, 0.2);
+  box-shadow: 
+    0 -4px 16px rgba(0, 0, 0, 0.2),
+    0 -1px 2px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.dark nav[role="navigation"]::before {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(245, 166, 35, 0.4) 20%,
+    rgba(245, 166, 35, 0.6) 50%,
+    rgba(245, 166, 35, 0.4) 80%,
+    transparent 100%
+  );
+}
+
+/* 页面内容底部留白 - 为导航栏预留空间 */
+.pb-nav {
+  padding-bottom: calc(80px + env(safe-area-inset-bottom, 16px));
+}
+
+/* 简化版本 - 用于不需要安全区域的场景 */
+.pb-nav-safe {
+  padding-bottom: 96px;
+}
+
+/* 导航栏高度常量 */
+.nav-height {
+  height: calc(80px + env(safe-area-inset-bottom, 16px));
+}
+
+/* ============================================
+   20. 颜色精细调整 - 导航栏专用
+   ============================================ */
+
+/* 橙色系渐变 - 主色调 */
+.gradient-orange {
+  background: linear-gradient(135deg, #F97316 0%, #F5A623 50%, #FFB84D 100%);
+}
+
+/* 橙色系文字 */
+.text-orange-gradient {
+  background: linear-gradient(135deg, #F97316, #F5A623);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* 橙色系阴影 */
+.shadow-orange {
+  box-shadow: 
+    0 4px 12px rgba(249, 115, 22, 0.25),
+    0 2px 4px rgba(249, 115, 22, 0.15);
+}
+
+.shadow-orange-lg {
+  box-shadow: 
+    0 8px 24px rgba(249, 115, 22, 0.35),
+    0 4px 8px rgba(249, 115, 22, 0.2);
+}
+
+/* 橙色系边框 */
+.border-orange {
+  border-color: rgba(245, 166, 35, 0.3);
+}
+
+.border-orange-light {
+  border-color: rgba(245, 166, 35, 0.15);
+}
+
+/* 橙色系背景 */
+.bg-orange-subtle {
+  background: linear-gradient(135deg, rgba(245, 166, 35, 0.05) 0%, rgba(245, 166, 35, 0.08) 100%);
+}
+
+.bg-orange-light {
+  background: linear-gradient(135deg, rgba(245, 166, 35, 0.08) 0%, rgba(245, 166, 35, 0.12) 100%);
+}
\ No newline at end of file
diff --git a/src/types/bond.ts b/src/types/bond.ts
index d90a637c..a972f6d2 100644
--- a/src/types/bond.ts
+++ b/src/types/bond.ts
@@ -260,4 +260,5 @@ export interface BondStore {
   unlockBadge: (badgeId: string) => void;
   updateAchievement: (achievementId: string, progress: number) => void;
   checkStreak: () => void;
+  initialize: () => Promise<void>;
 }
diff --git a/src/types/insurance.ts b/src/types/insurance.ts
index e63c7df0..5eed91aa 100644
--- a/src/types/insurance.ts
+++ b/src/types/insurance.ts
@@ -55,4 +55,5 @@ export interface InsuranceStore {
   selectPlan: (plan: InsurancePlan) => void;
   purchasePolicy: (planId: string, petId: string) => Promise<boolean>;
   submitClaim: (claim: Omit<Claim, 'id' | 'status'>) => Promise<boolean>;
+  initialize: () => Promise<void>;
 }
diff --git a/src/types/medical.ts b/src/types/medical.ts
index 85e39675..8481c133 100644
--- a/src/types/medical.ts
+++ b/src/types/medical.ts
@@ -55,4 +55,5 @@ export interface MedicalStore {
   startAIConsultation: (symptoms: string[]) => Promise<MedicalConsultation>;
   bookAppointment: (appointment: Omit<VetAppointment, 'id' | 'status'>) => Promise<boolean>;
   addMedicalRecord: (record: Omit<MedicalRecord, 'id'>) => void;
+  initialize: () => Promise<void>;
 }
diff --git a/src/types/training.ts b/src/types/training.ts
index 1519af86..525afb02 100644
--- a/src/types/training.ts
+++ b/src/types/training.ts
@@ -57,4 +57,5 @@ export interface TrainingStore {
   endSession: (notes?: string) => void;
   addTrainingRecord: (record: TrainingRecord) => void;
   updateCourseProgress: (courseId: string, completedSteps: number) => void;
+  initialize: () => Promise<void>;
 }
diff --git a/vite.config.ts b/vite.config.ts
index dc5f2c97..6ef3edf7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,13 +3,21 @@ import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig(({ mode }) => {
-  // 加载环境变量
-  const env = loadEnv(mode, process.cwd(), '');
+  // 加载环境变量（支持 .env.development, .env.production, .env.android）
+  const env = loadEnv(mode, process.cwd(), ['VITE_', 'ANDROID_']);
+  
+  // 判断是否为 Android 构建
+  const isAndroidBuild = mode === 'android' || process.env.CAPACITOR_BUILD === 'true';
+  
+  // Android 构建时使用特定的 API 地址
+  const apiUrl = isAndroidBuild 
+    ? (env.VITE_ANDROID_EMULATOR_URL || env.VITE_API_URL || 'http://10.0.2.2:3000/api')
+    : (env.VITE_API_URL || '');
   
   return {
     base: './',
     build: {
-      sourcemap: 'hidden',
+      sourcemap: mode === 'development' ? true : 'hidden',
       outDir: 'dist',
       rollupOptions: {
         output: {
@@ -17,19 +25,25 @@ export default defineConfig(({ mode }) => {
             'react-vendor': ['react', 'react-dom', 'react-router-dom'],
             'ui-vendor': ['lucide-react', 'framer-motion'],
             'state-vendor': ['zustand'],
+            'capacitor-vendor': ['@capacitor/core'],
           },
         },
       },
       chunkSizeWarningLimit: 500,
+      // Android 构建优化
+      minify: mode === 'production' || isAndroidBuild ? 'terser' : false,
+      target: 'es2015',
     },
     server: {
       watch: {
         ignored: ['**/android-sdk/**', '**/node_modules/**', '**/coverage/**'],
       },
+      // 开发服务器配置
+      host: true,
+      port: 5173,
     },
     optimizeDeps: {
       include: ['react', 'react-dom', 'zustand', 'lucide-react'],
-      exclude: ['@capacitor/android'],
     },
     plugins: [
       react({
@@ -43,9 +57,18 @@ export default defineConfig(({ mode }) => {
     ],
     // 定义环境变量
     define: {
-      'import.meta.env.VITE_API_URL': JSON.stringify(env.VITE_API_URL || ''),
+      'import.meta.env.VITE_API_URL': JSON.stringify(apiUrl),
       'import.meta.env.VITE_ENV': JSON.stringify(env.VITE_ENV || mode),
       'import.meta.env.VITE_ENABLE_MOCK_DATA': JSON.stringify(env.VITE_ENABLE_MOCK_DATA || 'false'),
+      'import.meta.env.VITE_APP_VERSION': JSON.stringify(env.VITE_APP_VERSION || '1.0.0'),
+      'import.meta.env.VITE_DEBUG_MODE': JSON.stringify(env.VITE_DEBUG_MODE || 'false'),
+      'import.meta.env.VITE_LOG_LEVEL': JSON.stringify(env.VITE_LOG_LEVEL || 'info'),
+      'import.meta.env.VITE_ENABLE_NATIVE_FEATURES': JSON.stringify(env.VITE_ENABLE_NATIVE_FEATURES || 'true'),
+      'import.meta.env.VITE_ANDROID_PACKAGE_NAME': JSON.stringify(env.VITE_ANDROID_PACKAGE_NAME || 'com.pawsync.pro'),
+      'import.meta.env.VITE_ANDROID_VERSION_CODE': JSON.stringify(env.VITE_ANDROID_VERSION_CODE || '1'),
+      'import.meta.env.VITE_ANDROID_VERSION_NAME': JSON.stringify(env.VITE_ANDROID_VERSION_NAME || '1.0.0'),
+      // 平台标识
+      'import.meta.env.VITE_PLATFORM': JSON.stringify(isAndroidBuild ? 'android' : 'web'),
     },
   };
 });
\ No newline at end of file