智能随访 v10 — 原型设计稿

配套: prototype/index.html 是可点击 HTML 原型, 本文是文字版设计规格 (供 Pencil/Excalidraw 类工具画图用 + 后续小程序实施输入)

设计目标: 把 v10 的"25+ 按钮单页宫格"重构为"4-tab 医疗专业架构", 信息层级清晰, 患者中心化导航

视觉规范

配色

用途	色值	备注
主蓝	`#2c6ef2`	患者卡 / 主按钮 / 高亮
渐变蓝	`linear-gradient(135deg, #2c6ef2, #4a86ff)`	患者状态卡
警示红	`#d04848` / `#ee6262`	未连接 / 未输入门诊号 / 危险
成功绿	`#2faa55` / `#4cc46f`	已连接 / 正常状态
提示橙	`#ff9800`	测试版角标
异常红	`#ef4444`	高血压 / 异常数据
背景灰	`#f5f7fa`	整体衬底
卡片白	`#ffffff`	信息块
主文字	`#1f2937`	标题 / 数值
次文字	`#6b7280`	描述 / 标签
弱文字	`#9ca3af`	时间戳 / 占位
分割线	`#f0f2f5`	列表项之间

间距与圆角

元素	值
页面 padding	12px
卡片 padding	16px
卡片圆角	12px (大卡 14px)
卡片间距	12px
按钮高度	96rpx (≈ 48px)
按钮圆角	12-16px
阴影	`0 2px 8px rgba(0,0,0,0.04)` (轻) / `0 4px 16px rgba(0,0,0,0.08)` (重)

字号

用途	字号	字重
大标题 (患者门诊号)	16px	600
卡片标题	14px	600
正文	14px	500 / 400
描述/次要	12px	400
时间戳 / 占位	11px	400
标签大写 (section title)	12px, letter-spacing: 1px, uppercase	500

Tab 1: 首页

┌────────────────────────────────┐
│ 🌐 状态栏 15:08    📶 89%      │ 系统状态 (微信小程序自动)
├────────────────────────────────┤
│ 智能随访           [5.06-v10]  │ AppBar (标题 + 测试角标)
├────────────────────────────────┤
│                                │
│  ┌──────────────────────────┐  │
│  │ 门诊号 0012865682   [切换]│  │ 患者卡 (渐变蓝 / 红)
│  │ 当前患者 · 数据归属        │  │
│  └──────────────────────────┘  │
│                                │
│  ┌──────────────────────────┐  │
│  │ ● 已连接 S101       [详情]│  │ 连接卡 (渐变绿 / 红)
│  │ MAC ... · 电量 89%        │  │
│  └──────────────────────────┘  │
│                                │
│  快速采集                       │
│  ┌──────┐ ┌──────┐             │
│  │ 🫀血压 │ │❤️ 心率│            │ 4 个大按钮 (2×2 grid)
│  │ 手动测 │ │自动监测│           │
│  └──────┘ └──────┘             │
│  ┌──────┐ ┌──────┐             │
│  │🩸 血氧│ │🌡️ 体温│            │
│  └──────┘ └──────┘             │
│                                │
│  ┌──────────────────────────┐  │
│  │ 今日采集                   │  │ 统计卡
│  │ 12       38      ⚠1       │  │ (血压/心率/异常)
│  │ 血压条数 心率条数 异常     │  │
│  └──────────────────────────┘  │
│                                │
│  ┌──────────────────────────┐  │
│  │ 最近测量                   │  │ 历史列表 (3-5 条)
│  │ 🫀 血压 134/91  14:40 ⚠   │  │
│  │ ❤️ 心率 78      14:32 正常 │  │
│  │ 🩸 血氧 97%     14:18 正常 │  │
│  └──────────────────────────┘  │
│                                │
├────────────────────────────────┤
│ 🏠首页  📋测量  📊数据  👤我的 │ TabBar
└────────────────────────────────┘

关键交互:

点患者卡 [切换] → 弹 wx.showModal 输入新门诊号
点连接卡 [详情] → 跳转设备扫描页 (Tab 4 复用) 或弹设备信息卡片
点 4 个快速采集按钮 → 跳到对应测量页 (Tab 2 子页)
点最近测量某条 → 跳到该指标的详情/历史页

Tab 2: 测量

┌────────────────────────────────┐
│ 智能随访 / 测量    [5.06-v10] │
├────────────────────────────────┤
│ ┌──────────────────────────┐   │
│ │ 采集中: 0012865682  [切换]│   │ 顶部薄状态条 (复用)
│ └──────────────────────────┘   │
│                                │
│ 常规体征                        │ <section-title>
│ ┌──────────────────────────┐   │
│ │ 🫀 血压       手动按表测量 ›│   │
│ │ ❤️ 心率   自动监测+手动    ›│   │ list-group
│ │ 🩸 血氧  自动全天+手动    ›│   │
│ │ 🌡️ 体温     自动+手动      ›│   │
│ │ 💧 血糖       手动测量    ›│   │
│ └──────────────────────────┘   │
│                                │
│ 进阶                            │
│ ┌──────────────────────────┐   │
│ │ 📊 ECG 心电图 心率+HRV+诊断 ›│   │
│ │ 🔄 PTT 脉搏波 传导时间     ›│   │
│ │ 💉 血液成分  尿酸/胆固醇  ›│   │
│ │ ⚖️ 身体成分  体重/BMI/体脂 ›│   │
│ └──────────────────────────┘   │
│                                │
│ 综合                            │
│ ┌──────────────────────────┐   │
│ │ 📅 日常数据   今日+历史   ›│   │
│ │ 😴 睡眠 深睡/浅睡/醒来    ›│   │
│ │ 👟 计步  步数/距离/卡路里 ›│   │
│ └──────────────────────────┘   │
├────────────────────────────────┤
│ 🏠首页  📋测量  📊数据  👤我的 │
└────────────────────────────────┘

关键交互:

点任意 measure-item → 跳到该指标的现有 page (复用现有 page 代码)
顶部"采集中"条点切换 → 同 Tab 1

Tab 3: 数据

┌────────────────────────────────┐
│ 智能随访 / 数据    [5.06-v10] │
├────────────────────────────────┤
│ [0012865682▼][0012217221]...  │ 患者切换 chip (横向滑动)
│                                │
│ 38       156      ⚠ 3         │ 数据统计 (3 个数字)
│ 血压     心率     异常项       │
│                                │
│ ┌──────────────────────────┐   │
│ │ 血压趋势 · 7 天   5/02-5/08│   │
│ │ █ █ █ █ █ █ █              │   │ ECharts 柱状图
│ │  (高血压2级红色高亮)        │   │
│ └──────────────────────────┘   │
│                                │
│ ┌──────────────────────────┐   │
│ │ 心率趋势 · 7 天 平均75bpm  │   │
│ │ ▁▁▁▂▁▁▁                    │   │
│ └──────────────────────────┘   │
│                                │
│ ┌──────────────────────────┐   │
│ │ ⚠ 异常数据                 │   │
│ │ 🫀 血压 134/91 高血压2级    │   │
│ │   5/06 14:40   [复测]      │   │
│ └──────────────────────────┘   │
│                                │
│  📤 导出CSV | 📄 生成PDF | 分享  │
│                                │
├────────────────────────────────┤
│ 🏠首页  📋测量  📊数据  👤我的 │
└────────────────────────────────┘

关键交互:

顶部 chip 切换患者 → 数据全量刷新 (调 GET /api/data?patientNo=xxx)
异常列表点 [复测] → 跳到对应测量页
导出 CSV/PDF: 客户端打包下载, 或服务端生成下载链接

Tab 4: 我的

┌────────────────────────────────┐
│ 智能随访 / 我的    [5.06-v10] │
├────────────────────────────────┤
│  设备                           │
│  ┌──────────────────────────┐  │
│  │ 🔍 设备扫描              ›│  │
│  │ 🔄 蓝牙重连    已连接   ›│  │
│  │ ✕  断开连接              ›│  │
│  │ ⬆️ 固件 OTA 升级 v1.12.03 ›│  │
│  └──────────────────────────┘  │
│                                │
│  患者管理                       │
│  ┌──────────────────────────┐  │
│  │ 👤 当前患者  0012865682  ›│  │
│  │ 📋 患者列表       4 位   ›│  │
│  └──────────────────────────┘  │
│                                │
│  偏好设置                       │
│  ┌──────────────────────────┐  │
│  │ 📐 单位设置       公制   ›│  │
│  │ 🔔 提醒设置              ›│  │
│  │ ⌚ 表盘相关              ›│  │
│  └──────────────────────────┘  │
│                                │
│  关于                           │
│  ┌──────────────────────────┐  │
│  │ ℹ️ 版本信息   5.06-v10    ›│  │
│  │ 📖 使用说明              ›│  │
│  └──────────────────────────┘  │
│                                │
│  ⚙️ 调试 (正式版隐藏)           │
│  ┌──────────────────────────┐  │
│  │ 🐛 数据日志/波形/4G/...  ›│  │
│  └──────────────────────────┘  │
├────────────────────────────────┤
│ 🏠首页  📋测量  📊数据  👤我的 │
└────────────────────────────────┘

与现有 25+ 按钮的映射

原按钮	新位置
数据管理	Tab 3 (整个 tab 替代)
蓝牙重连 / 断开连接	Tab 4 / 设备
切换服务	Tab 4 / 调试 (隐藏)
波形	Tab 4 / 调试
单位设置 / 个人信息	Tab 4 / 偏好
天气 / 表盘相关	Tab 4 / 偏好
日常数据 / 睡眠 / 计步	Tab 2 / 综合
体温手动 / 体温自动	Tab 2 / 常规体征 (合并为"体温")
ECG测量 / ECG读取 / PTT测量	Tab 2 / 进阶
身体成分 / 血液成分	Tab 2 / 进阶
联系人 / SOS / 闹钟 / 心率报警 / 久坐提醒	Tab 4 / 提醒设置 (合并子页)
运动模式 / 查找手机 / 屏幕设置 / 拍照 / 抬手亮屏 / 久坐提醒	Tab 4 / 表盘相关 (合并子页)
血压 / 血液成分 / 血糖测量	Tab 2 / 常规 / 进阶
ota	Tab 4 / 设备
ZT163常灭屏 / 4G服务	Tab 4 / 调试
安卓代码 / 日志 / GH58 等	Tab 4 / 调试

结果: 25+ 按钮 → 4 tab × 平均 5-6 项 = 用户认知负担降至原 1/5

实施方案 (设计稿 → 小程序)

阶段 1: 框架搭建 (~1 天)

app.json 加 tabBar 配置 4 个 tab + 图标资源
新建 4 个页面: pages/home/, pages/measure/, pages/data/, pages/settings/
旧 pages/index/ 内容拆解到 pages/home/, 旧 page 文件不删 (跳转复用)

阶段 2: Tab 1 首页 (~1 天)

patient-card / conn-card 复用现有 v10 less
快速采集 4 大按钮 (新组件)
今日统计 (调 server 拉数据 + 本地缓存)
最近测量列表 (本地 storage 取近 5 条)

阶段 3: Tab 2 测量 (~0.5 天)

三个 list-group 渲染 12 项, 每项跳转到现有 page (复用现成的体征采集页面)

阶段 4: Tab 3 数据 (~2 天)

患者 chip 切换 (调 /api/data?patientNo=xxx)
ECharts / F2 集成 (微信小程序版本)
异常数据规则 (血压 ≥ 140/90 算异常等)
导出 CSV 功能

阶段 5: Tab 4 我的 (~0.5 天)

list-group 渲染各项, 大部分点击跳转现有 page
调试入口 wx:if="{{isTestBuild}}" 控制显隐

阶段 6: 测试 + 上线 (~0.5 天)

BUILD_TAG → 5.06-v10
真机回归测试
微信开发者工具上传 5.6.10 选为体验版

总工时估算: ~5 天 (1 人), 不含图标设计 (建议用 emoji 兜底, 或 IconFont 替换)

风险与折中

现有 25+ 个 page 的代码不动 — 仅做导航重组, 风险极低
服务端 0 改动 — 现有 /api/data?patientNo=xxx 已支持 Tab 3 所需查询
数据通道 0 改动 — Tab 2 的"测量"跳现有 page, 数据采集逻辑完全保留 v9
图表库 — 微信小程序里 ECharts 集成有点麻烦, 备选: F2 (蚂蚁出品, 小程序原生支持) 或自己 canvas 画
回退 — 任何阶段觉得不好用, 把旧 pages/index/ 设为启动页即可秒回退到 v10

给客户/医生看原型的方式

WSL/Windows 起 server:

cd prototype && python3 -m http.server 8080

电脑浏览器: http://localhost:8080/
真机扫码: 手机和电脑同 WiFi → http://<电脑IP>:8080/
iOS 长按地址栏 → "添加到主屏幕" → 伪装成 App 体验
微信发链接: 不行, 微信限制. 改用截屏发图.

决策点 (等用户拍板)

4-tab 架构是否采纳? (主要决策)
哪些按钮折叠到调试 (默认隐藏)?
数据 Tab 用 ECharts 还是 F2?
图标用 emoji 还是设计师出图?
阶段 1-6 是否分批上线 (每阶段独立 commit + 客户灰度)?