iven/hms

Files

iven 3aa71a94d2 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

17 KiB

Raw Blame History

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 已映射组件

推断规则: 命中规则 #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 变量级联覆盖：

// 患者端默认
: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 布局：

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

17 KiB Raw Blame History Unescape Escape

mp-11-doctor-core 设计规格

1. 概览

屏幕索引

2. 设计 Token

2.1 医生端色彩变体

2.2 语义色彩

2.3 字号

2.4 间距

2.5 圆角

2.6 字体

3. 组件清单

3.1 组件树

3.2 已映射组件

NavBar（已有组件）

ContentCard（已有组件）

Tag / StatusTag（已有组件）

ListItem（已有组件）

PageShell（已有组件）

BottomTabBar（已有组件，需 doctor-mode 变体）

3.3 需新建/扩展组件

TabFilter（筛选标签 pill）

StatusTabs（状态切换标签栏）

ShortcutButton（快捷操作按钮）

TodoAlert（待办提醒卡片）

SearchBar（搜索栏）

AvatarCircle（文字头像圆形）

4. 交互行为

滚动容器

5. 未匹配项

5.1 未匹配 Token

5.2 需新建组件

6. 医生端实现注意事项

6.1 .doctor-mode CSS 变量覆盖

6.2 页面路由规划

6.3 TabBar 配置

6.4 数据接口

6.5 长者模式适配

6.6 与患者端组件复用

17 KiB

Raw Blame History