修复菜单表格高度偏大导致页面纵向滚动

Co-authored-by: multica-agent <github@multica.ai>
2026-05-01 19:53:16 +08:00
parent 9e68a91941
commit fafd9fb52c
2 changed files with 48 additions and 12 deletions
@@ -246,6 +246,33 @@
 - 风险与影响：
  - 影响范围仅 `web/src/app/admin/menus/page.tsx` 的表格渲染高度计算逻辑。
  - 极端小视口下表格最小高度受 `MENU_TABLE_MIN_SCROLL_Y=220` 限制，避免表格区域塌陷。
+
+## Work Log - 菜单管理页表格高度二次修复（2026-05-01）
+
+- 背景：
+  - 用户反馈菜单管理页“表格高度还是太高，页面出现了纵向滚动条”。
+  - 原实现使用固定底部预留常量估算 `scroll.y`，在部分视口和分页高度组合下仍可能偏大。
+
+- 本次改动（最小闭环）：
+  - 文件：`web/src/app/admin/menus/page.tsx`
+    - 高度计算改为“实时测量”：
+      - 读取 `.ant-table-wrapper` 与 `.ant-table-body` 的真实高度，动态计算 `nonBodyHeight`（表头/分页等非表体高度）。
+      - 以 `window.innerHeight - anchorTop - topGap - nonBodyHeight - viewportGap` 反推 `scroll.y`，避免固定常量误差。
+    - 兜底策略：
+      - 保留 `MENU_TABLE_FALLBACK_RESERVE` 作为初始/异常场景的回退计算。
+      - 最小高度下限调整为 `MENU_TABLE_MIN_SCROLL_Y=180`，减少小屏溢出概率。
+    - 渲染细节：
+      - 表格顶部间距从 `Table className mt-4` 调整到锚点容器 `className=\"mt-4\"`，避免 margin 参与高度计算时产生偏差。
+    - 触发重算条件补充：
+      - 在 `filteredMenus.length`、`loading` 变化时同步重算，覆盖分页和筛选引发的高度变化。
+
+- 验证：
+  - 未执行编译/测试（按任务约束：不做编译检查、不安装依赖）。
+  - 代码检查确认改动仅涉及菜单页面单文件高度计算逻辑。
+
+- 风险与影响：
+  - 影响范围仅 `web/src/app/admin/menus/page.tsx`。
+  - 新逻辑依赖 AntD 现有 DOM 类名（`.ant-table-wrapper` / `.ant-table-body`）；若后续升级 AntD 结构变化，需要同步调整选择器。
  - 后端用户服务增强：
    - 文件：`api/app/services/user_service.py`
    - `list_users(...)` 支持 `keyword/status` 条件查询并对 `total` 同步计数。