docs(skills): design-handoff 设计稿 + spec + .gitignore 更新

- mp-11-doctor-core 设计交付包（截图 + tokens） - mp-13/mp-14 新原型 HTML - design-handoff skill 设计规格文档 - .gitignore 排除 dist-h5/test-results/uploads 等构建产物
2026-05-18 02:13:29 +08:00
parent ded37830fe
commit 3aa71a94d2
9 changed files with 2084 additions and 2 deletions
--- a/docs/design/mp-11-doctor-core/META.yml
+++ b/docs/design/mp-11-doctor-core/META.yml
@@ -0,0 +1,29 @@
+prototype: mp-11-doctor-core.html
+source: docs/design/mp-11-doctor-core.html
+generated_at: "2026-05-18T00:16:00+08:00"
+variant: 医生端（.doctor-mode 靛蓝主色 #3A6B8C）
+tokens:
+  matched: 20
+  unmatched: 2
+  pending: 15
+components:
+  total: 14
+  mapped: 8
+  new: 6
+interactions: 5
+screens:
+  - label: 医生工作台
+    component: DoctorHome
+    screenshot: screenshots/doctor.png
+  - label: 待办收件箱
+    component: ActionInbox
+    screenshot: screenshots/screen-2.png
+  - label: 在线咨询
+    component: ConsultList
+    screenshot: screenshots/consultation.png
+  - label: 随访管理
+    component: FollowUpList
+    screenshot: screenshots/followupmanage.png
+  - label: 患者管理
+    component: PatientList
+    screenshot: screenshots/patientmanage.png
--- a/docs/design/mp-11-doctor-core/SPEC.md
+++ b/docs/design/mp-11-doctor-core/SPEC.md
@@ -0,0 +1,458 @@
+# mp-11-doctor-core 设计规格
+
+> 由 design-handoff 自动生成 | 源文件: mp-11-doctor-core.html | 生成时间: 2026-05-18
+
+## 1. 概览
+
+- **原型文件**: mp-11-doctor-core.html
+- **设计变体**: 医生端（`.doctor-mode` 靛蓝主色 #3A6B8C 替代患者端赤土橙 #C4623A）
+- **设计 Token 数**: 20/22 已匹配（confirmed），15 pending，2 unmatched
+- **组件数**: 14（8 已映射 + 6 需新建/扩展）
+- **交互行为数**: 5 matched / 3 unmatched
+- **屏幕数**: 5
+
+### 屏幕索引
+
+| # | 屏幕 | 组件名 | 截图 |
+|---|------|--------|------|
+| 1 | 医生工作台 | DoctorHome | screenshots/doctor.png |
+| 2 | 待办收件箱 | ActionInbox | screenshots/screen-2.png |
+| 3 | 在线咨询 | ConsultList | screenshots/consultation.png |
+| 4 | 随访管理 | FollowUpList | screenshots/followupmanage.png |
+| 5 | 患者管理 | PatientList | screenshots/patientmanage.png |
+
+---
+
+## 2. 设计 Token
+
+### 2.1 医生端色彩变体
+
+> 医生端核心差异：主色系从赤土橙切换为靛蓝，通过 `.doctor-mode` CSS 变量级联覆盖实现。
+
+| Token | 原型值 | CSS Token | SCSS 变量 | 状态 | 说明 |
+|-------|--------|-----------|-----------|------|------|
+| T.pri | `#3A6B8C` | `--tk-pri` | `$doc-pri` | confirmed | 医生端靛蓝主色 |
+| T.priL | `#D4E5F0` | `--tk-pri-l` | `$doc-pri-l` | confirmed | 靛蓝浅色 |
+| T.priD | `#2A4F6A` | `--tk-pri-d` | `$doc-pri-d` | confirmed | 靛蓝深色 |
+
+### 2.2 语义色彩
+
+| Token | 值 | CSS Token / SCSS 变量 | 状态 | 角色 |
+|-------|-----|----------------------|------|------|
+| T.bg | `#F5F0EB` | `$bg` | pending | 页面背景/温润米底 |
+| T.card | `#FFFFFF` | `--tk-card-bg` | confirmed | 卡片白底 |
+| T.surface | `#EDE8E2` | `$surface-alt` | pending | 辅助底色 |
+| T.tx | `#2D2A26` | `$tx` | pending | 主文字/暖黑 |
+| T.tx2 | `#5A554F` | `$tx2` | pending | 次文字/暖灰 |
+| T.tx3 | `#78716C` | `--tk-text-secondary` | confirmed | 辅助文字 |
+| T.bd | `#E8E2DC` | `$bd` | pending | 边框色 |
+| T.bdL | `#F0EBE5` | `$bd-l` | pending | 浅边框色 |
+| T.acc | `#5B7A5E` | `$acc` | pending | 鼠尾草绿/成功色 |
+| T.accL | `#E8F0E8` | `$acc-l` | pending | 成功浅色 |
+| T.wrn | `#C4873A` | `$wrn` | pending | 警告色/暖琥珀 |
+| T.wrnL | `#FFF3E0` | `$wrn-l` | pending | 警告浅色 |
+| T.dan | `#B54A4A` | `$dan` | pending | 危险色/柔红 |
+| T.danL | `#FDEAEA` | `$dan-l` | pending | 危险浅色 |
+
+### 2.3 字号
+
+| 原型值 (px) | CSS Token | 状态 | 使用位置 |
+|------------|-----------|------|---------|
+| 28 | `--tk-font-h1` | confirmed | 统计数值 |
+| 26 | — | unmatched | 工作台标题（介于 h1/h2 之间） |
+| 20 | — | unmatched | 头像文字 |
+| 18 | `--tk-font-body-lg` | confirmed | NavBar 标题、头像内文字 |
+| 16 | `--tk-font-body` | confirmed | 页面标题 |
+| 15 | — | unmatched | 列表主文字（介于 body/body-sm） |
+| 14 | `--tk-font-body-sm` | confirmed | 次要文字、日期 |
+| 13 | `--tk-font-cap` | confirmed | section 标题、辅助信息 |
+| 12 | — | unmatched | 标签文字、时间、辅助 |
+| 11 | `--tk-font-micro` | confirmed | 角标、Tab 文字、Tag |
+
+### 2.4 间距
+
+| 原型值 (px) | CSS Token / SCSS 变量 | 状态 | 使用位置 |
+|------------|----------------------|------|---------|
+| 16 | `--tk-gap-md` / `$sp-md` | confirmed | 卡片 padding、section 间距 |
+| 14 | — | unmatched | 列表项 padding（14px 16px） |
+| 12 | `--tk-gap-sm` / `$sp-sm` | confirmed | 列表项间距、卡片 padding |
+| 10 | — | unmatched | 待办项间距、元素间距 |
+| 8 | `--tk-gap-xs` / `$sp-xs` | confirmed | Tab 间距、元素 gap |
+| 6 | — | unmatched | 小间距 |
+| 3 | `--tk-tag-padding-v` | confirmed | Tab 文字与图标间距 |
+
+### 2.5 圆角
+
+| 原型值 (px) | CSS Token / SCSS 变量 | 状态 | 使用位置 |
+|------------|----------------------|------|---------|
+| 16 | `--tk-card-radius` / `$r` | confirmed | 卡片圆角 |
+| 12 | `$r-sm` | pending | 搜索栏、数据条圆角 |
+| 8 | `$r-xs` | pending | 小圆角 |
+| 6 | — | unmatched | Tag 圆角 |
+| 20 | `$r-lg` | pending | 筛选标签 pill 圆角 |
+| 22-26 | — | unmatched | 头像圆形（borderRadius = width/2） |
+
+### 2.6 字体
+
+| Token | 值 | 状态 | 说明 |
+|-------|-----|------|------|
+| T.serif | `Georgia, 'Times New Roman', serif` | unmatched | 标题/数值衬线字体 |
+| T.sans | `-apple-system, 'PingFang SC', sans-serif` | unmatched | 正文无衬线字体 |
+
+---
+
+## 3. 组件清单
+
+### 3.1 组件树
+
+```
+App
+├── IosFrame (设备框，不实现)
+│   ├── DoctorHome ─── 医生工作台
+│   │   ├── PageShell
+│   │   ├── SectionTitle (工作台标题)
+│   │   ├── ContentCard > StatGrid (今日概览)
+│   │   ├── ShortcutButton × 4
+│   │   ├── SectionTitle (待办提醒)
+│   │   └── TodoAlert × 2
+│   ├── ActionInbox ─── 待办收件箱
+│   │   ├── NavBar
+│   │   ├── TabFilter (筛选标签)
+│   │   └── ListItem × 5
+│   ├── ConsultList ─── 在线咨询
+│   │   ├── NavBar
+│   │   ├── StatusTabs (进行中/已结束)
+│   │   └── ListItem × 3
+│   ├── FollowUpList ─── 随访管理
+│   │   ├── NavBar
+│   │   ├── TabFilter
+│   │   └── FollowUpCard × 3
+│   └── PatientList ─── 患者管理
+│       ├── NavBar
+│       ├── SearchBar
+│       └── ListItem × 4
+└── BottomTabBar (工作台页专用)
+```
+
+### 3.2 已映射组件
+
+#### NavBar（已有组件）
+
+- **推断规则**: 命中规则 #5（页面级容器）
+- **Token 依赖**: `T.bg`, `T.bdL`, `T.tx`, `T.serif`
+- **医生端差异**: 标题字体 serif bold 18px，背景 T.bg + 底部 1px 分隔线
+- **样式属性**:
+  ```
+  height: 44px
+  background: T.bg
+  borderBottom: 1px solid T.bdL
+  fontFamily: T.serif
+  fontSize: 18px
+  fontWeight: 700
+  color: T.tx
+  ```
+
+#### ContentCard（已有组件）
+
+- **推断规则**: 命中规则 #1（容器 + borderRadius + boxShadow + 标题 + 正文）
+- **Token 依赖**: `T.card`, `T.r`, `T.bg`, `T.tx2`, `T.tx3`
+- **子组件**: StatGrid（医生工作台）、数据条（随访卡片）
+- **样式属性**:
+  ```
+  background: T.card
+  borderRadius: T.r (16px)
+  padding: 16px
+  boxShadow: 0 2px 12px rgba(0,0,0,0.04)
+  marginBottom: 16px
+  ```
+
+#### Tag / StatusTag（已有组件）
+
+- **推断规则**: 命中规则 #6（小型容器 + 背景色 + 短文字）
+- **Token 依赖**: 动态 color/bg props
+- **变体**: 类型标签（异常/随访/咨询）、紧急标签、状态标签
+- **样式属性**:
+  ```
+  display: inline-block
+  padding: 2px 8px
+  borderRadius: 6px
+  fontSize: 11px (or dynamic)
+  fontWeight: 600
+  lineHeight: 1.6
+  ```
+
+#### ListItem（已有组件）
+
+- **推断规则**: 命中规则 #7（列表行 + 左侧区 + 双行文字 + 右侧箭头）
+- **Token 依赖**: `T.card`, `T.r`, `T.tx`, `T.tx2`, `T.tx3`, `T.pri`
+- **变体**:
+  - ActionInbox: Tag + 患者名 + 描述 + 时间 + 箭头
+  - ConsultList: AvatarCircle + 患者名 + 消息 + 未读角标 + 箭头
+  - PatientList: AvatarCircle + 姓名 + 诊断 + 最近日期 + 箭头
+- **样式属性**:
+  ```
+  background: T.card
+  borderRadius: T.r (16px)
+  padding: 14px 16px
+  marginBottom: 10px
+  boxShadow: 0 1px 8px rgba(0,0,0,0.03)
+  display: flex; align-items: center; gap: 12px
+  ```
+
+#### PageShell（已有组件）
+
+- **推断规则**: 命中规则 #5（最外层容器 + padding + 可滚动）
+- **Token 依赖**: `T.bg`
+- **样式属性**:
+  ```
+  height: 100%
+  background: T.bg
+  display: flex; flexDirection: column
+  ```
+
+#### BottomTabBar（已有组件，需 doctor-mode 变体）
+
+- **推断规则**: 页面底部固定
+- **Token 依赖**: `T.card`, `T.bdL`, `T.pri`, `T.tx3`
+- **Tab 项**: 工作台、患者、消息、我的
+- **样式属性**:
+  ```
+  position: absolute; bottom: 0; left: 0; right: 0
+  height: 70px
+  background: T.card
+  borderTop: 1px solid T.bdL
+  paddingTop: 8px; paddingBottom: 28px
+  ```
+- **激活态**: 颜色 T.pri（靛蓝）、fontWeight: 600
+- **非激活**: 颜色 T.tx3、fontWeight: 400
+
+### 3.3 需新建/扩展组件
+
+#### TabFilter（筛选标签 pill）
+
+- **推断规则**: 未命中（特殊 pill 形筛选栏）
+- **视觉特征**: 横向排列的圆角标签，激活态实色填充（白字），非激活态白底+边框
+- **出现位置**: ActionInbox（全部/异常/随访/咨询）、FollowUpList（待随访/已完成/已过期）
+- **Token 依赖**: `T.pri`, `T.card`, `T.bd`, `T.tx2`
+- **样式属性**:
+  ```
+  padding: 6px 16px
+  borderRadius: 20px (pill)
+  fontSize: 13px
+  // 激活态: background: T.pri, color: #fff, border: T.pri
+  // 非激活: background: T.card, color: T.tx2, border: T.bd
+  cursor: pointer
+  ```
+
+#### StatusTabs（状态切换标签栏）
+
+- **推断规则**: 未命中（全宽等分标签栏，底部指示线）
+- **视觉特征**: 等宽标签，激活态底部 2.5px 主色线，非激活底部 1.5px 浅色线
+- **出现位置**: ConsultList（进行中/已结束）
+- **Token 依赖**: `T.pri`, `T.bdL`, `T.tx3`
+- **样式属性**:
+  ```
+  flex: 1; textAlign: center
+  padding: 10px 0
+  fontSize: 14px
+  // 激活: color: T.pri, borderBottom: 2.5px solid T.pri, fontWeight: 600
+  // 非激活: color: T.tx3, borderBottom: 1.5px solid T.bdL
+  ```
+
+#### ShortcutButton（快捷操作按钮）
+
+- **推断规则**: 未命中（圆形图标按钮 + 文字标签）
+- **视觉特征**: 52×52 圆形容器（彩色浅底）+ SVG 图标 + 下方文字标签
+- **出现位置**: DoctorHome（4 个：患者管理/在线咨询/随访管理/透析管理）
+- **Token 依赖**: `T.priL`, `T.accL`, `T.wrnL`, `T.danL`, `T.pri`, `T.acc`, `T.wrn`, `T.dan`
+- **样式属性**:
+  ```
+  // 圆形容器
+  width: 52px; height: 52px
+  borderRadius: 26px (50%)
+  background: 动态浅色
+  display: flex; alignItems: center; justifyContent: center
+  // 文字标签
+  fontSize: 12px; color: T.tx2
+  gap: 8px
+  ```
+
+#### TodoAlert（待办提醒卡片）
+
+- **推断规则**: 命中规则 #2 的扩展（左侧竖线 + 图标 + 双行文字）
+- **视觉特征**: 左侧 4px 彩色竖线 + SVG 图标 + 标题 + 副标题，浅色背景
+- **出现位置**: DoctorHome（2 个：血压异常/随访报告）
+- **Token 依赖**: `T.priL`, `T.pri`, `T.wrnL`, `T.wrn`, `T.tx`, `T.tx3`
+- **样式属性**:
+  ```
+  background: T.priL (or T.wrnL)
+  borderRadius: T.r (16px)
+  padding: 14px 16px
+  borderLeft: 4px solid T.pri (or T.wrn)
+  display: flex; alignItems: center; gap: 10px
+  ```
+
+#### SearchBar（搜索栏）
+
+- **推断规则**: 未命中（带搜索图标的输入框容器）
+- **视觉特征**: 圆角白底容器 + 搜索图标 + placeholder 文字
+- **出现位置**: PatientList
+- **Token 依赖**: `T.card`, `T.bd`, `T.tx3`
+- **样式属性**:
+  ```
+  background: T.card
+  borderRadius: 12px
+  height: 42px
+  padding: 0 14px
+  gap: 10px
+  border: 1px solid T.bd
+  ```
+
+#### AvatarCircle（文字头像圆形）
+
+- **推断规则**: 未命中（圆形 + 单字 + 衬线字体）
+- **视觉特征**: 正圆形容器，彩色浅底，居中显示姓氏首字（serif bold）
+- **出现位置**: ConsultList（44px）、PatientList（46px）
+- **Token 依赖**: `T.priL`, `T.accL`, `T.wrnL`, `T.danL`, `T.pri`, `T.serif`
+- **样式属性**:
+  ```
+  width: 44px (or 46px); height: 同
+  borderRadius: 50%
+  background: 动态浅色
+  fontFamily: T.serif
+  fontSize: 18px (or 20px)
+  fontWeight: 700
+  color: T.pri
+  ```
+
+---
+
+## 4. 交互行为
+
+| # | 元素 | 事件类型 | 行为描述 | 实现建议 |
+|---|------|---------|---------|---------|
+| 1 | TabFilter 标签 | click | 点击切换筛选类别，激活态视觉变化 | `useState` 管理激活索引，切换时重新过滤列表 |
+| 2 | StatusTabs 标签 | click | 点击切换「进行中/已结束」状态 | `useState` 管理激活索引，切换时重新加载列表 |
+| 3 | 列表卡片 | click | 点击跳转到详情页 | 每个 ListItem 包裹 `navigator`，传递患者/咨询 ID |
+| 4 | 快捷操作按钮 | click | 点击跳转到对应功能页 | ShortcutButton 绑定 `Taro.navigateTo` |
+| 5 | BottomTabBar | click | 切换 Tab 页 | 使用 `Taro.switchTab` |
+| 6 | 搜索栏 | input | 输入关键词实时搜索患者 | 防抖 300ms + API 调用 |
+| 7 | 列表滚动 | scroll | 滚动加载更多数据 | `onScrollToLower` + 分页 API |
+
+### 滚动容器
+
+所有列表页的内容区域均设置了 `overflow: auto`，需要实现为 `ScrollView` 组件，支持上拉加载：
+- DoctorHome: `padding: 16px 20px 80px`（底部留出 TabBar 空间）
+- ActionInbox: `padding: 0 20px 20px`
+- ConsultList: `padding: 12px 20px 20px`
+- FollowUpList: `padding: 0 20px 20px`
+- PatientList: `padding: 0 20px 20px`
+
+---
+
+## 5. 未匹配项
+
+### 5.1 未匹配 Token
+
+| 值 | 类型 | 出现位置 | 建议 Token 名称 | 备注 |
+|----|------|---------|----------------|------|
+| `T.serif` = `Georgia, ...` | fontFamily | 标题、数值、头像 | 已有 `$font-serif` SCSS 变量 | 直接使用 `$font-serif` |
+| `T.sans` = `-apple-system, ...` | fontFamily | 正文、辅助文字 | 已有 `$font-sans` SCSS 变量 | 直接使用 `$font-sans` |
+| 26px | fontSize | 工作台标题 | — | 使用 `--tk-font-h1`(28px) 或保留原值 |
+| 20px | fontSize | 头像文字 | — | body-lg(18px) 或保留 |
+| 15px | fontSize | 列表主文字 | — | body(16px) 更符合 Token 体系 |
+| 12px | fontSize | 辅助文字、时间 | 建议新增 `--tk-font-xs: 12px` | 高频使用 |
+| 14px (padding) | padding | 列表项上下 padding | — | gap-md(16px) 近似 |
+
+### 5.2 需新建组件
+
+| 组件名建议 | 视觉特征摘要 | 出现位置 | 优先级 |
+|-----------|------------|---------|--------|
+| TabFilter | 横向 pill 筛选标签，激活态实色填充 | ActionInbox, FollowUpList | 高 |
+| StatusTabs | 全宽等分标签栏，底部指示线 | ConsultList | 高 |
+| ShortcutButton | 圆形图标 + 文字标签，4 种颜色 | DoctorHome | 中 |
+| TodoAlert | 左侧竖线 + 图标 + 双行文字 | DoctorHome | 中 |
+| SearchBar | 圆角白底 + 搜索图标 | PatientList | 中 |
+| AvatarCircle | 圆形 + 单字衬线头像 | ConsultList, PatientList | 低（可用现有 Avatar 扩展） |
+
+---
+
+## 6. 医生端实现注意事项
+
+### 6.1 .doctor-mode CSS 变量覆盖
+
+本原型是**医生端变体**，核心差异通过 CSS 变量级联覆盖：
+
+```scss
+// 患者端默认
+:root {
+  --tk-pri: #C4623A;
+  --tk-pri-l: #F0DDD4;
+  --tk-pri-d: #8B3E1F;
+}
+
+// 医生端覆盖
+.doctor-mode {
+  --tk-pri: #3A6B8C;
+  --tk-pri-l: #D4E5F0;
+  --tk-pri-d: #2A4F6A;
+}
+```
+
+所有使用 `--tk-pri*` 的组件在 `.doctor-mode` 下自动切换为靛蓝色系，无需单独处理。
+
+### 6.2 页面路由规划
+
+| 页面 | 路径建议 | TabBar |
+|------|---------|--------|
+| 医生工作台 | `pages/doctor/index` | 工作台 Tab |
+| 患者管理 | `pages/doctor/patients` | 患者 Tab |
+| 消息/咨询列表 | `pages/doctor/consultations` | 消息 Tab |
+| 我的 | `pages/doctor/profile` | 我的 Tab |
+| 待办收件箱 | `pages/doctor/inbox` | 非 Tab，从工作台跳转 |
+| 随访管理 | `pages/doctor/followups` | 非 Tab，从快捷入口跳转 |
+
+### 6.3 TabBar 配置
+
+医生端使用独立的 4 Tab 布局：
+
+```typescript
+const doctorTabs = [
+  { pagePath: 'pages/doctor/index', text: '工作台', icon: 'grid' },
+  { pagePath: 'pages/doctor/patients', text: '患者', icon: 'users' },
+  { pagePath: 'pages/doctor/consultations', text: '消息', icon: 'message' },
+  { pagePath: 'pages/doctor/profile', text: '我的', icon: 'user' },
+];
+```
+
+### 6.4 数据接口
+
+| 页面 | 需要的 API | 方法 |
+|------|-----------|------|
+| 医生工作台 | `GET /api/v1/health/doctor/stats` | 统计概览 |
+| 医生工作台 | `GET /api/v1/health/doctor/todos` | 待办列表 |
+| 待办收件箱 | `GET /api/v1/health/doctor/todos?type={type}` | 筛选待办 |
+| 在线咨询 | `GET /api/v1/health/consultations?status=active` | 咨询列表 |
+| 随访管理 | `GET /api/v1/health/followups?status={status}` | 随访列表 |
+| 患者管理 | `GET /api/v1/health/patients?search={keyword}` | 患者搜索 |
+
+### 6.5 长者模式适配
+
+所有页面需适配长者模式（字号 ≥ 22px）。`.elder-mode` CSS 变量覆盖已定义在 tokens.yml 中，实现时注意：
+- Tag 字号 elder: 13px → 17px
+- 微调间距 elder 值
+- TabFilter pill 需同步增大触控区域
+
+### 6.6 与患者端组件复用
+
+以下组件可直接从患者端复用（已实现 .doctor-mode 覆盖）：
+- `NavBar`
+- `ContentCard`
+- `Tag`
+- `BottomTabBar`（需配置医生端 Tab 项）
+
+需要新建的医生端专用组件：
+- `TabFilter` — 患者端无对应（患者端用横向滚动分类）
+- `StatusTabs` — 患者端无对应
+- `ShortcutButton` — 患者端无对应
+- `TodoAlert` — 患者端无对应
--- a/docs/design/mp-11-doctor-core/tokens.json
+++ b/docs/design/mp-11-doctor-core/tokens.json
@@ -0,0 +1,45 @@
+{
+  "source": "mp-11-doctor-core.html",
+  "generatedAt": "2026-05-18T00:16:00+08:00",
+  "matched": {
+    "T.pri": { "method": "alias", "confidence": "confirmed", "token": "--tk-pri", "prototypeValue": "#3A6B8C", "tokenValue": "#C4623A", "note": "医生端 .doctor-mode 覆盖为靛蓝 #3A6B8C" },
+    "T.priL": { "method": "alias", "confidence": "confirmed", "token": "--tk-pri-l", "prototypeValue": "#D4E5F0", "tokenValue": "#F0DDD4", "note": "医生端覆盖" },
+    "T.priD": { "method": "alias", "confidence": "confirmed", "token": "--tk-pri-d", "prototypeValue": "#2A4F6A", "tokenValue": "#8B3E1F", "note": "医生端覆盖" },
+    "T.bg": { "method": "alias", "confidence": "pending", "token": null, "scssVar": "$bg", "prototypeValue": "#F5F0EB", "note": "tokens.scss 未声明为 CSS 变量" },
+    "T.card": { "method": "alias", "confidence": "confirmed", "token": "--tk-card-bg", "prototypeValue": "#FFFFFF", "tokenValue": "#FFFFFF" },
+    "T.surface": { "method": "alias", "confidence": "approximate", "token": "--tk-card-bg", "prototypeValue": "#EDE8E2", "tokenValue": "#FFFFFF" },
+    "T.tx": { "method": "alias", "confidence": "pending", "token": null, "scssVar": "$tx", "prototypeValue": "#2D2A26" },
+    "T.tx2": { "method": "alias", "confidence": "pending", "token": null, "scssVar": "$tx2", "prototypeValue": "#5A554F" },
+    "T.tx3": { "method": "alias", "confidence": "confirmed", "token": "--tk-text-secondary", "prototypeValue": "#78716C" },
+    "T.bd": { "method": "alias", "confidence": "pending", "token": null, "scssVar": "$bd", "prototypeValue": "#E8E2DC" },
+    "T.bdL": { "method": "value_exact", "confidence": "pending", "scssVar": "$bd-l", "prototypeValue": "#F0EBE5" },
+    "T.acc": { "method": "value_exact", "confidence": "pending", "scssVar": "$acc", "prototypeValue": "#5B7A5E" },
+    "T.accL": { "method": "value_exact", "confidence": "pending", "scssVar": "$acc-l", "prototypeValue": "#E8F0E8" },
+    "T.wrn": { "method": "value_exact", "confidence": "pending", "scssVar": "$wrn", "prototypeValue": "#C4873A" },
+    "T.wrnL": { "method": "value_exact", "confidence": "pending", "scssVar": "$wrn-l", "prototypeValue": "#FFF3E0" },
+    "T.dan": { "method": "value_exact", "confidence": "pending", "scssVar": "$dan", "prototypeValue": "#B54A4A" },
+    "T.danL": { "method": "value_exact", "confidence": "pending", "scssVar": "$dan-l", "prototypeValue": "#FDEAEA" },
+    "T.r": { "method": "alias", "confidence": "confirmed", "token": "--tk-card-radius", "prototypeValue": "16" },
+    "T.rSm": { "method": "alias", "confidence": "pending", "scssVar": "$r-sm", "prototypeValue": "12" },
+    "T.rXs": { "method": "alias", "confidence": "pending", "scssVar": "$r-xs", "prototypeValue": "8" }
+  },
+  "unmatched": ["T.serif", "T.sans"],
+  "inlineTokenMap": {
+    "fontSize:28": { "token": "--tk-font-h1", "confidence": "confirmed" },
+    "fontSize:26": { "token": null, "confidence": "unmatched", "note": "工作台标题 26px，介于 h1(28) 和 h2(22) 之间" },
+    "fontSize:20": { "token": null, "confidence": "unmatched", "note": "头像文字 20px" },
+    "fontSize:18": { "token": "--tk-font-body-lg", "confidence": "confirmed" },
+    "fontSize:16": { "token": "--tk-font-body", "confidence": "confirmed" },
+    "fontSize:15": { "token": null, "confidence": "unmatched", "note": "列表主文字 15px，介于 body(16) 和 body-sm(14) 之间" },
+    "fontSize:14": { "token": "--tk-font-body-sm", "confidence": "confirmed" },
+    "fontSize:13": { "token": "--tk-font-cap", "confidence": "confirmed" },
+    "fontSize:12": { "token": null, "confidence": "unmatched", "note": "辅助文字 12px，无对应 Token" },
+    "fontSize:11": { "token": "--tk-font-micro", "confidence": "confirmed" }
+  },
+  "summary": {
+    "confirmed": 20,
+    "pending": 15,
+    "approximate": 1,
+    "unmatched": 2
+  }
+}
--- a/docs/design/mp-13-family-profile.html
+++ b/docs/design/mp-13-family-profile.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>HMS 小程序 — 就诊人管理 + 建档</title>
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: #1a1a1a; font-family: -apple-system, 'PingFang SC', sans-serif; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 24px; }
+  .page-title { color: #999; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; }
+  .note { color: #666; font-size: 12px; max-width: 900px; text-align: center; line-height: 1.8; }
+  .screens { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
+  .screen-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+  .screen-label { color: #888; font-size: 12px; font-style: italic; }
+  ::-webkit-scrollbar { width: 0; height: 0; }
+</style>
+</head>
+<body>
+
+<div class="page-title">HMS 小程序 · 就诊人管理 + 建档</div>
+<div class="note">温润东方风设计系统 — 就诊人列表（切换/编辑）+ 新建就诊人表单，两屏并排。表单即建档，建档后解锁积分商城等功能。</div>
+<div id="root"></div>
+
+<script type="text/babel">
+const iosFrameStyles = {
+  wrapper: { display: 'inline-block', padding: 12, background: '#000', borderRadius: 60, boxShadow: '0 0 0 2px #1f2937, 0 20px 60px rgba(0,0,0,0.3)', position: 'relative' },
+  screen: { position: 'relative', borderRadius: 48, overflow: 'hidden', background: '#fff' },
+  statusBar: { position: 'absolute', top: 0, left: 0, right: 0, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 32px', fontSize: 16, fontWeight: 600, fontFamily: '-apple-system, "SF Pro Text", sans-serif', zIndex: 20, pointerEvents: 'none' },
+  dynamicIsland: { position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 124, height: 36, background: '#000', borderRadius: 999, zIndex: 30 },
+  content: { position: 'absolute', top: 54, left: 0, right: 0, bottom: 34, overflow: 'auto' },
+  homeIndicator: { position: 'absolute', bottom: 10, left: '50%', transform: 'translateX(-50%)', width: 140, height: 5, background: 'rgba(0,0,0,0.3)', borderRadius: 999, zIndex: 10 },
+};
+
+function IosFrame({ children, width = 370, height = 800, time = '9:41', battery = 85 }) {
+  return (
+    <div style={iosFrameStyles.wrapper}>
+      <div style={{ ...iosFrameStyles.screen, width, height }}>
+        <div style={{ ...iosFrameStyles.statusBar, color: '#000' }}>
+          <span>{time}</span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 11.5a1 1 0 100-2 1 0 000 2z" fill="#000"/><path d="M3 7.5a7 7 0 0110 0" stroke="#000" strokeWidth="1.3" fill="none" strokeLinecap="round"/><path d="M1 4.5a11 11 0 0114 0" stroke="#000" strokeWidth="1.3" fill="none" strokeLinecap="round" opacity="0.7"/></svg>
+            <div style={{ width: 26, height: 12, border: '1.5px solid #000', borderRadius: 3, padding: 1, position: 'relative' }}>
+              <div style={{ width: `${battery}%`, height: '100%', background: '#000', borderRadius: 1 }} />
+            </div>
+          </div>
+        </div>
+        <div style={iosFrameStyles.dynamicIsland} />
+        <div style={iosFrameStyles.content}>{children}</div>
+        <div style={iosFrameStyles.homeIndicator} />
+      </div>
+    </div>
+  );
+}
+
+const T = {
+  pri: '#C4623A', priL: '#F0DDD4', priD: '#8B3E1F',
+  bg: '#F5F0EB', card: '#FFFFFF', surface: '#EDE8E2',
+  tx: '#2D2A26', tx2: '#5A554F', tx3: '#78716C',
+  bd: '#E8E2DC', bdL: '#F0EBE5',
+  acc: '#5B7A5E', accL: '#E8F0E8',
+  wrn: '#C4873A', wrnL: '#FFF3E0',
+  dan: '#B54A4A', danL: '#FDEAEA',
+  serif: "Georgia, 'Times New Roman', serif",
+  sans: "-apple-system, 'PingFang SC', sans-serif",
+  r: 16, rSm: 12, rXs: 8,
+};
+
+function NavBar({ title }) {
+  return (
+    <div style={{
+      height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center',
+      borderBottom: `1px solid ${T.bdL}`, position: 'relative', background: T.bg, flexShrink: 0
+    }}>
+      <svg style={{ position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)' }} width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path d="M15 19l-7-7 7-7" stroke={T.tx} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+      <span style={{ fontFamily: T.serif, fontSize: 18, fontWeight: 700, color: T.tx }}>{title}</span>
+    </div>
+  );
+}
+
+// ─── 就诊人列表 ───
+function FamilyList() {
+  const patients = [
+    { name: '张三', relation: '本人', gender: '男', birth: '1985-03-15', active: true },
+    { name: '李四', relation: '配偶', gender: '女', birth: '1988-07-22', active: false },
+  ];
+
+  const relationColors = { '本人': T.pri, '配偶': T.acc, '父母': T.wrn, '子女': '#8B7ACC', '其他': T.tx3 };
+  const relationBgs = { '本人': T.priL, '配偶': T.accL, '父母': T.wrnL, '子女': '#EDE8F4', '其他': T.surface };
+
+  return (
+    <div style={{ height: '100%', background: T.bg, display: 'flex', flexDirection: 'column' }}>
+      <NavBar title="就诊人管理" />
+      <div style={{ flex: 1, overflow: 'auto', padding: '20px 20px 100px' }}>
+        {/* 提示 */}
+        <div style={{ fontSize: 13, color: T.tx3, marginBottom: 16, lineHeight: 1.5 }}>
+          完善信息后即可使用积分商城、签到等功能。可添加多位家庭成员。
+        </div>
+
+        {patients.map((p, i) => (
+          <div key={i} style={{
+            background: T.card, borderRadius: T.r, padding: 16, marginBottom: 12,
+            boxShadow: '0 1px 4px rgba(45,42,38,0.06)',
+            border: p.active ? `2px solid ${T.pri}` : '2px solid transparent',
+            position: 'relative',
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+              {/* 头像 */}
+              <div style={{
+                width: 48, height: 48, borderRadius: 24,
+                background: `linear-gradient(135deg, ${relationBgs[p.relation] || T.surface} 0%, ${relationColors[p.relation] || T.tx3} 100%)`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+              }}>
+                <span style={{ fontFamily: T.serif, fontSize: 20, fontWeight: 700, color: '#fff' }}>
+                  {p.name.charAt(0)}
+                </span>
+              </div>
+              {/* 信息 */}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                  <span style={{ fontSize: 16, fontWeight: 600, color: T.tx }}>{p.name}</span>
+                  {p.active && (
+                    <span style={{ fontSize: 11, padding: '2px 8px', borderRadius: 999, background: T.priL, color: T.pri, fontWeight: 600 }}>
+                      当前
+                    </span>
+                  )}
+                </div>
+                <div style={{ display: 'flex', gap: 8, fontSize: 13, color: T.tx3 }}>
+                  <span style={{ padding: '1px 6px', borderRadius: 4, background: relationBgs[p.relation] || T.surface, color: relationColors[p.relation] || T.tx3, fontWeight: 500 }}>
+                    {p.relation}
+                  </span>
+                  <span>{p.gender}</span>
+                  <span>{p.birth.slice(0, 4)}年</span>
+                </div>
+              </div>
+              {/* 编辑 */}
+              <span style={{ fontSize: 14, color: T.pri, fontWeight: 500, flexShrink: 0 }}>编辑</span>
+            </div>
+          </div>
+        ))}
+
+        {/* 添加按钮 */}
+        <div style={{
+          height: 52, borderRadius: T.r, border: `2px dashed ${T.bd}`,
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+          color: T.pri, fontSize: 16, fontWeight: 600,
+        }}>
+          <span style={{ fontSize: 20 }}>+</span>
+          <span>添加就诊人</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── 新建就诊人（建档） ───
+function FamilyAdd() {
+  const formItems = [
+    { label: '姓名', placeholder: '请输入真实姓名', type: 'text' },
+    { label: '关系', placeholder: '本人', type: 'select' },
+    { label: '性别', placeholder: '男', type: 'select' },
+    { label: '出生日期', placeholder: '请选择', type: 'date' },
+    { label: '手机号', placeholder: '选填，用于接收通知', type: 'text' },
+    { label: '身份证号', placeholder: '选填，用于医保对接', type: 'text' },
+  ];
+
+  return (
+    <div style={{ height: '100%', background: T.bg, display: 'flex', flexDirection: 'column' }}>
+      <NavBar title="添加就诊人" />
+      <div style={{ flex: 1, overflow: 'auto', padding: '20px 16px 100px' }}>
+        {/* 顶部提示卡片 */}
+        <div style={{
+          background: T.priL, borderRadius: T.r, padding: '14px 16px', marginBottom: 20,
+          borderLeft: `4px solid ${T.pri}`,
+        }}>
+          <div style={{ fontSize: 14, fontWeight: 600, color: T.pri, marginBottom: 4 }}>完善个人信息</div>
+          <div style={{ fontSize: 13, color: T.tx2, lineHeight: 1.6 }}>
+            完善信息后即可使用积分商城、签到等功能。请填写真实信息。
+          </div>
+        </div>
+
+        {/* 表单 */}
+        <div style={{
+          background: T.card, borderRadius: T.r, overflow: 'hidden',
+          boxShadow: '0 1px 4px rgba(45,42,38,0.06)',
+        }}>
+          {formItems.map((item, i) => (
+            <div key={i} style={{
+              padding: '14px 16px',
+              borderBottom: i < formItems.length - 1 ? `1px solid ${T.bdL}` : 'none',
+            }}>
+              <div style={{ fontSize: 13, color: T.tx3, marginBottom: 8, fontWeight: 500 }}>
+                {item.label}
+                {i < 4 && <span style={{ color: T.dan, marginLeft: 2 }}>*</span>}
+              </div>
+              {item.type === 'select' || item.type === 'date' ? (
+                <div style={{
+                  height: 44, background: T.bg, border: `1.5px solid ${T.bd}`, borderRadius: T.rSm,
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 14px',
+                }}>
+                  <span style={{ fontSize: 15, color: item.placeholder === '请选择' ? T.tx3 : T.tx }}>
+                    {item.placeholder}
+                  </span>
+                  <span style={{ color: T.tx3, fontSize: 14 }}>›</span>
+                </div>
+              ) : (
+                <div style={{
+                  height: 44, background: T.bg, border: `1.5px solid ${T.bd}`, borderRadius: T.rSm,
+                  display: 'flex', alignItems: 'center', padding: '0 14px',
+                }}>
+                  <span style={{ fontSize: 15, color: T.tx3 }}>{item.placeholder}</span>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* 提交按钮 */}
+        <div style={{
+          height: 52, borderRadius: T.r, background: T.pri,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          marginTop: 24,
+          boxShadow: '0 4px 16px rgba(196,98,58,0.3)',
+        }}>
+          <span style={{ fontSize: 17, fontWeight: 600, color: '#fff' }}>确认建档</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <div className="screens">
+      <div className="screen-wrap">
+        <span className="screen-label">就诊人列表</span>
+        <IosFrame time="9:41" battery={85}>
+          <FamilyList />
+        </IosFrame>
+      </div>
+      <div className="screen-wrap">
+        <span className="screen-label">新建就诊人（建档）</span>
+        <IosFrame time="9:42" battery={84}>
+          <FamilyAdd />
+        </IosFrame>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>
--- a/docs/design/mp-14-guest-home.html
+++ b/docs/design/mp-14-guest-home.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>HMS 小程序 — 访客首页</title>
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: #1a1a1a; font-family: -apple-system, 'PingFang SC', sans-serif; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 24px; }
+  .page-title { color: #999; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; }
+  .note { color: #666; font-size: 12px; max-width: 600px; text-align: center; line-height: 1.8; }
+  .screens { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
+  .screen-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+  .screen-label { color: #888; font-size: 12px; font-style: italic; }
+</style>
+</head>
+<body>
+
+<div class="page-title">HMS 小程序 · 访客首页</div>
+<div class="note">温润东方风设计系统 — 未登录用户的首页。品牌 Hero + 服务特色 + 健康资讯 + 底部注册/登录引导。TabBar 仅展示首页/健康/商城/我的四个入口。</div>
+<div id="root"></div>
+
+<script type="text/babel">
+const iosFrameStyles = {
+  wrapper: { display: 'inline-block', padding: 12, background: '#000', borderRadius: 60, boxShadow: '0 0 0 2px #1f2937, 0 20px 60px rgba(0,0,0,0.3)', position: 'relative' },
+  screen: { position: 'relative', borderRadius: 48, overflow: 'hidden', background: '#fff' },
+  statusBar: { position: 'absolute', top: 0, left: 0, right: 0, height: 54, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 32px', fontSize: 16, fontWeight: 600, fontFamily: '-apple-system, "SF Pro Text", sans-serif', zIndex: 20, pointerEvents: 'none' },
+  dynamicIsland: { position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 124, height: 36, background: '#000', borderRadius: 999, zIndex: 30 },
+  content: { position: 'absolute', top: 54, left: 0, right: 0, bottom: 34, overflow: 'auto' },
+  homeIndicator: { position: 'absolute', bottom: 10, left: '50%', transform: 'translateX(-50%)', width: 140, height: 5, background: 'rgba(0,0,0,0.3)', borderRadius: 999, zIndex: 10 },
+};
+
+function IosFrame({ children, width = 370, height = 800, time = '9:41', battery = 85, darkStatus = false }) {
+  const statusColor = darkStatus ? '#fff' : '#000';
+  return (
+    <div style={iosFrameStyles.wrapper}>
+      <div style={{ ...iosFrameStyles.screen, width, height }}>
+        <div style={{ ...iosFrameStyles.statusBar, color: statusColor }}>
+          <span>{time}</span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            <svg width="16" height="12" viewBox="0 0 16 12" fill="none"><path d="M8 11.5a1 1 0 100-2 1 0 000 2z" fill={statusColor}/><path d="M3 7.5a7 7 0 0110 0" stroke={statusColor} strokeWidth="1.3" fill="none" strokeLinecap="round"/><path d="M1 4.5a11 11 0 0114 0" stroke={statusColor} strokeWidth="1.3" fill="none" strokeLinecap="round" opacity="0.7"/></svg>
+            <div style={{ width: 26, height: 12, border: `1.5px solid ${statusColor}`, borderRadius: 3, padding: 1, position: 'relative' }}>
+              <div style={{ width: `${battery}%`, height: '100%', background: statusColor, borderRadius: 1 }} />
+            </div>
+          </div>
+        </div>
+        <div style={iosFrameStyles.dynamicIsland} />
+        <div style={iosFrameStyles.content}>{children}</div>
+        <div style={iosFrameStyles.homeIndicator} />
+      </div>
+    </div>
+  );
+}
+
+const T = {
+  pri: '#C4623A', priL: '#F0DDD4', priD: '#8B3E1F',
+  bg: '#F5F0EB', card: '#FFFFFF', surface: '#EDE8E2',
+  tx: '#2D2A26', tx2: '#5A554F', tx3: '#78716C',
+  bd: '#E8E2DC', bdL: '#F0EBE5',
+  acc: '#5B7A5E', accL: '#E8F0E8',
+  wrn: '#C4873A', wrnL: '#FFF3E0',
+  dan: '#B54A4A', danL: '#FDEAEA',
+  serif: "Georgia, 'Times New Roman', serif",
+  sans: "-apple-system, 'PingFang SC', sans-serif",
+  r: 16, rSm: 12, rXs: 8,
+};
+
+// ─── TabBar ───
+function TabBar({ active = 0 }) {
+  const tabs = [
+    { label: '首页', icon: '⌂' },
+    { label: '健康', icon: '♡' },
+    { label: '商城', icon: '◉' },
+    { label: '我的', icon: '◎' },
+  ];
+  return (
+    <div style={{
+      position: 'absolute', bottom: 0, left: 0, right: 0,
+      background: T.card, borderTop: `1px solid ${T.bdL}`,
+      display: 'flex', height: 80, paddingBottom: 20, zIndex: 10,
+    }}>
+      {tabs.map((tab, i) => (
+        <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
+          <span style={{ fontSize: 20, color: i === active ? T.pri : T.tx3, lineHeight: 1 }}>{tab.icon}</span>
+          <span style={{ fontSize: 10, color: i === active ? T.pri : T.tx3, fontWeight: i === active ? 600 : 400 }}>{tab.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── 访客首页 ───
+function GuestHome() {
+  const articles = [
+    { title: '高血压患者的日常管理指南', date: '2026-05-15' },
+    { title: '如何科学控制血糖水平', date: '2026-05-12' },
+    { title: '透析患者的饮食注意事项', date: '2026-05-08' },
+  ];
+
+  return (
+    <div style={{ height: '100%', background: T.bg, display: 'flex', flexDirection: 'column', position: 'relative' }}>
+      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 80 }}>
+        {/* ── 轮播图（模拟 Swiper）── */}
+        <div style={{ position: 'relative', height: 200, overflow: 'hidden' }}>
+          {/* Slide 1 */}
+          <div style={{
+            position: 'absolute', inset: 0,
+            background: `linear-gradient(135deg, ${T.priD} 0%, ${T.pri} 60%, ${T.priL} 100%)`,
+          }} />
+          {/* 装饰圆 */}
+          <div style={{ position: 'absolute', top: -20, right: -10, width: 120, height: 120, borderRadius: 60, background: 'rgba(255,255,255,0.08)' }} />
+
+          <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 24px' }}>
+            <div style={{ fontFamily: T.serif, fontSize: 24, fontWeight: 700, color: '#fff', marginBottom: 6 }}>
+              专业健康管理
+            </div>
+            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)' }}>
+              AI 驱动个性化健康方案
+            </div>
+          </div>
+
+          {/* 分页指示器 */}
+          <div style={{ position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 6 }}>
+            <div style={{ width: 18, height: 4, borderRadius: 2, background: '#fff' }} />
+            <div style={{ width: 6, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.4)' }} />
+            <div style={{ width: 6, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.4)' }} />
+          </div>
+        </div>
+
+        {/* ── 健康资讯 ── */}
+        <div style={{ padding: '24px 20px 0' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+            <div style={{ fontFamily: T.serif, fontSize: 18, fontWeight: 700, color: T.tx }}>健康资讯</div>
+            <span style={{ fontSize: 13, color: T.tx3 }}>查看全部 ›</span>
+          </div>
+
+          {articles.map((a, i) => (
+            <div key={i} style={{
+              background: T.card, borderRadius: T.r, padding: 16, marginBottom: 10,
+              boxShadow: '0 1px 4px rgba(45,42,38,0.06)',
+              display: 'flex', alignItems: 'center', gap: 14,
+            }}>
+              <div style={{
+                width: 64, height: 64, borderRadius: T.rSm,
+                background: [T.priL, T.accL, T.wrnL][i % 3],
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                flexShrink: 0,
+              }}>
+                <span style={{ fontSize: 22, color: [T.pri, T.acc, T.wrn][i % 3] }}>
+                  {['♥', '◇', '✦'][i % 3]}
+                </span>
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 15, fontWeight: 600, color: T.tx, marginBottom: 4, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {a.title}
+                </div>
+                <div style={{ fontSize: 12, color: T.tx3 }}>{a.date}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* ── 底部注册引导 ── */}
+        <div style={{ padding: '24px 20px 24px' }}>
+          <div style={{
+            background: T.card, borderRadius: T.r, padding: 20,
+            boxShadow: '0 1px 4px rgba(45,42,38,0.06)',
+            textAlign: 'center',
+          }}>
+            <div style={{ fontFamily: T.serif, fontSize: 16, fontWeight: 700, color: T.tx, marginBottom: 6 }}>
+              加入我们
+            </div>
+            <div style={{ fontSize: 13, color: T.tx2, marginBottom: 16, lineHeight: 1.5 }}>
+              注册后即可使用签到、积分商城等全部功能
+            </div>
+            <div style={{
+              height: 48, borderRadius: 24, background: T.pri,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              boxShadow: `0 4px 16px rgba(196,98,58,0.3)`,
+            }}>
+              <span style={{ fontSize: 16, fontWeight: 600, color: '#fff' }}>注册 / 登录</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* TabBar */}
+      <TabBar active={0} />
+    </div>
+  );
+}
+
+// ─── TabBar 其他页面占位（灰色提示） ───
+function PlaceholderTab({ title, icon }) {
+  return (
+    <div style={{ height: '100%', background: T.bg, display: 'flex', flexDirection: 'column', position: 'relative' }}>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, padding: 20 }}>
+        <div style={{ width: 64, height: 64, borderRadius: 32, background: T.surface, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <span style={{ fontSize: 28, color: T.tx3 }}>{icon}</span>
+        </div>
+        <div style={{ fontSize: 16, fontWeight: 600, color: T.tx2 }}>登录后查看{title}</div>
+        <div style={{ fontSize: 13, color: T.tx3, textAlign: 'center', lineHeight: 1.5 }}>
+          请先登录以使用完整服务
+        </div>
+        <div style={{
+          marginTop: 8, height: 44, padding: '0 32px',
+          background: T.pri, borderRadius: 22,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          boxShadow: `0 4px 16px rgba(196,98,58,0.3)`,
+        }}>
+          <span style={{ fontSize: 15, fontWeight: 600, color: '#fff' }}>去登录</span>
+        </div>
+      </div>
+      <TabBar active={1} />
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <div className="screens">
+      <div className="screen-wrap">
+        <span className="screen-label">访客首页</span>
+        <IosFrame time="9:41" battery={85} darkStatus={true}>
+          <GuestHome />
+        </IosFrame>
+      </div>
+      <div className="screen-wrap">
+        <span className="screen-label">未登录 Tab 占位</span>
+        <IosFrame time="9:42" battery={84}>
+          <PlaceholderTab title="健康数据" icon="♡" />
+        </IosFrame>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+</body>
+</html>