From 3138666ae25e624135b0fbc254b767a3b3f6f9ab Mon Sep 17 00:00:00 2001 From: wuzilong <704541015@qq.com> Date: Sun, 18 Oct 2026 18:07:45 +0800 Subject: [PATCH] docs: add mp CRM product confirm dialog design (delete B, other A). Co-authored-by: Cursor --- ...ia-mp-crm-product-delete-confirm-demo.html | 443 ++++++++++++++++++ ...18-mp-crm-product-confirm-dialog-design.md | 81 ++++ 2 files changed, 524 insertions(+) create mode 100644 bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html create mode 100644 docs/superpowers/specs/2026-10-18-mp-crm-product-confirm-dialog-design.md diff --git a/bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html b/bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html new file mode 100644 index 000000000..63518e0fe --- /dev/null +++ b/bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html @@ -0,0 +1,443 @@ + + + + + + 山峡化工 · 产品管理 · 删除确认弹窗 Demo + + + +
+ + +
+ + + + + +
+ +
+ +
+
现状 丑
+
+
9:41产品管理
+
+
+ ‹ +

产品管理

+
+
+
+
+
工业乙醇 95%
+
上架 · P20261018001
+
+ + +
+
+
+
+
提示
+
确认删除该产品？删除后不可恢复。
+ + +
+
+
+
+
+ + +
+
方案 A · 横排绿确认 推荐
+
+
9:41产品管理
+
+
+ ‹ +

产品管理

+
+
+
+
+
工业乙醇 95%
+
上架 · P20261018001
+
+ + +
+
+
+
+
+
删除产品
+
+
确认删除该产品？删除后不可恢复。
+
+ + +
+
+
+
+
+
+ + +
+
方案 B · 横排红确认 危险强调
+
+
9:41产品管理
+
+
+ ‹ +

产品管理

+
+
+
+
+
工业乙醇 95%
+
上架 · P20261018001
+
+ + +
+
+
+
+
!
+
删除产品
+
确认删除该产品？删除后不可恢复。
+
+ + +
+
+
+
+
+
+ + +
+
方案 C · 原生毛发线横排 轻量
+
+
9:41产品管理
+
+
+ ‹ +

产品管理

+
+
+
+
+
工业乙醇 95%
+
上架 · P20261018001
+
+ + +
+
+
+
+
删除产品
+
确认删除该产品？删除后不可恢复。
+
+ + +
+
+
+
+
+
+
+ +
+ 落地说明（待你选方案后写进 spec）： + 产品页 web-admin/src/views/m/crm/product/*.vue 仍用 Vant showConfirmDialog， + 在 product.scss 覆盖 Dialog 圆角/内边距/横排按钮样式（对齐客户页 + body .van-dialog .van-button），删除调用传 confirmButtonText: '确认删除'、 + 标题改为「删除产品」。方案 B 额外设 confirmButtonColor: '#dc2626' 或 danger class。 + 上架/下架确认可共用同一外壳，确认色用品牌绿。 +
+
+ + + + diff --git a/docs/superpowers/specs/2026-10-18-mp-crm-product-confirm-dialog-design.md b/docs/superpowers/specs/2026-10-18-mp-crm-product-confirm-dialog-design.md new file mode 100644 index 000000000..f84829f33 --- /dev/null +++ b/docs/superpowers/specs/2026-10-18-mp-crm-product-confirm-dialog-design.md @@ -0,0 +1,81 @@ +# 小程序 WebView · 产品管理确认弹窗美化 + +日期：2026-10-18 +状态：已确认（删除 = 方案 B；其它确认 = 方案 A） +范围：`web-admin` 小程序 WebView 产品管理 `/m/crm/product*` + +## 1. 目标与边界 + +### 1.1 目标 + +1. 美化产品管理中 Vant `showConfirmDialog` 的默认纵向堆叠、无主次样式。 +2. **删除类确认**采用方案 B（危险红确认 + 警示图标感）。 +3. **非删除确认**（上架 / 下架）采用方案 A（三墙绿确认）。 +4. 文案与视觉对齐 Demo：`bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html`。 + +### 1.2 范式权威 + +| 维度 | 权威 | +|------|------| +| 视觉 Token | 三墙绿 `#0a9f6d` / `#087f57` / `#e9f9f2`；危险红 `#dc2626`；禁止 Fresh Mint `#10b981` | +| 交互示意 | `bak/mobile-ui/shanxia-mp-crm-product-delete-confirm-demo.html` 方案 A / B | +| 客户页 Dialog 按钮覆盖先例 | `web-admin/src/views/m/crm/customer/customer.scss` 中 `body .van-dialog .van-button` | + +### 1.3 不做 + +- 不改客户 / 报价 / 合同等其它 CRM 模块确认弹窗。 +- 不改 PC 端 `crm/product`。 +- 不更换组件库；继续使用 Vant `showConfirmDialog`。 +- 不引入独立自定义 Dialog 组件（除非 Vant 样式无法达到 Demo 效果，再单开变更）。 + +## 2. 视觉规格 + +### 2.1 公共外壳（A / B 共用） + +- 白底圆角卡片（约 14–16px）、居中标题与说明。 +- 遮罩半透明深色；无 backdrop-blur。 +- 底部**横排**两个按钮（取消 | 确认），等宽，圆角约 10px，高度约 40px。 +- 禁止纵向堆叠「取消 / 确认」。 + +### 2.2 方案 A（非删除） + +- 确认按钮：三墙绿实心（`#0a9f6d`）+ 白字。 +- 取消按钮：白底 + `#dcebe4` 描边 + 深色字。 +- 无危险图标。 + +### 2.3 方案 B（删除） + +- 标题上方或标题区呈现危险警示视觉（圆形浅红底 +「!」或等价警示符号，对齐 Demo 方案 B）。 +- 确认按钮：危险红实心（`#dc2626`）+ 白字；文案为「确认删除」。 +- 取消按钮：同方案 A。 + +## 3. 调用点与文案 + +| 文件 | 场景 | 方案 | 标题 | 确认文案 | +|------|------|------|------|----------| +| `product/index.vue` | 删除产品 | B | 删除产品 | 确认删除 | +| `product/index.vue` | 上架 / 下架 | A | 上架产品 / 下架产品 | 确认 | +| `product/detail.vue` | 删除产品 | B | 删除产品 | 确认删除 | +| `product/detail.vue` | 上架 / 下架 | A | 上架产品 / 下架产品 | 确认 | +| `product/categories.vue` | 删除分类 | B | 删除分类 | 确认删除 | + +说明文案保持现有语义（删除含「不可恢复」；上下架为「确认上架/下架该产品？」）。 + +## 4. 实现要点 + +说明：Vant 默认 `theme` 为横排文字按钮；`theme: 'round-button'` 会纵向堆叠（正是现状丑态，**禁止使用**）。`confirmButtonColor` 只改文字色，**不能单独达到 Demo 实心按钮**。落地必须以 CSS 覆盖 footer 为「内边距 + 横排实心键」。 + +1. **样式入口**：在 `product.scss` 写 `body .van-dialog.mp-product-dialog`（及 `--danger` 修饰），只影响产品管理传入 `className` 的 Dialog，避免误伤客户等其它页。 +2. **公共外壳 CSS**：圆角约 16px、标题/正文居中、footer 去毛发线全宽拉伸，改为 `padding + gap` 横排两键（高约 40px、圆角约 10px），对齐 Demo A/B。 +3. **方案 A 调用**：`className: 'mp-product-dialog'`；确认键 CSS 实心 `#0a9f6d`；可选 `confirmButtonColor: '#0a9f6d'` 作兜底。 +4. **方案 B 调用**：`className: 'mp-product-dialog mp-product-dialog--danger'`；确认键 CSS 实心 `#dc2626`；`confirmButtonText: '确认删除'`；`confirmButtonColor: '#dc2626'` 作兜底。 +5. **警示图标**：删除 Dialog 用 `allowHtml: true`，在 `message` 内拼一段含圆形「!」图标 + 说明文字的 HTML（结构对齐 Demo B）；非删除不传 HTML。 +6. **回归**：对照 Demo；列表/详情/分类删除为 B；列表/详情上下架为 A；确认无纵向堆叠。 + +## 5. 验收标准 + +1. 删除确认：横排按钮；确认键红色；有明显危险警示；文案为「删除产品/分类」+「确认删除」。 +2. 上架/下架确认：横排按钮；确认键三墙绿；无红色危险样式。 +3. 取消或点遮罩关闭不执行业务（保持 Vant 现有 reject 行为）。 +4. 不出现纵向堆叠的丑默认态（对照截图与 Demo「现状」）。 +5. 色值不混用 Fresh Mint `#10b981`。