# 2026-09-06

## fms-vue dashboard 列表页布局重构：改为分层白卡 + 灰缝

背景：`src/views/dashboard/index.vue` 原为「单张白卡 + 内部 4 条 border-bottom 硬切分区」，
违反 `layouts/DefaultLayout.vue` 注释里定下的约定（分层白卡 + 卡间留灰缝，不用 border 画分隔线）。
另外 search-area / preview-bar / list-footer 三处同刷 `--fms-table-header-bg`，底色分层失效。

改动：
- 页面根 `.dashboard-page` 去掉白卡样式，改为 `flex column + gap: 8px`（灰缝）承载两张卡
- 卡片 1 `.filter-card`：筛选 / 操作区（方案 A 搜索条 + 高级搜索面板；方案 B 操作栏 + 浮层）
- 卡片 2 `.table-card`：操作栏（仅方案 A）+ 表格 + 分页，`flex:1 + min-height:320px` 内部滚动；
  min-height 兜底，高级搜索展开挤压空间时由 `.fms-content` 纵向滚动，避免表格被压扁
- 删除常驻 40px 的 `preview-bar` 调试条；两种布局方案改由 URL query 控制：`?layout=popover`
  （layoutMode 由 ref 改为可写 computed，读写路由 query）
- 删除全部 `border-bottom` 分隔线与 3 处 `--fms-table-header-bg` 灰底
- 留白改由各区块自身承担（search-bar / action-bar / advanced-panel），卡片不再设 padding，
  避免方案 B 下操作栏 padding 与卡片 padding 叠加
- 表格区 padding 14px → 16px，与其它区块对齐

验证：oxlint 0 warning 0 error；用 `vue/compiler-sfc` 跑 parse + compileScript + compileTemplate 通过。

未处理（本次用户只要求改布局结构，已在回复中列出）：
- 分页器与表格未联动：dataSource 恒 1w 行全量渲染，切页无反应
- `min-width: 1040px` + `overflow: hidden`，窄屏内容被裁且无法横向滚动
- quick-search 固定 320px + space-between，中间大片留白
- 方案 A / B 两套模板重复 quick-search 与 advanced-grid 代码块，未抽组件

## dashboard 列表页布局：第二轮讨论 + 清空重建

定位拍板：dashboard = **列表布局样板**（不是工作台），后续 `FmsModuleListPage` 跟进它的结构；
本轮只动 dashboard，业务页下一轮再说。

纵向预算（1366×768，浏览器可视高约 640px，实测值：顶栏 40 / 页签 40 / 控制高 28 /
表格行高 30 / 表头 34）：扣完顶栏+页签+padding，**页面可用 544px**。其中分页 44 +
操作栏 48 + gap 8 必须留，表格保底 8 行需 274 → **筛选区（含标签行）总预算仅 170px**。

关键结论（推翻了「平铺 vs grid 是主要矛盾」的第一轮判断）：
- 平铺式与 grid 式只差约 1 行（40px），是次要矛盾；真正的分水岭是
  **挤压 vs 浮层，差 140px（约 4 行表格）**
- 用户确认填条件时**需要同时看表格** → 方案 B（popover 浮层）出局
- 因此设计目标改为：展开态下表格仍保证 7~8 行可见、分页条不被滚走

三条硬约束：
1. **列密度决定行数**——平铺式真正的价值不是「少点击」，而是同样宽度塞更多字段、
   从而同样高度少换行。现状 grid `minmax(240px,1fr)` 在 1040px 下只有 **3 列**，
   12 个条件要 4 行超预算；按字段类型给宽度（select 120 / text 160 / date-range 235）
   可排到 **5 列**、12 项压进 3 行
2. **展开后不另起底部操作条**（demo.html 的 `.expanded-actions` 占 48px，近 1/3 预算）；
   查询/重置/展开按钮贴首行右侧
3. **溢出时滚动的是筛选区，不是整页**——现状 `.table-card` 的 `min-height:320px`
   把挤压转成 `.fms-content` 整页滚动，分页条被滚走，违背「边调边看」前提。
   原则：**筛选区可以委屈，表格和分页不能**

遗留待定：「常用条件」从哪来（查询字段来自 `s_field_query` 后台配置，前端写死不了），
候选：按 `b_xh` 取前 N / 配置加常用标记 / 记住用户上次展开的条件。

改动：按用户要求**删除 dashboard 中除表格外的全部代码**——查询区（queryItems /
quick-search / 高级搜索 / 已选标签）、操作栏、分页、A/B 两套布局与 `?layout=popover`
URL 切换、相关 import 与样式全部移除，只保留 columns / dataSource / rowClassName +
一张白卡承载 FmsTable。文件 591 → 139 行。
验证：oxlint 0 warning 0 error；`vue/compiler-sfc` parse + compileScript +
compileTemplate + compileStyle 均通过。