workspace/code/fms/.workbuddy/memory/2026-09-06.md

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 均通过。