# 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` — 患者端无对应