Web 管理端 UI 规范（Fresh Mint）

设计源文件：test/fresh-mint-green.html（叁强鲜配 · 配送调度演示页）
适用范围：web-admin 工程（Vue 3 + Element Plus + SCSS/Tailwind）。实现时通过 CSS 变量 + Element 主题变量 + 少量全局覆盖 对齐本规范；类名可与 demo 不同，但视觉参数以下文为准。

设计理念与原则
设计 Token（CSS 变量）
全局与布局结构
页面级元素
筛选区与带清除输入（含 §5.5–§5.6 树形选择）
按钮体系与 Loading
列表区、表格与分页
树形与子表（进阶）
弹窗、遮罩与详情视图
表单扩展、迷你表与上传
图标与无障碍
业务状态色（与订单/配送枚举）
实现清单（web-admin 改造对照）
附录 A：权威来源
附录 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`）

单张卡片结构（自上而下）：

标题行：拖拽柄、序号、参数名/编码、删除。
第二行：左参数类型标签（文本 / 下拉 / 多选）；右 是否必填。
第三块（整卡 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 改造对照）

全局注入 §2 Token，并对齐 Element --el-color-primary 等。
布局 §3：侧栏、顶栏、内容区、Tab、顶栏进度条（可选）。
筛选 §5、按钮 §6、表单 §10。
表格与 art-table：el-table 对齐 §7（含 sticky、图文列；Element 列表分页条见 §7.9）。
el-dialog / el-drawer：§9。
树形页面：§8。
工作台（#/dashboard/console）：见 §4.2 工作台小节——与 fresh-mint-green.html .stat 同构的指标/快捷卡、list-body list-wrap + list-table + stripe（无 border）最新订单；与 el-ui.scss 中 console-container 表格/主按钮覆盖一致。
商品分类（#/base/category）：与 区域管理 同构——页头说明、筛选 §5、工具栏 §7.3（已选 + 左起操作）、list-body + 表格 + Element 分页、状态 pill 与 Fresh Mint token；新增/编辑/选参弹窗底栏 dialog-footer + Close / Check 图标，图标间距 6px（与工具栏一致）；弹窗内 参数卡片 布局与 .parameter-assoc-form 见 §10.6；列表操作列统一为 首个按钮主色，后续按钮中性（父分类：新增子分类主色；编辑/删除中性。子分类：编辑主色；删除中性）。
商品单位（#/base/unit）：与 区域管理 同构（页头说明、筛选、工具栏 §7.3、list-body 顶部分割线、表格、分页、scroll-to-error + 校验失败 ElMessageBox.alert、unit-dialog 与 两列表单）；列表操作列 编辑主色 / 删除中性。
商品管理（#/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，避免任何菜单页弹窗出现背景模糊。
询价报价管理（#/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。
参数模板（#/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）。
用户管理（#/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。
订单列表（#/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 底栏规则（与询价大弹窗同构；无模糊遮罩）。
商家结算管理（#/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。
客户结算管理（#/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 统一。
配送列表（#/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（薄荷渐变头、无遮罩模糊）以保持订单/结算/配送弹窗视觉一致。
时效预警（#/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，与订单/结算/配送页面维持一致的薄荷渐变头和无遮罩模糊策略。
系统设置（#/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 高 + 薄荷色链），整体与已改造业务页面的卡片、标题、按钮体系一致。
接口日志（#/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 内 <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 名。

web-admin-ui-spec-fresh-mint.md 59 KB Bezpośredni odnośnik Historia Czysty

Web 管理端 UI 规范（Fresh Mint）

目录

1. 设计理念与原则

2. 设计 Token（CSS 变量）

3. 全局与布局结构

3.1 根布局 .layout

3.2 侧栏 .sidebar

3.3 Logo .logo / .logo span

3.4 导航分组 .nav-details

3.5 侧栏底部 .nav-foot

3.6 主列 .main

3.7 顶栏 .header

3.8 内容区 .content

3.9 Tab 条 .tabs-strip / .tab-chip

3.10 Tab 内容挂载与刷新态

4. 页面级元素

4.1 页标题 .page-head

4.2 统计卡片 .stats / .stat

4.3 面板 .panel / .panel-top

5. 筛选区与带清除输入

5.1 筛选区 .filter-block

5.2 控件 .input / .select（筛选内与通用一致）

5.3 展开区与操作行

5.4 带清除的输入 .input-clear-wrap / .input-clear

5.5 筛选区树形选择 el-tree-select（下拉本级名、选中全路径）

5.6 树形业务数据全链路展示规律（通用，不限于商品分类）

6. 按钮体系与 Loading

6.1 类型一览

6.2 Loading 态 .is-loading

7. 列表区、表格与分页

7.1 结构顺序

7.2 .list-body

7.3 列表工具栏 .list-toolbar

7.4 通用 table（非 .data-table 时的基线）

7.5 .data-table 专用规则

7.6 滚动 .table-scroll

7.7 状态标签 .tag

7.8 分页（HTML demo：.list-pager）

7.9 分页（Element Plus：el-pagination 与 .pagination.list-pager-bar）