跳转至

ISSUE-0081:DataGrid 底部分页器被裁掉看不见

现象(用户截图 v0.10.119)

切到「数据 → 官网列表 / 邮箱列表」tab 时,看不到底部分页器。 没有页码、没有"跳至 N 页"、没有"X 条/页"选择器。

根因 — v0.10.117 修嵌套滚动的副作用

修 ISSUE-0078 时把外层 Box 从 overflow:'auto' 改成 'hidden'

<Box sx={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>  {/* v0.10.117 改的 */}
  {tab === 'website' && tableContainer(
    <ClientDataTable ... />
  )}
</Box>

tableContainer固定 height

const tableH = Math.max(360, windowHeight - 240);
const tableContainer = (children) => (
  <Box sx={{ height: tableH, mx: 1.5, mt: 1 }}>{children}</Box>
);

问题: 1. 外层 flex:1 实际高度可能 < tableH(小窗口 / 任务栏顶部高) 2. tableContainer 固定 tableH → 超出外层 3. 外层 overflow:'hidden' → 超出部分被裁 4. DataGrid 底部的分页器正好在裁切区

修复(v0.10.120)

const tableContainer = (children) => (
  <Box sx={{
    height: '100%',                              // 跟随 flex:1 自适应
    mx: 1.5, mt: 1,
    display: 'flex', flexDirection: 'column'    // 让 DataGrid flex grow
  }}>
    {children}
  </Box>
);

不再依赖 windowHeight 算固定值,跟随 flex 容器实际高度。DataGrid 自动 fit 父容器 + 保留分页器底部。

教训

  • 改 layout 时要测各种窗口高度:windowHeight - 240 在小窗口 / 低分辨率会负数
  • flex 布局优于固定 height:父容器决定高度,子组件 100% 跟随
  • 同 layout family bug 第 5 次(ISSUE-0007/0020/0069/0078/0081)— 但 v0.10.119 scan:nested-scroll 已加自动检测,下次能拦
  • 这是修 ISSUE-0078 的回归 — 「同时跑 dogfood + 多窗口尺寸测试」该列入 sinking checklist