8.7 KiB
Admin 按钮与订单状态颜色清单
核对日期：2026-09-15。以下为当前工作区源码事实，不代表测试环境已部署。范围为公共按钮样式、公共状态徽标、国内订单列表/详情/审核状态、海外尾程订单列表与详情；不是所有业务模块的完整状态机盘点。清单先按源码盘点；后续已补齐的预装清单颜色映射单列记录。业务状态与状态文案未调整。
统一情况与修改入口
| 对象 | 当前统一程度 | 修改入口 |
|---|---|---|
接入 density-action 的行内按钮 |
色值、边框、悬停/禁用/焦点、尺寸集中；页面通过 data-tone 选择语义 |
apps/admin-web/src/styles/adminDensityTokens.css、adminDensity.css |
| 顶部查询/新增/提交等 Element 按钮 | 使用基础主题，与行内按钮是两套色板 | apps/admin-web/src/styles/foundation.css，Element 主题 |
StatusBadge 订单状态徽标 |
公共外观已集中；颜色仍直接写在 CSS 中；按中文文案判断类型 | apps/admin-web/src/shared/components/StatusBadge.vue、src/styles/index.css |
| 国内订单状态文案 | 状态码到文案集中；文案到颜色在另一处 | apps/admin-web/src/modules/unified-orders/status.ts |
| 尾程订单详情 | OverseasDetailShell 的 dense 分支复用 StatusBadge |
apps/admin-web/src/modules/overseas-warehouse/components/OverseasDetailShell.vue |
| 尾程订单列表 | “当前状态”直接输出文本，没有状态徽标插槽 | apps/admin-web/src/modules/overseas-warehouse/pages/LastMileOrdersView.vue |
扣货状态等 el-tag |
独立走 Element 标签主题，不等同于 StatusBadge |
对应页面 type/effect + 基础主题 |
结论：有公共入口，但尚未形成全应用唯一色板、唯一状态映射和唯一状态展示组件。修改按钮色不会同步修改订单状态徽标。
行内按钮色板
普通背景均为白色 #fff；文字与边框分别配置。默认蓝色已经按用户确认改为 #1777ff。
语义 / data-tone |
文字颜色 | 普通边框 | 悬停背景 | 现有用途示例 |
|---|---|---|---|---|
默认 / 省略或 neutral |
#1777ff |
#dfe3ee |
#f8fafc |
详情、编辑、备注、省略号 |
主要 / primary |
#1677cf |
#bfdbfe |
#eff6ff |
指定为主要操作的行内按钮 |
成功 / success |
#15803d |
#bbf7d0 |
#f0fdf4 |
启用 |
警告 / warning |
#c76500 |
#fed7aa |
#fff7ed |
审核、暂扣等需注意的操作 |
危险 / danger |
#dc2626 |
#fecaca |
#fef2f2 |
停用、删除、驳回 |
紫色 / purple |
#7c3aed |
#ddd6fe |
#f5f3ff |
测量、重置密码 |
warning/danger 是按钮操作的语义，不会根据“异常”“成功”“失败”等按钮文字自动识别。页面需要显式选择类型。
| 交互状态 | 公共规则 |
|---|---|
| 普通 | 高 28px、圆角 6px、白底、1px 描边，13px / 600 字重，padding 4px 10px |
| 悬停 | 文字保持语义色，边框变为文字同色，背景使用上表悬停色 |
| 按下 | Element active 色变量使用相同语义色和悬停背景 |
| 键盘焦点 | 2px 同语义色轮廓，外偏移 2px |
| 禁用 | 文字 #a1a1aa、边框 #e5e7eb、白底；文字颜色目前直接写在 adminDensity.css |
| 加载中 | 沿用所属按钮的语义色与 Element loading 行为，无独立 loading 色板 |
顶部按钮基础主题
| 主题 | 基础色变量 | 当前值 |
|---|---|---|
| 主要 | --cc-primary → --el-color-primary |
#667eea |
| 主要悬停 | --cc-primary-hover |
#764ba2 |
| 成功 | --cc-success → --el-color-success |
#067647 |
| 警告 | --cc-warning → --el-color-warning |
#b54708 |
| 危险 | --cc-danger → --el-color-danger |
#b42318 |
| 信息 | --cc-info → --el-color-info |
#175cd3 |
这些是基础语义值；实际按钮的实心/描边、禁用和悬停颜色还取决于 type、plain 和 Element 主题变量。不能把此表视为每个按钮最终计算样式。修改 --cc-primary 还可能影响导航、页签等，不能只为按钮颜色直接整体替换。
订单状态徽标色板
统一外观：胶囊形、最小高度 24px、padding 2px 8px、圆点 6px、间距 6px、字重 650，字号读取 --cc-list-status-font-size（基础默认 11px）。圆点使用文字色。
| 类型 | 文字 / 圆点 | 背景 | StatusBadge 当前精确匹配的中文文案 |
|---|---|---|---|
默认 neutral |
#475467 |
#f2f4f7 |
所有未匹配下面映射的文案 |
成功 success |
#067647 |
#ecfdf3 |
正常、启用、已完成、已审核、审核通过、已入库、装柜完成、派送完成、已确认、已放舱 |
警告 warning |
#b54708 |
#fffaeb |
待审核、草稿、待处理、待分配、未提交、未录入、待测量数据、待分柜、待装柜、预装柜中、变更中 |
危险 danger |
#b42318 |
#fef3f2 |
停用、已取消、已驳回、审核驳回、失败、订舱失败 |
信息 info |
#3538cd |
#eff4ff |
已受理、已订舱、已提交、运输中、处理中、拣货中、装柜中 |
注意：异常、成功 这两个字面文案本身不在映射中，直接传给 StatusBadge 会显示默认灰色；失败 在危险映射中。info 徽标的颜色与基础主题的 --cc-info 不相同。成功/警告/危险虽然当前数值与基础主题一致，但 CSS 直接写死，因此改基础变量不会同步修改徽标。
国内订单当前实际映射
由 unified-orders/status.ts 翻译后传给 StatusBadge，列表主状态和详情沿用这条链路。
| 状态码 | 文案 | 当前徽标类型 |
|---|---|---|
| DRAFT | 草稿 | warning |
| SUBMITTED / PENDING_REVIEW | 待审核 | warning |
| APPROVED | 已审核 | success |
| ACCEPTED | 已受理 | info |
| REJECTED | 已驳回 | danger |
| PROCESSING | 处理中 | info |
| COMPLETED | 已完成 | success |
| CANCELLED | 已取消 | danger |
| WAIT_MEASURE | 待测量数据 | warning |
| WAIT_PALLETIZE | 待一件代发组托 | neutral：没有专门映射 |
| WAIT_SPLIT | 待分柜 | warning |
| LOADING | 装柜中 | info |
| LOADED | 装柜完成 | success |
| DELIVERED | 派送完成 | success |
审核状态：NOT_SUBMITTED 未提交、UNRECORDED 未录入、PENDING 待审核为 warning；APPROVED 审核通过和 CONFIRMED 已确认为 success；REJECTED 审核驳回为 danger。
尾程订单当前实际映射
文案来自 overseas-warehouse/lastMilePresentation.ts。下表颜色用于已接入 dense 的尾程详情；尾程列表当前状态列仍为普通文本。
| 状态码 | 文案 | 详情当前徽标类型 |
|---|---|---|
| PENDING_ASSIGNMENT | 待分配 | warning |
| DESTINATION_ASSIGNED | 已分配目的仓 | neutral：没有专门映射 |
| INBOUND_PLANNED | 已生成入库计划 | neutral：没有专门映射 |
| PENDING_PROCESSING | 待处理 | warning |
| PROCESSING | 处理中 | info |
| COMPLETED | 已完成 | success |
| CANCELLED | 已取消 | danger |
预装清单状态
2026-09-15 根据用户截图补齐公共徽标映射；预装列表与使用同一徽标的详情同步生效，不改变业务状态、文案、权限和操作。其他入口传入相同状态文案时也使用公共语义色。
| 状态码 | 文案 | 语义 | 文字色 / 背景色 |
|---|---|---|---|
| WAIT_LOADING | 待装柜 | 等待，warning | #b54708 / #fffaeb |
| EDITING | 预装柜中 | 计划准备，warning | #b54708 / #fffaeb |
| LOADING | 拣货中 | 进行中，info | #3538cd / #eff4ff |
| COMPLETED | 装柜完成 | 完成，success | #067647 / #ecfdf3 |
| 未知状态 / 空值 | 未知状态 / — | neutral | #475467 / #f2f4f7 |
当前预装列表主要显示预装柜中和拣货中，需要直接用颜色区分：预装柜中采用橙色文字与浅橙背景，拣货中采用蓝紫文字与浅蓝背景。两者仍复用公共语义色，不新增页面私有色值。
后续统一时需要确定的范围
- 默认蓝
#1777ff已确认；是否将行内主要蓝#1677cf也统一为该值，尚未修改。 - 按钮、徽标可共享成功/警告/危险等语义，但文字、背景、边框分别使用变量，避免把徽标改成按钮外观。
- 状态样式统一放在公共徽标中，颜色提取到公共变量；业务模块按状态码显式提供文案和语义，避免改中文文案导致颜色变化。
- 补齐待组托、已分配目的仓、已生成入库计划及异常等映射，并统一尾程列表与详情的状态呈现。以上为待调整项，本次未改实现。
- 对未接入
density-action、使用el-tag或非 dense 详情分支的入口另行定向接入，不能宣称改一处已覆盖全应用。