# 05｜视觉语言与标准组件

## 1. 设计方向

P0 移动端沿用现有 Demo 的可信、克制、医疗科技感，不重新发明品牌风格。

保留：

- 医梦紫作为主要操作色；
- 青色作为在线、完成和辅助强调；
- 浅蓝白背景；
- 白色卡片和细边框；
- 清晰的风险色；
- 大圆角但不过度“玩具化”；
- 中文系统字体和高可读性。

调整：

- 从桌面三栏变为单列移动端；
- 从“医生形象 + 对话 + 右侧任务卡”变为“首页发现 + 独立任务页”；
- 移除最小宽度 1280px 的桌面限制；
- 任务卡片在当前上下文中全宽展示；
- 底部固定主操作和一级导航；
- 不在移动端保留占空间的静态医生人物侧栏。

## 2. 设计令牌建议

直接继承现有 `src/theme/tokens.css` 的品牌基础：

| 令牌 | 当前值 | 移动端用途 |
|---|---:|---|
| `--accent` | `#2B1F99` | 主按钮、选中、关键链接 |
| `--accent-light` | `#3AD4D8` | 完成、在线、辅助强调 |
| `--bg` | `#F7FBFF` | 页面背景 |
| `--surface` | `#FFFFFF` | 卡片、输入区、底部栏 |
| `--fg` | `#16133A` | 主文字 |
| `--muted` | `#69708A` | 次级说明 |
| `--border` | `#DFE7F7` | 分割线与卡片边框 |
| `--warn` | `#F0A020` | 一般风险、注意 |
| `--danger` | `#E05555` | 急症、高风险、失败 |

移动端补充：

```css
--page-gutter: 16px;
--header-height: 52px;
--bottom-nav-height: 64px;
--bottom-action-height: 72px;
--touch-target-min: 44px;
--card-radius: 16px;
--sheet-radius: 20px;
```

## 3. 字体与层级

| 层级 | 建议字号 | 用途 |
|---|---:|---|
| 页面标题 | 20–22px | 页面/任务名称 |
| 区块标题 | 18px | 智能服务、最近记录 |
| 卡片标题 | 16px | 服务和结果 |
| 正文 | 15–16px | 说明、对话 |
| 辅助信息 | 13px | 时间、来源、状态 |
| 法务/演示提示 | 12px | Mock、免责声明 |

重要医疗提示不使用过小字号。

## 4. 标准组件

### 4.1 导航组件

- 医院品牌头部；
- 任务页头部（返回、标题、步骤）；
- 底部一级导航；
- 顶部 Mock 环境标记。

### 4.2 入口组件

- 统一助手输入框；
- 快捷意图 Chip；
- 主服务卡；
- 次服务卡；
- 待办卡；
- 最近记录行。

### 4.3 对话与信息收集

- 患者消息；
- 助手说明；
- 单选/多选；
- 分组表单；
- 日期/院区筛选；
- 自由补充输入；
- 图片/PDF 上传；
- 拍照指导；
- 患者归属确认。

### 4.4 业务选择

- 科室推荐卡；
- 医生卡；
- 号源 Chip/列表；
- 挂号确认摘要；
- Mock 支付卡；
- 锁号倒计时；
- 重新查询入口。

### 4.5 医疗结果

- 风险提示卡；
- 指标异常卡；
- 检查发现卡；
- 联合解读折叠区；
- 舌象特征卡；
- 体质/证候结果卡；
- 行动建议卡；
- 知识来源与服务边界。

### 4.6 任务状态

- 进度步骤条；
- 处理中；
- 已保存/稍后继续；
- 完成结果；
- 失败与重试；
- 转人工/线下指引；
- 空状态。

## 5. 组件使用原则

1. 一屏只保留一个明确主操作；
2. 有风险时，风险卡位于内容顶部且不能被折叠；
3. 有副作用的动作必须二次确认；
4. 长流程必须显示进度和退出保存；
5. 选择用卡片/表单，不用长聊天文字模拟列表；
6. 结果使用分层卡片，不输出整页大段文章；
7. 每个任务都显示当前属于哪个患者；
8. 所有 Mock 事务结果清楚标记“演示”；
9. 相同语义使用相同组件，不为每个智能体设计一套视觉语言；
10. 点击目标不小于 44 × 44px。

## 6. 标准输出 UI Schema（P0 建议）

FastGPT/Agent 不直接输出页面代码，只返回受控组件：

```json
{
  "taskId": "TASK-001",
  "capabilityCode": "REPORT_INTERPRETATION",
  "taskStatus": "WAITING_USER",
  "screen": {
    "title": "报告智能解读",
    "progress": {
      "current": 1,
      "total": 4,
      "label": "上传报告"
    },
    "blocks": [
      {
        "type": "FILE_UPLOAD",
        "id": "report-file",
        "accept": ["image/*", "application/pdf"],
        "title": "上传检验或检查报告"
      },
      {
        "type": "QUICK_ACTIONS",
        "actions": [
          {"id": "mock-cbc", "label": "使用血常规示例"}
        ]
      },
      {
        "type": "DEMO_NOTICE",
        "text": "当前使用 Mock 数据进行演示"
      }
    ]
  },
  "traceId": "TRACE-001"
}
```

P0 至少支持：

```text
TEXT
QUICK_ACTIONS
SINGLE_SELECT
MULTI_SELECT
FORM
FILE_UPLOAD
IMAGE_CAPTURE
RISK_ALERT
DEPARTMENT_CARD
DOCTOR_CARD
TIME_SLOT_CARD
REPORT_SUMMARY
INDICATOR_LIST
TONGUE_RESULT
CONFIRM_ACTION
TASK_PROGRESS
RESULT_SUMMARY
ERROR_STATE
DEMO_NOTICE
```

## 7. 文案边界

建议使用：

- “辅助评估”；
- “风险提示”；
- “建议尽快就医”；
- “建议结合医生意见”；
- “当前为演示规则”；
- “可能相关”；
- “需要进一步确认”。

避免使用：

- “AI 确诊”；
- “无需就医”；
- “自动诊断中心”；
- “保证准确”；
- “已经排除”；
- “直接按此用药”。