AI-Health/docs/ui-design-system.md

# 健康 App 前端 UI 设计系统

这份规范用于后续逐页精修。首页是品牌化例外，保持当前紫色背景和已有结构；以下规则主要约束普通二级页面。

## 1. 页面层级

- 标题栏：纯白背景，深色标题和返回图标。
- 页面画布：`#F7F8FA`，只负责建立内容边界，不作为卡片颜色。
- 主要内容组：纯白背景，区域间保留 12–16 px 的画布间距。
- 列表行：同一内容组内连续排列，用文字区域浅分隔线区分，不为每一行单独套卡片。
- 重点对象：报告、设备、AI 分析和关键概览可以使用独立白色卡片。

## 2. 颜色角色

- 品牌紫：通用选中、焦点、品牌按钮描边和少量重点操作。
- 模块色：只用于统一样式的图标、极浅图标底、图表曲线、小标签和状态识别。
- 中性色：页面画布、分隔线、正文层级和不可用状态。
- 语义色：绿色表示成功/正常，黄色表示提醒/等待，红色表示错误/危险，蓝色表示信息/进行中。
- 禁止模块色用于整页背景、大面积头部、大卡片底色和普通新增按钮。

## 3. 间距

- 页面左右边距：16 px。
- 页面顶部内容间距：12 px。
- 内容组间距：12–16 px。
- 列表图标与文字：12 px。
- 列表行垂直内边距：根据内容使用 12 或 16 px，不通过缩小字体制造紧凑感。

## 4. 圆角与阴影

- 所有圆角使用 `AppRadius`，不得在页面里随意新增数值。
- 连续内容组默认使用 16 px 圆角。
- 输入框和小型操作使用 10–14 px 圆角。
- 普通内容组默认无阴影、无描边。
- 浮动操作可以使用一层轻微中性阴影；同一组件不同时使用明显边框和重阴影。

## 5. 字体层级

- 页面标题：19–20 px，粗体，颜色 `textPrimary`。
- 区域标题：18 px，粗体。
- 列表主标题：16–17 px，中粗体。
- 正文和补充说明：13–15 px，保证对比度，不使用过浅小字。
- 数值、单位、份量和热量在同一行时保持基线、字号和字重协调。
- 选中状态不能改变文字大小、字重或位置。

## 6. 图标

- 全 App 优先使用同一套 Material 线性 `outlined/rounded` 图标，不混用大面积实心图标。
- 普通列表图标底座统一为 40×40 px、10 px 圆角，图标统一为 22 px。
- 不同模块可以改变图标和极浅底色，但尺寸、线条感觉、底座形状和对齐必须一致。
- 无底座的小型操作图标统一为 20–24 px，并保证至少 44 px 点击区域。

## 7. 按钮

- 通用新增：白底、紫色渐变细描边、深紫色线性加号；所有模块共用同一组件。
- 页面主要操作：优先使用白底紫色品牌描边；是否使用实心按钮由逐页任务重要性决定。
- 次要操作：白底或极浅灰底、深色文字。
- 危险操作：白底红字；只有确认删除阶段显示红色危险面。
- 新增、上传、绑定和记录属于通用操作，不跟随模块颜色。

## 8. 列表与滑动操作

- 列表行连续排列，分隔线从文字区域开始，不穿过左侧图标。
- 整行可点击，附属按钮不能缩小主点击区域。
- 删除背景默认完全隐藏，向左打开删除操作后才出现。
- 删除失败时保留真实列表数据，不提前移除前端项目。

## 9. 弹窗、表单和状态

- 弹窗、底部面板统一白色，不跟随模块色。
- 输入框焦点继续使用品牌紫，错误提示使用语义红。
- 空状态说明原因并提供一个明确下一步；加载、空、失败和未开放必须能被用户区分。
- 暂未启用的问诊和随访显示明确准备状态，不伪装成可用功能。

## 10. 逐页精修原则

- 每次只精修一个真实页面或一组完全同构页面。
- 先看真机截图，再确定该页的信息层级、内容组、操作和模块色用量。
- 不因建立设计系统而批量重排所有页面；公共组件只提供一致基础，页面布局仍按实际任务设计。