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 页 与组件源码为准。

设计理念与原则
设计 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`	`#f7faf8`	表头、列表工具栏、弹窗底栏、`.tag.muted` 背景
`--row-alt`	`#f1f5f9`	斑马纹偶数行、hover 侧栏 summary、输入清除按钮 hover 等
`--row-hover`	`#fee2e2`	表格数据行 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.0 默认壳层（web-admin 运行时）

默认布局：单列树形侧栏（MenuTypeEnum.LEFT）。没有独立的一级纵向 Tab 栏。
侧栏顶部品牌：Logo + 系统名称（侧栏顶部）。
树形区：一整棵业务菜单树，只展示非叶子（一级如「报销管理」「CRM管理」作为可展开目录；最后一层非叶子如「基础配置」可点击打开右侧组 Tab）。叶子不在侧栏展示。数字角标挂在组节点上（汇总可见叶子）。
内容区自上而下：顶栏（面包屑/工具，高约 56px）→ 组叶子 Tab 条（该组可见叶子多于 1 个时）→ 页面内容。单叶子组（如 CRM 产品管理、客户管理）不渲染 Tab 条。
仍默认不展示 WorkTab（可关闭的历史页签）。组 Tab 不是 WorkTab：不能单个关闭；换最后一层非叶子则整组替换；默认只加载当前叶子，点哪个 Tab 再加载哪个页。
树区宽度：约 260px。
门户（PORTAL）/ 双列（DUAL_MENU）：不再作为产品默认壳层。
色调：Fresh Mint（--primary #10b981 链）；不得使用案例 HTML 的 #167c4a 作为主色。

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)
字号：14px，字重：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: 15px，无下划线
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: 15px
内链接：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），避免出现同一行多颗绿色主按钮（与设计图一致）。
次要操作溢出收纳：次要操作（编辑/删除/导出/清空列过滤等）使用 ListToolbarOverflow；布局为「主操作 → Overflow → EndActions」。溢出池内编辑/删除靠前，导出与清空列过滤靠后（清空列过滤最末）。顺序遵循本节约定；公共组件见 web-admin/src/components/business/list-toolbar-overflow/index.vue，操作项工厂见 web-admin/src/utils/list-toolbar-overflow-items.ts。
列表操作列全局规则（强约束）：所有列表的“操作”列需 固定在右侧（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 主列表视口填满滚动

主内容区业务列表（list-body + 表 + list-pager-bar）SHALL 使用 Element Plus 表体固定可视高度（height / 动态像素），使：

纵向滚动发生在表体内，表头固定在表体顶部；
横向滚动条贴在表体可视区底部（不必滚到最后一行）；
分页条在表外且始终可见，分页底边到内容区底保留 10px。

推荐通过 composable useListTableViewportHeight 计算：

height = max(240, floor(contentViewportBottom - tableTop - pagerHeight - 10))

测量根优先 #app-content。弹窗内明细小表、统计卡内小表不强制本策略，可继续使用局部 max-height。

历史 HTML demo 类名 .table-scroll 仅作结构参考；落地以 el-table/ListTable 的 height 为准，避免外层再套冲突的 overflow-y: auto。

7.7 状态标签（`el-tag` / `.tag`）

业务状态、结论、类型等 SHALL 使用 Element Plus el-tag，全局样式为 深色底 + 白字（实现见 web-admin/src/assets/styles/core/el-ui.scss）：

Tag type	背景	文字
`success` / `primary` / 默认	`#059669`	`#fff`
`warning`	`#d97706`	`#fff`
`danger`	`#dc2626`	`#fff`
`info`	透明（无背景）	`var(--mint-text)` `#1e293b`

圆角 6px，padding: 2px 8px，字号 12px，字重 600，无边框
HTML demo 自绘 .tag：默认可对齐上表 success；.muted 仍可用浅底 var(--table-head) + var(--text-muted)（非业务枚举 Tag）

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-body.list-wrap 使用 border: 1px solid var(--border) + border-radius: var(--radius)（四角 10px）+ overflow: hidden 裁剪表头/单元格直角，形成圆角列表框（外缘描边由该容器承接，表体最外圈竖线去掉以免双边线）。分页条与表同处框内，勿再额外 margin-top 造成与表格脱节。

对齐参考页：#/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，默认四列（1040px 弹窗），gap: 12px 18px；窄屏逐级降为 3 / 2 / 1 列
.view-kv：上下堆叠（label 上、value 下），value 14px；dt（label） 13px muted；dd 600 字重，word-break: break-word
跨列：短值占 1 列（4 个/行）；长值（span: true / 自动检测 ≥17 字或路径 /）占 2 列（2 个/行）；超长（≥80 字或 span: 'full'）整行

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`）

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

标题行：拖拽柄、序号、参数名/编码、删除。
第二行：左参数类型标签（文本 / 下拉 / 多选）；右 是否必填。
第三块（整卡 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. 业务状态色（与订单/配送枚举）

主品牌仍为绿；列表 el-tag 建议（深色底 + 白字，见 §7.7）：

进行中 / 主状态 / 成功 / 完结：深绿底 #059669 + 白字（success / primary）
警告 / 待支付：琥珀底 #d97706 + 白字（warning）
危险 / 异常：红底 #dc2626 + 白字（danger）
中性 / 停用 / 待生效：无背景 + 标准正文色 #1e293b（info）

（与 .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。
工作台（#/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 表格/主按钮覆盖一致。
商品分类（#/demo/category）：与 区域管理 同构——页头说明、筛选 §5、工具栏 §7.3（已选 + 左起操作）、list-body + 表格 + Element 分页、状态 pill 与 Fresh Mint token；新增/编辑/选参弹窗底栏 dialog-footer + Close / Check 图标，图标间距 6px（与工具栏一致）；弹窗内 参数卡片 布局与 .parameter-assoc-form 见 §10.6；列表操作列统一为 首个按钮主色，后续按钮中性（父分类：新增子分类主色；编辑/删除中性。子分类：编辑主色；删除中性）。
商品单位（#/demo/unit）：与 区域管理 同构（页头说明、筛选、工具栏 §7.3、list-body 顶部分割线、表格、分页、scroll-to-error + 校验失败 ElMessageBox.alert、unit-dialog 与 两列表单）；列表操作列 编辑主色 / 删除中性。
商品管理（#/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，避免任何菜单页弹窗出现背景模糊。
询价报价管理（历史路由 #/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。
参数模板（独立菜单已裁剪；列表与弹窗版式同 #/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）。
用户管理（#/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。
订单列表（#/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 底栏规则（与询价大弹窗同构；无模糊遮罩）。
商家结算管理（历史路由 #/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。
客户结算管理（历史路由 #/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 滚动展示能力。
全局壳层回归（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 视觉层级。
第二轮批量回归（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 按钮与顶部标签表单规范。
第三轮业务页收口（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 激活态、地址卡片强调边、时间轴节点、风险提示等关键视觉点，避免后台页面出现“蓝/绿/橙/红混搭”的历史风格。
第四轮一致性细节（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 的弹窗底栏视觉差异。
第五轮验收清单（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），与全局弹窗底栏规范保持一致。
第六轮结构统一（进行中，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 按钮 结构差异。
第六轮结构统一（第二批，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 规则。
第六轮结构统一（第三批，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。本轮保持业务逻辑与复杂弹窗内结构不变，优先消除跨页面按钮体系与分页条样式差异。
第六轮结构统一（第四批，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 规范接管，实现“按钮一致”升级为“页面骨架一致”。
第六轮结构统一（第五批，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 的总量信息带，增强页面信息层级一致性与运营扫描效率。业务流程与弹窗逻辑保持不变。
第六轮结构统一（第六批，2026-04-17）：对 #/system/review、#/system/settlement、#/system/invoice 的详情弹窗做视觉统一，形成与列表同语言的卡片化层次：弹窗主体新增 detail-hero（主标识 + 次信息）与 detail-section（描述区块容器，薄荷边框/圆角）结构；在不改字段与业务动作的前提下，统一详情首屏信息密度、层次节奏和 Mint 语义背景，减少原生 el-descriptions border 的“纯表格感”。
第六轮结构统一（第七批，2026-04-17）：将 detail-hero / detail-section 从页面级 scoped 样式提炼为全局复用样式（app.scss 下 page-container/console-container 作用域），并在 review / settlement / invoice 详情弹窗中切换为统一公共类，移除三页重复定义。后续详情弹窗可直接复用该结构，减少样式漂移与维护成本。
第六轮结构统一（第八批，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 壳层样式。
第六轮结构统一（第九批，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 组合，显著降低该页与其他业务页的视觉割裂感。
第六轮结构统一（第十批，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 交互壳层与动作区收口，确保改造不触及结算逻辑。
商品分类对齐区域管理流程（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 规范一致。
商品单位按同构流程收口（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 图标规范。
商品管理同构改造（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 容器边框与透明检索栏。
树形字段统一路径展示（全局，2026-04-17）：凡树形字段（商品分类等）统一执行“下拉展示本级、选中回显全路径、列表展示全路径”规则：el-tree-select 展开态节点文案保留本级名称；选中后输入框通过 #label 插槽显示 根 / 子 / 孙 全路径；表格/卡片中的分类字段同样优先展示全路径（缺路径时回退接口字段）。实现统一复用 web-admin/src/utils/tree-path.ts（buildTreePathLabelFromFlat、findTreeSelectShortLabel），避免各页面重复拼接逻辑。
询价报价管理二轮收口（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，保持与已改造基础数据页同一视觉语言。
询价报价管理二轮精修（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，补齐“弹窗内按钮层级、间距密度、操作列语义”与基础数据页一致性。
工作台快捷菜单（2026-04-18）：曾实现 shortcuts-grid + shortcut-tile（ArtSvgIcon + meta.icon）；（2026-04-18 后续）已移除——#/demo/console 不再展示独立快捷菜单区，常用入口以侧栏导航为准；§4.2 工作台描述已同步。
工作台近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 已补充。
工作台今日各区域柱状（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 已同步。
工作台今日客户柱状与标题竖条（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 名。

web-admin-ui-spec-fresh-mint.md 80 KB Постоянна връзка История Директен файл

Web 管理端 UI 规范（Fresh Mint）

目录

1. 设计理念与原则

2. 设计 Token（CSS 变量）

3. 全局与布局结构

3.0 默认壳层（web-admin 运行时）

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（下拉本级名、选中全路径）