优化菜单管理页表格自适应高度与固定表头

Co-authored-by: multica-agent <github@multica.ai>
2026-05-01 19:36:50 +08:00
parent 730ef3b0e3
commit 0728cf7edf
2 changed files with 109 additions and 19 deletions
@@ -218,6 +218,34 @@
    - `GET /api/v1/users` 新增查询参数：
      - `keyword`：按 `user_id/email/username` 模糊检索
      - `status`：按启用/禁用状态过滤
+
+## Work Log - 菜单管理页面表格高度自适应与固定表头（2026-05-01）
+
+- 背景：
+  - Issue `FL-142` 需要菜单管理页面表格高度随页面自适应，纵向滚动条仅出现在表格内部，并保持表头固定。
+
+- 本次改动（最小闭环）：
+  - 文件：`web/src/app/admin/menus/page.tsx`
+    - 新增动态高度状态与锚点：
+      - `tableScrollY`、`tableScrollAnchorRef`
+      - 常量 `MENU_TABLE_MIN_SCROLL_Y`、`MENU_TABLE_BOTTOM_RESERVE`
+    - 新增 `updateTableScrollY()`：
+      - 基于表格锚点 `getBoundingClientRect().top` 和 `window.innerHeight` 计算可用高度
+      - 对高度变化做 2px 阈值抑制，避免频繁抖动重渲染
+    - 新增监听：
+      - `window.resize` 触发重算
+      - `ResizeObserver` 监听锚点尺寸变化（筛选区换行、布局变化）触发重算
+    - 表格滚动改造：
+      - `scroll` 从 `{ x: 1200 }` 调整为 `{ x: 1200, y: tableScrollY }`
+      - 让纵向滚动收敛到表格体内，并由 AntD 自动固定表头
+
+- 验证：
+  - 未执行编译/测试（按任务约束：不做编译检查、不安装依赖）。
+  - 代码检查确认改动仅涉及菜单管理页单文件逻辑。
+
+- 风险与影响：
+  - 影响范围仅 `web/src/app/admin/menus/page.tsx` 的表格渲染高度计算逻辑。
+  - 极端小视口下表格最小高度受 `MENU_TABLE_MIN_SCROLL_Y=220` 限制，避免表格区域塌陷。
  - 后端用户服务增强：
    - 文件：`api/app/services/user_service.py`
    - `list_users(...)` 支持 `keyword/status` 条件查询并对 `total` 同步计数。