提交

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

@@ -261,6 +261,25 @@ Web 管理端弹窗 SHALL 遵循规范：表单 `label-position="top"`；遮罩
 - **WHEN** PR 新增列表页或弹窗中包含排序字段
 - **THEN** 审查者 SHALL 确认产品需求中有明确排序要求，否则 SHALL 要求移除
 
+### Requirement: 筛选区关键词字段排第一
+
+`web-admin` 列表页筛选区（`.filter-block` 内 `.filter-grid`）若包含**关键词**模糊检索字段（`label` 为「关键词」或等效语义、`el-input` 绑定 `keyword` 等），该字段 SHALL 作为 `.filter-grid` 中**第一个** `el-form-item`，位于下拉筛选、状态筛选、日期范围等条件字段之前。落地参考：`#/demo/unit`、`#/demo/user` 及质检模块「入库放行审核」页。
+
+#### Scenario: 新增含关键词的列表页
+
+- **WHEN** 在列表页筛选区同时提供关键词输入与下拉/日期等筛选条件
+- **THEN** 「关键词」对应的 `el-form-item` SHALL 位于 `.filter-grid` 首位
+
+#### Scenario: 入库放行审核筛选区
+
+- **WHEN** 用户打开质检模块「入库放行审核」列表页
+- **THEN** 筛选区 `.filter-grid` 中第一个字段 SHALL 为「关键词」，其后依次为协议类别、审核结论、入库状态等条件
+
+#### Scenario: Code review 筛选区字段顺序
+
+- **WHEN** PR 新增或修改列表页 `.filter-block` 筛选字段
+- **THEN** 审查者 SHALL 确认存在关键词字段时其位于 `.filter-grid` 第一位
+
 ### Requirement: 附件上传卡片化布局
 
 `web-admin` 弹窗表单中的附件上传与展示 SHALL 采用**卡片化布局**，实现与交互以 `web-admin/src/views/cell-storage/protocol/ProtocolFormDialog.vue` 中「协议附件」为权威参考；储存证等业务弹窗（如 `web-admin/src/views/cell-storage/storage-cert/index.vue`）SHALL 复用同一套 DOM 结构、类名与样式规则，仅调整 `el-form-item` 的 `label` 与上传 `folder` 等业务参数。
@@ -655,3 +674,30 @@ const viewSections = computed<ViewSection[]>(() => [
 - **WHEN** PR 修改列表页或查看弹窗中的状态/结论/类型字段展示
 - **THEN** 审查者 SHALL 确认使用 `<el-tag>` 组件（表格列）或 `tagType` 属性（SystemViewDialog），SHALL NOT 出现纯文本状态展示或自定义 `<span class="tag">`
 
+### Requirement: 嵌套弹窗与子弹窗内列表风格一致
+
+`web-admin` 中所有界面（含主列表页、编辑弹窗、查看弹窗、子弹窗、侧栏详情面板等）内的 `el-table` 列表 SHALL 与标准列表页（如 `#/demo/unit`、`#/demo/order`）保持一致的表格视觉规格，**不得**因处于弹窗或嵌套区域而缩小字号、压缩行高或改用 `size="small"` 等紧凑样式。
+
+具体规则：
+
+1. **字号与行高**：表格正文 SHALL 使用规范默认 **14px** 字号与标准行高（与 `.list-table` / 主列表一致）；SHALL NOT 为弹窗内表格单独设置更小 `font-size` 或通过 `size="small"` / `size="mini"` 缩小表格。
+2. **表格类名**：业务列表（含弹窗内嵌列表）SHALL 使用 `.list-table`（可与 `.inner-table` 等场景类叠加），以复用全局表格 Token 与行高，而非在 scoped 样式中覆盖为紧凑尺寸。
+3. **只读查看**：查看详情、任务详情等只读场景中的子列表 SHALL 以纯文本/Tag 展示数据，SHALL NOT 保留可编辑控件；同时 SHALL NOT 隐藏操作列后改用更小表格尺寸补偿空间。
+4. **高度**：弹窗内列表可通过 `height` / `max-height` 控制可视区域高度以便滚动，但 SHALL NOT 以缩小字体或行高换取更多行展示。
+
+#### Scenario: 任务详情弹窗内嵌列表
+
+- **WHEN** 用户在生产任务「查看详情」弹窗中查看原材料、产出或步骤详情中的试剂/耗材等子列表
+- **THEN** 表格字号与行高 SHALL 与主列表页一致（14px 标准规格）
+- **THEN** 只读模式下 SHALL NOT 显示添加、删除等编辑操作按钮
+
+#### Scenario: 新增弹窗内嵌业务列表
+
+- **WHEN** 在 `el-dialog` 或子弹窗中新增 `el-table` 展示业务数据
+- **THEN** 实现 SHALL 使用 `.list-table` 且 SHALL NOT 设置 `size="small"` 或自定义更小字号/行高以适配弹窗
+
+#### Scenario: Code review 弹窗内表格
+
+- **WHEN** PR 在弹窗、侧栏详情或嵌套面板中新增或修改 `el-table`
+- **THEN** 审查者 SHALL 确认未使用 `size="small"` / 紧凑字号覆盖，且列表风格与主列表页一致
+