20260906214757

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

@@ -0,0 +1,63 @@
+# 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 均通过。