fix(web): use page scrolling for all tables

2026-10-06 14:15:34 +08:00
parent 881afb6203
commit 3d668769f6
8 changed files with 117 additions and 77 deletions
@@ -10,7 +10,7 @@ import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import { remove, creatorUpdate, creatorGet, creatorAction } from '@/services/api';
 import { accountReadiness, conflictMessage, dateTime } from '@/utils/helpers';
-import { fixedLeft, fixedRight, tablePagination, useOverflowGrid } from '@/utils/table';
+import { fixedLeft, fixedRight, tablePagination } from '@/utils/table';
 import AccountLoginModal from '@/components/accounts/AccountLoginModal';
 import AccountCreateModal from '@/components/accounts/AccountCreateModal';

@@ -70,7 +70,6 @@ export default function AccountManagementList() {
  const [actionBusy, setActionBusy] = useState('');
  const [loginTarget, setLoginTarget] = useState<Row | null>(null);
  const { message: messageApi } = App.useApp();
-  const { vertical } = useOverflowGrid(rows.length);

  const load = useCallback(async () => {
    setPending(true);
@@ -336,7 +335,7 @@ export default function AccountManagementList() {
        loading={pending}
        sticky
        pagination={tablePagination()}
-        scroll={{ x: 'max-content', y: vertical ? 'calc(100vh - 300px)' : undefined }}
+        scroll={{ x: 'max-content' }}
        locale={{ emptyText: '暂无账号或待登录环境。' }}
      />
      <Modal
@@ -1,12 +1,12 @@
 // 监控账号列表：表格呈现账号画像、作品数据与同步状态。
 import { useCallback, useEffect, useState } from 'react';
 import { history } from '@umijs/max';
-import { Alert, App, Avatar, Button, Card, Flex, Form, Modal, Popconfirm, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
+import { Alert, App, Avatar, Button, Card, Flex, Form, Grid, Modal, Popconfirm, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { CloudUploadOutlined, ReloadOutlined } from '@ant-design/icons';
 import { getList, remove, creatorAction, creatorUpdate } from '@/services/api';
 import { conflictMessage, dateTime } from '@/utils/helpers';
-import { fixedLeft, fixedRight, tablePagination, tableScroll, useOverflowGrid } from '@/utils/table';
+import { fixedLeft, fixedRight, tablePagination } from '@/utils/table';

 interface CompetitorRow {
  id: string;
@@ -45,7 +45,7 @@ export default function MonitoringAccountList() {
  const [tagBusy, setTagBusy] = useState(false);
  const [actionBusy, setActionBusy] = useState('');
  const { message: messageApi } = App.useApp();
-  const { vertical, horizontal } = useOverflowGrid(rows.length);
+  const horizontal = !Grid.useBreakpoint().xl;

  const load = useCallback(async () => {
    setPending(true);
@@ -230,7 +230,7 @@ export default function MonitoringAccountList() {
        sticky
        pagination={tablePagination()}
        locale={{ emptyText: '暂无监控账号。' }}
-        scroll={tableScroll(horizontal ? 1100 : undefined, vertical ? 'calc(100vh - 300px)' : undefined)}
+        scroll={{ x: horizontal ? 1100 : undefined }}
      />
      <Modal
        open={Boolean(tagTarget)}
@@ -1,11 +1,11 @@
 // 账号导入：语义对齐 web.archived AccountImportPage（分享链接解析任务列表 + 新建导入任务 Modal）。
 import { useCallback, useEffect, useState } from 'react';
-import { Alert, App, Avatar, Button, Card, Flex, Form, Input, Modal, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
+import { Alert, App, Avatar, Button, Card, Flex, Form, Grid, Input, Modal, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
 import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import { create, getList, creatorAction } from '@/services/api';
 import { conflictMessage, dateTime, extractShareURL, platformForShareURL, platformLabel, shareJobStatus } from '@/utils/helpers';
-import { fixedLeft, fixedRight, tablePagination, tableScroll, useOverflowGrid } from '@/utils/table';
+import { fixedLeft, fixedRight, tablePagination } from '@/utils/table';

 interface Job {
  id: string;
@@ -34,7 +34,7 @@ export default function Page() {
  const [busy, setBusy] = useState(false);
  const [retryID, setRetryID] = useState<string | null>(null);
  const { message: messageApi } = App.useApp();
-  const { vertical, horizontal } = useOverflowGrid(jobs.length);
+  const horizontal = !Grid.useBreakpoint().xl;

  const loadShareJobs = useCallback(async () => {
    setPending(true);
@@ -188,7 +188,7 @@ export default function Page() {
      {error ? (
        <Alert type="error" showIcon style={{ marginBottom: 16 }} title={error.message} action={<Button size="small" onClick={loadShareJobs}>重试</Button>} />
      ) : null}
-      <Table rowKey="id" columns={columns} dataSource={jobs} loading={pending} sticky pagination={tablePagination()} scroll={tableScroll(horizontal ? 1000 : undefined, vertical ? 'calc(100vh - 300px)' : undefined)} locale={{ emptyText: '暂无分享链接解析任务。' }} />
+      <Table rowKey="id" columns={columns} dataSource={jobs} loading={pending} sticky pagination={tablePagination()} scroll={{ x: horizontal ? 1000 : undefined }} locale={{ emptyText: '暂无分享链接解析任务。' }} />
      <Modal open={createOpen} title="创建账号导入任务" onCancel={closeCreate} onOk={createJob} confirmLoading={busy} okText={busy ? '加入中…' : '加入解析队列'} width={560}>
        <Form form={form} layout="vertical">
          <Form.Item name="shareText" label="分享内容或链接" required extra="可直接粘贴平台分享文案，系统会自动提取其中的链接并识别作者。">
@@ -1,11 +1,11 @@
 // 网关管理：语义对齐 web.archived GatewaysPage.jsx（注册/编辑 Modal、令牌显隐复制、删除）。
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Alert, App, Button, Card, Flex, Form, Input, Modal, Popconfirm, Space, Table, Tag, Tooltip, Typography } from 'antd';
+import { Alert, App, Button, Card, Flex, Form, Grid, Input, Modal, Popconfirm, Space, Table, Tag, Tooltip, Typography } from 'antd';
 import { CopyOutlined, EyeInvisibleOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import { create, getList, remove, update } from '@/services/api';
 import { conflictMessage, dateTime } from '@/utils/helpers';
-import { fixedLeft, fixedRight, tablePagination, tableScroll, useOverflowGrid } from '@/utils/table';
+import { fixedLeft, fixedRight, tablePagination } from '@/utils/table';

 const namePattern = /^[A-Za-z0-9][A-Za-z0-9._-]{0,63}$/;
 const tokenPattern = /^[A-Za-z0-9][A-Za-z0-9._-]{15,127}$/;
@@ -95,7 +95,7 @@ export default function Page() {
  const [busy, setBusy] = useState('');
  const [created, setCreated] = useState<any>(null);
  const { message: messageApi } = App.useApp();
-  const { vertical, horizontal } = useOverflowGrid(gateways.length);
+  const horizontal = !Grid.useBreakpoint().xl;
  const healthReloadTimer = useRef<ReturnType<typeof setTimeout>>(undefined);

  const load = useCallback(async () => {
@@ -234,7 +234,7 @@ export default function Page() {
      {error ? (
        <Alert type="error" showIcon style={{ marginBottom: 16 }} title={error.message} action={<Button size="small" onClick={load}>重试</Button>} />
      ) : null}
-      <Table rowKey="name" columns={columns} dataSource={gateways} loading={pending} sticky pagination={tablePagination()} scroll={tableScroll(horizontal ? 960 : undefined, vertical ? 'calc(100vh - 300px)' : undefined)} locale={{ emptyText: '暂无网关；注册后环境即可调度到该网关。' }} />
+      <Table rowKey="name" columns={columns} dataSource={gateways} loading={pending} sticky pagination={tablePagination()} scroll={{ x: horizontal ? 960 : undefined }} locale={{ emptyText: '暂无网关；注册后环境即可调度到该网关。' }} />
      <GatewayFormModal
        open={createOpen}
        initial={null}
@@ -1,12 +1,12 @@
 // 网络出口：语义对齐 web.archived NetworkExitsPage.jsx（列表 + 创建/编辑 Modal + 检测/启停/删除动作 + 出口详情页）。
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { history } from '@umijs/max';
-import { Alert, App, Button, Card, Flex, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Table, Tag, Typography } from 'antd';
+import { Alert, App, Button, Card, Flex, Form, Grid, Input, InputNumber, Modal, Popconfirm, Select, Space, Table, Tag, Typography } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import { create, getOne, getList, networkExitAction, remove, update } from '@/services/api';
 import { conflictMessage, dateTime } from '@/utils/helpers';
-import { fixedLeft, fixedRight, tablePagination, tableScroll, useOverflowGrid } from '@/utils/table';
+import { fixedLeft, fixedRight, tablePagination } from '@/utils/table';

 const healthText: Record<string, string> = {
  unchecked: '未检测',
@@ -113,7 +113,7 @@ export default function Page() {
  const [editing, setEditing] = useState<any | null>(null);
  const [busy, setBusy] = useState('');
  const { message: messageApi } = App.useApp();
-  const { vertical, horizontal } = useOverflowGrid(exits.length);
+  const horizontal = !Grid.useBreakpoint().xl;

  const load = useCallback(async () => {
    setPending(true);
@@ -306,7 +306,7 @@ export default function Page() {
        loading={pending}
        sticky
        pagination={tablePagination()}
-        scroll={tableScroll(horizontal ? 1100 : undefined, vertical ? 'calc(100vh - 300px)' : undefined)}
+        scroll={{ x: horizontal ? 1100 : undefined }}
        locale={{ emptyText: '暂无网络出口。创建并检测健康后，才能绑定运行环境。' }}
      />
      <ExitFormModal
@@ -1,31 +1,9 @@
-// 列表页表格的统一形态：固定表头（表内滚动）+ 固定首列/操作列 + 横向滚动 + 分页。
-// 仅用 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';
+// 列表表格使用页面纵向滚动与 sticky 表头吸顶，不设置表内纵向滚动。
+// 保留横向滚动、固定首列/操作列与分页（每页 20 条，单页隐藏分页条）。
 import type { ColumnsType, ColumnType } from 'antd/es/table';

 export const TABLE_PAGE_SIZE = 20;

-// 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 };
 }