681 lines
77 KiB
Markdown
681 lines
77 KiB
Markdown
# Web 管理端 UI 规范（Fresh Mint）
|
||
|
||
> **设计源文件**：`fresh-mint-green.html`（中科兴皖一体化门户 · 配送调度演示页）
|
||
> **适用范围**：`web-admin` 工程（Vue 3 + Element Plus + SCSS/Tailwind）。实现时通过 **CSS 变量 + Element 主题变量 + 少量全局覆盖** 对齐本规范；**类名可与 demo 不同，但视觉参数以下文为准**。
|
||
>
|
||
> **Hash 路由约定（与当前工程一致）**：模板与参考页统一挂在 **`#/demo/*`**（侧栏「Demo」菜单）。下文凡出现 **`#/demo/console`** 指工作台；**`#/demo/unit` / `product` / `category` / `user` / `order`** 等同理。§13 修订记录中仍可能出现的 **`#/system/*`、`#/delivery/*`、`#/business/*`、`#/order/supplier-settlement`、`#/order/client-settlement`** 等为**历史路由**（对应页面可能已裁剪），实现时以 **仍在仓库内的 Demo 页** 与组件源码为准。
|
||
|
||
---
|
||
|
||
## 目录
|
||
|
||
1. [设计理念与原则](#1-设计理念与原则)
|
||
2. [设计 Token（CSS 变量）](#2-设计-tokencss-变量)
|
||
3. [全局与布局结构](#3-全局与布局结构)
|
||
4. [页面级元素](#4-页面级元素)
|
||
5. [筛选区与带清除输入](#5-筛选区与带清除输入)（含 §5.5–§5.6 树形选择）
|
||
6. [按钮体系与 Loading](#6-按钮体系与-loading)
|
||
7. [列表区、表格与分页](#7-列表区表格与分页)
|
||
8. [树形与子表（进阶）](#8-树形与子表进阶)
|
||
9. [弹窗、遮罩与详情视图](#9-弹窗遮罩与详情视图)
|
||
10. [表单扩展、迷你表与上传](#10-表单扩展迷你表与上传)
|
||
11. [图标与无障碍](#11-图标与无障碍)
|
||
12. [业务状态色（与订单/配送枚举）](#12-业务状态色与订单配送枚举)
|
||
13. [实现清单（web-admin 改造对照）](#13-实现清单web-admin-改造对照)
|
||
14. [附录 A：权威来源](#14-附录-a权威来源)
|
||
15. [附录 B：脚本与动态行为](#15-附录-b脚本与动态行为)
|
||
|
||
---
|
||
|
||
## 1. 设计理念与原则
|
||
|
||
- **风格**：现代、清爽、偏 B 端后台；主色为 **薄荷绿（Emerald）**，中性色以 **Slate** 系为主。
|
||
- **强调色**（与 demo HTML 注释一致）：绿色主要用于 **导航选中、主按钮、主状态标签**；页面底为极淡观感（`--bg-page`），**卡片/面板仍为白**。
|
||
- **避免一屏多种高饱和彩色**；次要信息用 **`.tag.muted`**、**`--text-muted`**。
|
||
- **字体**：`Inter`（字重 400/500/600/700 按需加载）+ `-apple-system, sans-serif`。
|
||
- **正文**：`font-size: 14px`，`line-height: 1.5`（`body`）。
|
||
- **圆角层级**：面板/大卡片 **`--radius` = 10px**；按钮、输入、上传区等 **8px**；行内操作 **`.btn-op` 6px**；小标签、checkbox 等见各节。
|
||
|
||
---
|
||
|
||
## 2. 设计 Token（CSS 变量）
|
||
|
||
与 demo `:root` **色值一致**；`web-admin` 可映射到 `--el-color-primary` 等，但 **勿随意改色值**。
|
||
|
||
| Token | 值 | 用途 |
|
||
|-------|-----|------|
|
||
| `--primary` | `#10b981` | 主色、主按钮、当前分页、进度条、checkbox 选中、Tab 下划线等 |
|
||
| `--primary-dark` | `#059669` | hover、导航选中字色、金额列、`.sel-num`、激活 Tab 字色 |
|
||
| `--primary-bg` | `#ecfdf5` | 浅绿背景、统计图标区、合计行、树形父行 hover、view-hero 渐变起点等 |
|
||
| `--text` | `#1e293b` | 主文字 |
|
||
| `--text-muted` | `#64748b` | 次要文字、表头、面包屑、分页说明、summary 默认色 |
|
||
| `--border` | `#d9e8e2` | 主边框 |
|
||
| `--bg-page` | `#fefefe` | 页面背景 |
|
||
| `--surface` | `#ffffff` | 卡片、侧栏、顶栏、单元格与斑马纹中的「浅白」格 |
|
||
| `--table-head` | `#f8fafc` | 表头、列表工具栏、弹窗底栏、`.tag.muted` 背景 |
|
||
| `--row-alt` | `#fafafa` | 斑马纹偶数行、hover 侧栏 summary、输入清除按钮 hover 等 |
|
||
| `--row-hover` | `#f1f5f9` | 表格行 hover |
|
||
| `--shadow` | `0 1px 3px rgba(0,0,0,0.05)` | 卡片/面板 |
|
||
| `--radius` | `10px` | 面板、对话框、大卡片、Tab 刷新遮罩圆角 |
|
||
| `--content-padding` | `24px` | 主内容区、顶栏水平 padding |
|
||
|
||
**辅助色（demo 写在组件内，建议同步为 token）**
|
||
|
||
| 场景 | 色值 |
|
||
|------|------|
|
||
| 警告统计卡 `.stat.warn` 图标区背景 | `#fffbeb` |
|
||
| 同上边框 | `rgba(217, 119, 6, 0.2)` |
|
||
| 同上文字/数字 | `#d97706` |
|
||
| 遮罩 `.backdrop` | `rgba(15, 23, 42, 0.35)` |
|
||
| Loading 按钮灰字/灰底（`.is-loading`） | 字 `#94a3b8`，底 `#f1f5f9`，边 `#cbd5e1` |
|
||
| Loading 小环边框 | `#cbd5e1`，顶 `#64748b` |
|
||
|
||
**焦点环（input / select / textarea）**
|
||
|
||
- `outline: none`（由组件控制）
|
||
- `border-color: var(--primary)`
|
||
- `box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2)`
|
||
|
||
**顶部进度条 `.top-progress-bar`（可选，如路由加载）**
|
||
|
||
- `position: fixed`，`top/left/right: 0`，**高度 3px**，`z-index: 9999`，`pointer-events: none`
|
||
- 默认 `opacity: 0`；**`.is-active`** 时 `opacity: 1`
|
||
- 条带（`::after`）：宽约 **40%** 父级，背景 `linear-gradient(90deg, var(--primary), #34d399)`，动画 `top-progress-slide` **0.85s** ease-in-out infinite
|
||
|
||
---
|
||
|
||
## 3. 全局与布局结构
|
||
|
||
### 3.1 根布局 `.layout`
|
||
|
||
- `display: flex`，`min-height: 100vh`
|
||
|
||
### 3.2 侧栏 `.sidebar`
|
||
|
||
- **宽度**：`220px`，`flex-shrink: 0`
|
||
- **背景**：`var(--surface)`，**右边框** `1px solid var(--border)`
|
||
- **内边距**：`24px 16px`
|
||
|
||
### 3.3 Logo `.logo` / `.logo span`
|
||
|
||
- **字号**：`16px`，**字重**：`700`，**字色**：`var(--text)`
|
||
- **内边距**：`0 12px 20px`，**下边距**：`8px`，**下边框**：`1px solid var(--border)`
|
||
- 品牌强调段：**`span`** 使用 `color: var(--primary)`
|
||
|
||
### 3.4 导航分组 `.nav-details`
|
||
|
||
- `border: none`，`margin: 0 0 4px`，`padding: 0`
|
||
|
||
**分组标题 `summary`（选择器：`.nav-details > summary`）**
|
||
|
||
- 隐藏默认 marker：`.nav-details > summary::-webkit-details-marker { display: none }`
|
||
- **布局**：`display: flex`，`align-items: center`，`justify-content: space-between`
|
||
- **内边距**：`8px 12px`，**圆角**：`var(--radius)`
|
||
- **字号**：`12px`，**字重**：`700`，**字色**：`var(--text-muted)`，`letter-spacing: 0.02em`，`user-select: none`
|
||
- **右侧箭头（`::after`）**：`6×6px` 方块，用 `border-right` + `border-bottom` **2px** `var(--text-muted)` 画 chevron，默认 `rotate(-45deg)`；**`[open]`** 时 `rotate(45deg)`，`margin-top: -2px`；`opacity: 0.7`，`transition: transform 0.2s ease`
|
||
- **hover**：背景 `var(--row-alt)`，字色 `var(--text)`
|
||
|
||
**子导航容器 `.nav-sub`**
|
||
|
||
- `padding: 2px 0 6px 4px`，`margin-left: 4px`，**左侧竖线** `2px solid var(--border)`
|
||
|
||
**链接 `.nav a`**
|
||
|
||
- `display: block`，`padding: 8px 12px 8px 14px`，`margin: 2px 0`，`border-radius: var(--radius)`
|
||
- **默认**：`color: var(--text-muted)`，`font-weight: 500`，`font-size: 13px`，无下划线
|
||
- **hover**：背景 `var(--row-alt)`，字色 `var(--text)`
|
||
- **active（`.active`）**：背景 `var(--primary-bg)`，字色 `var(--primary-dark)`，`font-weight: 600`
|
||
|
||
### 3.5 侧栏底部 `.nav-foot`
|
||
|
||
- `margin-top: 24px`，`padding: 16px 12px 0`，`font-size: 13px`
|
||
- 内链接：`color: var(--text-muted)`，无下划线；**hover**：`color: var(--primary-dark)`
|
||
|
||
### 3.6 主列 `.main`
|
||
|
||
- `flex: 1`，`min-width: 0`，`display: flex`，`flex-direction: column`，`width: 100%`
|
||
|
||
### 3.7 顶栏 `.header`
|
||
|
||
- **高度**：`56px`
|
||
- **水平 padding**：`0 var(--content-padding)`（即左右 **24px**）
|
||
- `display: flex`，`align-items: center`，`justify-content: space-between`
|
||
- **背景**：`var(--surface)`，**下边框** `1px solid var(--border)`
|
||
|
||
**面包屑 `.crumb`**
|
||
|
||
- `font-size: 13px`，`color: var(--text-muted)`
|
||
- **`b`**：`color: var(--text)`，`font-weight: 600`
|
||
|
||
### 3.8 内容区 `.content`
|
||
|
||
- `width: 100%`，`max-width: none`，`flex: 1`，`padding: var(--content-padding)`，`box-sizing: border-box`
|
||
- `display: flex`，`flex-direction: column`，`min-height: 0`（便于内部滚动）
|
||
|
||
### 3.9 Tab 条 `.tabs-strip` / `.tab-chip`
|
||
|
||
**`.tabs-strip`**
|
||
|
||
- `display: flex`，`flex-wrap: wrap`，`align-items: flex-end`，`gap: 4px`
|
||
- `margin: 0 0 16px`，`padding: 0 2px 10px`，**下边框** `1px solid var(--border)`
|
||
|
||
**`.tab-chip`**
|
||
|
||
- 重置 appearance，**边框** `1px solid var(--border)`，**背景** `var(--surface)`，**字色** `var(--text-muted)`
|
||
- **字号**：`13px`，**字重**：`600`，`font-family: inherit`
|
||
- **内边距**：`8px 14px`，**圆角**：`8px 8px 0 0`（上圆角 Tab）
|
||
- `margin-bottom: -11px`，`position: relative`，`z-index: 1`
|
||
- **最大宽度**：`220px`，超出省略号
|
||
- **hover**：字色 `var(--text)`，背景 `var(--row-alt)`
|
||
- **激活 `.is-active`**：字色 `var(--primary-dark)`，背景 `var(--surface)`，**底边与内容区融合** `border-bottom-color: var(--surface)`，**内阴影下划线** `box-shadow: 0 -2px 0 var(--primary) inset`，`z-index: 2`
|
||
|
||
### 3.10 Tab 内容挂载与刷新态
|
||
|
||
**`.tab-panel-mount`**：`flex: 1`，`min-height: 0`，`position: relative`
|
||
|
||
**`.tab-panel`**
|
||
|
||
- 默认 `display: none`，切换动画 `tab-fade-in` **0.2s** ease（透明度 0.85→1）
|
||
- **`.is-active`**：`display: block`
|
||
|
||
**`.tab-panel.is-refreshing`（加载中）**
|
||
|
||
- `position: relative`，`pointer-events: none`，`min-height: 160px`
|
||
- **`::before`**：全屏遮罩 `background: rgba(255,255,255,0.55)`，`z-index: 20`，`border-radius: var(--radius)`
|
||
- **`::after`**：居中 spinner **28×28px**，`left: 50%`，`top: 48px`，`margin-left: -14px`，边框 `3px solid var(--border)` 且 **`border-top-color: var(--primary)`**，圆角 50%，动画 `tab-spin` **0.7s** linear infinite，`z-index: 21`
|
||
|
||
---
|
||
|
||
## 4. 页面级元素
|
||
|
||
### 4.1 页标题 `.page-head`
|
||
|
||
- `margin-bottom: 16px`
|
||
- **`h1`**：`margin: 0 0 4px`，`font-size: 20px`，`font-weight: 700`，`letter-spacing: -0.02em`
|
||
- **`.desc`**：`margin: 0`，`color: var(--text-muted)`，`font-size: 13px`，`line-height: 1.45`，`max-width: 560px`（可选）
|
||
|
||
### 4.2 统计卡片 `.stats` / `.stat`
|
||
|
||
- **`.stats`**：`display: grid`，`grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))`，`gap: 12px`，`margin-bottom: 16px`
|
||
- **`.stat`**：背景 `var(--surface)`，边框 `1px solid var(--border)`，圆角 `var(--radius)`，内边距 `12px 14px`，`box-shadow: var(--shadow)`，`min-height: 112px`，纵向 flex 间距 `8px`
|
||
- **`.stat-ic`**：约 **44×44px**，圆角 **10px**，flex 居中，背景 `var(--primary-bg)`，字/图标色 `var(--primary-dark)`，边框 `1px solid rgba(16, 185, 129, 0.12)`；内 SVG **24×24**
|
||
- **`.stat .k`**：`font-size: 14px`，`color: var(--text)`，`font-weight: 600`
|
||
- **`.stat .v`**：`font-size: 22px`，`font-weight: 700`，`letter-spacing: -0.02em`，`font-variant-numeric: tabular-nums`
|
||
- **`.stat .hint`**：`font-size: 11px`，`color: var(--text-muted)`，`margin-top: 4px`
|
||
- **`.stat.warn`**：图标区背景 `#fffbeb`，边框 `rgba(217,119,6,0.2)`，图标与数值/ hint 色 `#d97706`（见 §2）
|
||
|
||
**工作台**（`#/demo/console`；**当前仓库为轻量入口页**，以下统计/图表白述为**历史版式参考**。根容器 **`console-container`**）：页头 **`page-head` + `h1` + `page-desc`（§4.1）**；**时效预警条**与全局 **`console-container .alert-bar`** 一致（琥珀底 **`#fffbeb`**、边 **`#fde68a`**）。**数据概览（指标区）**的盒型与 **`fresh-mint-green.html`** 的 **`.stats` / `.stat`** 同构：**`stat-hd` + `stat-ic`**（默认 **`#ecfdf5` / `#059669`**，**`44×44px`**）+ **`stat-main`**（**`.k`** 指标名、**`.stat-side`** 内 **`.v` / `.hint`**）；**待配送**等需强调预警的卡片加 **`.warn`**（图标区 **`#fffbeb` / `#d97706`**，**`.v` 与 `.hint`** 同步琥珀色，与 demo **`.stat.warn`** 一致）。**不含**独立「快捷菜单」区块（导航以侧栏为准）。**近30日趋势**：**`trend-charts-panel`** 内 **`trend-charts-grid`** 双列（窄屏单列）**`ArtLineChart`**（面积浅绿），分别展示每日营业额（元）与每日订单总数（笔），数据 **`GET /web/admin/statistics/orders/trend?days=30`**。**今日各区域与客户**：**`region-today-panel`** 内 **`region-today-split`** 双列（窄屏单列）；**`title-bar-heading`** 用于「近30日趋势」「今日各区域」等标题时由 **`App.vue`** 规则切换为绿色竖条（**`::before`**），与 **`h2.title-bar-heading`**（**`app.scss`**）一致。左：**`RegionTodayDualBarChart`**（区域营业额 + 订单笔，**`/statistics/orders/today-by-region`**）；右：**`RegionTodayDualBarChart`**（客户下单金额 + 商品数量，**`/statistics/orders/today-by-client`**），子标题 **`region-today-subtitle`** 带绿色小竖条。**最新订单**：**`section.panel`** + **`panel-top`** + **`list-body list-wrap`**（顶 **`border-top`**、**`list-wrap`** **`border-radius: 0 0 10px`** 与业务列表页一致）+ **`el-table`** **`list-table` + `stripe`**（**勿**加 **`border`**，与 **`#/demo/order`** 等主表一致），**`row-key="id"`**，金额列 **`#059669`**；**「查看更多」**为 **`type="primary"` `link`**。全局 **`el-ui.scss`**：**`console-container .el-table`** 与 **`page-container .el-table`** 共用表头/hover token；**`console-container .el-button--primary`** 与菜单页主按钮同色链一致。
|
||
|
||
### 4.3 面板 `.panel` / `.panel-top`
|
||
|
||
- **`.panel`**：背景 `var(--surface)`，边框 `1px solid var(--border)`，圆角 `var(--radius)`，`box-shadow: var(--shadow)`，`overflow: hidden`
|
||
- **`.panel-top`**：`padding: 10px 16px`，下边框，背景 `var(--surface)`，`display: flex`，`flex-wrap: wrap`，`align-items: center`，`justify-content: space-between`，`gap: 8px`
|
||
- **`.panel-top h2`**：`margin: 0`，`font-size: 14px`，`font-weight: 600`，`display: flex`，`align-items: center`，`gap: 8px`
|
||
- **`.panel-ic`**（标题前图标）：`18×18px`，`color: var(--primary-dark)`
|
||
- **`.tools`**：`display: flex`，`flex-wrap: wrap`，`gap: 8px`，`align-items: center`
|
||
|
||
---
|
||
|
||
## 5. 筛选区与带清除输入
|
||
|
||
### 5.1 筛选区 `.filter-block`
|
||
|
||
- `padding: 12px 16px 10px`，下边框 `1px solid var(--border)`，背景 `var(--surface)`
|
||
- **`.filter-form`**：`margin: 0`
|
||
- **`.filter-grid`**：`display: grid`，默认 **`repeat(4, 1fr)`**，`gap: 10px 14px`，`margin-bottom: 10px`
|
||
- 宽 ≤ **1100px**：**2 列**
|
||
- 宽 ≤ **560px**：**1 列**
|
||
- **`.filter-field label`**：`display: block`，`font-size: 11px`，`font-weight: 500`，`color: var(--text-muted)`，`margin-bottom: 4px`
|
||
- **`.filter-field .input` / `.select`**：`width: 100%`，`min-width: 0`
|
||
|
||
### 5.2 控件 `.input` / `.select`（筛选内与通用一致）
|
||
|
||
- **高度**：`36px`，水平 `padding: 0 12px`，**圆角**：`8px`，**边框**：`1px solid var(--border)`，**字号**：`14px`，**背景**：`var(--surface)`，**字色**：`var(--text)`
|
||
- **`.select`**：`appearance: none`，自定义下拉箭头 SVG 背景，**右 padding** `32px`，箭头距右 `12px` center
|
||
- **placeholder（强约束）**：颜色使用更轻的 Slate（建议 `#94a3b8`），字号 **`13px`**（略小于正文），且 `opacity: 1`（避免浏览器默认变淡导致不同端不一致）。
|
||
|
||
### 5.3 展开区与操作行
|
||
|
||
- **筛选区内部横向分割**：多行检索条件（含响应式栅格换行）、**`.filter-extra`** 与 **`.filter-actions`** 之间 **不使用** 横向分割线（勿用 `border-top` 虚线/实线区分行）；仅用 **`gap` / `padding-top` / `margin-top`** 做呼吸间距，避免「行与行之间一条线」的割裂感。筛选项区域与下方 **列表体** 的分界仍按 **§7**（如 **`.list-body`** 顶 `border-top` 或 **`.filter-block`** 底边），与「筛选内部」区分开。
|
||
- **`.filter-extra`**：`padding-top: 10px`，`margin-top` 约 **8px**（相对上一块栅格），**无**上边框
|
||
- **`.filter-hint`**：`margin: 0 0 8px`，`font-size: 11px`，`color: var(--text-muted)`
|
||
- **`.filter-actions`**：`display: flex`，`flex-wrap: wrap`，`align-items: center`，`justify-content: space-between`，`gap: 10px`，`padding-top: 10px`，`margin-top` 约 **10px**，**无**上边框
|
||
- **`.filter-actions-end`**：`display: flex`，`gap: 8px`，`align-items: center`
|
||
- **`.btn-link`**：`border: none`，背景透明，`color: var(--primary-dark)`，`font-weight: 600`，`padding: 0 8px`，`height: 36px`；**hover**：背景 `var(--primary-bg)`，`border-radius: 8px`
|
||
|
||
### 5.4 带清除的输入 `.input-clear-wrap` / `.input-clear`
|
||
|
||
- **`.input-clear-wrap`**：`position: relative`，`width: 100%`，`display: block`
|
||
- **`.input-clear-wrap .input`**：`padding-right: 34px`（为清除钮留空）
|
||
- **`.input-clear`**（绝对定位于右侧）：`right: 4px`，`top: 50%`，`transform: translateY(-50%)`，**28×28px**，`border: none`，`border-radius: 6px`，背景透明，`color: var(--text-muted)`，`display: flex` 居中
|
||
- **hover**：背景 `var(--row-alt)`，字色 `var(--text)`
|
||
- **focus-visible**：`outline: 2px solid var(--primary)`，`outline-offset: 1px`
|
||
- **`[hidden]`**：`display: none !important`
|
||
|
||
### 5.5 筛选区树形选择 `el-tree-select`（下拉本级名、选中全路径）
|
||
|
||
- **场景**：检索条件为**多级分类**等树形数据时，**下拉树节点**仅展示**本级名称**（结构已表达层级，避免每行重复冗长前缀）；选中收起后，输入框内回显 **自根到当前节点的全路径**（如 `一级分类 / 二级分类 / 三级分类`），避免仅末级名称产生歧义。
|
||
- **实现要点**：树数据里 **`label` 仍用本级名称**。`el-tree-select` 内部基于 `ElSelect`，可将 **`#label` 插槽** 透传至 Select，在插槽内根据当前选中 `value`（节点 id）在**扁平分类列表**中沿 `parentId` 向上拼接全路径作为展示文案；**`filter-node-method`** 建议同时匹配本级名与全路径，便于用上级关键词检索。
|
||
- **落地参考**：`#/demo/product` 筛选与表单「商品分类」。
|
||
|
||
### 5.6 树形业务数据全链路展示规律（通用，不限于商品分类）
|
||
|
||
凡业务字段对应 **树形主数据**（如商品分类、未来可能出现的组织树、区域树等），在 `web-admin` 中遵循同一套 **「面板树选 / 全路径回显」** 规律，避免有的页面只显示末级名、有的显示整路径，造成体验不一致。
|
||
|
||
| 场景 | 展示规则 |
|
||
|------|----------|
|
||
| **下拉 / 树形选择器展开态** | 以 **树结构** 呈现；每个节点文案使用 **本级名称**（不必在每行重复拼接父级）。 |
|
||
| **选择器收起后的输入框** | 展示 **自根节点到当前选中节点的全路径**，各级名称用分隔符连接（与下文 **路径分隔符** 一致）。 |
|
||
| **列表表格列、只读摘要、查看类弹窗、导出字段** | 同样展示 **全路径**（有 `id` 时由前端用主数据拼路径；若接口已返回完整路径字符串也可直接展示）。 |
|
||
| **表单内可编辑树选** | 与筛选区一致：展开树用本级名；选中后输入框用 **全路径**（通常通过 `#label` 插槽 + 扁平列表回溯实现）。 |
|
||
|
||
**路径分隔符**：统一为 **` / `**（半角斜杠两侧各一空格），与本文 §9.8 查看弹窗、商品查看等现有实现一致；勿在同一产品内混用无空格 `/` 或其它符号。
|
||
|
||
**实现工具（`web-admin`）**
|
||
|
||
- 手上有 **扁平列表**（含 `id`、`parentId`/`parent_id`、`name`）：使用 **`buildTreePathLabelFromFlat`**（见 `web-admin/src/utils/tree-path.ts`）。
|
||
- 手上有 **树形根数组**（`children` 嵌套）：使用 **`buildPathLabelMapFromTreeRoots`** 预计算 `id → 全路径`，供表格/卡片多次渲染。
|
||
- 需要 **「有路径用路径，否则用接口给的末级名」**：使用 **`resolveTreePathDisplay`**。
|
||
- 仅有末级名、且 **无** `id`、无法关联主数据时：只能展示接口文案；**推荐接口**在可行时返回 `categoryId`（或对应树节点 id）以便前端拼路径。
|
||
|
||
**已对齐页面（随改造持续补充）**：`#/demo/product`（列表列、筛选/表单树选、导出、查看弹窗组件）；原询价报价页已裁剪，分类树路径映射与 **`#/demo/category`** / **`#/demo/product`** 一致。
|
||
|
||
---
|
||
|
||
## 6. 按钮体系与 Loading
|
||
|
||
### 6.1 类型一览
|
||
|
||
| 类名 | 规格 | 说明 |
|
||
|------|------|------|
|
||
| **`.btn`** | 高 **36px**，左右 **14px**，圆角 **8px**，字 **14px/600**，边 `1px solid var(--border)`，白底 | 次要、批量删除、导入导出等并列操作（demo 批量删除为**中性**，非必选红） |
|
||
| **`.btn-primary`** | 背景/边框 `var(--primary)`，白字；hover 背景/边框 `var(--primary-dark)` | 查询、新增等主行动 |
|
||
| **`.btn-op`** | 高 **28px**，左右 **8px**，圆角 **6px**，字 **12px/600** | 表格行内操作；hover：背景 `var(--primary-bg)`，边 `var(--primary)`，字 `var(--primary-dark)`；**`.primary`** 小号实心主色 |
|
||
| **`.btn-icon`** | 与 `.btn` 同高 **36px** 体系；**迷你表内**可压到 **28px**（见 §10） | 行内「删除」等 |
|
||
| **`.pager-btn`** | 继承 `.btn` | 上一页/下一页 |
|
||
| **`.btn-block`** | `width: 100%`，`height: auto`，`min-height: 34px`，`padding: 8px`，字 **12px**，`line-height: 1.3` | 块级按钮 |
|
||
|
||
**Element Plus 映射**：`type="primary"` → 主实心绿；`default`/`plain` → 中性描边；表格小按钮 → `size="small"` + 皮肤对齐 `.btn-op`；危险色仅在 **MessageBox / 确认弹窗** 等强场景使用（demo 未定义独立 `.btn-danger` 长期样式）。
|
||
|
||
### 6.2 Loading 态 `.is-loading`
|
||
|
||
适用于：`.btn`、`.btn-primary`、`.btn-op`、`.pager-btn`、`.btn-icon`、`.upload-zone-btn`、`.btn-block`。
|
||
|
||
**公共**
|
||
|
||
- `position: relative`，`pointer-events: none`，`cursor: not-allowed`
|
||
- 字色 **`#94a3b8 !important`**，背景 **`#f1f5f9 !important`**，边框 **`#cbd5e1 !important`**，去阴影，`padding-left: 30px`（为左侧 spinner 留位）
|
||
- **`.btn-op`**：`padding-left: 24px`；**`.btn-icon`**：`padding-left: 22px`
|
||
- **`.is-loading .ic` / `.ic-sm`**：`opacity: 0`（隐藏原图标）
|
||
|
||
**伪元素 spinner（`::before`）**
|
||
|
||
- 绝对定位 `left: 10px`（**btn-op / btn-icon**：`left: 8px`），垂直居中
|
||
- 尺寸：**14×14px**（btn-op/icon：**12×12px**），边框 `2px solid #cbd5e1`，**`border-top-color: #64748b`**，圆角 50%，动画 **`tab-spin` 0.65s** linear infinite
|
||
|
||
---
|
||
|
||
## 7. 列表区、表格与分页
|
||
|
||
### 7.1 结构顺序
|
||
|
||
面板内通常为：**筛选 `.filter-block`（可选）→ 工具栏（见 §7.3）→ 列表体 `.list-body` / `.list-wrap`（包 `el-table`）→ 分页条**。
|
||
|
||
- **分页**：HTML demo 为最下 **`.list-pager`**（§7.8）；**`web-admin` 业务列表**统一为 **`el-pagination`**，外包容器 **`.pagination.list-pager-bar`**（§7.9），与表格同处白底卡片内，勿再额外 `margin-top` 造成与表格脱节。
|
||
- 需要横向滚动时，表格外层可加 **`.table-scroll`**（§7.6）；**`.data-table`** 为 demo 类名，Element 表格见各页 **`.list-table`** 约定。
|
||
|
||
### 7.2 `.list-body`
|
||
|
||
- **仅上边框** `border-top: 1px solid var(--border)`，用于与筛选区分界
|
||
|
||
### 7.3 列表工具栏 `.list-toolbar`
|
||
|
||
- `padding: 0`，背景 `var(--table-head)`，下边框 `1px solid var(--border)`
|
||
- **`.list-toolbar-row`**：`padding: 8px 16px`，`gap: 8px`，`flex-wrap`，`align-items: center`，`justify-content: flex-start`
|
||
- **已选与操作按钮同一行**：**「已选 N 项」**（或 **`.list-toolbar-selected`**）与 **新增 / 批量 / 导入导出** 等按钮 **从左起顺序排列**，紧跟在选中摘要之后；**禁止** 使用 **`justify-content: space-between`** 将按钮区整体推到行末（与区域管理等页一致）。
|
||
- **区域管理对齐点（强约束）**：如 `#/system/region` 的列表工具栏，**「已选 N 项」计数必须出现在最前**，其后紧跟 **「新增区域」**（主按钮）等操作按钮，形成「计数 → 动作」的扫描节奏；不要把新增按钮单独放到右侧或另起一行（对齐 `fresh-mint-green.html` 的列表工具栏信息层级）。
|
||
- **工具栏按钮色彩规则（强约束）**：列表工具栏从左到右的按钮中，**仅第一个主行动作**使用主色实心（`btn-main` / `type="primary"`）。其余如 **批量删除 / 导入导出 / 下载模板 / 批量导入** 等，统一使用 **中性描边按钮**（`btn-ghost` / default），避免出现同一行多颗绿色主按钮（与设计图一致）。
|
||
- **列表操作列全局规则（强约束）**：所有列表的“操作”列需 **固定在右侧**（`fixed="right"`）并预留足够宽度（建议 `min-width >= 260px`，按按钮数量增大），保证同一行操作按钮可完整展示，禁止因列宽不足出现按钮被裁切或省略。
|
||
- **`.list-toolbar-selected`**：`font-size: 12px`，`font-weight: 600`，`color: var(--text-muted)`，`padding: 0 10px 0 0`，`margin-right: 4px`，**右边框** `1px solid var(--border)`，`line-height`/`min-height` **36px**，`inline-flex` 居中
|
||
- **`.sel-num`**：`color: var(--primary-dark)`，`font-weight: 700`，`margin: 0 2px`
|
||
- **工具栏与列表体分割线（必需）**：工具栏下方、列表上方需有 **`1px solid var(--border)`** 分隔（建议在 **`.list-body`** 统一设置 `border-top`）；避免工具栏背景与表格首行直接连在一起，区域管理与商品分类均按此执行。
|
||
- **跨页面统一执行**：凡是采用「筛选区 → 工具栏 → 列表」结构的页面，均需套用该分割线规则，不得按页面单独省略；后续改造页默认在 **`.list-body`** 保持该 `border-top`。
|
||
- **单分隔线规则（全局）**：菜单页与弹窗内列表均遵循“相邻区块只保留一条边线”。即：**工具栏 ↔ 列表** 使用 `list-body` 的顶边线（`list-toolbar` 不再加底边线）；**列表 ↔ 分页** 保留列表底边线（`list-pager-bar` 不再加顶边线），避免双线叠加。
|
||
- **单标题规则（全局）**：列表页主面板仅保留一个 `panel-top` 标题（通常为“XX列表”）；筛选区作为该列表面板内的 `filter-block` 子区块，不再单独设置“筛选条件”标题，避免同页双标题造成信息层级重复。
|
||
|
||
### 7.4 通用 `table`（非 `.data-table` 时的基线）
|
||
|
||
- `width: 100%`，`border-collapse: collapse`，`font-size: 14px`
|
||
- **th/td**：`padding: 12px 20px`，`text-align: left`，下边框 `var(--border)`
|
||
- **th**：`12px`，`600`，`var(--text-muted)`，背景 `var(--table-head)`
|
||
- 斑马纹：`tbody tr:nth-child(even) td` → `var(--row-alt)`；**hover** → `var(--row-hover)`
|
||
- 最后一行：`tbody tr:last-child td` 可无下边框；**`.data-table`** 特例见下
|
||
|
||
### 7.5 `.data-table` 专用规则
|
||
|
||
- **最小宽度**：`min-width: 1320px`（保证列多时不挤乱，实际项目可按业务调）
|
||
- **表体默认**：`tbody td` **水平居中**、**垂直居中**；长文案列加 **`.td-left`** → `text-align: left`
|
||
- **`.td-cell-media`**：`text-align: left`，`max-width: 240px`，`vertical-align: middle`
|
||
- **斑马纹 / hover**：同通用表；**最后一行**：`tbody tr:last-child td` 仍保留下边框 `1px solid var(--border)`（与通用 `table` 不同）
|
||
|
||
**图文列**
|
||
|
||
- **`.cell-media`**：`display: flex`，`align-items: center`，`gap: 10px`，`min-width: 0`
|
||
- **`.cell-media-img`**：**40×40px**，圆角 **8px**，`object-fit: cover`，边 `1px solid var(--border)`，背景 `var(--row-alt)`
|
||
- **`.cell-media-stack`**：纵向 flex，`gap: 2px`，`min-width: 0`，`flex: 1`
|
||
- **`.cell-media-text`**：`13px`，`500`，`var(--text)`，单行省略
|
||
- **`.cell-media-sub`**：`12px`，`var(--text-muted)`，单行省略
|
||
|
||
**数量 / 金额列**
|
||
|
||
- **`.col-qty`**、**`.col-amt`**：`font-variant-numeric: tabular-nums`，`white-space: nowrap`
|
||
- **`.col-amt`（body 与 tfoot）**：`color: var(--primary-dark)`，`font-weight: 600`
|
||
|
||
**表头 sticky 与 z-index**
|
||
|
||
- **`thead th`**：`position: sticky`，`top: 0`，`z-index: 3`，背景 `var(--table-head)`，水平居中，`box-shadow: 0 1px 0 rgba(0,0,0,0.06)`
|
||
- **`.th-check`**：`z-index: 6`，附加左向阴影 `6px 0 10px -6px rgba(0,0,0,0.1)` + 底阴影
|
||
- **`.th-op`**：`z-index: 5`，附加右向阴影 `-6px 0 10px -6px rgba(0,0,0,0.1)` + 底阴影
|
||
|
||
**首列勾选 sticky**
|
||
|
||
- **`th.th-check` / `td.td-check`**：`position: sticky`，`left: 0`，`z-index: 2`，宽 **52px**（min/max 同），`padding: 12px 10px`，阴影 `6px 0 10px -6px rgba(0,0,0,0.1)`，背景随斑马纹/hover 与行一致（偶数 `var(--row-alt)`，hover `var(--row-hover)`）
|
||
- **`.th-check-inner`**：flex 居中
|
||
- **`.row-check`**（原生 checkbox 皮肤）：**16×16**，圆角 **4px**，边 `var(--border)`；**checked** 背景/边 `var(--primary)`；**focus-visible**：`outline: 2px solid var(--primary)`，`offset: 2px`
|
||
|
||
**末列操作 sticky**
|
||
|
||
- **`th.th-op` / `td.td-op`**：`position: sticky`，`right: 0`，`z-index: 2`，`min-width: 196px`，`max-width: 220px`，左向阴影，背景随斑马纹/hover
|
||
- **`.cell-ops`**：`display: flex`，`gap: 6px`，`justify-content: center`，`flex-wrap: nowrap`，`align-items: center`
|
||
|
||
**合计行 `tfoot .total-row`**
|
||
|
||
- **td**：居中，`font-weight: 600`，`color: var(--text)`，背景 `var(--primary-bg)`，**上边框** `2px solid var(--primary)`，无底边框，`padding-top/bottom: 14px`
|
||
- **`.td-total-label`**：`letter-spacing: 0.12em`
|
||
- **`.td-check` / `.td-op` 在 tfoot**：背景仍为 `var(--primary-bg)`
|
||
|
||
### 7.6 滚动 `.table-scroll`
|
||
|
||
- `overflow-x: auto`，`overflow-y: auto`
|
||
- **`max-height: min(520px, calc(100vh - 300px))`**（可按页面微调）
|
||
- `-webkit-overflow-scrolling: touch`
|
||
|
||
### 7.7 状态标签 `.tag`
|
||
|
||
- **默认**：`display: inline-block`，`padding: 2px 8px`，圆角 **6px**，`12px`，`600`，背景 `var(--primary-bg)`，字 `var(--primary-dark)`
|
||
- **`.muted`**：背景 `var(--table-head)`，字 `var(--text-muted)`，字重 **500**
|
||
|
||
### 7.8 分页（HTML demo：`.list-pager`）
|
||
|
||
与 `fresh-mint-green.html` 一致的自绘分页结构：
|
||
|
||
- **容器**：`display: flex`，`flex-wrap: wrap`，`justify-content: space-between`，`align-items: center`，`gap: 10px 12px`，`padding: 8px 16px`，背景 `var(--surface)`，**上边框** `1px solid var(--border)`
|
||
- **`.pager-meta`**：`13px`，`var(--text-muted)`
|
||
- **`.pager-controls`**：`display: flex`，`flex-wrap: wrap`，`gap: 8px`，`align-items: center`
|
||
- **`.pager-size-label`**：`13px`，`margin: 0`
|
||
- **`.pager-select`**：`width: auto`，`min-width: 72px`，**高度 36px**
|
||
- **`.pager-size-suffix`**：`13px`，`margin-right: 4px`
|
||
- **`.pager-btn:disabled`**：`opacity: 0.45`，`cursor: not-allowed`
|
||
- **`.pager-nums`**：`inline-flex`，`gap: 4px`
|
||
- **`.pager-num`**：`min-width: 36px`，`padding: 0 10px`，**高度 32px**，`13px`（继承 `.btn` 边框体系）；**`.is-current`**：背景/边 `var(--primary)`，白字；hover 同加深为 `var(--primary-dark)`
|
||
- **`.pager-gap`**（省略号）：`padding: 0 4px`，`13px`，`var(--text-muted)`，`user-select: none`
|
||
|
||
### 7.9 分页（Element Plus：`el-pagination` 与 `.pagination.list-pager-bar`）
|
||
|
||
`web-admin` 列表页（如 **单位管理** `#/demo/unit`、**商品管理** `#/demo/product`）在 **`el-table` 下方**放置 **`el-pagination`**，外层使用 **同一套容器类**，保证与表格同属一块白底面板、顶部分割线清晰，**右对齐**控件区（总数、每页条数、翻页、跳转）。
|
||
|
||
**容器（推荐类名）**：**`.pagination.list-pager-bar`**（可同时保留 **`.pagination`** 单类，但样式以下列为准）。
|
||
|
||
| 属性 | 值 |
|
||
|------|-----|
|
||
| `display` | `flex` |
|
||
| `justify-content` | `flex-end` |
|
||
| `margin-top` | `0`（**禁止**使用大块 `margin-top` 把分页条与表格拉开缝，与 demo 底栏贴表视觉一致） |
|
||
| `padding` | `10px 16px 12px` |
|
||
| `border-top` | `1px solid var(--border)`（`#d9e8e2`） |
|
||
| `background` | `#fff`（即 `var(--surface)`） |
|
||
|
||
**结构约定**：分页与表格包在同一 **`.list-body.list-wrap`**（或等价）内，使 **`.list-wrap`** 的 **`border-radius: 0 0 10px 10px`** 覆盖整块「表 + 分页」；分页条上边框与表体底边衔接，形成明确的「列表分页区」。
|
||
|
||
**对齐参考页**：`#/demo/unit`；其他业务列表页改造时应复用上述容器类与数值，避免各页自定义分页外边距或缺上边框。
|
||
|
||
---
|
||
|
||
## 8. 树形与子表（进阶）
|
||
|
||
- **说明条 `.tree-panel-note`**：`margin: 0 0 12px`，`padding: 10px 14px`，`13px`，`var(--text-muted)`，背景 `var(--primary-bg)`，圆角 **8px**，边 `1px solid rgba(16,185,129,0.2)`，行高 **1.5**
|
||
- **父表 `.tree-parent-grid`**：`min-width: 920px`，`table-layout: fixed`；父行 **`.tree-row-parent`**：`font-weight: 500`，hover 背景 `var(--primary-bg)`
|
||
- **子表容器 `.tree-row-children-wrap td.td-tree-nested`**：`padding: 0`，下边框，`vertical-align: top`，背景 `#f8fafc`
|
||
- **`.tree-nested-inner`**：`padding: 12px 12px 14px 16px`，**左边框** `3px solid var(--primary)`
|
||
- **`.tree-nested-label`**：`12px`，`700`，`var(--text-muted)`，`letter-spacing: 0.02em`，`margin: 0 0 8px`
|
||
- **`.tree-child-table`**：全宽，`13px`，白底，边 `1px solid var(--border)`，圆角 **8px**，`overflow: hidden`；表头背景 **`#e2e8f0`**，`11px`/`600`/`var(--text-muted)`，单元格 `padding: 8px 10px`
|
||
- **更深层 `.tree-nested-deep`**：左边框 **`#f59e0b`**，浅黄渐变背景；**`.tree-grandchild-table`**：琥珀色系边/表头（**`#fef3c7`** / **`#fcd34d`** 等），**`12px`** 字号，详见 HTML
|
||
- **展开钮 `.tree-expand`**：**28×28**，边 `1px solid var(--border)`，圆角 **6px**；hover 边 `var(--primary)`，字 `var(--primary-dark)`，背景 `var(--primary-bg)`；图标 **`.tree-expand-ic`** 可 `rotate(-90deg)` 当折叠
|
||
- **徽章 `.tree-badge`**：`11px`，`700`，圆角 **4px**；**`.parent`**：绿系；**`.child`**：背景 `#e2e8f0`，字 `#475569`
|
||
|
||
---
|
||
|
||
## 9. 弹窗、遮罩与详情视图
|
||
|
||
### 9.1 遮罩 `.backdrop`
|
||
|
||
- `position: fixed`，`inset: 0`，背景 `rgba(15, 23, 42, 0.35)`，默认 `display: none`，`z-index: 50`，`padding: 16px`
|
||
- **`.open`**：`display: flex`，`align-items: flex-start`，`justify-content: center`，上 **32px** / 下 **32px** padding（内容偏上）
|
||
|
||
### 9.2 小对话框 `.dialog`（默认）
|
||
|
||
- `width: 100%`，`max-width: 400px`，背景 `var(--surface)`，圆角 `var(--radius)`，边 `1px solid var(--border)`，阴影 **`0 16px 48px rgba(0,0,0,0.12)`**，**内边距 20px**
|
||
- **`h3`**：`margin: 0 0 6px`，`17px`，`600`
|
||
- **`.note`**：`margin: 0 0 16px`，`13px`，`var(--text-muted)`
|
||
- **`.dialog-actions`**：`margin-top: 16px`，`display: flex`，`justify-content: flex-end`，`gap: 8px`
|
||
|
||
### 9.3 大对话框 `.dialog-lg` / `.dialog-view-xl`
|
||
|
||
- **`.dialog-lg`**：`max-width: 720px`，`max-height: calc(100vh - 64px)`，`overflow: hidden`，flex 列，`padding: 0`
|
||
- **`.dialog-view-xl`**：`max-width: 920px`，`max-height: calc(100vh - 48px)`，同上
|
||
- **`.dialog-scroll`**（大弹窗主体）：`overflow-y: auto`，**padding: 20px 22px**，`flex: 1`；**view-xl** 可无 padding 由子块控制
|
||
- **`.dialog-head`**：**padding: 16px 22px**，下边框，`flex-shrink: 0`
|
||
- **`.dialog-foot`**：**padding: 12px 22px**，上边框，`display: flex`，`justify-content: flex-end`，`gap: 8px`，背景 `var(--table-head)`，`flex-shrink: 0`
|
||
|
||
### 9.3.1 `el-dialog` 新增/编辑表单（web-admin 实践，2026-04 起）
|
||
|
||
与 HTML demo 类名可不同，下列为 **Element Plus** 落地约定，供各业务列表页统一改造：
|
||
|
||
- **表单主区两列**：内容可用 **`display: grid`**，`grid-template-columns: repeat(2, minmax(0, 1fr))`，`gap: 12px 20px`（类名示例：**`.form-grid-2`**）；占满整行的字段（如多行 **描述**）使用 **`grid-column: 1 / -1`**（示例：**`.form-col-span-2`**）。栅格内 **`el-form-item`** 宜 **`margin-bottom: 0`**，纵向间距交给 **`gap`**。
|
||
- **label 在上（强约束）**：弹窗表单统一 `label-position="top"`，并将 `label-width` 相关规则清零，避免出现「左侧 label 空出一大块」的不对齐（区域管理/单位/参数模板等页同构）。
|
||
- **底栏按钮图标（强约束）**：弹窗 footer 的「取消 / 确定」建议显式使用 `Close / Check` 图标（Element Plus Icons），图标与文字间距 **6px**；避免触发全局按钮自动图标兜底导致的“黑色方块”。
|
||
- **高密两列优先（节约高度）**：新增/编辑弹窗应尽量让字段在两列内排满（如 `排序｜状态`、`预计配送时长｜预警提前时间`），减少单字段独占整行；仅在长文本（如备注/描述）或复杂联动控件时使用 `form-col-span-2` 跨整行。
|
||
- **壳层 padding**：**`.el-dialog` 根节点**不设内边距（`web-admin` 全局 **`--el-dialog-padding-primary: 0`** 与 **`padding: 0`**，避免与 EP 默认 **`var(--el-dialog-padding-primary)`** 叠出双份空白）；**标题 / 主体 / 底栏** 仍分别由 **`.el-dialog__header`**、**`.el-dialog__body`**、**`.el-dialog__footer`** 控制，建议与 §9.3 一致：**`16px 22px`**（header，项目里常见为 **`16px 22px 14px`**）、**`18px 22px`**（body）、**`12px 22px`**（footer）。业务页滚动主体 **`.dialog-scroll`** 可另加 **`padding-right: 2px`** 避免滚动条贴内容。
|
||
- **底栏「取消 / 确定」带前缀图标**：与列表工具栏主/次按钮一致：**`gap: 0`**，**`.el-icon`** **`margin-right: 6px`**（与 **「新增」** 等 **`btn-main` / `btn-ghost`** 图标间距统一）。
|
||
- **长表单校验失败**：**`el-form`** 建议开启 **`scroll-to-error`**，并设置 **`scroll-into-view-options`**（如 **`behavior: 'smooth'`**、**`block: 'center'`**），提交前 **`validate()`** 失败时再配合 **`ElMessageBox.alert`** 说明「已定位到第一处标红项」，避免用户在长弹窗里不知道为何无法提交（商品分类等页已采用）。
|
||
|
||
### 9.4 详情顶区 `.view-hero`
|
||
|
||
- `display: flex`，`flex-wrap: wrap`，`gap: 16px`，`padding: 20px 22px`
|
||
- 背景：`linear-gradient(135deg, var(--primary-bg) 0%, var(--surface) 55%)`，下边框
|
||
- **`.view-hero-img`**：**72×72**，圆角 **12px**，`object-fit: cover`，边 `var(--border)`
|
||
- **`.view-hero-main h2`**：`18px`，`700`，`letter-spacing: -0.02em`，`margin: 0 0 8px`
|
||
- **`.view-hero-meta`**：`13px`，`var(--text-muted)`，行高 **1.5**
|
||
|
||
### 9.5 区块与键值 `.view-section` / `.view-kv`
|
||
|
||
- **`.view-section`**：`padding: 18px 22px`，下边框；**最后一个**无底边框
|
||
- **`h3`**：`13px`，`700`，`var(--text-muted)`，`letter-spacing: 0.06em`，`margin: 0 0 14px`
|
||
- **`.view-kv-grid`**：`grid`，两列，`gap: 12px 28px`；窄屏单列
|
||
- **`.view-kv`**：`grid-template-columns: 96px 1fr`，`gap: 8px 12px`，`13px`；**dt** muted **500**；**dd** 主色，`word-break: break-word`
|
||
|
||
### 9.6 Bento / 卡片 / 时间轴 / 图集 / 路线条
|
||
|
||
- **`.view-bento`**：两列 `12px` gap，窄屏单列
|
||
- **`.view-card`**：边 `1px solid var(--border)`，圆角 `var(--radius)`，`14px 16px` padding；**h4**：`12px`，`700`，muted
|
||
- **`.view-timeline`**：`padding-left: 18px`，左边框 `2px solid var(--border)`，`margin-left: 8px`
|
||
- **`.view-tl-item`**：`padding-bottom: 18px`，`13px`；**圆点**（`::before`）：**10×10px**，`var(--primary)`，白边；**`.muted`** 圆点变灰
|
||
- **`.view-tl-time`**：`12px`，muted；**`.view-tl-title`**：`600`；**`.view-tl-desc`**：muted，行高 **1.45**
|
||
- **`.view-gallery`**：四列 `10px` gap，**`aspect-ratio: 4/3`**，圆角 **8px**，带边框
|
||
- **`.view-route-bar`**：**高度 120px**，圆角 `var(--radius)`，背景 `linear-gradient(90deg, #ecfdf5 0%, #d1fae5 40%, #a7f3d0 100%)`，边 `var(--border)`，水平 **24px** padding
|
||
- **`.view-route-line`**：`flex: 1`，**高度 3px**，背景 `var(--primary)`，`opacity: 0.45`，圆角 **2px**，左右 **12px** margin
|
||
|
||
### 9.7 弹窗内子表 `.view-subtable-wrap` / `.view-subtable`
|
||
|
||
- **wrap**：边 `var(--border)`，圆角 **8px**，`overflow: hidden`
|
||
- **表**：`12px`，**th/td** `padding: 8px 12px`，居中，下边框；**th** 背景 `var(--table-head)`，muted；**`.ta-left`** 左对齐
|
||
|
||
### 9.8 列表「查看」按钮与查看弹窗模板（推荐复用）
|
||
|
||
参考设计源 `fresh-mint-green.html`，后续业务页面新增「查看详情」能力时优先复用以下模式：
|
||
|
||
- **列表操作按钮**：`查看` 使用 **`.btn-op.primary`**（主色实心，优先级最高），其余如 `编辑`/`删除` 维持中性 **`.btn-op`**。
|
||
- **弹窗规格**：查看详情优先使用 **`.dialog-view-xl`**（宽约 `920px`，`max-height: calc(100vh - 48px)`），结构固定为 **`dialog-head` + `dialog-scroll` + `dialog-foot`**。
|
||
- **顶部 Hero 区**：用 **`.view-hero`** 展示核心摘要（左侧缩略图 `72x72` + 右侧标题/状态/元信息），背景使用浅绿渐变，和编辑表单视觉区分。
|
||
- **详情分段**：正文按 **`.view-section`** 分块，每块标题 `h3`，关键信息采用 **`.view-kv-grid` + `.view-kv`** 键值布局（双列，窄屏单列），提升扫读效率。
|
||
- **底部动作**：`dialog-foot` 固定在底部，查看弹窗仅放“关闭/返回”类动作，避免在查看态塞入提交语义。
|
||
- **交互与可访问性**：支持点击遮罩关闭、`Esc` 关闭；滚动仅发生在 `dialog-scroll`；图片提供可预览与 `alt`，长文本按省略/换行策略保持稳定排版。
|
||
- **组件抽象建议**：可统一封装为业务级查看组件（如 `ProductViewDialog`），内部固定使用 `view-hero / view-section / view-kv-grid / dialog-foot` 语义类，业务页只传入数据与开关状态，避免每页重复造样式。
|
||
- **落地示例**：`#/demo/product` 已按该模板改造（`web-admin/src/components/business/product-view-dialog/index.vue`），可直接作为后续页面的实现参考。
|
||
- **树形字段展示**：查看弹窗中凡**树形主数据**（分类等）均与 **§5.6** 一致，展示**全路径**；实现上优先复用 `utils/tree-path` 与已加载的扁平列表或树。
|
||
|
||
---
|
||
|
||
## 10. 表单扩展、迷你表与上传
|
||
|
||
### 10.1 字段 `.field`
|
||
|
||
- `margin-bottom: 12px`
|
||
- **label**：`13px`，`500`，`margin-bottom: 6px`
|
||
- **`.input`** 在 field 内：`width: 100%`
|
||
|
||
### 10.2 分节 `.form-section`
|
||
|
||
- `margin-bottom: 20px`，`padding-bottom: 16px`，**下边框虚线** `1px dashed var(--border)`；最后一节无底
|
||
- **h4**：`13px`，`700`，`var(--text-muted)`，`letter-spacing: 0.04em`，`margin: 0 0 12px`
|
||
|
||
### 10.3 栅格 `.form-grid-2`
|
||
|
||
- `grid`，两列，`gap: 12px 16px`；**≤560px** 单列
|
||
|
||
### 10.4 文本域 `.textarea`
|
||
|
||
- `min-height: 72px`，`padding: 10px 12px`，圆角 **8px**，`14px`，`resize: vertical`；focus 环同 input
|
||
|
||
### 10.5 上传 `.upload-zone` / `.upload-item`
|
||
|
||
- **zone**：虚线边 `var(--border)`，圆角 **8px**，`padding: 16px`，居中，背景 `var(--row-alt)`；**hover** 边 `var(--primary)`，背景 `var(--primary-bg)`
|
||
- **`.upload-zone-text`**：`13px`，muted
|
||
- **`.upload-zone-btn`**：`margin-top: 8px`
|
||
- **`.upload-preview`**：`flex`，`gap: 10px`，`margin-top: 12px`
|
||
- **`.upload-item`**：**72×72**，圆角 **8px**，边 `var(--border)`；**`.rm`**（删除缩略图）：**20×20**，绝对定位右上 **2px**，背景 `rgba(0,0,0,0.55)`，白字，圆角 **4px**
|
||
|
||
### 10.6 商品分类 · 弹窗内「参数」卡片（`#/demo/category`）
|
||
|
||
单张卡片结构（自上而下）：
|
||
|
||
1. **标题行**：拖拽柄、序号、参数名/编码、**删除**。
|
||
2. **第二行**：**左** 参数类型标签（文本 / 下拉 / 多选）；**右** **是否必填**。
|
||
3. **第三块（整卡 full width）**：按类型展示默认值控件（输入框 / 下拉 / 多选组），**占满卡片宽度**，勿与主表单共用「固定 label 宽 + `margin-left`」的样式，否则会出现类型标签下方左侧大块空白。
|
||
|
||
实现约定：参数列表外包 **`el-form.parameter-assoc-form`**，在 **`category-dialog`** 内对 **`.parameter-assoc-form .el-form-item__content`** 强制 **`margin-left: 0`**、**`width: 100%`**（见 `web-admin` 商品分类页）。
|
||
|
||
### 10.7 迷你表 `.mini-table-wrap` / `.mini-table`
|
||
|
||
用于弹窗内行编辑、明细行等。
|
||
|
||
- **wrap**：边 `var(--border)`，圆角 **8px**，`overflow: hidden`
|
||
- **表**：`13px`，`border-collapse: collapse`
|
||
- **th**：背景 `var(--table-head)`，`padding: 8px 10px`，**左对齐**，`11px`，`600`，muted，下边框
|
||
- **td**：`padding: 6px 8px`，下边框，`vertical-align: middle`；末行无底边框
|
||
- **内嵌 `.input`**：高 **32px**，`13px`，`width: 100%`
|
||
- **内嵌 `.input-clear-wrap .input`**：`padding-right: 30px`，高 **32px**；**`.input-clear`**：**26×26**，`right: 2px`
|
||
- **内嵌 `.btn-icon`**：高 **28px**，`padding: 0 8px`，`12px`
|
||
|
||
---
|
||
|
||
## 11. 图标与无障碍
|
||
|
||
- **`.ic`**：**16×16**，`flex-shrink: 0`，`display: block`
|
||
- **`.ic-sm`**：**14×14**
|
||
- **`.sr-only`**：视障辅助隐藏文案（`clip` / `1px` 等），与标准 visually-hidden 一致
|
||
|
||
---
|
||
|
||
## 12. 业务状态色（与订单/配送枚举）
|
||
|
||
主品牌仍为绿；列表/标签建议：
|
||
|
||
- **进行中 / 主状态**：浅绿底 + 深绿字（同 `.tag`）
|
||
- **成功 / 完结**：略深绿（可与 `--primary-dark` 协调）
|
||
- **警告 / 待支付**：琥珀 `#d97706` 系
|
||
- **危险 / 异常**：红系用于强提醒；取消/信息可用 **`.tag.muted`** 或 slate
|
||
|
||
（与 `.cursorrules` 中订单/配送状态表配合时，**颜色类**映射到上列语义即可。）
|
||
|
||
---
|
||
|
||
## 13. 实现清单（web-admin 改造对照）
|
||
|
||
1. 全局注入 §2 Token，并对齐 Element `--el-color-primary` 等。
|
||
2. 布局 §3：侧栏、顶栏、内容区、Tab、顶栏进度条（可选）。
|
||
3. 筛选 §5、按钮 §6、表单 §10。
|
||
4. 表格与 art-table：`el-table` 对齐 §7（含 sticky、图文列；**Element 列表分页条**见 **§7.9**）。
|
||
5. `el-dialog` / `el-drawer`：§9。
|
||
6. 树形页面：§8。
|
||
7. **工作台**（`#/demo/console`）：见 **§4.2** 工作台小节——与 **`fresh-mint-green.html`** **`.stat`** 同构的指标卡、**近30日** **`ArtLineChart`** 双图（`/statistics/orders/trend`）、**今日各区域** 双轴柱状（`/statistics/orders/today-by-region`）、**`list-body list-wrap` + `list-table` + `stripe`**（无 **`border`**）最新订单；与 **`el-ui.scss`** 中 **`console-container`** 表格/主按钮覆盖一致。
|
||
8. **商品分类**（`#/demo/category`）：与 **区域管理** 同构——页头说明、筛选 §5、工具栏 §7.3（已选 + 左起操作）、`list-body` + 表格 + **Element 分页**、状态 pill 与 **Fresh Mint** token；新增/编辑/选参弹窗底栏 **`dialog-footer`** + **Close / Check** 图标，图标间距 **6px**（与工具栏一致）；弹窗内 **参数卡片** 布局与 **`.parameter-assoc-form`** 见 **§10.6**；列表操作列统一为 **首个按钮主色，后续按钮中性**（父分类：新增子分类主色；编辑/删除中性。子分类：编辑主色；删除中性）。
|
||
9. **商品单位**（`#/demo/unit`）：与 **区域管理** 同构（页头说明、筛选、工具栏 §7.3、`list-body` 顶部分割线、表格、分页、`scroll-to-error` + 校验失败 **`ElMessageBox.alert`**、**`unit-dialog`** 与 **两列表单**）；列表操作列 **编辑主色 / 删除中性**。
|
||
10. **商品管理**（`#/demo/product`）：筛选区切换为 §5 结构（非 `inline`）、工具栏升级为 §7.3（已选计数 + 左起操作）并保持 `list-body` 顶部分割线；**商品分类** 树形字段遵循 **§5.6**：下拉树节点为本级名，收起/列表/导出/查看等为 **全路径**（` / ` 分隔）。列表操作列遵循“首个按钮主色、后续中性”；新增/编辑与参数选择弹窗底栏统一 **`dialog-footer`** + **Close / Check** 图标与 **6px** 间距。商品列表补充：工具栏按钮遵循“**第一个按钮有颜色，后面的按钮都是普通按钮**”（即首个主色、其余中性描边）；操作列固定右侧且预留足够宽度完整展示全部按钮；商品图片与名称合并为一列（表头居中、内容左对齐、名称超长省略）。弹窗补充：基本信息表单与商品单位页一致，采用 **label 在上、输入在下**（`label-position="top"`），避免左右并排造成间距过大；图片上传等 **primary-plain** 按钮需保证常态下图标与文字可见（非 hover 才显示）；弹窗底栏取消/确定前缀图标必须可见；新增/编辑、参数选择、图片预览、视频播放等弹窗统一使用无模糊遮罩（`modal-class` + `backdrop-filter: none`）；并在全局覆盖中移除 `.page-container .el-overlay, .console-container .el-overlay` 的 `backdrop-filter`，避免任何菜单页弹窗出现背景模糊。
|
||
11. **询价报价管理**（历史路由 **`#/business/inquiry-quotation`**，页面已裁剪；复杂列表与弹窗可对照 **`#/demo/order`**）：**页头** **`page-desc`**；**区域切换**为 **Mint 分段按钮**（**`region-tab-btn`**：白底描边 **`#d9e8e2`**，激活 **`#10b981`** 实心）；**询价 / 报价** 两块均为 **`iq-panel`**（**`#d9e8e2`** 边、**10px** 圆角、轻阴影），卡片头 **`title-ic` + Operation / Document** 图标与 **§3** 工具栏语义一致；**询价表** **`list-table`**，**已发布行** 浅绿底 **`#ecfdf5` / hover `#d1fae5`**；操作列 **「查看」`btn-op-item primary`**，其余 **`btn-op-item`** + 前缀图标。**报价** 内 **Tab** 为 **`quote-tab-chip`**（与区域切换同构）；**已选中** 说明用 **`iq-alert`**；**矩阵对比** 最低价格与 **供应商报价完整度** 色：绿 **`#059669`**、红 **`#dc2626`**、字 **`#1e293b`**（对齐运营端 token，非小程序角色色）。**历史报价** 筛选改为 **§5** 式 **`filter-block` + `history-filter-grid`（label 11px）+ `filter-actions-row`**（**`btn-ghost` / `btn-main`** + RefreshLeft / Search）；**`history-filter-grid`** 桌面宽度下 **三列同排**（供应商｜状态｜时间），**`grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(220px,1.35fr)`**，**勿**对日期表单项使用 **`grid-column: 1 / -1`** 独占一行。分页 **`list-pager-bar`**。**查看询价单** 弹窗顶部信息与 **§9.4–9.5** 对齐：**`inquiry-view-hero`**（**72×72** 图标区 + 标题 / 状态 **`el-tag`** / 创建时间摘要）+ **`inquiry-view-kv`** 内 **`view-kv-grid` + `view-kv`**（备注 **`view-multiline`** 跨两列），**不用** 与下方选品区混排的 **`el-descriptions` border** 块。**大弹窗**（询价表单 / 详情 / 报价明细 / 调价确认）统一 **`inquiry-quotation-dialog`** + **`modal-class="inquiry-quotation-dialog-mask"`**（无模糊遮罩），**`el-dialog__header`** 薄荷渐变底栏，**`dialog-footer`** **36px** 高、**8px** 圆角、主 **`#10b981`**；询价表单 footer **左右分布**（左侧已选数量 hint）。**内嵌选品区** 树「当前」高亮、卡片选中描边、面板边框均用 **Mint / `#d9e8e2`**，替换原默认蓝。列表/卡片中「分类」展示仍与 **§5.6** 一致（全路径、` / ` 分隔）；工具函数见 **`web-admin/src/utils/tree-path.ts`**。
|
||
12. **参数模板**（独立菜单已裁剪；列表与弹窗版式同 **`#/demo/unit`** 等 CRUD 清单页）：与 **商品单位** 同构——页头 **`page-desc`**、筛选 **§5**（`filter-grid` + `filter-actions-row`）、工具栏 **§7.3**（`list-toolbar-row`，已选 **`sel-num`** + **`toolbar-actions`** 左起）、**`list-body`** 顶部分割线、表格与分页 **`list-pager-bar`**；列表操作列 **「详情」主色、编辑/删除中性**（与 §9.8 查看优先一致）。新增/编辑弹窗 **`parameter-dialog`**：**`720px`**、**`label-position="top"`**、**`form-grid-2`**、**`scroll-to-error`** + 校验失败 **`ElMessageBox.alert`**、**`parameter-dialog-mask`** 无模糊遮罩。表单栅格 **尽量双列排布**：名称｜编码；**输入类型** 与 **排序** 同一行（类型使用 **`param-type-radio-group`** 允许折行）；**可选值**（非文本类型时）仍 **`form-col-span-2`**；**输入提示** 与 **是否必填** 同一行；**状态** 与 **备注**（各一列，备注为双行文本域）同一行。弹窗底栏与 **区域 / 单位 / 商品** 一致：**`dialog-footer`** 内取消为 **`btn-ghost`**、确定为 **`btn-main`** + **`type="primary"`**，**Close / Check** 图标与 **6px** 间距；非 scoped 样式中对 **`.parameter-dialog .el-dialog__footer .el-button`** 统一 **36px 高、8px 圆角、600 字重**，次要按钮白底 **`#d9e8e2`** 描边，主按钮 **`#10b981`** 色链（与 **`product-view-dialog`** 底栏规则对齐）。**详情**弹窗（**`parameter-view-dialog`**）：与 **`#/demo/product`** 的 **`ProductViewDialog`** 对齐——**`.el-dialog__body`** 无内边距、**`.parameter-view-dialog .dialog-scroll`** 为 **`padding: 0`**，水平留白由 **`.view-hero`**（**`padding: 20px 22px`**，与商品查看一致）与 **`.view-section`**（**`padding: 18px 22px`**、块间 **`border-bottom: 1px solid #d9e8e2`**、**`:last-child`** 去底边，见 **`product-view-dialog`**）共同承担；**禁止**在本页再写仅含 **`padding: 4px 0 8px`** 的 **`.view-section`**，否则后会覆盖前述规则，导致键值区贴边、观感拥挤。其下 **`view-kv-grid`** 展示完整字段；底栏 **关闭** 使用 **`btn-ghost`** + Close 图标。筛选「状态」与单位页一致（全部为空串，请求时转 `undefined`）。
|
||
13. **用户管理**（`#/demo/user`）：与 **区域 / 单位** 同构——页头 **`page-desc`**、筛选 **§5**（四列 **`filter-grid`**：关键词支持 **Enter** 查询）、工具栏 **§7.3**（**`list-toolbar-row`**、**`sel-num`**、**`toolbar-actions`**；仅 **批量导出**、无导入模板）、**`list-body list-wrap`** + 表头/单元格 **居中**（头像列保留 **§7** 图文列语义）、分页 **`list-pager-bar`**。列表操作列：**「详情」** **`btn-op-item primary`**，**编辑 / 重置密码 / 删除** 为中性 **`btn-op-item`**；操作列 **`min-width`** 需容纳四个按钮。新增/编辑弹窗：**`user-dialog`** **`720px`**、**`modal-class="user-dialog-mask"`**、**`close-on-click-modal="false"`**、**`label-position="top"`** 的 **`user-form`**，分节 **账号信息**（仅新增：用户名｜密码）**基本信息**（姓名｜手机｜角色｜所属区域 **`clearable`**）**头像**（**`primary` `plain`** 上传 + **`btn-ghost` 清除**）**状态设置**（仅编辑）；**`scroll-to-error`** + 校验失败 **`ElMessageBox.alert`**（与单位页一致）。**详情**弹窗：**`user-dialog user-view-dialog`**，**`body` 无 padding** + **`.dialog-scroll` `padding: 0`**，**`view-hero`**（左侧 **72×72** 圆角头像区 + **`view-hero-main`** 摘要）+ **`view-section`** + **`view-kv-grid`**，状态用 **`status-pill`**（禁用为 **info**，与列表一致）；底栏 **关闭** **`btn-ghost`** + Close。**`user-dialog-mask`**：**`backdrop-filter: none`**。
|
||
14. **订单列表**（`#/demo/order`）：页头 **`page-desc`**；**`section.panel`** 内 **`panel-top`**（**`title-ic` + Operation**）；筛选 **`filter-block`**（**§5.3**：多行栅格 / **`filter-extra`** / **`filter-actions`** 之间 **无** 横向分割线，仅用间距）对齐 **`fresh-mint-green.html`**：**`filter-hint`** + 常用条件 **`filter-grid order-filter-main-grid`**（桌面 **四列** 一排）+ **`filter-extra`**（**`v-show`**：支付方式、区域）+ **`filter-actions`**（左侧 **`btn-filter-toggle`** 链式按钮：**展开更多条件 / 收起更多条件**，**`aria-expanded` + `aria-controls`**；右侧 **`btn-ghost` / `btn-main`**）；重置时 **`filterExpanded=false`** 收起附加条件。关键词 **Enter** 查询。**`list-body list-wrap`** 内主表 **`order-list-table order-list-main-table list-table`**（主表单元格 flex 居中**勿**作用到嵌套表），分页 **`list-pager-bar`**。**行展开子表** 对齐 demo **树形子列表`§8`**：**`expanded-cell` 背景 `#f8fafc`**、**`order-tree-nested-inner`** 左 **`3px #10b981`** + **`order-tree-nested-label`**；子表 **`order-tree-child-table`**：**`border`**、表头底 **`#e2e8f0`**、hover **`#f1f5f9`**，首列（商品）左对齐、数值列 **`is-right`**。订单编号链式按钮 **`order-no-link`**（**`#059669`**）。操作列：**「查看/运营」`btn-op-item primary` + View**，**「分配配送员」`btn-op-item` + Bicycle**，**「审核取消」`btn-op-item op-warn` + DocumentChecked**；**`min-width`** 需容纳多枚操作钮。**订单详情（查看/运营）** **`order-detail-dialog`** + **`modal-class="order-module-dialog-mask"`**：**`el-dialog__body` `padding: 0`**，内容区 **`dialog-scroll order-detail-dialog-scroll`** 内纵向滚动；顶部 **`view-hero order-view-hero`**（**72×72** **`order-view-hero-icon` + ShoppingBag + **`view-hero-main`** 标题 / **`view-hero-tags`** / **`view-hero-meta`**），各 Tab 下区块为 **`view-section`** + **`h3`** + **`view-kv-grid` / `view-kv` / `view-multiline`**（与 **参数详情 / 询价查看** 同构，不再用 **`el-descriptions` border** 作为主信息区）；底栏 **`dialog-footer`**，**关闭** **`btn-ghost` + Close**。**`el-dialog__header`** 薄荷渐变、**`el-dialog__footer`** **`#f8fafc`**；主操作 **`btn-main`**，**取消订单** **`type="danger"`**。**分配 / 审核取消 / 取消订单 / 调整 / 价格版本明细** 等辅弹窗 **`order-module-dialog`** + 同款 **`modal-class`** 与 **36px / 8px** 底栏规则（与询价大弹窗同构；无模糊遮罩）。
|
||
15. **商家结算管理**（历史路由 **`#/order/supplier-settlement`**，页面已裁剪）：页头 **`page-desc`**；**`region-tab-strip` + `region-tab-btn`**（与询价区域切换同构）；**`el-tabs` `settlement-page-tabs`**（Mint 指示条）；各 Tab 内 **`section.panel`**：**`panel-top`**（**`title-ic` + Wallet / Document**）、**`filter-block`**（**三列 `filter-grid`**、**`filter-actions-row`** + **`btn-ghost` / `btn-main`** + Refresh / Search、关键词 **Enter**）；**待结算** 下 **`settlement-stats`**（**`stat-card` / `stat-card--accent`**）；**`list-toolbar-row` + `toolbar-actions`**；主表 **`settlement-pending-main-table settlement-root-table list-table`**；**结算单记录** 主表 **`settlement-sheets-main-table settlement-root-table list-table`**；分页 **`list-pager-bar`**。**树形多层级**（对齐 **`fresh-mint-green.html` §树形列表**）：待结算订单行展开为 **子列表**（**`settlement-tree-inner`** 左 **`3px #10b981`** + **`settlement-tree-label`** + **`settlement-child-table`** **`border`**、表头 **`#e2e8f0`**）；结算单记录为 **结算单 → 订单 → 商品** 三层：**L1** **`settlement-tree-l1`** 内嵌 **`settlement-mid-table`**；**L2** **`settlement-tree-l2`**（琥珀左边线 + 浅黄渐变，对应 demo **`tree-nested-deep`**）+ **`settlement-line-table`**（孙表头 **`#fef3c7`** / 字 **`#92400e`**）；**`expanded-cell`** 主层 **`#f8fafc`**、订单下商品层 **`#fffbeb`**。操作列：**详情 `btn-op-item primary` + View**，**编辑 `btn-op-item op-warn` + Edit**。业务弹窗 **`order-module-dialog`** + **`order-module-dialog-mask`**；本页另附 **非 scoped** 的 **`order-module-dialog`** 规则，避免未加载订单页 chunk 时弹窗无样式。订单号链式 **`settlement-order-no-link`**。
|
||
16. **客户结算管理**（历史路由 **`#/order/client-settlement`**，页面已裁剪）：与 **商家结算管理** 同构应用 Fresh Mint 壳层与交互（页头 `page-desc`、`region-tab-strip`、`settlement-page-tabs`、`panel`、`filter-block`、`list-toolbar-row`、`list-pager-bar`、`order-module-dialog`）。业务语义改为客户维度（客户筛选、客户结算状态、`client_settlement` 凭证业务类型、同客户约束）。树形多层级同样按 **结算单 → 订单 → 商品** 实现，沿用 **`settlement-tree-inner / settlement-tree-l1 / settlement-tree-l2`** 视觉分层：L1 薄荷左边线 + 灰蓝子表头，L2 琥珀左边线 + 浅黄渐变 + 孙表琥珀表头；主层与深层 expanded cell 分别使用 **`#f8fafc`** 与 **`#fffbeb`**，保证多层树形在客户结算页与标准 demo 统一。
|
||
17. **配送列表**（`#/delivery/delivery`）：改造为 Fresh Mint 列表壳层——页头 **`page-head` + `page-desc`**，主体 **`section.panel`** + **`panel-top`**（`title-ic` + `Van`），筛选区升级为 **`filter-block` + `search-form` + 三列 `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search，关键词支持 Enter 查询），列表与分页收口到 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。配送单展开子表按树形子列表规范对齐：展开层 **`delivery-tree-inner`**（左侧薄荷 3px 线）+ 标题 **`delivery-tree-label`** + 子表滚动容器，expanded cell 背景与边框对齐全局列表规范。操作列统一为 **`btn-op-item primary` + View**；详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**（薄荷渐变头、无遮罩模糊）以保持订单/结算/配送弹窗视觉一致。
|
||
18. **时效预警**（`#/delivery/delivery-warning`）：改造为与配送列表同构的 Fresh Mint 壳层——页头 **`page-head` + `page-desc`**，主体 **`panel` + `panel-top`**（`title-ic` + `Bell`），筛选区统一 **`filter-block` + `search-form` + `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search），列表区统一 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。预警行展开商品明细同样采用树形子列表样式：**`delivery-tree-inner`** 左 3px 薄荷线、**`delivery-tree-label`** 标题、子表滚动容器与 expanded cell 背景边框。操作列统一按钮语义：**查看** `btn-op-item primary + View`，**处理** `btn-op-item op-warn + Finished`。处理弹窗与详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**，与订单/结算/配送页面维持一致的薄荷渐变头和无遮罩模糊策略。
|
||
19. **系统设置**（`#/system/system-config`）：将原单块白底表单改造为 Fresh Mint 配置页结构——页头 **`page-head` + `page-desc`**，配置项拆分为两张 **`settings-panel`**（订单设置 / 客服设置），每块使用 **`panel-top` + `title-ic`**（`Setting` / `PhoneFilled`）与 **`panel-body`**。表单统一为 **`label-position="top"`** 与 Mint 输入态（11px label、8px 圆角、`#d9e8e2` 边），采用 **`form-grid`**（桌面两列、窄屏一列）排版；数字输入配单位说明与 hint 文案。保存区使用统一主按钮 **`btn-main`**（`Check` 图标 + 36px 高 + 薄荷色链），整体与已改造业务页面的卡片、标题、按钮体系一致。
|
||
20. **接口日志**（`#/system/api-request-log`）：改造为 Fresh Mint 列表页模板——页头 **`page-head` + `page-desc`**，主体 **`panel` + `panel-top`**（`title-ic` + `Document`），筛选区统一为 **`filter-block` + `search-form` + 四列 `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search，关键词支持 Enter 查询）；日志表格与分页统一到 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。操作列“详情”改为 **`btn-op-item primary + View`**。请求详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**（薄荷渐变头、无遮罩模糊、统一 footer），请求体/响应体保留 `pre` 滚动展示能力。
|
||
21. **全局壳层回归（2026-04-17）**：针对 `git restore` 导致的样式回退，补齐 `web-admin` Fresh Mint 基线：`index.scss` 重新引入 `fresh-mint-tokens.scss`；`app.scss` 回收全局 token 映射（`--theme-color`、`--default-bg-color`、`--default-box-color`、`--art-card-border`）、统一页头/面板/侧栏骨架；`views/index/style.scss` 恢复内容区 **`24px`** 内边距与「壳层不包二次卡片」策略；`el-ui.scss` 重设 Element 主题变量、弹窗头体脚间距、表格与主按钮 Mint 色链；`#/demo/console` 恢复 **page-head + panel/list-body/list-table** 结构与统计卡的 Mint 视觉层级。
|
||
22. **第二轮批量回归（2026-04-17）**：新增跨页面全局兜底（`app.scss` + `el-ui.scss`）用于统一 **筛选区 / 工具栏 / 列表体 / 分页条 / 表单控件 / 主次按钮 / 行内操作按钮**。约定类（`filter-block`、`filter-grid`、`filter-actions-row`、`list-toolbar-row`、`list-body`、`list-wrap`、`list-pager-bar`、`btn-main`、`btn-ghost`、`btn-op-item`）在 `page-container` 与 `console-container` 下自动应用 Mint 视觉，降低逐页重复样式。同步修正历史弹窗组件 `#/demo/user`（`user-dialog`）与 `#/system/menu`（`menu-dialog`）底栏按钮与表单布局，使其对齐 **36px/8px** 按钮与顶部标签表单规范。
|
||
23. **第三轮业务页收口（2026-04-17）**：针对运营高频页面做残留旧色清理与语义色统一：`#/delivery/delivery`、`#/delivery/delivery-warning`、`#/system/system-config`、`#/demo/order` 中遗留的旧角色色（`#1989fa/#07c160/#ff976a/#ee0a24`）已替换为 Fresh Mint 语义色链（主色 `#10b981/#059669`、警告 `#d97706`、危险 `#dc2626`），覆盖 section 左边线、金额强调、Tab 激活态、地址卡片强调边、时间轴节点、风险提示等关键视觉点，避免后台页面出现“蓝/绿/橙/红混搭”的历史风格。
|
||
24. **第四轮一致性细节（2026-04-17）**：补充跨页面细节兜底：`app.scss` 新增 `page-container/console-container` 下通用 `.pagination`（贴表格的分页条样式）与 `.search-bar`（白底卡片化）；`el-ui.scss` 新增弹窗 footer 按钮统一规则（**36px 高、8px 圆角、600 字重**，非主按钮中性描边）及 footer 内图标右间距 **6px**，用于收敛历史页面中未显式加 `btn-main/btn-ghost` 的弹窗底栏视觉差异。
|
||
25. **第五轮验收清单（2026-04-17）**：对 `web-admin/src/views/system` 全量页执行旧色值巡检并完成批量替换，遗留角色色 `#1989fa/#07c160/#ff976a/#ee0a24` 已在 system 目录清零；重点修正页面包括 `price-list`、`client/supplier-settlement`、`category`、`order-adjust`、`quotation`、`user/detail`、`statistics`、`quotation/compare`、`price-list/version`、`refund`、`inquiry-quotation`、`invoice`、`settlement`、`product`、`inquiry`。同时补齐角色管理弹窗 (`role-edit-dialog`、`role-permission-dialog`) footer 按钮语义类（`btn-ghost` / `btn-main`），与全局弹窗底栏规范保持一致。
|
||
26. **第六轮结构统一（进行中，2026-04-17）**：开始将“视觉已统一但结构仍旧”的页面改为标准模板。首批完成 `#/system/review`、`#/system/settlement`、`#/system/invoice`：统一为 **`page-head + panel + filter-block/filter-grid/filter-actions-row + list-body/list-wrap + list-pager-bar`**，并将操作列按钮改为 **`btn-op-item`** 体系、弹窗 footer 改为 **`btn-ghost / btn-main`** 语义按钮，减少历史 `search-bar + inline form + link 按钮` 结构差异。
|
||
27. **第六轮结构统一（第二批，2026-04-17）**：完成 `#/system/price-list`、`#/system/refund`、`#/system/order-adjust`、`#/system/quotation` 的模板化收口：搜索区改为 `filter-block + filter-grid + filter-actions-row`；列表区改为 `list-body/list-wrap + list-table + list-pager-bar`；操作列由 link 按钮改为 `btn-op-item`（首按钮 `primary`）；详情/流程弹窗 footer 统一 `btn-ghost / btn-main`，并移除页面内重复的旧壳层样式（`search-bar/table-container/pagination`）以复用全局 Fresh Mint 规则。
|
||
28. **第六轮结构统一（第三批，2026-04-17）**：完成 `#/system/region`、`#/system/category`、`#/system/unit`、`#/system/parameter` 的 CRUD 基础页动作区与列表交互收口：工具栏主按钮统一 `btn-main`、批量操作统一 `btn-ghost`、行内操作统一 `btn-op-item`（首动作主色）、分页统一 `list-pager-bar`、新增/编辑弹窗 footer 统一 `btn-ghost / btn-main`。本轮保持业务逻辑与复杂弹窗内结构不变，优先消除跨页面按钮体系与分页条样式差异。
|
||
29. **第六轮结构统一（第四批，2026-04-17）**：将 `#/system/region`、`#/system/category`、`#/system/unit`、`#/system/parameter` 进一步对齐 `#/delivery/delivery-demo` 壳层：统一引入 **`page-head + panel + panel-top + filter-block + filter-grid + filter-actions-row + list-body/list-wrap + list-table`** 结构；筛选区改为非 inline 的网格布局并使用 `btn-ghost / btn-main`；列表区统一包裹 `list-body/list-wrap`；移除页面内重复的 `search-bar/toolbar/pagination` 旧壳层样式，交由全局 Fresh Mint 规范接管，实现“按钮一致”升级为“页面骨架一致”。
|
||
30. **第六轮结构统一（第五批，2026-04-17）**：继续对齐 `#/system/review`、`#/system/settlement`、`#/system/invoice` 与 `#/delivery/delivery-demo` 的列表节奏细节：`panel-top` 标题统一补齐 `title-ic` 图标区；筛选区主动作统一为 `搜索`；列表前统一补充 `list-toolbar + list-toolbar-row + list-toolbar-selected + sel-num` 的总量信息带，增强页面信息层级一致性与运营扫描效率。业务流程与弹窗逻辑保持不变。
|
||
31. **第六轮结构统一（第六批，2026-04-17）**：对 `#/system/review`、`#/system/settlement`、`#/system/invoice` 的详情弹窗做视觉统一，形成与列表同语言的卡片化层次：弹窗主体新增 **`detail-hero`**（主标识 + 次信息）与 **`detail-section`**（描述区块容器，薄荷边框/圆角）结构；在不改字段与业务动作的前提下，统一详情首屏信息密度、层次节奏和 Mint 语义背景，减少原生 `el-descriptions border` 的“纯表格感”。
|
||
32. **第六轮结构统一（第七批，2026-04-17）**：将 `detail-hero / detail-section` 从页面级 `scoped` 样式提炼为全局复用样式（`app.scss` 下 `page-container/console-container` 作用域），并在 `review / settlement / invoice` 详情弹窗中切换为统一公共类，移除三页重复定义。后续详情弹窗可直接复用该结构，减少样式漂移与维护成本。
|
||
33. **第六轮结构统一（第八批，2026-04-17）**：继续按 `#/delivery/delivery-demo` 模板推进 `#/system/api-request-log` 与 `#/system/user`：统一为 `page-head + panel + panel-top + filter-block + filter-grid + filter-actions-row + list-toolbar + list-body/list-wrap + list-pager-bar`；操作列链接按钮改为 `btn-op-item`；新增/编辑弹窗 footer 统一 `btn-ghost / btn-main`，并清理页面内 `search-bar/toolbar/pagination` 的重复 scoped 壳层样式。
|
||
34. **第六轮结构统一（第九批，2026-04-17）**：完成 `#/system/statistics` 的旧 `filter-bar/card` 体系替换，整体对齐 `#/delivery/delivery-demo`：新增 `page-head` 与 `panel` 分段结构，筛选区切为 `filter-block + filter-grid + filter-actions-row`（补齐“搜索/重置”动作），运营概览改为统一统计卡网格（`stats-grid`），图表与明细改为 `panel + panel-top + list-body/list-wrap + list-table` 组合，显著降低该页与其他业务页的视觉割裂感。
|
||
35. **第六轮结构统一（第十批，2026-04-17）**：推进 `#/system/product`、`#/system/inquiry`、`#/system/supplier-settlement`、`#/system/client-settlement` 对齐 `#/delivery/delivery-demo`。本批聚焦“高流量复杂页”的外层一致性：统一页头说明（`page-head/page-desc`）、筛选动作文案（“搜索/重置”）、主次按钮语义类（`btn-main/btn-ghost`）、列表操作按钮（`btn-op-item`）、分页条（`list-pager-bar`）与弹窗 footer 按钮语义。`product` 与 `inquiry` 同步补齐 `panel/panel-top/list-toolbar` 骨架；`supplier/client-settlement` 保持双 Tab 与树形明细业务结构不变，仅做 Mint 交互壳层与动作区收口，确保改造不触及结算逻辑。
|
||
36. **商品分类对齐区域管理流程（2026-04-17）**：`#/demo/category` 参考 `#/system/region` 的改造方法完成收口：列表工具栏补齐 **`list-toolbar-selected + sel-num`**，并保持“首按钮主色、其余中性描边”（含批量导入）；表格列头/列值统一居中对齐，状态标签语义统一为 **启用=success、禁用=info**；操作列去除 link 形态，统一 **`btn-op-item`** 体系；新增/编辑弹窗统一 **`label-position="top"`** 与两列排布，footer 统一 **`btn-ghost/btn-main + Close/Check`** 图标，确保与区域管理及全局 Fresh Mint 规范一致。
|
||
37. **商品单位按同构流程收口（2026-04-17）**：`#/demo/unit` 参照 `#/system/region` 与 `#/demo/category` 的改造路径统一壳层与交互细节：工具栏增加 **`list-toolbar-selected + sel-num`**，并保持“首按钮主色、其余中性描边”（含批量导入）；状态标签语义统一为 **启用=success、禁用=info**；操作列固定右侧并预留宽度（≥260）；新增/编辑弹窗改为 **`label-position="top"`** 两列布局，footer 统一 **`btn-ghost/btn-main + Close/Check`** 图标规范。
|
||
38. **商品管理同构改造（2026-04-17）**：`#/demo/product` 对齐 `fresh-mint-green` 与区域/分类/单位页面规范：页头改为 **`page-head + h1 + page-desc`**；筛选区改为 **`filter-form + filter-grid + filter-actions-row`**（非 inline）；列表工具栏合并为单行 **`list-toolbar-row`**（含 **`list-toolbar-selected + sel-num`** 与主次按钮）；表格列头/列值统一居中，状态标签语义为 **启用=success、禁用=info**；操作列改为 **`btn-op-item`**（去 link 形态）并固定右侧预留宽度；新增/编辑与选择参数弹窗 footer 统一 **`btn-ghost/btn-main + Close/Check`**，参数选择表格去 `border` 并改为 Mint 容器边框与透明检索栏。
|
||
39. **树形字段统一路径展示（全局，2026-04-17）**：凡树形字段（商品分类等）统一执行“**下拉展示本级、选中回显全路径、列表展示全路径**”规则：`el-tree-select` 展开态节点文案保留本级名称；选中后输入框通过 `#label` 插槽显示 `根 / 子 / 孙` 全路径；表格/卡片中的分类字段同样优先展示全路径（缺路径时回退接口字段）。实现统一复用 `web-admin/src/utils/tree-path.ts`（`buildTreePathLabelFromFlat`、`findTreeSelectShortLabel`），避免各页面重复拼接逻辑。
|
||
40. **询价报价管理二轮收口（2026-04-17）**（历史页 **`#/business/inquiry-quotation`**）：补齐 `page-head + panel + panel-top`，区域切换统一为 `region-tab-strip/region-tab-btn`；询价与历史报价列表改为 `list-body/list-wrap + list-table` 组合；历史报价筛选改为 `filter-block + history-filter-grid + filter-actions-row`（重置/搜索按钮采用 `btn-ghost/btn-main` + 图标）；操作列从 link 统一为 `btn-op-item`（首动作主色），并将历史列表分页条对齐为 `list-pager-bar`；关键弹窗 footer 同步 `btn-ghost/btn-main + Close/Check`，保持与已改造基础数据页同一视觉语言。
|
||
41. **询价报价管理二轮精修（2026-04-17）**（历史页 **`#/business/inquiry-quotation`**）：继续对 **`新增/编辑询价`**、**`询价详情`**、**`报价明细`**、**`调价确认`** 统一接入 `inquiry-quotation-dialog` + `inquiry-quotation-dialog-mask`（header 薄荷渐变、footer 浅底、无遮罩模糊）；弹窗 footer 按全站规范使用 `btn-ghost/btn-main` 与 `Close/Check` 图标；选品区（左树/右列表/已选区/卡片选中态）统一替换旧灰蓝边框为 Mint 语义边框与主色阴影；历史报价操作列保持固定右侧并使用 `btn-op-item primary`，补齐“弹窗内按钮层级、间距密度、操作列语义”与基础数据页一致性。
|
||
42. **工作台快捷菜单（2026-04-18）**：曾实现 **`shortcuts-grid` + `shortcut-tile`**（`ArtSvgIcon` + **`meta.icon`**）；**（2026-04-18 后续）已移除**——`#/demo/console` **不再展示**独立快捷菜单区，常用入口以侧栏导航为准；**§4.2** 工作台描述已同步。
|
||
43. **工作台近30日折线（2026-04-18）**：`#/demo/console` 在数据概览下增加 **`trend-charts-panel`**：双 **`ArtLineChart`**（营业额元 / 订单数笔），接口 **`fetchOrderTrend` → `/web/admin/statistics/orders/trend?days=30`**（复用 **`statistics_crud.get_order_trend`**）；**§4.2** 已补充。
|
||
44. **工作台今日各区域柱状（2026-04-18）**：`#/demo/console` 在折线图下增加 **`region-today-panel`**：**`RegionTodayDualBarChart`** 分组柱 + 双 **Y** 轴（左营业额元、右订单笔），接口 **`fetchTodayOrdersByRegion` → `/web/admin/statistics/orders/today-by-region`**（**`statistics_crud.get_today_order_stats_by_region`**：启用区域全量，无单为 0）；**§4.2**、实现清单 **§7** 已同步。
|
||
45. **工作台今日客户柱状与标题竖条（2026-04-18）**：**`region-today-split`** 右列「今日下单客户」：**`fetchTodayOrdersByClient` → `/web/admin/statistics/orders/today-by-client`**（**`get_today_order_stats_by_client`**：今日下单金额合计 + **`biz_order_item.quantity`** 合计，金额降序至多 30 条）；**`RegionTodayDualBarChart`** 支持系列名/空文案等 props；**`App.vue`** **`panelTitleBarTextRules`** 增加 **近30日趋势**、**今日各区域** 以使用 **`title-bar-heading`** 绿色竖条。
|
||
|
||
---
|
||
|
||
## 14. 附录 A：权威来源
|
||
|
||
- 本文件已尽量与 **`fresh-mint-green.html`** 内 `<style>` **逐段对齐**；若出现**数值/选择器不一致**，以 **HTML 文件为准**，并回写修正本文档。
|
||
- **交互脚本、路由、假数据** 不在本规范范围。
|
||
- demo 更新时，应**同步修订**本 Markdown。
|
||
|
||
---
|
||
|
||
## 15. 附录 B：脚本与动态行为
|
||
|
||
以下依赖 **JavaScript 行为** 或动态 class，样式已在正文 §3、§6、§7 写明，实现时除 CSS 外需对齐逻辑：
|
||
|
||
- Tab 切换、**`.is-active` / `.is-refreshing`** 的切换时机
|
||
- 分页当前页、**`.pager-num.is-current`**、**`.pager-btn:disabled`**
|
||
- **`.is-loading`** 的添加与移除
|
||
- `details` **open** 状态与 summary 箭头旋转
|
||
|
||
**不再将「遗漏的静态样式」单独列表**——细节已收入 §1–§11；若仍缺，请直接在 HTML 中检索对应 **class** 名。
|