docs: add mp-webview CRM quote implementation plan.

Break the quote manage/approve H5 migration into TDD-friendly tasks aligned with the product webview pattern.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/superpowers/plans/2026-10-15-mp-webview-crm-quote.md

@@ -0,0 +1,942 @@
+# 小程序 WebView · CRM 报价单 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 在小程序工作台开放「CRM管理 → 报价单管理 / 报价单审批」，通过既有 `mp-webview` 壳打开 `web-admin` `/#/m/crm/quote*`，提供管理闭环（列表/详情/增改删/单条提交审批/复制新增/作废/版本历史只读）与审批闭环（待审/已审列表 + 单条通过驳回），不含分享、转合同、富文本/PDF、导出与批量。
+
+**Architecture:** 复用运输计划 / CRM 产品 WebView 模板（ticket → exchange → `MpWebviewShell`）。新建移动端报价页，样式对齐 `/#/m/pl/plan*` 与 `/#/m/crm/product*`（`mp-webview.scss` 三墙 Token）。业务 API 全部复用 `@/api/crm/quote`。桌面 `QuoteFormDialog`/`QuoteFormPanel` 增加 `variant="page"`；列表抽共享组件 + `mode`。菜单 SQL 幂等写入 `MINI_CRM_QUOTE*`，按 Web `crm:quote:list` / `crm:quote:approve` 角色分别补绑。
+
+**Tech Stack:** Vue 3 · Vue Router hash · Element Plus · Pinia · uni-app web-view · MySQL `sys_menu`/`sys_role_menu` · Node test（`pnpm exec tsx --test`）
+
+**Spec:** `docs/superpowers/specs/2026-10-15-mp-webview-crm-quote-design.md`
+
+---
+
+## 文件结构
+
+| 路径 | 职责 |
+|------|------|
+| `web-admin/src/utils/mp-crm-quote-card.ts` | 列表 Tab/查询参数、卡片字段、金额格式（可单测） |
+| `web-admin/src/utils/mp-crm-quote-card.test.ts` | 纯函数单测 |
+| `web-admin/src/utils/mp-webview.ts` | 增加 `MP_CRM_QUOTE_LIST_PATH`、`MP_CRM_QUOTE_APPROVAL_PATH` |
+| `web-admin/src/views/m/crm/quote/MpQuoteList.vue` | 共享列表（mode=manage\|approve） |
+| `web-admin/src/views/m/crm/quote/index.vue` | 管理列表壳 |
+| `web-admin/src/views/m/crm/quote/approval.vue` | 审批列表壳 |
+| `web-admin/src/views/m/crm/quote/detail.vue` | 详情 + 管理/审批底栏 |
+| `web-admin/src/views/m/crm/quote/form.vue` | 路由壳，挂载 `QuoteFormDialog variant="page"` |
+| `web-admin/src/views/m/crm/quote/versions.vue` | 版本历史只读 |
+| `web-admin/src/views/crm/quote/components/QuoteFormDialog.vue` | 增加 `variant: 'dialog' \| 'page'` |
+| `web-admin/src/views/crm/quote/components/QuoteFormPanel.vue` | page 模式单列布局（若 dialog 透传不够再改） |
+| `web-admin/src/router/routes/staticRoutes.ts` | 注册 `/m/crm/quote*`（catch-all 前） |
+| `miniprogram/config/workbench-menus.js` | 两项 enabled + code + perms |
+| `miniprogram/config/api.js` | `WORKBENCH_ROUTE_MAP` 两项 |
+| `docs/sql/migrations/2026-10-15-mini-crm-quote-webview-menus.sql` | 菜单 + 角色补绑 |
+| `docs/web-admin-mp-webview-modules.md` | 补充报价对照行 |
+
+**明确不改：** `mp-webview.vue` 鉴权协议、后端报价业务 API 语义、桌面 `/#/crm/quote*` 默认行为（仅表单组件增加可选 `variant`，默认仍为 `dialog`）。
+
+**查询语义（重要，与桌面审批 Tab 不同）：**
+
+| mode | view | 请求要点 |
+|------|------|----------|
+| manage | `all` | `excludeStatus=invalid`；不传 status / pending / approved |
+| manage | `submitted` | `status=submitted`；**不**传 `pendingApprovalUserId` |
+| manage | `accepted` | `status=accepted`；**不**传 `approvedByUserId` |
+| approve | `submitted` | `status=submitted` + `pendingApprovalUserId=当前用户` |
+| approve | `accepted` | `approvedByUserId=当前用户`（与桌面审批「已审批」一致） |
+
+分页字段用 `pageNum` / `pageSize`（对齐 `QuoteQuery`，不是产品的 `page`）。
+
+---
+
+### Task 1: 列表卡片纯函数 + 单测
+
+**Files:**
+- Create: `web-admin/src/utils/mp-crm-quote-card.ts`
+- Create: `web-admin/src/utils/mp-crm-quote-card.test.ts`
+
+- [ ] **Step 1: 写失败单测**
+
+```ts
+// web-admin/src/utils/mp-crm-quote-card.test.ts
+import assert from 'node:assert/strict'
+import { describe, it } from 'node:test'
+import {
+  MP_QUOTE_MANAGE_TABS,
+  MP_QUOTE_APPROVE_TABS,
+  buildQuoteListQuery,
+  buildQuoteCard,
+  formatQuoteMoney,
+  quoteTypeLabel,
+  quoteTypeTagType
+} from './mp-crm-quote-card'
+
+describe('tabs', () => {
+  it('manage has all/submitted/accepted; approve has submitted/accepted', () => {
+    assert.deepEqual(
+      MP_QUOTE_MANAGE_TABS.map((x) => x.value),
+      ['all', 'submitted', 'accepted']
+    )
+    assert.deepEqual(
+      MP_QUOTE_APPROVE_TABS.map((x) => x.value),
+      ['submitted', 'accepted']
+    )
+  })
+})
+
+describe('buildQuoteListQuery', () => {
+  it('manage all excludes invalid and trims keyword', () => {
+    assert.deepEqual(
+      buildQuoteListQuery({
+        mode: 'manage',
+        view: 'all',
+        pageNum: 1,
+        pageSize: 20,
+        keyword: ' 酸 ',
+        currentUserId: 'u1'
+      }),
+      {
+        pageNum: 1,
+        pageSize: 20,
+        keyword: '酸',
+        excludeStatus: 'invalid'
+      }
+    )
+  })
+
+  it('manage submitted sets status only', () => {
+    const q = buildQuoteListQuery({
+      mode: 'manage',
+      view: 'submitted',
+      pageNum: 2,
+      pageSize: 10,
+      keyword: '',
+      currentUserId: 'u1'
+    })
+    assert.equal(q.status, 'submitted')
+    assert.equal(q.excludeStatus, undefined)
+    assert.equal('pendingApprovalUserId' in q, false)
+    assert.equal('keyword' in q, false)
+  })
+
+  it('manage accepted sets status accepted', () => {
+    const q = buildQuoteListQuery({
+      mode: 'manage',
+      view: 'accepted',
+      pageNum: 1,
+      pageSize: 20,
+      keyword: '',
+      currentUserId: 'u1'
+    })
+    assert.equal(q.status, 'accepted')
+    assert.equal('approvedByUserId' in q, false)
+  })
+
+  it('approve submitted uses pendingApprovalUserId', () => {
+    const q = buildQuoteListQuery({
+      mode: 'approve',
+      view: 'submitted',
+      pageNum: 1,
+      pageSize: 20,
+      keyword: '',
+      currentUserId: 'u9'
+    })
+    assert.equal(q.status, 'submitted')
+    assert.equal(q.pendingApprovalUserId, 'u9')
+  })
+
+  it('approve accepted uses approvedByUserId', () => {
+    const q = buildQuoteListQuery({
+      mode: 'approve',
+      view: 'accepted',
+      pageNum: 1,
+      pageSize: 20,
+      keyword: 'x',
+      currentUserId: 'u9'
+    })
+    assert.equal(q.approvedByUserId, 'u9')
+    assert.equal(q.keyword, 'x')
+    assert.equal('status' in q && q.status !== undefined, false)
+  })
+})
+
+describe('buildQuoteCard', () => {
+  it('maps fields and money', () => {
+    const card = buildQuoteCard({
+      id: 'q1',
+      quoteNo: 'BJ001',
+      quoteTitle: '硫酸报价',
+      customerName: '甲公司',
+      quoteType: 'sales',
+      finalAmount: 1234.5,
+      status: 'draft',
+      quoteDate: '2026-10-01'
+    })
+    assert.equal(card.id, 'q1')
+    assert.equal(card.quoteNo, 'BJ001')
+    assert.equal(card.quoteTypeLabel, '销售')
+    assert.equal(card.quoteTypeTagType, 'success')
+    assert.equal(card.amountText, '¥1,234.50')
+    assert.equal(card.status, 'draft')
+  })
+})
+
+describe('quoteType helpers', () => {
+  it('maps purchase/sales', () => {
+    assert.equal(quoteTypeLabel('purchase'), '采购')
+    assert.equal(quoteTypeTagType('purchase'), 'warning')
+    assert.equal(quoteTypeLabel('sales'), '销售')
+    assert.equal(formatQuoteMoney(1000), '¥1,000.00')
+    assert.equal(formatQuoteMoney(undefined), '—')
+  })
+})
+```
+
+- [ ] **Step 2: 跑测确认失败**
+
+```bash
+cd web-admin && pnpm exec tsx --test src/utils/mp-crm-quote-card.test.ts
+```
+
+Expected: 无法解析 `./mp-crm-quote-card` 或 FAIL
+
+- [ ] **Step 3: 实现纯函数**
+
+```ts
+// web-admin/src/utils/mp-crm-quote-card.ts
+export type MpQuoteMode = 'manage' | 'approve'
+export type MpQuoteView = 'all' | 'submitted' | 'accepted'
+
+export const MP_QUOTE_MANAGE_TABS: Array<{ value: MpQuoteView; label: string }> = [
+  { value: 'all', label: '全部' },
+  { value: 'submitted', label: '待审批' },
+  { value: 'accepted', label: '已审批' }
+]
+
+export const MP_QUOTE_APPROVE_TABS: Array<{ value: Exclude<MpQuoteView, 'all'>; label: string }> = [
+  { value: 'submitted', label: '待审批' },
+  { value: 'accepted', label: '已审批' }
+]
+
+export function quoteTypeLabel(type?: string): string {
+  if ((type || '').trim() === 'purchase') return '采购'
+  return '销售'
+}
+
+export function quoteTypeTagType(type?: string): 'success' | 'warning' {
+  if ((type || '').trim() === 'purchase') return 'warning'
+  return 'success'
+}
+
+export function formatQuoteMoney(amount?: number | null): string {
+  if (amount === undefined || amount === null || Number.isNaN(Number(amount))) return '—'
+  return `¥${Number(amount).toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`
+}
+
+export function buildQuoteListQuery(input: {
+  mode: MpQuoteMode
+  view: MpQuoteView
+  pageNum: number
+  pageSize: number
+  keyword: string
+  currentUserId: string
+}): Record<string, unknown> {
+  const params: Record<string, unknown> = {
+    pageNum: input.pageNum,
+    pageSize: input.pageSize
+  }
+  const kw = String(input.keyword || '').trim()
+  if (kw) params.keyword = kw
+
+  if (input.mode === 'manage') {
+    if (input.view === 'all') {
+      params.excludeStatus = 'invalid'
+    } else if (input.view === 'submitted') {
+      params.status = 'submitted'
+    } else {
+      params.status = 'accepted'
+    }
+    return params
+  }
+
+  // approve
+  if (input.view === 'submitted') {
+    params.status = 'submitted'
+    params.pendingApprovalUserId = input.currentUserId
+  } else {
+    params.approvedByUserId = input.currentUserId
+  }
+  return params
+}
+
+export function buildQuoteCard(row: {
+  id: string | number
+  quoteNo?: string
+  quoteTitle?: string
+  customerName?: string
+  quoteType?: string
+  finalAmount?: number
+  totalAmount?: number
+  status?: string
+  quoteDate?: string
+}) {
+  const amount =
+    row.finalAmount !== undefined && row.finalAmount !== null
+      ? row.finalAmount
+      : row.totalAmount
+  return {
+    id: String(row.id),
+    quoteNo: row.quoteNo || '—',
+    quoteTitle: row.quoteTitle || '—',
+    customerName: row.customerName || '—',
+    quoteType: row.quoteType || 'sales',
+    quoteTypeLabel: quoteTypeLabel(row.quoteType),
+    quoteTypeTagType: quoteTypeTagType(row.quoteType),
+    amountText: formatQuoteMoney(amount),
+    status: row.status || '',
+    quoteDate: row.quoteDate || '—'
+  }
+}
+```
+
+状态 Tag 文案/类型在页面用 `dictStore.getLabel/getTagType('crm_quote_status', status)`（与桌面一致）；纯函数只保留 `status` 原值。
+
+- [ ] **Step 4: 跑测确认通过**
+
+```bash
+cd web-admin && pnpm exec tsx --test src/utils/mp-crm-quote-card.test.ts
+```
+
+Expected: 全部 pass
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web-admin/src/utils/mp-crm-quote-card.ts web-admin/src/utils/mp-crm-quote-card.test.ts
+git commit -m "$(cat <<'EOF'
+feat(web-admin): add mp CRM quote card query helpers.
+
+EOF
+)"
+```
+
+---
+
+### Task 2: 菜单 SQL（报价两叶子 + 角色补绑）
+
+**Files:**
+- Create: `docs/sql/migrations/2026-10-15-mini-crm-quote-webview-menus.sql`
+
+- [ ] **Step 1: 写入完整幂等 SQL**
+
+```sql
+-- 小程序：CRM管理 → 报价单管理 / 报价单审批（WebView）
+-- list 随 CRM3000000000000000000000000010 (crm:quote:list)
+-- approve 随 CRM3000000000000000000000000016 (crm:quote:approve)
+SET NAMES utf8mb4;
+
+INSERT INTO `sys_menu` (
+  `id`, `menu_name`, `parent_id`, `menu_type`, `path`, `component`, `perms`,
+  `is_frame`, `visible`, `status`, `tenant_no`, `order_num`, `remark`,
+  `create_by`, `create_dept_id`, `create_time`, `update_by`, `update_time`, `del_flag`
+)
+SELECT
+  'MINI_CRM_ROOT', 'CRM管理', '1', 'M', '/mini/crm', NULL, NULL,
+  1, '1', '1', 'shanxia2.0', 2, '小程序CRM管理',
+  'system', '', NOW(), NULL, NOW(), 0
+FROM DUAL
+WHERE NOT EXISTS (
+  SELECT 1 FROM `sys_menu` WHERE `id` = 'MINI_CRM_ROOT' AND `del_flag` = 0
+);
+
+INSERT INTO `sys_menu` (
+  `id`, `menu_name`, `parent_id`, `menu_type`, `path`, `component`, `perms`,
+  `is_frame`, `visible`, `status`, `tenant_no`, `order_num`, `remark`,
+  `create_by`, `create_dept_id`, `create_time`, `update_by`, `update_time`, `del_flag`
+)
+SELECT
+  'MINI_CRM_QUOTE', '报价单管理', 'MINI_CRM_ROOT', 'C', 'mp-webview', NULL,
+  'mini:crm:quote:list',
+  1, '1', '1', 'shanxia2.0', 2, '小程序 WebView CRM 报价单管理',
+  'system', '', NOW(), NULL, NOW(), 0
+FROM DUAL
+WHERE NOT EXISTS (
+  SELECT 1 FROM `sys_menu` WHERE `id` = 'MINI_CRM_QUOTE' AND `del_flag` = 0
+);
+
+INSERT INTO `sys_menu` (
+  `id`, `menu_name`, `parent_id`, `menu_type`, `path`, `component`, `perms`,
+  `is_frame`, `visible`, `status`, `tenant_no`, `order_num`, `remark`,
+  `create_by`, `create_dept_id`, `create_time`, `update_by`, `update_time`, `del_flag`
+)
+SELECT
+  'MINI_CRM_QUOTE_APPROVAL', '报价单审批', 'MINI_CRM_ROOT', 'C', 'mp-webview', NULL,
+  'mini:crm:quote:approve',
+  1, '1', '1', 'shanxia2.0', 3, '小程序 WebView CRM 报价单审批',
+  'system', '', NOW(), NULL, NOW(), 0
+FROM DUAL
+WHERE NOT EXISTS (
+  SELECT 1 FROM `sys_menu` WHERE `id` = 'MINI_CRM_QUOTE_APPROVAL' AND `del_flag` = 0
+);
+
+-- 有 Web 报价单管理权 → 补绑根 + CRM目录 + 报价单管理
+INSERT INTO `sys_role_menu` (
+  `id`, `role_id`, `menu_id`, `tenant_no`, `order_num`, `remark`,
+  `create_by`, `create_dept_id`, `create_time`, `update_by`, `update_time`, `del_flag`
+)
+SELECT
+  MD5(CONCAT(r.id, '|', m.menu_id, '|mini-crm-quote-webview|v1')),
+  r.id,
+  m.menu_id,
+  IFNULL(NULLIF(r.tenant_no, ''), 'shanxia2.0'),
+  0,
+  '小程序CRM报价单管理：随 Web crm:quote:list 补绑',
+  'system', '', NOW(), NULL, NOW(), 0
+FROM `sys_role` r
+JOIN `sys_role_menu` web
+  ON web.role_id = r.id
+ AND web.menu_id = 'CRM3000000000000000000000000010'
+ AND web.del_flag = 0
+JOIN (
+  SELECT '1' AS menu_id UNION ALL
+  SELECT 'MINI_CRM_ROOT' UNION ALL
+  SELECT 'MINI_CRM_QUOTE'
+) m
+WHERE r.del_flag = 0
+  AND NOT EXISTS (
+    SELECT 1 FROM `sys_role_menu` x
+    WHERE x.role_id = r.id AND x.menu_id = m.menu_id AND x.del_flag = 0
+  );
+
+-- 有 Web 报价单审批权 → 补绑根 + CRM目录 + 报价单审批
+INSERT INTO `sys_role_menu` (
+  `id`, `role_id`, `menu_id`, `tenant_no`, `order_num`, `remark`,
+  `create_by`, `create_dept_id`, `create_time`, `update_by`, `update_time`, `del_flag`
+)
+SELECT
+  MD5(CONCAT(r.id, '|', m.menu_id, '|mini-crm-quote-approval-webview|v1')),
+  r.id,
+  m.menu_id,
+  IFNULL(NULLIF(r.tenant_no, ''), 'shanxia2.0'),
+  0,
+  '小程序CRM报价单审批：随 Web crm:quote:approve 补绑',
+  'system', '', NOW(), NULL, NOW(), 0
+FROM `sys_role` r
+JOIN `sys_role_menu` web
+  ON web.role_id = r.id
+ AND web.menu_id = 'CRM3000000000000000000000000016'
+ AND web.del_flag = 0
+JOIN (
+  SELECT '1' AS menu_id UNION ALL
+  SELECT 'MINI_CRM_ROOT' UNION ALL
+  SELECT 'MINI_CRM_QUOTE_APPROVAL'
+) m
+WHERE r.del_flag = 0
+  AND NOT EXISTS (
+    SELECT 1 FROM `sys_role_menu` x
+    WHERE x.role_id = r.id AND x.menu_id = m.menu_id AND x.del_flag = 0
+  );
+```
+
+- [ ] **Step 2: Commit（本 Task 只交 SQL；测试库实施时执行）**
+
+```bash
+git add docs/sql/migrations/2026-10-15-mini-crm-quote-webview-menus.sql
+git commit -m "$(cat <<'EOF'
+docs(sql): add miniprogram CRM quote webview menus and role bind.
+
+EOF
+)"
+```
+
+---
+
+### Task 3: 静态路由 + 路径常量
+
+**Files:**
+- Modify: `web-admin/src/utils/mp-webview.ts`
+- Modify: `web-admin/src/router/routes/staticRoutes.ts`
+
+- [ ] **Step 1: 增加路径常量**
+
+在 `MP_CRM_PRODUCT_LIST_PATH` 旁增加：
+
+```ts
+export const MP_CRM_QUOTE_LIST_PATH = '/m/crm/quote'
+export const MP_CRM_QUOTE_APPROVAL_PATH = '/m/crm/quote/approval'
+```
+
+- [ ] **Step 2: 在 catch-all 之前注册路由（顺序固定）**
+
+插在 `/m/crm/product/:id` 与 `/:pathMatch(.*)*` 之间：
+
+```ts
+  {
+    path: '/m/crm/quote',
+    name: 'MpCrmQuoteList',
+    component: () => import('@views/m/crm/quote/index.vue'),
+    meta: { title: '报价单管理', isHideTab: true, isMpWebview: true }
+  },
+  {
+    path: '/m/crm/quote/approval',
+    name: 'MpCrmQuoteApproval',
+    component: () => import('@views/m/crm/quote/approval.vue'),
+    meta: { title: '报价单审批', isHideTab: true, isMpWebview: true }
+  },
+  {
+    path: '/m/crm/quote/new',
+    name: 'MpCrmQuoteNew',
+    component: () => import('@views/m/crm/quote/form.vue'),
+    meta: { title: '新增报价单', isHideTab: true, isMpWebview: true }
+  },
+  {
+    path: '/m/crm/quote/:id/edit',
+    name: 'MpCrmQuoteEdit',
+    component: () => import('@views/m/crm/quote/form.vue'),
+    meta: { title: '编辑报价单', isHideTab: true, isMpWebview: true }
+  },
+  {
+    path: '/m/crm/quote/:id/versions',
+    name: 'MpCrmQuoteVersions',
+    component: () => import('@views/m/crm/quote/versions.vue'),
+    meta: { title: '版本历史', isHideTab: true, isMpWebview: true }
+  },
+  {
+    path: '/m/crm/quote/:id',
+    name: 'MpCrmQuoteDetail',
+    component: () => import('@views/m/crm/quote/detail.vue'),
+    meta: { title: '报价单详情', isHideTab: true, isMpWebview: true }
+  },
+```
+
+本步可先建空壳 vue（仅 `MpWebviewShell` + 标题），后续 Task 填满；**不得**把路由放在 catch-all 之后。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add web-admin/src/utils/mp-webview.ts web-admin/src/router/routes/staticRoutes.ts \
+  web-admin/src/views/m/crm/quote/index.vue \
+  web-admin/src/views/m/crm/quote/approval.vue \
+  web-admin/src/views/m/crm/quote/form.vue \
+  web-admin/src/views/m/crm/quote/detail.vue \
+  web-admin/src/views/m/crm/quote/versions.vue
+git commit -m "$(cat <<'EOF'
+feat(web-admin): register /m/crm/quote static routes.
+
+EOF
+)"
+```
+
+---
+
+### Task 4: 共享列表 + 管理/审批入口页
+
+**Files:**
+- Create: `web-admin/src/views/m/crm/quote/MpQuoteList.vue`
+- Modify: `web-admin/src/views/m/crm/quote/index.vue`
+- Modify: `web-admin/src/views/m/crm/quote/approval.vue`
+
+对照：`web-admin/src/views/m/crm/product/index.vue`（Header / filter / card / speed-dial / `goToMiniWorkbench`）。
+
+- [ ] **Step 1: 实现 `MpQuoteList.vue`**
+
+Props：`mode: 'manage' | 'approve'`。
+
+关键行为：
+
+1. `MpWebviewShell @ready` 后再拉列表
+2. 当前用户 id：与桌面 `QuoteListPage` 的 `resolveCurrentUserId` 同源（查 user store；实现时打开该文件复制同一取值，勿猜字段名）
+3. `listQuote(buildQuoteListQuery({ mode, view, pageNum, pageSize, keyword, currentUserId }))`
+4. 解析 `res.list` / `res.rows` + `total`（与桌面 `getList` 一致）
+5. Tab：manage 用 `MP_QUOTE_MANAGE_TABS`（默认 `all`）；approve 用 `MP_QUOTE_APPROVE_TABS`（默认 `submitted`）；UI 可用 `mp-wv-filter-bar` 或横向 pill，样式对齐产品筛选
+6. 搜索 placeholder：`报价主题 / 客户 / 单号`；enter / 清除后 reload
+7. 卡片字段：`buildQuoteCard` + 状态 `el-tag`（`dictStore`）
+8. 点击详情：`router.push({ path: \`/m/crm/quote/${id}\`, query: { from: mode } })`
+9. manage 才有 Speed Dial「新增报价单」→ `/m/crm/quote/new`；approve **无** Speed Dial
+10. 返回：`goToMiniWorkbench()`（与产品列表相同）
+11. `import '@/styles/mp-webview.scss'`
+12. **不要**出现：多选、导出、facet、统计条、日期快捷、批量、分享、生成报价单
+
+卡片模板要点：
+
+```vue
+<article
+  v-for="card in cards"
+  :key="card.id"
+  class="mp-wv-card"
+  @click="goDetail(card.id)"
+>
+  <div class="mp-wv-card__title">{{ card.quoteTitle }}</div>
+  <div class="mp-wv-card__meta">{{ card.quoteNo }} · {{ card.customerName }}</div>
+  <div class="mp-wv-card__meta">{{ card.amountText }} · {{ card.quoteDate }}</div>
+  <div class="mp-wv-card__tags">
+    <el-tag :type="card.quoteTypeTagType" size="small">{{ card.quoteTypeLabel }}</el-tag>
+    <el-tag :type="statusTagType(card.status)" size="small">{{ statusLabel(card.status) }}</el-tag>
+  </div>
+</article>
+```
+
+分页：与产品页一致「加载更多」（`pageNum++`）。
+
+403 → `forbidden` 显示「无权限」。
+
+- [ ] **Step 2: 薄壳页**
+
+`index.vue`：
+
+```vue
+<template>
+  <MpQuoteList mode="manage" />
+</template>
+<script setup lang="ts">
+  import MpQuoteList from './MpQuoteList.vue'
+</script>
+```
+
+`approval.vue`：`mode="approve"`。
+
+- [ ] **Step 3: 本地验证**
+
+```bash
+cd web-admin && pnpm dev
+```
+
+打开 `/#/m/crm/quote`、`/#/m/crm/quote/approval`（桌面登录或 mp 调试），确认 Tab/搜索/卡片。
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add web-admin/src/views/m/crm/quote/MpQuoteList.vue \
+  web-admin/src/views/m/crm/quote/index.vue \
+  web-admin/src/views/m/crm/quote/approval.vue
+git commit -m "$(cat <<'EOF'
+feat(web-admin): add mp webview CRM quote list pages.
+
+EOF
+)"
+```
+
+---
+
+### Task 5: 详情页（管理动作 + 审批动作）
+
+**Files:**
+- Create/Modify: `web-admin/src/views/m/crm/quote/detail.vue`
+
+对照：`web-admin/src/views/m/crm/product/detail.vue`；字段与动作对齐 `QuoteDetailDialog.vue` + `crm/quote/detail.vue`（删除用 `canDeleteByCreator`）。
+
+- [ ] **Step 1: 实现详情加载与分区展示**
+
+1. `getQuote(id)`；必要时 `listQuoteProduct` / 详情已带 `productList`；`listApproval(id)` 展示审批流
+2. 分区：基础信息、金额/条款、产品明细（卡片或简易表）、审批流、备注附件（有则展示）
+3. `from`：`route.query.from === 'approve' ? 'approve' : 'manage'`
+4. 返回列表：`from===approve` → `MP_CRM_QUOTE_APPROVAL_PATH`，否则 `MP_CRM_QUOTE_LIST_PATH`
+5. 加载 skeleton 用运输计划/产品同款 class
+
+- [ ] **Step 2: 管理底栏（`from!==approve`）**
+
+按 spec §5.4 + `quoteStatus.ts`：
+
+| 条件 | 按钮 |
+|------|------|
+| `status==='draft'` | 提交审批（主色）、编辑、删除（`canDeleteByCreator`）、作废、复制新增、版本历史 |
+| `isQuoteEditableStatus` 且非 draft | 编辑（先 `getQuoteReeditConfirmMessage` 确认）、作废、复制新增、版本历史 |
+| `status==='invalid'` | 复制新增、版本历史 |
+| 始终禁止 | 生成报价单、分享、转合同、通过/驳回 |
+
+动作：
+
+- 编辑 → `/m/crm/quote/:id/edit`
+- 复制新增 → `/m/crm/quote/new?copyFrom=:id`
+- 版本历史 → `/m/crm/quote/:id/versions`
+- 删除 → 确认后 `delQuote([id])`，成功回管理列表
+- 作废 → 输入原因后 `invalidQuote(id, reason)`，成功刷新
+- 提交审批 → 打开 Bottom Sheet（见 Step 3）
+
+- [ ] **Step 3: 提交审批 Sheet（单条）**
+
+1. 打开时 `getQuoteApproverSetting()` 预填 `approverIds`（与桌面 submit 对话框同源字段）
+2. 审批人多选（有序：用 `el-select multiple` 或与桌面 `ApproverSelector` 一致的数据源——打开 `QuoteListPage` / `QuoteFormPanel` 看审批人列表从哪来，复用同一 API）
+3. 备注可选
+4. 确认 → `submitQuote({ ids: [id], approverIds, remark })`（以 `SubmitApprovalForm` 实际字段为准，打开 `types.ts` 核对，勿猜）
+5. 成功关闭 Sheet 并刷新详情
+
+- [ ] **Step 4: 审批底栏（`from===approve`）**
+
+1. 从 `listApproval` 判定当前用户是否有 `pending` 节点；有则显示通过/驳回
+2. 通过/驳回：结果 + 意见（驳回必填）；调用 `approveQuote`（字段对齐桌面 `ApprovalForm`）
+3. **不出现**编辑/提交/删除/作废/复制
+
+- [ ] **Step 5: 手工验证**
+
+草稿提交 → 审批页可见 → 通过/驳回；管理页无审批按钮。
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add web-admin/src/views/m/crm/quote/detail.vue
+git commit -m "$(cat <<'EOF'
+feat(web-admin): add mp webview CRM quote detail actions.
+
+EOF
+)"
+```
+
+---
+
+### Task 6: QuoteFormDialog `variant="page"` + form 路由壳
+
+**Files:**
+- Modify: `web-admin/src/views/crm/quote/components/QuoteFormDialog.vue`
+- Modify: `web-admin/src/views/crm/quote/components/QuoteFormPanel.vue`（page 布局）
+- Create/Modify: `web-admin/src/views/m/crm/quote/form.vue`
+
+对照：`ProductFormDialog` 的 `variant` / `isPageVariant`；`views/m/crm/product/form.vue`。
+
+- [ ] **Step 1: QuoteFormDialog 增加 variant（默认 dialog）**
+
+```ts
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    variant?: 'dialog' | 'page'
+    /** page 模式：add | edit | copy */
+    pageMode?: 'add' | 'edit' | 'copy'
+    quoteId?: string | number | null
+    copyFromId?: string | number | null
+  }>(),
+  { variant: 'dialog', modelValue: false, pageMode: 'add' }
+)
+const isPageVariant = computed(() => props.variant === 'page')
+```
+
+行为：
+
+- `dialog`：保持现有 `open` / `openEdit` / `openCopy` + `el-dialog`，桌面调用处不传 `variant`
+- `page`：不渲染 `el-dialog`；根为 `div.mp-quote-form-page`；内嵌 `QuoteFormPanel`；`onMounted`/`watch` 按 `pageMode` 调 `initNew` / `initEdit` / `initCopy`
+- page 底栏：取消（Close）/ 保存草稿（DocumentCopy）/ 提交审批（CircleCheck）——与桌面 footer 三按钮一致，调用 panel 同名方法；或若 panel 自带 footer（`hideFooter=false`）则 page 模式 `hideFooter=false` 并加 `mp-plan-form-footer` 样式覆盖
+- 成功 `@success`、关闭 `@close`；page 模式 `modelValue` 可恒 `true`
+
+- [ ] **Step 2: QuoteFormPanel page 视觉**
+
+当 `variant==='page'`（新增 prop，默认 `dialog`）：
+
+- 主表栅格改为单列（覆盖多列 grid）
+- 明细行改为移动端卡片编辑（禁止宽桌面表原样横向溢出；可横向滚动作为底线，优先卡片）
+- 使用三墙相关间距；**不要**改 dialog 默认布局
+
+若改动面过大：允许 page 模式先「单列 + 明细横向滚动」，但字段集合必须与桌面一致（全字段）。
+
+- [ ] **Step 3: form.vue 壳**
+
+```vue
+<template>
+  <MpWebviewShell>
+    <header class="mp-wv-header">
+      <div class="mp-wv-header__row">
+        <button class="mp-wv-header__back" type="button" @click="goBack">←</button>
+        <h1 class="mp-wv-header__title">{{ pageTitle }}</h1>
+      </div>
+    </header>
+    <QuoteFormDialog
+      variant="page"
+      :model-value="true"
+      :page-mode="pageMode"
+      :quote-id="quoteId"
+      :copy-from-id="copyFromId"
+      @success="onSuccess"
+      @close="goBack"
+    />
+  </MpWebviewShell>
+</template>
+```
+
+- `MpCrmQuoteNew` + `copyFrom` query → `pageMode='copy'`，`copyFromId`
+- `MpCrmQuoteNew` 无 copy → `pageMode='add'`
+- `MpCrmQuoteEdit` → `pageMode='edit'`，`quoteId=route.params.id`
+- 成功：优先进详情（若接口返回 id）；否则回 `MP_CRM_QUOTE_LIST_PATH`
+- `import '@/styles/mp-webview.scss'`
+
+- [ ] **Step 4: 验证全字段保存（含明细行）与复制新增**
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add web-admin/src/views/crm/quote/components/QuoteFormDialog.vue \
+  web-admin/src/views/crm/quote/components/QuoteFormPanel.vue \
+  web-admin/src/views/m/crm/quote/form.vue
+git commit -m "$(cat <<'EOF'
+feat(web-admin): add page variant for quote form in mp webview.
+
+EOF
+)"
+```
+
+---
+
+### Task 7: 版本历史只读页
+
+**Files:**
+- Create/Modify: `web-admin/src/views/m/crm/quote/versions.vue`
+
+对照：`VersionHistoryDialog.vue` 列表字段；**只做只读**（不做对比/恢复/复制为新版本/下载 PDF）。
+
+- [ ] **Step 1: 实现**
+
+1. 先 `getQuote(id)` 取 `quoteNo`，再 `queryVersions(quoteNo)`
+2. 时间线或卡片：版本号、状态 Tag、金额、日期、是否当前版本
+3. 「查看」→ `router.push({ path: \`/m/crm/quote/${version.id}\`, query: { from: 'manage' } })`（只读进详情即可）
+4. 返回：`router.push(\`/m/crm/quote/${route.params.id}\`)` 或 `router.back()`
+5. **不出现**下拉：对比 / 设为当前 / 复制为新版本 / 下载 PDF
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add web-admin/src/views/m/crm/quote/versions.vue
+git commit -m "$(cat <<'EOF'
+feat(web-admin): add mp webview CRM quote version history page.
+
+EOF
+)"
+```
+
+---
+
+### Task 8: 小程序工作台入口
+
+**Files:**
+- Modify: `miniprogram/config/workbench-menus.js`
+- Modify: `miniprogram/config/api.js`
+
+- [ ] **Step 1: CRM menus 增加两项**
+
+```js
+{
+  key: 'crm',
+  title: 'CRM 管理',
+  desc: '产品 · 报价',
+  iconText: 'CRM',
+  visible: true,
+  menus: [
+    {
+      name: '产品管理',
+      enabled: true,
+      code: 'crm-product-webview',
+      icon: '📦',
+      perms: 'mini:crm:product:list'
+    },
+    {
+      name: '报价单管理',
+      enabled: true,
+      code: 'crm-quote-webview',
+      icon: '📝',
+      perms: 'mini:crm:quote:list'
+    },
+    {
+      name: '报价单审批',
+      enabled: true,
+      code: 'crm-quote-approval-webview',
+      icon: '✅',
+      perms: 'mini:crm:quote:approve'
+    }
+  ]
+}
+```
+
+- [ ] **Step 2: WORKBENCH_ROUTE_MAP**
+
+```js
+'crm-product-webview':
+  PAGE_PATHS.mpWebview + '?path=' + encodeURIComponent('/m/crm/product'),
+'crm-quote-webview':
+  PAGE_PATHS.mpWebview + '?path=' + encodeURIComponent('/m/crm/quote'),
+'crm-quote-approval-webview':
+  PAGE_PATHS.mpWebview + '?path=' + encodeURIComponent('/m/crm/quote/approval')
+```
+
+禁止新建第二个 web-view 页。
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add miniprogram/config/workbench-menus.js miniprogram/config/api.js
+git commit -m "$(cat <<'EOF'
+feat(miniprogram): enable CRM quote webview workbench entries.
+
+EOF
+)"
+```
+
+---
+
+### Task 9: 接入文档 + 回归清单
+
+**Files:**
+- Modify: `docs/web-admin-mp-webview-modules.md`
+
+- [ ] **Step 1: 在「CRM 产品对照」后增加报价对照**
+
+```markdown
+## CRM 报价对照
+
+- 管理列表 `/m/crm/quote`，审批列表 `/m/crm/quote/approval`，详情 `/:id`，表单 `/new` `/:id/edit`，版本 `/:id/versions`
+- 工作台 code `crm-quote-webview` / `crm-quote-approval-webview`，perms `mini:crm:quote:list` / `mini:crm:quote:approve`
+- 业务 API：现有报价 list/detail/CRUD/submit/invalid/versions/approval；审批人设置仅 get 预填
+- 不做：分享、转合同、生成报价单/PDF、导出、批量提交/审批、审批人设置菜单
+```
+
+并将文首「已落地」句补上报价。
+
+- [ ] **Step 2: 回归（对照 spec §10）**
+
+在测试库执行 Task 2 SQL 后：
+
+1. 有 `crm:quote:list` 的角色：工作台见「报价单管理」；有 `crm:quote:approve` 见「报价单审批」
+2. 管理列表 Tab/搜索与桌面同账号数据合理一致；审批列表待审默认
+3. 新增草稿 → 详情提交审批（选手+备注）→ 审批入口单条通过/驳回
+4. 管理页无审批按钮；审批页无编辑/作废/提交
+5. 复制新增、作废、版本历史只读；再编辑确认文案
+6. 全字段表单（含明细）保存回显
+7. 401 回小程序；移动端无分享/转合同/PDF/导出/批量
+8. 桌面 `/#/crm/quote`、`/#/crm/quote/approval` 仍为 dialog 形态正常
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add docs/web-admin-mp-webview-modules.md
+git commit -m "$(cat <<'EOF'
+docs: document CRM quote as mp webview module.
+
+EOF
+)"
+```
+
+---
+
+## Spec 覆盖自检
+
+| Spec 项 | Task |
+|---------|------|
+| 嵌套 H5 / 复用壳 | 3–8（不改 ticket 协议） |
+| 管理闭环 B（含复制/作废/版本） | 4, 5, 6, 7 |
+| 双入口 + 单条审批 | 4, 5 |
+| 不做分享/转合同/PDF/导出/批量/审批人设置 | 4–7 禁止；Task 9 回归 |
+| 全字段表单 + page variant | 6 |
+| 提交时选手 + 预填默认人 | 5 Step 3 |
+| Tab + keyword | 1, 4 |
+| 三墙样式 | 4–7 `mp-webview.scss` |
+| 菜单 + 角色补绑 | 2 |
+| 工作台 + route map | 8 |
+| 双权限 | 2 + 8 + 现有 API |
+| 接入文档 | 9 |
+
+**占位符扫描：** 无 TBD；审批人列表数据源、`SubmitApprovalForm` 字段要求实现时打开现有桌面代码核对（已写明路径）。
+
+---
+
+## 执行说明
+
+实施前建议在隔离 worktree（`using-git-worktrees`）。每 Task 完成后跑对应单测/手工点，再 commit。后端无新接口；本地需能访问现有 CRM 报价 API。测试库执行菜单 SQL。