140 lines
9.3 KiB
Markdown
140 lines
9.3 KiB
Markdown
# 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` |
|
||
|
||
当前预装列表主要显示预装柜中和拣货中，需要直接用颜色区分：预装柜中采用橙色文字与浅橙背景，拣货中采用蓝紫文字与浅蓝背景。两者仍复用公共语义色，不新增页面私有色值。
|
||
|
||
## 出库单状态
|
||
|
||
列表与详情使用公共状态徽标；已出库从缺失映射的灰色改为完成绿色。列表明确识别待出库，不再将待出库或未知状态统一显示为拣货中。
|
||
|
||
| 状态码 | 文案 | 语义 | 文字色 / 背景色 |
|
||
|---|---|---|---|
|
||
| WAIT_OUTBOUND | 待出库 | warning | `#b54708` / `#fffaeb` |
|
||
| PICKING | 拣货中 | info | `#3538cd` / `#eff4ff` |
|
||
| PICKED | 已拣货 | warning（待完成出库） | `#b54708` / `#fffaeb` |
|
||
| OUTBOUNDED | 已出库 | success | `#067647` / `#ecfdf3` |
|
||
| CANCELLED | 已取消 | danger | `#b42318` / `#fef3f2` |
|
||
|
||
## 后续统一时需要确定的范围
|
||
|
||
1. 默认蓝 `#1777ff` 已确认；是否将行内主要蓝 `#1677cf` 也统一为该值，尚未修改。
|
||
2. 按钮、徽标可共享成功/警告/危险等语义，但文字、背景、边框分别使用变量，避免把徽标改成按钮外观。
|
||
3. 状态样式统一放在公共徽标中，颜色提取到公共变量；业务模块按状态码显式提供文案和语义，避免改中文文案导致颜色变化。
|
||
4. 补齐待组托、已分配目的仓、已生成入库计划及异常等映射，并统一尾程列表与详情的状态呈现。以上为待调整项，本次未改实现。
|
||
5. 对未接入 `density-action`、使用 `el-tag` 或非 dense 详情分支的入口另行定向接入，不能宣称改一处已覆盖全应用。
|