docs(wiki): 新增上线后待办清单（6 必须项 + 4 建议项 + 数据修复 SQL）

docs(wiki): 新增真机微信登录限流症状条目 + 校准日期
fix(auth): 微信登录端点独立限流 30 次/分钟
2026-06-05 16:39:51 +08:00 · 2026-06-05 16:36:14 +08:00 · 2026-06-05 16:33:42 +08:00 · 2026-06-05 11:04:08 +08:00 · 2026-06-05 10:52:30 +08:00 · 2026-06-05 10:51:17 +08:00
811 changed files with 92216 additions and 10398 deletions
--- a/.claude/skills/design-handoff/SKILL.md
+++ b/.claude/skills/design-handoff/SKILL.md
@@ -0,0 +1,244 @@
+---
+name: design-handoff
+description: 设计交付编排器 — 调用 huashu-design 设计原型、解析生成 SPEC，再由本 skill 根据 SPEC 实施代码，覆盖从需求到实现的完整流程
+---
+
+# 设计交付编排器 (design-handoff)
+
+编排从需求到代码实现的完整流程：
+1. 调用 huashu-design 设计 HTML 原型
+2. 解析原型生成 SPEC.md + 截图 + Token 映射
+3. 根据 SPEC 直接实施代码（不调用 huashu-design）
+
+## 触发词
+
+- `design-handoff`
+- `设计交付`
+- `handoff`
+- `设计并实现`
+- `从设计到代码`
+
+---
+
+## 输入模式
+
+### 模式 A：从需求开始（完整流程）
+
+用户提供功能需求描述（无 HTML 文件），skill 执行 7 步完整流程。
+
+**输入示例：**
+```
+/design-handoff 患者端家庭档案管理页面，包含家庭成员列表、添加/编辑/删除操作
+```
+
+### 模式 B：从原型开始（仅解析+实施）
+
+用户提供已有 HTML 原型文件路径，跳过 Step 0，从 Step 1 开始。
+
+**输入示例：**
+```
+/design-handoff docs/design/mp-13-family-profile.html
+```
+
+---
+
+## 核心流程（7 步）
+
+### Step 0: 设计原型（仅模式 A）
+
+调用 huashu-design 生成 HTML 原型：
+
+```
+Skill("huashu-design", "设计 {用户需求描述}。要求：1) 使用 HMS 设计系统 Token（const T = {...}）2) 包含 IosFrame 设备框 3) 每个页面用 .screen-wrap 包裹 4) 输出到 docs/design/ 目录")
+```
+
+**关键要求传递给 huashu-design：**
+- 使用项目 Token 系统（`const T = { pri: ..., bg: ..., r: ... }`）
+- 每个页面/状态用 `.screen-wrap` 包裹并配中文 label
+- 使用 `IosFrame` 组件呈现
+- 输出为单文件 HTML，保存到 `docs/design/mp-{编号}-{名称}.html`
+
+**完成后获得：** HTML 原型文件路径，进入 Step 1。
+
+### Step 1: 解析 HTML 原型
+
+调用 `scripts/parse-prototype.mjs` 解析 HTML 文件：
+
+```bash
+node .claude/skills/design-handoff/scripts/parse-prototype.mjs <html文件路径>
+```
+
+**输出（stdout JSON）：**
+- `tokens`: T 对象所有键值对（如 `{"T.pri": "#C4623A", ...}`）
+- `inlineStyles`: 内联样式值收集（按 CSS 属性分组）
+- `screens`: 每个屏幕的标签和组件名
+- `components`: 所有组件函数定义列表
+- `variant`: `"patient"` 或 `"doctor"`（根据 T.pri 值自动检测）
+
+**若脚本不存在：** LLM 自行解析 HTML，提取 T 对象和 DOM 结构。
+
+### Step 2: 截图
+
+调用 `scripts/extract-screenshots.mjs` 生成截图：
+
+```bash
+node .claude/skills/design-handoff/scripts/extract-screenshots.mjs <html文件路径> <输出目录>
+```
+
+**输出：** PNG 文件到输出目录，文件名由中文标签自动翻译为英文。
+
+**若脚本不存在：** 指导用户手动截图，保存到 `docs/design/{原型名}/screenshots/`。
+
+### Step 3: Token 匹配
+
+调用 `scripts/match-tokens.mjs` 进行三层 Token 匹配：
+
+```bash
+node .claude/skills/design-handoff/scripts/parse-prototype.mjs <html> > /tmp/parse-result.json
+node .claude/skills/design-handoff/scripts/match-tokens.mjs /tmp/parse-result.json .design/tokens.yml
+```
+
+**三层匹配算法：**
+1. **别名直查** — 在 `aliases.prototype_keys` 中查找已确认映射（支持值条件匹配，区分 patient/doctor variant）
+2. **值精确匹配** — 按 CSS 属性上下文消歧（borderRadius→radius, fontSize→typography）
+3. **色彩模糊匹配** — RGB 欧几里得距离 < 30 视为近似
+
+**若脚本不存在：** LLM 自行读取 tokens.yml 执行匹配。
+
+### Step 4: 组件映射推断
+
+读取 `defaults/components.yml`，按 DOM 特征推断组件映射。
+
+### Step 5: 交互推断
+
+调用 `scripts/infer-interactions.mjs` 推断交互行为：
+
+```bash
+node .claude/skills/design-handoff/scripts/infer-interactions.mjs <html文件路径> .claude/skills/design-handoff/rules/interaction-rules.yml
+```
+
+### Step 6: 组装 SPEC.md
+
+将前 5 步数据组装为 SPEC.md，输出到 `docs/design/{原型名}/SPEC.md`。
+
+### Step 7: 实施代码
+
+根据 Step 1-6 产出的 SPEC.md、截图和 Token 映射，**在当前会话中直接实施代码**。
+
+**实施流程：**
+
+1. **读取 SPEC.md** — 获取 Token 映射、组件清单、交互行为、未匹配项
+2. **读取截图** — 对照截图确认视觉还原度
+3. **创建/修改文件** — 在 `apps/miniprogram/src/pages/` 下实现 Taro 页面
+4. **验证** — `pnpm build` 编译通过 + 长者模式适配
+
+**实施规则：**
+
+- 样式使用 `var(--tk-*)` CSS 变量，不硬编码数值
+- 使用组件库已有组件（ContentCard, PrimaryButton, SectionTitle 等），参见 `defaults/components.yml`
+- 交互行为按 SPEC.md 第 4 节实现
+- 遵循 CLAUDE.md 中的小程序代码规范
+- 长者模式：字号 ≥ 22px，间距按 elder 值
+- 未匹配的 Token 需与用户确认后再补充到 `.design/tokens.yml`
+- 新建组件时遵循 `feedback-component-consistency` 原则：不适配则新建，不外部覆盖
+
+---
+
+## 前置检查
+
+执行任何步骤前，必须完成以下检查：
+
+### 1. 输入验证
+
+**模式 A（从需求开始）：** 无需输入文件验证，直接进入 Step 0。
+
+**模式 B（从原型开始）：** 确认输入文件为 huashu-design 产物：
+- 文件为 `.html` 格式
+- 包含 React + Babel 的 script 标签
+- 包含 Token 定义块（`const T = {`）
+
+### 2. Token 配置文件初始化
+
+检查 `.design/tokens.yml` 是否存在：
+- **存在** → 直接使用
+- **不存在** → 从 `defaults/tokens.yml` 复制
+
+---
+
+## 输出目录结构
+
+```
+docs/design/
+  mp-00-visitor.html          # 原始原型（Step 0 产物或已有文件）
+  mp-00-visitor/              # 交付包目录
+  ├── SPEC.md                 # 设计规格文档（Step 6 产物）
+  ├── screenshots/            # 截图目录（Step 2 产物）
+  │   ├── home.png
+  │   └── profile.png
+  ├── tokens.json             # Token 匹配结果（Step 3 产物）
+  └── META.yml                # 元数据
+```
+
+### META.yml 格式
+
+```yaml
+prototype: {原型文件名}
+source: {HTML文件路径}
+variant: patient | doctor
+generated_at: {ISO 8601}
+tokens:
+  matched: {数}
+  unmatched: {数}
+components:
+  total: {数}
+  mapped: {数}
+  new: {数}
+interactions: {数}
+```
+
+---
+
+## 终端输出
+
+完成全部步骤后：
+
+```
+============================================================
+设计交付完成: {原型名}
+输出目录: docs/design/{原型名}/
+模式: {完整流程 | 仅解析}
+Variant: {patient | doctor}
+Token 匹配: {matched}/{total} ({unmatched} 未匹配)
+组件: {total} ({new} 需新建)
+交互: {数} 项
+下一步: 根据 SPEC 实施代码（Step 7）
+============================================================
+```
+
+---
+
+## 待确认项交互
+
+完成 Step 1-6 后，若有 `pending` 或 `unmatched` Token，需与用户交互确认后再进入 Step 7。
+
+---
+
+## 脚本说明
+
+| 脚本 | 用途 |
+|------|------|
+| `scripts/parse-prototype.mjs` | 解析 HTML 原型为结构化 JSON |
+| `scripts/extract-screenshots.mjs` | Playwright 截图（裁掉设备框） |
+| `scripts/match-tokens.mjs` | 三层 Token 匹配 |
+| `scripts/infer-interactions.mjs` | 交互行为推断 |
+
+**降级策略：** 每个脚本缺失时，LLM 自行执行对应步骤。
+
+## 模板与规则
+
+| 文件 | 用途 |
+|------|------|
+| `templates/spec-template.md` | SPEC.md 模板 |
+| `defaults/tokens.yml` | Token 注册表 + 别名映射 |
+| `defaults/components.yml` | 组件映射规则 |
+| `rules/interaction-rules.yml` | 交互推断规则 |
--- a/.claude/skills/design-handoff/defaults/components.yml
+++ b/.claude/skills/design-handoff/defaults/components.yml
@@ -0,0 +1,139 @@
+version: 1
+updated: "2026-05-17"
+
+# ============================================================================
+# 小程序 UI 组件映射注册表
+# 数据源: apps/miniprogram/src/components/ui/
+# 每个组件记录 import 路径和实际 props（从源码接口定义提取）
+# ============================================================================
+
+components:
+  # --- 数据展示 ---
+  ContentCard:
+    miniprogram:
+      import: "@components/ui/ContentCard"
+      props: "variant('default'|'outlined'|'elevated'), padding('none'|'sm'|'md'|'lg'), margin('none'|'md'), activeFeedback('bg'|'opacity'|'scale'|'none'), onPress, className, style, children"
+      notes: "通用卡片容器，padding 映射到 --tk-card-padding-* token"
+
+  AlertCard:
+    miniprogram:
+      import: "@components/ui/AlertCard"
+      props: "variant('gradient'|'left-border'|'bordered'), title, subtitle, children, className"
+      notes: "告警/提示卡片，默认 left-border 变体"
+
+  VitalCard:
+    miniprogram:
+      import: "@components/ui/VitalCard"
+      props: "label, value, unit, status, onPress, className"
+      notes: "体征数据卡片，内嵌 StatusTag 显示状态"
+
+  ListItem:
+    miniprogram:
+      import: "@components/ui/ListItem"
+      props: "title, subtitle, extra(ReactNode), leftIcon(ReactNode), onPress, showArrow, unread, className"
+      notes: "列表行组件，支持图标/箭头/未读标记"
+
+  InfoRow:
+    miniprogram:
+      import: "@components/ui/InfoRow"
+      props: "label, value, valueNode(ReactNode), last, className"
+      notes: "键值对信息行，last 控制底部分隔线"
+
+  ChatBubble:
+    miniprogram:
+      import: "@components/ui/ChatBubble"
+      props: "content, isMine, time, className"
+      notes: "聊天气泡，isMine 控制左右侧和配色"
+
+  # --- 导航与标题 ---
+  SectionTitle:
+    miniprogram:
+      import: "@components/ui/SectionTitle"
+      props: "title, subtitle, action({text, onPress}), icon(ReactNode)"
+      notes: "区块标题，左侧竖线装饰 + 可选右侧操作链接"
+
+  TabFilter:
+    miniprogram:
+      import: "@components/ui/TabFilter"
+      props: "tabs(string[]), activeIndex, onChange(index), variant('fill'|'pill'|'segment'), className"
+      notes: "标签页筛选器，三种视觉变体"
+
+  GradientHeader:
+    miniprogram:
+      import: "@components/ui/GradientHeader"
+      props: "children, className"
+      notes: "渐变头部容器，承载页面顶部标题区域"
+
+  # --- 输入控件 ---
+  FormInput:
+    miniprogram:
+      import: "@components/ui/FormInput"
+      props: "label, placeholder, value, onInput(value), type('text'|'number'|'idcard'|'digit'), maxLength, disabled, error, className"
+      notes: "表单输入框，支持错误提示和多种输入类型"
+
+  # --- 按钮 ---
+  PrimaryButton:
+    miniprogram:
+      import: "@components/ui/PrimaryButton"
+      props: "children, onClick, disabled, loading, size('default'|'large'), className"
+      notes: "主色按钮，高度映射 --tk-btn-primary-h"
+
+  SecondaryButton:
+    miniprogram:
+      import: "@components/ui/SecondaryButton"
+      props: "children, onClick, disabled, className"
+      notes: "次要/描边按钮，与 PrimaryButton 配套使用"
+
+  # --- 状态指示 ---
+  StatusTag:
+    miniprogram:
+      import: "@components/ui/StatusTag"
+      props: "status, colorMap(Record<string, TagColor>), size('sm'|'md'), className, children"
+      notes: "状态标签，内置 status→color 映射（success/warning/error/info/default）"
+
+  ProgressRing:
+    miniprogram:
+      import: "@components/ui/ProgressRing"
+      props: "progress(0-1), size('sm'|'lg'), label, className"
+      notes: "环形进度条，使用 conic-gradient + --tk-pri 色"
+
+  LoadingCard:
+    miniprogram:
+      import: "@components/ui/LoadingCard"
+      props: "count, layout('card'|'list'|'detail')"
+      notes: "骨架屏加载占位，三种布局形态"
+
+  PageShell:
+    miniprogram:
+      import: "@components/ui/PageShell"
+      props: "padding('none'|'sm'|'md'|'lg'), safeBottom, scroll, className, children"
+      notes: "页面外壳，统一页面内边距和底部安全区，scroll 控制是否 ScrollView 包裹"
+
+# ============================================================================
+# 框架/平台组件（非自研，Taro/微信原生）
+# ============================================================================
+framework_components:
+  Swiper:
+    import: "@tarojs/components"
+    props: "autoplay, interval, duration, circular, indicatorDots, indicatorColor, indicatorActiveColor, onChange, children"
+    notes: "Taro Swiper 组件，用于轮播图场景"
+
+  TabBar:
+    import: "framework-config"
+    props: "N/A（app.config.ts 中声明 tabBar 配置）"
+    notes: "微信小程序原生 TabBar，在 app.config.ts 的 tabBar 字段配置"
+
+  ScrollView:
+    import: "@tarojs/components"
+    props: "scrollY, scrollX, scrollTop, onScroll, onScrollToLower, onScrollToUpper, children"
+    notes: "Taro ScrollView，PageShell 内部使用"
+
+  Input:
+    import: "@tarojs/components"
+    props: "value, placeholder, type, maxlength, disabled, onInput, onFocus, onBlur"
+    notes: "Taro Input，FormInput 内部使用"
+
+  Picker:
+    import: "@tarojs/components"
+    props: "mode('date'|'time'|'selector'), value, range, onChange, children"
+    notes: "Taro Picker，用于日期/时间/选项选择"
--- a/.claude/skills/design-handoff/defaults/tokens.yml
+++ b/.claude/skills/design-handoff/defaults/tokens.yml
@@ -0,0 +1,423 @@
+version: 1
+updated: "2026-05-17"
+
+# ============================================================================
+# Design Token 注册表
+# 数据源: apps/miniprogram/src/styles/tokens.scss + variables.scss
+# ============================================================================
+
+colors:
+  # --- 主色系（赤土橙） ---
+  - token: --tk-pri
+    value: "#C4623A"
+    scss_var: "$pri"
+    role: 主色/赤土橙 accent
+
+  - token: --tk-pri-l
+    value: "#F0DDD4"
+    scss_var: "$pri-l"
+    role: 主色浅/赤土浅
+
+  - token: --tk-pri-d
+    value: "#8B3E1F"
+    scss_var: "$pri-d"
+    role: 主色深/赤土深
+
+  # --- 阴影色（含透明度） ---
+  - token: --tk-shadow-btn
+    value: "0 4px 16px rgba(196, 98, 58, 0.3)"
+    scss_var: "$shadow-btn"
+    role: 主按钮阴影
+
+  - token: --tk-shadow-tab
+    value: "0 2px 8px rgba(196, 98, 58, 0.25)"
+    scss_var: "$shadow-tab"
+    role: 选中Tab阴影
+
+  # --- 文字色 ---
+  - token: --tk-text-secondary
+    value: "#78716C"
+    scss_var: "$tx3"
+    role: 淡文字/辅助文字
+
+  # --- 卡片背景 ---
+  - token: --tk-card-bg
+    value: "#FFFFFF"
+    scss_var: "$card"
+    role: 卡片白底
+
+  # --- 医生端覆盖色（.doctor-mode 下自动替换 --tk-pri*） ---
+  - token: --tk-pri.doctor
+    value: "#3A6B8C"
+    scss_var: "$doc-pri"
+    role: 医生端主色/靛蓝
+    note: 仅在 .doctor-mode 下覆盖 --tk-pri
+
+  - token: --tk-pri-l.doctor
+    value: "#D4E5F0"
+    scss_var: "$doc-pri-l"
+    role: 医生端浅色
+
+  - token: --tk-pri-d.doctor
+    value: "#2A4F6A"
+    scss_var: "$doc-pri-d"
+    role: 医生端深色
+
+# --- 未映射到 Token 的 SCSS 变量（原型中有但 tokens.scss 未声明为 CSS 变量） ---
+unmapped_scss_variables:
+  - scss_var: "$bg"
+    value: "#F5F0EB"
+    role: 页面主背景/温润米底
+    note: "原型 T.bg 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$tx"
+    value: "#2D2A26"
+    role: 主文字色/暖黑
+    note: "原型 T.tx 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$tx2"
+    value: "#5A554F"
+    role: 次文字色/暖灰
+    note: "原型 T.tx2 近似映射，elder-mode 下 --tk-text-secondary 覆盖为此值"
+
+  - scss_var: "$bd"
+    value: "#E8E2DC"
+    role: 边框色
+    note: "原型 T.bd 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$bd-l"
+    value: "#F0EBE5"
+    role: 浅边框色
+
+  - scss_var: "$acc"
+    value: "#5B7A5E"
+    role: 鼠尾草绿/成功色
+    note: "原型中成功色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$acc-l"
+    value: "#E8F0E8"
+    role: 成功浅色
+
+  - scss_var: "$dan"
+    value: "#B54A4A"
+    role: 危险色/柔红
+    note: "原型中危险色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$dan-l"
+    value: "#FDEAEA"
+    role: 危险浅色
+
+  - scss_var: "$wrn"
+    value: "#C4873A"
+    role: 警告色/暖琥珀
+    note: "原型中警告色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$wrn-l"
+    value: "#FFF3E0"
+    role: 警告浅色
+
+  - scss_var: "$surface-alt"
+    value: "#EDE8E2"
+    role: 辅助底色
+
+  - scss_var: "$wechat"
+    value: "#07C160"
+    role: 微信绿
+
+typography:
+  - token: --tk-font-display
+    value: "72px"
+    note: 大屏展示
+    elder: "80px"
+
+  - token: --tk-font-hero
+    value: "48px"
+    note: 启动页标题
+    elder: "56px"
+
+  - token: --tk-font-h1
+    value: "28px"
+    note: 页面标题 serif bold
+    elder: "32px"
+
+  - token: --tk-font-h2
+    value: "22px"
+    note: 副标题、用户名 serif bold
+    elder: "25px"
+
+  - token: --tk-font-body-lg
+    value: "18px"
+    note: 按钮文字、section 标题 fontWeight:600
+    elder: "22px"
+
+  - token: --tk-font-body
+    value: "16px"
+    note: 正文、输入框、icon 文字（最常用 UI 字号）
+    elder: "22px"
+
+  - token: --tk-font-body-sm
+    value: "14px"
+    note: 副文本、描述
+    elder: "19px"
+
+  - token: --tk-font-num
+    value: "30px"
+    note: 数值 serif bold
+    elder: "34px"
+
+  - token: --tk-font-num-lg
+    value: "34px"
+    note: 大数值
+    elder: "40px"
+
+  - token: --tk-font-cap
+    value: "13px"
+    note: 说明文字（第一高频字号）
+    elder: "18px"
+
+  - token: --tk-font-nav
+    value: "18px"
+    note: 导航栏标题 serif bold
+    elder: "22px"
+
+  - token: --tk-font-micro
+    value: "11px"
+    note: 角标、tag
+    elder: "17px"
+
+structure:
+  - token: --tk-line-height
+    value: "1.5"
+    elder: "1.7"
+
+spacing:
+  - token: --tk-gap-2xs
+    value: "4px"
+    scss_var: "$sp-2xs"
+    elder: "6px"
+
+  - token: --tk-gap-xs
+    value: "8px"
+    scss_var: "$sp-xs"
+    elder: "12px"
+
+  - token: --tk-gap-sm
+    value: "12px"
+    scss_var: "$sp-sm"
+    elder: "16px"
+
+  - token: --tk-gap-md
+    value: "16px"
+    scss_var: "$sp-md"
+    elder: "20px"
+
+  - token: --tk-section-gap
+    value: "20px"
+    scss_var: "$sp-section"
+    elder: "28px"
+
+  - token: --tk-gap-lg
+    value: "24px"
+    scss_var: "$sp-lg"
+    elder: "32px"
+
+  - token: --tk-gap-xl
+    value: "32px"
+    scss_var: "$sp-xl"
+    elder: "40px"
+
+  - token: --tk-gap-2xl
+    value: "48px"
+    scss_var: "$sp-2xl"
+    elder: "56px"
+
+  - token: --tk-page-padding
+    value: "20px"
+    elder: "28px"
+
+  - token: --tk-card-padding
+    value: "20px"
+    elder: "28px"
+
+  - token: --tk-card-padding-sm
+    value: "16px"
+    elder: "20px"
+
+  - token: --tk-card-padding-lg
+    value: "28px"
+    elder: "36px"
+
+radius:
+  - token: --tk-card-radius
+    value: "16px"
+    scss_var: "$r"
+    elder: "20px"
+
+radius_unmapped:
+  - scss_var: "$r-sm"
+    value: "12px"
+    note: "原型 T.rSm 映射目标"
+  - scss_var: "$r-xs"
+    value: "8px"
+    note: "原型 T.rXs 映射目标"
+  - scss_var: "$r-lg"
+    value: "20px"
+  - scss_var: "$r-pill"
+    value: "999px"
+
+sizing:
+  - token: --tk-touch-min
+    value: "48px"
+    role: 最小触控区
+    elder: "56px"
+
+  - token: --tk-btn-primary-h
+    value: "52px"
+    role: 主按钮高度
+    elder: "60px"
+
+  - token: --tk-input-height
+    value: "56px"
+    role: 输入框高度
+    elder: "64px"
+
+  - token: --tk-tabbar-space
+    value: "100px"
+    role: TabBar 底部安全区
+    elder: "120px"
+
+feedback:
+  - token: --tk-touch-feedback-opacity
+    value: "0.85"
+    role: 触控反馈透明度
+    elder: "0.8"
+
+tag:
+  - token: --tk-tag-font-size
+    value: "11px"
+    elder: "13px"
+
+  - token: --tk-tag-padding-v
+    value: "3px"
+    elder: "5px"
+
+  - token: --tk-tag-padding-h
+    value: "8px"
+    elder: "12px"
+
+shadow_unmapped:
+  # tokens.scss 中的 --tk-shadow-btn/tab 是复合值（含偏移+模糊+颜色）
+  # 以下为 variables.scss 中的其他阴影，未声明为 CSS Token
+  - scss_var: "$shadow-sm"
+    value: "0 1px 4px rgba(45, 42, 38, 0.06)"
+    role: 小阴影
+
+  - scss_var: "$shadow-md"
+    value: "0 2px 12px rgba(45, 42, 38, 0.10)"
+    role: 中阴影
+
+  - scss_var: "$shadow-lg"
+    value: "0 8px 32px rgba(45, 42, 38, 0.15)"
+    role: 大阴影
+
+# ============================================================================
+# 原型 Key → Token 映射（aliases）
+# 用于设计移交时自动匹配原型属性到实际 Token
+# ============================================================================
+aliases:
+  prototype_keys:
+    T.pri:
+      - value: "#C4623A"
+        token: --tk-pri
+        status: exact_match
+        variant: patient
+      - value: "#3A6B8C"
+        token: --tk-pri.doctor
+        status: exact_match
+        variant: doctor
+
+    T.priL:
+      - value: "#F0DDD4"
+        token: --tk-pri-l
+        status: exact_match
+        variant: patient
+      - value: "#D4E5F0"
+        token: --tk-pri-l.doctor
+        status: exact_match
+        variant: doctor
+
+    T.priD:
+      - value: "#8B3E1F"
+        token: --tk-pri-d
+        status: exact_match
+        variant: patient
+      - value: "#2A4F6A"
+        token: --tk-pri-d.doctor
+        status: exact_match
+        variant: doctor
+
+    T.bg:
+      token: null
+      nearest: --tk-card-bg
+      scss_var: "$bg"
+      value: "#F5F0EB"
+      status: unmatched
+      note: "原型页面背景色，tokens.scss 未声明为 CSS 变量，直接用 $bg SCSS 变量"
+
+    T.card:
+      token: --tk-card-bg
+      status: exact_match
+
+    T.surface:
+      token: --tk-card-bg
+      status: approximate
+      note: "原型中 surface ≈ 卡片白底"
+
+    T.tx:
+      token: null
+      nearest: --tk-text-secondary
+      scss_var: "$tx"
+      value: "#2D2A26"
+      status: unmatched
+      note: "主文字色，tokens.scss 未声明为 CSS 变量，直接用 $tx SCSS 变量"
+
+    T.tx2:
+      token: null
+      nearest: --tk-text-secondary
+      scss_var: "$tx2"
+      value: "#5A554F"
+      status: unmatched
+      note: "次文字色，tokens.scss 未声明，elder-mode 下 --tk-text-secondary 覆盖为此值"
+
+    T.tx3:
+      token: --tk-text-secondary
+      scss_var: "$tx3"
+      value: "#78716C"
+      status: exact_match
+
+    T.bd:
+      token: null
+      scss_var: "$bd"
+      value: "#E8E2DC"
+      status: unmatched
+      note: "边框色（不是圆角），tokens.scss 未声明为 CSS 变量"
+
+    T.r:
+      token: --tk-card-radius
+      scss_var: "$r"
+      value: "16px"
+      status: exact_match
+
+    T.rSm:
+      token: null
+      scss_var: "$r-sm"
+      value: "12px"
+      status: unmatched
+      note: "tokens.scss 未声明，需添加 --tk-radius-sm 或直接用 $r-sm SCSS 变量"
+
+    T.rXs:
+      token: null
+      scss_var: "$r-xs"
+      value: "8px"
+      status: unmatched
+      note: "tokens.scss 未声明，需添加 --tk-radius-xs 或直接用 $r-xs SCSS 变量"
--- a/.claude/skills/design-handoff/package-lock.json
+++ b/.claude/skills/design-handoff/package-lock.json
@@ -0,0 +1,79 @@
+{
+  "name": "design-handoff",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "design-handoff",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "js-yaml": "^4.1.1",
+        "playwright": "^1.58.0"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.0.tgz",
+      "integrity": "sha512-2SVA0sbPktiIY/MCOPX8e86ehA/e+tDNq+e5Y8qjKYti2Z/JG7xnronT/TXTIkKbYGWlCbuucZ6dziEgkoEjQQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.0.tgz",
+      "integrity": "sha512-aaoB1RWrdNi3//rOeKuMiS65UCcgOVljU46At6eFcOFPFHWtd2weHRRow6z/n+Lec0Lvu0k9ZPKJSjPugikirw==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}
--- a/.claude/skills/design-handoff/package.json
+++ b/.claude/skills/design-handoff/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "design-handoff",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "js-yaml": "^4.1.1",
+    "playwright": "^1.58.0"
+  }
+}
--- a/.claude/skills/design-handoff/rules/interaction-rules.yml
+++ b/.claude/skills/design-handoff/rules/interaction-rules.yml
@@ -0,0 +1,114 @@
+version: 1
+updated: "2026-05-17"
+
+# ============================================================================
+# 交互推断规则
+# patterns 使用正则表达式，匹配 HTML/JS 源码中的实际代码模式
+# require_all: true 表示所有 pattern 必须同时匹配（默认 false，任一匹配即可）
+# ============================================================================
+
+rules:
+  - id: swiper-autoplay
+    name: "自动轮播 + 手动滑动"
+    patterns:
+      - "linear-gradient"
+      - "width.*24.*width.*8"
+    require_all: false
+    infer:
+      component: "Swiper"
+      props: "autoplay circular indicatorDots"
+      behavior: "自动轮播，3-5秒切换"
+    confidence: high
+
+  - id: card-tap
+    name: "卡片点击跳转"
+    patterns:
+      - "\\.map\\("
+    require_all: false
+    infer:
+      component: "ContentCard"
+      props: "activeFeedback onPress"
+      behavior: "卡片可点击，带触控反馈"
+    confidence: medium
+
+  - id: form-submit
+    name: "表单提交"
+    patterns:
+      - "<input"
+      - "<button"
+    require_all: false
+    infer:
+      component: "FormInput + PrimaryButton"
+      props: ""
+      behavior: "表单输入+提交按钮"
+    confidence: high
+
+  - id: list-scroll
+    name: "列表滚动"
+    patterns:
+      - "overflow.*auto|scroll"
+      - "\\.map\\(.*\\.map\\(.*\\.map\\("
+    require_all: false
+    infer:
+      component: "ScrollView"
+      props: "scrollY onScrollToLower"
+      behavior: "可滚动列表，支持上拉加载"
+    confidence: medium
+
+  - id: tab-switch
+    name: "标签页切换"
+    patterns:
+      - "tab"
+      - "segment"
+      - "filter"
+    require_all: false
+    infer:
+      component: "TabFilter"
+      props: "tabs onChange"
+      behavior: "标签页切换筛选"
+    confidence: medium
+
+  - id: static-decoration
+    name: "纯装饰无交互"
+    patterns:
+      - "position.*absolute"
+      - "opacity.*0\\."
+    require_all: true
+    infer:
+      component: null
+      props: ""
+      behavior: "纯装饰性元素，无交互"
+    confidence: high
+
+  - id: login-cta
+    name: "登录/注册触发"
+    patterns:
+      - "登录"
+      - "注册"
+      - "微信登录"
+      - "立即登录"
+    exclude_patterns:
+      - "立即关注"
+      - "立即处理"
+      - "立即查看"
+      - "需要立即"
+    require_all: false
+    infer:
+      component: "PrimaryButton"
+      props: "onClick"
+      behavior: "登录/注册引导按钮"
+    confidence: high
+
+  - id: empty-fallback
+    name: "空数据降级"
+    patterns:
+      - "\\.length > 0"
+      - "\\.length === 0"
+      - "暂无"
+      - "没有"
+    require_all: false
+    infer:
+      component: null
+      props: ""
+      behavior: "条件渲染：有数据显示列表，无数据显示空状态"
+    confidence: medium
--- a/.claude/skills/design-handoff/scripts/extract-screenshots.mjs
+++ b/.claude/skills/design-handoff/scripts/extract-screenshots.mjs
@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+/**
+ * extract-screenshots.mjs — 从 huashu-design HTML 原型截取 IosFrame 屏幕内容
+ *
+ * 用法: node extract-screenshots.mjs <html-file> <output-dir>
+ */
+
+import { chromium } from 'playwright';
+import { resolve, basename } from 'node:path';
+import { mkdirSync, existsSync } from 'node:fs';
+
+const IOS_FRAME_TRIM = { statusBar: 54, homeIndicator: 34, padding: 12 };
+const RENDER_WAIT_TIMEOUT = 10_000;
+const RENDER_POLL_INTERVAL = 200;
+
+const ZH_EN_MAP = {
+  '完整页': '', '—': '-', ' ': '-',
+  '首页': 'home', '我的': 'profile', '登录': 'login', '健康': 'health',
+  '消息': 'messages', '咨询': 'consultation', '预约': 'appointment',
+  '商城': 'mall', '设置': 'settings', '访客': 'guest', '轮播': 'slide',
+  '体检': 'checkup', '报告': 'report', '医生': 'doctor', '患者': 'patient',
+  '记录': 'record', '详情': 'detail', '列表': 'list', '管理': 'manage',
+  '编辑': 'edit', '新增': 'add', '搜索': 'search', '筛选': 'filter',
+  '结果': 'result', '历史': 'history', '数据': 'data', '体征': 'vitals',
+  '用药': 'medication', '随访': 'followup', '透析': 'dialysis',
+  '日常': 'daily', '监测': 'monitor', '告警': 'alert', '家庭': 'family',
+  '成员': 'member', '档案': 'profile', '商品': 'product', '兑换': 'exchange',
+  '订单': 'order', '积分': 'points', '活动': 'activity',
+};
+
+function translateLabel(label, fallbackIndex) {
+  let result = label;
+  const sortedKeys = Object.keys(ZH_EN_MAP).sort((a, b) => b.length - a.length);
+  for (const zh of sortedKeys) {
+    result = result.split(zh).join(ZH_EN_MAP[zh]);
+  }
+  result = result.replace(/[^\w\-.]/g, '-');
+  result = result.replace(/^-+|-+$/g, '').replace(/-+/g, '-');
+  return result || `screen-${fallbackIndex}`;
+}
+
+function fail(msg) {
+  process.stderr.write(`ERROR: ${msg}\n`);
+  process.exit(1);
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  if (args.length < 2) fail('用法: node extract-screenshots.mjs <html-file> <output-dir>');
+
+  const htmlFile = resolve(args[0]);
+  const outputDir = resolve(args[1]);
+  if (!existsSync(htmlFile)) fail(`HTML 文件不存在: ${htmlFile}`);
+  mkdirSync(outputDir, { recursive: true });
+
+  let browser;
+  try {
+    browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext({
+      viewport: { width: 2400, height: 1400 },
+      deviceScaleFactor: 2,
+    });
+    const page = await context.newPage();
+
+    const fileUrl = `file:///${htmlFile.replace(/\\/g, '/')}`;
+    await page.goto(fileUrl, { waitUntil: 'domcontentloaded', timeout: 30_000 });
+
+    // 等待 React 渲染
+    const renderStart = Date.now();
+    let rendered = false;
+    while (Date.now() - renderStart < RENDER_WAIT_TIMEOUT) {
+      rendered = await page.evaluate(() => {
+        const root = document.getElementById('root');
+        return root ? root.children.length > 0 : false;
+      });
+      if (rendered) break;
+      await page.waitForTimeout(RENDER_POLL_INTERVAL);
+    }
+    if (!rendered) fail(`React 渲染超时: ${basename(htmlFile)}`);
+    await page.waitForTimeout(500);
+
+    // 查找 .screen-wrap 容器
+    const screenCount = await page.locator('.screen-wrap').count();
+
+    if (screenCount === 0) {
+      // 降级：整页截图
+      await page.screenshot({ path: resolve(outputDir, 'full-page.png'), fullPage: true });
+      process.stdout.write(JSON.stringify({
+        source: basename(htmlFile), totalScreens: 0, fallback: true,
+        files: [{ label: 'full-page', file: 'full-page.png' }],
+      }, null, 2) + '\n');
+      await browser.close();
+      return;
+    }
+
+    // 使用 page.evaluate 定位并截取每个 screen
+    const screenData = await page.evaluate(() => {
+      const wraps = document.querySelectorAll('.screen-wrap');
+      return Array.from(wraps).map((wrap, i) => {
+        // 获取标签
+        const labelEl = wrap.querySelector('.screen-label');
+        const label = labelEl ? labelEl.textContent.trim() : '';
+
+        // 找 IosFrame wrapper: screen-wrap 下有 borderRadius:60 + background:#000 的 div
+        // 或者用策略：找第一个有 style 含 borderRadius 的 div
+        const allDivs = wrap.querySelectorAll(':scope > div');
+        let wrapperDiv = null;
+        for (const div of allDivs) {
+          const style = div.getAttribute('style') || '';
+          // IosFrame wrapper 特征: background:#000 或 background: black
+          if (style.includes('background:')) {
+            wrapperDiv = div;
+            break;
+          }
+        }
+        // 如果没找到 background 的，取第一个 div
+        if (!wrapperDiv && allDivs.length > 0) wrapperDiv = allDivs[0];
+
+        if (!wrapperDiv) return { label, index: i, found: false };
+
+        const wrapperBox = wrapperDiv.getBoundingClientRect();
+        return {
+          label,
+          index: i,
+          found: true,
+          wrapperBox: {
+            x: wrapperBox.x,
+            y: wrapperBox.y,
+            width: wrapperBox.width,
+            height: wrapperBox.height,
+          },
+        };
+      });
+    });
+
+    const { statusBar, homeIndicator, padding } = IOS_FRAME_TRIM;
+    const files = [];
+    const usedNames = new Set();
+
+    for (const screen of screenData) {
+      if (!screen.found || !screen.wrapperBox) {
+        process.stderr.write(`WARNING: screen ${screen.index + 1} 未找到 IosFrame，跳过\n`);
+        continue;
+      }
+
+      const box = screen.wrapperBox;
+      const clip = {
+        x: box.x + padding,
+        y: box.y + padding + statusBar,
+        width: box.width - padding * 2,
+        height: box.height - padding * 2 - statusBar - homeIndicator,
+      };
+
+      if (clip.width <= 0 || clip.height <= 0) {
+        process.stderr.write(`WARNING: screen ${screen.index + 1} clip 无效 (${clip.width}x${clip.height})\n`);
+        continue;
+      }
+
+      let safeName = translateLabel(screen.label || '', screen.index + 1);
+      if (usedNames.has(safeName)) {
+        let s = 2;
+        while (usedNames.has(`${safeName}-${s}`)) s++;
+        safeName = `${safeName}-${s}`;
+      }
+      usedNames.add(safeName);
+
+      const filename = `${safeName}.png`;
+      await page.screenshot({ path: resolve(outputDir, filename), clip });
+
+      files.push({
+        label: screen.label || `screen-${screen.index + 1}`,
+        file: filename,
+        clip: {
+          x: Math.round(clip.x), y: Math.round(clip.y),
+          width: Math.round(clip.width), height: Math.round(clip.height),
+        },
+      });
+    }
+
+    process.stdout.write(JSON.stringify({
+      source: basename(htmlFile),
+      totalScreens: screenCount,
+      extracted: files.length,
+      files,
+    }, null, 2) + '\n');
+
+  } catch (err) {
+    fail(`Playwright 执行失败: ${err.message}`);
+  } finally {
+    if (browser) await browser.close();
+  }
+}
+
+main();
--- a/.claude/skills/design-handoff/scripts/infer-interactions.mjs
+++ b/.claude/skills/design-handoff/scripts/infer-interactions.mjs
@@ -0,0 +1,222 @@
+#!/usr/bin/env node
+/**
+ * infer-interactions.mjs -- 对 HTML 原型源码进行静态模式匹配，推断页面交互行为
+ *
+ * 读取 HTML 文件和 interaction-rules.yml，用正则匹配源码中的模式，
+ * 输出推断的交互组件、props 和行为描述。
+ *
+ * 用法: node infer-interactions.mjs <html-file> <interaction-rules.yml>
+ */
+
+import { readFileSync } from 'node:fs';
+import { resolve, basename } from 'node:path';
+import { createRequire } from 'node:module';
+
+// js-yaml 是 CJS 包，需要用 createRequire 加载
+const require = createRequire(import.meta.url);
+const yaml = require('js-yaml');
+
+// -- 工具函数 ----------------------------------------------------------------
+
+/**
+ * 输出错误到 stderr 并以 code 1 退出
+ */
+function fail(message) {
+  process.stderr.write(JSON.stringify({ error: message }, null, 2) + '\n');
+  process.exit(1);
+}
+
+/**
+ * 读取文件内容，失败时调用 fail
+ */
+function readFileOrFail(filePath, description) {
+  try {
+    return readFileSync(filePath, 'utf-8');
+  } catch (err) {
+    fail(`无法读取${description}: ${filePath} -- ${err.message}`);
+  }
+}
+
+// -- 组件函数位置追踪 ---------------------------------------------------------
+
+/**
+ * 提取源码中所有 function/const 组件声明的位置和名称。
+ * 返回 [{ name, start, end }]，按 start 排序。
+ *
+ * end 的计算采用简化策略：找到下一个同级 function/const 声明或源码末尾。
+ * 对于 locations 追踪来说已经足够精确——只要知道 pattern 落在哪个函数内即可。
+ */
+function extractFunctionRanges(source) {
+  const ranges = [];
+
+  // 匹配 function 声明: function XxxName(
+  const funcPattern = /function\s+([A-Z]\w*)\s*\(/g;
+  let match;
+  while ((match = funcPattern.exec(source)) !== null) {
+    ranges.push({ name: match[1], start: match.index });
+  }
+
+  // 匹配 const 箭头函数: const XxxName = (...
+  const arrowPattern = /const\s+([A-Z]\w*)\s*=\s*(?:\([^)]*\)|\w+)\s*=>/g;
+  while ((match = arrowPattern.exec(source)) !== null) {
+    ranges.push({ name: match[1], start: match.index });
+  }
+
+  // 按 start 排序，计算 end（下一个函数的 start 或源码末尾）
+  ranges.sort((a, b) => a.start - b.start);
+  for (let i = 0; i < ranges.length; i++) {
+    const nextStart = i + 1 < ranges.length ? ranges[i + 1].start : source.length;
+    ranges[i].end = nextStart;
+  }
+
+  return ranges;
+}
+
+/**
+ * 给定 pattern 在 source 中的匹配位置，找到它所属的函数名。
+ * 如果不在任何函数内，返回 '全局'。
+ */
+function findEnclosingFunction(ranges, matchIndex) {
+  for (const range of ranges) {
+    if (matchIndex >= range.start && matchIndex < range.end) {
+      return range.name;
+    }
+  }
+  return '全局';
+}
+
+// -- 核心匹配逻辑 ------------------------------------------------------------
+
+/**
+ * 对单条 rule 执行模式匹配。
+ * 返回 { matched, matchedPatterns, locations }。
+ */
+function matchRule(rule, source, funcRanges) {
+  const requireAll = rule.require_all === true;
+  const matchedPatterns = [];
+  const locationSet = new Set();
+
+  for (const patternStr of rule.patterns) {
+    try {
+      const regex = new RegExp(patternStr, 'g');
+      let match;
+      let patternMatched = false;
+
+      while ((match = regex.exec(source)) !== null) {
+        patternMatched = true;
+        const enclosing = findEnclosingFunction(funcRanges, match.index);
+        locationSet.add(enclosing);
+      }
+
+      if (patternMatched) {
+        matchedPatterns.push(patternStr);
+      }
+    } catch (err) {
+      // 正则语法错误，跳过此 pattern 并报告到 stderr
+      process.stderr.write(`警告: rule "${rule.id}" 的 pattern "${patternStr}" 正则语法错误: ${err.message}\n`);
+    }
+  }
+
+  const allMatched = requireAll
+    ? matchedPatterns.length === rule.patterns.length
+    : matchedPatterns.length > 0;
+
+  // 排除模式检查：如果任一 exclude_pattern 命中，该规则不匹配
+  if (allMatched && Array.isArray(rule.exclude_patterns)) {
+    for (const exclPattern of rule.exclude_patterns) {
+      try {
+        const exclRegex = new RegExp(exclPattern);
+        if (exclRegex.test(source)) {
+          return {
+            matched: false,
+            matchedPatterns: [],
+            locations: [],
+            excluded_by: exclPattern,
+          };
+        }
+      } catch (_e) { /* ignore regex errors */ }
+    }
+  }
+
+  return {
+    matched: allMatched,
+    matchedPatterns: allMatched ? matchedPatterns : [],
+    locations: allMatched ? [...locationSet] : [],
+  };
+}
+
+// -- 主流程 ------------------------------------------------------------------
+
+function main() {
+  const args = process.argv.slice(2);
+  if (args.length < 2) {
+    fail('用法: node infer-interactions.mjs <html-file> <interaction-rules.yml>');
+  }
+
+  const htmlPath = resolve(args[0]);
+  const rulesPath = resolve(args[1]);
+
+  // 读取源文件
+  const source = readFileOrFail(htmlPath, 'HTML 文件');
+
+  // 读取并解析 rules YAML
+  const rulesContent = readFileOrFail(rulesPath, 'interaction-rules.yml');
+  let rulesDoc;
+  try {
+    rulesDoc = yaml.load(rulesContent);
+  } catch (err) {
+    fail(`YAML 解析失败: ${err.message}`);
+  }
+
+  if (!rulesDoc || !Array.isArray(rulesDoc.rules)) {
+    fail('interaction-rules.yml 格式错误: 缺少顶层的 rules 数组');
+  }
+
+  const rules = rulesDoc.rules;
+
+  // 提取函数位置范围表（用于 locations 追踪）
+  const funcRanges = extractFunctionRanges(source);
+
+  // 逐条匹配
+  const interactions = [];
+  let matchedCount = 0;
+
+  for (const rule of rules) {
+    const { matched, matchedPatterns, locations } = matchRule(rule, source, funcRanges);
+
+    const entry = {
+      id: rule.id,
+      name: rule.name,
+      matched,
+    };
+
+    if (matched) {
+      matchedCount++;
+      entry.matchedPatterns = matchedPatterns;
+      entry.component = rule.infer?.component ?? null;
+      entry.props = rule.infer?.props ?? '';
+      entry.behavior = rule.infer?.behavior ?? '';
+      entry.confidence = rule.confidence ?? 'medium';
+      if (locations.length > 0) {
+        entry.locations = locations;
+      }
+    }
+
+    interactions.push(entry);
+  }
+
+  // 组装输出
+  const result = {
+    source: basename(htmlPath),
+    interactions,
+    summary: {
+      total: rules.length,
+      matched: matchedCount,
+      unmatched: rules.length - matchedCount,
+    },
+  };
+
+  process.stdout.write(JSON.stringify(result, null, 2) + '\n');
+}
+
+main();
--- a/.claude/skills/design-handoff/scripts/match-tokens.mjs
+++ b/.claude/skills/design-handoff/scripts/match-tokens.mjs
@@ -0,0 +1,706 @@
+#!/usr/bin/env node
+
+/**
+ * match-tokens.mjs — 三层 Token 匹配
+ *
+ * 接收 parse-prototype.mjs 的输出 JSON 和 tokens.yml 配置，
+ * 对每个原型 Token（别名 / 内联样式值）执行三层匹配，
+ * 输出映射关系到 stdout。
+ *
+ * 三层匹配算法：
+ *   Layer 1: 别名直查（aliases.prototype_keys）
+ *   Layer 2: 值精确匹配（带 CSS 属性上下文消歧）
+ *   Layer 3: 色彩模糊匹配（RGB 欧几里得距离 < 30）
+ *
+ * 用法:
+ *   node match-tokens.mjs <parse-result.json> <tokens.yml>
+ */
+
+import yaml from 'js-yaml';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+// ---------------------------------------------------------------------------
+// 工具函数
+// ---------------------------------------------------------------------------
+
+/**
+ * 解析 hex 颜色字符串为 {r, g, b}
+ * 支持 #RGB / #RRGGBB / RRGGBB
+ */
+function hexToRgb(hex) {
+  if (!hex || typeof hex !== 'string') return null;
+  const cleaned = hex.replace(/^#/, '').trim();
+  if (cleaned.length === 3) {
+    const r = parseInt(cleaned[0] + cleaned[0], 16);
+    const g = parseInt(cleaned[1] + cleaned[1], 16);
+    const b = parseInt(cleaned[2] + cleaned[2], 16);
+    return { r, g, b };
+  }
+  if (cleaned.length === 6) {
+    const r = parseInt(cleaned.substring(0, 2), 16);
+    const g = parseInt(cleaned.substring(2, 4), 16);
+    const b = parseInt(cleaned.substring(4, 6), 16);
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null;
+    return { r, g, b };
+  }
+  return null;
+}
+
+/**
+ * RGB 欧几里得距离
+ */
+function colorDistance(rgb1, rgb2) {
+  return Math.sqrt(
+    (rgb1.r - rgb2.r) ** 2 +
+    (rgb1.g - rgb2.g) ** 2 +
+    (rgb1.b - rgb2.b) ** 2,
+  );
+}
+
+/**
+ * 判断字符串是否为颜色值（hex 格式）
+ */
+function isHexColor(value) {
+  if (!value || typeof value !== 'string') return false;
+  return /^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(value.trim());
+}
+
+/**
+ * 归一化数值：去掉 px 后缀，返回数值字符串（保留小数）
+ */
+function normalizeNumericValue(value) {
+  if (value == null) return null;
+  const str = String(value).trim();
+  if (str.endsWith('px')) {
+    return str.slice(0, -2).trim();
+  }
+  if (str.endsWith('rem') || str.endsWith('em')) {
+    return null; // rem/em 标记为 pending，不参与数值匹配
+  }
+  return str;
+}
+
+/**
+ * 归一化颜色值：统一为小写 #rrggbb
+ */
+function normalizeColor(value) {
+  if (!value) return null;
+  const str = String(value).trim();
+  const hex = str.startsWith('#') ? str : `#${str}`;
+  const rgb = hexToRgb(hex);
+  if (!rgb) return null;
+  return `#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
+}
+
+/**
+ * CSS 属性到 token 类别的映射
+ */
+const CSS_PROPERTY_CATEGORIES = {
+  // 颜色类
+  color: 'color',
+  backgroundColor: 'color',
+  'background-color': 'color',
+  background: 'color',
+  borderColor: 'color',
+  'border-color': 'color',
+  borderTopColor: 'color',
+  borderBottomColor: 'color',
+  borderLeftColor: 'color',
+  borderRightColor: 'color',
+  outlineColor: 'color',
+  textColor: 'color',
+  fill: 'color',
+
+  // 间距类
+  padding: 'spacing',
+  paddingTop: 'spacing',
+  paddingBottom: 'spacing',
+  paddingLeft: 'spacing',
+  paddingRight: 'spacing',
+  paddingVertical: 'spacing',
+  paddingHorizontal: 'spacing',
+  margin: 'spacing',
+  marginTop: 'spacing',
+  marginBottom: 'spacing',
+  marginLeft: 'spacing',
+  marginRight: 'spacing',
+  gap: 'spacing',
+  rowGap: 'spacing',
+  columnGap: 'spacing',
+  top: 'spacing',
+  bottom: 'spacing',
+  left: 'spacing',
+  right: 'spacing',
+
+  // 排版类
+  fontSize: 'typography',
+  lineHeight: 'typography',
+  fontWeight: 'typography',
+  letterSpacing: 'typography',
+
+  // 圆角类
+  borderRadius: 'radius',
+  borderTopLeftRadius: 'radius',
+  borderTopRightRadius: 'radius',
+  borderBottomLeftRadius: 'radius',
+  borderBottomRightRadius: 'radius',
+
+  // 尺寸类
+  width: 'sizing',
+  height: 'sizing',
+  minWidth: 'sizing',
+  minHeight: 'sizing',
+  maxWidth: 'sizing',
+  maxHeight: 'sizing',
+};
+
+// ---------------------------------------------------------------------------
+// Token 注册表构建
+// ---------------------------------------------------------------------------
+
+/**
+ * 从 tokens.yml 构建可查找的 Token 列表
+ * 返回 { all: [...], byCategory: { color: [...], spacing: [...], ... } }
+ */
+function buildTokenRegistry(tokensConfig) {
+  const all = [];
+  const byCategory = {};
+
+  function addToken(entry, category) {
+    const record = {
+      token: entry.token || null,
+      scssVar: entry.scss_var || null,
+      value: entry.value || null,
+      category,
+      role: entry.role || null,
+      note: entry.note || null,
+    };
+    all.push(record);
+    if (!byCategory[category]) byCategory[category] = [];
+    byCategory[category].push(record);
+  }
+
+  // colors
+  if (Array.isArray(tokensConfig.colors)) {
+    for (const c of tokensConfig.colors) {
+      addToken(c, 'color');
+    }
+  }
+
+  // unmapped_scss_variables（颜色类）
+  if (Array.isArray(tokensConfig.unmapped_scss_variables)) {
+    for (const v of tokensConfig.unmapped_scss_variables) {
+      addToken(v, 'color');
+    }
+  }
+
+  // typography
+  if (Array.isArray(tokensConfig.typography)) {
+    for (const t of tokensConfig.typography) {
+      addToken(t, 'typography');
+    }
+  }
+
+  // structure (line-height 归入 typography)
+  if (Array.isArray(tokensConfig.structure)) {
+    for (const s of tokensConfig.structure) {
+      addToken(s, 'typography');
+    }
+  }
+
+  // spacing
+  if (Array.isArray(tokensConfig.spacing)) {
+    for (const s of tokensConfig.spacing) {
+      addToken(s, 'spacing');
+    }
+  }
+
+  // radius
+  if (Array.isArray(tokensConfig.radius)) {
+    for (const r of tokensConfig.radius) {
+      if (r && typeof r === 'object') {
+        addToken(r, 'radius');
+      }
+    }
+  }
+  if (Array.isArray(tokensConfig.radius_unmapped)) {
+    for (const r of tokensConfig.radius_unmapped) {
+      if (r && typeof r === 'object') {
+        addToken(r, 'radius');
+      }
+    }
+  }
+
+  // sizing
+  if (Array.isArray(tokensConfig.sizing)) {
+    for (const s of tokensConfig.sizing) {
+      addToken(s, 'sizing');
+    }
+  }
+
+  // feedback（归入 sizing 或单独）
+  if (Array.isArray(tokensConfig.feedback)) {
+    for (const f of tokensConfig.feedback) {
+      addToken(f, 'feedback');
+    }
+  }
+
+  // tag
+  if (Array.isArray(tokensConfig.tag)) {
+    for (const t of tokensConfig.tag) {
+      addToken(t, 'tag');
+    }
+  }
+
+  // shadow_unmapped
+  if (Array.isArray(tokensConfig.shadow_unmapped)) {
+    for (const s of tokensConfig.shadow_unmapped) {
+      addToken(s, 'shadow');
+    }
+  }
+
+  return { all, byCategory };
+}
+
+// ---------------------------------------------------------------------------
+// 三层匹配
+// ---------------------------------------------------------------------------
+
+/**
+ * Layer 1: 别名直查（支持值条件映射）
+ *
+ * alias 格式有两种：
+ *   单条: { token: "...", status: "exact_match" }
+ *   数组: [{ value: "#C4623A", token: "--tk-pri", variant: "patient" },
+ *          { value: "#3A6B8C", token: "--tk-pri.doctor", variant: "doctor" }]
+ *
+ * 数组格式按值匹配，单条格式直接匹配（兼容旧格式）。
+ */
+function matchByAlias(key, prototypeValue, aliases) {
+  if (!aliases || !aliases.prototype_keys) return null;
+  const alias = aliases.prototype_keys[key];
+  if (!alias) return null;
+
+  // 数组格式：按值条件匹配
+  if (Array.isArray(alias)) {
+    const normalizedInput = normalizeColor(prototypeValue) || normalizeNumericValue(prototypeValue) || String(prototypeValue);
+    for (const entry of alias) {
+      const normalizedAlias = normalizeColor(entry.value) || normalizeNumericValue(entry.value) || String(entry.value);
+      if (normalizedInput === normalizedAlias) {
+        const result = {
+          method: 'alias',
+          confidence: entry.status === 'exact_match' ? 'confirmed' : 'pending',
+          token: entry.token || null,
+          scssVar: entry.scss_var || null,
+        };
+        if (entry.variant) result.variant = entry.variant;
+        if (entry.note) result.note = entry.note;
+        return result;
+      }
+    }
+    // 数组中无值匹配 → 降级到 Layer 2
+    return null;
+  }
+
+  // 单条格式（兼容旧格式）
+  const result = { method: 'alias', confidence: null };
+
+  // 值校验：如果 alias 有 value 字段，比较值
+  if (alias.value && prototypeValue != null) {
+    const normAlias = normalizeColor(alias.value) || normalizeNumericValue(alias.value) || String(alias.value);
+    const normProto = normalizeColor(prototypeValue) || normalizeNumericValue(prototypeValue) || String(prototypeValue);
+    if (normAlias !== normProto) {
+      // 值不匹配 → 降级到 Layer 2
+      return null;
+    }
+  }
+
+  if (alias.status === 'exact_match') {
+    result.token = alias.token || null;
+    result.scssVar = alias.scss_var || null;
+    result.confidence = 'confirmed';
+  } else if (alias.status === 'unmatched') {
+    result.token = alias.token || null;
+    result.scssVar = alias.scss_var || null;
+    result.tokenValue = alias.value || null;
+    result.confidence = 'pending';
+    if (alias.note) result.note = alias.note;
+    if (!result.token && alias.scssVar) {
+      result.note = result.note || `tokens.scss 未声明为 CSS 变量，直接使用 SCSS 变量 ${alias.scssVar}`;
+    }
+  } else if (alias.status === 'approximate') {
+    result.token = alias.token || null;
+    result.scssVar = alias.scss_var || null;
+    result.confidence = 'approximate';
+    if (alias.note) result.note = alias.note;
+  }
+
+  return result;
+}
+
+/**
+ * 获取用于值匹配的候选 token 列表
+ * 根据 CSS 属性确定查找类别
+ */
+function getCandidatesByProperty(propertyName, registry) {
+  const category = CSS_PROPERTY_CATEGORIES[propertyName];
+
+  if (!category) {
+    // 未知属性，在所有 token 中搜索
+    return registry.all;
+  }
+
+  if (category === 'color') {
+    // color 类同时搜索 colors + unmapped_scss_variables
+    return [
+      ...(registry.byCategory.color || []),
+      ...(registry.byCategory.shadow || []), // 阴影也含颜色信息
+    ];
+  }
+
+  if (category === 'spacing') {
+    return [
+      ...(registry.byCategory.spacing || []),
+      ...(registry.byCategory.tag || []), // tag 也有 padding
+    ];
+  }
+
+  if (category === 'typography') {
+    return registry.byCategory.typography || [];
+  }
+
+  if (category === 'radius') {
+    return registry.byCategory.radius || [];
+  }
+
+  if (category === 'sizing') {
+    return [
+      ...(registry.byCategory.sizing || []),
+      ...(registry.byCategory.feedback || []),
+    ];
+  }
+
+  return registry.byCategory[category] || registry.all;
+}
+
+/**
+ * Layer 2: 值精确匹配（带 CSS 属性上下文消歧）
+ * @param {string} value - 原型中的值
+ * @param {string|null} cssProperty - 关联的 CSS 属性名（用于消歧）
+ * @param {object} registry - Token 注册表
+ * @returns {object|null} 匹配结果
+ */
+function matchByValue(value, cssProperty, registry) {
+  if (value == null) return null;
+
+  const candidates = getCandidatesByProperty(cssProperty, registry);
+  if (candidates.length === 0) return null;
+
+  // 颜色匹配
+  if (isHexColor(value)) {
+    const normalizedInput = normalizeColor(value);
+    if (!normalizedInput) return null;
+
+    for (const candidate of candidates) {
+      if (!candidate.value) continue;
+      if (!isHexColor(candidate.value)) continue;
+      const normalizedCandidate = normalizeColor(candidate.value);
+      if (normalizedCandidate === normalizedInput) {
+        return buildValueMatchResult(candidate, value);
+      }
+    }
+    return null;
+  }
+
+  // 数值匹配（含 px 后缀）
+  const normalizedInput = normalizeNumericValue(value);
+  if (normalizedInput === null) {
+    // rem/em — 标记为 pending
+    return {
+      token: null,
+      prototypeValue: value,
+      method: 'value_exact',
+      confidence: 'pending',
+      note: 'rem/em 值无法自动匹配，需手动确认',
+    };
+  }
+
+  for (const candidate of candidates) {
+    if (!candidate.value) continue;
+    const normalizedCandidate = normalizeNumericValue(candidate.value);
+    if (normalizedCandidate === null) continue;
+    if (normalizedCandidate === normalizedInput) {
+      return buildValueMatchResult(candidate, value);
+    }
+  }
+
+  // 无单位数值直接比较（如 lineHeight: 1.5）
+  for (const candidate of candidates) {
+    if (!candidate.value) continue;
+    if (String(candidate.value).trim() === String(value).trim()) {
+      return buildValueMatchResult(candidate, value);
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 构建值匹配结果
+ */
+function buildValueMatchResult(candidate, prototypeValue) {
+  const result = {
+    token: candidate.token || null,
+    scssVar: candidate.scssVar || null,
+    prototypeValue,
+    tokenValue: candidate.value,
+    method: 'value_exact',
+    confidence: candidate.token ? 'confirmed' : 'pending',
+  };
+  if (candidate.role) result.role = candidate.role;
+  if (!candidate.token && candidate.scssVar) {
+    result.note = `匹配到 SCSS 变量 ${candidate.scssVar}，但无对应 CSS Token`;
+  }
+  return result;
+}
+
+/**
+ * Layer 3: 色彩模糊匹配（RGB 欧几里得距离）
+ * @param {string} value - hex 颜色值
+ * @param {object} registry - Token 注册表
+ * @param {number} threshold - 距离阈值，默认 30
+ * @returns {object|null} 最佳近似匹配
+ */
+function matchByColorFuzzy(value, registry, threshold = 30) {
+  const inputRgb = hexToRgb(value);
+  if (!inputRgb) return null;
+
+  // 在所有颜色类 token 中搜索
+  const colorCandidates = [
+    ...(registry.byCategory.color || []),
+  ];
+
+  let bestMatch = null;
+  let bestDistance = Infinity;
+
+  for (const candidate of colorCandidates) {
+    if (!candidate.value) continue;
+    const candidateRgb = hexToRgb(candidate.value);
+    if (!candidateRgb) continue;
+
+    const dist = colorDistance(inputRgb, candidateRgb);
+    if (dist < bestDistance) {
+      bestDistance = dist;
+      bestMatch = candidate;
+    }
+  }
+
+  if (bestMatch && bestDistance < threshold) {
+    return {
+      token: bestMatch.token || null,
+      scssVar: bestMatch.scssVar || null,
+      prototypeValue: value,
+      tokenValue: bestMatch.value,
+      method: 'color_fuzzy',
+      confidence: 'approximate',
+      distance: Math.round(bestDistance * 100) / 100,
+      note: `颜色近似匹配（RGB 距离 ${Math.round(bestDistance * 100) / 100}）`,
+    };
+  }
+
+  return null;
+}
+
+/**
+ * 对单个值执行完整三层匹配
+ * @param {string} value - 要匹配的值
+ * @param {string|null} cssProperty - CSS 属性名（消歧用）
+ * @param {object} registry - Token 注册表
+ * @returns {object} 匹配结果
+ */
+function fullMatchValue(value, cssProperty, registry) {
+  // Layer 2: 值精确匹配
+  const exact = matchByValue(value, cssProperty, registry);
+  if (exact) return exact;
+
+  // Layer 3: 颜色模糊匹配（仅对颜色值）
+  if (isHexColor(value)) {
+    const fuzzy = matchByColorFuzzy(value, registry);
+    if (fuzzy) return fuzzy;
+  }
+
+  // 未匹配
+  return {
+    token: null,
+    scssVar: null,
+    prototypeValue: value,
+    method: 'none',
+    confidence: 'unmatched',
+  };
+}
+
+// ---------------------------------------------------------------------------
+// 主流程
+// ---------------------------------------------------------------------------
+
+function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length < 2) {
+    process.stderr.write('用法: node match-tokens.mjs <parse-result.json> <tokens.yml>\n');
+    process.exit(1);
+  }
+
+  const [parseResultPath, tokensYmlPath] = args;
+
+  // 读取输入文件
+  let parseResult;
+  try {
+    const raw = readFileSync(resolve(parseResultPath), 'utf-8');
+    parseResult = JSON.parse(raw);
+  } catch (err) {
+    process.stderr.write(`无法读取/解析 parse-result JSON: ${err.message}\n`);
+    process.exit(1);
+  }
+
+  let tokensConfig;
+  try {
+    const raw = readFileSync(resolve(tokensYmlPath), 'utf-8');
+    tokensConfig = yaml.load(raw, { schema: yaml.JSON_SCHEMA });
+  } catch (err) {
+    process.stderr.write(`无法读取/解析 tokens.yml: ${err.message}\n`);
+    process.exit(1);
+  }
+
+  // 构建 Token 注册表
+  const registry = buildTokenRegistry(tokensConfig);
+  const aliases = tokensConfig.aliases || null;
+
+  // ---- 匹配原型 Token 别名 ----
+  const matched = {};
+  const unmatched = [];
+
+  const prototypeTokens = parseResult.tokens || {};
+  for (const [key, value] of Object.entries(prototypeTokens)) {
+    // Layer 1: 别名直查
+    const aliasResult = matchByAlias(key, value, aliases);
+    if (aliasResult) {
+      matched[key] = {
+        ...aliasResult,
+        prototypeValue: value,
+        // 如果 alias 没有覆盖 tokenValue，从 token 注册表中查找
+        tokenValue: aliasResult.tokenValue || null,
+      };
+      // 补充 tokenValue
+      if (aliasResult.token && !matched[key].tokenValue) {
+        const found = registry.all.find(t => t.token === aliasResult.token);
+        if (found) matched[key].tokenValue = found.value;
+      }
+      continue;
+    }
+
+    // 无别名，尝试值匹配（需要推断 CSS 属性上下文）
+    const inferredProperty = inferPropertyFromTokenKey(key);
+    const valueResult = fullMatchValue(value, inferredProperty, registry);
+    if (valueResult.confidence !== 'unmatched') {
+      matched[key] = valueResult;
+    } else {
+      unmatched.push(key);
+    }
+  }
+
+  // ---- 匹配内联样式值 ----
+  const inlineTokenMap = {};
+  const inlineStyles = parseResult.inlineStyles || {};
+
+  for (const [cssProperty, values] of Object.entries(inlineStyles)) {
+    for (const rawValue of values) {
+      const mapKey = `${cssProperty}:${rawValue}`;
+      const result = fullMatchValue(rawValue, cssProperty, registry);
+      if (result.confidence !== 'unmatched') {
+        inlineTokenMap[mapKey] = {
+          token: result.token,
+          scssVar: result.scssVar || undefined,
+          tokenValue: result.tokenValue || undefined,
+          confidence: result.confidence,
+          method: result.method,
+        };
+        if (result.note) inlineTokenMap[mapKey].note = result.note;
+        if (result.distance != null) inlineTokenMap[mapKey].distance = result.distance;
+      }
+    }
+  }
+
+  // ---- 汇总统计 ----
+  let confirmed = 0;
+  let pending = 0;
+  let approximate = 0;
+
+  for (const entry of Object.values(matched)) {
+    if (entry.confidence === 'confirmed') confirmed++;
+    else if (entry.confidence === 'pending') pending++;
+    else if (entry.confidence === 'approximate') approximate++;
+  }
+
+  for (const entry of Object.values(inlineTokenMap)) {
+    if (entry.confidence === 'confirmed') confirmed++;
+    else if (entry.confidence === 'pending') pending++;
+    else if (entry.confidence === 'approximate') approximate++;
+  }
+
+  const totalAlias = Object.keys(prototypeTokens).length;
+  const totalInline = Object.values(inlineStyles).reduce((sum, arr) => sum + arr.length, 0);
+
+  // 检测 variant
+  const variantEntries = Object.values(matched).filter(e => e.variant);
+  const variant = variantEntries.length > 0 ? variantEntries[0].variant : null;
+
+  // ---- 输出 ----
+  const output = {
+    source: parseResult.source || null,
+    variant,
+    matched,
+    unmatched,
+    inlineTokenMap,
+    summary: {
+      total: totalAlias + totalInline,
+      aliasTokens: totalAlias,
+      inlineValues: totalInline,
+      confirmed,
+      pending,
+      approximate,
+      unmatched: unmatched.length,
+    },
+  };
+
+  process.stdout.write(JSON.stringify(output, null, 2) + '\n');
+}
+
+/**
+ * 从 Token 别名 key 推断 CSS 属性（用于无别名时的消歧）
+ */
+function inferPropertyFromTokenKey(key) {
+  const lower = key.toLowerCase();
+
+  if (lower.includes('pri') || lower.includes('color') || lower.includes('bg') ||
+      lower.includes('tx') || lower.includes('bd') || lower.includes('card') ||
+      lower.includes('surface') || lower.includes('acc') || lower.includes('dan') ||
+      lower.includes('wrn') || lower.includes('wechat')) {
+    return 'color';
+  }
+  if (lower.includes('font') || lower.includes('text') && !lower.includes('color')) {
+    return 'fontSize';
+  }
+  if (lower.includes('r') && (lower.includes('sm') || lower.includes('xs') || lower.length <= 3)) {
+    return 'borderRadius';
+  }
+  if (lower.includes('gap') || lower.includes('pad') || lower.includes('margin')) {
+    return 'padding';
+  }
+
+  return null; // 未知，不限制类别
+}
+
+// 启动
+main();
--- a/.claude/skills/design-handoff/scripts/parse-prototype.mjs
+++ b/.claude/skills/design-handoff/scripts/parse-prototype.mjs
@@ -0,0 +1,384 @@
+#!/usr/bin/env node
+/**
+ * parse-prototype.mjs — 解析 huashu-design 产出的 HTML 原型文件
+ *
+ * 提取设计 Token (T 对象)、内联样式硬编码值、屏幕信息和组件定义。
+ * 输出 JSON 到 stdout。
+ *
+ * 用法: node parse-prototype.mjs <html-file-path>
+ */
+
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+// ─── 工具函数 ────────────────────────────────────────────────
+
+/**
+ * 输出错误 JSON 到 stderr 并以 code 1 退出
+ */
+function fail(message) {
+  process.stderr.write(JSON.stringify({ valid: false, error: message }, null, 2) + '\n');
+  process.exit(1);
+}
+
+/**
+ * 括号深度计数法：从 source[startPos] 开始（startPos 应指向 '{'），
+ * 提取完整的平衡花括号内容。
+ *
+ * 正确处理：
+ * - 单引号/双引号内的花括号不计数
+ * - 模板字符串（`）内的花括号不计数
+ * - 转义字符（\" \' \\ \x \u）跳过
+ *
+ * 返回包含外层花括号的完整字符串，或在无法平衡时返回 null。
+ */
+function extractBalancedBraces(source, startPos) {
+  if (source[startPos] !== '{') return null;
+
+  let depth = 0;
+  let i = startPos;
+  const len = source.length;
+
+  while (i < len) {
+    const ch = source[i];
+
+    if (ch === "'" || ch === '"') {
+      // 字符串字面量：跳到配对的结束引号
+      const quote = ch;
+      i++;
+      while (i < len) {
+        if (source[i] === '\\') {
+          i += 2; // 跳过转义字符
+          continue;
+        }
+        if (source[i] === quote) {
+          i++;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+
+    if (ch === '`') {
+      // 模板字符串：处理 ${...} 内的嵌套，以及转义
+      i++;
+      while (i < len) {
+        if (source[i] === '\\') {
+          i += 2;
+          continue;
+        }
+        if (source[i] === '`') {
+          i++;
+          break;
+        }
+        if (source[i] === '$' && i + 1 < len && source[i + 1] === '{') {
+          // 模板表达式 ${...}，需要单独平衡
+          i += 2; // 跳过 ${
+          let tmplDepth = 1;
+          while (i < len && tmplDepth > 0) {
+            const tc = source[i];
+            if (tc === '{') tmplDepth++;
+            else if (tc === '}') tmplDepth--;
+            // 简化：模板表达式内也可以有字符串，但这里不递归处理
+            // 因为 T 对象的值不太可能有如此复杂的嵌套
+            if (tc === "'" || tc === '"') {
+              const tq = tc;
+              i++;
+              while (i < len) {
+                if (source[i] === '\\') { i += 2; continue; }
+                if (source[i] === tq) { i++; break; }
+                i++;
+              }
+              continue;
+            }
+            if (tc === '`') {
+              // 嵌套模板字符串
+              i++;
+              let nestedTmplDepth = 0;
+              while (i < len) {
+                if (source[i] === '\\') { i += 2; continue; }
+                if (source[i] === '`') { i++; break; }
+                if (source[i] === '$' && i + 1 < len && source[i + 1] === '{') {
+                  // 这里简化处理，不递归
+                  i += 2;
+                  nestedTmplDepth++;
+                  continue;
+                }
+                if (source[i] === '{') nestedTmplDepth++;
+                if (source[i] === '}') {
+                  if (nestedTmplDepth > 0) nestedTmplDepth--;
+                  else { i++; break; }
+                }
+                i++;
+              }
+              continue;
+            }
+            i++;
+          }
+          continue;
+        }
+        i++;
+      }
+      continue;
+    }
+
+    if (ch === '/' && i + 1 < len) {
+      // 注释处理
+      if (source[i + 1] === '/') {
+        // 单行注释
+        while (i < len && source[i] !== '\n') i++;
+        continue;
+      }
+      if (source[i + 1] === '*') {
+        // 多行注释
+        i += 2;
+        while (i + 1 < len && !(source[i] === '*' && source[i + 1] === '/')) i++;
+        i += 2;
+        continue;
+      }
+    }
+
+    if (ch === '{') depth++;
+    else if (ch === '}') {
+      depth--;
+      if (depth === 0) {
+        return source.slice(startPos, i + 1);
+      }
+    }
+
+    i++;
+  }
+
+  return null; // 未平衡
+}
+
+// ─── Step 0: 格式校验 ────────────────────────────────────────
+
+function validateSource(source) {
+  const hasReact = source.includes('react@') || source.includes('react.production');
+  const hasBabel = source.includes('@babel/standalone') || source.includes('babel.min');
+  const hasToken = /const\s+T\s*=\s*\{/.test(source);
+
+  if (!hasReact) return '文件不包含 React 引用';
+  if (!hasBabel) return '文件不包含 Babel 引用';
+  if (!hasToken) return '文件不包含 T 对象定义 (const T = {)';
+  return null;
+}
+
+// ─── Step 1: 提取 T 对象 ─────────────────────────────────────
+
+function extractTokens(source) {
+  // 匹配 const T = { / const T ={ / const T={ 等各种空格变体
+  const markerPattern = /const\s+T\s*=\s*\{/;
+  const markerMatch = markerPattern.exec(source);
+  if (!markerMatch) return {};
+
+  const braceStart = markerMatch.index + markerMatch[0].length - 1; // 指向 '{'
+  const rawObject = extractBalancedBraces(source, braceStart);
+
+  if (!rawObject) return {};
+
+  // 将 JS 对象字面量转为可求值字符串，用 Function 构造器执行
+  try {
+    const fn = new Function('return (' + rawObject + ')');
+    const tObj = fn();
+
+    // 展平为 "T.key": "value" 格式
+    const flat = {};
+    for (const [key, value] of Object.entries(tObj)) {
+      flat[`T.${key}`] = String(value);
+    }
+    return flat;
+  } catch {
+    // 如果 Function 执行失败，尝试用正则提取简单键值对作为降级方案
+    const fallback = {};
+    const kvPattern = /(\w+)\s*:\s*'([^']*)'/g;
+    const kvPattern2 = /(\w+)\s*:\s*"([^"]*)"/g;
+    const kvPatternNum = /(\w+)\s*:\s*(\d+(?:\.\d+)?)/g;
+
+    let match;
+    const innerContent = rawObject.slice(1, -1);
+    while ((match = kvPattern.exec(innerContent)) !== null) {
+      fallback[`T.${match[1]}`] = match[2];
+    }
+    while ((match = kvPattern2.exec(innerContent)) !== null) {
+      fallback[`T.${match[1]}`] = match[2];
+    }
+    while ((match = kvPatternNum.exec(innerContent)) !== null) {
+      fallback[`T.${match[1]}`] = match[2];
+    }
+    return fallback;
+  }
+}
+
+// ─── Step 2: 提取内联样式硬编码值 ─────────────────────────────
+
+const STYLE_PROPERTIES = ['fontSize', 'padding', 'borderRadius', 'gap', 'margin', 'fontWeight', 'lineHeight', 'width', 'height', 'letterSpacing'];
+
+function extractInlineStyles(source) {
+  const result = {};
+
+  for (const prop of STYLE_PROPERTIES) {
+    const values = new Set();
+
+    // 匹配 camelCase 属性: fontSize: 16, fontSize: '16px', fontSize: "16px"
+    // 也匹配 object shorthand: { fontSize: 16 }
+    const pattern = new RegExp(
+      prop + '\\s*:\\s*([\'"`]?)([\\w\\s%.,()-]+?)\\1\\s*[,}]',
+      'g'
+    );
+
+    let match;
+    while ((match = pattern.exec(source)) !== null) {
+      let val = match[2].trim();
+      // 过滤掉变量引用（如 T.pri, T.r 等）
+      if (val.startsWith('T.') || val.startsWith('${')) continue;
+      // 过滤模板字符串插值
+      if (val.includes('${')) continue;
+      // 过滤掉 CSS 变量引用
+      if (val.startsWith('var(')) continue;
+      values.add(val);
+    }
+
+    if (values.size > 0) {
+      // 去重并排序：数值优先（降序），字符串按字母序
+      const sorted = [...values].sort((a, b) => {
+        const numA = parseFloat(a);
+        const numB = parseFloat(b);
+        if (!isNaN(numA) && !isNaN(numB)) return numB - numA;
+        if (!isNaN(numA)) return -1;
+        if (!isNaN(numB)) return 1;
+        return a.localeCompare(b);
+      });
+      result[prop] = sorted;
+    }
+  }
+
+  return result;
+}
+
+// ─── Step 3: 提取 screen 信息 ────────────────────────────────
+
+function extractScreens(source) {
+  const screens = [];
+
+  // 策略 A: 找静态 screen-label 文本（外部 span/div 标签）
+  const labelPattern = /<(?:span|div)\s+(?:className|class)="screen-label"[^>]*>([^<]*)<\/(?:span|div)>/g;
+  const labels = [];
+  let labelMatch;
+  while ((labelMatch = labelPattern.exec(source)) !== null) {
+    labels.push(labelMatch[1].trim());
+  }
+
+  // 策略 B: 找 IosFrame 的 label prop（JSX 属性模式）
+  // 匹配: <IosFrame ... label="文本" ...>
+  const iosFrameLabelPattern = /<IosFrame[^>]*\blabel=["']([^"']+)["'][^>]*>/g;
+  const iosLabels = [];
+  let iosLabelMatch;
+  while ((iosLabelMatch = iosFrameLabelPattern.exec(source)) !== null) {
+    iosLabels.push(iosLabelMatch[1].trim());
+  }
+
+  // 提取 IosFrame children 组件
+  const iosFramePattern = /<IosFrame[^>]*>\s*(?:<React\.Fragment[^>]*>)?\s*<(\w+)\s*\/?>/g;
+  const components = [];
+  let compMatch;
+  while ((compMatch = iosFramePattern.exec(source)) !== null) {
+    const name = compMatch[1];
+    if (name !== 'div' && name !== 'span' && name[0] === name[0].toUpperCase()) {
+      components.push(name);
+    }
+  }
+
+  // 选择 label 来源：优先静态标签，如果数量不匹配则尝试 JSX prop
+  const useIosLabels = labels.length === 0 || (iosLabels.length > 0 && iosLabels.length === components.length && labels.length !== components.length);
+  const selectedLabels = useIosLabels ? iosLabels : labels;
+
+  // 配对
+  const count = Math.max(selectedLabels.length, components.length);
+  for (let i = 0; i < count; i++) {
+    screens.push({
+      label: selectedLabels[i] || '',
+      component: components[i] || '',
+    });
+  }
+
+  return screens;
+}
+
+// ─── Step 4: 识别组件函数 ─────────────────────────────────────
+
+function extractComponents(source) {
+  const components = new Set();
+
+  // 匹配 function 声明: function XxxPage() / function Xxx()
+  const funcPattern = /function\s+([A-Z]\w*)\s*\(/g;
+  let match;
+  while ((match = funcPattern.exec(source)) !== null) {
+    components.add(match[1]);
+  }
+
+  // 匹配 const Xxx = () => / const Xxx = () =>
+  const arrowPattern = /const\s+([A-Z]\w*)\s*=\s*(?:\([^)]*\)|[^=])\s*=>/g;
+  while ((match = arrowPattern.exec(source)) !== null) {
+    components.add(match[1]);
+  }
+
+  return [...components].sort((a, b) => {
+    // IosFrame 排到最前面（基础设施组件）
+    if (a === 'IosFrame') return -1;
+    if (b === 'IosFrame') return 1;
+    return a.localeCompare(b);
+  });
+}
+
+// ─── 主流程 ──────────────────────────────────────────────────
+
+function main() {
+  const args = process.argv.slice(2);
+  if (args.length < 1) {
+    fail('用法: node parse-prototype.mjs <html-file-path>');
+  }
+
+  const filePath = resolve(args[0]);
+
+  let source;
+  try {
+    source = readFileSync(filePath, 'utf-8');
+  } catch (err) {
+    fail(`无法读取文件: ${filePath} — ${err.message}`);
+  }
+
+  // Step 0: 格式校验
+  const validationError = validateSource(source);
+  if (validationError) {
+    fail(`格式校验失败: ${validationError}`);
+  }
+
+  // Step 1: 提取 T 对象
+  const tokens = extractTokens(source);
+
+  // Step 2: 提取内联样式
+  const inlineStyles = extractInlineStyles(source);
+
+  // Step 3: 提取 screen 信息
+  const screens = extractScreens(source);
+
+  // Step 4: 识别组件函数
+  const components = extractComponents(source);
+
+  // 组装输出
+  const result = {
+    valid: true,
+    filePath: filePath.replace(/\\/g, '/'),
+    tokens,
+    inlineStyles,
+    screens,
+    components,
+  };
+
+  process.stdout.write(JSON.stringify(result, null, 2) + '\n');
+}
+
+main();
--- a/.claude/skills/design-handoff/templates/spec-template.md
+++ b/.claude/skills/design-handoff/templates/spec-template.md
@@ -0,0 +1,73 @@
+# {{pageTitle}} 设计规格
+
+> 来源: {{sourceFile}} | 平台: {{platform}} | 页面数: {{screenCount}} | 生成: {{date}}
+
+## 页面索引
+
+| 页面 | 截图 | 路由 |
+|------|------|------|
+{{#each screens}}
+| {{label}} | ![{{file}}](./screenshots/{{file}}) | {{route}} |
+{{/each}}
+
+## 一、Token 映射
+
+| 原型值 | 项目 Token | 状态 |
+|--------|-----------|------|
+{{#each tokenMap}}
+| {{prototypeValue}} ({{key}}) | {{tokenRef}} | {{statusIcon}} |
+{{/each}}
+
+> 状态标记: ✅ confirmed 直接使用 | ⚠️ pending 需人工复核 | ❌ unmatched 需硬编码或新建 Token
+
+## 二、页面结构
+
+{{#each screens}}
+### {{ordinal}}. {{label}}
+
+![{{label}}](./screenshots/{{file}})
+
+布局层级（从上到下）：
+
+{{layoutDescription}}
+
+{{/each}}
+
+## 三、组件映射
+
+| 原型元素 | 推荐组件 | 来源 | 备注 |
+|----------|---------|------|------|
+{{#each componentMap}}
+| {{prototypeElement}} | {{component}} | {{source}} | {{notes}} |
+{{/each}}
+
+{{#each newComponents}}
+> ⚠️ **需新建**: {{name}} — {{reason}}
+{{/each}}
+
+## 四、交互规格
+
+| 元素 | 交互 | 触发 | 反馈 | 备注 |
+|------|------|------|------|------|
+{{#each interactions}}
+| {{element}} | {{type}} | {{trigger}} | {{feedback}} | {{notes}} |
+{{/each}}
+
+## 五、状态变体
+
+{{#each stateVariants}}
+- **{{name}}**: {{description}}
+{{/each}}
+
+## 六、样式清单
+
+{{styleSummary}}
+
+---
+
+> 此规格由 design-handoff skill 自动生成。LLM 实施时请：
+> 1. 先阅读截图建立视觉印象
+> 2. 按 Token 映射表使用项目 Token（✅ 标记的直接用）
+> 3. 优先使用"组件映射"中列出的已有组件
+> 4. 参考"交互规格"实现对应的交互逻辑
+> 5. "需新建"的组件参考截图和布局描述从头实现
--- a/.design/tokens.yml
+++ b/.design/tokens.yml
@@ -0,0 +1,423 @@
+version: 1
+updated: "2026-05-17"
+
+# ============================================================================
+# Design Token 注册表
+# 数据源: apps/miniprogram/src/styles/tokens.scss + variables.scss
+# ============================================================================
+
+colors:
+  # --- 主色系（赤土橙） ---
+  - token: --tk-pri
+    value: "#C4623A"
+    scss_var: "$pri"
+    role: 主色/赤土橙 accent
+
+  - token: --tk-pri-l
+    value: "#F0DDD4"
+    scss_var: "$pri-l"
+    role: 主色浅/赤土浅
+
+  - token: --tk-pri-d
+    value: "#8B3E1F"
+    scss_var: "$pri-d"
+    role: 主色深/赤土深
+
+  # --- 阴影色（含透明度） ---
+  - token: --tk-shadow-btn
+    value: "0 4px 16px rgba(196, 98, 58, 0.3)"
+    scss_var: "$shadow-btn"
+    role: 主按钮阴影
+
+  - token: --tk-shadow-tab
+    value: "0 2px 8px rgba(196, 98, 58, 0.25)"
+    scss_var: "$shadow-tab"
+    role: 选中Tab阴影
+
+  # --- 文字色 ---
+  - token: --tk-text-secondary
+    value: "#78716C"
+    scss_var: "$tx3"
+    role: 淡文字/辅助文字
+
+  # --- 卡片背景 ---
+  - token: --tk-card-bg
+    value: "#FFFFFF"
+    scss_var: "$card"
+    role: 卡片白底
+
+  # --- 医生端覆盖色（.doctor-mode 下自动替换 --tk-pri*） ---
+  - token: --tk-pri.doctor
+    value: "#3A6B8C"
+    scss_var: "$doc-pri"
+    role: 医生端主色/靛蓝
+    note: 仅在 .doctor-mode 下覆盖 --tk-pri
+
+  - token: --tk-pri-l.doctor
+    value: "#D4E5F0"
+    scss_var: "$doc-pri-l"
+    role: 医生端浅色
+
+  - token: --tk-pri-d.doctor
+    value: "#2A4F6A"
+    scss_var: "$doc-pri-d"
+    role: 医生端深色
+
+# --- 未映射到 Token 的 SCSS 变量（原型中有但 tokens.scss 未声明为 CSS 变量） ---
+unmapped_scss_variables:
+  - scss_var: "$bg"
+    value: "#F5F0EB"
+    role: 页面主背景/温润米底
+    note: "原型 T.bg 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$tx"
+    value: "#2D2A26"
+    role: 主文字色/暖黑
+    note: "原型 T.tx 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$tx2"
+    value: "#5A554F"
+    role: 次文字色/暖灰
+    note: "原型 T.tx2 近似映射，elder-mode 下 --tk-text-secondary 覆盖为此值"
+
+  - scss_var: "$bd"
+    value: "#E8E2DC"
+    role: 边框色
+    note: "原型 T.bd 映射目标，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$bd-l"
+    value: "#F0EBE5"
+    role: 浅边框色
+
+  - scss_var: "$acc"
+    value: "#5B7A5E"
+    role: 鼠尾草绿/成功色
+    note: "原型中成功色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$acc-l"
+    value: "#E8F0E8"
+    role: 成功浅色
+
+  - scss_var: "$dan"
+    value: "#B54A4A"
+    role: 危险色/柔红
+    note: "原型中危险色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$dan-l"
+    value: "#FDEAEA"
+    role: 危险浅色
+
+  - scss_var: "$wrn"
+    value: "#C4873A"
+    role: 警告色/暖琥珀
+    note: "原型中警告色，tokens.scss 未声明为 CSS 变量"
+
+  - scss_var: "$wrn-l"
+    value: "#FFF3E0"
+    role: 警告浅色
+
+  - scss_var: "$surface-alt"
+    value: "#EDE8E2"
+    role: 辅助底色
+
+  - scss_var: "$wechat"
+    value: "#07C160"
+    role: 微信绿
+
+typography:
+  - token: --tk-font-display
+    value: "72px"
+    note: 大屏展示
+    elder: "80px"
+
+  - token: --tk-font-hero
+    value: "48px"
+    note: 启动页标题
+    elder: "56px"
+
+  - token: --tk-font-h1
+    value: "28px"
+    note: 页面标题 serif bold
+    elder: "32px"
+
+  - token: --tk-font-h2
+    value: "22px"
+    note: 副标题、用户名 serif bold
+    elder: "25px"
+
+  - token: --tk-font-body-lg
+    value: "18px"
+    note: 按钮文字、section 标题 fontWeight:600
+    elder: "22px"
+
+  - token: --tk-font-body
+    value: "16px"
+    note: 正文、输入框、icon 文字（最常用 UI 字号）
+    elder: "22px"
+
+  - token: --tk-font-body-sm
+    value: "14px"
+    note: 副文本、描述
+    elder: "19px"
+
+  - token: --tk-font-num
+    value: "30px"
+    note: 数值 serif bold
+    elder: "34px"
+
+  - token: --tk-font-num-lg
+    value: "34px"
+    note: 大数值
+    elder: "40px"
+
+  - token: --tk-font-cap
+    value: "13px"
+    note: 说明文字（第一高频字号）
+    elder: "18px"
+
+  - token: --tk-font-nav
+    value: "18px"
+    note: 导航栏标题 serif bold
+    elder: "22px"
+
+  - token: --tk-font-micro
+    value: "11px"
+    note: 角标、tag
+    elder: "17px"
+
+structure:
+  - token: --tk-line-height
+    value: "1.5"
+    elder: "1.7"
+
+spacing:
+  - token: --tk-gap-2xs
+    value: "4px"
+    scss_var: "$sp-2xs"
+    elder: "6px"
+
+  - token: --tk-gap-xs
+    value: "8px"
+    scss_var: "$sp-xs"
+    elder: "12px"
+
+  - token: --tk-gap-sm
+    value: "12px"
+    scss_var: "$sp-sm"
+    elder: "16px"
+
+  - token: --tk-gap-md
+    value: "16px"
+    scss_var: "$sp-md"
+    elder: "20px"
+
+  - token: --tk-section-gap
+    value: "20px"
+    scss_var: "$sp-section"
+    elder: "28px"
+
+  - token: --tk-gap-lg
+    value: "24px"
+    scss_var: "$sp-lg"
+    elder: "32px"
+
+  - token: --tk-gap-xl
+    value: "32px"
+    scss_var: "$sp-xl"
+    elder: "40px"
+
+  - token: --tk-gap-2xl
+    value: "48px"
+    scss_var: "$sp-2xl"
+    elder: "56px"
+
+  - token: --tk-page-padding
+    value: "20px"
+    elder: "28px"
+
+  - token: --tk-card-padding
+    value: "20px"
+    elder: "28px"
+
+  - token: --tk-card-padding-sm
+    value: "16px"
+    elder: "20px"
+
+  - token: --tk-card-padding-lg
+    value: "28px"
+    elder: "36px"
+
+radius:
+  - token: --tk-card-radius
+    value: "16px"
+    scss_var: "$r"
+    elder: "20px"
+
+radius_unmapped:
+  - scss_var: "$r-sm"
+    value: "12px"
+    note: "原型 T.rSm 映射目标"
+  - scss_var: "$r-xs"
+    value: "8px"
+    note: "原型 T.rXs 映射目标"
+  - scss_var: "$r-lg"
+    value: "20px"
+  - scss_var: "$r-pill"
+    value: "999px"
+
+sizing:
+  - token: --tk-touch-min
+    value: "48px"
+    role: 最小触控区
+    elder: "56px"
+
+  - token: --tk-btn-primary-h
+    value: "52px"
+    role: 主按钮高度
+    elder: "60px"
+
+  - token: --tk-input-height
+    value: "56px"
+    role: 输入框高度
+    elder: "64px"
+
+  - token: --tk-tabbar-space
+    value: "100px"
+    role: TabBar 底部安全区
+    elder: "120px"
+
+feedback:
+  - token: --tk-touch-feedback-opacity
+    value: "0.85"
+    role: 触控反馈透明度
+    elder: "0.8"
+
+tag:
+  - token: --tk-tag-font-size
+    value: "11px"
+    elder: "13px"
+
+  - token: --tk-tag-padding-v
+    value: "3px"
+    elder: "5px"
+
+  - token: --tk-tag-padding-h
+    value: "8px"
+    elder: "12px"
+
+shadow_unmapped:
+  # tokens.scss 中的 --tk-shadow-btn/tab 是复合值（含偏移+模糊+颜色）
+  # 以下为 variables.scss 中的其他阴影，未声明为 CSS Token
+  - scss_var: "$shadow-sm"
+    value: "0 1px 4px rgba(45, 42, 38, 0.06)"
+    role: 小阴影
+
+  - scss_var: "$shadow-md"
+    value: "0 2px 12px rgba(45, 42, 38, 0.10)"
+    role: 中阴影
+
+  - scss_var: "$shadow-lg"
+    value: "0 8px 32px rgba(45, 42, 38, 0.15)"
+    role: 大阴影
+
+# ============================================================================
+# 原型 Key → Token 映射（aliases）
+# 用于设计移交时自动匹配原型属性到实际 Token
+# ============================================================================
+aliases:
+  prototype_keys:
+    T.pri:
+      - value: "#C4623A"
+        token: --tk-pri
+        status: exact_match
+        variant: patient
+      - value: "#3A6B8C"
+        token: --tk-pri.doctor
+        status: exact_match
+        variant: doctor
+
+    T.priL:
+      - value: "#F0DDD4"
+        token: --tk-pri-l
+        status: exact_match
+        variant: patient
+      - value: "#D4E5F0"
+        token: --tk-pri-l.doctor
+        status: exact_match
+        variant: doctor
+
+    T.priD:
+      - value: "#8B3E1F"
+        token: --tk-pri-d
+        status: exact_match
+        variant: patient
+      - value: "#2A4F6A"
+        token: --tk-pri-d.doctor
+        status: exact_match
+        variant: doctor
+
+    T.bg:
+      token: null
+      nearest: --tk-card-bg
+      scss_var: "$bg"
+      value: "#F5F0EB"
+      status: unmatched
+      note: "原型页面背景色，tokens.scss 未声明为 CSS 变量，直接用 $bg SCSS 变量"
+
+    T.card:
+      token: --tk-card-bg
+      status: exact_match
+
+    T.surface:
+      token: --tk-card-bg
+      status: approximate
+      note: "原型中 surface ≈ 卡片白底"
+
+    T.tx:
+      token: null
+      nearest: --tk-text-secondary
+      scss_var: "$tx"
+      value: "#2D2A26"
+      status: unmatched
+      note: "主文字色，tokens.scss 未声明为 CSS 变量，直接用 $tx SCSS 变量"
+
+    T.tx2:
+      token: null
+      nearest: --tk-text-secondary
+      scss_var: "$tx2"
+      value: "#5A554F"
+      status: unmatched
+      note: "次文字色，tokens.scss 未声明，elder-mode 下 --tk-text-secondary 覆盖为此值"
+
+    T.tx3:
+      token: --tk-text-secondary
+      scss_var: "$tx3"
+      value: "#78716C"
+      status: exact_match
+
+    T.bd:
+      token: null
+      scss_var: "$bd"
+      value: "#E8E2DC"
+      status: unmatched
+      note: "边框色（不是圆角），tokens.scss 未声明为 CSS 变量"
+
+    T.r:
+      token: --tk-card-radius
+      scss_var: "$r"
+      value: "16px"
+      status: exact_match
+
+    T.rSm:
+      token: null
+      scss_var: "$r-sm"
+      value: "12px"
+      status: unmatched
+      note: "tokens.scss 未声明，需添加 --tk-radius-sm 或直接用 $r-sm SCSS 变量"
+
+    T.rXs:
+      token: null
+      scss_var: "$r-xs"
+      value: "8px"
+      status: unmatched
+      note: "tokens.scss 未声明，需添加 --tk-radius-xs 或直接用 $r-xs SCSS 变量"
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -67,3 +67,19 @@ jobs:
        with:
          node-version: "20"
      - run: cd apps/web && corepack enable && pnpm install --frozen-lockfile && pnpm audit
+
+  miniprogram-test:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: apps/miniprogram
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - run: corepack enable && pnpm install --frozen-lockfile
+      - name: TypeScript check
+        run: npx tsc --noEmit
+      - name: Run tests
+        run: npx vitest run
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -17,7 +17,7 @@ jobs:
        image: postgres:16
        env:
          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: 123123
+          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: postgres
        ports:
          - 5432:5432
@@ -28,9 +28,9 @@ jobs:
          --health-retries 5

    env:
-      TEST_DB_URL: postgres://postgres:123123@localhost:5432/postgres
+      TEST_DB_URL: postgres://postgres:postgres@localhost:5432/postgres
      JWT_SECRET: test-jwt-secret-for-ci
-      DATABASE_URL: postgres://postgres:123123@localhost:5432/erp_ci
+      DATABASE_URL: postgres://postgres:postgres@localhost:5432/erp_ci

    steps:
      - uses: actions/checkout@v4
@@ -49,6 +49,9 @@ jobs:
      - name: Clippy
        run: cargo clippy --workspace -- -D warnings

+      - name: Security audit (Rust)
+        run: cargo audit
+
  frontend-test:
    runs-on: ubuntu-latest
    defaults:
@@ -76,3 +79,31 @@ jobs:

      - name: Build
        run: pnpm build
+
+      - name: Security audit (npm)
+        run: npx npm-audit --audit-level=high
+
+  miniprogram-test:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: apps/miniprogram
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+          cache-dependency-path: apps/miniprogram/pnpm-lock.yaml
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: TypeScript check
+        run: npx tsc --noEmit
+
+      - name: Run tests
+        run: npx vitest run
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,16 @@ docker/redis_data/

 # Test artifacts
 .test_token
+test-results/
+
+# Build outputs
+apps/miniprogram/dist-h5/
+
+# Runtime uploads
+uploads/
+
+# Temp logs
+_server_out.txt
 *.heapsnapshot
 perf-trace-*.json
 docs/debug-*.png
@@ -72,4 +82,28 @@ tmp/
 screenshots/
 server-log.txt
 snapshot_*.txt
-uploads/
+_*.txt
+_server_*.txt
+tmp_*.txt
+direct_*.txt
+server_*.txt
+server_combined.txt
+out.txt
+_wx_login.json
+.claude/settings.json
+
+# Trace/debug JSON
+trace-*.json
+
+# Graphify knowledge graph (regenerated locally)
+graphify-out/
+
+# Native miniprogram (separate project)
+apps/mp-native/
+
+# Misc untracked
+err.txt
+uploads/g:/hms/.superpowers/
+.claude/skills/design-handoff/node_modules/
+.design/config.yml
+.superpowers/
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -177,8 +177,13 @@

 - [ ] 新增端点有权限声明（默认拒绝，不是默认放行）
 - [ ] 敏感数据有脱敏/加密处理（PII 字段走 AES-256-GCM）
- [ ] 用户输入已验证和消毒（防 SQL 注入、XSS）
- [ ] 无 CORS 通配符、无硬编码密钥
+- [ ] 用户输入已验证和消毒（防 SQL 注入、XSS、命令注入、路径穿越）
+- [ ] 无 CORS 通配符、无硬编码密钥、无 fallback 默认密钥
+- [ ] 日志中无敏感数据输出（密码、token、身份证号、手机号等）
+- [ ] 文件上传有 MIME 类型验证 + 大小限制 + 路径穿越防护
+- [ ] API 响应不暴露内部实现细节（数据库错误、堆栈跟踪、文件路径）
+- [ ] 速率限制已配置（认证端点更严格）
+- [ ] 密钥通过环境变量注入，`.env.example` 已同步更新

 #### 文档一致性

@@ -224,7 +229,7 @@

 #### 新增 API 端点安全检查（强制）

-> 历史数据：25 次安全 fix 中 80% 源于默认放行模式。
+> 默认拒绝是安全基线 — 绝大多数安全修复源于默认放行模式。
 > 新增端点时**必须**逐项确认：

 - [ ] 端点已添加 `require_permission` 权限守卫（非公开端点）
@@ -237,7 +242,7 @@

 #### 前后端接口同步检查（强制）

-> 历史数据：35 次 fix 源于前后端接口不一致。
+> 前后端接口不一致是高频 bug 来源 — 任何 DTO 变更必须双向同步。
 > 后端 DTO 变更时**必须**同步检查前端：

 - [ ] DTO 字段名变更 → 前端 TypeScript 接口同步更新
@@ -247,6 +252,21 @@
 - [ ] 枚举值变更 → 前端类型定义和 UI 映射同步更新
 - [ ] 后端新增端点 → 前端 API 模块同步添加调用函数，不允许留空

+#### DTO 输入校验检查（强制）
+
+> DTO 输入校验是安全防线 — 缺失校验等于暴露攻击面，Update 和 Create 必须对称。
+> 新增/修改 DTO 时**必须**逐项确认：
+
+- [ ] 所有请求结构体已 `derive(Validate)`（包括 Update\*Req、查询参数）
+- [ ] Update\*Req 与 Create\*Req 校验对称（不允许 Update 降级）
+- [ ] 字符串字段有 `#[validate(length(min, max))]`
+- [ ] 枚举/类型字段有 `#[validate(custom)]` 限制合法值
+- [ ] 集合字段有 `#[validate(length(min = 1))]` 非空检查
+- [ ] 数值范围字段有 `#[validate(range(min, max))]`
+- [ ] URL 字段有 SSRF 防护（禁止 localhost/内网地址，仅 http/https）
+- [ ] 密码字段有 `max = 128` 防止 DoS
+- [ ] handler 层已调用 `req.validate().map_err(|e| AppError::Validation(e.to_string()))?`
+
 ### 3.4 事件总线

 - 模块间通信**只能**通过 `EventBus`
@@ -276,6 +296,50 @@
 // 国际化文案使用 i18n key，不硬编码中文
 ```

+### 3.7 安全规范
+
+#### 密钥与凭据管理
+
+- 所有密钥、token、密码**必须**通过环境变量或密钥管理服务注入，**禁止**硬编码在源码中
+- 开发环境密钥**必须**与生产环境严格隔离（`cfg(debug_assertions)` 编译期防护）
+- 生产密钥**禁止**有 fallback 默认值，缺失时启动 panic
+- 新增密钥时必须同步更新 `.env.example` 和 `wiki/infrastructure.md`
+
+#### 依赖安全
+
+- 新增依赖前**必须**检查已知漏洞（`cargo audit` / `npm audit`）
+- 禁止引入有未修补高危漏洞的依赖版本
+- 定期更新依赖到最新安全补丁版本
+
+#### 数据安全
+
+- PII 数据（姓名、身份证号、手机号、地址等）**必须**加密存储（AES-256-GCM）
+- 日志中**禁止**输出 PII 数据和认证凭据（密码、token、session key）
+- 敏感操作（登录、权限变更、数据导出、批量删除）**必须**记录审计日志（操作者、时间、目标、结果）
+- 文件上传**必须**验证 MIME 类型 + 限制文件大小 + 防止路径穿越（文件名 sanitize）
+
+#### 传输安全
+
+- 生产环境**必须**强制 HTTPS，**禁止**降级到 HTTP
+- HTTP 响应**必须**包含安全头（HSTS、CSP、X-Frame-Options、X-Content-Type-Options、Permissions-Policy）
+- SSE/WebSocket 长连接认证 token 不通过 URL query 参数传递（使用 header 或 cookie）
+- API 响应**禁止**暴露内部实现细节（堆栈跟踪、数据库错误、文件路径、SQL 语句）
+
+#### 认证与授权
+
+- 密码**必须**使用单向哈希（bcrypt/argon2），**禁止**明文或可逆加密存储
+- JWT **必须**设置合理过期时间，支持 token 吊销机制
+- 敏感操作（删除数据、权限变更）需要二次确认
+- 权限检查在 handler 层执行，**禁止**仅依赖前端隐藏控制访问
+- `tenant_id` **必须**从 JWT 中间件注入，**禁止**信任客户端传递的值
+
+#### 速率限制
+
+- 所有 API 端点**必须**配置速率限制
+- 认证相关端点（登录、注册、密码重置）限制更严格
+- 批量操作和数据导出需要独立的速率限制策略
+- 速率限制超出时返回 429 状态码，响应包含 `Retry-After` header
+
 ---

 ## 4. 测试与验证
@@ -394,14 +458,24 @@ chore(docker): 添加 PostgreSQL 健康检查
 - ❌ **不要**跳过验证直接提交 — 编译/测试/功能验证必须全部通过
 - ❌ **不要**提交后忘记推送 — 不推送等于没完成，远程仓库必须同步。每次新会话开始先检查未推送提交
 - ❌ **不要**忘记更新文档 — 涉及架构、接口、模块变化时必须同步更新相关文档
- ❌ **不要**连续 5 个代码提交不更新 wiki — wiki 是团队唯一真相源，过期数据比没有数据更有害（5 月实测：89 fix 仅 11 有 wiki 更新，关键数字迁移数差 8 个）
+- ❌ **不要**连续 5 个代码提交不更新 wiki — wiki 是团队唯一真相源，过期数据比没有数据更有害
 - ❌ **不要**修复 bug 后跳过症状导航更新 — 每个修复都应该帮助未来遇到同类问题的人快速定位根因
 - ❌ **不要**新增功能后不更新 wiki 关键数字 — 迁移数/路由数/实体数/测试数必须与代码同步，否则 wiki 指标表就是废数据
 - ❌ **不要**一次性输出长文档 — 超过 200 行的文档必须分步编写（先大纲 → 逐章 → 整合），否则会因上下文过长卡死
 - ❌ **不要**忽略讨论记录 — 每次发散式讨论结束后必须建立文档到 `docs/discussions/`，不要口头确认后就忘
- ❌ **不要**跳过 Feature DoD — 每个功能标记"完成"前必须通过 §2.6 检查清单，不全面验证就提交 = 后续 5 次 fix（媒体库教训）
- ❌ **不要**新增端点时默认放行 — 所有端点默认拒绝访问，必须显式声明权限（安全教训：25 次 fix 源于默认放行）
- ❌ **不要**后端 DTO 变更不同步前端 — 字段名/路径/类型变更时必须同步更新前端 TypeScript 接口（35 次 fix 教训）
+- ❌ **不要**跳过 Feature DoD — 每个功能标记"完成"前必须通过 §2.6 检查清单，不全面验证就提交将导致后续反复修复
+- ❌ **不要**新增端点时默认放行 — 所有端点默认拒绝访问，必须显式声明权限
+- ❌ **不要**后端 DTO 变更不同步前端 — 字段名/路径/类型变更时必须同步更新前端 TypeScript 接口
+- ❌ **不要**写 Update DTO 时省略校验 — Update*Req 必须与 Create*Req 校验对称（Validate derive / 枚举 custom / Vec min=1 / 密码 max=128）
+- ❌ **不要**URL 字段不做 SSRF 防护 — 禁止 localhost/127.0.0.1/内网地址，仅允许 http/https 协议
+- ❌ **不要**handler 层跳过 `.validate()` — 所有 `Json<T>` handler 函数体第一行必须调 `req.validate().map_err(\|e\| AppError::Validation(e.to_string()))?`
+- ❌ **不要**在日志中输出敏感数据 — 密码、token、身份证号、手机号等 PII 信息禁止写入日志
+- ❌ **不要**信任客户端传递的 `tenant_id` — 必须从 JWT 中间件注入，客户端可伪造
+- ❌ **不要**在生产代码中使用 `unwrap()` — 必须处理所有错误，使用 `?` 或 `map_err`
+- ❌ **不要**将内部错误信息返回给客户端 — 数据库错误、堆栈跟踪、文件路径等必须转换为用户友好的错误消息
+- ❌ **不要**使用 HTTP 传输敏感数据 — 生产环境必须 HTTPS
+- ❌ **不要**跳过依赖安全检查 — 新增依赖前运行 `cargo audit` / `npm audit`，禁止引入有高危漏洞的版本
+- ❌ **不要**文件上传不做安全处理 — 必须验证 MIME 类型 + 限制大小 + sanitize 文件名防路径穿越

 ### 场景化指令

@@ -412,6 +486,7 @@ chore(docker): 添加 PostgreSQL 健康检查
 - 当遇到**新增表** → 创建 SeaORM migration + Entity，包含所有标准字段
 - 当遇到**新增页面** → 使用 Ant Design 组件，i18n key 引用文案
 - 当遇到**新增业务模块插件** → 参考 `wiki/wasm-plugin.md` 的插件制作完整流程和 `.claude/skills/plugin-development/SKILL.md`，创建 cdylib crate + 实现 Guest trait + 编译为 WASM Component。**权限码必须与实体名一致（每个实体声明 `.list` + `.manage`）**
+- 当遇到**新增/修改 DTO** → 参考 `wiki/architecture.md` §4 DTO 输入校验规范：`derive(Validate)` + 字段级校验 + handler 层 `validate()` 调用 + 单元测试

 ---

@@ -429,3 +504,32 @@ chore(docker): 添加 PostgreSQL 健康检查
 | 设计文档索引 | `wiki/index.md` |
 | 开发进度、模块状态 | `wiki/index.md` 关键数字 |
 | 环境配置、连接信息、登录凭据 | `wiki/infrastructure.md` §2 |
+
+## graphify — 代码知识图谱
+
+> 项目知识图谱位于 `graphify-out/`，当前规模：18,517 节点 / 22,666 边 / 1,841 社区（纯 AST 解析，无 API 成本）。
+> 工具：`python -m graphify`（已安装 graphifyy 0.8.18）。
+
+### 开发流程中的使用场景
+
+| 时机 | 命令 | 目的 |
+|------|------|------|
+| **接手新任务，理解代码关系** | `graphify query "概念名"` | 搜索相关节点，比 Grep 更精准（按调用/引用/包含关系） |
+| **排查 bug，追踪调用链** | `graphify path "A" "B"` | 查找两个模块/函数间的最短路径 |
+| **理解某个模块的职责** | `graphify explain "模块名"` | 自然语言解释节点及其邻居 |
+| **代码改动后** | `graphify update .` | 增量更新图谱（AST-only，秒级完成） |
+| **宏观架构审查** | 读 `graphify-out/GRAPH_REPORT.md` | 全局社区结构、跨文件关系概览 |
+
+### 使用优先级（融入 §2.5 闭环工作法）
+
+在 §2.5 步骤 1「现状确认」中，**优先使用 graphify 替代盲目 Grep**：
+
+1. **先 `graphify query`** — 精确定位相关节点和社区（比 Grep 返回更结构化的结果）
+2. **再 `graphify path`** — 确认模块间依赖路径（避免遗漏间接依赖）
+3. **最后 Grep/Glob/Read** — 确认 graphify 发现的具体文件内容
+
+### 注意事项
+
+- `graphify update .` 纯本地 AST 解析，不消耗 LLM token，每次代码改动后都可以运行
+- 查询结果比 GRAPH_REPORT.md 更精准，优先使用 query/path/explain，仅在需要全局视图时读报告
+- 首次生成需几分钟（1712 文件），后续增量更新秒级完成
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1429,6 +1429,7 @@ dependencies = [
 "handlebars",
 "hex",
 "redis",
+ "regex-lite",
 "reqwest",
 "sea-orm",
 "serde",
@@ -1453,6 +1454,7 @@ dependencies = [
 "base64 0.22.1",
 "cbc",
 "chrono",
+ "dashmap",
 "erp-core",
 "hex",
 "jsonwebtoken",
@@ -1613,6 +1615,7 @@ dependencies = [
 "tracing",
 "utoipa",
 "uuid",
+ "validator",
 "wasmtime",
 "wasmtime-wasi",
 ]
@@ -3978,6 +3981,12 @@ dependencies = [
 "regex-syntax",
 ]

+[[package]]
+name = "regex-lite"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cab834c73d247e67f4fae452806d17d3c7501756d98c8808d7c9c7aa7d18f973"
+
 [[package]]
 name = "regex-syntax"
 version = "0.8.10"
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -33,7 +33,7 @@ tokio = { version = "1", features = ["full"] }
 # Web
 axum = { version = "0.8", features = ["multipart"] }
 tower = "0.5"
-tower-http = { version = "0.6", features = ["cors", "trace", "compression-gzip", "fs"] }
+tower-http = { version = "0.6", features = ["cors", "trace", "compression-gzip", "fs", "set-header"] }

 # Database
 sea-orm = { version = "1.1", features = [
@@ -91,6 +91,7 @@ reqwest = { version = "0.12", features = ["json", "stream"] }
 aes = "0.8"
 cbc = "0.1"
 hex = "0.4"
+regex-lite = "0.1"

 # CSV and Excel export
 csv = "1"
@@ -119,6 +120,9 @@ handlebars = "6"
 # HTML sanitization
 ammonia = "4"

+# Document parsing
+pdf-extract = "0.7"
+
 # Metrics
 metrics = "0.24"
 metrics-exporter-prometheus = "0.16"
--- a/9
+++ b/9
@@ -1,7 +1,7 @@
 # ==============================
 # Stage 1: Build Rust backend
 # ==============================
-FROM rust:1.85-bookworm AS rust-builder
+FROM rust:1-bookworm AS rust-builder

 WORKDIR /app

@@ -75,6 +75,7 @@ FROM debian:bookworm-slim AS runtime

 RUN apt-get update && apt-get install -y --no-install-recommends \
    ca-certificates \
+    curl \
    && rm -rf /var/lib/apt/lists/*

 WORKDIR /app
@@ -85,7 +86,7 @@ COPY --from=rust-builder /app/target/release/erp-server /app/erp-server
 # 复制配置文件
 COPY config/ /app/config/

-# 复制前端构建产物
+# 复制前端构建产物（可通过 volume 暴露给 OpenResty）
 COPY --from=frontend-builder /app/apps/web/dist/ /app/static/

 # 创建上传目录
@@ -96,7 +97,7 @@ RUN useradd -r -s /bin/false appuser \
    && chown -R appuser:appuser /app
 USER appuser

-# 环境变量（运行时通过 docker-compose 覆盖）
+# 环境变量（运行时通过 docker-compose / .env 覆盖）
 ENV ERP__SERVER__HOST=0.0.0.0
 ENV ERP__SERVER__PORT=3000
 ENV ERP__SERVER__METRICS_PORT=9090
@@ -104,7 +105,7 @@ ENV ERP__STORAGE__UPLOAD_DIR=/app/uploads

 EXPOSE 3000 9090

-VOLUME ["/app/uploads"]
+VOLUME ["/app/uploads", "/app/static"]

 HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=3 \
    CMD curl -f http://localhost:3000/api/v1/health || exit 1
--- a/apps/miniprogram-uniapp/src/services/report.ts
+++ b/apps/miniprogram-uniapp/src/services/report.ts
@@ -1,12 +1,8 @@
 import { api } from './request'

-export interface IndicatorDetail {
-  value: number; unit?: string; reference_min?: number; reference_max?: number; status?: string
-}
-
 export interface LabReport {
  id: string; report_date: string; report_type: string
-  indicators: Record<string, IndicatorDetail>; doctor_interpretation?: string
+  items?: unknown; doctor_notes?: string
  image_urls?: string[]; version: number
 }

--- a/apps/miniprogram/.env.production
+++ b/apps/miniprogram/.env.production
@@ -0,0 +1,5 @@
+TARO_APP_API_URL=https://api.hms.example.com/api/v1
+TARO_APP_DEFAULT_TENANT_ID=
+# TARO_APP_ENCRYPTION_KEY 不在此文件设置
+# 生产密钥通过 CI/CD 环境变量注入（dotenv 不覆盖已有 env var）
+# 本地 build:weapp 测试时自动回退到 .env 中的开发密钥
--- a/apps/miniprogram/.prettierrc
+++ b/apps/miniprogram/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "arrowParens": "always"
+}
--- a/apps/miniprogram/tests/helpers/mock-api.ts
+++ b/apps/miniprogram/tests/helpers/mock-api.ts
@@ -11,6 +11,9 @@ vi.mock('@/services/request', () => ({
  clearRequestCache: vi.fn(),
  markLoggingOut: vi.fn(),
  clearLoggingOut: vi.fn(),
+  getCachedPatientId: vi.fn(() => ''),
+  setCachedPatientId: vi.fn(),
+  resetForTesting: vi.fn(),
 }));

 /** 创建一个成功的 API 响应 */
--- a/apps/miniprogram/tests/services/analytics-pii.test.ts
+++ b/apps/miniprogram/tests/services/analytics-pii.test.ts
@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+vi.mock('@tarojs/taro', () => ({
+  default: {
+    getStorageSync: vi.fn(() => []),
+    setStorage: vi.fn(),
+    removeStorageSync: vi.fn(),
+  },
+}));
+
+vi.mock('@/services/request', () => ({
+  api: { post: vi.fn().mockResolvedValue({ success: true }) },
+}));
+
+describe('Analytics PII 清理', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('flushEvents 发送的 batch 不含 PII', async () => {
+    const { trackEvent, flushEvents } = await import('@/services/analytics');
+    const { api } = await import('@/services/request');
+
+    trackEvent('page_view', {
+      page: 'health',
+      userId: 'should-be-removed',
+      patientId: 'should-be-removed',
+      user_name: 'should-be-removed',
+      phone: 'should-be-removed',
+      id_card: 'should-be-removed',
+    });
+
+    await flushEvents();
+
+    const postCall = vi.mocked(api.post).mock.calls[0];
+    const body = postCall[1] as { events: Array<Record<string, unknown>> };
+    const evt = body.events[0];
+
+    // 事件级别不应有 userId/patientId
+    expect(evt).not.toHaveProperty('userId');
+    expect(evt).not.toHaveProperty('patientId');
+
+    // properties 中不应有 PII 字段
+    const props = evt.properties as Record<string, unknown>;
+    expect(props).not.toHaveProperty('userId');
+    expect(props).not.toHaveProperty('patientId');
+    expect(props).not.toHaveProperty('user_name');
+    expect(props).not.toHaveProperty('phone');
+    expect(props).not.toHaveProperty('id_card');
+
+    // 正常字段保留
+    expect(props.page).toBe('health');
+  });
+
+  it('trackEvent 不在事件级别包含 userId/patientId', async () => {
+    const { trackEvent, flushEvents } = await import('@/services/analytics');
+    const { api } = await import('@/services/request');
+
+    trackEvent('test_event');
+    await flushEvents();
+
+    const postCall = vi.mocked(api.post).mock.calls[0];
+    const body = postCall[1] as { events: Array<Record<string, unknown>> };
+    const evt = body.events[0];
+
+    expect(evt).not.toHaveProperty('userId');
+    expect(evt).not.toHaveProperty('patientId');
+  });
+
+  it('sanitizeProperties 过滤所有 PII 标识字段', async () => {
+    const { trackEvent, flushEvents } = await import('@/services/analytics');
+    const { api } = await import('@/services/request');
+
+    trackEvent('test', {
+      openid: 'oXXX',
+      access_token: 'tok',
+      refresh_token: 'ref',
+      email: 'test@test.com',
+      address: '某地',
+      mobile: '13800001111',
+      page: 'settings', // 非 PII 字段
+    });
+
+    await flushEvents();
+
+    const postCall = vi.mocked(api.post).mock.calls[0];
+    const body = postCall[1] as { events: Array<Record<string, unknown>> };
+    const props = body.events[0].properties as Record<string, unknown>;
+
+    // 全部 PII 被过滤，只剩 page
+    expect(props).not.toHaveProperty('openid');
+    expect(props).not.toHaveProperty('access_token');
+    expect(props).not.toHaveProperty('refresh_token');
+    expect(props).not.toHaveProperty('email');
+    expect(props).not.toHaveProperty('address');
+    expect(props).not.toHaveProperty('mobile');
+    expect(props.page).toBe('settings');
+  });
+});
--- a/apps/miniprogram/tests/services/request.test.ts
+++ b/apps/miniprogram/tests/services/request.test.ts
@@ -7,7 +7,7 @@ vi.mock('@tarojs/taro', () => ({
    getStorageSync: vi.fn(() => ''),
    setStorageSync: vi.fn(),
    showToast: vi.fn(),
-    reLaunch: vi.fn(),
+    reLaunch: vi.fn(() => Promise.resolve()),
    getCurrentPages: vi.fn(() => []),
  },
 }));
@@ -23,7 +23,7 @@ vi.mock('@/utils/secure-storage', () => ({
 }));

 import Taro from '@tarojs/taro';
-import { api, clearRequestCache, resetForTesting } from '@/services/request';
+import { api, clearRequestCache, resetForTesting, setCachedPatientId } from '@/services/request';

 describe('request module', () => {
  beforeEach(() => {
@@ -148,4 +148,218 @@ describe('request module', () => {
      await expect(api.get('/bad-params')).rejects.toThrow('参数错误');
    });
  });
+
+  describe('ResponseCache', () => {
+    it('should cache GET responses and return cached on second call', async () => {
+      vi.mocked(Taro.request).mockResolvedValue({ statusCode: 200, data: { success: true, data: { id: '1' } } } as any);
+
+      await api.get('/cached-test');
+      await api.get('/cached-test');
+
+      expect(Taro.request).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not cache POST requests', async () => {
+      vi.mocked(Taro.request).mockResolvedValue({ statusCode: 200, data: { success: true, data: {} } } as any);
+
+      await api.post('/no-cache', { a: 1 });
+      await api.post('/no-cache', { a: 1 });
+
+      expect(Taro.request).toHaveBeenCalledTimes(2);
+    });
+
+    it('clearRequestCache should clear cached entries', async () => {
+      vi.mocked(Taro.request).mockResolvedValue({ statusCode: 200, data: { success: true, data: { v: 1 } } } as any);
+
+      await api.get('/clear-test');
+      clearRequestCache();
+      await api.get('/clear-test');
+
+      expect(Taro.request).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('setCachedPatientId', () => {
+    it('should isolate cache entries by patient ID', async () => {
+      vi.mocked(Taro.request).mockResolvedValue({ statusCode: 200, data: { success: true, data: { v: 1 } } } as any);
+      setCachedPatientId('patient-A');
+      await api.get('/health/data');
+
+      setCachedPatientId('patient-B');
+      await api.get('/health/data');
+
+      // 不同 patient ID 应各自发请求（缓存隔离）
+      expect(Taro.request).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('requestUnlimited', () => {
+    it('should bypass concurrency limiter', async () => {
+      vi.mocked(Taro.request).mockResolvedValue({ statusCode: 200, data: { success: true, data: 'ok' } } as any);
+
+      const { requestUnlimited } = await import('@/services/request');
+      await requestUnlimited('GET', '/health/test');
+
+      expect(Taro.request).toHaveBeenCalledWith(
+        expect.objectContaining({ method: 'GET' }),
+      );
+    });
+  });
+
+  describe('ConcurrencyLimiter', () => {
+    it('should queue requests when at capacity', async () => {
+      const { ConcurrencyLimiter } = await import('@/services/request/limiter');
+      const limiter = new ConcurrencyLimiter(2);
+      const order: number[] = [];
+
+      const acquire1 = limiter.acquire();
+      const acquire2 = limiter.acquire();
+      // Third acquire should queue
+      const acquire3 = limiter.acquire().then(() => order.push(3));
+
+      order.push(1);
+      order.push(2);
+
+      // Release one to unblock the third
+      limiter.release();
+      await acquire3;
+
+      expect(order).toContain(3);
+      limiter.release();
+      limiter.release();
+    });
+
+    it('should release in FIFO order', async () => {
+      const { ConcurrencyLimiter } = await import('@/services/request/limiter');
+      const limiter = new ConcurrencyLimiter(1);
+      const order: string[] = [];
+
+      await limiter.acquire(); // fills the slot
+
+      const p2 = limiter.acquire().then(() => order.push('second'));
+      const p3 = limiter.acquire().then(() => order.push('third'));
+
+      limiter.release(); // releases second
+      await p2;
+      limiter.release(); // releases third
+      await p3;
+
+      expect(order).toEqual(['second', 'third']);
+    });
+  });
+
+  describe('ResponseCache LRU', () => {
+    it('should update insertion order on cache hit', async () => {
+      const { ResponseCache } = await import('@/services/request/cache');
+      const cache = new ResponseCache(3, 60_000);
+      cache.setPatientId('p1');
+
+      cache.set('/a', 'data-a');
+      cache.set('/b', 'data-b');
+      cache.set('/c', 'data-c');
+
+      // Access /a to move it to the end (most recently used)
+      cache.get('/a');
+
+      // Adding /d should evict /b (oldest after /a was accessed)
+      cache.set('/d', 'data-d');
+
+      expect(cache.get('/b')).toBeNull();
+      expect(cache.get('/a')).toBe('data-a');
+      expect(cache.get('/d')).toBe('data-d');
+    });
+
+    it('should expire entries based on TTL', async () => {
+      const { ResponseCache } = await import('@/services/request/cache');
+      vi.useFakeTimers();
+      const cache = new ResponseCache(100, 1000);
+      cache.setPatientId('p1');
+
+      cache.set('/expiring', 'data', 500);
+      expect(cache.get('/expiring')).toBe('data');
+
+      vi.advanceTimersByTime(600);
+      expect(cache.get('/expiring')).toBeNull();
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe('token refresh & 401 retry', () => {
+    it('should throw immediately when isLoggingOut is true', async () => {
+      const { markLoggingOut } = await import('@/services/request');
+      vi.mocked(Taro.request).mockResolvedValue({ statusCode: 401, data: {} } as any);
+
+      markLoggingOut();
+      await expect(api.get('/protected')).rejects.toThrow('登录已过期');
+    });
+
+    it('should attempt token refresh on 401', async () => {
+      const mockStore: Record<string, string> = {
+        access_token: 'expired-token',
+        refresh_token: 'valid-refresh',
+        tenant_id: 'test-tenant',
+      };
+
+      // Override secureGet for this test
+      const { secureGet } = await import('@/utils/secure-storage');
+      vi.mocked(secureGet).mockImplementation((key: string) => mockStore[key] || '');
+
+      // First call: 401 → triggers refresh
+      // Refresh call: success
+      // Retry call: success
+      vi.mocked(Taro.request)
+        .mockResolvedValueOnce({ statusCode: 401, data: {} } as any)
+        .mockResolvedValueOnce({ statusCode: 200, data: { success: true, data: { access_token: 'new-token', refresh_token: 'new-refresh', expires_in: 3600 } } } as any)
+        .mockResolvedValueOnce({ statusCode: 200, data: { success: true, data: { result: 'ok' } } } as any);
+
+      const result = await api.get('/needs-auth');
+
+      expect(result).toEqual({ result: 'ok' });
+      // 3 calls: initial 401 + refresh + retry
+      expect(Taro.request).toHaveBeenCalledTimes(3);
+    });
+
+    it('should redirect to login when refresh fails', async () => {
+      const mockStore: Record<string, string> = {
+        access_token: 'expired-token',
+        refresh_token: 'bad-refresh',
+        tenant_id: 'test-tenant',
+      };
+
+      const { secureGet } = await import('@/utils/secure-storage');
+      vi.mocked(secureGet).mockImplementation((key: string) => mockStore[key] || '');
+      vi.mocked(Taro.getCurrentPages).mockReturnValue([{ path: 'pages/home' } as any]);
+
+      vi.mocked(Taro.request)
+        .mockResolvedValueOnce({ statusCode: 401, data: {} } as any)
+        .mockResolvedValueOnce({ statusCode: 401, data: {} } as any); // refresh fails
+
+      await expect(api.get('/protected-resource')).rejects.toThrow('登录已过期');
+      expect(Taro.reLaunch).toHaveBeenCalledWith({ url: '/pages/login/index' });
+    });
+  });
+
+  describe('safeReLaunch dedup', () => {
+    it('should only call reLaunch once for concurrent requests', async () => {
+      const { markLoggingOut } = await import('@/services/request');
+      vi.mocked(Taro.request).mockResolvedValue({ statusCode: 401, data: {} } as any);
+      vi.mocked(Taro.getCurrentPages).mockReturnValue([{ path: 'pages/home' } as any]);
+
+      const mockStore: Record<string, string> = {
+        access_token: 'expired',
+        refresh_token: 'bad',
+        tenant_id: 't1',
+      };
+      const { secureGet } = await import('@/utils/secure-storage');
+      vi.mocked(secureGet).mockImplementation((key: string) => mockStore[key] || '');
+
+      // First call sets isLoggingOut, second call hits early exit
+      await expect(api.get('/test1')).rejects.toThrow();
+      await expect(api.get('/test2')).rejects.toThrow();
+
+      // reLaunch should be called at most once
+      expect(vi.mocked(Taro.reLaunch).mock.calls.length).toBeLessThanOrEqual(1);
+    });
+  });
 });
--- a/apps/miniprogram/tests/utils/request-signer.test.ts
+++ b/apps/miniprogram/tests/utils/request-signer.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { signRequest, generateNonce, hmacSha256Sync } from '@/utils/request-signer';
+
+describe('generateNonce', () => {
+  it('生成 16 字符十六进制字符串', () => {
+    const nonce = generateNonce();
+    expect(nonce).toHaveLength(16);
+    expect(nonce).toMatch(/^[0-9a-f]{16}$/);
+  });
+
+  it('连续调用生成不同值', () => {
+    const n1 = generateNonce();
+    const n2 = generateNonce();
+    expect(n1).not.toBe(n2);
+  });
+});
+
+describe('hmacSha256Sync', () => {
+  it('相同输入产生相同输出', () => {
+    const key = 'test-key';
+    const msg = 'hello world';
+    const r1 = hmacSha256Sync(key, msg);
+    const r2 = hmacSha256Sync(key, msg);
+    expect(r1).toBe(r2);
+    expect(r1).toHaveLength(64); // SHA-256 = 32 bytes = 64 hex chars
+  });
+
+  it('不同输入产生不同输出', () => {
+    const r1 = hmacSha256Sync('key', 'msg1');
+    const r2 = hmacSha256Sync('key', 'msg2');
+    expect(r1).not.toBe(r2);
+  });
+});
+
+describe('signRequest', () => {
+  const signingKey = 'test-signing-key-256-bit!!!!!!!!!!!';
+
+  it('GET 请求生成正确的签名头', () => {
+    const headers = signRequest('GET', '/health/patients', undefined, signingKey);
+
+    expect(headers).toHaveProperty('X-Signature');
+    expect(headers).toHaveProperty('X-Timestamp');
+    expect(headers).toHaveProperty('X-Nonce');
+    expect(headers['X-Nonce']).toHaveLength(16);
+    expect(headers['X-Signature']).toHaveLength(64);
+  });
+
+  it('POST 请求包含 body hash', () => {
+    const headers = signRequest('POST', '/health/vital-signs', { value: 120 }, signingKey);
+
+    expect(headers).toHaveProperty('X-Signature');
+    expect(headers['X-Signature']).toHaveLength(64);
+  });
+
+  it('无 body 时也能正常签名', () => {
+    const headers = signRequest('GET', '/test', undefined, signingKey);
+    expect(headers['X-Signature']).toBeTruthy();
+  });
+
+  it('相同参数不同 nonce 产生不同签名', () => {
+    const h1 = signRequest('GET', '/test', undefined, signingKey);
+    // 由于 nonce 不同，签名也不同
+    const h2 = signRequest('GET', '/test', undefined, signingKey);
+    expect(h1['X-Signature']).not.toBe(h2['X-Signature']);
+  });
+});
--- a/apps/miniprogram/tests/utils/secure-storage.test.ts
+++ b/apps/miniprogram/tests/utils/secure-storage.test.ts
@@ -0,0 +1,324 @@
+/**
+ * secure-storage AES-256-GCM 测试
+ * 覆盖：加解密对称性、空值删除、明文兼容、迁移、Base64 边界
+ */
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+
+// --- crypto.getRandomValues polyfill ---
+if (!globalThis.crypto?.getRandomValues) {
+  globalThis.crypto = {
+    getRandomValues: (arr: any) => {
+      for (let i = 0; i < arr.length; i++) arr[i] = (Math.random() * 256) | 0;
+      return arr;
+    },
+  } as any;
+}
+
+// --- Mock @tarojs/taro (覆盖 setup.ts 中的默认 mock，添加 base64 方法) ---
+const storage = new Map<string, string>();
+
+vi.mock('@tarojs/taro', () => ({
+  default: {
+    getStorageSync: vi.fn((key: string) => storage.get(key) ?? ''),
+    setStorageSync: vi.fn((key: string, value: string) => { storage.set(key, value); }),
+    removeStorageSync: vi.fn((key: string) => { storage.delete(key); }),
+    arrayBufferToBase64: vi.fn((buf: ArrayBuffer) => {
+      const bytes = new Uint8Array(buf);
+      let binary = '';
+      for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+      return btoa(binary);
+    }),
+    base64ToArrayBuffer: vi.fn((b64: string) => {
+      const binary = atob(b64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+      return bytes.buffer;
+    }),
+  },
+}));
+
+// --- Mock 加密密钥 ---
+process.env.TARO_APP_ENCRYPTION_KEY =
+  '0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef';
+process.env.NODE_ENV = 'development';
+
+// --- 导入被测模块（在 mock 之后） ---
+import { secureSet, secureGet, secureRemove, migrateLegacyStorage } from '@/utils/secure-storage';
+
+// --- 辅助：直接访问 mock 函数 ---
+import Taro from '@tarojs/taro';
+
+const mockGet = Taro.getStorageSync as ReturnType<typeof vi.fn>;
+const mockSet = Taro.setStorageSync as ReturnType<typeof vi.fn>;
+const mockRemove = Taro.removeStorageSync as ReturnType<typeof vi.fn>;
+
+describe('secure-storage AES-256-GCM', () => {
+  beforeEach(() => {
+    storage.clear();
+    vi.clearAllMocks();
+  });
+
+  // ================================================================
+  // 1. AES 加解密对称性
+  // ================================================================
+  describe('AES 加解密对称性', () => {
+    const cases: Array<[string, string]> = [
+      ['英文', 'hello world'],
+      ['中文', '你好世界'],
+      ['emoji', '\u{1F600}\u{1F680}\u{1F4A9}'],
+      ['特殊字符', '<script>alert("xss")</script>&"\''],
+      ['JSON', '{"name":"张三","age":30,"nested":{"key":"val"}}'],
+      ['超长字符串', 'A'.repeat(10000)],
+      ['混合内容', 'Hello 你好 \u{1F600} !@#$%^&*()'],
+      ['空格和换行', '  line1\nline2\ttabbed  '],
+      ['Unicode 补充', '\u{1F1E8}\u{1F1F3}\u{1F1FA}\u{1F1F8}'],
+    ];
+
+    cases.forEach(([label, value]) => {
+      it(`roundtrip: ${label}`, () => {
+        secureSet('test_key', value);
+        const result = secureGet('test_key');
+        expect(result).toBe(value);
+      });
+    });
+
+    it('多次写入同一 key 产生不同密文（nonce 随机）', () => {
+      secureSet('dup', 'same-value');
+      const first = storage.get('_es_dup')!;
+      secureSet('dup', 'same-value');
+      const second = storage.get('_es_dup')!;
+      // 密文应该不同（nonce 不同），但都能解密
+      expect(first).not.toBe(second);
+      expect(secureGet('dup')).toBe('same-value');
+    });
+
+    it('不同 key 互不干扰', () => {
+      secureSet('key_a', 'value_a');
+      secureSet('key_b', 'value_b');
+      expect(secureGet('key_a')).toBe('value_a');
+      expect(secureGet('key_b')).toBe('value_b');
+    });
+  });
+
+  // ================================================================
+  // 2. 空 value 触发 remove
+  // ================================================================
+  describe('空 value 触发 remove', () => {
+    it('空字符串触发 removeStorageSync', () => {
+      secureSet('empty', '');
+      expect(mockRemove).toHaveBeenCalledWith('_es_empty');
+      expect(secureGet('empty')).toBe('');
+    });
+
+    it('先写入再清空应删除存储', () => {
+      secureSet('temp', 'some-data');
+      expect(secureGet('temp')).toBe('some-data');
+      secureSet('temp', '');
+      expect(secureGet('temp')).toBe('');
+    });
+  });
+
+  // ================================================================
+  // 3. 明文 fallback 读取兼容
+  // ================================================================
+  describe('明文 fallback 兼容', () => {
+    it('直接读取无前缀的明文存储', () => {
+      storage.set('access_token', 'plain-token-123');
+      expect(secureGet('access_token')).toBe('plain-token-123');
+    });
+
+    it('加密存储优先于明文存储', () => {
+      storage.set('access_token', 'plain-token');
+      secureSet('access_token', 'encrypted-token');
+      expect(secureGet('access_token')).toBe('encrypted-token');
+    });
+
+    it('存储值非字符串时回退到明文', () => {
+      // getStorageSync mock 返回 ''（默认值），prefixed key 不存在
+      // 明文 key 也返回 ''
+      expect(secureGet('nonexistent')).toBe('');
+    });
+  });
+
+  // ================================================================
+  // 4. migrateLegacyStorage 迁移逻辑
+  // ================================================================
+  describe('migrateLegacyStorage', () => {
+    it('将明文数据迁移到加密存储并删除原始 key', () => {
+      storage.set('access_token', 'legacy-token');
+      storage.set('refresh_token', 'legacy-refresh');
+      storage.set('user_data', '{"id":"123"}');
+
+      migrateLegacyStorage();
+
+      // 明文 key 应被删除
+      expect(storage.has('access_token')).toBe(false);
+      expect(storage.has('refresh_token')).toBe(false);
+      expect(storage.has('user_data')).toBe(false);
+
+      // 加密 key 存在且可解密
+      expect(secureGet('access_token')).toBe('legacy-token');
+      expect(secureGet('refresh_token')).toBe('legacy-refresh');
+      expect(secureGet('user_data')).toBe('{"id":"123"}');
+    });
+
+    it('已加密的 key 不重复迁移', () => {
+      secureSet('access_token', 'already-encrypted');
+      const spy = vi.spyOn(storage, 'set');
+
+      migrateLegacyStorage();
+
+      // 不应产生新的 set 调用（除了可能内部的 secureSet 已有的）
+      // 关键：值不变
+      expect(secureGet('access_token')).toBe('already-encrypted');
+    });
+
+    it('非字符串的明文数据不迁移', () => {
+      // 我们的 mock getStorageSync 对不存在的 key 返回 ''
+      // 模拟: 存一个空字符串的明文值（不迁移）
+      storage.set('tenant_id', '');
+      migrateLegacyStorage();
+      // 空字符串不被视为有效数据，不做迁移
+      expect(storage.has('_es_tenant_id')).toBe(false);
+    });
+
+    it('MIGRATION_KEYS 中未列出的 key 不受影响', () => {
+      storage.set('custom_key', 'custom-value');
+      migrateLegacyStorage();
+      expect(storage.get('custom_key')).toBe('custom-value');
+      expect(storage.has('_es_custom_key')).toBe(false);
+    });
+
+    it('prefixed key 存在但非 aes: 前缀时重新加密为 AES', () => {
+      // 直接放一个非 aes: 前缀的值到 prefixed key
+      // migrateLegacyStorage 发现 prefixed key 存在且不以 aes: 开头，
+      // 会调用 secureGet → 明文 fallback 返回该值，然后 secureSet 重新加密
+      storage.set('_es_access_token', 'legacy-ciphertext-or-plain');
+
+      migrateLegacyStorage();
+
+      // 应被重新加密为 AES 格式
+      const stored = storage.get('_es_access_token')!;
+      expect(stored.startsWith('aes:')).toBe(true);
+    });
+  });
+
+  // ================================================================
+  // 5. secureRemove
+  // ================================================================
+  describe('secureRemove', () => {
+    it('删除加密存储', () => {
+      secureSet('remove_test', 'to-be-removed');
+      expect(secureGet('remove_test')).toBe('to-be-removed');
+      secureRemove('remove_test');
+      expect(secureGet('remove_test')).toBe('');
+    });
+
+    it('删除不存在的 key 不报错', () => {
+      expect(() => secureRemove('nonexistent')).not.toThrow();
+    });
+  });
+
+  // ================================================================
+  // 6. Base64 边界
+  // ================================================================
+  describe('Base64 边界', () => {
+    it('存储值可正确通过 base64 编解码', () => {
+      const value = 'Test with special chars: ';
+      secureSet('b64_test', value);
+      const result = secureGet('b64_test');
+      expect(result).toBe(value);
+    });
+
+    it('二进制丰富内容加解密', () => {
+      // 构造包含各种 Unicode 范围的字符串
+      const chars = [];
+      for (let i = 0x20; i < 0x7f; i++) chars.push(String.fromCharCode(i));
+      // CJK 基本区
+      for (let i = 0x4e00; i < 0x4e10; i++) chars.push(String.fromCharCode(i));
+      // emoji
+      chars.push('\u{1F600}', '\u{1F680}', '\u{1F970}');
+      const value = chars.join('');
+
+      secureSet('b64_binary', value);
+      expect(secureGet('b64_binary')).toBe(value);
+    });
+
+    it('损坏的 AES 密文返回 null 后走明文 fallback', () => {
+      storage.set('_es_corrupt', 'aes:INVALID_BASE64!!!');
+      // aesDecrypt 失败返回 null，hasEncryptionKey=true 所以不走 dev plaintext
+      // 最终返回 raw 值
+      expect(secureGet('corrupt')).toBe('aes:INVALID_BASE64!!!');
+    });
+  });
+
+  // ================================================================
+  // 7. 空密钥 dev 模式 — 明文存储兼容
+  // ================================================================
+  describe('空密钥 dev 模式', () => {
+    const originalKey = process.env.TARO_APP_ENCRYPTION_KEY;
+    const originalEnv = process.env.NODE_ENV;
+
+    beforeEach(() => {
+      storage.clear();
+      vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+      process.env.TARO_APP_ENCRYPTION_KEY = originalKey;
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('dev 模式空密钥：secureSet 存明文，secureGet 读取成功', () => {
+      process.env.TARO_APP_ENCRYPTION_KEY = '';
+      process.env.NODE_ENV = 'development';
+      secureSet('dev_plain', 'hello-dev');
+      // 应以明文存储
+      expect(storage.get('_es_dev_plain')).toBe('hello-dev');
+      expect(secureGet('dev_plain')).toBe('hello-dev');
+    });
+
+    it('dev 模式空密钥：读取 MCP 注入的明文成功', () => {
+      process.env.TARO_APP_ENCRYPTION_KEY = '';
+      process.env.NODE_ENV = 'development';
+      storage.set('access_token', 'mcp-injected-token');
+      expect(secureGet('access_token')).toBe('mcp-injected-token');
+    });
+  });
+
+  // ================================================================
+  // 8. production 模式空密钥 — 拒绝加解密
+  // ================================================================
+  describe('production 模式空密钥', () => {
+    const originalKey = process.env.TARO_APP_ENCRYPTION_KEY;
+    const originalEnv = process.env.NODE_ENV;
+
+    beforeEach(() => {
+      storage.clear();
+      vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+      process.env.TARO_APP_ENCRYPTION_KEY = originalKey;
+      process.env.NODE_ENV = originalEnv;
+    });
+
+    it('production 空密钥：secureSet 存明文（无加密可用），secureGet 返回空', () => {
+      process.env.TARO_APP_ENCRYPTION_KEY = '';
+      process.env.NODE_ENV = 'production';
+      secureSet('prod_test', 'sensitive-data');
+      // 应以明文存储（无 key 时 aesEncrypt 返回 null）
+      expect(storage.get('_es_prod_test')).toBe('sensitive-data');
+      // secureGet: prefixed key 有值但非 aes: 前缀 + hasEncryptionKey=false → 返回 raw
+      expect(secureGet('prod_test')).toBe('sensitive-data');
+    });
+
+    it('production 空密钥：AES 解密失败返回空字符串', () => {
+      process.env.TARO_APP_ENCRYPTION_KEY = '';
+      process.env.NODE_ENV = 'production';
+      // 模拟存在一个 aes: 前缀的旧数据
+      storage.set('_es_old_data', 'aes:INVALID_CORRUPT_DATA');
+      expect(secureGet('old_data')).toBe('');
+    });
+  });
+});
--- a/apps/miniprogram/config/dev.ts
+++ b/apps/miniprogram/config/dev.ts
@@ -20,5 +20,23 @@ export default {
      });
    },
  },
-  h5: {},
+  h5: {
+    devServer: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost:3000',
+          changeOrigin: true,
+        },
+      },
+      client: {
+        overlay: {
+          errors: true,
+          warnings: false,
+        },
+      },
+    },
+    webpackChain(chain) {
+      chain.resolve.alias.set('react-dom$', require.resolve('react-dom'));
+    },
+  },
 } satisfies UserConfigExport;
--- a/apps/miniprogram/config/index.ts
+++ b/apps/miniprogram/config/index.ts
@@ -2,13 +2,19 @@ import { defineConfig } from '@tarojs/cli';
 import path from 'path';

 export default defineConfig(async (merge) => {
+  // 生产构建缺少加密密钥时发出警告（不阻断构建，但提示开发者/CI 配置）
+  if (process.env.NODE_ENV === 'production' && !process.env.TARO_APP_ENCRYPTION_KEY) {
+    console.warn('[config] ⚠ TARO_APP_ENCRYPTION_KEY 未设置，将回退到 .env 中的开发密钥');
+    console.warn('[config] 生产部署应通过 CI/CD 环境变量注入独立密钥');
+  }
+
  const baseConfig = {
    projectName: 'hms-miniprogram',
    date: '2026-4-23',
    designWidth: 375,
    deviceRatio: { 640: 2.34 / 2, 750: 1, 375: 2, 828: 1.81 / 2 },
    sourceRoot: 'src',
-    outputRoot: 'dist',
+    outputRoot: process.env.TARO_ENV === 'h5' ? 'dist-h5' : 'dist',
    plugins: [],
    defineConstants: {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
@@ -19,7 +25,14 @@ export default defineConfig(async (merge) => {
      'process.env.TARO_APP_WX_TEMPLATE_REPORT': JSON.stringify(process.env.TARO_APP_WX_TEMPLATE_REPORT || ''),
      'process.env.TARO_APP_WX_TEMPLATE_CRITICAL_ALERT': JSON.stringify(process.env.TARO_APP_WX_TEMPLATE_CRITICAL_ALERT || ''),
      'process.env.TARO_APP_WX_TEMPLATE_HEALTH_ABNORMAL': JSON.stringify(process.env.TARO_APP_WX_TEMPLATE_HEALTH_ABNORMAL || ''),
+      'process.env.TARO_APP_WX_TEMPLATE_MEDICATION': JSON.stringify(process.env.TARO_APP_WX_TEMPLATE_MEDICATION || ''),
      'process.env.TARO_APP_DEFAULT_TENANT_ID': JSON.stringify(process.env.TARO_APP_DEFAULT_TENANT_ID || ''),
+      'process.env.TARO_APP_DEV_USER': JSON.stringify(
+        process.env.NODE_ENV === 'production' ? '' : (process.env.TARO_APP_DEV_USER || '')
+      ),
+      'process.env.TARO_APP_DEV_PASS': JSON.stringify(
+        process.env.NODE_ENV === 'production' ? '' : (process.env.TARO_APP_DEV_PASS || '')
+      ),
    },
    copy: { patterns: [], options: {} },
    framework: 'react',
@@ -31,10 +44,39 @@ export default defineConfig(async (merge) => {
      resource: ['src/styles/variables.scss'],
    },
    mini: {
+      virtualHost: true,
+      copy: {
+        patterns: [
+          { from: 'src/native-components/', to: 'dist/native-components/', ignore: ['*.ts'] },
+        ],
+        options: {},
+      },
      compile: {
        exclude: [],
        include: [],
      },
+      commonChunks: ['runtime', 'vendors', 'taro', 'common'],
+      addChunkPages(pages) {
+        // 主包 TabBar 页面保持 common chunk
+        const tabBarPages = new Set([
+          'pages/index/index',
+          'pages/health/index',
+          'pages/mall/index',
+          'pages/messages/index',
+          'pages/profile/index',
+        ]);
+        pages.forEach((page) => {
+          if (page.name === 'app') return;
+          // 分包页面不注入 common chunk，由分包自己的 vendors.js 承载
+          if (page.name.startsWith('pages/pkg-')) return;
+          if (tabBarPages.has(page.name) || !page.name.startsWith('pages/')) {
+            page.chunks?.unshift('common');
+          }
+        });
+      },
+      miniCssExtractPluginOption: {
+        ignoreOrder: true,
+      },
      postcss: {
        pxtransform: { enable: true, config: {} },
        cssModules: {
--- a/apps/miniprogram/config/prod.ts
+++ b/apps/miniprogram/config/prod.ts
@@ -8,17 +8,23 @@ export default {
      compress: {
        drop_console: true,
        drop_debugger: true,
-        pure_funcs: ['console.log', 'console.info', 'console.debug', 'console.warn', 'console.error'],
+        pure_funcs: ['console.log', 'console.info', 'console.debug', 'console.warn'],
+        passes: 2,
+        unsafe: true,
+        unsafe_comps: true,
+        unsafe_math: true,
      },
      format: {
        comments: false,
      },
+      mangle: {
+        toplevel: true,
+      },
    },
  },
  h5: {
    miniCssExtractPluginOption: {
      ignoreOrder: true,
-      cssLoaderOption: { importLoaders: 1, esModule: false },
    },
  },
 } satisfies UserConfigExport;
--- a/apps/miniprogram/eslint.config.mjs
+++ b/apps/miniprogram/eslint.config.mjs
@@ -0,0 +1,35 @@
+import js from '@eslint/js';
+import ts from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+
+export default [
+  { ignores: ['dist/', 'dist-h5/', 'lib/', 'node_modules/', 'config/'] },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      '@typescript-eslint': ts,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...ts.configs.recommended.rules,
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+  },
+];
--- a/apps/miniprogram/inject-auth.cjs
+++ b/apps/miniprogram/inject-auth.cjs
@@ -35,8 +35,10 @@ async function main() {
  console.log('3. 写入 storage (明文模式)...');
  const result = await mp.evaluate((at, rt, ud, ur, tid, pid) => {
    try {
-      // 无加密密钥时 secureSet 走明文
-      // 但我们直接用 wx.setStorageSync 确保
+      // 清除 _es_ 前缀旧加密值，避免 secureGet 读到过期 token
+      ['access_token','refresh_token','user_data','user_roles','tenant_id','current_patient_id','current_patient','token_expires_at'].forEach(k => {
+        wx.removeStorageSync('_es_' + k);
+      });
      wx.setStorageSync('access_token', at);
      wx.setStorageSync('refresh_token', rt);
      wx.setStorageSync('user_data', ud);
--- a/apps/miniprogram/native/pkg-veepoo/index.js
+++ b/apps/miniprogram/native/pkg-veepoo/index.js
@@ -0,0 +1,863 @@
+/**
+ * Veepoo M2 原生小程序页面 — 连接 + 测量
+ *
+ * 完全脱离 Taro 框架，直接使用微信原生 API + Veepoo SDK。
+ * 流程严格对齐官方 Demo：
+ *   onLoad 注册全局监听器
+ *   → scan → stopScan → connect(等待 connection:true)
+ *   → delay 500ms → authenticate
+ *   → SDK 事件(type=1) / Storage 轮询 → ready
+ */
+// eslint-disable-next-line no-undef
+const { veepooBle, veepooFeature, veepooLogger } = require('./libs/veepoo-sdk');
+
+// ── 常量 ──
+
+var SDK_EVENT_AUTH = 1;
+var SDK_EVENT_BATTERY = 2;
+var SDK_EVENT_SLEEP = 4;
+var SDK_EVENT_DAILY = 5;
+var SDK_EVENT_TEMPERATURE = 6;
+var SDK_EVENT_BLOOD_PRESSURE = 18;
+var SDK_EVENT_BLOOD_OXYGEN = 31;
+var SDK_EVENT_HEART_RATE = 51;
+var SDK_EVENT_PRESSURE = 58;
+var SDK_EVENT_AUTO_TEST = 54;
+
+var MEASURE_TYPES = [
+  { type: 'heart_rate', label: '心率', unit: 'bpm', icon: '♥', color: '#EF4444', sdkType: SDK_EVENT_HEART_RATE },
+  { type: 'blood_oxygen', label: '血氧', unit: '%', icon: 'O₂', color: '#3B82F6', sdkType: SDK_EVENT_BLOOD_OXYGEN },
+  { type: 'blood_pressure', label: '血压', unit: 'mmHg', icon: '↕', color: '#8B5CF6', sdkType: SDK_EVENT_BLOOD_PRESSURE },
+  { type: 'temperature', label: '体温', unit: '°C', icon: 'T', color: '#F59E0B', sdkType: SDK_EVENT_TEMPERATURE },
+  { type: 'pressure', label: '压力', unit: '', icon: '~', color: '#6366F1', sdkType: SDK_EVENT_PRESSURE },
+];
+
+var MEASURE_TIMEOUTS = {
+  heart_rate: 60000,
+  blood_oxygen: 60000,
+  blood_pressure: 120000,
+  temperature: 60000,
+  pressure: 90000,
+};
+
+var MEASURE_SETTLE_DELAY = 1500;
+
+function _findConfig(type) {
+  for (var i = 0; i < MEASURE_TYPES.length; i++) {
+    if (MEASURE_TYPES[i].type === type) return MEASURE_TYPES[i];
+  }
+  return MEASURE_TYPES[0];
+}
+
+// ── Page ──
+
+// eslint-disable-next-line no-undef
+Page({
+  data: {
+    phase: 'idle',
+    deviceId: '',
+    deviceName: 'M2',
+    batteryLevel: null,
+    error: '',
+    selectedType: 'heart_rate',
+    selectedIcon: '♥',
+    selectedColor: '#EF4444',
+    selectedLabel: '心率',
+    selectedUnit: 'bpm',
+    measureTypes: MEASURE_TYPES,
+    measurePhase: 'idle',
+    measureProgress: 0,
+    measureDisplayValue: '',
+    measureError: '',
+    results: {},
+    hasResults: false,
+    // 自动测量状态
+    autoMeasuring: false,
+    autoMeasureDone: false,
+    autoMeasureStatus: {},
+    autoMeasureValues: {},
+    autoMeasureProgress: 0,
+  },
+
+  _authTimer: null,
+  _authTimeout: null,
+  _scanTimer: null,
+  _scanFound: null,
+  _measureTimer: null,
+  _settleTimer: null,
+  _lastValues: null,
+  _connected: false,
+  _eventChannel: null,
+  _connecting: false,
+  _listenersRegistered: false,
+  _autoQueue: null,
+  _autoQueueIndex: 0,
+
+  // ── 生命周期 ──
+
+  onLoad: function () {
+    // eslint-disable-next-line no-undef
+    this._eventChannel = this.getOpenerEventChannel();
+    // eslint-disable-next-line no-undef
+    wx.setNavigationBarTitle({ title: 'M2 手环测量' });
+    this._updateSelectedDisplay('heart_rate');
+
+    // 注意：不在 onLoad 注册 veepooWeiXinSDKNotifyMonitorValueChange！
+    // 该函数内部会调用 wx.notifyBLECharacteristicValueChange，需要蓝牙适配器已初始化。
+    // onLoad 时适配器未初始化 → 返回 "notifyBLECharacteristicValueChange:fail:not init"
+    // 监听器改在 _doConnect 的 connection:true 回调中注册。
+
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 页面已加载');
+  },
+
+  onUnload: function () {
+    this._cleanup();
+  },
+
+  _cleanup: function () {
+    if (this._authTimer) { clearInterval(this._authTimer); this._authTimer = null; }
+    if (this._authTimeout) { clearTimeout(this._authTimeout); this._authTimeout = null; }
+    if (this._scanTimer) { clearTimeout(this._scanTimer); this._scanTimer = null; }
+    if (this._measureTimer) { clearTimeout(this._measureTimer); this._measureTimer = null; }
+    if (this._settleTimer) { clearTimeout(this._settleTimer); this._settleTimer = null; }
+    this._connecting = false;
+    if (this._connected) {
+      try { veepooBle.veepooWeiXinSDKloseBluetoothAdapterManager(function () {}); } catch (e) {
+        // eslint-disable-next-line no-undef
+        console.warn('[veepoo-native] 断开异常:', e);
+      }
+      this._connected = false;
+    }
+  },
+
+  // ── 全局监听器（onLoad 注册一次） ──
+
+  _registerGlobalListeners: function () {
+    if (this._listenersRegistered) return;
+    this._listenersRegistered = true;
+    var self = this;
+
+    // SDK 数据监听 — 接收所有解析后的事件（auth/measure/battery 等）
+    veepooBle.veepooWeiXinSDKNotifyMonitorValueChange(function (data) {
+      // eslint-disable-next-line no-undef
+      console.log('[veepoo-native] SDK 数据事件:', JSON.stringify(data).substring(0, 500));
+      self._handleSdkEvent(data);
+    });
+
+    // BLE 连接状态变化
+    veepooBle.veepooWeiXinSDKBLEConnectionStateChangeManager(function (res) {
+      // eslint-disable-next-line no-undef
+      console.log('[veepoo-native] 连接状态变化:', JSON.stringify(res));
+      if (!res.connected) {
+        self._connected = false;
+        self._connecting = false;
+        self._cancelPendingMeasure();
+        self.setData({ phase: 'disconnected' });
+      }
+    });
+
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] SDK 函数类型:', {
+      scanFn: typeof veepooBle.veepooWeiXinSDKStartScanDeviceAndReceiveScanningDevice,
+      connectFn: typeof veepooBle.veepooWeiXinSDKBleConnectionServicesCharacteristicsNotifyManager,
+      dataFn: typeof veepooBle.veepooWeiXinSDKNotifyMonitorValueChange,
+      authFn: typeof veepooFeature.veepooBlePasswordCheckManager,
+    });
+  },
+
+  _updateSelectedDisplay: function (type) {
+    var cfg = _findConfig(type);
+    this.setData({
+      selectedType: type,
+      selectedIcon: cfg.icon,
+      selectedColor: cfg.color,
+      selectedLabel: cfg.label,
+      selectedUnit: cfg.unit,
+    });
+  },
+
+  // ── 连接流程 ──
+
+  handleConnect: function () {
+    if (this.data.phase !== 'idle' && this.data.phase !== 'error' && this.data.phase !== 'disconnected') return;
+    if (this._connecting) return;
+    this._connecting = true;
+
+    this.setData({ phase: 'scanning', error: '' });
+    veepooLogger.setLevel(0);
+
+    var self = this;
+    self._scanFound = null;
+
+    veepooBle.veepooWeiXinSDKStartScanDeviceAndReceiveScanningDevice(function (res) {
+      var device = Array.isArray(res) ? res[0] : res;
+      if (!device) return;
+      var name = (device.localName || device.name || '').toUpperCase();
+      var deviceId = device.deviceId || device.mac || '';
+      // eslint-disable-next-line no-undef
+      console.log('[veepoo-native] 扫描到:', name, deviceId);
+      if (!self._scanFound && (name.indexOf('M2') !== -1 || name.indexOf('VPM') !== -1 || name.indexOf('VEEPOO') !== -1)) {
+        self._scanFound = device;
+        veepooBle.veepooWeiXinSDKStopSearchBleManager(function () {
+          self._doConnect(device);
+        });
+      }
+    });
+
+    this._scanTimer = setTimeout(function () {
+      if (!self._scanFound) {
+        veepooBle.veepooWeiXinSDKStopSearchBleManager(function () {});
+        self._connecting = false;
+        self.setData({ phase: 'error', error: '未找到 M2 设备，请确保手环已开机且蓝牙已开启' });
+      }
+    }, 15000);
+  },
+
+  _doConnect: function (device) {
+    this.setData({ phase: 'connecting' });
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 开始连接:', device.deviceId || device.mac);
+    var self = this;
+
+    veepooBle.veepooWeiXinSDKBleConnectionServicesCharacteristicsNotifyManager(device, function (result) {
+      // eslint-disable-next-line no-undef
+      console.log('[veepoo-native] 连接阶段回调:', JSON.stringify(result).substring(0, 300));
+
+      // 只响应最终就绪回调（connection:true）
+      if (result.connection === true) {
+        self._connected = true;
+        self._connecting = false;
+        self.setData({
+          deviceId: device.deviceId || device.mac || '',
+        });
+
+        // 关键：在连接就绪后注册数据监听器
+        // veepooWeiXinSDKNotifyMonitorValueChange 内部会调用
+        // wx.notifyBLECharacteristicValueChange，需要蓝牙适配器已初始化+已连接
+        self._registerGlobalListeners();
+
+        // eslint-disable-next-line no-undef
+        console.log('[veepoo-native] 连接就绪，监听器已注册，500ms 后发送认证');
+
+        setTimeout(function () {
+          // eslint-disable-next-line no-undef
+          console.log('[veepoo-native] 调用 veepooBlePasswordCheckManager');
+          veepooFeature.veepooBlePasswordCheckManager();
+          self.setData({ phase: 'authenticating' });
+        }, 500);
+
+        // Storage 轮询兜底
+        self._authTimer = setInterval(function () {
+          try {
+            // eslint-disable-next-line no-undef
+            var status = wx.getStorageSync('deviceChipStatus');
+            // SDK 可能写入字符串或布尔值 true
+            if (status === 'successfulVerification' || status === 'passTheVerification' || status === true) {
+              clearInterval(self._authTimer);
+              self._authTimer = null;
+              self._onReady();
+            }
+          } catch (_) { /* ignore */ }
+        }, 500);
+
+        self._authTimeout = setTimeout(function () {
+          if (self._authTimer) {
+            clearInterval(self._authTimer);
+            self._authTimer = null;
+            self._connecting = false;
+            // eslint-disable-next-line no-undef
+            console.error('[veepoo-native] 认证超时 deviceChipStatus=', wx.getStorageSync('deviceChipStatus'));
+            self.setData({ phase: 'error', error: '设备认证超时，请重新连接' });
+          }
+        }, 8000);
+      }
+    });
+  },
+
+  _onReady: function () {
+    if (this._authTimeout) { clearTimeout(this._authTimeout); this._authTimeout = null; }
+    this._connecting = false;
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 认证成功，设备就绪');
+    this.setData({ phase: 'ready' });
+    veepooFeature.veepooReadElectricQuantityManager();
+
+    // 认证成功后自动读取 3 天睡眠数据 + 开启自动测量
+    this._readSleepData();
+    this._enableAutoMeasurement();
+
+    // 自动依次测量所有指标（面向中老年人，减少操作）
+    this._startAutoMeasureQueue();
+  },
+
+  // ── SDK 事件路由 ──
+
+  _handleSdkEvent: function (data) {
+    if (!data || data.type === undefined) return;
+    var type = data.type;
+
+    if (type === SDK_EVENT_AUTH) {
+      var content = data.content || {};
+      // eslint-disable-next-line no-undef
+      console.log('[veepoo-native] 认证事件: VPDeviceAck=' + content.VPDeviceAck + ' VPDevicepassword=' + content.VPDevicepassword);
+      // VPDeviceAck 是认证结果（successfulVerification/passTheVerification）
+      // VPDevicepassword 是设备密码原始值（如 "0000"），不是认证结果
+      if (content.VPDeviceAck === 'successfulVerification' || content.VPDeviceAck === 'passTheVerification') {
+        if (this._authTimer) { clearInterval(this._authTimer); this._authTimer = null; }
+        if (this._authTimeout) { clearTimeout(this._authTimeout); this._authTimeout = null; }
+        this._onReady();
+      }
+      return;
+    }
+
+    if (type === SDK_EVENT_BATTERY) {
+      var pct = (data.content || {}).VPDeviceElectricPercent;
+      if (pct !== undefined && pct !== null) {
+        this.setData({ batteryLevel: Number(pct) });
+      }
+      return;
+    }
+
+    // 睡眠数据回调（type=4）
+    if (type === SDK_EVENT_SLEEP) {
+      this._handleSleepEvent(data);
+      return;
+    }
+
+    // 日常数据回调（type=5）
+    if (type === SDK_EVENT_DAILY) {
+      // 日常数据用于历史同步，原生页面暂不处理
+      return;
+    }
+
+    // 自动测量配置回调（type=54）
+    if (type === SDK_EVENT_AUTO_TEST) {
+      // eslint-disable-next-line no-undef
+      console.log('[veepoo-native] 自动测量配置回调');
+      return;
+    }
+
+    for (var i = 0; i < MEASURE_TYPES.length; i++) {
+      if (MEASURE_TYPES[i].sdkType === type) {
+        this._handleMeasureEvent(MEASURE_TYPES[i].type, data);
+        return;
+      }
+    }
+  },
+
+  // ── 测量流程 ──
+
+  handleSelectType: function (e) {
+    var type = e.currentTarget.dataset.type;
+    if (this.data.measurePhase === 'measuring') return;
+    this._updateSelectedDisplay(type);
+    this.setData({ measureError: '' });
+  },
+
+  handleStartMeasure: function () {
+    var type = this.data.selectedType;
+    if (this.data.measurePhase === 'measuring') return;
+    if (!this._connected) {
+      this.setData({ measureError: '设备未连接' });
+      return;
+    }
+
+    var self = this;
+    self._lastValues = null;
+
+    self.setData({
+      measurePhase: 'measuring',
+      measureProgress: 0,
+      measureDisplayValue: '',
+      measureError: '',
+    });
+
+    self._sendMeasureCommand(type, true);
+
+    self._measureTimer = setTimeout(function () {
+      self._onMeasureError('测量超时，请重试');
+    }, MEASURE_TIMEOUTS[type] || 60000);
+  },
+
+  handleCancelMeasure: function () {
+    this._cancelPendingMeasure();
+    this.setData({
+      measurePhase: 'idle',
+      measureProgress: 0,
+      measureDisplayValue: '',
+    });
+  },
+
+  handleDisconnect: function () {
+    this._cleanup();
+    this.setData({ phase: 'idle', deviceId: '', batteryLevel: null, error: '' });
+  },
+
+  handleBack: function () {
+    var results = this.data.results;
+    if (Object.keys(results).length > 0) {
+      try {
+        // eslint-disable-next-line no-undef
+        wx.setStorageSync('hms:veepoo_measure_results', JSON.stringify(results));
+      } catch (_) { /* ignore */ }
+    }
+    if (this._eventChannel) {
+      this._eventChannel.emit('measureComplete', { results: results, count: Object.keys(results).length });
+    }
+    // eslint-disable-next-line no-undef
+    wx.navigateBack({ delta: 1 });
+  },
+
+  handleResetResult: function () {
+    var type = this.data.selectedType;
+    var newResults = Object.assign({}, this.data.results);
+    delete newResults[type];
+    this.setData({
+      measurePhase: 'idle',
+      measureProgress: 0,
+      measureDisplayValue: '',
+      measureError: '',
+      results: newResults,
+      hasResults: Object.keys(newResults).length > 0,
+    });
+  },
+
+  // ── 测量事件处理 ──
+
+  _handleMeasureEvent: function (type, data) {
+    // 自动测量模式下，路由到自动测量处理器
+    if (this.data.autoMeasuring) {
+      this._handleAutoMeasureEvent(type, data);
+      return;
+    }
+
+    // 手动测量模式
+    if (this.data.selectedType !== type || this.data.measurePhase !== 'measuring') return;
+
+    var content = data.content || {};
+    var self = this;
+
+    if (content.deviceBusy === true) { self._onMeasureError('设备正忙，请稍后重试'); return; }
+    if (content.notWear === true || data.state === 6) { self._onMeasureError('请将手环佩戴到手腕上'); return; }
+    if (data.state === 7) { self._onMeasureError('设备正在充电'); return; }
+    if (data.state === 8) { self._onMeasureError('设备电量不足'); return; }
+    if (type === 'pressure' && data.ack === 2) { self._onMeasureError('设备电量不足'); return; }
+    if (type === 'pressure' && data.ack === 3) { self._onMeasureError('设备正在测量其他数据'); return; }
+    if (type === 'pressure' && data.ack === 4) { self._onMeasureError('佩戴检测未通过'); return; }
+
+    var values = self._extractValues(type, content);
+    if (!values) return;
+
+    self._lastValues = values;
+
+    var displayVal = self._formatValues(type, values);
+    var progress = data.Progress !== undefined ? data.Progress : 0;
+    self.setData({
+      measureDisplayValue: displayVal,
+      measureProgress: Math.max(progress, 0),
+    });
+
+    if (progress >= 100) {
+      self._onMeasureSuccess(type, values);
+      return;
+    }
+
+    if (!self._settleTimer) {
+      self._settleTimer = setTimeout(function () {
+        if (self._lastValues && self.data.measurePhase === 'measuring') {
+          self._onMeasureSuccess(type, self._lastValues);
+        }
+      }, MEASURE_SETTLE_DELAY);
+    }
+  },
+
+  _extractValues: function (type, content) {
+    switch (type) {
+      case 'heart_rate': {
+        var hr = Number(content.heartRate);
+        return (hr >= 30 && hr <= 250) ? { heart_rate: hr } : null;
+      }
+      case 'blood_oxygen': {
+        var bo = Number(content.bloodOxygen);
+        return (bo >= 70 && bo <= 100) ? { blood_oxygen: bo } : null;
+      }
+      case 'blood_pressure': {
+        var high = Number(content.bloodPressureHigh);
+        var low = Number(content.bloodPressureLow);
+        return (high > 0 && low > 0) ? { systolic: high, diastolic: low } : null;
+      }
+      case 'temperature': {
+        var temp = Number(content.bodyTemperature);
+        return (temp > 30 && temp < 45) ? { temperature: temp } : null;
+      }
+      case 'pressure': {
+        var p = Number(content.pressure);
+        return (p >= 0 && p <= 100) ? { pressure: p } : null;
+      }
+      default: return null;
+    }
+  },
+
+  _formatValues: function (type, values) {
+    if (type === 'blood_pressure') {
+      return (values.systolic != null ? values.systolic : '--') + '/' + (values.diastolic != null ? values.diastolic : '--');
+    }
+    var v = Object.values(values)[0];
+    return (v !== undefined && v !== null) ? String(v) : '--';
+  },
+
+  _onMeasureSuccess: function (type, values) {
+    this._cancelPendingMeasure();
+
+    var result = { type: type, values: values, measuredAt: Date.now() };
+    var newResults = Object.assign({}, this.data.results);
+    newResults[type] = result;
+
+    this.setData({
+      measurePhase: 'success',
+      measureProgress: 100,
+      measureDisplayValue: this._formatValues(type, values),
+      results: newResults,
+      hasResults: true,
+    });
+
+    if (this._eventChannel) {
+      this._eventChannel.emit('measureResult', result);
+    }
+  },
+
+  _onMeasureError: function (msg) {
+    this._cancelPendingMeasure();
+    this.setData({ measurePhase: 'error', measureError: msg });
+  },
+
+  _cancelPendingMeasure: function () {
+    if (this._measureTimer) { clearTimeout(this._measureTimer); this._measureTimer = null; }
+    if (this._settleTimer) { clearTimeout(this._settleTimer); this._settleTimer = null; }
+    this._lastValues = null;
+
+    var type = this.data.selectedType;
+    if (type) this._sendMeasureCommand(type, false);
+  },
+
+  _sendMeasureCommand: function (type, on) {
+    switch (type) {
+      case 'heart_rate':
+        veepooFeature.veepooSendHeartRateTestSwitchManager({ switch: !!on });
+        break;
+      case 'blood_oxygen':
+        veepooFeature.veepooSendBloodOxygenControlDataManager({ switch: on ? 'start' : 'stop' });
+        break;
+      case 'blood_pressure':
+        veepooFeature.veepooSendReadUniversalBloodPressureDataManager({ switch: on ? 'start' : 'stop' });
+        break;
+      case 'temperature':
+        veepooFeature.veepooSendTemperatureMeasurementSwitchManager({ switch: !!on });
+        break;
+      case 'pressure':
+        veepooFeature.veepooSendPressureTestManager({ switch: !!on });
+        break;
+    }
+  },
+
+  // ── 睡眠数据读取 ──
+
+  _sleepResults: null,
+  _sleepDay: 0,
+
+  _readSleepData: function () {
+    this._sleepResults = [];
+    this._sleepDay = 0;
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 开始读取睡眠数据（3天）');
+
+    // 依次读取 3 天睡眠
+    var self = this;
+    veepooFeature.veepooSendReadPreciseSleepManager({ day: 0 });
+
+    // 延迟读取后续天（避免并发冲突）
+    // eslint-disable-next-line no-undef
+    setTimeout(function () { veepooFeature.veepooSendReadPreciseSleepManager({ day: 1 }); }, 3000);
+    // eslint-disable-next-line no-undef
+    setTimeout(function () { veepooFeature.veepooSendReadPreciseSleepManager({ day: 2 }); }, 6000);
+  },
+
+  _handleSleepEvent: function (data) {
+    var progress = data.Progress || 0;
+    if (progress < 100) return;
+
+    var content = data.content || {};
+    var readDay = data.readDay || 0;
+    var totalTime = Number(content.sleepTotalTime || 0);
+
+    if (totalTime <= 0) return;
+
+    var sleepResult = {
+      day: readDay,
+      deepSleepMinutes: Number(content.deepSleepTime || 0),
+      lightSleepMinutes: Number(content.lightSleepTime || 0),
+      totalSleepMinutes: totalTime,
+      qualityScore: Number(content.sleepQuality || 0),
+      fallAsleepTime: String(content.fallAsleepTime || ''),
+      exitSleepTime: String(content.exitSleepTime || ''),
+    };
+
+    if (!this._sleepResults) this._sleepResults = [];
+    this._sleepResults.push(sleepResult);
+
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 睡眠数据 day=' + readDay + ' 总时长=' + totalTime + '分钟 质量=' + sleepResult.qualityScore + '星');
+
+    // 保存到 Storage 供 Taro 页面读取
+    try {
+      // eslint-disable-next-line no-undef
+      wx.setStorageSync('hms:veepoo_sleep_results', JSON.stringify(this._sleepResults));
+    } catch (_) { /* ignore */ }
+  },
+
+  // ── 自动测量 ──
+
+  _enableAutoMeasurement: function () {
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 开启自动测量功能');
+
+    // 开启心率自动监测
+    try {
+      veepooFeature.veepooSendSwitchSettingDataManager({
+        VPSettingAutomaticHRTest: 'open',
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-undef
+      console.warn('[veepoo-native] 开启心率自动监测失败:', e);
+    }
+
+    // 开启血压自动监测
+    try {
+      veepooFeature.veepooSendSwitchSettingDataManager({
+        VPSettingAutomaticBPTest: 'open',
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-undef
+      console.warn('[veepoo-native] 开启血压自动监测失败:', e);
+    }
+
+    // 开启体温自动监测
+    try {
+      veepooFeature.veepooSendSwitchSettingDataManager({
+        VPSettingAutomaticTemperatureTest: 'open',
+      });
+    } catch (e) {
+      // eslint-disable-next-line no-undef
+      console.warn('[veepoo-native] 开启体温自动监测失败:', e);
+    }
+  },
+
+  // ── 自动测量队列 ──
+
+  _startAutoMeasureQueue: function () {
+    var types = [];
+    var status = {};
+    for (var i = 0; i < MEASURE_TYPES.length; i++) {
+      types.push(MEASURE_TYPES[i].type);
+      status[MEASURE_TYPES[i].type] = 'pending';
+    }
+
+    this._autoQueue = types;
+    this._autoQueueIndex = 0;
+
+    this.setData({
+      autoMeasuring: true,
+      autoMeasureDone: false,
+      autoMeasureStatus: status,
+      autoMeasureValues: {},
+      autoMeasureProgress: 0,
+    });
+
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 启动自动测量队列，共 ' + types.length + ' 项');
+
+    var self = this;
+    setTimeout(function () {
+      self._startNextAutoMeasure();
+    }, 800);
+  },
+
+  _startNextAutoMeasure: function () {
+    if (!this._autoQueue || this._autoQueueIndex >= this._autoQueue.length) {
+      this._onAutoMeasureComplete();
+      return;
+    }
+
+    var type = this._autoQueue[this._autoQueueIndex];
+    this._updateSelectedDisplay(type);
+
+    var status = Object.assign({}, this.data.autoMeasureStatus);
+    status[type] = 'measuring';
+    this.setData({
+      autoMeasureStatus: status,
+      measurePhase: 'measuring',
+      measureProgress: 0,
+      measureDisplayValue: '',
+      measureError: '',
+    });
+
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 自动测量 [' + (this._autoQueueIndex + 1) + '/' + this._autoQueue.length + ']: ' + type);
+
+    this._lastValues = null;
+    this._sendMeasureCommand(type, true);
+
+    var self = this;
+    var timeout = MEASURE_TIMEOUTS[type] || 60000;
+    this._measureTimer = setTimeout(function () {
+      // eslint-disable-next-line no-undef
+      console.warn('[veepoo-native] 自动测量超时: ' + type);
+      self._onAutoMeasureError(type, '测量超时');
+    }, timeout);
+  },
+
+  _handleAutoMeasureEvent: function (type, data) {
+    if (!this._autoQueue || this._autoQueueIndex >= this._autoQueue.length) return;
+    if (type !== this._autoQueue[this._autoQueueIndex]) return;
+
+    var content = data.content || {};
+    var self = this;
+
+    if (content.deviceBusy === true) { self._onAutoMeasureError(type, '设备正忙'); return; }
+    if (content.notWear === true || data.state === 6) { self._onAutoMeasureError(type, '未佩戴'); return; }
+    if (data.state === 7) { self._onAutoMeasureError(type, '设备充电中'); return; }
+    if (data.state === 8) { self._onAutoMeasureError(type, '电量不足'); return; }
+    if (type === 'pressure' && data.ack === 2) { self._onAutoMeasureError(type, '电量不足'); return; }
+    if (type === 'pressure' && data.ack === 3) { self._onAutoMeasureError(type, '设备正忙'); return; }
+    if (type === 'pressure' && data.ack === 4) { self._onAutoMeasureError(type, '未佩戴'); return; }
+
+    var values = self._extractValues(type, content);
+    if (!values) return;
+
+    self._lastValues = values;
+
+    var progress = data.Progress !== undefined ? data.Progress : 0;
+    self.setData({ measureProgress: Math.max(progress, 0) });
+
+    if (progress >= 100) {
+      self._onAutoMeasureSuccess(type, values);
+      return;
+    }
+
+    if (!self._settleTimer) {
+      self._settleTimer = setTimeout(function () {
+        if (self._lastValues && self.data.autoMeasuring) {
+          self._onAutoMeasureSuccess(type, self._lastValues);
+        }
+      }, MEASURE_SETTLE_DELAY);
+    }
+  },
+
+  _onAutoMeasureSuccess: function (type, values) {
+    this._cancelPendingMeasure();
+
+    var result = { type: type, values: values, measuredAt: Date.now() };
+    var newResults = Object.assign({}, this.data.results);
+    newResults[type] = result;
+
+    var status = Object.assign({}, this.data.autoMeasureStatus);
+    status[type] = 'done';
+
+    var newValues = Object.assign({}, this.data.autoMeasureValues);
+    newValues[type] = this._formatValues(type, values);
+
+    var doneCount = 0;
+    var keys = Object.keys(status);
+    for (var i = 0; i < keys.length; i++) {
+      if (status[keys[i]] === 'done' || status[keys[i]] === 'error') doneCount++;
+    }
+    var progress = Math.round((doneCount / this._autoQueue.length) * 100);
+
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 自动测量完成: ' + type + ' = ' + newValues[type] + ' (' + progress + '%)');
+
+    this.setData({
+      results: newResults,
+      hasResults: true,
+      autoMeasureStatus: status,
+      autoMeasureValues: newValues,
+      autoMeasureProgress: progress,
+      measurePhase: 'idle',
+    });
+
+    this._autoQueueIndex++;
+    var self = this;
+    setTimeout(function () {
+      self._startNextAutoMeasure();
+    }, 800);
+  },
+
+  _onAutoMeasureError: function (type, msg) {
+    this._cancelPendingMeasure();
+
+    var status = Object.assign({}, this.data.autoMeasureStatus);
+    status[type] = 'error';
+
+    var doneCount = 0;
+    var keys = Object.keys(status);
+    for (var i = 0; i < keys.length; i++) {
+      if (status[keys[i]] === 'done' || status[keys[i]] === 'error') doneCount++;
+    }
+    var progress = Math.round((doneCount / this._autoQueue.length) * 100);
+
+    // eslint-disable-next-line no-undef
+    console.warn('[veepoo-native] 自动测量失败: ' + type + ' - ' + msg + ' (' + progress + '%)');
+
+    this.setData({
+      autoMeasureStatus: status,
+      autoMeasureProgress: progress,
+      measurePhase: 'idle',
+    });
+
+    this._autoQueueIndex++;
+    var self = this;
+    setTimeout(function () {
+      self._startNextAutoMeasure();
+    }, 500);
+  },
+
+  _onAutoMeasureComplete: function () {
+    // eslint-disable-next-line no-undef
+    console.log('[veepoo-native] 自动测量全部完成');
+
+    var results = this.data.results;
+    if (Object.keys(results).length > 0) {
+      try {
+        // eslint-disable-next-line no-undef
+        wx.setStorageSync('hms:veepoo_measure_results', JSON.stringify(results));
+      } catch (_) { /* ignore */ }
+    }
+
+    this.setData({
+      autoMeasureDone: true,
+      autoMeasuring: false,
+      autoMeasureProgress: 100,
+      measurePhase: 'idle',
+    });
+  },
+
+  handleCancelAutoMeasure: function () {
+    this._cancelPendingMeasure();
+    this._autoQueue = null;
+
+    var results = this.data.results;
+    if (Object.keys(results).length > 0) {
+      try {
+        // eslint-disable-next-line no-undef
+        wx.setStorageSync('hms:veepoo_measure_results', JSON.stringify(results));
+      } catch (_) { /* ignore */ }
+    }
+
+    this.setData({
+      autoMeasuring: false,
+      autoMeasureDone: false,
+      measurePhase: 'idle',
+    });
+  },
+});
--- a/apps/miniprogram/native/pkg-veepoo/index.json
+++ b/apps/miniprogram/native/pkg-veepoo/index.json
@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "M2 手环测量",
+  "navigationBarBackgroundColor": "#FFFFFF",
+  "navigationBarTextStyle": "black",
+  "backgroundColor": "#F5F5F4"
+}
--- a/apps/miniprogram/native/pkg-veepoo/index.wxml
+++ b/apps/miniprogram/native/pkg-veepoo/index.wxml
@@ -0,0 +1,215 @@
+<!--
+  Veepoo M2 原生小程序页面 — 连接 + 测量
+  设计原型: docs/design/veepoo-measure-prototype.html
+  完全匹配 SDK 官方 Demo 流程，不依赖 Taro
+-->
+
+<!-- ═══ 未连接 / 错误 / 断开 ═══ -->
+<block wx:if="{{phase === 'idle' || phase === 'error' || phase === 'disconnected'}}">
+  <view class="connect-screen">
+    <view class="connect-anim">
+      <view class="connect-ring"></view>
+      <view class="connect-center">
+        <text class="connect-bt">BT</text>
+      </view>
+    </view>
+    <text class="connect-title">M2 手环健康测量</text>
+    <text class="connect-hint">请确保手环已开机且蓝牙已开启</text>
+
+    <view wx:if="{{error}}" class="connect-error">
+      <text class="connect-error-text">{{error}}</text>
+    </view>
+
+    <view class="connect-btn-wrap">
+      <view class="btn-primary" bindtap="handleConnect">
+        {{phase === 'error' ? '重新连接' : phase === 'disconnected' ? '重新连接' : '连接 M2 手环'}}
+      </view>
+    </view>
+
+    <view wx:if="{{hasResults}}" class="connect-back">
+      <view class="btn-text" bindtap="handleBack">查看测量结果并返回</view>
+    </view>
+  </view>
+</block>
+
+<!-- ═══ 连接中（扫描/连接/认证） ═══ -->
+<block wx:elif="{{phase === 'scanning' || phase === 'connecting' || phase === 'authenticating'}}">
+  <view class="connect-screen">
+    <view class="connect-anim">
+      <view class="connect-ring connect-ring--active"></view>
+      <view class="connect-center">
+        <text class="connect-bt">BT</text>
+      </view>
+    </view>
+    <text class="connect-title">
+      {{phase === 'scanning' ? '正在搜索 M2 手环...' : phase === 'connecting' ? '正在连接...' : '正在认证...'}}
+    </text>
+    <text class="connect-hint">请确保手环已开机且靠近手机</text>
+  </view>
+</block>
+
+<!-- ═══ 自动测量中 / 自动测量完成 ═══ -->
+<block wx:elif="{{phase === 'ready' && (autoMeasuring || autoMeasureDone)}}">
+  <view class="measure-page">
+    <!-- 设备状态栏 -->
+    <view class="device-bar">
+      <view class="device-bar__left">
+        <view class="device-bar__dot"></view>
+        <text class="device-bar__name">{{deviceName}}</text>
+        <text wx:if="{{batteryLevel !== null}}" class="device-bar__battery">{{batteryLevel}}%</text>
+      </view>
+      <view wx:if="{{autoMeasuring}}" class="device-bar__disconnect" bindtap="handleCancelAutoMeasure">取消</view>
+    </view>
+
+    <view class="auto-measure">
+      <!-- 标题 -->
+      <view class="auto-measure__header">
+        <text class="auto-measure__title">{{autoMeasureDone ? '✓ 测量完成！' : '正在自动测量...'}}</text>
+        <text wx:if="{{!autoMeasureDone}}" class="auto-measure__subtitle">请保持手环佩戴，无需任何操作</text>
+      </view>
+
+      <!-- 指标列表 -->
+      <view class="auto-measure__list">
+        <view
+          wx:for="{{measureTypes}}"
+          wx:key="type"
+          class="auto-item {{autoMeasureStatus[item.type] === 'done' ? 'auto-item--done' : autoMeasureStatus[item.type] === 'measuring' ? 'auto-item--active' : autoMeasureStatus[item.type] === 'error' ? 'auto-item--error' : ''}}"
+        >
+          <view class="auto-item__left">
+            <view class="auto-item__icon-wrap" style="background: {{autoMeasureStatus[item.type] === 'done' ? item.color : autoMeasureStatus[item.type] === 'error' ? '#ccc' : item.color}}">
+              <text class="auto-item__icon">{{autoMeasureStatus[item.type] === 'done' ? '✓' : autoMeasureStatus[item.type] === 'error' ? '✕' : item.icon}}</text>
+            </view>
+            <text class="auto-item__label">{{item.label}}</text>
+          </view>
+          <view class="auto-item__right">
+            <block wx:if="{{autoMeasureStatus[item.type] === 'done'}}">
+              <text class="auto-item__value" style="color: {{item.color}}">{{autoMeasureValues[item.type]}}</text>
+              <text wx:if="{{item.unit}}" class="auto-item__unit">{{item.unit}}</text>
+            </block>
+            <text wx:elif="{{autoMeasureStatus[item.type] === 'measuring'}}" class="auto-item__status auto-item__status--active">测量中...</text>
+            <text wx:elif="{{autoMeasureStatus[item.type] === 'error'}}" class="auto-item__status auto-item__status--error">已跳过</text>
+            <text wx:else class="auto-item__status">等待中</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 进度条 -->
+      <view class="auto-progress">
+        <view class="auto-progress__bar">
+          <view class="auto-progress__fill" style="width: {{autoMeasureProgress}}%"></view>
+        </view>
+        <text class="auto-progress__text">{{autoMeasureProgress}}%</text>
+      </view>
+
+      <!-- 免责声明 -->
+      <view class="disclaimer">
+        <text class="disclaimer__text">测量数据仅供参考，不作为医学诊断依据。如有不适请及时就医。</text>
+      </view>
+
+      <!-- 操作按钮 -->
+      <view class="actions">
+        <block wx:if="{{autoMeasureDone}}">
+          <view class="btn btn--primary" bindtap="handleBack">查看结果并返回</view>
+        </block>
+        <block wx:elif="{{autoMeasuring}}">
+          <view class="btn btn--text" bindtap="handleCancelAutoMeasure">取消自动测量</view>
+        </block>
+      </view>
+    </view>
+  </view>
+</block>
+
+<!-- ═══ 就绪 + 手动测量 ═══ -->
+<block wx:elif="{{phase === 'ready'}}">
+  <view class="measure-page">
+    <!-- 设备状态栏 -->
+    <view class="device-bar">
+      <view class="device-bar__left">
+        <view class="device-bar__dot"></view>
+        <text class="device-bar__name">{{deviceName}}</text>
+        <text wx:if="{{batteryLevel !== null}}" class="device-bar__battery">{{batteryLevel}}%</text>
+      </view>
+      <view class="device-bar__disconnect" bindtap="handleDisconnect">断开</view>
+    </view>
+
+    <!-- 指标选择器 — 药丸式 -->
+    <scroll-view class="selector" scroll-x enhanced show-scrollbar="{{false}}">
+      <view
+        wx:for="{{measureTypes}}"
+        wx:key="type"
+        class="selector__pill {{selectedType === item.type ? 'selector__pill--active' : ''}} {{results[item.type] ? 'selector__pill--done' : ''}}"
+        data-type="{{item.type}}"
+        bindtap="handleSelectType"
+      >
+        <view class="selector__icon-wrap" style="background: {{item.color}}">
+          <text class="selector__icon">{{item.icon}}</text>
+        </view>
+        <text class="selector__label">{{item.label}}</text>
+      </view>
+    </scroll-view>
+
+    <!-- 仪表盘区域 -->
+    <view class="gauge-section">
+      <view class="gauge {{measurePhase === 'measuring' ? 'gauge--measuring' : ''}}">
+        <!-- SVG 圆环 -->
+        <view class="gauge__ring-wrap">
+          <view class="gauge__ring-bg"></view>
+          <view class="gauge__ring-progress" style="background: conic-gradient({{selectedColor}} {{measureProgress * 3.6}}deg, #E8E2DC 0deg);"></view>
+          <view class="gauge__center">
+            <!-- 空闲 -->
+            <block wx:if="{{measurePhase === 'idle'}}">
+              <text class="gauge__icon-lg" style="color: {{selectedColor}}">{{selectedIcon}}</text>
+              <text class="gauge__hint">点击下方按钮开始</text>
+            </block>
+            <!-- 测量中 -->
+            <block wx:elif="{{measurePhase === 'measuring'}}">
+              <text wx:if="{{measureDisplayValue}}" class="gauge__value" style="color: {{selectedColor}}">{{measureDisplayValue}}</text>
+              <text wx:else class="gauge__loading">测量中...</text>
+              <text wx:if="{{measureDisplayValue}}" class="gauge__unit">{{selectedUnit}}</text>
+            </block>
+            <!-- 成功 -->
+            <block wx:elif="{{measurePhase === 'success'}}">
+              <text class="gauge__value" style="color: {{selectedColor}}">{{measureDisplayValue}}</text>
+              <text class="gauge__unit">{{selectedUnit}}</text>
+            </block>
+            <!-- 错误 -->
+            <block wx:elif="{{measurePhase === 'error'}}">
+              <text class="gauge__err">!</text>
+              <text class="gauge__err-text">{{measureError}}</text>
+            </block>
+          </view>
+        </view>
+      </view>
+
+      <!-- 进度条 -->
+      <view wx:if="{{measurePhase === 'measuring' && measureProgress > 0}}" class="progress-bar">
+        <view class="progress-bar__fill" style="width: {{measureProgress}}%; background: {{selectedColor}};"></view>
+      </view>
+    </view>
+
+    <!-- 免责声明 -->
+    <view class="disclaimer">
+      <text class="disclaimer__text">测量数据仅供参考，不作为医学诊断依据。如有不适请及时就医。</text>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="actions">
+      <block wx:if="{{measurePhase === 'idle'}}">
+        <view class="btn btn--primary" style="background: {{selectedColor}}; box-shadow: 0 4px 16px rgba(0,0,0,0.15);" bindtap="handleStartMeasure">
+          开始测量{{selectedLabel}}
+        </view>
+      </block>
+      <block wx:elif="{{measurePhase === 'measuring'}}">
+        <view class="btn btn--secondary" bindtap="handleCancelMeasure">停止测量</view>
+        <view class="btn btn--text" bindtap="handleBack">完成并查看结果</view>
+      </block>
+      <block wx:elif="{{measurePhase === 'success'}}">
+        <view class="btn btn--primary" style="background: {{selectedColor}}; box-shadow: 0 4px 16px rgba(0,0,0,0.15);" bindtap="handleResetResult">重新测量</view>
+        <view class="btn btn--secondary" bindtap="handleBack">完成并查看结果</view>
+      </block>
+      <block wx:elif="{{measurePhase === 'error'}}">
+        <view class="btn btn--primary" style="background: {{selectedColor}}; box-shadow: 0 4px 16px rgba(0,0,0,0.15);" bindtap="handleStartMeasure">重新测量</view>
+      </block>
+    </view>
+  </view>
+</block>
--- a/apps/miniprogram/native/pkg-veepoo/index.wxss
+++ b/apps/miniprogram/native/pkg-veepoo/index.wxss
@@ -0,0 +1,619 @@
+/**
+ * Veepoo M2 原生页面样式
+ * 设计原型: docs/design/veepoo-measure-prototype.html
+ * 复刻小程序 design token
+ */
+
+page {
+  --pri: #C4623A;
+  --pri-l: #F0DDD4;
+  --bg: #F5F0EB;
+  --card: #FFFFFF;
+  --tx: #2D2A26;
+  --tx2: #5A554F;
+  --tx3: #78716C;
+  --bd: #E8E2DC;
+  --acc: #5B7A5E;
+  --acc-l: #E8F0E8;
+  --dan: #B54A4A;
+  --dan-l: #FDEAEA;
+  background: var(--bg);
+  min-height: 100vh;
+}
+
+/* ═══════════════════════════════════════
+   连接页面（未连接/连接中/错误）
+   ═══════════════════════════════════════ */
+.connect-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 0 40px;
+}
+
+.connect-anim {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  margin-bottom: 28px;
+}
+
+.connect-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 3px solid var(--pri);
+  animation: pulse-ring 2s ease-out infinite;
+}
+
+.connect-ring--active {
+  border-color: var(--pri);
+  animation: pulse-ring 1.5s ease-out infinite;
+}
+
+.connect-center {
+  position: absolute;
+  inset: 20px;
+  border-radius: 50%;
+  background: var(--pri);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.connect-bt {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.connect-title {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--tx);
+  margin-bottom: 8px;
+  line-height: 1.3;
+}
+
+.connect-hint {
+  font-size: 14px;
+  color: var(--tx3);
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.connect-error {
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.connect-error-text {
+  font-size: 14px;
+  color: var(--dan);
+}
+
+.connect-btn-wrap {
+  width: 200px;
+}
+
+.connect-back {
+  margin-top: 16px;
+}
+
+@keyframes pulse-ring {
+  0% { transform: scale(1); opacity: 1; }
+  100% { transform: scale(1.4); opacity: 0; }
+}
+
+/* ═══════════════════════════════════════
+   测量页面（就绪态）
+   ═══════════════════════════════════════ */
+
+/* ═══ 自动测量进度 ═══ */
+.auto-measure {
+  padding: 24px 20px 40px;
+}
+
+.auto-measure__header {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.auto-measure__title {
+  display: block;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--tx);
+  margin-bottom: 8px;
+}
+
+.auto-measure__subtitle {
+  display: block;
+  font-size: 14px;
+  color: var(--tx3);
+}
+
+.auto-measure__list {
+  background: var(--card);
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(45,42,38,0.06);
+  overflow: hidden;
+}
+
+.auto-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--bd);
+  transition: background 200ms ease;
+}
+
+.auto-item:last-child {
+  border-bottom: none;
+}
+
+.auto-item--active {
+  background: rgba(196,98,58,0.04);
+}
+
+.auto-item--done {
+  background: rgba(91,122,94,0.04);
+}
+
+.auto-item--error {
+  opacity: 0.6;
+}
+
+.auto-item__left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.auto-item__icon-wrap {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.auto-item--done .auto-item__icon-wrap {
+  background: var(--acc) !important;
+}
+
+.auto-item--error .auto-item__icon-wrap {
+  background: var(--tx3) !important;
+}
+
+.auto-item__icon {
+  font-size: 18px;
+  color: #fff;
+  font-weight: 700;
+}
+
+.auto-item__label {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--tx);
+}
+
+.auto-item__right {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.auto-item__value {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.auto-item__unit {
+  font-size: 13px;
+  color: var(--tx3);
+}
+
+.auto-item__status {
+  font-size: 14px;
+  color: var(--tx3);
+}
+
+.auto-item__status--active {
+  color: var(--pri);
+  font-weight: 600;
+}
+
+.auto-item__status--error {
+  color: var(--tx3);
+}
+
+/* ── 自动测量进度条 ── */
+.auto-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 24px;
+  padding: 0 4px;
+}
+
+.auto-progress__bar {
+  flex: 1;
+  height: 6px;
+  background: var(--bd);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.auto-progress__fill {
+  height: 100%;
+  background: var(--pri);
+  border-radius: 3px;
+  transition: width 0.5s ease-out;
+}
+
+.auto-progress__text {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--pri);
+  min-width: 36px;
+  text-align: right;
+}
+.measure-page {
+  min-height: 100vh;
+  padding-bottom: 40px;
+}
+
+/* ── 设备状态栏 ── */
+.device-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background: var(--card);
+  border-bottom: 1px solid var(--bd);
+}
+
+.device-bar__left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.device-bar__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--acc);
+}
+
+.device-bar__name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--tx);
+}
+
+.device-bar__battery {
+  font-size: 13px;
+  color: var(--tx3);
+  margin-left: 4px;
+}
+
+.device-bar__disconnect {
+  font-size: 13px;
+  color: var(--tx3);
+  padding: 6px 12px;
+  background: transparent;
+  border: 1px solid var(--bd);
+  border-radius: 999px;
+}
+
+/* ── 指标选择器（药丸式） ── */
+.selector {
+  display: flex;
+  white-space: nowrap;
+  padding: 16px 20px;
+  gap: 8px;
+}
+
+.selector__pill {
+  flex-shrink: 0;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 14px;
+  border-radius: 16px;
+  position: relative;
+  min-width: 64px;
+  transition: all 200ms ease;
+}
+
+.selector__pill--active {
+  background: var(--card);
+  box-shadow: 0 2px 12px rgba(45,42,38,0.10);
+}
+
+.selector__pill--done::after {
+  content: '✓';
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  font-size: 10px;
+  color: #fff;
+  background: var(--acc);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.selector__icon-wrap {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 200ms ease;
+}
+
+.selector__pill--active .selector__icon-wrap {
+  transform: scale(1.15);
+}
+
+.selector__icon {
+  font-size: 18px;
+  color: #fff;
+}
+
+.selector__label {
+  font-size: 13px;
+  color: var(--tx3);
+}
+
+.selector__pill--active .selector__label {
+  color: var(--tx);
+  font-weight: 600;
+}
+
+/* ── 仪表盘 ── */
+.gauge-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0 24px;
+}
+
+.gauge {
+  position: relative;
+}
+
+.gauge--measuring {
+  animation: gauge-breathe 2s ease-in-out infinite;
+}
+
+@keyframes gauge-breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.03); }
+}
+
+.gauge__ring-wrap {
+  position: relative;
+  width: 220px;
+  height: 220px;
+}
+
+.gauge__ring-bg {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 10px solid var(--bd);
+  box-sizing: border-box;
+}
+
+.gauge__ring-progress {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+
+.gauge__center {
+  position: absolute;
+  inset: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  border-radius: 50%;
+}
+
+.gauge__icon-lg {
+  font-size: 40px;
+  margin-bottom: 8px;
+}
+
+.gauge__hint {
+  font-size: 13px;
+  color: var(--tx3);
+  text-align: center;
+}
+
+.gauge__value {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 52px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.gauge__unit {
+  font-size: 14px;
+  color: var(--tx3);
+  margin-top: 4px;
+}
+
+.gauge__loading {
+  font-size: 16px;
+  color: var(--tx2);
+}
+
+.gauge__err {
+  font-size: 36px;
+  color: var(--dan);
+  font-weight: 700;
+}
+
+.gauge__err-text {
+  font-size: 13px;
+  color: var(--tx2);
+  text-align: center;
+}
+
+/* ── 进度条 ── */
+.progress-bar {
+  width: 240px;
+  height: 4px;
+  background: var(--bd);
+  border-radius: 2px;
+  margin-top: 16px;
+  overflow: hidden;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease-out;
+}
+
+/* ── 免责声明 ── */
+.disclaimer {
+  text-align: center;
+  padding: 0 20px;
+  margin-bottom: 16px;
+}
+
+.disclaimer__text {
+  font-size: 11px;
+  color: var(--tx3);
+  line-height: 1.5;
+}
+
+/* ── 操作按钮 ── */
+.actions {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.btn {
+  height: 52px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  transition: opacity 150ms;
+}
+
+.btn:active {
+  opacity: 0.85;
+}
+
+.btn--primary {
+  background: var(--pri);
+  color: #fff;
+  box-shadow: 0 4px 16px rgba(196,98,58,0.3);
+}
+
+.btn--secondary {
+  background: var(--card);
+  color: var(--tx);
+  border: 1px solid var(--bd);
+}
+
+.btn--text {
+  background: transparent;
+  color: var(--tx3);
+  height: 44px;
+  font-size: 14px;
+}
+
+/* ═══ 旧版兼容样式 ═══ */
+.btn-primary {
+  background: var(--pri);
+  color: #fff;
+  height: 52px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  box-shadow: 0 4px 16px rgba(196,98,58,0.3);
+}
+.btn-primary:active { opacity: 0.85; }
+
+.btn-secondary {
+  background: var(--card);
+  color: var(--tx);
+  height: 52px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  border: 1px solid var(--bd);
+}
+.btn-secondary:active { opacity: 0.85; }
+
+.btn-text {
+  background: transparent;
+  color: var(--tx3);
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.btn-large { margin: 0; }
+
+/* 旧版 header/selector/gauge 兼容 */
+.header { display: none; }
+.header-device { display: none; }
+.header-dot { display: none; }
+.header-name { display: none; }
+.header-battery { display: none; }
+.header-disconnect { display: none; }
+.selector-item { display: none; }
+.selector-icon { display: none; }
+.selector-label { display: none; }
+.selector-check { display: none; }
+.gauge-circle { display: none; }
+.gauge-icon { display: none; }
+.gauge-hint { display: none; }
+.gauge-value { display: none; }
+.gauge-loading { display: none; }
+.gauge-err { display: none; }
+.gauge-err-text { display: none; }
+.gauge-progress-bar { display: none; }
+.gauge-progress-fill { display: none; }
+.assessment { display: none; }
+.assessment-text { display: none; }
+.disclaimer-text { display: none; }
+.measure-error { display: none; }
+.measure-error-text { display: none; }
--- a/apps/miniprogram/package.json
+++ b/apps/miniprogram/package.json
@@ -4,9 +4,19 @@
  "private": true,
  "description": "HMS 健康管理平台患者小程序",
  "scripts": {
+    "generate-tokens": "tsx scripts/generate-tokens.ts",
    "build:weapp": "taro build --type weapp",
    "dev:weapp": "taro build --type weapp --watch",
-    "test:e2e": "vitest run --config e2e/vitest.config.ts"
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx}'",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx}'",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "vitest run --config e2e/vitest.config.ts",
+    "dev:h5": "dotenv -e .env.h5 -- taro build --type h5 --watch",
+    "build:h5": "dotenv -e .env.h5 -- taro build --type h5"
  },
  "browserslist": [
    "last 3 versions",
@@ -14,6 +24,8 @@
    "ios >= 8"
  ],
  "dependencies": {
+    "@noble/ciphers": "^1.0.0",
+    "@noble/hashes": "^1.8.0",
    "@tarojs/components": "4.2.0",
    "@tarojs/helper": "4.2.0",
    "@tarojs/plugin-framework-react": "4.2.0",
@@ -22,7 +34,9 @@
    "@tarojs/runtime": "4.2.0",
    "@tarojs/shared": "4.2.0",
    "@tarojs/taro": "4.2.0",
+    "mp-html": "^2.5.2",
    "react": "^18.3.0",
+    "react-dom": "18.3.1",
    "zustand": "^5.0.0"
  },
  "devDependencies": {
@@ -30,15 +44,28 @@
    "@babel/preset-react": "^7.28.5",
    "@babel/preset-typescript": "^7.28.5",
    "@babel/runtime": "^7.27.0",
+    "@eslint/js": "^9.0.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
    "@tarojs/cli": "4.2.0",
+    "@tarojs/plugin-platform-h5": "^4.2.0",
    "@tarojs/webpack5-runner": "4.2.0",
+    "@types/node": "^22.0.0",
    "@types/react": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
    "babel-preset-taro": "^4.2.0",
+    "dotenv-cli": "^11.0.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
    "miniprogram-automator": "^0.12.1",
+    "prettier": "^3.0.0",
+    "react-refresh": "^0.14.0",
    "sass": "^1.87.0",
    "typescript": "^5.8.0",
    "vite": "^8.0.10",
    "vitest": "^4.1.5",
    "webpack": "~5.95.0"
  }
-}
+}
--- a/apps/miniprogram/pnpm-lock.yaml
+++ b/apps/miniprogram/pnpm-lock.yaml
--- a/apps/miniprogram/project.config.json
+++ b/apps/miniprogram/project.config.json
@@ -14,7 +14,8 @@
    "minifyWXML": true,
    "packNpmManually": false,
    "packNpmRelationList": [],
-    "ignoreUploadUnusedFiles": true
+    "ignoreUploadUnusedFiles": true,
+    "skylineRenderEnable": false
  },
  "condition": {}
 }
--- a/apps/miniprogram/scripts/tests/generate-tokens.test.ts
+++ b/apps/miniprogram/scripts/tests/generate-tokens.test.ts
@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest';
+import {
+  parseTokensFromScss,
+  parseScssVariables,
+  resolveTokenValues,
+} from '../generate-tokens';
+
+describe('parseScssVariables', () => {
+  it('extracts SCSS variable declarations', () => {
+    const scss = '$pri: #C4623A;\n$bg: #F5F0EB;';
+    const vars = parseScssVariables(scss);
+    expect(vars).toEqual({ pri: '#C4623A', bg: '#F5F0EB' });
+  });
+
+  it('ignores comments and non-variable lines', () => {
+    const scss = '// comment\n$pri: #C4623A;';
+    const vars = parseScssVariables(scss);
+    expect(vars).toEqual({ pri: '#C4623A' });
+  });
+
+  it('handles values with spaces and units', () => {
+    const scss = '$shadow-sm: 0 1px 4px rgba(45, 42, 38, 0.06);\n$r: 16px;';
+    const vars = parseScssVariables(scss);
+    expect(vars['shadow-sm']).toBe('0 1px 4px rgba(45, 42, 38, 0.06)');
+    expect(vars['r']).toBe('16px');
+  });
+});
+
+describe('parseTokensFromScss', () => {
+  it('extracts --tk-* CSS variables from page selector', () => {
+    const scss = `page {
+  --tk-font-h1: 28px;
+  --tk-font-body: 16px;
+}`;
+    const tokens = parseTokensFromScss(scss, 'page');
+    expect(tokens).toEqual({ 'font-h1': '28px', 'font-body': '16px' });
+  });
+
+  it('extracts from class selector', () => {
+    const scss = `.elder-mode {
+  --tk-font-h1: 32px;
+}`;
+    const tokens = parseTokensFromScss(scss, '.elder-mode');
+    expect(tokens).toEqual({ 'font-h1': '32px' });
+  });
+
+  it('captures SCSS variable references as-is for later resolution', () => {
+    const scss = `page {
+  --tk-pri: #{$pri};
+  --tk-font-body: 16px;
+}`;
+    const tokens = parseTokensFromScss(scss, 'page');
+    expect(tokens['pri']).toBe('#{$pri}');
+    expect(tokens['font-body']).toBe('16px');
+  });
+
+  it('returns empty object when selector not found', () => {
+    const scss = `page { --tk-font-h1: 28px; }`;
+    const tokens = parseTokensFromScss(scss, '.nonexistent');
+    expect(tokens).toEqual({});
+  });
+});
+
+describe('resolveTokenValues', () => {
+  it('replaces SCSS variable references with actual values', () => {
+    const tokensScss = `page {
+  --tk-pri: #{$pri};
+}`;
+    const varsScss = '$pri: #C4623A;';
+    const result = resolveTokenValues(tokensScss, varsScss, 'page');
+    expect(result).toEqual({ pri: '#C4623A' });
+  });
+
+  it('handles plain values without SCSS references', () => {
+    const tokensScss = `page {
+  --tk-card-radius: 16px;
+  --tk-font-body: 16px;
+}`;
+    const varsScss = '$r: 16px;';
+    const result = resolveTokenValues(tokensScss, varsScss, 'page');
+    expect(result['card-radius']).toBe('16px');
+    expect(result['font-body']).toBe('16px');
+  });
+
+  it('handles multiple variable references', () => {
+    const tokensScss = `page {
+  --tk-pri: #{$pri};
+  --tk-pri-l: #{$pri-l};
+  --tk-font-body: 16px;
+}`;
+    const varsScss = '$pri: #C4623A;\n$pri-l: #F0DDD4;';
+    const result = resolveTokenValues(tokensScss, varsScss, 'page');
+    expect(result['pri']).toBe('#C4623A');
+    expect(result['pri-l']).toBe('#F0DDD4');
+    expect(result['font-body']).toBe('16px');
+  });
+});
--- a/apps/miniprogram/scripts/generate-tokens.ts
+++ b/apps/miniprogram/scripts/generate-tokens.ts
@@ -0,0 +1,133 @@
+// scripts/generate-tokens.ts
+// 从 src/styles/tokens.scss + variables.scss 解析 CSS 变量，
+// 输出 src/styles/token-values.ts 供 JS 运行时使用
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+interface TokenMap {
+  [key: string]: string;
+}
+
+/** 解析 SCSS 文件中的 CSS 变量声明 */
+function parseTokensFromScss(
+  scssContent: string,
+  selector: string = 'page',
+): TokenMap {
+  const tokens: TokenMap = {};
+  const blockRegex = new RegExp(
+    `${selector.replace('.', '\\.')}\\s*\\{([\\s\\S]+?)\\n\\}`,
+  );
+  const blockMatch = scssContent.match(blockRegex);
+  if (!blockMatch) return tokens;
+
+  const varRegex = /--tk-([\w-]+)\s*:\s*([^;]+);/g;
+  let match: RegExpExecArray | null;
+  while ((match = varRegex.exec(blockMatch[1])) !== null) {
+    tokens[match[1]] = match[2].trim();
+  }
+  return tokens;
+}
+
+/** 解析 SCSS 变量（如 $pri: #C4623A）用于替换 #{...} 引用 */
+function parseScssVariables(scssContent: string): Record<string, string> {
+  const vars: Record<string, string> = {};
+  const regex = /\$([\w-]+)\s*:\s*([^;]+);/g;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(scssContent)) !== null) {
+    vars[match[1]] = match[2].trim();
+  }
+  return vars;
+}
+
+/** 解析 tokens.scss，替换 SCSS 变量引用 */
+function resolveTokenValues(
+  tokensContent: string,
+  variablesContent: string,
+  selector: string,
+): TokenMap {
+  const scssVars = parseScssVariables(variablesContent);
+  const rawTokens = parseTokensFromScss(tokensContent, selector);
+  const resolved: TokenMap = {};
+  for (const [key, value] of Object.entries(rawTokens)) {
+    let resolvedValue = value;
+    resolvedValue = resolvedValue.replace(
+      /#\{\$([\w-]+)\}/g,
+      (_, varName) => scssVars[varName] || '',
+    );
+    resolved[key] = resolvedValue;
+  }
+  return resolved;
+}
+
+function generateTokenFile(
+  tokensPath: string,
+  variablesPath: string,
+  outputPath: string,
+): void {
+  const tokensContent = readFileSync(tokensPath, 'utf-8');
+  const variablesContent = readFileSync(variablesPath, 'utf-8');
+
+  const normalTokens = resolveTokenValues(
+    tokensContent,
+    variablesContent,
+    'page',
+  );
+  const elderTokens = resolveTokenValues(
+    tokensContent,
+    variablesContent,
+    '.elder-mode',
+  );
+  const doctorTokens = resolveTokenValues(
+    tokensContent,
+    variablesContent,
+    '.doctor-mode',
+  );
+
+  const output = `// Auto-generated by scripts/generate-tokens.ts — DO NOT EDIT
+// Generated at: ${new Date().toISOString()}
+
+export const TOKEN_VALUES = ${JSON.stringify(normalTokens, null, 2)} as const;
+
+export const ELDER_TOKEN_OVERRIDES = ${JSON.stringify(elderTokens, null, 2)} as const;
+
+export const DOCTOR_TOKEN_OVERRIDES = ${JSON.stringify(doctorTokens, null, 2)} as const;
+
+// Canvas 专用：字号（数字，单位 px）
+export const CANVAS_FONT_NORMAL = {
+  yLabel: 10,
+  xLabel: 10,
+  tooltip: 12,
+  pointNormal: 3,
+  pointAbnormal: 5,
+} as const;
+
+export const CANVAS_FONT_ELDER = {
+  yLabel: 14,
+  xLabel: 14,
+  tooltip: 16,
+  pointNormal: 5,
+  pointAbnormal: 8,
+} as const;
+`;
+
+  writeFileSync(outputPath, output, 'utf-8');
+  console.log(`[generate-tokens] Generated ${outputPath}`);
+  console.log(`  Normal: ${Object.keys(normalTokens).length} tokens`);
+  console.log(`  Elder: ${Object.keys(elderTokens).length} overrides`);
+  console.log(`  Doctor: ${Object.keys(doctorTokens).length} overrides`);
+}
+
+// CLI 入口
+if (process.argv[1]?.endsWith('generate-tokens.ts')) {
+  const root = resolve(__dirname, '..');
+  generateTokenFile(
+    resolve(root, 'src/styles/tokens.scss'),
+    resolve(root, 'src/styles/variables.scss'),
+    resolve(root, 'src/styles/token-values.ts'),
+  );
+}
+
+export { parseTokensFromScss, parseScssVariables, resolveTokenValues, generateTokenFile };
--- a/apps/miniprogram/src/app.config.ts
+++ b/apps/miniprogram/src/app.config.ts
@@ -1,15 +1,14 @@
 export default defineAppConfig({
+  ...(process.env.NODE_ENV === 'production' ? { lazyCodeLoading: 'requiredComponents' as const } : {}),
  pages: [
    'pages/index/index',
    'pages/login/index',
    'pages/health/index',
    'pages/messages/index',
    'pages/consultation/index',
+    'pages/consultation/create/index',
    'pages/mall/index',
    'pages/profile/index',
-    'pages/appointment/index',
-    'pages/appointment/create/index',
-    'pages/appointment/detail/index',
    'pages/legal/user-agreement',
    'pages/legal/privacy-policy',
  ],
@@ -20,6 +19,7 @@ export default defineAppConfig({
    },
    {
      root: 'pages/pkg-doctor-core',
+      independent: true,
      pages: [
        'index', 'patients/index', 'patients/detail/index',
        'consultation/index', 'consultation/detail/index',
@@ -29,6 +29,7 @@ export default defineAppConfig({
    },
    {
      root: 'pages/pkg-doctor-clinical',
+      independent: true,
      pages: [
        'dialysis/index', 'dialysis/detail/index', 'dialysis/create/index',
        'prescription/index', 'prescription/detail/index', 'prescription/create/index',
@@ -38,7 +39,7 @@ export default defineAppConfig({
    },
    {
      root: 'pages/pkg-mall',
-      pages: ['exchange/index', 'orders/index', 'detail/index'],
+      pages: ['exchange/index', 'orders/index', 'detail/index', 'product/index'],
    },
    {
      root: 'pages/pkg-profile',
@@ -48,7 +49,7 @@ export default defineAppConfig({
        'dialysis-records/index', 'dialysis-records/detail/index',
        'dialysis-prescriptions/index', 'dialysis-prescriptions/detail/index',
        'consents/index', 'health-records/index', 'diagnoses/index',
-        'elder-mode/index', 'events/index',
+        'elder-mode/index', 'events/index', 'notifications/index',
      ],
    },
    {
@@ -59,6 +60,10 @@ export default defineAppConfig({
      root: 'pages/article',
      pages: ['index', 'detail/index'],
    },
+    {
+      root: 'pages/appointment',
+      pages: ['index', 'create/index', 'detail/index'],
+    },
    {
      root: 'pages/pkg-consultation',
      pages: ['detail/index'],
@@ -72,10 +77,29 @@ export default defineAppConfig({
    list: [
      { pagePath: 'pages/index/index', text: '首页', iconPath: 'assets/tabbar/home.png', selectedIconPath: 'assets/tabbar/home-active.png' },
      { pagePath: 'pages/health/index', text: '健康', iconPath: 'assets/tabbar/health.png', selectedIconPath: 'assets/tabbar/health-active.png' },
-      { pagePath: 'pages/messages/index', text: '消息', iconPath: 'assets/tabbar/message.png', selectedIconPath: 'assets/tabbar/message-active.png' },
+      { pagePath: 'pages/mall/index', text: '商城', iconPath: 'assets/tabbar/mall.png', selectedIconPath: 'assets/tabbar/mall-active.png' },
+      { pagePath: 'pages/messages/index', text: '助手', iconPath: 'assets/tabbar/message.png', selectedIconPath: 'assets/tabbar/message-active.png' },
      { pagePath: 'pages/profile/index', text: '我的', iconPath: 'assets/tabbar/profile.png', selectedIconPath: 'assets/tabbar/profile-active.png' },
    ],
  },
+  preloadRule: {
+    'pages/index/index': {
+      network: 'all',
+      packages: ['pages/pkg-health', 'pages/article'],
+    },
+    'pages/health/index': {
+      network: 'all',
+      packages: ['pages/pkg-health'],
+    },
+    'pages/mall/index': {
+      network: 'all',
+      packages: ['pages/pkg-mall'],
+    },
+    'pages/consultation/index': {
+      network: 'all',
+      packages: ['pages/pkg-consultation'],
+    },
+  },
  window: {
    backgroundTextStyle: 'dark',
    navigationBarBackgroundColor: '#FFFFFF',
--- a/apps/miniprogram/src/app.tsx
+++ b/apps/miniprogram/src/app.tsx
@@ -1,9 +1,13 @@
+import './utils/crypto-polyfill';
+import './utils/abort-controller-polyfill';
 import { useEffect, useRef, PropsWithChildren } from 'react';
-import Taro, { useDidShow, useDidHide } from '@tarojs/taro';
+import { useDidShow, useDidHide } from '@tarojs/taro';
 import ErrorBoundary from './components/ErrorBoundary';
 import { flushEvents } from './services/analytics';
 import { useAuthStore } from './stores/auth';
 import { useUIStore } from './stores/ui';
+import { useAlertPolling } from './hooks/useAlertPolling';
+import { migrateLegacyStorage } from './utils/secure-storage';
 import './app.scss';

 function App({ children }: PropsWithChildren<Record<string, unknown>>) {
@@ -12,20 +16,23 @@ function App({ children }: PropsWithChildren<Record<string, unknown>>) {

  // useDidShow 在首次 mount 时也会触发，不需要 useEffect 重复调用
  useDidShow(() => {
+    migrateLegacyStorage();
    restoreAuth();
    restoreUI();
  });

+  // 告警轮询：登录态下自动监听 critical 告警
+  useAlertPolling();
+
  // 暴露全局 bridge 供 MCP/自动化测试调用（仅 dev 模式）
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') return;
-    (globalThis as any).__hms = {
+    (globalThis as Record<string, unknown>).__hms = {
      restoreAuth: () => { restoreAuth(); return useAuthStore.getState(); },
      restoreUI,
      getAuthState: () => useAuthStore.getState(),
-      forceSetAuth: (state: Record<string, unknown>) => useAuthStore.setState(state),
    };
-    return () => { delete (globalThis as any).__hms; };
+    return () => { delete (globalThis as Record<string, unknown>).__hms; };
  }, []);

  // Analytics 定时器：仅在页面可见时运行，后台时暂停以节省资源
--- a/apps/miniprogram/src/assets/tabbar/mall-active.png
+++ b/apps/miniprogram/src/assets/tabbar/mall-active.png
--- a/apps/miniprogram/src/assets/tabbar/mall.png
+++ b/apps/miniprogram/src/assets/tabbar/mall.png
--- a/apps/miniprogram/src/components/EmptyState/index.scss
+++ b/apps/miniprogram/src/components/EmptyState/index.scss
@@ -5,18 +5,18 @@
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  padding: 120px 40px;
+  padding: var(--tk-gap-2xl) var(--tk-gap-xl);
 }

 .empty-state-icon-wrap {
-  width: 120px;
-  height: 120px;
+  width: var(--tk-gap-2xl);
+  height: var(--tk-gap-2xl);
  border-radius: 50%;
  background: $surface-alt;
  display: flex;
  align-items: center;
  justify-content: center;
-  margin-bottom: 24px;
+  margin-bottom: var(--tk-gap-lg);
 }

 .empty-state-icon-char {
@@ -27,21 +27,21 @@
 }

 .empty-state-text {
-  font-size: var(--tk-font-num);
+  font-size: var(--tk-font-body-lg);
  color: $tx2;
-  margin-bottom: 8px;
+  margin-bottom: var(--tk-gap-xs);
 }

 .empty-state-hint {
-  font-size: var(--tk-font-h2);
+  font-size: var(--tk-font-body-sm);
  color: var(--tk-text-secondary);
-  margin-bottom: 32px;
+  margin-bottom: var(--tk-gap-xl);
 }

 .empty-state-action {
-  background: $pri;
+  background: var(--tk-pri);
  border-radius: 40px;
-  padding: 16px 48px;
+  padding: var(--tk-gap-md) var(--tk-gap-2xl);
 }

 .empty-state-action-text {
--- a/apps/miniprogram/src/components/EmptyState/index.tsx
+++ b/apps/miniprogram/src/components/EmptyState/index.tsx
@@ -19,7 +19,7 @@ export default React.memo(function EmptyState({
 }: EmptyStateProps) {
  const displayChar = icon || text.charAt(0);
  return (
-    <View className='empty-state'>
+    <View className='empty-state' role="status" aria-live="polite">
      <View className='empty-state-icon-wrap'>
        <Text className='empty-state-icon-char'>{displayChar}</Text>
      </View>
--- a/apps/miniprogram/src/components/ErrorBoundary/index.scss
+++ b/apps/miniprogram/src/components/ErrorBoundary/index.scss
@@ -13,7 +13,7 @@
  width: 64px;
  height: 64px;
  border-radius: 32px;
-  background: $pri-l;
+  background: var(--tk-pri-l);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -24,7 +24,7 @@
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-h1);
  font-weight: 600;
-  color: $pri-d;
+  color: var(--tk-pri-d);
 }

 .error-title {
@@ -41,7 +41,7 @@
 }

 .error-retry-btn {
-  background: $pri;
+  background: var(--tk-pri);
  border-radius: $r-sm;
  padding: 14px 48px;
 }
--- a/apps/miniprogram/src/components/ErrorBoundary/index.tsx
+++ b/apps/miniprogram/src/components/ErrorBoundary/index.tsx
@@ -1,27 +1,77 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { View, Text } from '@tarojs/components';
 import './index.scss';

 interface Props {
  children: React.ReactNode;
+  fallback?: React.ReactNode;
 }

 interface State {
  hasError: boolean;
+  retryCount: number;
+  errorCategory: ErrorCategory;
+}
+
+type ErrorCategory = 'network' | 'render' | 'unknown';
+
+const MAX_RETRIES = 3;
+
+function classifyError(error: Error): ErrorCategory {
+  const msg = error.message?.toLowerCase() || '';
+  if (
+    msg.includes('network') ||
+    msg.includes('fetch') ||
+    msg.includes('timeout') ||
+    msg.includes('request:fail')
+  ) {
+    return 'network';
+  }
+  if (
+    msg.includes('cannot read properties') ||
+    msg.includes('is not defined') ||
+    msg.includes('is not a function') ||
+    msg.includes('render')
+  ) {
+    return 'render';
+  }
+  return 'unknown';
+}
+
+function logError(error: Error, info: React.ErrorInfo, category: ErrorCategory): void {
+  const isDev = process.env.NODE_ENV === 'development';
+  const entry = {
+    ts: new Date().toISOString(),
+    category,
+    message: error.message,
+    stack: isDev ? error.stack : undefined,
+    componentStack: isDev ? info.componentStack : undefined,
+  };
+
+  if (isDev) {
+    console.error('[ErrorBoundary]', JSON.stringify(entry, null, 2));
+  } else {
+    console.error('[ErrorBoundary]', entry.ts, entry.category, entry.message);
+  }
 }

 export default class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
-    this.state = { hasError: false };
+    this.state = { hasError: false, retryCount: 0, errorCategory: 'unknown' };
  }

-  static getDerivedStateFromError(): State {
-    return { hasError: true };
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, errorCategory: classifyError(error) };
  }

  componentDidCatch(error: Error, info: React.ErrorInfo) {
-    console.error('[ErrorBoundary]', error, info.componentStack);
+    const category = classifyError(error);
+    logError(error, info, category);
+    this.setState((prev) => ({
+      retryCount: prev.retryCount + 1,
+      errorCategory: category,
+    }));
  }

  handleRetry = () => {
@@ -30,19 +80,31 @@ export default class ErrorBoundary extends Component<Props, State> {

  render() {
    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const exceeded = this.state.retryCount >= MAX_RETRIES;
+      const isNetwork = this.state.errorCategory === 'network';
+      const title = isNetwork ? '网络连接失败' : '页面出了点问题';
+      const desc = exceeded
+        ? '请重启小程序后重试'
+        : isNetwork
+          ? '请检查网络后重试'
+          : '请返回重试';
+
      return (
        <View className='error-boundary'>
          <View className='error-icon-wrap'>
            <Text className='error-icon-text'>!</Text>
          </View>
-          <Text className='error-title'>页面出了点问题</Text>
-          <Text className='error-desc'>请返回重试</Text>
-          <View
-            className='error-retry-btn'
-            onClick={this.handleRetry}
-          >
-            <Text className='error-retry-text'>重新加载</Text>
-          </View>
+          <Text className='error-title'>{title}</Text>
+          <Text className='error-desc'>{desc}</Text>
+          {!exceeded && (
+            <View className='error-retry-btn' onClick={this.handleRetry}>
+              <Text className='error-retry-text'>重新加载</Text>
+            </View>
+          )}
        </View>
      );
    }
--- a/apps/miniprogram/src/components/ErrorState/index.scss
+++ b/apps/miniprogram/src/components/ErrorState/index.scss
@@ -5,25 +5,25 @@
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  padding: 120px 40px;
+  padding: var(--tk-gap-2xl) var(--tk-gap-xl);
 }

 .error-state-icon {
  font-size: var(--tk-font-display);
-  margin-bottom: 24px;
+  margin-bottom: var(--tk-gap-lg);
 }

 .error-state-text {
  font-size: var(--tk-font-body-lg);
  color: $tx2;
-  margin-bottom: 32px;
+  margin-bottom: var(--tk-gap-xl);
  text-align: center;
 }

 .error-state-retry {
-  background: $pri;
+  background: var(--tk-pri);
  border-radius: 40px;
-  padding: 16px 48px;
+  padding: var(--tk-gap-md) var(--tk-gap-2xl);
 }

 .error-state-retry-text {
--- a/apps/miniprogram/src/components/ErrorState/index.tsx
+++ b/apps/miniprogram/src/components/ErrorState/index.tsx
@@ -12,7 +12,7 @@ export default React.memo(function ErrorState({
  onRetry,
 }: ErrorStateProps) {
  return (
-    <View className='error-state'>
+    <View className='error-state' role="alert" aria-live="assertive">
      <Text className='error-state-icon'>⚠️</Text>
      <Text className='error-state-text'>{text}</Text>
      {onRetry && (
--- a/apps/miniprogram/src/components/FrozenPage/index.scss
+++ b/apps/miniprogram/src/components/FrozenPage/index.scss
@@ -0,0 +1,48 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+.frozen-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.frozen-page-icon {
+  font-size: 48px;
+  margin-bottom: 24px;
+}
+
+.frozen-page-title {
+  font-size: var(--tk-font-h3);
+  font-weight: 600;
+  color: $tx;
+  margin-bottom: 12px;
+}
+
+.frozen-page-desc {
+  font-size: var(--tk-font-body);
+  color: $tx3;
+  margin-bottom: 32px;
+}
+
+.frozen-page-btn {
+  height: 44px;
+  padding: 0 32px;
+  border-radius: $r;
+  background: var(--tk-pri);
+  @include flex-center;
+
+  &:active {
+    opacity: var(--tk-touch-feedback-opacity);
+  }
+}
+
+.frozen-page-btn-text {
+  font-size: var(--tk-font-body);
+  font-weight: 500;
+  color: $white;
+}
--- a/apps/miniprogram/src/components/FrozenPage/index.tsx
+++ b/apps/miniprogram/src/components/FrozenPage/index.tsx
@@ -0,0 +1,22 @@
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import PageShell from '@/components/ui/PageShell';
+import './index.scss';
+
+export default function FrozenPage() {
+  return (
+    <PageShell scroll={false}>
+      <View className="frozen-page">
+        <Text className="frozen-page-icon">🚧</Text>
+        <Text className="frozen-page-title">功能即将上线</Text>
+        <Text className="frozen-page-desc">我们正在努力准备中，敬请期待</Text>
+        <View
+          className="frozen-page-btn"
+          onClick={() => Taro.navigateBack({ delta: 1 }).catch(() => Taro.switchTab({ url: '/pages/index/index' }))}
+        >
+          <Text className="frozen-page-btn-text">返回</Text>
+        </View>
+      </View>
+    </PageShell>
+  );
+}
--- a/apps/miniprogram/src/components/GuestGuard/index.scss
+++ b/apps/miniprogram/src/components/GuestGuard/index.scss
@@ -48,7 +48,7 @@
  display: inline-block;
  height: 48px;
  padding: 0 32px;
-  background: $pri;
+  background: var(--tk-pri);
  border-radius: $r-pill;
  @include flex-center;

--- a/apps/miniprogram/src/components/Loading/index.scss
+++ b/apps/miniprogram/src/components/Loading/index.scss
@@ -12,7 +12,7 @@
  width: 48px;
  height: 48px;
  border: 4px solid $bd;
-  border-top-color: $pri;
+  border-top-color: var(--tk-pri);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20px;
@@ -25,6 +25,15 @@
 }

 .loading-state-text {
-  font-size: var(--tk-font-h1);
+  font-size: var(--tk-font-body-sm);
  color: var(--tk-text-secondary);
 }
+
+.loading-state--end {
+  padding: 24px 0;
+
+  .loading-state-text {
+    color: var(--tk-text-tertiary);
+    font-size: var(--tk-caption);
+  }
+}
--- a/apps/miniprogram/src/components/Loading/index.tsx
+++ b/apps/miniprogram/src/components/Loading/index.tsx
@@ -7,9 +7,10 @@ interface LoadingProps {
 }

 export default React.memo(function Loading({ text = '加载中...' }: LoadingProps) {
+  const isListEnd = text !== '加载中...' && !text.includes('加载');
  return (
-    <View className='loading-state'>
-      <View className='loading-spinner' />
+    <View className={`loading-state ${isListEnd ? 'loading-state--end' : ''}`} role="status" aria-live="polite" aria-label="加载中">
+      {!isListEnd && <View className='loading-spinner' />}
      <Text className='loading-state-text'>{text}</Text>
    </View>
  );
--- a/apps/miniprogram/src/components/RichArticle/index.tsx
+++ b/apps/miniprogram/src/components/RichArticle/index.tsx
@@ -0,0 +1,54 @@
+import { memo, useMemo } from 'react';
+import { View } from '@tarojs/components';
+import { sanitizeHtml } from '@/utils/sanitize-html';
+
+interface RichArticleProps {
+  html: string;
+  className?: string;
+}
+
+const TAG_STYLE = JSON.stringify({
+  h1: 'font-size:20px;font-weight:700;color:#2D2A26;margin:16px 0 8px',
+  h2: 'font-size:18px;font-weight:700;color:#2D2A26;margin:16px 0 8px',
+  h3: 'font-size:16px;font-weight:700;color:#2D2A26;margin:16px 0 8px',
+  h4: 'font-size:15px;font-weight:600;color:#2D2A26;margin:12px 0 6px',
+  p: 'font-size:16px;color:#2D2A26;line-height:1.85;margin-bottom:12px',
+  ul: 'padding-left:20px;margin:8px 0;font-size:16px;line-height:1.9;color:#2D2A26',
+  ol: 'padding-left:20px;margin:8px 0;font-size:16px;line-height:1.9;color:#2D2A26',
+  li: 'margin-bottom:4px',
+  blockquote: 'border-left:3px solid #C4623A;padding:6px 12px;color:#5A554F;margin:12px 0',
+  strong: 'font-weight:700;color:#2D2A26',
+  em: 'font-style:italic',
+  code: 'background:#F5F0EB;padding:2px 6px;border-radius:4px;font-size:14px;color:#C4623A',
+  pre: 'background:#F5F0EB;padding:12px;border-radius:8px;margin:14px 0;overflow-x:auto',
+  table: 'width:100%;border-collapse:collapse;margin:8px 0;font-size:14px',
+  th: 'border:1px solid #E8E2DC;padding:6px 8px;background:#FAF8F5;font-weight:600;text-align:left',
+  td: 'border:1px solid #E8E2DC;padding:6px 8px',
+  hr: 'border:none;border-top:1px dashed #D1D5DB;margin:14px 0',
+  img: 'max-width:100%;border-radius:8px;margin:8px 0;display:block',
+  a: 'color:#C4623A;text-decoration:none',
+});
+
+function prepareHtml(raw: string): string {
+  return sanitizeHtml(raw);
+}
+
+function RichArticle({ html, className }: RichArticleProps) {
+  const content = useMemo(() => prepareHtml(html), [html]);
+
+  if (!content) return null;
+
+  return (
+    <View className={className}>
+      <mp-html
+        content={content}
+        lazy-load
+        selectable
+        container-style="font-size:16px;color:#5A554F;line-height:1.8;word-break:break-word"
+        tag-style={TAG_STYLE}
+      />
+    </View>
+  );
+}
+
+export default memo(RichArticle);
--- a/apps/miniprogram/src/components/SegmentTabs/index.scss
+++ b/apps/miniprogram/src/components/SegmentTabs/index.scss
@@ -15,9 +15,11 @@
      justify-content: center;
      position: relative;

+      @include focus-ring;
+
      &--active {
        .seg-tab__text {
-          color: $pri;
+          color: var(--tk-pri);
          font-weight: bold;
        }

@@ -28,7 +30,7 @@
          left: 30%;
          right: 30%;
          height: 4px;
-          background: $pri;
+          background: var(--tk-pri);
          border-radius: $r-xs;
        }
      }
@@ -41,26 +43,35 @@
  }

  &--pill {
-    gap: 12px;
-    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: var(--tk-section-gap);

    .seg-tab {
-      padding: 8px 24px;
-      border-radius: $r-pill;
+      flex: 1;
+      height: 44px;
+      border-radius: $r-sm;
      background: $surface-alt;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+
+      @include focus-ring;

      &--active {
-        background: $pri;
+        background: var(--tk-pri);
+        box-shadow: var(--tk-shadow-tab);

        .seg-tab__text {
-          color: $card;
-          font-weight: bold;
+          color: $white;
+          font-weight: 600;
        }
      }
    }

    .seg-tab__text {
-      font-size: var(--tk-font-body-lg);
+      font-size: 15px;
+      font-weight: 600;
      color: $tx2;
    }
  }
--- a/apps/miniprogram/src/components/SegmentTabs/index.tsx
+++ b/apps/miniprogram/src/components/SegmentTabs/index.tsx
@@ -3,12 +3,12 @@ import { View, Text } from '@tarojs/components';
 import './index.scss';

 interface Tab {
-  key: string;
-  label: string;
+  readonly key: string;
+  readonly label: string;
 }

 interface SegmentTabsProps {
-  tabs: Tab[];
+  tabs: readonly Tab[];
  activeKey: string;
  onChange: (key: string) => void;
  variant?: 'underline' | 'pill';
@@ -21,11 +21,13 @@ export default React.memo(function SegmentTabs({
  variant = 'underline',
 }: SegmentTabsProps) {
  return (
-    <View className={`seg-tabs seg-tabs--${variant}`}>
+    <View className={`seg-tabs seg-tabs--${variant}`} role="tablist">
      {tabs.map((tab) => (
        <View
          key={tab.key}
          className={`seg-tab ${activeKey === tab.key ? 'seg-tab--active' : ''}`}
+          role="tab"
+          aria-selected={activeKey === tab.key}
          onClick={() => onChange(tab.key)}
        >
          <Text className='seg-tab__text'>{tab.label}</Text>
--- a/apps/miniprogram/src/components/StepIndicator/index.scss
+++ b/apps/miniprogram/src/components/StepIndicator/index.scss
@@ -44,7 +44,7 @@
  z-index: 1;

  &.step-current {
-    background: $pri;
+    background: var(--tk-pri);
    color: white;
  }

@@ -61,7 +61,7 @@
  text-align: center;

  &.step-current {
-    color: $pri;
+    color: var(--tk-pri);
    font-weight: bold;
  }

--- a/apps/miniprogram/src/components/TrendChart/index.scss
+++ b/apps/miniprogram/src/components/TrendChart/index.scss
@@ -45,3 +45,33 @@
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
 }
+
+// ── Tooltip ──
+
+.trend-tooltip {
+  position: absolute;
+  transform: translateX(-50%);
+  background: rgba(15, 23, 42, 0.9);
+  padding: 6px 12px;
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+
+  .elder-mode & {
+    padding: 12px 16px;
+    border-radius: 8px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.trend-tooltip-text {
+  font-size: 12px;
+  color: #fff;
+
+  .elder-mode & {
+    font-size: var(--tk-font-body-sm);
+  }
+}
--- a/apps/miniprogram/src/components/TrendChart/index.tsx
+++ b/apps/miniprogram/src/components/TrendChart/index.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import { Canvas, View, Text } from '@tarojs/components';
 import Taro from '@tarojs/taro';
+import { useCanvasTokens } from '@/hooks/useCanvasTokens';
 import './index.scss';

+/** Canvas 2D 上下文类型 — 微信小程序 Canvas 2d 接口 */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type CanvasRenderingContext2D = any;
+
 interface TrendChartProps {
  data: { date: string; value: number }[];
  referenceMin?: number;
@@ -40,7 +45,28 @@ export default React.memo(function TrendChart({
  unit = '',
  height = 500,
 }: TrendChartProps) {
+  const tokens = useCanvasTokens();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const canvasRef = useRef<any>(null);
+  const [tooltip, setTooltip] = useState<{ date: string; value: number; x: number } | null>(null);
+
+  // 关怀模式默认显示最后一个数据点 tooltip
+  useEffect(() => {
+    if (tokens.yLabelFontSize >= 14 && data && data.length > 0 && canvasRef.current) {
+      const dpr = getDPR();
+      const w = canvasRef.current.width / dpr;
+      const pad = { left: 45, right: 15 };
+      const cw = w - pad.left - pad.right;
+      const lastIdx = data.length - 1;
+      setTooltip({
+        date: data[lastIdx].date,
+        value: data[lastIdx].value,
+        x: pad.left + (lastIdx / Math.max(data.length - 1, 1)) * cw,
+      });
+    } else if (tokens.yLabelFontSize < 14) {
+      setTooltip(null);
+    }
+  }, [data, tokens.yLabelFontSize]);

  const draw = useCallback(() => {
    const node = canvasRef.current;
@@ -77,12 +103,29 @@ export default React.memo(function TrendChart({
    if (referenceMin != null && referenceMax != null) {
      const ry1 = toY(referenceMax);
      const ry2 = toY(referenceMin);
-      ctx.fillStyle = 'rgba(5,150,105,0.08)';
+      ctx.fillStyle = tokens.referenceBandColor;
      ctx.fillRect(pad.left, ry1, cw, ry2 - ry1);
+
+      // 关怀模式增加斜线纹理增强区分度
+      if (tokens.yLabelFontSize >= 14) {
+        ctx.save();
+        ctx.strokeStyle = 'rgba(5,150,105,0.18)';
+        ctx.lineWidth = 1;
+        const step = 8;
+        ctx.beginPath();
+        for (let x = pad.left; x < pad.left + cw; x += step) {
+          const x1 = Math.min(x, pad.left + cw);
+          const x2 = Math.min(x + (ry2 - ry1), pad.left + cw);
+          ctx.moveTo(x1, ry2);
+          ctx.lineTo(x2, ry1);
+        }
+        ctx.stroke();
+        ctx.restore();
+      }
    }

    // Grid lines
-    ctx.strokeStyle = '#F3F4F6';
+    ctx.strokeStyle = tokens.gridColor;
    ctx.lineWidth = 1;
    const gridLines = 4;
    for (let i = 0; i <= gridLines; i++) {
@@ -94,8 +137,8 @@ export default React.memo(function TrendChart({
    }

    // Y-axis labels
-    ctx.fillStyle = '#94A3B8';
-    ctx.font = '10px sans-serif';
+    ctx.fillStyle = tokens.tx2;
+    ctx.font = `${tokens.yLabelFontSize}px sans-serif`;
    ctx.textAlign = 'right';
    for (let i = 0; i <= gridLines; i++) {
      const val = yMax - (yTotal / gridLines) * i;
@@ -104,6 +147,7 @@ export default React.memo(function TrendChart({
    }

    // X-axis labels
+    ctx.font = `${tokens.xLabelFontSize}px sans-serif`;
    ctx.textAlign = 'center';
    const step = Math.max(1, Math.floor(data.length / 5));
    for (let i = 0; i < data.length; i += step) {
@@ -125,13 +169,13 @@ export default React.memo(function TrendChart({
    ctx.lineTo(chartPoints[chartPoints.length - 1].x, toY(yMin));
    ctx.closePath();
    const grad = ctx.createLinearGradient(0, pad.top, 0, pad.top + ch);
-    grad.addColorStop(0, 'rgba(8,145,178,0.15)');
-    grad.addColorStop(1, 'rgba(8,145,178,0.01)');
+    grad.addColorStop(0, tokens.areaGradientStart);
+    grad.addColorStop(1, tokens.areaGradientEnd);
    ctx.fillStyle = grad;
    ctx.fill();

    // Line
-    ctx.strokeStyle = '#0891B2';
+    ctx.strokeStyle = tokens.lineColor;
    ctx.lineWidth = 2;
    drawLine(ctx, chartPoints);

@@ -142,13 +186,33 @@ export default React.memo(function TrendChart({
        (referenceMin != null && d.value < referenceMin) ||
        (referenceMax != null && d.value > referenceMax);
      ctx.beginPath();
-      ctx.arc(chartPoints[i].x, chartPoints[i].y, isAbnormal ? 5 : 3, 0, Math.PI * 2);
-      ctx.fillStyle = isAbnormal ? '#DC2626' : '#0891B2';
+      ctx.arc(chartPoints[i].x, chartPoints[i].y, isAbnormal ? tokens.pointAbnormalRadius : tokens.pointNormalRadius, 0, Math.PI * 2);
+      ctx.fillStyle = isAbnormal ? tokens.abnormalColor : tokens.lineColor;
      ctx.fill();
    }

    ctx.restore();
-  }, [data, referenceMin, referenceMax]);
+  }, [data, referenceMin, referenceMax, tokens]);
+
+  const handleTouchStart = useCallback((e: { touches: Array<{ x: number }> }) => {
+    if (!data || data.length === 0 || !canvasRef.current) return;
+    const touch = e.touches[0];
+    const node = canvasRef.current;
+    const dpr = getDPR();
+    const x = touch.x;
+    const w = node.width / dpr;
+    const pad = { left: 45, right: 15 };
+    const cw = w - pad.left - pad.right;
+    const relX = x - pad.left;
+    const idx = Math.round((relX / cw) * (data.length - 1));
+    if (idx >= 0 && idx < data.length) {
+      setTooltip({
+        date: data[idx].date,
+        value: data[idx].value,
+        x: pad.left + (idx / Math.max(data.length - 1, 1)) * cw,
+      });
+    }
+  }, [data]);

  useEffect(() => {
    const query = Taro.createSelectorQuery();
@@ -160,7 +224,6 @@ export default React.memo(function TrendChart({
        if (!node) return;
        canvasRef.current = node;
        const sysInfo = Taro.getSystemInfoSync();
-        const canvasW = (sysInfo.windowWidth * 750) / sysInfo.windowWidth;
        node.width = sysInfo.windowWidth * getDPR();
        node.height = ((height / 750) * sysInfo.windowWidth) * getDPR();
        draw();
@@ -181,7 +244,20 @@ export default React.memo(function TrendChart({
        type='2d'
        id='trend-chart-canvas'
        style={{ width: '100%', height: '100%' }}
+        onTouchStart={handleTouchStart}
      />
+      {tooltip && (
+        <View
+          className='trend-tooltip'
+          role="tooltip"
+          aria-live="polite"
+          style={{ left: `${tooltip.x}px`, top: '8px' }}
+        >
+          <Text className='trend-tooltip-text'>
+            {tooltip.date}: {tooltip.value}{unit ? ` ${unit}` : ''}
+          </Text>
+        </View>
+      )}
    </View>
  );
 });
--- a/apps/miniprogram/src/components/WeekCalendar/index.scss
+++ b/apps/miniprogram/src/components/WeekCalendar/index.scss
@@ -15,7 +15,7 @@

 .week-arrow {
  font-size: var(--tk-font-body-lg);
-  color: $pri;
+  color: var(--tk-pri);
  padding: 0 16px;
 }

@@ -52,7 +52,7 @@
 }

 .cell-today {
-  color: $pri;
+  color: var(--tk-pri);
  font-weight: bold;
 }

@@ -68,7 +68,7 @@
 }

 .cell-selected {
-  background: $pri;
+  background: var(--tk-pri);
  border-radius: $r-sm;

  .cell-date { color: white; }
--- a/apps/miniprogram/src/components/patterns/CardList/index.scss
+++ b/apps/miniprogram/src/components/patterns/CardList/index.scss
@@ -0,0 +1,12 @@
+.card-list {
+  display: flex;
+  flex-direction: column;
+
+  &--sm {
+    gap: var(--tk-gap-sm);
+  }
+
+  &--md {
+    gap: var(--tk-gap-md);
+  }
+}
--- a/apps/miniprogram/src/components/patterns/CardList/index.tsx
+++ b/apps/miniprogram/src/components/patterns/CardList/index.tsx
@@ -0,0 +1,62 @@
+import { View } from '@tarojs/components';
+import { ReactNode } from 'react';
+import EmptyState from '../../EmptyState';
+import ErrorState from '../../ErrorState';
+import LoadingCard from '../../ui/LoadingCard';
+import './index.scss';
+
+interface CardListProps<T> {
+  items: T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  keyExtractor: (item: T) => string;
+  loading?: boolean;
+  error?: string | null;
+  emptyText?: string;
+  emptyAction?: { text: string; onPress: () => void };
+  gap?: 'sm' | 'md';
+}
+
+function CardList<T>({
+  items,
+  renderItem,
+  keyExtractor,
+  loading = false,
+  error = null,
+  emptyText = '暂无数据',
+  emptyAction,
+  gap = 'md',
+}: CardListProps<T>) {
+  if (loading) {
+    return <LoadingCard count={3} layout="card" />;
+  }
+
+  if (error) {
+    return (
+      <ErrorState
+        text={error}
+      />
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <EmptyState
+        text={emptyText}
+        actionText={emptyAction?.text}
+        onAction={emptyAction?.onPress}
+      />
+    );
+  }
+
+  return (
+    <View className={`card-list card-list--${gap}`}>
+      {items.map((item, index) => (
+        <View key={keyExtractor(item)} className="card-list__item">
+          {renderItem(item, index)}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export default CardList;
--- a/apps/miniprogram/src/components/patterns/PageHeader/index.scss
+++ b/apps/miniprogram/src/components/patterns/PageHeader/index.scss
@@ -0,0 +1,56 @@
+@import '../../../styles/variables.scss';
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 var(--tk-page-padding);
+  background: $bg;
+  border-bottom: 1px solid $bd-l;
+  z-index: 10;
+
+  &--sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: var(--tk-gap-xs);
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__back {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 44px;
+  }
+
+  &__back-icon {
+    font-size: var(--tk-font-h2);
+    color: var(--tk-pri);
+    line-height: 1;
+  }
+
+  &__title {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-size: var(--tk-font-nav);
+    font-weight: 700;
+    color: $tx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: var(--tk-gap-sm);
+    flex-shrink: 0;
+  }
+}
--- a/apps/miniprogram/src/components/patterns/PageHeader/index.tsx
+++ b/apps/miniprogram/src/components/patterns/PageHeader/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { ReactNode } from 'react';
+import './index.scss';
+
+interface PageHeaderProps {
+  title: string;
+  showBack?: boolean;
+  onBack?: () => void;
+  rightActions?: ReactNode;
+  sticky?: boolean;
+}
+
+const PageHeader: React.FC<PageHeaderProps> = ({
+  title,
+  showBack = true,
+  onBack,
+  rightActions,
+  sticky = true,
+}) => {
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      Taro.navigateBack({ delta: 1 }).catch(() => {
+        Taro.switchTab({ url: '/pages/index/index' });
+      });
+    }
+  };
+
+  const cls = [
+    'page-header',
+    sticky && 'page-header--sticky',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <View className={cls}>
+      <View className="page-header__left">
+        {showBack && (
+          <View className="page-header__back" onClick={handleBack}>
+            <Text className="page-header__back-icon">‹</Text>
+          </View>
+        )}
+        <Text className="page-header__title">{title}</Text>
+      </View>
+      {rightActions && (
+        <View className="page-header__right">{rightActions}</View>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(PageHeader);
--- a/apps/miniprogram/src/components/patterns/PaginationBar/index.scss
+++ b/apps/miniprogram/src/components/patterns/PaginationBar/index.scss
@@ -0,0 +1,38 @@
+@import '../../../styles/variables.scss';
+
+.pagination-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tk-gap-md);
+  padding: var(--tk-gap-md) 0;
+
+  &__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--tk-gap-xs) var(--tk-section-gap);
+    border-radius: $r-sm;
+    background: var(--tk-card-bg);
+    border: 1px solid $bd;
+    font-size: var(--tk-font-body-sm);
+    color: $tx;
+    min-height: var(--tk-touch-min);
+
+    &:active:not(&--disabled) {
+      background: $bd-l;
+    }
+
+    &--disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+
+  &__info {
+    font-size: var(--tk-font-body-sm);
+    color: $tx2;
+    min-width: 60px;
+    text-align: center;
+  }
+}
--- a/apps/miniprogram/src/components/patterns/PaginationBar/index.tsx
+++ b/apps/miniprogram/src/components/patterns/PaginationBar/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+interface PaginationBarProps {
+  current: number;
+  total: number;
+  pageSize: number;
+  onChange: (page: number) => void;
+}
+
+const PaginationBar: React.FC<PaginationBarProps> = ({
+  current,
+  total,
+  pageSize,
+  onChange,
+}) => {
+  const totalPages = Math.ceil(total / pageSize);
+
+  if (totalPages <= 1) return null;
+
+  const hasPrev = current > 1;
+  const hasNext = current < totalPages;
+
+  return (
+    <View className="pagination-bar">
+      <View
+        className={`pagination-bar__btn ${!hasPrev ? 'pagination-bar__btn--disabled' : ''}`}
+        onClick={() => hasPrev && onChange(current - 1)}
+      >
+        <Text>上一页</Text>
+      </View>
+      <Text className="pagination-bar__info">
+        {current} / {totalPages}
+      </Text>
+      <View
+        className={`pagination-bar__btn ${!hasNext ? 'pagination-bar__btn--disabled' : ''}`}
+        onClick={() => hasNext && onChange(current + 1)}
+      >
+        <Text>下一页</Text>
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(PaginationBar);
--- a/apps/miniprogram/src/components/patterns/SearchSection/index.scss
+++ b/apps/miniprogram/src/components/patterns/SearchSection/index.scss
@@ -0,0 +1,37 @@
+@import '../../../styles/variables.scss';
+
+.search-section {
+  margin-bottom: var(--tk-gap-md);
+
+  &__input-wrap {
+    display: flex;
+    align-items: center;
+    gap: var(--tk-gap-xs);
+    background: var(--tk-card-bg);
+    border-radius: var(--tk-card-radius);
+    padding: 0 var(--tk-gap-md);
+    height: var(--tk-input-height);
+    box-shadow: $shadow-sm;
+  }
+
+  &__icon {
+    font-size: var(--tk-font-body-sm);
+    flex-shrink: 0;
+  }
+
+  &__input {
+    flex: 1;
+    font-size: var(--tk-font-body);
+    color: $tx;
+    height: 100%;
+  }
+
+  &__placeholder {
+    color: $tx3;
+    font-size: var(--tk-font-body);
+  }
+
+  &__filters {
+    margin-top: var(--tk-gap-sm);
+  }
+}
--- a/apps/miniprogram/src/components/patterns/SearchSection/index.tsx
+++ b/apps/miniprogram/src/components/patterns/SearchSection/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Input, Text } from '@tarojs/components';
+import SegmentTabs from '../../SegmentTabs';
+import './index.scss';
+
+interface SearchSectionProps {
+  value: string;
+  onChange: (v: string) => void;
+  onSearch?: () => void;
+  placeholder?: string;
+  filters?: { key: string; label: string }[];
+  activeFilter?: string;
+  onFilterChange?: (key: string) => void;
+}
+
+const SearchSection: React.FC<SearchSectionProps> = ({
+  value,
+  onChange,
+  onSearch,
+  placeholder = '搜索...',
+  filters,
+  activeFilter,
+  onFilterChange,
+}) => {
+  return (
+    <View className="search-section">
+      <View className="search-section__input-wrap">
+        <Text className="search-section__icon">🔍</Text>
+        <Input
+          className="search-section__input"
+          value={value}
+          onInput={(e) => onChange(e.detail.value)}
+          onConfirm={onSearch}
+          placeholder={placeholder}
+          placeholderClass="search-section__placeholder"
+          confirmType="search"
+        />
+      </View>
+      {filters && filters.length > 0 && (
+        <View className="search-section__filters">
+          <SegmentTabs
+            tabs={filters.map((f) => ({ key: f.key, label: f.label }))}
+            activeKey={activeFilter ?? filters[0]?.key ?? ''}
+            onChange={onFilterChange ?? (() => {})}
+            variant="pill"
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(SearchSection);
--- a/apps/miniprogram/src/components/ui/AiHealthSummaryCard/index.scss
+++ b/apps/miniprogram/src/components/ui/AiHealthSummaryCard/index.scss
@@ -0,0 +1,100 @@
+.ai-summary-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.ai-summary-title {
+  font-size: var(--tk-font-size-body-lg, 18px);
+  font-weight: 600;
+  color: var(--tk-color-text, #333);
+}
+
+.ai-summary-risk {
+  padding: 4px 16px;
+  border-radius: 100px;
+
+  &-text {
+    font-size: var(--tk-font-size-cap, 13px);
+    color: #fff;
+    font-weight: 500;
+  }
+}
+
+.ai-summary-insight {
+  margin-bottom: 24px;
+
+  &-label {
+    font-size: var(--tk-font-size-cap, 13px);
+    color: var(--tk-color-text-secondary, #999);
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  &-text {
+    font-size: var(--tk-font-size-body, 16px);
+    color: var(--tk-color-text, #333);
+    line-height: 1.5;
+  }
+}
+
+.ai-summary-stats {
+  display: flex;
+  gap: 40px;
+  margin-bottom: 24px;
+}
+
+.ai-summary-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--tk-color-primary, #1890ff);
+  }
+
+  &-label {
+    font-size: var(--tk-font-size-cap, 13px);
+    color: var(--tk-color-text-secondary, #999);
+    margin-top: 4px;
+  }
+}
+
+.ai-summary-items {
+  border-top: 1px solid var(--tk-color-border, #f0f0f0);
+  padding-top: 20px;
+}
+
+.ai-summary-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 0;
+
+  &-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &-title {
+    font-size: var(--tk-font-size-body-sm, 14px);
+    color: var(--tk-color-text, #333);
+    line-height: 1.4;
+  }
+}
+
+.ai-summary-loading {
+  display: flex;
+  justify-content: center;
+  padding: 32px 0;
+
+  &-text {
+    font-size: var(--tk-font-size-body-sm, 14px);
+    color: var(--tk-color-text-secondary, #999);
+  }
+}
--- a/apps/miniprogram/src/components/ui/AiHealthSummaryCard/index.tsx
+++ b/apps/miniprogram/src/components/ui/AiHealthSummaryCard/index.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text } from '@tarojs/components';
+import ContentCard from '../ContentCard';
+import { getHealthSummary, type HealthSummary } from '../../../services/ai-analysis';
+import './index.scss';
+
+interface AiHealthSummaryCardProps {
+  patientId: string;
+}
+
+const RISK_COLORS: Record<string, string> = {
+  critical: 'var(--tk-color-danger, #ff4d4f)',
+  high: 'var(--tk-color-warning, #faad14)',
+  medium: 'var(--tk-color-info, #1890ff)',
+  low: 'var(--tk-color-success, #52c41a)',
+};
+
+const RISK_LABELS: Record<string, string> = {
+  critical: '高风险',
+  high: '较高风险',
+  medium: '中等风险',
+  low: '低风险',
+};
+
+const AiHealthSummaryCard: React.FC<AiHealthSummaryCardProps> = ({ patientId }) => {
+  const [summary, setSummary] = useState<HealthSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!patientId) return;
+    setLoading(true);
+    getHealthSummary(patientId)
+      .then((data) => setSummary(data))
+      .catch(() => setSummary(null))
+      .finally(() => setLoading(false));
+  }, [patientId]);
+
+  if (loading) {
+    return (
+      <ContentCard>
+        <View className='ai-summary-loading'>
+          <Text className='ai-summary-loading-text'>AI 健康摘要加载中...</Text>
+        </View>
+      </ContentCard>
+    );
+  }
+
+  if (!summary) return null;
+
+  const riskColor = RISK_COLORS[summary.risk_level] || RISK_COLORS.low;
+  const riskLabel = RISK_LABELS[summary.risk_level] || '低风险';
+
+  return (
+    <ContentCard>
+      <View className='ai-summary-header'>
+        <Text className='ai-summary-title'>AI 健康摘要</Text>
+        <View className='ai-summary-risk' style={{ backgroundColor: riskColor }}>
+          <Text className='ai-summary-risk-text'>{riskLabel}</Text>
+        </View>
+      </View>
+
+      {summary.latest_insight_title && (
+        <View className='ai-summary-insight'>
+          <Text className='ai-summary-insight-label'>最新洞察</Text>
+          <Text className='ai-summary-insight-text'>{summary.latest_insight_title}</Text>
+        </View>
+      )}
+
+      <View className='ai-summary-stats'>
+        <View className='ai-summary-stat'>
+          <Text className='ai-summary-stat-value'>{summary.active_insights_count}</Text>
+          <Text className='ai-summary-stat-label'>活跃洞察</Text>
+        </View>
+        <View className='ai-summary-stat'>
+          <Text className='ai-summary-stat-value'>{summary.recent_analyses_count}</Text>
+          <Text className='ai-summary-stat-label'>AI 分析</Text>
+        </View>
+      </View>
+
+      {summary.summary_items.length > 0 && (
+        <View className='ai-summary-items'>
+          {summary.summary_items.slice(0, 3).map((item, idx) => (
+            <View key={idx} className='ai-summary-item'>
+              <View
+                className='ai-summary-item-dot'
+                style={{ backgroundColor: item.severity ? (RISK_COLORS[item.severity] || riskColor) : riskColor }}
+              />
+              <Text className='ai-summary-item-title'>{item.title}</Text>
+            </View>
+          ))}
+        </View>
+      )}
+    </ContentCard>
+  );
+};
+
+export default React.memo(AiHealthSummaryCard);
--- a/apps/miniprogram/src/components/ui/AlertCard/index.scss
+++ b/apps/miniprogram/src/components/ui/AlertCard/index.scss
@@ -0,0 +1,52 @@
+@import '../../../styles/variables.scss';
+
+.alert-card {
+  border-radius: $r;
+  padding: var(--tk-gap-lg);
+  margin-bottom: var(--tk-gap-md);
+
+  // 渐变型 — 智能提醒
+  &--gradient {
+    background: linear-gradient(135deg, var(--tk-pri) 0%, var(--tk-pri-d) 100%);
+    color: $white;
+  }
+
+  // 左边框型 — AI 建议
+  &--left-border {
+    background: $acc-l;
+    border-left: 4px solid $acc;
+  }
+
+  // 全边框型 — 温馨提示
+  &--bordered {
+    background: $wrn-l;
+    border-radius: $r-sm;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--tk-gap-xs);
+  }
+
+  &__title {
+    font-size: var(--tk-font-body);
+    font-weight: 600;
+  }
+
+  &--left-border &__title {
+    color: $acc;
+  }
+
+  &__subtitle {
+    font-size: var(--tk-font-micro);
+    opacity: 0.7;
+  }
+
+  &__body {
+    font-size: var(--tk-font-cap);
+    color: $tx2;
+    line-height: 1.6;
+  }
+}
--- a/apps/miniprogram/src/components/ui/AlertCard/index.tsx
+++ b/apps/miniprogram/src/components/ui/AlertCard/index.tsx
@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+type AlertVariant = 'gradient' | 'left-border' | 'bordered';
+
+interface AlertCardProps {
+  variant?: AlertVariant;
+  title?: string;
+  subtitle?: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+const AlertCard: React.FC<AlertCardProps> = ({
+  variant = 'left-border',
+  title,
+  subtitle,
+  children,
+  className = '',
+}) => {
+  const cls = [
+    'alert-card',
+    `alert-card--${variant}`,
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <View className={cls}>
+      {title && (
+        <View className='alert-card__header'>
+          <Text className='alert-card__title'>{title}</Text>
+          {subtitle && <Text className='alert-card__subtitle'>{subtitle}</Text>}
+        </View>
+      )}
+      {children ?? <Text className='alert-card__body'>{subtitle}</Text>}
+    </View>
+  );
+};
+
+export default React.memo(AlertCard);
--- a/apps/miniprogram/src/components/ui/AvatarCircle/index.scss
+++ b/apps/miniprogram/src/components/ui/AvatarCircle/index.scss
@@ -0,0 +1,14 @@
+@import '../../../styles/variables.scss';
+
+.avatar-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &__text {
+    font-family: 'Georgia', 'Times New Roman', serif;
+    font-weight: 700;
+    line-height: 1;
+  }
+}
--- a/apps/miniprogram/src/components/ui/AvatarCircle/index.tsx
+++ b/apps/miniprogram/src/components/ui/AvatarCircle/index.tsx
@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+type AvatarColor = 'pri' | 'acc' | 'wrn' | 'dan';
+
+interface AvatarCircleProps {
+  name: string;
+  size?: number;
+  color?: AvatarColor;
+  className?: string;
+}
+
+const COLOR_MAP: Record<AvatarColor, { bg: string; fg: string }> = {
+  pri: { bg: '#D4E5F0', fg: '#3A6B8C' },
+  acc: { bg: '#E8F0E8', fg: '#5B7A5E' },
+  wrn: { bg: '#FFF3E0', fg: '#C4873A' },
+  dan: { bg: '#FDEAEA', fg: '#B54A4A' },
+};
+
+const AvatarCircle: React.FC<AvatarCircleProps> = ({
+  name,
+  size = 44,
+  color = 'pri',
+  className = '',
+}) => {
+  const initial = useMemo(() => name?.charAt(0) || '?', [name]);
+  const colorStyle = COLOR_MAP[color];
+
+  const cls = ['avatar-circle', className].filter(Boolean).join(' ');
+
+  return (
+    <View
+      className={cls}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: `${size / 2}px`,
+        background: colorStyle.bg,
+      }}
+    >
+      <Text
+        className="avatar-circle__text"
+        style={{ color: colorStyle.fg, fontSize: `${Math.round(size * 0.4)}px` }}
+      >
+        {initial}
+      </Text>
+    </View>
+  );
+};
+
+export default React.memo(AvatarCircle);
--- a/apps/miniprogram/src/components/ui/ChatBubble/index.scss
+++ b/apps/miniprogram/src/components/ui/ChatBubble/index.scss
@@ -0,0 +1,37 @@
+@import '../../../styles/variables.scss';
+
+.chat-bubble-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--tk-gap-xs);
+}
+
+.chat-bubble {
+  max-width: 75%;
+  padding: var(--tk-gap-md) var(--tk-gap-lg);
+  font-size: var(--tk-font-body);
+  line-height: 1.5;
+
+  &--other {
+    align-self: flex-start;
+    background: $card;
+    border-radius: $r $r $r $r-xs;
+  }
+
+  &--mine {
+    align-self: flex-end;
+    background: var(--tk-pri-l);
+    border-radius: $r $r $r-xs $r;
+  }
+
+  &__text {
+    color: $tx;
+  }
+
+  &__time {
+    font-size: var(--tk-font-micro);
+    color: $tx3;
+    margin-top: 4px;
+    text-align: center;
+  }
+}
--- a/apps/miniprogram/src/components/ui/ChatBubble/index.tsx
+++ b/apps/miniprogram/src/components/ui/ChatBubble/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+interface ChatBubbleProps {
+  content: string;
+  isMine?: boolean;
+  time?: string;
+  className?: string;
+}
+
+const ChatBubble: React.FC<ChatBubbleProps> = ({
+  content,
+  isMine = false,
+  time,
+  className = '',
+}) => {
+  const cls = [
+    'chat-bubble',
+    isMine ? 'chat-bubble--mine' : 'chat-bubble--other',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <View className='chat-bubble-wrap'>
+      <View className={cls}>
+        <Text className='chat-bubble__text'>{content}</Text>
+      </View>
+      {time && <Text className='chat-bubble__time'>{time}</Text>}
+    </View>
+  );
+};
+
+export default React.memo(ChatBubble);
--- a/apps/miniprogram/src/components/ui/CheckinCalendar/index.scss
+++ b/apps/miniprogram/src/components/ui/CheckinCalendar/index.scss
@@ -0,0 +1,91 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.checkin-calendar {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  padding: $sp-section $sp-lg $sp-md;
+
+  &__day {
+    width: 36px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $sp-xs;
+  }
+
+  &__dot {
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+    @include flex-center;
+
+    &--checked {
+      background: $acc-l;
+    }
+    &--today {
+      background: $pri;
+      border: 2px solid $pri;
+      box-shadow: 0 2px 8px rgba(196, 98, 58, 0.3);
+    }
+    &--empty {
+      background: $surface-alt;
+    }
+  }
+
+  &__check {
+    font-size: 13px;
+    line-height: 1;
+    color: $acc;
+
+    .checkin-calendar__dot--today & {
+      color: $white;
+    }
+  }
+
+  &__label {
+    font-size: 11px;
+    color: $tx3;
+    font-weight: 400;
+
+    &--today {
+      color: $tx;
+      font-weight: 600;
+    }
+  }
+
+  &__tip {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 14px;
+    background: $acc-l;
+    border-radius: $r-sm;
+    display: flex;
+    align-items: center;
+    gap: $sp-xs;
+  }
+
+  &__tip-text {
+    font-size: 12px;
+    color: $acc;
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  // 长者模式
+  .elder-mode & {
+    &__dot {
+      width: 40px;
+      height: 40px;
+    }
+    &__label {
+      font-size: 13px;
+    }
+    &__tip-text {
+      font-size: 14px;
+    }
+  }
+}
--- a/apps/miniprogram/src/components/ui/CheckinCalendar/index.tsx
+++ b/apps/miniprogram/src/components/ui/CheckinCalendar/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+interface CheckinCalendarProps {
+  consecutiveDays: number;
+  earnedPoints?: number;
+  onClose?: () => void;
+}
+
+const DAYS = ['一', '二', '三', '四', '五', '六', '日'];
+
+const CheckinCalendar: React.FC<CheckinCalendarProps> = ({
+  consecutiveDays,
+}) => {
+  const daysUntilReward = 7 - consecutiveDays;
+
+  return (
+    <View className='checkin-calendar'>
+      {DAYS.map((d, i) => {
+        const isChecked = i < consecutiveDays;
+        const isToday = i === consecutiveDays - 1;
+        return (
+          <View key={i} className='checkin-calendar__day'>
+            <View
+              className={`checkin-calendar__dot ${
+                isChecked
+                  ? isToday
+                    ? 'checkin-calendar__dot--today'
+                    : 'checkin-calendar__dot--checked'
+                  : 'checkin-calendar__dot--empty'
+              }`}
+            >
+              {isChecked && <Text className='checkin-calendar__check'>&#10003;</Text>}
+            </View>
+            <Text className={`checkin-calendar__label ${isToday ? 'checkin-calendar__label--today' : ''}`}>
+              周{d}
+            </Text>
+          </View>
+        );
+      })}
+      {daysUntilReward > 0 && (
+        <View className='checkin-calendar__tip'>
+          <Text className='checkin-calendar__tip-text'>
+            再坚持 {daysUntilReward} 天，连续 7 天签到额外奖励 50 积分
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(CheckinCalendar);
--- a/apps/miniprogram/src/components/ui/CheckinModal/index.scss
+++ b/apps/miniprogram/src/components/ui/CheckinModal/index.scss
@@ -0,0 +1,142 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.checkin-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  &__card {
+    position: relative;
+    width: 320px;
+    background: $card;
+    border-radius: $r;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  &__header {
+    background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
+    padding: $sp-lg;
+    padding-bottom: 20px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  &__header-deco {
+    position: absolute;
+    top: -15px;
+    right: -15px;
+    width: 60px;
+    height: 60px;
+    border-radius: 30px;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  &__title {
+    font-size: var(--tk-font-body);
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: $sp-xs;
+    display: block;
+  }
+
+  &__points-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: $sp-2xs;
+  }
+
+  &__points-num {
+    @include serif-number;
+    font-size: 36px;
+    font-weight: 700;
+    color: $white;
+    line-height: 1;
+  }
+
+  &__points-unit {
+    font-size: var(--tk-font-body-sm);
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__streak {
+    font-size: var(--tk-font-cap);
+    color: rgba(255, 255, 255, 0.65);
+    margin-top: $sp-xs;
+    display: block;
+  }
+
+  &__calendar {
+    padding: $sp-section $sp-lg 0;
+  }
+
+  &__calendar-title {
+    font-size: var(--tk-font-body-sm);
+    font-weight: 600;
+    color: $tx;
+    margin-bottom: $sp-sm;
+    text-align: center;
+    display: block;
+  }
+
+  &__calendar-body {
+    position: relative;
+    padding-bottom: 52px;
+  }
+
+  &__footer {
+    padding: 0 $sp-lg $sp-lg;
+  }
+
+  &__btn {
+    width: 100%;
+    padding: 12px 0;
+    border-radius: $r-pill;
+    background: $pri;
+    text-align: center;
+    cursor: pointer;
+    box-shadow: $shadow-btn;
+    @include touch-target;
+
+    &:active {
+      opacity: var(--tk-touch-feedback-opacity);
+    }
+  }
+
+  &__btn-text {
+    font-size: 15px;
+    color: $white;
+    font-weight: 600;
+  }
+
+  // 长者模式
+  .elder-mode & {
+    &__card {
+      width: 340px;
+    }
+    &__points-num {
+      font-size: 42px;
+    }
+    &__title {
+      font-size: 17px;
+    }
+    &__btn {
+      padding: 16px 0;
+    }
+    &__btn-text {
+      font-size: 17px;
+    }
+  }
+}
--- a/apps/miniprogram/src/components/ui/CheckinModal/index.tsx
+++ b/apps/miniprogram/src/components/ui/CheckinModal/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import CheckinCalendar from '../CheckinCalendar';
+import './index.scss';
+
+interface CheckinModalProps {
+  visible: boolean;
+  consecutiveDays: number;
+  earnedPoints: number;
+  onClose: () => void;
+}
+
+const CheckinModal: React.FC<CheckinModalProps> = ({
+  visible,
+  consecutiveDays,
+  earnedPoints,
+  onClose,
+}) => {
+  if (!visible) return null;
+
+  return (
+    <View className='checkin-modal'>
+      <View className='checkin-modal__overlay' onClick={onClose} />
+      <View className='checkin-modal__card'>
+        {/* 顶部装饰区 */}
+        <View className='checkin-modal__header'>
+          <View className='checkin-modal__header-deco' />
+          <Text className='checkin-modal__title'>签到成功</Text>
+          <View className='checkin-modal__points-row'>
+            <Text className='checkin-modal__points-num'>+{earnedPoints}</Text>
+            <Text className='checkin-modal__points-unit'>积分</Text>
+          </View>
+          {consecutiveDays > 0 && (
+            <Text className='checkin-modal__streak'>
+              已连续签到 {consecutiveDays} 天
+            </Text>
+          )}
+        </View>
+
+        {/* 7天日历 */}
+        <View className='checkin-modal__calendar'>
+          <Text className='checkin-modal__calendar-title'>本周签到</Text>
+          <View className='checkin-modal__calendar-body'>
+            <CheckinCalendar
+              consecutiveDays={consecutiveDays}
+              earnedPoints={earnedPoints}
+              onClose={onClose}
+            />
+          </View>
+        </View>
+
+        {/* 关闭按钮 */}
+        <View className='checkin-modal__footer'>
+          <View className='checkin-modal__btn' onClick={onClose}>
+            <Text className='checkin-modal__btn-text'>我知道了</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(CheckinModal);
--- a/apps/miniprogram/src/components/ui/ContentCard/index.scss
+++ b/apps/miniprogram/src/components/ui/ContentCard/index.scss
@@ -0,0 +1,33 @@
+@import '../../../styles/variables.scss';
+
+.content-card {
+  background: var(--tk-card-bg);
+  border-radius: var(--tk-card-radius);
+  box-shadow: $shadow-sm;
+  transition: background 0.15s, opacity 0.15s, transform 0.15s;
+
+  &--outlined {
+    box-shadow: none;
+    border: 1px solid $bd;
+  }
+
+  &--elevated {
+    box-shadow: $shadow-md;
+  }
+
+  &--pressable {
+    cursor: pointer;
+  }
+
+  &--feedback-bg.content-card--pressable:active {
+    background: $bd-l;
+  }
+
+  &--feedback-opacity.content-card--pressable:active {
+    opacity: var(--tk-touch-feedback-opacity);
+  }
+
+  &--feedback-scale.content-card--pressable:active {
+    transform: scale(0.98);
+  }
+}
--- a/apps/miniprogram/src/components/ui/ContentCard/index.tsx
+++ b/apps/miniprogram/src/components/ui/ContentCard/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import { CSSProperties, ReactNode, useMemo } from 'react';
+import './index.scss';
+
+interface ContentCardProps {
+  variant?: 'default' | 'outlined' | 'elevated';
+  onPress?: () => void;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  margin?: 'none' | 'md';
+  activeFeedback?: 'bg' | 'opacity' | 'scale' | 'none';
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+
+const PADDING_MAP = {
+  none: '0',
+  sm: 'var(--tk-card-padding-sm)',
+  md: 'var(--tk-card-padding)',
+  lg: 'var(--tk-card-padding-lg)',
+} as const;
+
+const MARGIN_MAP = {
+  none: '0',
+  md: 'var(--tk-gap-md)',
+} as const;
+
+const ContentCard: React.FC<ContentCardProps> = ({
+  variant = 'default',
+  onPress,
+  padding = 'md',
+  margin = 'md',
+  activeFeedback = 'bg',
+  className,
+  style,
+  children,
+}) => {
+  const innerStyle = useMemo(() => ({
+    padding: PADDING_MAP[padding],
+    marginBottom: MARGIN_MAP[margin],
+    ...style,
+  }), [padding, margin, style]);
+
+  const hasPress = !!onPress;
+  const cls = [
+    'content-card',
+    `content-card--${variant}`,
+    hasPress && 'content-card--pressable',
+    hasPress && activeFeedback !== 'none' && `content-card--feedback-${activeFeedback}`,
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <View className={cls} style={innerStyle} onClick={onPress}>
+      {children}
+    </View>
+  );
+};
+
+export default React.memo(ContentCard);
--- a/apps/miniprogram/src/components/ui/DoctorTabBar/index.scss
+++ b/apps/miniprogram/src/components/ui/DoctorTabBar/index.scss
@@ -0,0 +1,54 @@
+@import '../../../styles/variables.scss';
+
+.doctor-tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: $tabbar-space;
+  background: $card;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 6px;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  box-shadow: 0 -1px 0 $bd, $shadow-md;
+  z-index: 999;
+
+  &__item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    padding: 6px 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    @include focus-ring;
+
+    &--active {
+      .doctor-tabbar__icon {
+        transform: scale(1.15);
+      }
+
+      .doctor-tabbar__label {
+        color: $doc-pri;
+        font-weight: 600;
+      }
+    }
+  }
+
+  &__icon {
+    font-size: 22px;
+    line-height: 1;
+    transition: transform 0.15s ease;
+  }
+
+  &__label {
+    font-size: var(--tk-font-micro);
+    color: $tx3;
+    line-height: 1.2;
+    transition: color 0.15s ease;
+  }
+}
--- a/apps/miniprogram/src/components/ui/DoctorTabBar/index.tsx
+++ b/apps/miniprogram/src/components/ui/DoctorTabBar/index.tsx
@@ -0,0 +1,51 @@
+import { View, Text } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import './index.scss';
+
+interface TabItem {
+  key: string;
+  icon: string;
+  activeIcon: string;
+  label: string;
+  url: string;
+}
+
+const DOCTOR_TABS: TabItem[] = [
+  { key: 'workbench', icon: '🏠', activeIcon: '🏠', label: '工作台', url: '/pages/pkg-doctor-core/index' },
+  { key: 'patients', icon: '👤', activeIcon: '👤', label: '患者', url: '/pages/pkg-doctor-core/patients/index' },
+  { key: 'consultation', icon: '💬', activeIcon: '💬', label: '咨询', url: '/pages/pkg-doctor-core/consultation/index' },
+  { key: 'settings', icon: '⚙️', activeIcon: '⚙️', label: '我的', url: '/pages/pkg-profile/settings/index' },
+];
+
+interface DoctorTabBarProps {
+  active?: string;
+}
+
+export default function DoctorTabBar({ active }: DoctorTabBarProps) {
+  const currentPath = `/${Taro.getCurrentPages().pop()?.path ?? ''}`;
+  const activeKey = active ?? DOCTOR_TABS.find((t) => currentPath.startsWith(t.url.replace('/index', '')))?.key ?? 'workbench';
+
+  const handleTab = (tab: TabItem) => {
+    if (tab.key === activeKey) return;
+    Taro.reLaunch({ url: tab.url }).catch(() => {
+      Taro.redirectTo({ url: tab.url }).catch(() => {});
+    });
+  };
+
+  return (
+    <View className="doctor-tabbar" role="tablist">
+      {DOCTOR_TABS.map((tab) => (
+        <View
+          key={tab.key}
+          className={`doctor-tabbar__item ${tab.key === activeKey ? 'doctor-tabbar__item--active' : ''}`}
+          role="tab"
+          aria-selected={tab.key === activeKey}
+          onClick={() => handleTab(tab)}
+        >
+          <Text className="doctor-tabbar__icon">{tab.key === activeKey ? tab.activeIcon : tab.icon}</Text>
+          <Text className="doctor-tabbar__label">{tab.label}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/components/ui/FormInput/index.scss
+++ b/apps/miniprogram/src/components/ui/FormInput/index.scss
@@ -0,0 +1,57 @@
+@import '../../../styles/variables.scss';
+
+.form-input {
+  &__label {
+    display: block;
+    font-size: var(--tk-font-cap);
+    color: $tx3;
+    margin-bottom: 6px;
+  }
+
+  &__field {
+    height: var(--tk-input-height);
+    background: $card;
+    border: 1.5px solid $bd;
+    border-radius: $r;
+    padding: 0 var(--tk-gap-lg);
+    display: flex;
+    align-items: center;
+    transition: border-color 0.2s;
+
+    &:focus-within {
+      outline: $focus-ring-width solid $focus-ring-color;
+      outline-offset: $focus-ring-offset;
+      border-color: var(--tk-pri);
+    }
+  }
+
+  &__control {
+    width: 100%;
+    height: 100%;
+    font-size: var(--tk-font-body);
+    color: $tx;
+  }
+
+  &__placeholder {
+    color: $tx3;
+  }
+
+  &--error &__field {
+    border-color: $dan;
+  }
+
+  &--disabled &__field {
+    opacity: 0.5;
+  }
+
+  &--focus &__field {
+    border-color: var(--tk-pri);
+  }
+
+  &__error {
+    display: block;
+    font-size: var(--tk-font-cap);
+    color: $dan;
+    margin-top: 4px;
+  }
+}
--- a/apps/miniprogram/src/components/ui/FormInput/index.tsx
+++ b/apps/miniprogram/src/components/ui/FormInput/index.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, Text, Input } from '@tarojs/components';
+import './index.scss';
+
+interface FormInputProps {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onInput?: (value: string) => void;
+  type?: 'text' | 'number' | 'idcard' | 'digit';
+  maxLength?: number;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+}
+
+const FormInput: React.FC<FormInputProps> = ({
+  label,
+  placeholder,
+  value,
+  onInput,
+  type = 'text',
+  maxLength,
+  disabled = false,
+  error,
+  className = '',
+}) => {
+  const cls = [
+    'form-input',
+    error && 'form-input--error',
+    disabled && 'form-input--disabled',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <View className={cls}>
+      {label && <Text className='form-input__label'>{label}</Text>}
+      <View className='form-input__field'>
+        <Input
+          className='form-input__control'
+          placeholder={placeholder}
+          placeholderClass='form-input__placeholder'
+          value={value}
+          onInput={e => onInput?.(e.detail.value)}
+          type={type}
+          maxlength={maxLength}
+          disabled={disabled}
+          aria-invalid={!!error}
+          aria-label={label || placeholder}
+        />
+      </View>
+      {error && <Text className='form-input__error'>{error}</Text>}
+    </View>
+  );
+};
+
+export default React.memo(FormInput);
--- a/apps/miniprogram/src/components/ui/GradientHeader/index.scss
+++ b/apps/miniprogram/src/components/ui/GradientHeader/index.scss
@@ -0,0 +1,8 @@
+@import '../../../styles/variables.scss';
+
+.gradient-header {
+  background: linear-gradient(135deg, var(--tk-pri) 0%, var(--tk-pri-d) 100%);
+  border-radius: $r;
+  padding: 18px;
+  color: $white;
+}
--- a/apps/miniprogram/src/components/ui/GradientHeader/index.tsx
+++ b/apps/miniprogram/src/components/ui/GradientHeader/index.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { View } from '@tarojs/components';
+import './index.scss';
+
+interface GradientHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const GradientHeader: React.FC<GradientHeaderProps> = ({
+  children,
+  className = '',
+}) => {
+  return (
+    <View className={`gradient-header ${className}`}>
+      {children}
+    </View>
+  );
+};
+
+export default React.memo(GradientHeader);
--- a/apps/miniprogram/src/components/ui/InfoRow/index.scss
+++ b/apps/miniprogram/src/components/ui/InfoRow/index.scss
@@ -0,0 +1,27 @@
+@import '../../../styles/variables.scss';
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--tk-gap-md) 0;
+  border-bottom: 1px solid $bd-l;
+
+  &--last {
+    border-bottom: none;
+  }
+
+  &__label {
+    font-size: var(--tk-font-body);
+    color: $tx2;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    font-size: var(--tk-font-body-lg);
+    color: $tx;
+    text-align: right;
+    flex: 1;
+    margin-left: var(--tk-gap-md);
+  }
+}
--- a/apps/miniprogram/src/components/ui/InfoRow/index.tsx
+++ b/apps/miniprogram/src/components/ui/InfoRow/index.tsx
@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+interface InfoRowProps {
+  label: string;
+  value?: string;
+  valueNode?: ReactNode;
+  last?: boolean;
+  className?: string;
+}
+
+const InfoRow: React.FC<InfoRowProps> = ({
+  label,
+  value,
+  valueNode,
+  last = false,
+  className = '',
+}) => {
+  const cls = [
+    'info-row',
+    last && 'info-row--last',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <View className={cls}>
+      <Text className='info-row__label'>{label}</Text>
+      {valueNode ?? <Text className='info-row__value'>{value}</Text>}
+    </View>
+  );
+};
+
+export default React.memo(InfoRow);
--- a/apps/miniprogram/src/components/ui/ListItem/index.scss
+++ b/apps/miniprogram/src/components/ui/ListItem/index.scss
@@ -0,0 +1,67 @@
+@import '../../../styles/variables.scss';
+
+.list-item {
+  display: flex;
+  align-items: center;
+  background: $card;
+  border-radius: $r;
+  padding: var(--tk-gap-lg);
+  box-shadow: $shadow-sm;
+  gap: var(--tk-gap-md);
+
+  &--pressable {
+    &:active {
+      opacity: var(--tk-touch-feedback-opacity);
+    }
+  }
+
+  &--read {
+    opacity: 0.7;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    border-radius: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    display: block;
+    font-size: var(--tk-font-body);
+    font-weight: 500;
+    color: $tx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__subtitle {
+    display: block;
+    font-size: var(--tk-font-cap);
+    color: $tx3;
+    margin-top: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__extra {
+    flex-shrink: 0;
+  }
+
+  &__arrow {
+    flex-shrink: 0;
+    font-size: var(--tk-font-body-lg);
+    color: $tx3;
+    margin-left: var(--tk-gap-2xs);
+  }
+}
--- a/apps/miniprogram/src/components/ui/ListItem/index.tsx
+++ b/apps/miniprogram/src/components/ui/ListItem/index.tsx
@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+interface ListItemProps {
+  title: string;
+  subtitle?: string;
+  extra?: ReactNode;
+  leftIcon?: ReactNode;
+  onPress?: () => void;
+  showArrow?: boolean;
+  unread?: boolean;
+  className?: string;
+}
+
+const ListItem: React.FC<ListItemProps> = ({
+  title,
+  subtitle,
+  extra,
+  leftIcon,
+  onPress,
+  showArrow = false,
+  unread = false,
+  className = '',
+}) => {
+  const cls = [
+    'list-item',
+    onPress && 'list-item--pressable',
+    !unread && 'list-item--read',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <View className={cls} onClick={onPress}>
+      {leftIcon && <View className='list-item__icon'>{leftIcon}</View>}
+      <View className='list-item__body'>
+        <Text className='list-item__title'>{title}</Text>
+        {subtitle && <Text className='list-item__subtitle'>{subtitle}</Text>}
+      </View>
+      {extra && <View className='list-item__extra'>{extra}</View>}
+      {showArrow && <Text className='list-item__arrow'>›</Text>}
+    </View>
+  );
+};
+
+export default React.memo(ListItem);
--- a/apps/miniprogram/src/components/ui/LoadingCard/index.scss
+++ b/apps/miniprogram/src/components/ui/LoadingCard/index.scss
@@ -0,0 +1,75 @@
+@import '../../../styles/variables.scss';
+
+@keyframes skeleton-pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+}
+
+.loading-card-group {
+  &--card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tk-gap-md);
+  }
+
+  &--list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tk-gap-sm);
+  }
+
+  &--detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tk-gap-md);
+  }
+}
+
+.loading-card {
+  background: var(--tk-card-bg);
+  border-radius: var(--tk-card-radius);
+  padding: var(--tk-card-padding);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: var(--tk-gap-sm);
+  }
+
+  &__circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: $bd-l;
+    flex-shrink: 0;
+  }
+
+  &__lines {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--tk-gap-xs);
+  }
+
+  &__line {
+    border-radius: 4px;
+    background: $bd-l;
+
+    &--title {
+      width: 60%;
+      height: 16px;
+    }
+
+    &--text {
+      width: 100%;
+      height: 12px;
+    }
+
+    &--short {
+      width: 40%;
+      height: 12px;
+    }
+  }
+}
--- a/apps/miniprogram/src/components/ui/LoadingCard/index.tsx
+++ b/apps/miniprogram/src/components/ui/LoadingCard/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import './index.scss';
+
+interface LoadingCardProps {
+  count?: number;
+  layout?: 'card' | 'list' | 'detail';
+}
+
+const LoadingCard: React.FC<LoadingCardProps> = ({
+  count = 3,
+  layout = 'card',
+}) => {
+  return (
+    <View className={`loading-card-group loading-card-group--${layout}`} role="status" aria-label="内容加载中">
+      {Array.from({ length: count }, (_, i) => (
+        <View key={i} className="loading-card">
+          {layout === 'card' && (
+            <>
+              <View className="loading-card__line loading-card__line--title" />
+              <View className="loading-card__line loading-card__line--text" />
+              <View className="loading-card__line loading-card__line--short" />
+            </>
+          )}
+          {layout === 'list' && (
+            <View className="loading-card__row">
+              <View className="loading-card__circle" />
+              <View className="loading-card__lines">
+                <View className="loading-card__line loading-card__line--title" />
+                <View className="loading-card__line loading-card__line--short" />
+              </View>
+            </View>
+          )}
+          {layout === 'detail' && (
+            <>
+              <View className="loading-card__line loading-card__line--title" />
+              <View className="loading-card__line loading-card__line--text" />
+              <View className="loading-card__line loading-card__line--text" />
+              <View className="loading-card__line loading-card__line--short" />
+            </>
+          )}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default React.memo(LoadingCard);
--- a/apps/miniprogram/src/components/ui/PageShell/index.scss
+++ b/apps/miniprogram/src/components/ui/PageShell/index.scss
@@ -0,0 +1,11 @@
+@import '../../../styles/variables.scss';
+
+.page-shell {
+  min-height: 100vh;
+  background: $bg;
+  box-sizing: border-box;
+
+  &--safe-bottom {
+    padding-bottom: calc(var(--tk-page-padding) + env(safe-area-inset-bottom, 0px));
+  }
+}
--- a/apps/miniprogram/src/components/ui/PageShell/index.tsx
+++ b/apps/miniprogram/src/components/ui/PageShell/index.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, ScrollView } from '@tarojs/components';
+import { ReactNode, useMemo } from 'react';
+import './index.scss';
+
+interface PageShellProps {
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  safeBottom?: boolean;
+  scroll?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+const PADDING_MAP = {
+  none: '0',
+  sm: 'var(--tk-gap-md)',
+  md: 'var(--tk-page-padding)',
+  lg: 'var(--tk-gap-xl)',
+} as const;
+
+const PageShell: React.FC<PageShellProps> = ({
+  padding = 'md',
+  safeBottom = true,
+  scroll = true,
+  className,
+  children,
+}) => {
+  const style = useMemo(() => ({
+    paddingLeft: PADDING_MAP[padding],
+    paddingRight: PADDING_MAP[padding],
+    paddingTop: PADDING_MAP[padding],
+  }), [padding]);
+
+  const cls = [
+    'page-shell',
+    safeBottom && 'page-shell--safe-bottom',
+    className,
+  ].filter(Boolean).join(' ');
+
+  if (scroll) {
+    return (
+      <ScrollView scrollY className={cls} style={style}>
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View className={cls} style={style}>
+      {children}
+    </View>
+  );
+};
+
+export default React.memo(PageShell);
--- a/apps/miniprogram/src/components/ui/PointsCard/index.scss
+++ b/apps/miniprogram/src/components/ui/PointsCard/index.scss
@@ -0,0 +1,124 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.points-card {
+  background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
+  border-radius: $r;
+  padding: $sp-lg;
+  padding-bottom: 20px;
+  margin-bottom: $sp-section;
+  box-shadow: 0 8px 24px rgba(196, 98, 58, 0.25);
+  position: relative;
+  overflow: hidden;
+
+  &__deco {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+
+    &--1 {
+      top: -20px;
+      right: -20px;
+      width: 100px;
+      height: 100px;
+      background: rgba(255, 255, 255, 0.08);
+    }
+    &--2 {
+      bottom: -30px;
+      right: 40px;
+      width: 80px;
+      height: 80px;
+      background: rgba(255, 255, 255, 0.05);
+    }
+    &--3 {
+      top: 20px;
+      right: 20px;
+      width: 40px;
+      height: 40px;
+      background: rgba(255, 255, 255, 0.06);
+    }
+  }
+
+  &__body {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+    z-index: 1;
+  }
+
+  &__left {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__label {
+    font-size: var(--tk-font-cap);
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: $sp-xs;
+    letter-spacing: 1px;
+  }
+
+  &__balance {
+    @include serif-number;
+    font-size: 42px;
+    font-weight: 700;
+    color: $white;
+    line-height: 1;
+    letter-spacing: 2px;
+    margin-bottom: $sp-2xs;
+  }
+
+  &__streak {
+    font-size: var(--tk-font-cap);
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  &__checkin {
+    display: flex;
+    align-items: center;
+    gap: $sp-2xs;
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    padding: 8px 16px;
+    border-radius: $r-pill;
+    cursor: pointer;
+
+    @include touch-target;
+
+    &:active {
+      opacity: var(--tk-touch-feedback-opacity);
+    }
+
+    &--done {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &__checkin-text {
+    font-size: var(--tk-font-cap);
+    color: $white;
+    font-weight: 500;
+  }
+
+  &__checkin--done &__checkin-text {
+    opacity: 0.6;
+  }
+
+  // 长者模式
+  .elder-mode & {
+    &__balance {
+      font-size: 52px;
+    }
+    &__label {
+      font-size: 15px;
+    }
+    &__checkin {
+      padding: 10px 20px;
+    }
+    &__checkin-text {
+      font-size: 15px;
+    }
+  }
+}
--- a/Show More
+++ b/Show More