fix(web): conditional table scroll and fixed first column

web/src/utils/table.ts

@@ -1,22 +1,39 @@
-// 列表页表格的统一形态：固定表头（表内滚动）+ 横向滚动防挤压 + 分页。
-// - scroll.y 用 calc(100vh - offset) 让表格高度贴合一屏，表头表尾常驻，数据在表内滚动；
-//   offset 是页头（菜单行+PageContainer 标题/页头槽+卡片边框）与表格头行之外的高度估算值，
-//   估不准只会留下少量页面滚动，配合 sticky 兜底表头仍可见。
-// - sticky：当 offset 估算偏差或行高变化导致页面仍有滚动时，表头吸顶兜底。
-// - scroll.x + 操作列 fixed: 'right'：窗口窄时横向滚动，列内容不再被压缩折叠。
+// 列表页表格的统一形态：固定表头（表内滚动）+ 固定首列/操作列 + 横向滚动 + 分页。
+// 仅用 antd/rc-table 原生能力，不自定义滚动组件：
+// - scroll.y（表内滚动，固定表头）+ sticky（页面余量滚动时表头吸顶兜底）；
+//   antd 源码在 fixHeader 时固定 overflowY: 'scroll'（滚动条常驻，官方未提供按需开关），
+//   因此仅在「数据行超过一屏」时才开启 scroll.y，用 overflowGrid 判断：
+//   纵向 ≤ md（阈值 768，Grid.useBreakpoint 官方响应式 hook）→ 小屏数据必超一屏 → scroll.y + 首列固定；
+//   横向 ≥ xl（阈值 1280，布局含侧栏后仍够宽）→ 无挤压，不加 scroll.x/fixed 列/scroll.y；
+//   其余中等宽度 → scroll.x + fixed 首列/操作列，不设 scroll.y（无固定表头时滚动条自然按需出现）。
+// - scroll.x + 固定首列（fixed: 'left'）与操作列（fixed: 'right'）防挤压折叠。
 // - pageSize 20 + hideOnSinglePage：数据多时翻页，单页时隐藏分页条保持原视觉。
+import { Grid } from 'antd';
 import type { ColumnsType, ColumnType } from 'antd/es/table';
 
 export const TABLE_PAGE_SIZE = 20;
 
-export function tableScroll(x: number, offset = 300) {
-  return { x, y: `calc(100vh - ${offset}px)` };
+// antd Table 内容超出视口高度时，浏览器才需要纵向滚动；
+// 这里用「数据行数 × 行高」与视口比较，决定是否需要表内滚动（固定表头）。
+export function useOverflowGrid(rowCount: number) {
+  const screens = Grid.useBreakpoint();
+  const vertical = rowCount * 48 + 120 >= window.innerHeight - 300 || !screens.md;
+  const horizontal = !screens.xl;
+  return { vertical, horizontal };
+}
+
+export function tableScroll(x: number | undefined, y: string | undefined) {
+  return { x, y };
 }
 
 export function tablePagination() {
   return { pageSize: TABLE_PAGE_SIZE, hideOnSinglePage: true };
 }
 
+export function fixedLeft<RecordType>(column: ColumnType<RecordType>): ColumnType<RecordType> {
+  return { ...column, fixed: 'left' as const };
+}
+
 export function fixedRight<RecordType>(column: ColumnType<RecordType>): ColumnType<RecordType> {
   return { ...column, fixed: 'right' as const };
 }