# Web 管理端 UI 规范（Fresh Mint） > **设计源文件**：`test/fresh-mint-green.html`（叁强鲜配 · 配送调度演示页） > **适用范围**：`web-admin` 工程（Vue 3 + Element Plus + SCSS/Tailwind）。实现时通过 **CSS 变量 + Element 主题变量 + 少量全局覆盖** 对齐本规范；**类名可与 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） **工作台**（`#/dashboard/console`，根容器 **`console-container`**）：页头 **`page-head` + `h1` + `page-desc`（§4.1）**；**时效预警条**与全局 **`console-container .alert-bar`** 一致（琥珀底 **`#fffbeb`**、边 **`#fde68a`**）。**指标与快捷入口**的盒型与 **`test/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`** 一致）。**常用入口**为同一 **`stat` + `stats-card`** 形态的 **`quick-stat`** 栅格（**`stat-ic--sm`** 可 **`40px`**）。**最新订单**：**`section.panel`** + **`panel-top`** + **`list-body list-wrap`**（顶 **`border-top`**、**`list-wrap`** **`border-radius: 0 0 10px`** 与业务列表页一致）+ **`el-table`** **`list-table` + `stripe`**（**勿**加 **`border`**，与 **`#/order/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 ### 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`** 建议同时匹配本级名与全路径，便于用上级关键词检索。 - **落地参考**：`#/base/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）以便前端拼路径。 **已对齐页面（随改造持续补充）**：`#/base/product`（列表列、筛选/表单树选、导出、查看弹窗组件）、`#/business/inquiry-quotation`（分类列/卡片等使用分类树路径映射）。 --- ## 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`** 将按钮区整体推到行末（与区域管理等页一致）。 - **`.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`。 ### 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`） 与 `test/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` 列表页（如 **单位管理** `#/base/unit`、**商品管理** `#/base/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`** 覆盖整块「表 + 分页」；分页条上边框与表体底边衔接，形成明确的「列表分页区」。 **对齐参考页**：`#/base/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`**。 - **壳层 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 列表「查看」按钮与查看弹窗模板（推荐复用） 参考设计源 `test/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` 语义类，业务页只传入数据与开关状态，避免每页重复造样式。 - **落地示例**：`#/base/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 商品分类 · 弹窗内「参数」卡片（`#/base/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. **工作台**（`#/dashboard/console`）：见 **§4.2** 工作台小节——与 **`fresh-mint-green.html`** **`.stat`** 同构的指标/快捷卡、**`list-body list-wrap` + `list-table` + `stripe`**（无 **`border`**）最新订单；与 **`el-ui.scss`** 中 **`console-container`** 表格/主按钮覆盖一致。 8. **商品分类**（`#/base/category`）：与 **区域管理** 同构——页头说明、筛选 §5、工具栏 §7.3（已选 + 左起操作）、`list-body` + 表格 + **Element 分页**、状态 pill 与 **Fresh Mint** token；新增/编辑/选参弹窗底栏 **`dialog-footer`** + **Close / Check** 图标，图标间距 **6px**（与工具栏一致）；弹窗内 **参数卡片** 布局与 **`.parameter-assoc-form`** 见 **§10.6**；列表操作列统一为 **首个按钮主色，后续按钮中性**（父分类：新增子分类主色；编辑/删除中性。子分类：编辑主色；删除中性）。 9. **商品单位**（`#/base/unit`）：与 **区域管理** 同构（页头说明、筛选、工具栏 §7.3、`list-body` 顶部分割线、表格、分页、`scroll-to-error` + 校验失败 **`ElMessageBox.alert`**、**`unit-dialog`** 与 **两列表单**）；列表操作列 **编辑主色 / 删除中性**。 10. **商品管理**（`#/base/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`）：**页头** **`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. **参数模板**（`#/base/parameter`）：与 **商品单位** 同构——页头 **`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`**）：与 **`#/base/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. **用户管理**（`#/base/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. **订单列表**（`#/order/order`）：页头 **`page-desc`**；**`section.panel`** 内 **`panel-top`**（**`title-ic` + Operation**）；筛选 **`filter-block`**（**§5.3**：多行栅格 / **`filter-extra`** / **`filter-actions`** 之间 **无** 横向分割线，仅用间距）对齐 **`test/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`**。**树形多层级**（对齐 **`test/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` 滚动展示能力。 --- ## 14. 附录 A：权威来源 - 本文件已尽量与 **`test/fresh-mint-green.html`** 内 `