# Usales 元销 · 设计系统(原型 v6.0)

全部令牌声明在 `app/globals.css` 的 `:root`;组件样式按「App 外壳 → 页面 → 组件 → 工作台」分节。原则:一套层级贯穿全部 40 个状态,不做风格拼贴;销售视角与管理者视角只换主色,不换布局语言。

## 1. 颜色角色

| 令牌 | 值 | 用途 |
|:--|:--|:--|
| `--page` | #f7f6f2 | 页面底(暖灰,长时间看不刺眼) |
| `--card` | #ffffff | 卡片 / 表格 |
| `--ink / --ink2 / --ink3` | #2d2d2a / #6f6e68 / #a3a29a | 正文 / 次级 / 弱化 |
| `--line / --line2` | #e6e4dd / #d3d1c7 | 分割线 / 描边 |
| `--side` | #1e2b33 | 侧栏(深蓝黑) |
| `--brand` | #0e7c6b | 品牌青:AI 强调、销售视角选中态、AI 助手 |
| `--blue*` | #e8f1fb / #1a63ab / #2f7fd1 | 跟进类动作、信息、主按钮(销售) |
| `--amber*` | #faeeda / #8a540e | 拜访、待确认 L2、管理者主色 |
| `--green*` | #eaf3de / #3f7014 | 关键会议、成功、已采纳、飞轮 |
| `--red*` | #fbe9e7 / #a63a2c | 风险、降级、校验错误 |

语义映射固定:动作类型图标与日程颜色统一(蓝=跟进 📞📧,橙=拜访 🚗,绿=关键会议 🤝);自主度徽标:L2 用 amber pill,L3 用中性 pill。

## 2. 字阶与间距

- 字阶:20(页面标题)/ 15(名称)/ 13.5(正文)/ 12.5(按钮、表格)/ 11.5(标签、说明)/ 10.5(元信息)
- 字体:系统中文优先 `-apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei`,无远程字体
- 间距:4 / 8 / 12 / 16 / 24;卡片内边距 16×18(紧凑 12×14)
- 圆角:6(小控件)/ 8(按钮、输入)/ 14(卡片);弹窗 16
- 阴影:卡片 1px 轻影;toast / 面板中影;弹窗重影
- 动效:页面切换 fade 220ms;加载 spinner 800ms;不做装饰性动画

## 3. 布局

- 应用画面固定 1280×800;左侧栏 200;顶栏 52;主内容最大宽 820,内部滚动
- AI 助手面板 300,展开时主内容让位,不遮挡
- 工作台外壳:顶栏 52 / 页面地图 250 / 画布自适应 / 标注 300;全部页面模式为响应式网格(≥560 每格)

## 4. 组件清单

| 组件 | 类名 | 说明 |
|:--|:--|:--|
| 行动卡 | `.card` + `.row/.act/.src/.btns` | 三要素:动作、出处、自主度;done / dim 两种终态 |
| 标签 | `.tag.tA/tW/tG/tR/tN` | 评级、阶段、抽取标签、状态 |
| 按钮 | `.b` `.b.p` `.b.q` `.b.sm` | 默认 / 主 / 次要(弱)/ 小;管理者视角主按钮自动换 amber |
| 阶段条 | `.stage-bar .st(.done-s/.cur)` | 七阶段;可点击修正;成交为终点 |
| 事件 | `.evt` `.dot` `.et/.es` | 来源图标 + 时间 + AI 摘要 + 抽取标签;新事件绿底高亮 |
| 对话框 | `.chatbox` `.chat` `.msg.ai/.me` | 辩证共识、画像冷启动共用 |
| 共识框 | `.consensus` | 绿色,含更新后的动作与采纳按钮 |
| 处理条 | `.proc` + `.steps` | 异步管线进度:接收 → 转写 → 提取 → 推断 → 动作卡 |
| 空状态 | `.empty` | 图标 + 标题 + 说明 + 下一步按钮(必须有出路) |
| 提示 | `.hint(.ok/.warn/.err)` | 解释性说明;校验错误用 err |
| 统计格 | `.statgrid .stat(.a/.g/.w)` | 管理者概览、结果摘要 |
| 表格 | `.tbl` | 表头小写灰;键值表用 `td.k` |
| 标签页 | `.tabs` | 管理者客户管理六板块 |
| 弹窗 | `.modal-bg .modal` | 成交 / 丢单结算;点遮罩关闭 |
| Toast | `.toast` | 2.2s 自动消失;用于示意型次级入口与操作反馈 |
| AI 面板 | `.ai-panel` | 头 / 上下文条 / 消息流 / 快捷 / 输入 |

## 5. 文案规则

- 简体中文,销售员级口语,不用系统腔;每条 AI 建议是"具体动作 + 出处",禁止"跟进一下"。
- AI 的话用第一人称,承认判断偏差时直说("我之前的判断偏了")。
- 所有 AI 动作标注档位:`待确认 · L2` / `AI · L3` / `L4` 内部说明。
- 对外动作按钮文案必须体现"人确认":「确认发送」「确认交接给 X(L2)」。
- 示意型入口(未展开二级页)点击后 toast 说明将打开什么,不假装已完成。

## 6. 交互规则

- 主路径端到端连通:行动卡 → 客户详情 → 上传 → 事件流 → 讨论 → 共识 → 采纳 → 成交。
- 每个非终态都有回路:弹窗有取消;表单有取消;空状态有清空 / 新增;共识可继续讨论。
- 校验:必填为空阻止提交并就地提示,不用弹窗。
- 破坏性 / 高成本动作(成交、丢单、发送)先确认,并告知后果(飞轮、归档、写入事件流)。
- 状态确定性:刷新即回到预置状态;工作台「重置状态」同效。
- 阶段修正、采纳 / 忽略、共识全部留痕,并在界面上说明"已记录为纠正 / 采纳数据"。