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 <cursoragent@cursor.com>

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 |