docs: 新增/编辑询价单已选商品独立 Tab 设计规格

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

docs/superpowers/specs/2026-08-05-web-admin-inquiry-form-selected-products-tab-design.md

@@ -0,0 +1,157 @@
+# Web-Admin 新增/编辑询价单「已选商品」独立 Tab 设计
+
+> 日期：2026-08-05  
+> 页面：`web-admin` → `#/inquiry/manage`（询价报价管理）  
+> 已确认口径：方案 **1**（标题/备注在 Tabs 外 + 两 Tab）+ 已选表「移除」+「清空已选」+ **新增与编辑同一弹窗一并改**  
+> 关联：详情弹窗已按同思路改造（`2026-08-05-web-admin-inquiry-detail-selected-products-tab-design.md`）
+
+## 1. 背景与问题
+
+### 1.1 现状
+
+- 「新增询价单 / 编辑询价单」共用 `inquiryFormVisible` 弹窗（`web-admin/src/views/system/inquiry-quotation/index.vue`）。
+- 「询价商品」区内有可关闭标签云（`picker-selected` + `closable` tag +「清空已选」），商品多时纵向占位大。
+- 与已完成的「询价单详情」Tab 改造不一致：详情已无标签云，表单仍有。
+
+### 1.2 目标
+
+- 新增/编辑弹窗默认「选品」首屏不被已选标签云撑高。
+- 「已选商品」独立 Tab，表格展示，支持搜索、逐条移除、清空已选。
+- 与详情弹窗信息架构对齐；不改后端接口。
+
+### 1.3 非目标
+
+- 不改报价明细、确认定价等其他弹窗。
+- 不新增 API、不改表结构。
+- 不引入已选 Tab 分页/虚拟列表（沿用全量 `pickerSelectedIds`）。
+- 不改变选品区卡片/列表勾选、全选/全部不选、双击看详情等既有行为。
+
+---
+
+## 2. 已确认决策
+
+| 项 | 选择 |
+|----|------|
+| 范围 | **A**：新增 + 编辑同一弹窗统一改 |
+| 布局 | **方案 1**：询价标题、备注在 Tabs **外**；默认 Tab = 选品 |
+| 已选交互 | **A**：表格操作列「移除」+ 保留「清空已选」 |
+| 已选展示 | 表格（列对齐选品 list 模式，另加操作列） |
+| 搜索 | 选品搜索与已选 Tab 搜索 **互相独立** |
+
+---
+
+## 3. 方案对比（回顾）
+
+| 方案 | 说明 | 结论 |
+|------|------|------|
+| **1 标题/备注外置 + 两 Tab** | 选品 / 已选商品；已选表格可移除+清空 | **采用** |
+| 2 标题放进选品 Tab | 切到已选看不到标题，校验体验差 | 不采用 |
+| 3 仅折叠标签云 | 展开后仍占空间 | 不采用 |
+
+---
+
+## 4. 界面与行为设计
+
+### 4.1 布局
+
+```
+[新增/编辑询价单 Dialog]
+  el-form
+    询价标题（prop=title）
+    备注（textarea，Tabs 外）
+    el-form-item 询价商品（prop=productIds）
+      el-tabs（默认 pick）
+        ├─ 选品
+        │    搜索 + 分类树 + 卡片/列表勾选（无 picker-selected 标签云）
+        └─ 已选商品
+             工具栏：数量文案 + 搜索 + 清空已选
+             表格（含操作「移除」）
+  Footer：已选 N 个 | 取消 / 确定
+```
+
+备注放在 Tabs **上方、与标题同级**（均在 Tabs 外），打开任一 Tab 均可看到并编辑；表单校验失败时用户无需切 Tab 找字段。
+
+### 4.2 选品 Tab
+
+- 保留现有：`picker-search-row`、分类树、右侧卡片/列表、`selection`、全选/全部不选、双击 `openPickerProductView`。
+- **移除**本弹窗内的 `picker-selected` 标签云整块。
+- 右侧标题仍显示「已选 N 个」（`pickerSelectedIds.length`）。
+
+### 4.3 已选商品 Tab
+
+- 数据：由 `pickerSelectedIds` 映射 `selectedProductMap` 得到行列表（缺 map 时至少展示 id）。
+- 工具栏：
+  - 无已生效关键词：「共 N 个」；有关键词：「共 M / N 个」。
+  - 名称搜索（输入框 + 搜索按钮 + 回车）；按商品名称 includes（trim + 小写），与详情已选 Tab 规则一致。
+  - 「清空已选」：`pickerSelectedIds = []`（或等价现有逻辑），需与选品区勾选状态同步（沿用现有清空行为）。
+- 表格列：序号、图片、商品名称、分类、计量、单位、规格、商品描述、**操作（移除）**。
+- 移除：调用现有 `removeSelected(pid)`。
+- 空态：`el-empty`（如「未选择商品」）。
+- 双击行：`openPickerProductView(row)`（若 row 含完整商品字段；否则用 id 打开）。
+- 本 Tab **不**提供卡片/列表切换。
+
+### 4.4 打开 / 关闭
+
+打开新增或编辑时：
+
+- 表单 Tab 重置为「选品」
+- 已选 Tab 关键词清空
+- 其余仍按现有：`pickerSelectedIds` 与 `inquiryForm.productIds` 对齐等逻辑不变
+
+`destroy-on-close` 下关闭后状态随下次打开重建。
+
+### 4.5 校验
+
+- `productIds` 仍由提交前把 `pickerSelectedIds` 同步到 `inquiryForm.productIds`（现有逻辑）；Tabs 不改变校验规则。
+- Footer「已选 N 个」始终反映 `pickerSelectedIds.length`。
+
+---
+
+## 5. 实现要点（前端）
+
+### 5.1 文件
+
+- 仅改：`web-admin/src/views/system/inquiry-quotation/index.vue`
+
+### 5.2 新增状态（建议命名）
+
+| 变量 | 类型 | 默认 | 用途 |
+|------|------|------|------|
+| `inquiryFormDetailTab` | `'pick' \| 'selected'` | `'pick'` | 表单弹窗当前 Tab（避免与详情 `viewInquiryDetailTab` 冲突） |
+| `formSelectedTabKeyword` | `string` | `''` | 已选 Tab 输入 |
+| `formSelectedTabAppliedKeyword` | `string` | `''` | 已选 Tab 已生效关键词 |
+
+### 5.3 计算属性 / 方法
+
+- `formSelectedTabProducts`：按 `pickerSelectedIds` + `selectedProductMap` 组装行，再按已生效关键词过滤名称。
+- `applyFormSelectedTabSearch()`：trim 写入已生效关键词。
+- 复用：`removeSelected`、清空 `pickerSelectedIds`、现有格式化函数。
+
+### 5.4 样式
+
+- 复用详情侧 `.view-inquiry-tabs` / `.view-selected-tab*` 或抽同一 class（如 `inquiry-form-tabs`），保持 Fresh Mint，不大改视觉。
+
+### 5.5 明确不改
+
+- 后端与 `fetchInquiryDetail` / create/update API 契约。
+- 询价单**详情**弹窗（已按前序 spec 改造）。
+- 报价相关弹窗。
+
+---
+
+## 6. 验收标准
+
+1. 打开新增或编辑（商品很多时），默认「选品」，无大段已选标签云。
+2. 「已选商品」为表格；可搜索；操作可移除单条；「清空已选」可用且选品区勾选同步。
+3. 选品区勾选/取消后，已选 Tab 列表即时反映。
+4. 标题、备注始终可见可编辑；校验与提交成功路径与改前一致。
+5. 详情弹窗行为不被本次改动破坏。
+6. Footer「已选 N 个」正确。
+
+---
+
+## 7. 风险与备注
+
+- `selectedProductMap` 若缺少个别 id，表格仍应展示该行（名称回退为 id），避免「已选但看不见」。
+- UI 文案简体中文：Tab「选品」「已选商品」。
+- 与详情 Tab 文案略异（详情为「概览」）：表单侧用「选品」更贴切勾选场景。