emoon-portal/docs/p0-mobile/05-visual-and-component-guidelines.md

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	急症、高风险、失败

移动端补充：

--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 不直接输出页面代码，只返回受控组件：

{
  "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
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 确诊”；
• “无需就医”；
• “自动诊断中心”；
• “保证准确”；
• “已经排除”；
• “直接按此用药”。