提交

2026-05-12 16:35:07 +08:00
1 parent d336fd0226
commit 2e9d020d50
@@ -0,0 +1,345 @@
+# 小程序端 UI 规范（中科兴皖一体化门户）
+
+> **适用范围**：`miniprogram`（客户端 / 供应商端 / 配送员端）  
+> **设计基准文件（Demo）**：  
+> - `mobile-ui/sanqiang-client-ui-demo.html`
+> - `mobile-ui/sanqiang-client-cart-ui-demo.html`
+> - `mobile-ui/sanqiang-client-order-ui-demo.html`
+> - `mobile-ui/sanqiang-client-profile-ui-demo.html`
+> - `mobile-ui/sanqiang-supplier-ui-demo.html`
+> - `mobile-ui/sanqiang-deliverer-ui-demo.html`
+
+---
+
+## 目录
+
+1. 设计目标与适配范围  
+2. 设计 Token（颜色 / 字体 / 间距 / 圆角）  
+3. 三端统一视觉骨架  
+4. 客户端页面规范  
+5. 供应商端页面规范  
+6. 配送员端页面规范  
+7. 组件规范（分类、卡片、结算条、状态标签、菜单宫格）  
+8. 交互与可用性规范  
+9. 页面改造检查清单  
+10. 约束与落地策略  
+11. 从 Demo 到 uni-app 的 class 映射建议
+
+---
+
+## 1. 设计目标与适配范围
+
+- 目标：在不改变业务流程的前提下，提升小程序三端的视觉一致性、操作效率和信息可读性。
+- 原则：
+  - 同品牌：统一绿色与大麦黄品牌感。
+  - 同骨架：标题区、统计区、功能区、任务/列表区的结构节奏一致。
+  - 角色可分：允许角色页面在信息密度和状态强调上有差异，但不打破整体系统。
+- 设备宽度：以 `375px` 为主基线，兼容 `414px`。
+
+---
+
+## 2. 设计 Token（颜色 / 字体 / 间距 / 圆角）
+
+### 2.1 颜色
+
+```scss
+// 品牌主色
+$brand-green: #0a9f6d;
+$brand-green-dark: #087f57;
+$brand-green-soft: #e9f9f2;
+
+// 品牌辅助
+$barley-yellow: #d6a343;
+$barley-yellow-soft: #fff7e8;
+
+// 中性色
+$bg-page: #f5f8f7;
+$surface: #ffffff;
+$text-primary: #1f2a26;
+$text-muted: #6b7b74;
+$border: #dcebe4;
+
+// 语义色
+$danger: #d14343;
+$warning: #cf8a19;
+$success: #189b65;
+```
+
+### 2.2 字体与字号
+
+- 字体：`-apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif`
+- 标题：`18px / 20px`
+- 正文：`13px / 14px`
+- 辅助：`11px / 12px`
+- 数字金额：`16px / 20px`，建议半粗体以上（600/700）
+
+### 2.3 间距与圆角
+
+- 间距节奏：`8 / 10 / 12 / 14 / 16`
+- 卡片圆角：`12px / 14px / 16px`
+- 大容器圆角：`18px / 22px`
+- 胶囊按钮：`14px / 17px / 20px`
+
+---
+
+## 3. 三端统一视觉骨架
+
+### 3.1 页面结构
+
+- 顶部 Header（渐变品牌区）
+- 统计或关键提示区（可选）
+- 功能入口区（宫格）
+- 主业务区（商品/任务/订单列表）
+- 底部固定区（仅客户端：首页结算条 + TabBar）
+
+### 3.2 Header 统一规则
+
+- 渐变：绿色系 `linear-gradient(145deg, $brand-green-dark, $brand-green)`
+- 标题左对齐，退出/操作按钮右对齐
+- 下缘采用较大圆角（20~24px）形成模块感
+
+### 3.3 卡片与容器
+
+- 默认白底 + 浅边框（`$border`）
+- 阴影轻量，避免厚重
+- 卡片内部信息按“标题 -> 次级说明 -> 操作”组织
+
+---
+
+## 4. 客户端页面规范
+
+### 4.1 首页（`sanqiang-client-ui-demo.html`）
+
+- 顶部：地址 + 搜索框
+- 分类区：
+  - 一级分类为“两行五列（每页 10 个）”
+  - 多页横向滑动，页数对应滑块数量
+  - 滑块支持点击翻页
+- 二级分类：左侧竖向列表 + 右侧商品区
+- 商品卡：图、名称、规格、价格、加购按钮
+- 底部结算条：数量、总价、去结算主按钮
+
+### 4.2 购物车（`sanqiang-client-cart-ui-demo.html`）
+
+- 供应站分组展示
+- 商品行含规格、价格、加减数量器
+- 结算区固定在底部，主按钮突出
+
+### 4.3 订单（`sanqiang-client-order-ui-demo.html`）
+
+- 顶部状态筛选（全部/待支付/待配送/配送中/已完成）
+- 订单卡片显示：订单号、状态、时间、配送节点、金额
+- 操作按钮按主次分层（主按钮优先关键操作）
+
+### 4.4 个人中心（`sanqiang-client-profile-ui-demo.html`）
+
+- 头部用户信息 + 统计
+- 常用功能列表（地址/发票/结算/退款/客服）
+- 优惠券与退出登录操作置于可快速触达区域
+
+---
+
+## 5. 供应商端页面规范
+
+对应：`sanqiang-supplier-ui-demo.html`
+
+- 结构：工作台头部 -> 统计 -> 常用功能 -> 备货任务列表
+- 常用功能采用 4 列宫格，标签简短直观
+- 任务卡展示关键信息：
+  - 任务号
+  - 状态标签（待备货 / 备货中）
+  - 配送员与截止时间
+  - 商品缩略信息
+  - 件数与金额、主操作按钮
+
+---
+
+## 6. 配送员端页面规范
+
+对应：`sanqiang-deliverer-ui-demo.html`
+
+- 与供应商端保持同风格、同配色、同布局节奏
+- 功能菜单放在任务列表上方（与供应商端摆放逻辑一致）
+- 任务区域需突出：
+  - 取货信息
+  - 配送信息
+  - 联系动作
+  - 件数和主操作按钮（如“导航并取货”）
+
+---
+
+## 7. 组件规范
+
+### 7.0 商品图片与多媒体规范（强约束）
+
+> 目的：统一三端商品图片展示口径，避免运营上传图片后在不同页面“变形/撑高/被截断”。
+
+#### 7.0.1 商品主图（列表缩略图）
+
+- **推荐比例**：`1:1`（正方形）
+- **推荐尺寸**：`800×800` ~ `2000×2000` 像素（JPG/PNG/WebP）
+- **小程序展示规则**：
+  - 列表/购物车/订单/任务里的商品缩略图容器为固定方图
+  - 图片采用 **居中裁切填充**（`aspectFill`）：非 1:1 的图片会被裁切到方形，主体请尽量居中
+
+#### 7.0.2 商品轮播图（详情页顶部 Banner）
+
+- **推荐比例**：`4:3`
+- **推荐尺寸**：宽度约 `750px`（例如 `750×562`）
+- **小程序展示规则**：
+  - 详情页顶部轮播区域按 **4:3** 容器展示
+  - 图片采用 **居中裁切填充**（`aspectFill`）：非 4:3 的图片会被裁切，主体请尽量居中
+
+#### 7.0.3 商品详情媒体（详情图/视频列表）
+
+- **图片比例**：不强制比例（建议宽度约 `750px`）
+- **小程序展示规则（图片）**：
+  - 采用 **宽度自适应高度**（`widthFix`）：图片按屏幕宽度铺满，高度随原图等比变化
+  - 建议避免在图片最顶部/最底部放置关键小字，留出适当上下留白以适配不同机型
+- **小程序展示规则（视频）**：
+  - 建议 `720p` 以内，并尽量缩短时长以利加载
+
+### 7.1 分类卡片（客户端首页）
+
+- 每页 2 行 * 5 列
+- 卡片允许“无背景/无边框”简洁样式，但激活态需可辨识
+- 图标/图片占位应较大（提高扫读效率）
+
+### 7.2 分类分页滑块
+
+- 有几页就有几个滑块
+- 当前页滑块高亮
+- 可点击切换页，并与滑动同步
+
+### 7.3 状态标签
+
+- `warning`：待处理（琥珀）
+- `success`：进行中/完成（绿色系）
+- `danger`：异常/风险（红色）
+- 避免同屏过多高饱和颜色
+
+### 7.4 底部结算条（客户端）
+
+- 信息结构：数量 -> 总价 -> 主按钮
+- 主按钮保持最高视觉优先级
+- 结算条整体与页面保持品牌一致（浅色底或深色底二选一，保持统一）
+
+### 7.5 功能宫格
+
+- 推荐 3 或 4 列
+- 图标尺寸、文字字号、卡片高度统一
+- 文案优先“动词 + 对象”（如：查看任务、我的报价）
+
+---
+
+## 8. 交互与可用性规范
+
+- 触达尺寸：可点击元素不小于 `44x44`
+- 点击反馈：按钮/卡片需有明确反馈（颜色/阴影/位移之一）
+- 滑动冲突：一级分类横滑区域不要与主内容纵向滚动冲突
+- 信息层级：同一块内容避免超过 2 个主视觉焦点
+- 文本策略：长文本省略 + 关键字段完整可见（订单号、金额、状态）
+
+---
+
+## 9. 页面改造检查清单
+
+- [ ] 是否遵循本规范 Token（颜色/间距/圆角/字号）
+- [ ] 三端是否保持同品牌风格和一致骨架
+- [ ] 客户端分类是否满足“2 行 5 列 + 分页滑块”
+- [ ] 配送员端菜单是否在任务列表上方
+- [ ] 供应商端与配送员端配色和组件风格是否一致
+- [ ] 底部结算条层级是否清晰、按钮是否突出
+- [ ] 状态标签颜色语义是否一致
+
+---
+
+## 10. 约束与落地策略
+
+- 以本文档和 `mobile-ui/sanqiang-*.html` 为小程序 UI 改造的视觉权威。
+- 改造时优先顺序：
+  1) 统一 Token  
+  2) 统一布局骨架  
+  3) 页面组件映射  
+  4) 细节与动效优化
+- 后续新增页面需先在本规范补充“页面结构和组件映射”，再落代码。
+
+---
+
+## 11. 从 Demo 到 uni-app 的 class 映射建议
+
+> 目的：让开发可直接按 Demo 结构迁移到 `miniprogram/src/pages/**.vue`，减少“重命名 + 重排”成本。  
+> 建议：优先保留 Demo class 名，若历史页面已存在 class，可做“旧类名 = 新类名别名”过渡。
+
+### 11.1 客户端首页映射（`pages/client/home/home.vue`）
+
+| Demo 区块 | Demo class | 建议 uni-app class |
+|---|---|---|
+| 页面根容器 | `phone` | `client-home-page` |
+| 顶部头部 | `top`, `top-row`, `search` | `client-header`, `client-header-row`, `client-search` |
+| 一级分类分页容器 | `first-level` | `client-first-level` |
+| 一级分类分页项 | `first-page` | `client-first-page` |
+| 一级分类卡片 | `first-chip` | `client-first-chip` |
+| 一级分类滑块组 | `first-level-indicator` | `client-first-indicator` |
+| 一级分类滑块项 | `indicator-dot` | `client-first-indicator-dot` |
+| 分类主布局 | `category-layout` | `client-category-layout` |
+| 二级分类侧栏 | `second-level`, `second-item` | `client-second-level`, `client-second-item` |
+| 商品区 | `goods-area`, `goods-list`, `goods-card` | `client-goods-area`, `client-goods-list`, `client-goods-card` |
+| 底部结算条 | `cart-bar`, `cart-inner`, `settle` | `client-cart-bar`, `client-cart-inner`, `client-settle-btn` |
+
+### 11.2 客户端购物车映射（`pages/client/cart/cart.vue`）
+
+| Demo 区块 | Demo class | 建议 uni-app class |
+|---|---|---|
+| 页面头部 | `top`, `title`, `sub` | `cart-header`, `cart-title`, `cart-sub` |
+| 店铺分组卡 | `store`, `store-head`, `store-name` | `cart-store-card`, `cart-store-head`, `cart-store-name` |
+| 商品行 | `item`, `thumb`, `name`, `spec` | `cart-item-row`, `cart-item-thumb`, `cart-item-name`, `cart-item-spec` |
+| 数量控制 | `qty`, `qbtn`, `qnum` | `cart-qty`, `cart-qty-btn`, `cart-qty-num` |
+| 底部结算 | `bar`, `total`, `btn` | `cart-footer`, `cart-total`, `cart-checkout-btn` |
+
+### 11.3 客户端订单映射（`pages/client/order/order.vue`）
+
+| Demo 区块 | Demo class | 建议 uni-app class |
+|---|---|---|
+| 顶部筛选 | `tabs`, `tab` | `order-tabs`, `order-tab-item` |
+| 订单卡 | `order`, `head`, `no` | `order-card`, `order-card-head`, `order-no` |
+| 状态标签 | `status pending/delivering` | `order-status status-pending/status-delivering` |
+| 订单商品摘要 | `goods`, `img`, `meta` | `order-goods-row`, `order-goods-thumb`, `order-goods-meta` |
+| 卡片底部动作 | `ft`, `actions`, `btn` | `order-footer`, `order-actions`, `order-action-btn` |
+
+### 11.4 客户端个人中心映射（`pages/client/profile/profile.vue`）
+
+| Demo 区块 | Demo class | 建议 uni-app class |
+|---|---|---|
+| 头部用户区 | `header`, `user`, `avatar`, `name` | `profile-header`, `profile-user`, `profile-avatar`, `profile-name` |
+| 统计区 | `stats`, `s` | `profile-stats`, `profile-stat-item` |
+| 功能列表 | `card`, `row`, `left`, `arrow` | `profile-menu-card`, `profile-menu-row`, `profile-menu-left`, `profile-menu-arrow` |
+| 退出按钮 | `logout` | `profile-logout-btn` |
+
+### 11.5 供应商端映射（`pages/supplier/home/home.vue`）
+
+| Demo 区块 | Demo class | 建议 uni-app class |
+|---|---|---|
+| 头部 | `header`, `topline`, `merchant` | `supplier-header`, `supplier-header-top`, `supplier-merchant` |
+| 统计卡 | `stats`, `stat` | `supplier-stats`, `supplier-stat-item` |
+| 功能宫格 | `tools`, `tool`, `icon` | `supplier-tools`, `supplier-tool-item`, `supplier-tool-icon` |
+| 任务列表 | `tasks`, `task` | `supplier-task-list`, `supplier-task-card` |
+| 任务状态 | `tag pending/stocking` | `supplier-task-tag tag-pending/tag-stocking` |
+
+### 11.6 配送员端映射（`pages/deliverer/home/home.vue`）
+
+| Demo 区块 | Demo class | 建议 uni-app class |
+|---|---|---|
+| 头部与统计 | 同供应商结构 | `deliverer-header`, `deliverer-stats` |
+| Tab 区 | `tabs`, `tab` | `deliverer-tabs`, `deliverer-tab-item` |
+| 菜单宫格（在任务上方） | `tools`, `tool` | `deliverer-tools`, `deliverer-tool-item` |
+| 任务卡 | `task`, `line1`, `status` | `deliverer-task-card`, `deliverer-task-head`, `deliverer-task-status` |
+| 取货/配送信息块 | `blk`, `phone-row`, `dial` | `deliverer-info-block`, `deliverer-phone-row`, `deliverer-dial-btn` |
+
+### 11.7 实施建议（迁移顺序）
+
+1. **先挂 class，不改业务逻辑**：先在现有模板上补 class，确保样式可落。  
+2. **再替换样式变量**：将页面颜色/间距替换为本规范 Token。  
+3. **最后收敛重复样式**：把通用样式抽到 `src/styles` 或公共组件。  
+4. **状态类统一命名**：统一 `tag-*` / `status-*`，减少后续维护成本。  
+5. **交互类保持语义化**：如 `*-indicator-dot`、`*-checkout-btn`，便于后续脚本绑定。
@@ -0,0 +1,678 @@
+# Web 管理端 UI 规范（Fresh Mint）
+
+> **设计源文件**：`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`**）。**数据概览（指标区）**的盒型与 **`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`**，与 **`#/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
+- **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`** 建议同时匹配本级名与全路径，便于用上级关键词检索。
+- **落地参考**：`#/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`** 将按钮区整体推到行末（与区域管理等页一致）。
+- **区域管理对齐点（强约束）**：如 `#/system/region` 的列表工具栏，**「已选 N 项」计数必须出现在最前**，其后紧跟 **「新增区域」**（主按钮）等操作按钮，形成「计数 → 动作」的扫描节奏；不要把新增按钮单独放到右侧或另起一行（对齐 `fresh-mint-green.html` 的列表工具栏信息层级）。
+- **工具栏按钮色彩规则（强约束）**：列表工具栏从左到右的按钮中，**仅第一个主行动作**使用主色实心（`btn-main` / `type="primary"`）。其余如 **批量删除 / 导入导出 / 下载模板 / 批量导入** 等，统一使用 **中性描边按钮**（`btn-ghost` / default），避免出现同一行多颗绿色主按钮（与设计图一致）。
+- **列表操作列全局规则（强约束）**：所有列表的“操作”列需 **固定在右侧**（`fixed="right"`）并预留足够宽度（建议 `min-width >= 260px`，按按钮数量增大），保证同一行操作按钮可完整展示，禁止因列宽不足出现按钮被裁切或省略。
+- **`.list-toolbar-selected`**：`font-size: 12px`，`font-weight: 600`，`color: var(--text-muted)`，`padding: 0 10px 0 0`，`margin-right: 4px`，**右边框** `1px solid var(--border)`，`line-height`/`min-height` **36px**，`inline-flex` 居中
+- **`.sel-num`**：`color: var(--primary-dark)`，`font-weight: 700`，`margin: 0 2px`
+- **工具栏与列表体分割线（必需）**：工具栏下方、列表上方需有 **`1px solid var(--border)`** 分隔（建议在 **`.list-body`** 统一设置 `border-top`）；避免工具栏背景与表格首行直接连在一起，区域管理与商品分类均按此执行。
+- **跨页面统一执行**：凡是采用「筛选区 → 工具栏 → 列表」结构的页面，均需套用该分割线规则，不得按页面单独省略；后续改造页默认在 **`.list-body`** 保持该 `border-top`。
+- **单分隔线规则（全局）**：菜单页与弹窗内列表均遵循“相邻区块只保留一条边线”。即：**工具栏 ↔ 列表** 使用 `list-body` 的顶边线（`list-toolbar` 不再加底边线）；**列表 ↔ 分页** 保留列表底边线（`list-pager-bar` 不再加顶边线），避免双线叠加。
+- **单标题规则（全局）**：列表页主面板仅保留一个 `panel-top` 标题（通常为“XX列表”）；筛选区作为该列表面板内的 `filter-block` 子区块，不再单独设置“筛选条件”标题，避免同页双标题造成信息层级重复。
+
+### 7.4 通用 `table`（非 `.data-table` 时的基线）
+
+- `width: 100%`，`border-collapse: collapse`，`font-size: 14px`
+- **th/td**：`padding: 12px 20px`，`text-align: left`，下边框 `var(--border)`
+- **th**：`12px`，`600`，`var(--text-muted)`，背景 `var(--table-head)`
+- 斑马纹：`tbody tr:nth-child(even) td` → `var(--row-alt)`；**hover** → `var(--row-hover)`
+- 最后一行：`tbody tr:last-child td` 可无下边框；**`.data-table`** 特例见下
+
+### 7.5 `.data-table` 专用规则
+
+- **最小宽度**：`min-width: 1320px`（保证列多时不挤乱，实际项目可按业务调）
+- **表体默认**：`tbody td` **水平居中**、**垂直居中**；长文案列加 **`.td-left`** → `text-align: left`
+- **`.td-cell-media`**：`text-align: left`，`max-width: 240px`，`vertical-align: middle`
+- **斑马纹 / hover**：同通用表；**最后一行**：`tbody tr:last-child td` 仍保留下边框 `1px solid var(--border)`（与通用 `table` 不同）
+
+**图文列**
+
+- **`.cell-media`**：`display: flex`，`align-items: center`，`gap: 10px`，`min-width: 0`
+- **`.cell-media-img`**：**40×40px**，圆角 **8px**，`object-fit: cover`，边 `1px solid var(--border)`，背景 `var(--row-alt)`
+- **`.cell-media-stack`**：纵向 flex，`gap: 2px`，`min-width: 0`，`flex: 1`
+- **`.cell-media-text`**：`13px`，`500`，`var(--text)`，单行省略
+- **`.cell-media-sub`**：`12px`，`var(--text-muted)`，单行省略
+
+**数量 / 金额列**
+
+- **`.col-qty`**、**`.col-amt`**：`font-variant-numeric: tabular-nums`，`white-space: nowrap`
+- **`.col-amt`（body 与 tfoot）**：`color: var(--primary-dark)`，`font-weight: 600`
+
+**表头 sticky 与 z-index**
+
+- **`thead th`**：`position: sticky`，`top: 0`，`z-index: 3`，背景 `var(--table-head)`，水平居中，`box-shadow: 0 1px 0 rgba(0,0,0,0.06)`
+- **`.th-check`**：`z-index: 6`，附加左向阴影 `6px 0 10px -6px rgba(0,0,0,0.1)` + 底阴影
+- **`.th-op`**：`z-index: 5`，附加右向阴影 `-6px 0 10px -6px rgba(0,0,0,0.1)` + 底阴影
+
+**首列勾选 sticky**
+
+- **`th.th-check` / `td.td-check`**：`position: sticky`，`left: 0`，`z-index: 2`，宽 **52px**（min/max 同），`padding: 12px 10px`，阴影 `6px 0 10px -6px rgba(0,0,0,0.1)`，背景随斑马纹/hover 与行一致（偶数 `var(--row-alt)`，hover `var(--row-hover)`）
+- **`.th-check-inner`**：flex 居中
+- **`.row-check`**（原生 checkbox 皮肤）：**16×16**，圆角 **4px**，边 `var(--border)`；**checked** 背景/边 `var(--primary)`；**focus-visible**：`outline: 2px solid var(--primary)`，`offset: 2px`
+
+**末列操作 sticky**
+
+- **`th.th-op` / `td.td-op`**：`position: sticky`，`right: 0`，`z-index: 2`，`min-width: 196px`，`max-width: 220px`，左向阴影，背景随斑马纹/hover
+- **`.cell-ops`**：`display: flex`，`gap: 6px`，`justify-content: center`，`flex-wrap: nowrap`，`align-items: center`
+
+**合计行 `tfoot .total-row`**
+
+- **td**：居中，`font-weight: 600`，`color: var(--text)`，背景 `var(--primary-bg)`，**上边框** `2px solid var(--primary)`，无底边框，`padding-top/bottom: 14px`
+- **`.td-total-label`**：`letter-spacing: 0.12em`
+- **`.td-check` / `.td-op` 在 tfoot**：背景仍为 `var(--primary-bg)`
+
+### 7.6 滚动 `.table-scroll`
+
+- `overflow-x: auto`，`overflow-y: auto`
+- **`max-height: min(520px, calc(100vh - 300px))`**（可按页面微调）
+- `-webkit-overflow-scrolling: touch`
+
+### 7.7 状态标签 `.tag`
+
+- **默认**：`display: inline-block`，`padding: 2px 8px`，圆角 **6px**，`12px`，`600`，背景 `var(--primary-bg)`，字 `var(--primary-dark)`
+- **`.muted`**：背景 `var(--table-head)`，字 `var(--text-muted)`，字重 **500**
+
+### 7.8 分页（HTML demo：`.list-pager`）
+
+与 `fresh-mint-green.html` 一致的自绘分页结构：
+
+- **容器**：`display: flex`，`flex-wrap: wrap`，`justify-content: space-between`，`align-items: center`，`gap: 10px 12px`，`padding: 8px 16px`，背景 `var(--surface)`，**上边框** `1px solid var(--border)`
+- **`.pager-meta`**：`13px`，`var(--text-muted)`
+- **`.pager-controls`**：`display: flex`，`flex-wrap: wrap`，`gap: 8px`，`align-items: center`
+- **`.pager-size-label`**：`13px`，`margin: 0`
+- **`.pager-select`**：`width: auto`，`min-width: 72px`，**高度 36px**
+- **`.pager-size-suffix`**：`13px`，`margin-right: 4px`
+- **`.pager-btn:disabled`**：`opacity: 0.45`，`cursor: not-allowed`
+- **`.pager-nums`**：`inline-flex`，`gap: 4px`
+- **`.pager-num`**：`min-width: 36px`，`padding: 0 10px`，**高度 32px**，`13px`（继承 `.btn` 边框体系）；**`.is-current`**：背景/边 `var(--primary)`，白字；hover 同加深为 `var(--primary-dark)`
+- **`.pager-gap`**（省略号）：`padding: 0 4px`，`13px`，`var(--text-muted)`，`user-select: none`
+
+### 7.9 分页（Element Plus：`el-pagination` 与 `.pagination.list-pager-bar`）
+
+`web-admin` 列表页（如 **单位管理** `#/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`**。
+- **label 在上（强约束）**：弹窗表单统一 `label-position="top"`，并将 `label-width` 相关规则清零，避免出现「左侧 label 空出一大块」的不对齐（区域管理/单位/参数模板等页同构）。
+- **底栏按钮图标（强约束）**：弹窗 footer 的「取消 / 确定」建议显式使用 `Close / Check` 图标（Element Plus Icons），图标与文字间距 **6px**；避免触发全局按钮自动图标兜底导致的“黑色方块”。
+- **高密两列优先（节约高度）**：新增/编辑弹窗应尽量让字段在两列内排满（如 `排序｜状态`、`预计配送时长｜预警提前时间`），减少单字段独占整行；仅在长文本（如备注/描述）或复杂联动控件时使用 `form-col-span-2` 跨整行。
+- **壳层 padding**：**`.el-dialog` 根节点**不设内边距（`web-admin` 全局 **`--el-dialog-padding-primary: 0`** 与 **`padding: 0`**，避免与 EP 默认 **`var(--el-dialog-padding-primary)`** 叠出双份空白）；**标题 / 主体 / 底栏** 仍分别由 **`.el-dialog__header`**、**`.el-dialog__body`**、**`.el-dialog__footer`** 控制，建议与 §9.3 一致：**`16px 22px`**（header，项目里常见为 **`16px 22px 14px`**）、**`18px 22px`**（body）、**`12px 22px`**（footer）。业务页滚动主体 **`.dialog-scroll`** 可另加 **`padding-right: 2px`** 避免滚动条贴内容。
+- **底栏「取消 / 确定」带前缀图标**：与列表工具栏主/次按钮一致：**`gap: 0`**，**`.el-icon`** **`margin-right: 6px`**（与 **「新增」** 等 **`btn-main` / `btn-ghost`** 图标间距统一）。
+- **长表单校验失败**：**`el-form`** 建议开启 **`scroll-to-error`**，并设置 **`scroll-into-view-options`**（如 **`behavior: 'smooth'`**、**`block: 'center'`**），提交前 **`validate()`** 失败时再配合 **`ElMessageBox.alert`** 说明「已定位到第一处标红项」，避免用户在长弹窗里不知道为何无法提交（商品分类等页已采用）。
+
+### 9.4 详情顶区 `.view-hero`
+
+- `display: flex`，`flex-wrap: wrap`，`gap: 16px`，`padding: 20px 22px`
+- 背景：`linear-gradient(135deg, var(--primary-bg) 0%, var(--surface) 55%)`，下边框
+- **`.view-hero-img`**：**72×72**，圆角 **12px**，`object-fit: cover`，边 `var(--border)`
+- **`.view-hero-main h2`**：`18px`，`700`，`letter-spacing: -0.02em`，`margin: 0 0 8px`
+- **`.view-hero-meta`**：`13px`，`var(--text-muted)`，行高 **1.5**
+
+### 9.5 区块与键值 `.view-section` / `.view-kv`
+
+- **`.view-section`**：`padding: 18px 22px`，下边框；**最后一个**无底边框
+- **`h3`**：`13px`，`700`，`var(--text-muted)`，`letter-spacing: 0.06em`，`margin: 0 0 14px`
+- **`.view-kv-grid`**：`grid`，两列，`gap: 12px 28px`；窄屏单列
+- **`.view-kv`**：`grid-template-columns: 96px 1fr`，`gap: 8px 12px`，`13px`；**dt** muted **500**；**dd** 主色，`word-break: break-word`
+
+### 9.6 Bento / 卡片 / 时间轴 / 图集 / 路线条
+
+- **`.view-bento`**：两列 `12px` gap，窄屏单列
+- **`.view-card`**：边 `1px solid var(--border)`，圆角 `var(--radius)`，`14px 16px` padding；**h4**：`12px`，`700`，muted
+- **`.view-timeline`**：`padding-left: 18px`，左边框 `2px solid var(--border)`，`margin-left: 8px`
+- **`.view-tl-item`**：`padding-bottom: 18px`，`13px`；**圆点**（`::before`）：**10×10px**，`var(--primary)`，白边；**`.muted`** 圆点变灰
+- **`.view-tl-time`**：`12px`，muted；**`.view-tl-title`**：`600`；**`.view-tl-desc`**：muted，行高 **1.45**
+- **`.view-gallery`**：四列 `10px` gap，**`aspect-ratio: 4/3`**，圆角 **8px**，带边框
+- **`.view-route-bar`**：**高度 120px**，圆角 `var(--radius)`，背景 `linear-gradient(90deg, #ecfdf5 0%, #d1fae5 40%, #a7f3d0 100%)`，边 `var(--border)`，水平 **24px** padding
+- **`.view-route-line`**：`flex: 1`，**高度 3px**，背景 `var(--primary)`，`opacity: 0.45`，圆角 **2px**，左右 **12px** margin
+
+### 9.7 弹窗内子表 `.view-subtable-wrap` / `.view-subtable`
+
+- **wrap**：边 `var(--border)`，圆角 **8px**，`overflow: hidden`
+- **表**：`12px`，**th/td** `padding: 8px 12px`，居中，下边框；**th** 背景 `var(--table-head)`，muted；**`.ta-left`** 左对齐
+
+### 9.8 列表「查看」按钮与查看弹窗模板（推荐复用）
+
+参考设计源 `fresh-mint-green.html`，后续业务页面新增「查看详情」能力时优先复用以下模式：
+
+- **列表操作按钮**：`查看` 使用 **`.btn-op.primary`**（主色实心，优先级最高），其余如 `编辑`/`删除` 维持中性 **`.btn-op`**。
+- **弹窗规格**：查看详情优先使用 **`.dialog-view-xl`**（宽约 `920px`，`max-height: calc(100vh - 48px)`），结构固定为 **`dialog-head` + `dialog-scroll` + `dialog-foot`**。
+- **顶部 Hero 区**：用 **`.view-hero`** 展示核心摘要（左侧缩略图 `72x72` + 右侧标题/状态/元信息），背景使用浅绿渐变，和编辑表单视觉区分。
+- **详情分段**：正文按 **`.view-section`** 分块，每块标题 `h3`，关键信息采用 **`.view-kv-grid` + `.view-kv`** 键值布局（双列，窄屏单列），提升扫读效率。
+- **底部动作**：`dialog-foot` 固定在底部，查看弹窗仅放“关闭/返回”类动作，避免在查看态塞入提交语义。
+- **交互与可访问性**：支持点击遮罩关闭、`Esc` 关闭；滚动仅发生在 `dialog-scroll`；图片提供可预览与 `alt`，长文本按省略/换行策略保持稳定排版。
+- **组件抽象建议**：可统一封装为业务级查看组件（如 `ProductViewDialog`），内部固定使用 `view-hero / view-section / view-kv-grid / dialog-foot` 语义类，业务页只传入数据与开关状态，避免每页重复造样式。
+- **落地示例**：`#/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`** 同构的指标卡、**近30日** **`ArtLineChart`** 双图（`/statistics/orders/trend`）、**今日各区域** 双轴柱状（`/statistics/orders/today-by-region`）、**`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`** 之间 **无** 横向分割线，仅用间距）对齐 **`fresh-mint-green.html`**：**`filter-hint`** + 常用条件 **`filter-grid order-filter-main-grid`**（桌面 **四列** 一排）+ **`filter-extra`**（**`v-show`**：支付方式、区域）+ **`filter-actions`**（左侧 **`btn-filter-toggle`** 链式按钮：**展开更多条件 / 收起更多条件**，**`aria-expanded` + `aria-controls`**；右侧 **`btn-ghost` / `btn-main`**）；重置时 **`filterExpanded=false`** 收起附加条件。关键词 **Enter** 查询。**`list-body list-wrap`** 内主表 **`order-list-table order-list-main-table list-table`**（主表单元格 flex 居中**勿**作用到嵌套表），分页 **`list-pager-bar`**。**行展开子表** 对齐 demo **树形子列表`§8`**：**`expanded-cell` 背景 `#f8fafc`**、**`order-tree-nested-inner`** 左 **`3px #10b981`** + **`order-tree-nested-label`**；子表 **`order-tree-child-table`**：**`border`**、表头底 **`#e2e8f0`**、hover **`#f1f5f9`**，首列（商品）左对齐、数值列 **`is-right`**。订单编号链式按钮 **`order-no-link`**（**`#059669`**）。操作列：**「查看/运营」`btn-op-item primary` + View**，**「分配配送员」`btn-op-item` + Bicycle**，**「审核取消」`btn-op-item op-warn` + DocumentChecked**；**`min-width`** 需容纳多枚操作钮。**订单详情（查看/运营）** **`order-detail-dialog`** + **`modal-class="order-module-dialog-mask"`**：**`el-dialog__body` `padding: 0`**，内容区 **`dialog-scroll order-detail-dialog-scroll`** 内纵向滚动；顶部 **`view-hero order-view-hero`**（**72×72** **`order-view-hero-icon` + ShoppingBag + **`view-hero-main`** 标题 / **`view-hero-tags`** / **`view-hero-meta`**），各 Tab 下区块为 **`view-section`** + **`h3`** + **`view-kv-grid` / `view-kv` / `view-multiline`**（与 **参数详情 / 询价查看** 同构，不再用 **`el-descriptions` border** 作为主信息区）；底栏 **`dialog-footer`**，**关闭** **`btn-ghost` + Close**。**`el-dialog__header`** 薄荷渐变、**`el-dialog__footer`** **`#f8fafc`**；主操作 **`btn-main`**，**取消订单** **`type="danger"`**。**分配 / 审核取消 / 取消订单 / 调整 / 价格版本明细** 等辅弹窗 **`order-module-dialog`** + 同款 **`modal-class`** 与 **36px / 8px** 底栏规则（与询价大弹窗同构；无模糊遮罩）。
+15. **商家结算管理**（`#/order/supplier-settlement`）：页头 **`page-desc`**；**`region-tab-strip` + `region-tab-btn`**（与询价区域切换同构）；**`el-tabs` `settlement-page-tabs`**（Mint 指示条）；各 Tab 内 **`section.panel`**：**`panel-top`**（**`title-ic` + Wallet / Document**）、**`filter-block`**（**三列 `filter-grid`**、**`filter-actions-row`** + **`btn-ghost` / `btn-main`** + Refresh / Search、关键词 **Enter**）；**待结算** 下 **`settlement-stats`**（**`stat-card` / `stat-card--accent`**）；**`list-toolbar-row` + `toolbar-actions`**；主表 **`settlement-pending-main-table settlement-root-table list-table`**；**结算单记录** 主表 **`settlement-sheets-main-table settlement-root-table list-table`**；分页 **`list-pager-bar`**。**树形多层级**（对齐 **`fresh-mint-green.html` §树形列表**）：待结算订单行展开为 **子列表**（**`settlement-tree-inner`** 左 **`3px #10b981`** + **`settlement-tree-label`** + **`settlement-child-table`** **`border`**、表头 **`#e2e8f0`**）；结算单记录为 **结算单 → 订单 → 商品** 三层：**L1** **`settlement-tree-l1`** 内嵌 **`settlement-mid-table`**；**L2** **`settlement-tree-l2`**（琥珀左边线 + 浅黄渐变，对应 demo **`tree-nested-deep`**）+ **`settlement-line-table`**（孙表头 **`#fef3c7`** / 字 **`#92400e`**）；**`expanded-cell`** 主层 **`#f8fafc`**、订单下商品层 **`#fffbeb`**。操作列：**详情 `btn-op-item primary` + View**，**编辑 `btn-op-item op-warn` + Edit**。业务弹窗 **`order-module-dialog`** + **`order-module-dialog-mask`**；本页另附 **非 scoped** 的 **`order-module-dialog`** 规则，避免未加载订单页 chunk 时弹窗无样式。订单号链式 **`settlement-order-no-link`**。
+16. **客户结算管理**（`#/order/client-settlement`）：与 **商家结算管理** 同构应用 Fresh Mint 壳层与交互（页头 `page-desc`、`region-tab-strip`、`settlement-page-tabs`、`panel`、`filter-block`、`list-toolbar-row`、`list-pager-bar`、`order-module-dialog`）。业务语义改为客户维度（客户筛选、客户结算状态、`client_settlement` 凭证业务类型、同客户约束）。树形多层级同样按 **结算单 → 订单 → 商品** 实现，沿用 **`settlement-tree-inner / settlement-tree-l1 / settlement-tree-l2`** 视觉分层：L1 薄荷左边线 + 灰蓝子表头，L2 琥珀左边线 + 浅黄渐变 + 孙表琥珀表头；主层与深层 expanded cell 分别使用 **`#f8fafc`** 与 **`#fffbeb`**，保证多层树形在客户结算页与标准 demo 统一。
+17. **配送列表**（`#/delivery/delivery`）：改造为 Fresh Mint 列表壳层——页头 **`page-head` + `page-desc`**，主体 **`section.panel`** + **`panel-top`**（`title-ic` + `Van`），筛选区升级为 **`filter-block` + `search-form` + 三列 `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search，关键词支持 Enter 查询），列表与分页收口到 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。配送单展开子表按树形子列表规范对齐：展开层 **`delivery-tree-inner`**（左侧薄荷 3px 线）+ 标题 **`delivery-tree-label`** + 子表滚动容器，expanded cell 背景与边框对齐全局列表规范。操作列统一为 **`btn-op-item primary` + View**；详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**（薄荷渐变头、无遮罩模糊）以保持订单/结算/配送弹窗视觉一致。
+18. **时效预警**（`#/delivery/delivery-warning`）：改造为与配送列表同构的 Fresh Mint 壳层——页头 **`page-head` + `page-desc`**，主体 **`panel` + `panel-top`**（`title-ic` + `Bell`），筛选区统一 **`filter-block` + `search-form` + `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search），列表区统一 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。预警行展开商品明细同样采用树形子列表样式：**`delivery-tree-inner`** 左 3px 薄荷线、**`delivery-tree-label`** 标题、子表滚动容器与 expanded cell 背景边框。操作列统一按钮语义：**查看** `btn-op-item primary + View`，**处理** `btn-op-item op-warn + Finished`。处理弹窗与详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**，与订单/结算/配送页面维持一致的薄荷渐变头和无遮罩模糊策略。
+19. **系统设置**（`#/system/system-config`）：将原单块白底表单改造为 Fresh Mint 配置页结构——页头 **`page-head` + `page-desc`**，配置项拆分为两张 **`settings-panel`**（订单设置 / 客服设置），每块使用 **`panel-top` + `title-ic`**（`Setting` / `PhoneFilled`）与 **`panel-body`**。表单统一为 **`label-position="top"`** 与 Mint 输入态（11px label、8px 圆角、`#d9e8e2` 边），采用 **`form-grid`**（桌面两列、窄屏一列）排版；数字输入配单位说明与 hint 文案。保存区使用统一主按钮 **`btn-main`**（`Check` 图标 + 36px 高 + 薄荷色链），整体与已改造业务页面的卡片、标题、按钮体系一致。
+20. **接口日志**（`#/system/api-request-log`）：改造为 Fresh Mint 列表页模板——页头 **`page-head` + `page-desc`**，主体 **`panel` + `panel-top`**（`title-ic` + `Document`），筛选区统一为 **`filter-block` + `search-form` + 四列 `filter-grid` + `filter-actions-row`**（`btn-ghost` / `btn-main` + Refresh/Search，关键词支持 Enter 查询）；日志表格与分页统一到 **`list-body list-wrap` + `list-table` + `list-pager-bar`**。操作列“详情”改为 **`btn-op-item primary + View`**。请求详情弹窗接入 **`order-module-dialog` + `order-module-dialog-mask`**（薄荷渐变头、无遮罩模糊、统一 footer），请求体/响应体保留 `pre` 滚动展示能力。
+21. **全局壳层回归（2026-04-17）**：针对 `git restore` 导致的样式回退，补齐 `web-admin` Fresh Mint 基线：`index.scss` 重新引入 `fresh-mint-tokens.scss`；`app.scss` 回收全局 token 映射（`--theme-color`、`--default-bg-color`、`--default-box-color`、`--art-card-border`）、统一页头/面板/侧栏骨架；`views/index/style.scss` 恢复内容区 **`24px`** 内边距与「壳层不包二次卡片」策略；`el-ui.scss` 重设 Element 主题变量、弹窗头体脚间距、表格与主按钮 Mint 色链；`#/dashboard/console` 恢复 **page-head + panel/list-body/list-table** 结构与统计卡的 Mint 视觉层级。
+22. **第二轮批量回归（2026-04-17）**：新增跨页面全局兜底（`app.scss` + `el-ui.scss`）用于统一 **筛选区 / 工具栏 / 列表体 / 分页条 / 表单控件 / 主次按钮 / 行内操作按钮**。约定类（`filter-block`、`filter-grid`、`filter-actions-row`、`list-toolbar-row`、`list-body`、`list-wrap`、`list-pager-bar`、`btn-main`、`btn-ghost`、`btn-op-item`）在 `page-container` 与 `console-container` 下自动应用 Mint 视觉，降低逐页重复样式。同步修正历史弹窗组件 `#/base/user`（`user-dialog`）与 `#/system/menu`（`menu-dialog`）底栏按钮与表单布局，使其对齐 **36px/8px** 按钮与顶部标签表单规范。
+23. **第三轮业务页收口（2026-04-17）**：针对运营高频页面做残留旧色清理与语义色统一：`#/delivery/delivery`、`#/delivery/delivery-warning`、`#/system/system-config`、`#/order/order` 中遗留的旧角色色（`#1989fa/#07c160/#ff976a/#ee0a24`）已替换为 Fresh Mint 语义色链（主色 `#10b981/#059669`、警告 `#d97706`、危险 `#dc2626`），覆盖 section 左边线、金额强调、Tab 激活态、地址卡片强调边、时间轴节点、风险提示等关键视觉点，避免后台页面出现“蓝/绿/橙/红混搭”的历史风格。
+24. **第四轮一致性细节（2026-04-17）**：补充跨页面细节兜底：`app.scss` 新增 `page-container/console-container` 下通用 `.pagination`（贴表格的分页条样式）与 `.search-bar`（白底卡片化）；`el-ui.scss` 新增弹窗 footer 按钮统一规则（**36px 高、8px 圆角、600 字重**，非主按钮中性描边）及 footer 内图标右间距 **6px**，用于收敛历史页面中未显式加 `btn-main/btn-ghost` 的弹窗底栏视觉差异。
+25. **第五轮验收清单（2026-04-17）**：对 `web-admin/src/views/system` 全量页执行旧色值巡检并完成批量替换，遗留角色色 `#1989fa/#07c160/#ff976a/#ee0a24` 已在 system 目录清零；重点修正页面包括 `price-list`、`client/supplier-settlement`、`category`、`order-adjust`、`quotation`、`user/detail`、`statistics`、`quotation/compare`、`price-list/version`、`refund`、`inquiry-quotation`、`invoice`、`settlement`、`product`、`inquiry`。同时补齐角色管理弹窗 (`role-edit-dialog`、`role-permission-dialog`) footer 按钮语义类（`btn-ghost` / `btn-main`），与全局弹窗底栏规范保持一致。
+26. **第六轮结构统一（进行中，2026-04-17）**：开始将“视觉已统一但结构仍旧”的页面改为标准模板。首批完成 `#/system/review`、`#/system/settlement`、`#/system/invoice`：统一为 **`page-head + panel + filter-block/filter-grid/filter-actions-row + list-body/list-wrap + list-pager-bar`**，并将操作列按钮改为 **`btn-op-item`** 体系、弹窗 footer 改为 **`btn-ghost / btn-main`** 语义按钮，减少历史 `search-bar + inline form + link 按钮` 结构差异。
+27. **第六轮结构统一（第二批，2026-04-17）**：完成 `#/system/price-list`、`#/system/refund`、`#/system/order-adjust`、`#/system/quotation` 的模板化收口：搜索区改为 `filter-block + filter-grid + filter-actions-row`；列表区改为 `list-body/list-wrap + list-table + list-pager-bar`；操作列由 link 按钮改为 `btn-op-item`（首按钮 `primary`）；详情/流程弹窗 footer 统一 `btn-ghost / btn-main`，并移除页面内重复的旧壳层样式（`search-bar/table-container/pagination`）以复用全局 Fresh Mint 规则。
+28. **第六轮结构统一（第三批，2026-04-17）**：完成 `#/system/region`、`#/system/category`、`#/system/unit`、`#/system/parameter` 的 CRUD 基础页动作区与列表交互收口：工具栏主按钮统一 `btn-main`、批量操作统一 `btn-ghost`、行内操作统一 `btn-op-item`（首动作主色）、分页统一 `list-pager-bar`、新增/编辑弹窗 footer 统一 `btn-ghost / btn-main`。本轮保持业务逻辑与复杂弹窗内结构不变，优先消除跨页面按钮体系与分页条样式差异。
+29. **第六轮结构统一（第四批，2026-04-17）**：将 `#/system/region`、`#/system/category`、`#/system/unit`、`#/system/parameter` 进一步对齐 `#/delivery/delivery-demo` 壳层：统一引入 **`page-head + panel + panel-top + filter-block + filter-grid + filter-actions-row + list-body/list-wrap + list-table`** 结构；筛选区改为非 inline 的网格布局并使用 `btn-ghost / btn-main`；列表区统一包裹 `list-body/list-wrap`；移除页面内重复的 `search-bar/toolbar/pagination` 旧壳层样式，交由全局 Fresh Mint 规范接管，实现“按钮一致”升级为“页面骨架一致”。
+30. **第六轮结构统一（第五批，2026-04-17）**：继续对齐 `#/system/review`、`#/system/settlement`、`#/system/invoice` 与 `#/delivery/delivery-demo` 的列表节奏细节：`panel-top` 标题统一补齐 `title-ic` 图标区；筛选区主动作统一为 `搜索`；列表前统一补充 `list-toolbar + list-toolbar-row + list-toolbar-selected + sel-num` 的总量信息带，增强页面信息层级一致性与运营扫描效率。业务流程与弹窗逻辑保持不变。
+31. **第六轮结构统一（第六批，2026-04-17）**：对 `#/system/review`、`#/system/settlement`、`#/system/invoice` 的详情弹窗做视觉统一，形成与列表同语言的卡片化层次：弹窗主体新增 **`detail-hero`**（主标识 + 次信息）与 **`detail-section`**（描述区块容器，薄荷边框/圆角）结构；在不改字段与业务动作的前提下，统一详情首屏信息密度、层次节奏和 Mint 语义背景，减少原生 `el-descriptions border` 的“纯表格感”。
+32. **第六轮结构统一（第七批，2026-04-17）**：将 `detail-hero / detail-section` 从页面级 `scoped` 样式提炼为全局复用样式（`app.scss` 下 `page-container/console-container` 作用域），并在 `review / settlement / invoice` 详情弹窗中切换为统一公共类，移除三页重复定义。后续详情弹窗可直接复用该结构，减少样式漂移与维护成本。
+33. **第六轮结构统一（第八批，2026-04-17）**：继续按 `#/delivery/delivery-demo` 模板推进 `#/system/api-request-log` 与 `#/system/user`：统一为 `page-head + panel + panel-top + filter-block + filter-grid + filter-actions-row + list-toolbar + list-body/list-wrap + list-pager-bar`；操作列链接按钮改为 `btn-op-item`；新增/编辑弹窗 footer 统一 `btn-ghost / btn-main`，并清理页面内 `search-bar/toolbar/pagination` 的重复 scoped 壳层样式。
+34. **第六轮结构统一（第九批，2026-04-17）**：完成 `#/system/statistics` 的旧 `filter-bar/card` 体系替换，整体对齐 `#/delivery/delivery-demo`：新增 `page-head` 与 `panel` 分段结构，筛选区切为 `filter-block + filter-grid + filter-actions-row`（补齐“搜索/重置”动作），运营概览改为统一统计卡网格（`stats-grid`），图表与明细改为 `panel + panel-top + list-body/list-wrap + list-table` 组合，显著降低该页与其他业务页的视觉割裂感。
+35. **第六轮结构统一（第十批，2026-04-17）**：推进 `#/system/product`、`#/system/inquiry`、`#/system/supplier-settlement`、`#/system/client-settlement` 对齐 `#/delivery/delivery-demo`。本批聚焦“高流量复杂页”的外层一致性：统一页头说明（`page-head/page-desc`）、筛选动作文案（“搜索/重置”）、主次按钮语义类（`btn-main/btn-ghost`）、列表操作按钮（`btn-op-item`）、分页条（`list-pager-bar`）与弹窗 footer 按钮语义。`product` 与 `inquiry` 同步补齐 `panel/panel-top/list-toolbar` 骨架；`supplier/client-settlement` 保持双 Tab 与树形明细业务结构不变，仅做 Mint 交互壳层与动作区收口，确保改造不触及结算逻辑。
+36. **商品分类对齐区域管理流程（2026-04-17）**：`#/base/category` 参考 `#/system/region` 的改造方法完成收口：列表工具栏补齐 **`list-toolbar-selected + sel-num`**，并保持“首按钮主色、其余中性描边”（含批量导入）；表格列头/列值统一居中对齐，状态标签语义统一为 **启用=success、禁用=info**；操作列去除 link 形态，统一 **`btn-op-item`** 体系；新增/编辑弹窗统一 **`label-position="top"`** 与两列排布，footer 统一 **`btn-ghost/btn-main + Close/Check`** 图标，确保与区域管理及全局 Fresh Mint 规范一致。
+37. **商品单位按同构流程收口（2026-04-17）**：`#/base/unit` 参照 `#/system/region` 与 `#/base/category` 的改造路径统一壳层与交互细节：工具栏增加 **`list-toolbar-selected + sel-num`**，并保持“首按钮主色、其余中性描边”（含批量导入）；状态标签语义统一为 **启用=success、禁用=info**；操作列固定右侧并预留宽度（≥260）；新增/编辑弹窗改为 **`label-position="top"`** 两列布局，footer 统一 **`btn-ghost/btn-main + Close/Check`** 图标规范。
+38. **商品管理同构改造（2026-04-17）**：`#/base/product` 对齐 `fresh-mint-green` 与区域/分类/单位页面规范：页头改为 **`page-head + h1 + page-desc`**；筛选区改为 **`filter-form + filter-grid + filter-actions-row`**（非 inline）；列表工具栏合并为单行 **`list-toolbar-row`**（含 **`list-toolbar-selected + sel-num`** 与主次按钮）；表格列头/列值统一居中，状态标签语义为 **启用=success、禁用=info**；操作列改为 **`btn-op-item`**（去 link 形态）并固定右侧预留宽度；新增/编辑与选择参数弹窗 footer 统一 **`btn-ghost/btn-main + Close/Check`**，参数选择表格去 `border` 并改为 Mint 容器边框与透明检索栏。
+39. **树形字段统一路径展示（全局，2026-04-17）**：凡树形字段（商品分类等）统一执行“**下拉展示本级、选中回显全路径、列表展示全路径**”规则：`el-tree-select` 展开态节点文案保留本级名称；选中后输入框通过 `#label` 插槽显示 `根 / 子 / 孙` 全路径；表格/卡片中的分类字段同样优先展示全路径（缺路径时回退接口字段）。实现统一复用 `web-admin/src/utils/tree-path.ts`（`buildTreePathLabelFromFlat`、`findTreeSelectShortLabel`），避免各页面重复拼接逻辑。
+40. **询价报价管理二轮收口（2026-04-17）**：`#/business/inquiry-quotation` 按 Fresh Mint 模板完成结构升级：补齐 `page-head + panel + panel-top`，区域切换统一为 `region-tab-strip/region-tab-btn`；询价与历史报价列表改为 `list-body/list-wrap + list-table` 组合；历史报价筛选改为 `filter-block + history-filter-grid + filter-actions-row`（重置/搜索按钮采用 `btn-ghost/btn-main` + 图标）；操作列从 link 统一为 `btn-op-item`（首动作主色），并将历史列表分页条对齐为 `list-pager-bar`；关键弹窗 footer 同步 `btn-ghost/btn-main + Close/Check`，保持与已改造基础数据页同一视觉语言。
+41. **询价报价管理二轮精修（2026-04-17）**：继续对 `#/business/inquiry-quotation` 弹窗与内嵌选品区细节收口：`新增/编辑询价`、`询价详情`、`报价明细`、`调价确认` 统一接入 `inquiry-quotation-dialog` + `inquiry-quotation-dialog-mask`（header 薄荷渐变、footer 浅底、无遮罩模糊）；弹窗 footer 按全站规范使用 `btn-ghost/btn-main` 与 `Close/Check` 图标；选品区（左树/右列表/已选区/卡片选中态）统一替换旧灰蓝边框为 Mint 语义边框与主色阴影；历史报价操作列保持固定右侧并使用 `btn-op-item primary`，补齐“弹窗内按钮层级、间距密度、操作列语义”与基础数据页一致性。
+42. **工作台快捷菜单（2026-04-18）**：曾实现 **`shortcuts-grid` + `shortcut-tile`**（`ArtSvgIcon` + **`meta.icon`**）；**（2026-04-18 后续）已移除**——`#/dashboard/console` **不再展示**独立快捷菜单区，常用入口以侧栏导航为准；**§4.2** 工作台描述已同步。
+43. **工作台近30日折线（2026-04-18）**：`#/dashboard/console` 在数据概览下增加 **`trend-charts-panel`**：双 **`ArtLineChart`**（营业额元 / 订单数笔），接口 **`fetchOrderTrend` → `/web/admin/statistics/orders/trend?days=30`**（复用 **`statistics_crud.get_order_trend`**）；**§4.2** 已补充。
+44. **工作台今日各区域柱状（2026-04-18）**：`#/dashboard/console` 在折线图下增加 **`region-today-panel`**：**`RegionTodayDualBarChart`** 分组柱 + 双 **Y** 轴（左营业额元、右订单笔），接口 **`fetchTodayOrdersByRegion` → `/web/admin/statistics/orders/today-by-region`**（**`statistics_crud.get_today_order_stats_by_region`**：启用区域全量，无单为 0）；**§4.2**、实现清单 **§7** 已同步。
+45. **工作台今日客户柱状与标题竖条（2026-04-18）**：**`region-today-split`** 右列「今日下单客户」：**`fetchTodayOrdersByClient` → `/web/admin/statistics/orders/today-by-client`**（**`get_today_order_stats_by_client`**：今日下单金额合计 + **`biz_order_item.quantity`** 合计，金额降序至多 30 条）；**`RegionTodayDualBarChart`** 支持系列名/空文案等 props；**`App.vue`** **`panelTitleBarTextRules`** 增加 **近30日趋势**、**今日各区域** 以使用 **`title-bar-heading`** 绿色竖条。
+
+---
+
+## 14. 附录 A：权威来源
+
+- 本文件已尽量与 **`fresh-mint-green.html`** 内 `<style>` **逐段对齐**；若出现**数值/选择器不一致**，以 **HTML 文件为准**，并回写修正本文档。  
+- **交互脚本、路由、假数据** 不在本规范范围。  
+- demo 更新时，应**同步修订**本 Markdown。
+
+---
+
+## 15. 附录 B：脚本与动态行为
+
+以下依赖 **JavaScript 行为** 或动态 class，样式已在正文 §3、§6、§7 写明，实现时除 CSS 外需对齐逻辑：
+
+- Tab 切换、**`.is-active` / `.is-refreshing`** 的切换时机  
+- 分页当前页、**`.pager-num.is-current`**、**`.pager-btn:disabled`**  
+- **`.is-loading`** 的添加与移除  
+- `details` **open** 状态与 summary 箭头旋转  
+
+**不再将「遗漏的静态样式」单独列表**——细节已收入 §1–§11；若仍缺，请直接在 HTML 中检索对应 **class** 名。
@@ -0,0 +1,397 @@
+# 1、客户口述的需求
+- 公司介绍：中科兴皖，是一家做细胞医疗服务的。 主要业务是存储产妇脐带血，干细胞治疗等
+- 公司分为六大部分：市场营销部门（下设 采集部、临床部、中试服务部、支持中心、客服部） 、技术研发部、生产部、质量安全部、财务部、综合部
+- 公司主营业务：细胞存储、细胞培养及医疗应用
+
+
+## 1.1、细胞存储
+- 业务流程：
+采集专员创建细胞存储协议单，细胞存储协议单创建后会触发两个流程：一个签订协议缴费流程 ，一个是采集、运输、检测、入库的流程
+- 签订协议缴费流程：采集专员在现场跟客户线下签订协议，将签订的协议拍照上传到系统，用户缴费的截图上传到系统。由市场支持专员审核后，标注为已缴费
+- 采集、运输、签收、检测、入库的流程：采集专员在现场采集到细胞样本后，通过快递或其他方式将样本送到站点、站点签收，如果这时候发现样本不合理，此样本作废。流程终止。如果样本正常签收 。 签收成功后会触发两个流程：样本检测、样本制备。 样本检测如果不正常，样本作废。 样本制备如果制备异常，制备终止。如果样本检测正常、样本制备正常，最后由质检专员点击，表示该细胞样本入库成功，开始存储了。这中间只要涉及到不成功，都需要给用户退款（退款流程由市场支持专员发起，财务人员完成）
+- 如果中间客户提出毁约，细胞存储协议单也会被作废掉。给用户退款（退款流程由市场支持专员发起，财务人员完成）
+
+
+## 1.2、科研捐赠
+- 科研捐赠采集协议单管理跟细胞存储采集协议单唯一的差别，就是不用缴费。
+- 科研捐赠独立建设一套表模型进行业务数据维护，不跟细胞存储采集单共享。但是基础的样本类型管理、采集协议号管理、客户管理、样本编码管理、采集地区及医院管理，这些基础数据是共享的
+【后续补充，暂不开发】
+
+## 1.3、中试服务
+中试服务是渠道商来购买细胞产品，然后提供需要细胞产品服务的人员进行产品的输注。费用是从渠道商账户上扣除
+
+## 1.4、临床应用
+临床应用跟中试服务操作思路一致，有这些区别
+- 临床应用会从用户收费、中试服务是从渠道商扣费
+- 临床应用需要创建一个临床应用单位信息表：核心字段 单位名称、科室/部门、联系人、联系电话
+- 临床应用有个知情同意书签署的附件上传
+- 临床应用不需要体检
+- 临床应用的交付方式是（shsm - 送货上门、kdfh - 快递发货），交付附件、备注、交接温度、送货人姓名、联系电话、出发时间、预计到达时间、交通方式（ dc - 打车 、gsc -  公司车 、 qt - 其他）、交通费用(元) 、发货人、发运时间、快递公司、快递单号、快递费用、预计到达时间 。如果交付方式是shsm - 送货上门 ，则需要填写 送货人姓名、联系电话、出发时间、预计到达时间、交通方式（ dc - 打车 、gsc -  公司车 、 qt - 其他）、交通费用(元)  。 如果交付方式是 kdfh - 快递发货 ， 则需要填写 发货人、发运时间、快递公司、快递单号、快递费用、预计到达时间
+【后续补充，暂不开发】
+
+
+# 2、系统功能菜单
+
+- 系统管理
+  - 租户管理[2.1.1、租户管理]
+  - 字典管理[2.1.2、字典管理]
+  - 组织管理[2.1.3、组织管理]
+  - 用户管理[2.1.4、用户管理]
+  - 角色管理[2.1.5、角色管理]
+  - 菜单管理[2.1.6、菜单管理]
+  - 站点管理[2.1.7、站点管理]
+  - 职位管理[2.1.8、职位管理]
+  - 物品单位管理[2.1.9、物品单位管理]
+  - 快递公司管理[2.1.10、快递公司管理]
+- 细胞存储管理
+  - 采集协议单[2.2.6、采集协议单]
+  - 采集协议单审核[2.2.7、采集协议单审核]
+  - 采集协议单收款确认（财务确认）[2.2.8、采集协议单收款确认（财务确认）]
+  - 采集协议单退费确认（财务确认）[2.2.9、采集协议单退费确认（财务确认）]
+  - 分期缴费用户预警模块[2.2.10、分期缴费用户预警模块]
+- 科研捐赠（暂时不开发，后续在完善）
+- 中试服务管理
+  - 细胞产品类型管理[2.3.1、细胞产品类型管理]
+  - 细胞产品规格管理[2.3.2、细胞产品规格管理]
+  - 细胞产品价格体系管理[2.3.3、细胞产品价格体系管理]
+  - 细胞产品项目价格管理[2.3.4、细胞产品项目价格管理]
+  - 渠道信息管理[2.3.5、渠道信息管理]
+  - 体检机构及体检项目及价格维护模块[2.3.6、体检机构及体检项目及价格维护模块]
+  - 渠道服务购买订单管理[2.3.7、渠道服务购买订单管理]
+  - 渠道服务购买订单管理（财务确认）[2.3.8、渠道服务购买订单管理（财务确认）]
+  - 中试服务单管理[2.3.9、中试服务单管理]
+- 临床应用（暂时不开发，后续在完善）
+- 运营支撑
+  - 洁净室管理[2.4.1、洁净室管理]
+  - 库位管理[2.4.2、库位管理]
+  - 展馆预约[2.4.3、展馆预约]
+  - 物料管理（暂时不开发，后续在完善）
+- 财务管理（暂时不开发，后续在完善）
+- 生产管理（暂时不开发，后续在完善）
+  - 耗材管理
+  - 耗材包管理
+  - 工艺库管理
+  - 工艺路线配置
+  - 细胞存储协议单
+  - 中试服务单
+  - 生产工单
+- 质检管理
+  - （暂时不开发，后续在完善）
+- 基础信息管理
+  - 客户管理[2.2.1、客户管理]
+  - 细胞样本类型管理[2.2.2、细胞样本类型管理]
+  - 采集地区及医院管理[2.2.3、采集地区及医院管理]
+  - 采集协议号管理[2.2.4、采集协议号管理]
+  - 样本编码管理[2.2.5、样本编码管理]
+
+## 2.4、运营支撑
+### 2.4.1、洁净室管理
+- 此模块用于洁净室信息录入 和 人员出入数据录入就行了
+- 两个表：洁净室信息表、 洁净室人员进出表
+- 洁净室信息表 核心字段：编号、名称、等级（A级、B级、C级、D级）、状态（正常、异常）、面积（m²）
+- 洁净室人员进出表 核心字段：人员、部门、进入时间、目的、离开时间、体温
+
+### 2.4.2、库位管理
+- 此模块用于细胞存储设施的管理，比如一个液氮罐，可以分很多层、每一层也可以放多个盒子、每个盒子又可以有很多的小方格子
+- 可以考虑要用树形结构来设计存储设施的存储结果
+- 两个表：细胞存储设施表、 细胞存储设施储存位置表（只有叶子节点才是真正的存储细胞的位置）
+
+### 2.4.3、展馆预约
+- 此模块用于录入展馆预约的信息
+- 展馆预约表核心字段：预约编号、来访单位、联系人、到访日期、人数、接待人员、备注
+
+### 2.4.4、物料管理
+- （暂时不开发，后续在完善）
+
+## 2.3、中试服务
+- 表模型层级关系
+  - 细胞产品类型表
+  - 细胞产品规格表
+  - 细胞产品价格体系表
+  - 细胞产品项目价格体系表
+  - 渠道信息表：渠道名称、统一社会信用代码、渠道类型（yy - 医院、hzjg - 合作机构 、 zs - 诊所、 zfjg - 政府机构 、qt - 其他 ）、联系人姓名、联系电话、联系邮箱、渠道协议附件、备注
+    - 渠道开票信息子表：一个渠道可能会有多个开票信息。核心字段：单位名称、税号、单位地址、电话、开户银行、银行账号
+    - 渠道邮寄地址信息子表：一个渠道可能会有多个邮寄地址。 核心字段：邮寄地址、邮寄联系人、邮寄联系电话
+    - 渠道协议信息子表：协议类型（ kyxy - 科研协议、 zsxy - 中试协议 、 lcxy - 临床协议）, 业务类型 （如果 协议类型 为 科研协议 ， 业务类型 就是 kyyy - 科研应用 ， 如果协议类型 为 中试协议， 业务类型 就是 中试应用 ， 如果 协议类型 为 临床协议， 业务类型为 临床应用）、结算方式（ yj - 月结、 jj -  季结 、 nj - 年结 、dcjs - 单次结算）、授信额度（元）、生效日期（YYYYMMDD）、到期日期（YYYYMMDD）、协议状态（生效中、已作废）
+      - 渠道协议信息子表-细胞产品价格表，核心字段：项目名称、项目编码、细胞类型编码[2.3.1、细胞产品类型管理]、细胞类型名称[2.3.1、细胞产品类型管理]、规格[2.3.2、细胞产品规格管理]、原价（元）、协议价（元）
+  - 体检机构表
+    - 体检机构项目价格明细表
+    - 体检机构开票信息表
+  - 渠道购买服务订单表
+    - 渠道服务购买订单-购买产品明细表
+    - 渠道服务购买订单-财务确认表
+  - 渠道中试服务申请单
+    - 患者信息表：支持从[客户管理]中选择。核心字段：姓名、性别、年龄、身份证号、联系电话、紧急联系人、紧急联系人电话、临床诊断、诊断附件、是否需要体检（1 - 需要， 0 - 不需要）（客户信息可以从客户信息表customer选择，然后将信息带出到母亲信息中。 如果客户信息表customer 没有这块的数据， 在保存采集协议单的时候，会新增或者修改客户信息表customer中的客户信息数据）
+    - 中试申请单输注方案明细表：一个中式申请单会存在多个细胞输注方案，核心字段包括细胞类型、规格、总疗程数、疗程间隔、输注途径、输注开始日期、备注
+      - 中试申请单输注计划明细表，一个细胞类型输注方案会产生多个输注计划，核心字段包括细胞类型、规格、输注时间、状态（待生产、已生产、已交付、已取消）、附件、备注
+        - 中试申请单输注计划应用确认子表：一个输注计划就有一个应用确认信息，核心字段包括：确认人、确认时间、确认描述
+        - 中试申请单输注计划交付信息子表：一个输注计划就有一个交付信息，核心字段包括：交付编号（自动生成）、备注
+          - 中试申请单输注计划交付信息子表的物料清单表：一个交付信息会有多个物料清单：核心字段包括：物料名称、数量、单位
+          - 中试申请单输注计划交付信息子表的交付方式表：一个交付信息会有一个交付方式：交付方式（ qdzt - 渠道自提 、 kdfh -  快递发货）、交付附件、发运时间、交接温度、备注 、自提人员、联系电话、发货人、快递公司、快递单号、快递费用、预计到达时间。 如果 交付方式 为 qdzt - 渠道自提，则需要填写 交付附件、发运时间、交接温度、备注 、自提人员、联系电话 。 如果交付方式为kdfh -  快递发货，则需要填写 交付附件、发运时间、交接温度、备注 、发货人、快递公司、快递单号、快递费用、预计到达时间。
+    - 中试申请单体检信息表，核心字段：中试申请单id 、体检机构、预约时间、预约的费用、实际体检时间、实际体检费用、费用是否结算、体检状态（待体检、已体检）、费用状态（未结算、已结算）、体检备注、体检报告附件
+      - 中试申请单体检预约项目明细表：核心字段：项目名称、项目费用（元）、备注
+      - 中试申请单体检实际项目明细表：核心字段：项目名称、项目费用（元）、备注
+
+### 2.3.9、中试服务单管理
+- 基于渠道的服务购买订单，渠道就可以提交中试申请单了，每个中试申请单必须跟一个渠道服务购买订单表关联。
+- 中试申请单这个表，核心字段：id、渠道服务购买订单id 、备注
+- 这个模块用于中试服务单的管理，支持新增、修改、删除
+
+### 2.3.7、渠道服务购买订单管理
+- 渠道服务购买订单表，核心字段：渠道id、渠道名称、科室/部门、订单类型（ yfk - 预付款 、gmcp - 购买产品） 、预付金额（订单类型为yfk - 预付款 就是预付金额）、 购买总金额（订单类型为gmcp - 购买产品 ， 就是所有购买的产品总金额）、状态（生效中、 已作废）、备注信息
+- 渠道服务购买订单-购买产品明细表， 当订单类型 为 gmcp - 购买产品。 这里存储购买产品明细，核心字段：项目编码、项目名称、细胞类型、规格、协议单价、购买数量、购买金额、备注
+- 这个模块用于创建渠道服务购买订单信息的管理，新增、修改、删除
+
+### 2.3.8、渠道服务购买订单管理（财务确认）
+- 渠道服务购买订单-财务确认表，核心字段：确认时间、确认描述、确认附件、备注
+- 这个模块用于财务可以看见渠道服务购买订单信息，看看是否财务到账，进行财务确认工作
+
+### 2.3.6、体检机构及体检项目及价格维护模块
+- 体检机构表，核心字段：体检机构名称、体检机构地址、联系人、联系人电话、状态（1 - 正常、 0 - 停用）
+- 体检机构开票信息表，核心字段：单位名称、税号、单位地址、电话、开户银行、银行账号
+- 体检机构项目及价格表，核心字段：项目名称、项目费用（元）
+- 此模块用于管理体检信息及体检项目、价格表
+
+### 2.3.5、渠道信息管理
+这个模块可以对渠道信息进行管理。分为基础信息、开票信息、邮寄地址信息、协议信息（点击生效按钮，协议生效。 点击作废按钮，协议作废）
+
+### 2.3.1、细胞产品类型管理
+这个模块用于管理细胞产品类型，核心字段：细胞产品类型编码、细胞产品类型名称
+
+### 2.3.2、细胞产品规格管理
+这个模块用于管理细胞产品规格，核心字段：细胞产品规格编码、细胞产品规格名称
+
+### 2.3.3、细胞产品价格体系管理
+这个模块用于管理细胞产品价格体系，核心字段：项目名称、项目编码、细胞类型编码[2.3.1、细胞产品类型管理]、细胞类型名称[2.3.1、细胞产品类型管理]、规格[2.3.2、细胞产品规格管理]、单价（元）
+
+### 2.3.4、细胞产品项目价格管理
+- 细胞产品项目价格体系管理，就是将多个细胞产品组合在一起，方便后续跟渠道签协议时候使用
+- 细胞产品项目价格体系表，核心字段： 体系名称、体系编码、状态（1 - 正常、 0 - 停用）
+- 细胞产品项目价格体系-细胞价格表，从【细胞产品价格体系表】选择之后，然后调整下价格就行了。核心字段：项目名称、项目编码、细胞类型编码[2.3.1、细胞产品类型管理]、细胞类型名称[2.3.1、细胞产品类型管理]、规格[2.3.2、细胞产品规格管理]、单价（元）
+
+## 2.2、细胞存储管理
+- 表模型层级关系
+  - 客户信息表: customer
+    - 客户随访表：核心字段客户id、随访时间、随访描述
+  - 细胞样本类型表
+  - 采集地区医院表
+  - 采集协议号表
+  - 样本编码表
+  - 采集协议单表:（id、采集协议号[采集协议号管理]、状态（dsx - 待生效 、 sxz - 生效中、 ygq - 已过期 、 yzf - 已作废、 zky - 转科研）、 协议附件、登记日期（YYYYMMDD）、备注信息、协议生效时间、协议生效描述、协议过期时间、协议过期描述、协议作废时间、协议作废描述、协议转科研时间、协议转科研描述 。 采集协议单状态当前有4个状态、创建协议单时候状态默认 dsx - 待生效 ， 后续提供四个按钮 协议生效、协议过期、协议作废、协议转科研 ，来改变协议状态）
+    - 采集信息表 : (采集协议单id、采集地区[2.2.3、采集地区及医院管理]、采集医院[2.2.3、采集地区及医院管理]、采集医护、销售人员[2.1.4、用户管理][默认当前登录人]、样本采集时间（YYYYMMDD hh:mm:ss）、母血采集时间（YYYYMMDD hh:mm:ss）)
+    - 样本信息表 :（1对多的关系，1个采集协议单会有多个样本信息）(采集协议单id、样本类型[2.2.2、细胞样本类型管理]、样本编码[样本编码管理]、采集量、单位[2.1.9、物品单位管理]、价格、存储年限（年）、样本状态（ycj - 已采集、 jcz - 检测中、 yrk - 已入库、yzf - 已作废）、入库日期（YYYYMMDD）、检测开始日期、作废日期、存储到期日期（YYYYMMDD）（= 入库日期 + 存储年限（年））、备注。 样本状态：创建样本信息时候，默认状态就是 ycj -已采集 。 提供三个按钮 样本检测、样本入库、样本作废，分别来修改样本的状态。 样本检测 按钮点击后，样本状态会变成jcz - 检测中，检测开始日期为当天。样本入库 按钮点击时候，会记录入库日期为当天，样本状态变成 yrk - 已入库。 样本作废 按钮点击后，样本状态就变成了 yzf - 已作废，作废日期 为当天)
+      - 运输信息表 : (一个样本对应一个运输信息，在界面操作时候也支持勾选所有样本录入一份的信息，那就代表这些样本都是同样的快递信息)(采集协议单中样本运输信息表核心字段：采集协议单id、样本id、运输类型（kdys - 快递运输 、 ryxd - 人员携带 ）、快递公司[2.1.10、快递公司管理]、快递单号、目的站点[2.1.7、站点管理]、快递费用（元）、预计到达时间（YYYYMMDD hh:mm:ss）、携带人员姓名、携带人员联系电话。 如果运输类型是 kdys - 快递运输 ，则填写 快递公司、快递单号、目的站点、快递费用（元）、预计到达时间。 如果运输类型是ryxd - 人员携带，则填写 携带人员姓名、携带人员联系电话、目的站点、预计到达时间)
+    - 缴费信息表: (采集协议单中缴费信息主表核心字段： 采集协议单id、缴费方式（dj - 趸交 、 fq - 分期）、合同金额、分期期数、每期间隔（月）、趸交截止时间（YYYYMMDD）、分期开始时间（YYYYMMDD, 缴费方式为fq - 分期，这个字段要填，填写完成后，分期期数、每期间隔（月），就会自动在子表中生成数据 ）)(缴费方式中趸交就是一次性缴费的意思)
+      - 缴费信息子表:  (采集协议单中缴费信息子表核心字段：缴费信息主表id、转账方式（wxzz - 微信转账、 zzbzz - 支付宝转账 、 yhkzz - 银行卡转账 、 xj - 现金） 、转账金额、转账时间 、转账附件 、财务确认附件、缴费状态（待缴费、缴费确认中、已缴费、退费确认中、已退费） 分期期数（如果是趸交，这个期数就为空）、分期应缴费时间（YYYYMMDD 缴费方式为分期时候，才有这个值）、备注。 如果为缴费方式为 dj - 趸交， 则只有一条记录。如果为缴费方式 为 fq - 分期，则有分期数一样数目的记录)
+    - 客户信息表: （这里是采集协议单中客户信息表，跟客户信息表 customer 不一样）(客户信息表核心字段：采集协议单id、客户id，母亲姓名、母亲联系电话、母亲身份证号、母亲出生年月（YYYYMM）、母亲民族、母亲家庭住址、父亲姓名、父亲电话、父亲身份证号、新生儿分娩时间、新生儿性别（1 - 男 、0 - 女）、分娩方式（sc - 顺产、 pgc - 剖宫产）、胎次（生育第几胎的意思，生育第一胎就是1 ， 生育第二胎就是2，以此类推） 、 新生儿体重（克）、新生儿评分（1分钟）、新生儿评分（5分钟）、采集专员[用户管理，默认当前登录用户的id])
+    - 审核信息表:  (采集协议单有一条审核记录表，核心字段： 采集协议单id、审核人、审核备注、审核状态（shtg - 审核通过、 shth - 审核退回）)
+    - 新生儿满月待办表:  (生效中的采集协议单中已满月的新生儿信息， 这个满月待办表中，核心字段：采集单协议id、满月待办状态（1 - 已办报销 、 0 - 未办保险）、办理日期、办理备注、保险附件)
+    - 储存证表:  (生效中的，并且样本已经入库的采集协议单， 储存证表中，核心字段：制作状态（1 - 已制作 ， 0 - 未制作） 储存证图片、制作日期，备注)
+    - 操作日志表: (采集协议单操作日志表：记录针对采集协议单的操作日志信息，需要我们针对协议单的所有操作都要有个编码、名称。方便记录操作日志)
+
+### 2.2.6、采集协议单
+- 这个界面展示采集专员自己创建的所有的协议单。这个界面支持协议单的创建、修改、删除
+- 采集协议单新增弹窗中，要填写客户信息（客户信息可以从客户信息表customer选择，然后将信息带出到母亲信息中。 如果客户信息表customer 没有这块的数据， 在保存采集协议单的时候，会新增或者修改客户信息表customer中的客户信息数据）、采集信息、样本信息、运输信息、缴费信息、协议单信息 、备注
+
+### 2.2.7、采集协议单审核
+- 这个界面可以看到所有的采集协议单，这个界面也支持协议单的创建、修改、删除
+- 增加一个审核按钮，审核弹窗中，可以填写审核备注、审核状态
+- 增加一个缴费确认发起按钮，点击后，缴费状态变成缴费确认中
+- 增加一个退费确认发起按钮，点击后，缴费状态变成退费确认中
+- 增加四个按钮：协议生效、协议过期、协议作废、协议转科研
+- 增加一个按钮：弹窗中可以查看、新增、编辑、删除客户随访信息
+
+### 2.2.8、采集协议单收款确认（财务确认）
+- 财务人员可以看见所有的采集协议单的所有的缴费部分的内容，可以对状态为缴费确认中的缴费信息单进行缴费确认，上传确认附件
+
+### 2.2.9、采集协议单退费确认（财务确认）
+- 财务人员可以看见所有的采集协议单的所有的缴费部分的内容，可以对状态为退费确认中的缴费信息单进行退费确认，上传确认附件
+
+### 2.2.10、分期缴费用户预警模块
+- 这个模块将分期缴费中最近7天缴费到期的数据展示出来。
+
+### 2.2.5、样本编码管理
+- 此模块用于样本编码维护管理、核心字段：样本编码(32位)、是否下发（1 - 是 、 0 -否）
+
+### 2.2.4、采集协议号管理
+- 此模块用于采集协议号表维护管理，核心字段：采集协议号(32位)、是否下发（1 - 是 、 0 -否）
+
+### 2.2.3、采集地区及医院管理
+- 此模块用于采集地区和地区内医院的信息。
+- 采集地区医院表，核心字段：地区名称、医院名称集（医院名称逗号分隔存储）
+- 这个模块展示采集地区信息，支持采集地区的新增、修改、删除、地区医院的配置。点击【地区医院配置】的按钮弹出弹窗，弹窗中可以进行医院信息的新增、修改、删除
+- 采集地区跟医院之间是1对多的关系
+
+### 2.2.2、细胞样本类型管理
+- 此模块用于维护样本类型表，核心字段包括： 样本类型编码、样本类型名称、样本存储年份、样本存储价格（元）
+- 目前样本类型有三种：wcqzxgxb - 围产期造血干细胞、qdjczgxb -  脐带间充质干细胞、 tpyqngxb - 胎盘亚全能干细胞
+- 这个模块提供细胞样本类型信息管理功能，包括新增、修改、删除等功能
+
+### 2.2.1、客户管理
+- 每个客户都有个客户标签字段，这个字段存储着客户所有的标签，标签名称之间用逗号分隔。目前客户标签采取手动写标签名称，没有标准的客户标签
+- 客户信息表customer包括：客户姓名、客户性别（0 - 男 1 - 女 2 - 未知）、身份证号、年龄、联系电话、客户标签（多个标签之间用逗号分隔）。
+- 客户信息表中，客户姓名必须填写，但不要求唯一，因为存在重名的场景。如果身份证一样的，那就不要重复创建用户了，提醒用户已创建
+- 这个模块提供一个客户信息展示、新增、修改、删除的功能
+
+## 2.1、系统管理
+
+### 2.1.1、租户管理
+- 此模块给超级系统管理员superadmin 使用
+- 租户信息包括：id，租户编号（用户自由编排），租户名称、联系人姓名、联系电话
+- 目前系统就一个租户： 中科兴皖，租户编号 zkxw
+- 这个模块提供租户的列表展示，提供租户的增加、删除、修改功能
+
+### 2.1.2、字典管理
+- 字典管理用于给中科兴皖一体化门户系统中，所有的字典项进行统一管理
+- 字典数据表  TABLE `sys_dict_data` 核心字段：
+```sql
+`dict_label` varchar(100) DEFAULT '' COMMENT '字典标签',
+`dict_value` varchar(100) DEFAULT '' COMMENT '字典键值',
+`dict_type` varchar(100) DEFAULT '' COMMENT '字典类型',
+```
+- 字典类型表 TABLE `sys_dict_type` 核心字段：
+```sql
+`dict_name` varchar(100) DEFAULT '' COMMENT '字典名称',
+`dict_type` varchar(100) DEFAULT '' COMMENT '字典类型',
+```
+- 界面中展示字典类型信息，支持字典类型的新增、修改、删除、字典数据配置的功能。点击【字典数据配置】按钮，弹出弹窗，弹窗中支持字典类型的字典数据的展示、新增、修改、删除的功能
+
+- 下面是系统初始化阶段有哪些字典类型及字典数据
+  - 组织类别的类型编码： zzlbbm ， 字典数据 gs - 公司 、 fgs - 分公司、 bm - 部门
+  - 站点类型的类型编码： zdlx ，  字典数据  zxjd - 中心基地
+  - 站点业务范围的类型编码：zdywfw, 字典数据 ybcj - 样本采集、 ybzb - 样本制备 、zljc - 质量检测 、 xbcc - 细胞存储
+  - 部门状态的类型编码：bmzt , 字典数据 0 - 停用 ， 1 - 正常
+
+### 2.1.3、组织管理
+- 要支持多级组织
+- 组织信息表sys_dept,核心字段包括：组织id、组织名称、父组织id、组织类别编码（数据见字典表，字典类型的编码：zzlbbm）、部门状态（ 字典类型的编码：bmzt , 0 - 停用 ， 1 - 正常）、部门负责人、部门负责人联系电话、排序号
+- 当前中科兴皖的组织：市场营销部门（下设 采集部、临床部、中试服务部、支持中心、客服部） 、技术研发部、生产部、质量安全部、财务部、综合部
+- 界面以树形表单展示组织信息，支持组织的新增、修改、删除、新增子组织等功能
+
+### 2.1.4、用户管理
+- 支持对组织下的用户进行管理
+- 用户表：sys_user，核心字段
+```sql
+`dept_id` bigint(20) DEFAULT NULL COMMENT '部门ID',
+`user_no` varchar(30) NOT NULL COMMENT '用户账号',
+`nick_name` varchar(30) NOT NULL COMMENT '用户名',
+`email` varchar(50) DEFAULT '' COMMENT '用户邮箱',
+`phone_no` varchar(11) DEFAULT '' COMMENT '手机号码',
+`sex` char(1) DEFAULT '0' COMMENT '用户性别（0 - 男 1 - 女 2 - 未知）',
+`avatar` bigint(20) DEFAULT NULL COMMENT '头像地址（minio上图片的完整访问地址）',
+`password` varchar(100) DEFAULT '' COMMENT '密码',
+`status` char(1) DEFAULT '0' COMMENT '帐号状态（1- 正常， 0 -停用）',
+```
+- 界面分左右两部分、左侧用树形结构展示组织信息。点击组织信息[2.1.3、组织管理]，右侧列表中就会展示出来当前组织下的用户。在右侧区域支持组织下用户的新增、修改、删除、停用等操作
+
+### 2.1.5、角色管理
+- 支持系统角色信息的维护管理。
+  - 角色表 sys_role
+  - ```sql
+  `role_name` varchar(30) NOT NULL COMMENT '角色名称',
+  `data_scope` char(1) DEFAULT '1' COMMENT '数据权限范围（1：全部数据权限  2：本部门数据权限 3：本部门及以下数据权限 4：仅本人数据权限 5：自定义数据权限 ）',
+  `status` char(1) NOT NULL COMMENT '角色状态（1 正常 0 停用）',
+  ```
+- 在这个模块可以给角色授予用户
+- 在这个模块可以给角色授予菜单权限
+  - 角色菜单关联表 sys_role_menu
+  ``` sql
+  `role_id` VARCHAR(64) NOT NULL COMMENT '角色ID',
+  `menu_id` VARCHAR(64) NOT NULL COMMENT '菜单ID',
+  ```
+- 在这个模块可以给角色授予数据权限,通过角色表的data_scope，但是涉及到了自定义数据权限。
+  - 自定义数据权限表 sys_role_data_scope_detail
+  - ```sql
+  `role_id` bigint(20) NOT NULL COMMENT '角色ID',
+  -- 核心字段：定义“范围”的类型和值
+  `scope_type` varchar(20) NOT NULL COMMENT '范围类型：dept(部门), user(用户)',
+  `scope_value` varchar(100) NOT NULL COMMENT '范围值：部门ID/用户ID',
+  ```
+- **特别注意：一个用户可能会存在多个角色。所以菜单权限和数据权限是要用这个用户所有角色的权限之和**
+
+- 界面展示角色信息列表，支持角色的新增、修改、删除、角色菜单配置、角色数据权限配置。
+- 【角色菜单配置】按钮点击弹出弹窗，弹窗中列表树形结构方式展示菜单信息[2.1.6、菜单管理],树形结构节点前面有个多选框，支持勾选。勾选子菜单默认会将父菜单一起勾选上
+- 【角色数据权限配置】按钮点击弹出弹窗，弹窗中支持用户下拉框方式选择数据权限范围（1：全部数据权限  2：本部门数据权限 3：本部门及以下数据权限 4：仅本人数据权限 5：自定义数据权限 ），当用户选择了自定义数据权限。弹窗下方区域左侧支持勾选组织[2.1.3、组织管理](勾选子组织不会将父组织勾选上)、右侧支持勾选用户[2.1.4、用户管理]
+
+#### 2.1.5.1、角色表 sys_role、角色菜单关联表 sys_role_menu、自定义数据权限表 sys_role_data_scope_detail的层级关系
+- 角色表 sys_role
+  - 角色菜单关联表 sys_role_menu
+  - 自定义数据权限表 sys_role_data_scope_detail
+
+### 2.1.6、菜单管理
+- 在这个模块可以对web端和小程序端的菜单进行维护管理
+- 系统菜单支持多级菜单模式
+- 系统菜单表 sys_menu, 核心字段
+```sql
+  `menu_name` varchar(50) NOT NULL COMMENT '菜单名称',
+  `parent_id` bigint(20) DEFAULT '0' COMMENT '父菜单ID',
+  `is_frame` int(1) DEFAULT '1' COMMENT '是否为外链（1 是 0 否）',
+  `visible` char(1) DEFAULT '0' COMMENT '显示状态（1 显示 0 隐藏）',
+  `status` char(1) DEFAULT '0' COMMENT '菜单状态（1 正常 0 停用）',
+```
+- 系统默认有两个数据，分别是 1 - web端菜单， 2 - 移动端菜单，这两个菜单数据的parent_id = 0 。其他菜单数据都在这两个节点下创建。
+- 界面以树形结构展示菜单数据，支持菜单数据的新增、修改、删除、新增子菜单。
+
+### 2.1.7、站点管理
+- 此模块用于维护管理公司站点信息。
+- 目前就一个站点：中科兴皖
+- 站点信息包括：站点名称、站点编码（自定义编写）、所属租户、站点类型（字典类型编码 zdlx ）、状态（1 正常 0 停用）、详细地址、联系人、联系电话、业务范围（字典编码的类型编码为：zdywfw）
+- 这里设置了站点，为了后续细胞存储、细胞生产、质量检测都可以选择站点，目前这个功能不做，默认所有的都在一个站点：中科兴皖
+
+### 2.1.8、职位管理
+- 这个模块用于职位信息的维护管理，支持职位绑定用户，一个职位可以绑定多个用户，一个用户可以绑定多个职位
+- 职位表 sys_post,核心字段包括： 职位名称、职位编码、排序号、状态（1 正常 0 停用）
+- 职位与用户关联表 sys_user_post, 核心字段： 用户id、职位id
+- 职位表和职位与用户关联表的关系
+  - 职位表
+    - 职位与用户关联表
+- 界面中展示职位信息，支持职位信息的新增、修改、删除、职位用户配置。点击【职位用户配置】按钮，弹出弹窗，弹窗中展示用户信息[2.1.4、用户管理]，支持勾选多个用户
+
+### 2.1.9、物品单位管理
+- 记录物品单位的表，核心字段： 单位编码、单位名称 (例如：单位编码 g 、 单位名称 克)
+
+### 2.1.10、快递公司管理
+- 维护快递公司信息表，核心字段：快递公司编码、快递公司名称
+
+### 2.1.11、流程管理
+流程管理分为两部分：1、流程配置与启用 2、流程办理中心
+- 本次我们后端采用python语言实现一套全新的工作流系统。 实现目标类似钉钉宜搭工作流（低代码平台那种简易工作流）的配置，
+- 图形化配置审批流程。流程配置节点和连接线，节点包括但不限于开始节点、结束节点、审批人节点(支持配置用户、支持配置角色等)、条件分支（支持多分支）等节点 。节点之间用连接线进行连接。
+- 工作流还要支持流程变量：就是申请人的部门id等信息塞入到系统流程变量，也支持发起工作流时候动态塞入流程变量
+- 审批人节点要支持配置一个用户、支持配置多个用户、支持配置一个角色、支持配置多个角色、同时还要支持通过sql模式找到审批人（通过sql模式结合流程变量，就可以实现当前申请人部门的主管审批这样的场景）。
+- 审批人节点还支持配置一个人审批通过就算通过，还是所有配置审批人都审核通过了才算通过
+- 条件分支支持两个条件、也支持多个条件（例如，金额小于等于100，金额大于100，小于300， 金额大于等于300）走不同的分支。这里金额就是一个动态的流程变量
+- 流程配置支持版本号、因为有的流程通过老版本的流程发起的，还需要继续按照老版本运行。后续新增的都是按照新版本号流程
+- 工作流配置好了，下一步就是业务工单发起工作流，工作流的待办中心、已办中心。
+- 流程管理模块预计的功能模块
+  - 流程配置管理
+  - 待办中心
+  - 已办中心
+
+
+# 3、技术要求
+- mysql 5.7 数据库
+- 所有表都有的公共字段
+  - `id` VARCHAR(64) NOT NULL COMMENT '主键ID', 采用UUID
+  - `tenant_no` VARCHAR(64) NOT NULL DEFAULT 'zkxw' COMMENT '租户编号'
+  - `order_num` int NULL COMMENT '排序号'
+  - `remark` varchar(512) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '备注',
+  - `create_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '创建人id',
+  - `create_dept_id` VARCHAR(64) NOT NULL COMMENT '创建人部门ID',
+  - `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  - `update_by` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '更新人id',
+  - `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  - `del_flag` tinyint(4) NOT NULL DEFAULT '0' COMMENT '删除标记：0 - 正常 1 - 已删除',
+- 创建表模型时候，业务字段放在id后面、其他的字段如tenant_no、order_num、remark、create_by、create_dept_id、create_time、update_by、update_time、del_flag放在业务字段后面
+- 所有数据都不可以直接删除，都必须要用虚拟删除（0/1， 0 表示 未删除， 1 表示 已删除）
+- 系统中附件都是支持多个附件的、用一个字段存储。存储方式：多个附件的minio地址用逗号分隔
+- API接口返回数据在没有特殊排序要求的，都是按照order_num正序排列、创建时间倒序排列
+- 后端用python语言
+- 后端API查询接口都需要带上tenant_no = 当前登录人的tenant_no进行查询。后端API查询接口都需要带上当前登录人的数据权限之和进行查询
+- 后端API操作类接口，需要表信息中的tenant_no 修改为 当前登录人的tenant_no
+- 前端用 https://github.com/Daymychen/art-design-pro 这个开源的框架，然后使用pnpm clean:dev 进行精简，在精简版本上开发
+- 小程序端使用hbuilderx创建一个空的UNI-app工程，然后在这个工程上使用vue3、vant-ui来开发业务功能
+
+
+# 4、术语库
+- 趸交 - 一次性缴费