From 9b405a9227acae2002beb259a4e19fed1991027b Mon Sep 17 00:00:00 2001 From: wuzilong <704541015@qq.com> Date: Sun, 18 Oct 2026 16:21:17 +0800 Subject: [PATCH] docs: add mp CRM product category tree style design (scheme A). Record the chosen indent-expand tree list styling for the mobile product-category webview, with the three-option HTML demo for reference. Co-authored-by: Cursor --- ...rm-product-category-tree-compare-demo.html | 828 ++++++++++++++++++ ...-crm-product-category-tree-style-design.md | 101 +++ 2 files changed, 929 insertions(+) create mode 100644 bak/mobile-ui/shanxia-mp-crm-product-category-tree-compare-demo.html create mode 100644 docs/superpowers/specs/2026-10-18-mp-crm-product-category-tree-style-design.md diff --git a/bak/mobile-ui/shanxia-mp-crm-product-category-tree-compare-demo.html b/bak/mobile-ui/shanxia-mp-crm-product-category-tree-compare-demo.html new file mode 100644 index 000000000..940a77eb7 --- /dev/null +++ b/bak/mobile-ui/shanxia-mp-crm-product-category-tree-compare-demo.html @@ -0,0 +1,828 @@ + + + + + + 山峡化工 · 产品分类树形列表 · 三方案对比 Demo + + + +
+ + +
+ + + +
+ + +
+

+ A · 缩进展开树推荐
+ 整卡一体列表：箭头展开/折叠，左侧缩进表达父子孙；「+」加子类、「⋯」编辑/删除。一屏看清整棵树，适合管理 CRUD。当前线上页接近本方案，但行是分散小卡；本 Demo 收成一体树表。 +

+
+
9:41▍
+
+
+ +

产品分类

+ +
+
+
+
+ +
+
+
+
+
+ + +
+

+ B · 逐级下钻
+ 类似文件管理器：每次只显示当前层；面包屑回退。深层分类更清晰，但无法一屏总览整树，新增子类需先进入父级。 +

+
+
9:41📶
+
+
+ +

产品分类

+ +
+
+
+ +
+
+
+
+ + +
+

+ C · 层级卡片 + 全路径
+ 与近期产品/客户列表卡视觉对齐：每条独立卡片，左侧色条表示层级，副文案用「父 / 子 / 孙」全路径。搜索友好、风格统一，但树感弱、列表更长。 +

+
+
9:41📶
+
+
+ +

产品分类

+ +
+
+
+
+
+
+
+ +
+ 怎么选？
+ · 分类数量不多、要一眼看层级 → A
+ · 层级很深、只关心当前层 → B
+ · 希望和产品列表卡同一套视觉语言 → C +
+
+ +
+ + + + diff --git a/docs/superpowers/specs/2026-10-18-mp-crm-product-category-tree-style-design.md b/docs/superpowers/specs/2026-10-18-mp-crm-product-category-tree-style-design.md new file mode 100644 index 000000000..69ab80450 --- /dev/null +++ b/docs/superpowers/specs/2026-10-18-mp-crm-product-category-tree-style-design.md @@ -0,0 +1,101 @@ +# 小程序 · CRM 产品分类列表样式（方案 A 缩进展开树）设计 + +> 日期：2026-10-18 +> 状态：待审阅 +> 视觉 Demo：`bak/mobile-ui/shanxia-mp-crm-product-category-tree-compare-demo.html`（方案 A） +> 实现目标页：`web-admin/src/views/m/crm/product/categories.vue` +> 前序设计：`docs/superpowers/specs/2026-07-18-mp-crm-product-category-design.md`（能力基线已落地） + +## 1. 背景 + +- 产品管理移动端 webview 已具备产品分类 CRUD（树加载、展开折叠、新增/编辑弹窗、删除与创建人校验）。 +- 当前列表为「每行一张分散小卡」，层级感弱，与对比 Demo 方案 A（一体树表）及近期产品/客户列表视觉节奏不一致。 +- 用户在三方案对比中选定 **方案 A · 缩进展开树**。 + +## 2. 目标 + +1. 将分类列表视觉与交互对齐 Demo 方案 A：一体白底圆角树表 + 缩进展开。 +2. 补齐行元信息（状态 Tag · 排序号 · 子类数量）与行内 `+` 快捷新增子级。 +3. Header 增加「全部展开 / 全部折叠」。 +4. 不改后端接口、表结构、表单字段与删除权限规则。 + +## 3. 非目标 + +- 不做方案 B（逐级下钻）或方案 C（层级卡片 + 全路径）。 +- 不做 Excel 导入导出、多选批量删除、搜索/状态 chips（若现页未有，本期不新增）。 +- 不改 Web 桌面端产品分类页（`crm/product-category` / maintain dialog）。 +- 不改小程序原生页（本能力在 webview `m/crm/product/categories`）。 + +## 4. 范围与落点 + +| 项 | 路径 / 说明 | +|----|-------------| +| 主改 | `web-admin/src/views/m/crm/product/categories.vue`（模板结构 + scoped 样式 + 少量交互） | +| 对照 Demo | `bak/mobile-ui/shanxia-mp-crm-product-category-tree-compare-demo.html` 方案 A | +| 不变 | `fetchCategoryTree` / create / update / delete API；弹窗表单字段；`canDeleteByCreator` | + +## 5. UI 设计（方案 A） + +### 5.1 列表骨架 + +1. Header：`MpBusinessHeader` 标题「产品分类」· 返回产品列表 +2. Header 右侧工具：「全部展开 / 全部折叠」+「新增」（布局须保证触控可达，不遮挡返回） +3. 一体树表：白底、边框 `#dcebe4`、圆角约 16px；行间细分割线 `#edf5f1` +4. 空态 / 加载态：保持现有 `van-loading` / `van-empty` + +### 5.2 树行（左 → 右） + +| 区域 | 说明 | +|------|------| +| 展开箭头 | 有子才显示；点击仅切换该节点展开态 | +| 主区 | 名称（15px/600）；元信息：状态 Tag · `排序 N` · `M 个子类` 或 `末级`；点击打开 ActionSheet | +| `+` | 快捷新增子级（预填 `parentId`） | +| `⋯` | 打开 ActionSheet：新增子级 / 编辑 / 删除 | + +- 缩进：约 **16px / 级**（`paddingLeft: 12 + depth * 16`）。 +- 默认展开：加载后对「有子节点」的节点全部展开（与现网 `collectExpandIds` 一致）。 +- 「全部展开 / 全部折叠」：切换整树展开态，按钮文案随状态切换。 + +### 5.3 ActionSheet + +与现网一致： + +- 新增子级 +- 编辑 +- 删除（`disabled` 当不可删；确认框与 `CREATOR_DELETE_TIP` 不变） + +### 5.4 Token + +对齐 `docs/miniprogram-ui-spec-sanqiang.md`： + +- 主色 `#0a9f6d` / 深 `#087f57` / 浅底 `#e9f9f2` +- 正文 `#1f2a26` / 次要 `#6b7b74` +- 页底 `#f5f8f7` +- 状态 Tag：正常 success 绿系；停用 danger 红系（与现网 product 页一致） +- 行高 ≥ 52px；触控区 ≥ 44×44 + +禁止混用 web-admin Fresh Mint `#10b981` 作为本页主色。 + +## 6. 数据与逻辑 + +- 仍使用全量树接口，前端 `flatNodes` 按 `expandedIds` 展平渲染。 +- 表单弹窗、上级选择、状态字典、提交 payload **不改字段契约**。 +- 仅新增 UI 状态：如 `allExpanded`（或由「是否所有有子节点均在 expandedIds」推导）驱动 Header 文案。 + +## 7. 验收清单 + +1. 父子孙三级缩进清晰，展开/折叠正确。 +2. 列表为一体树表（非整行散卡），视觉接近 Demo A。 +3. 行内展示状态 / 排序 / 子类数；`+` 与 `⋯` 可用。 +4. 「全部展开 / 全部折叠」切换正确。 +5. 新增顶级、新增子级、编辑、删除流程与现网一致，无回归。 +6. 空态、加载态正常；创建人不可删时删除项禁用或提示不变。 + +## 8. 已确认决策 + +| 决策 | 结论 | +|------|------| +| 树形展示方案 | A 缩进展开树（非 B/C） | +| 相对现页变更重心 | 视觉一体树表 + 元信息 + 行内 `+` + 全部展开/折叠 | +| API / 表单 | 不改 | +| Demo 权威 | `shanxia-mp-crm-product-category-tree-compare-demo.html` 方案 A |