提交

openspec/changes/zkxw-engineering-standards/specs/ui-conventions/spec.md

@@ -266,7 +266,7 @@ Web 管理端弹窗 SHALL 遵循规范：表单 `label-position="top"`；遮罩
 3. **条件按钮场景**：当操作列按钮随状态/Tab 变化（如待确认 Tab 显示「确认收款」，已确认 Tab 显示「查看确认信息」），`@row-dblclick` handler SHALL 仅在「查看」类按钮可见时触发对应查看函数，其余状态下可忽略或调用对应主操作函数。
 4. **弹窗组件**：查看弹窗 SHALL 优先使用 `SystemViewDialog`（`web-admin/src/components/business/system-view-dialog/index.vue`）；样式对齐 Hero 渐变头图 + 分区 KV 信息区 + 底部「关闭」按钮（详见下文「查看弹窗 KV 布局与组件选型」）。KV 信息区 SHALL 使用 `ViewKvGrid`（上下堆叠栅格）或 `ViewKvTable`（多组多列表格）；**SHALL NOT** 使用 `el-descriptions` 或历史 `.dlg-kv` 布局承载列表行查看详情。
 5. **字段内容**：查看弹窗 SHALL 展示该行记录的所有业务字段（含状态映射、字典翻译），不展示 `id`、`del_flag` 等技术字段；KV 跨列/换行规则见「查看弹窗 KV 布局与组件选型」。
-6. **区块标题样式**：查看弹窗中各区块标题（如 `SystemViewDialog` 的 section title、`bx` 模块 `.dlg-view-section-title`，渲染为 `h3`/`h4`）SHALL 与字段标签形成明显视觉区分。区块标题 SHALL 使用深色文字（`#1e293b`）配合左侧主色竖条装饰（`border-left: 3px solid #10b981`），字号 14px、`font-weight: 600`；字段标签 SHALL 为 11px、`#64748b`、`font-weight: 400`（由 `ViewKvGrid` 的 `dt` 或 `ViewKvTable` 的 `th` 统一渲染）。区块标题样式 SHALL NOT 与字段标签使用相同颜色或相近字重。
+6. **区块标题样式**：查看弹窗中各区块标题（如 `SystemViewDialog` 的 section title、`bx` 模块 `.dlg-view-section-title`，渲染为 `h3`/`h4`）SHALL 与字段标签形成明显视觉区分。区块标题 SHALL 使用深色文字（`#1e293b`）配合左侧主色竖条装饰（`border-left: 3px solid #10b981`），字号 14px、`font-weight: 600`；字段标签 SHALL 为 13px、`#64748b`、`font-weight: 400`（由 `ViewKvGrid` 的 `dt` 或 `ViewKvTable` 的 `th` 统一渲染）。区块标题样式 SHALL NOT 与字段标签使用相同颜色或相近字重。
 
 #### Scenario: 新增系统管理列表页
 
@@ -315,12 +315,25 @@ Web 管理端弹窗 SHALL 遵循规范：表单 `label-position="top"`；遮罩
 - 多组多列表格 **SHALL** 在 **`1040px`** 弹窗内使用；少字段（≤8）可选用 **`720px`～`920px`**（见 Demo Q/R）。
 - `bx` 模块 `.dialog-view-xl` 宽度 **SHALL** 与上述一致（`min(1040px, calc(100vw - 32px))`）。
 
+#### 2.5 查看弹窗 KV 字号（14px / 13px 模式）
+
+查看弹窗内所有 KV 信息区 **SHALL** 统一采用 **value 14px / label 13px** 字号模式，与全站列表正文（14px）对齐，label 略小一级以区分层级：
+
+| 元素 | 字号 | 字重 | 说明 |
+|------|------|------|------|
+| **value**（`ViewKvGrid` 的 `dd`、`ViewKvTable` 的 `td`） | **14px** | 600 | 字段值正文 |
+| **label**（`ViewKvGrid` 的 `dt`、`ViewKvTable` 的 `th`、`.view-field-label`） | **13px** | 400（表格 `th` 可为 500） | 字段名 / 次级分组标签 |
+
+- 实现权威来源：`ViewKvGrid.vue`、`ViewKvTable.vue`，以及 `app.scss` 内 `:is(.view-kv, [class*='-view-kv'], .pl-plan-kv)` 全局规则。
+- `SystemViewDialog` 的 **`compact`** 模式 **SHALL** 降为 value **13px** / label **12px**，以保持紧凑弹窗内的层级差。
+- **SHALL NOT** 在业务页对 KV 单元单独覆写为其它字号（除上述 compact 降级外）。
+
 #### 3. KV 单元格结构（上下堆叠栅格）
 
 每个字段渲染为 `<dl>` 内的 `.view-kv` 单元：
 
-- **dt（label）**：上，11px，`#64748b`，`font-weight: 400`
-- **dd（value）**：下，13px，`font-weight: 600`，`word-break: break-word`
+- **dt（label）**：上，13px，`#64748b`，`font-weight: 400`
+- **dd（value）**：下，14px，`font-weight: 600`，`word-break: break-word`
 - **SHALL NOT** 在同一 grid cell 内使用左右并排的 label|value（历史 `el-descriptions` / `.dlg-kv .k/.v` 模式）
 
 #### 4. 四列栅格跨列规则
@@ -357,6 +370,7 @@ interface ViewField {
 - 空值 **SHALL** 展示为 `—`（`formatViewValue`）。
 - 字典/状态 **SHALL** 预先翻译为 label 并视情况设 `tagType`（见「查看弹窗中编码字段展示为可读标签」「状态、结论与类型字段使用 Tag 标签展示」）。
 - 金额 **SHALL** 设 `money: true` 并使用 `¥` 前缀（见「价格字段展示规范」）。
+- **`long: false`**：显式禁用 `view-field-layout.ts` 自动长值检测；**SHALL** 用于 `ViewKvTable` 的 **quad compact** section（见 §8「紧凑八列模式」），避免字段因值 ≥17 字被拆成单行一组。
 
 #### 6. 弹窗骨架（SystemViewDialog）
 
@@ -372,38 +386,50 @@ interface ViewField {
 
 | 模块 | 工具 | 用途 |
 |------|------|------|
-| CRM | `web-admin/src/utils/crm/view-fields.ts` | `crmField` / `crmLongField` / `crmDictField` / `crmTagField` 构建 `ViewField` |
+| CRM | `web-admin/src/utils/crm/view-fields.ts` | `crmField` / `crmLongField` / `crmDictField` / `crmTagField` 构建 `ViewField`；宽表「基本信息」八列 compact 见各 `*DetailDialog` 内 `viewQuadTableSection`（如 `QuoteDetailDialog.vue`） |
 | 报销 bx | `web-admin/src/utils/bx/view-kv.ts` | `bxViewKv` / `bxViewKvLong` / `bxViewKvMoney` |
 
 #### 8. KV 表格模式（多组多列）
 
-当业务选用**多组多列表格**展示 KV 时，**SHALL** 使用 `ViewKvTable`（或 `BxViewKvTable`），数据源仍为 `ViewField[]`；跨行/长值逻辑 **SHALL** 复用 `web-admin/src/utils/view-field-layout.ts`（`isViewFieldLong` / `isViewFieldFullSpan` / `buildViewKvTableDualRows` / `buildViewKvTableTripleRows`）。
+当业务选用**多组多列表格**展示 KV 时，**SHALL** 使用 `ViewKvTable`（或 `BxViewKvTable`），数据源仍为 `ViewField[]`；跨行/长值逻辑 **SHALL** 复用 `web-admin/src/utils/view-field-layout.ts`（`isViewFieldLong` / `isViewFieldFullSpan` / `buildViewKvTableDualRows` / `buildViewKvTableTripleRows` / `buildViewKvTableQuadRows`）。
 
-**模式（`mode` prop）**
+**模式（`mode` prop / `ViewSection.tableMode`）**
 
 | mode | 每行组数 | 列结构 | 典型场景 |
 |------|----------|--------|----------|
 | `pair` | **1 组** | `th` + `td`（两列） | 少字段、需逐行阅读；Demo **Q** |
 | `dual` | **2 组** | `th` + `td` × 2（四列） | 中等字段量；Demo **N** / **R** |
 | `triple` | **3 组** | `th` + `td` × 3（六列） | 少字段高密度；Demo 扩展；参考 `bx/advance/apply` 基础信息 |
+| `quad` | **4 组** | `th` + `td` × 4（**八列**） | 宽弹窗（≥1680px 或 1040px+）、字段较多且需表格对齐；CRM 报价单/合同「基本信息」等 |
 
 **行分组规则**
 
-- 短字段 **SHALL** 按 mode 尽可能填满一行（`dual` 最多 2 组、`triple` 最多 3 组）；末行不足时 **SHALL** 留空 `th`/`td` 占位，**SHALL NOT** 强行与长字段同组。
-- 长值 / 整行字段（`long` / `fullSpan` 或 `view-field-layout.ts` 自动检测）**SHALL** 独占整行：`pair` 为单行 `th`+`td`；`dual` 为 `td colspan="3"`；`triple` 为 `td colspan="5"`。
-- 字段顺序 **SHOULD** 将长文本（申请原因、备注等）置于数组末尾，以便短字段先组成完整多组行。
+- 短字段 **SHALL** 按 mode 尽可能填满一行（`dual` 最多 2 组、`triple` 最多 3 组、`quad` 最多 4 组）；末行不足时 **SHALL** 留空 `th`/`td` 占位，**SHALL NOT** 强行与长字段同组。
+- 长值 / 整行字段（`long` / `fullSpan` 或 `view-field-layout.ts` 自动检测：显示文本 ≥17 字、含 ` / ` 路径、label 匹配备注/地址/说明等）**SHALL** 独占整行：`pair` 为单行 `th`+`td`；`dual` 为 `td colspan="3"`；`triple` 为 `td colspan="5"`；`quad` 为 `td colspan="7"`。
+- 字段顺序 **SHOULD** 将长文本（申请原因、备注等）置于数组末尾，以便短字段先组成完整多组行；**备注、条款等超长文本 SHOULD 独立 section**，与「基本信息」分区展示。
+
+**紧凑八列模式（quad compact）**
+
+当 section 选用 **`quad`（八列）** 且业务要求**每行尽量排满 4 组**（不因字段值略长而拆成「一行仅 1 组」）时：
+
+1. **SHALL** 在 `SystemViewDialog` 的 `ViewSection` 上设置 `fieldLayout: 'table'`、`tableMode: 'quad'`。
+2. **SHALL** 对该 section 内所有常规短字段统一设置 `long: false`、`fullSpan: false`，以禁用 `view-field-layout.ts` 的自动长值拆行；较长内容 **SHALL** 在 `td` 内换行展示（`ViewKvTable` 已支持 `word-break`），**SHALL NOT** 为此单独占整行。
+3. **SHALL NOT** 在「基本信息」等 quad compact section 内混入 `long: true` / `span: true` / `fullSpan: true` 字段；若确需整行展示，**SHALL** 拆至独立 section（如「报价条款」「备注」）。
+4. 推荐封装：在 `*DetailDialog` 内提供辅助函数，对传入 `ViewField[]` 映射 `{ ...field, long: false, fullSpan: false }` 后返回 `ViewSection`；参考 `web-admin/src/views/crm/quote/components/QuoteDetailDialog.vue` 的 `viewQuadTableSection`。
+5. 宽表弹窗宽度 **SHOULD** 与八列密度匹配（如报价单查看 `1680px`）；字段数量 **SHOULD** 为 4 的倍数或接受末行留空占位。
 
 **表格样式（Fresh Mint）**
 
 - 外层 **SHALL** 使用 `.view-kv-table-wrap`（圆角 8px、边框 `#d9e8e2`）。
-- 表头单元格 **`th`（label）**：背景 `var(--table-head)`，11px、`#64748b`；**SHALL** 支持换行（`white-space: normal`、`word-break: break-word`、`overflow-wrap: anywhere`），**SHALL NOT** 使用 `white-space: nowrap` 导致长 label（如「实际发放金额（元）」）溢出。
-- 数据单元格 **`td`（value）**：13px、`font-weight: 600`；金额 **SHALL** 使用 `.money-display`；状态/类型 **SHALL** 使用 `el-tag`（`ViewKvTableCell`）。
-- `triple` 模式 label 列宽约 **10%**、value 列宽约 **23.33%**（三组合计六列）；具体比例以 `ViewKvTable.vue` 为准。
+- 表头单元格 **`th`（label）**：背景 `var(--table-head)`，13px、`#64748b`；**SHALL** 支持换行（`white-space: normal`、`word-break: break-word`、`overflow-wrap: anywhere`），**SHALL NOT** 使用 `white-space: nowrap` 导致长 label（如「实际发放金额（元）」）溢出。
+- 数据单元格 **`td`（value）**：14px、`font-weight: 600`；金额 **SHALL** 使用 `.money-display`；状态/类型 **SHALL** 使用 `el-tag`（`ViewKvTableCell`）。
+- `triple` 模式 label 列宽约 **10%**、value 列宽约 **23.33%**（三组合计六列）；`quad` 模式 label 列宽约 **8%**、value 列宽约 **17%**（四组合计八列）；具体比例以 `ViewKvTable.vue` 为准。
 
 **选型建议**
 
 - 字段 **≤8** 且弹窗显空 → 优先 **`pair`** 或 **`triple`** + 适当缩窄弹窗宽度。
 - 字段 **9～18** 且需表格感 → 优先 **`dual`**（1040px）。
+- 字段 **≥12** 且宽弹窗（报价单、合同等）→ 优先 **`quad` compact**（见上「紧凑八列模式」）；「基本信息」**SHALL** 每行排满 4 组，**SHALL NOT** 因报价主题、客户名称等值略长而逐字段独占一行。
 - 同一弹窗内 **SHALL NOT** 混用 `ViewKvGrid` 与 `ViewKvTable` 于**同一 section**；不同 section 可按需分别选用（如「基础信息」用表格、「扩展信息」用栅格）。
 
 #### 9. 禁止与废弃
@@ -433,6 +459,15 @@ interface ViewField {
 - **THEN** 长 label SHALL 在 `th` 内换行展示，**SHALL NOT** 溢出列宽
 - **THEN** 参考实现：`web-admin/src/views/bx/advance/apply/index.vue`（`mode="triple"`）
 
+#### Scenario: CRM 报价单查看弹窗（紧凑八列基本信息）
+
+- **WHEN** 在 CRM 报价单管理（`/#/crm/quote`）打开【查看】弹窗，且「基本信息」section 采用八列表格
+- **THEN** SHALL 使用 `SystemViewDialog` + `fieldLayout: 'table'` + `tableMode: 'quad'`
+- **THEN** 「基本信息」内各字段 SHALL 设置 `long: false`、`fullSpan: false`，使每行排满 4 组（八列）；末行不足 4 组时留空占位
+- **THEN** 较长字段值（报价主题、客户名称、有效期等）SHALL 在单元格内换行，**SHALL NOT** 单独占整行
+- **THEN** 备注、条款等长文本 SHALL 置于独立 section（如「报价条款」），**SHALL NOT** 与基本信息混在同一 quad section
+- **THEN** 参考实现：`web-admin/src/views/crm/quote/components/QuoteDetailDialog.vue`（`viewQuadTableSection`）
+
 #### Scenario: 长文本与备注字段
 
 - **WHEN** 查看弹窗包含申请原因、备注、条款等长文本
@@ -445,7 +480,7 @@ interface ViewField {
 - **THEN** 审查者 SHALL 确认 KV 区为 `ViewKvGrid`（上下堆叠 + 声明的 `gridColumns`）或 `ViewKvTable`（多组多列 + 声明的 `mode`）
 - **THEN** SHALL 确认未使用 `el-descriptions` / `.dlg-kv` / 手写 KV `<table>` 作为主体字段区
 - **THEN** 状态/金额/字典字段 SHALL 符合 Tag、`money`、字典翻译等关联 Requirement
-- **THEN** 若使用 `ViewKvTable`，SHALL 确认长 label 可换行、长 value 独占整行
+- **THEN** 若使用 `ViewKvTable`，SHALL 确认长 label 可换行、长 value 在 compact quad section 内换行而非误拆行；非 compact section 中长 value 可独占整行
 
 ### Requirement: 查看弹窗中编码字段展示为可读标签