对比「现状」与 3 套方案。目标:状态语义清晰、会签/或签/抄送不与「待处理」琥珀撞色、 整体对齐三墙 Token(品牌绿 / 大麦黄 / 语义色),避免同屏高饱和堆叠。
会签蓝偏艳;或签与待处理同系琥珀;成功色偏 web-admin mint(#10b981)
状态对齐三墙语义色;类型用「靛蓝 / 青蓝 / 淡紫」拉开色相,全部浅底实心
状态保留浅底语义;类型改为白底描边,一眼区分「结果态」与「节点属性」
类型几乎中性灰描边,仅状态保留语义色;最克制,但会签/或签/抄送辨识变弱
状态 = 浅底实心;类型 = 白底 + 1px 描边。字号 11px / 圆角 4px / padding 1×6,与现状结构一致。
| 类别 | 文案 | class | 文字色 | 背景 | 边框 |
|---|---|---|---|---|---|
| 状态 | 已同意 / 已完成 / 已提交 | ok |
#087f57 | #e9f9f2 | — |
| 状态 | 待处理 / 进行中 | warn |
#a66b10 | #fff7e8 | — |
| 状态 | 已拒绝 / 已撤销 / 已打回 | danger |
#b42318 | #fef3f2 | — |
| 状态 | 未到达 / 已转交 / 已结束 | mute |
#5f7a6d | #f1f5f3 | — |
| 类型 | 会签 | and |
#3730a3 | #fff | #c7d2fe |
| 类型 | 或签 | or |
#0e7490 | #fff | #a5f3fc |
| 类型 | 抄送 | cc |
#6d28d9 | #fff | #ddd6fe |
| 类型 | 结束 | end |
#64748b | #fff | #e2e8f0 |