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

web/src/components/accounts/AccountManagementList.tsx

@@ -8,7 +8,7 @@ import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import { remove, creatorUpdate, creatorGet } from '@/services/api';
 import { conflictMessage, dateTime } from '@/utils/helpers';
-import { fixedRight, tablePagination, tableScroll } from '@/utils/table';
+import { fixedLeft, fixedRight, tablePagination, tableScroll, useOverflowGrid } from '@/utils/table';
 
 // 仅用 antd 默认组件：Table/Tag/Modal/Popconfirm/Select(tags)。
 interface Row {
@@ -31,6 +31,7 @@ export default function AccountManagementList() {
   const [tagBusy, setTagBusy] = useState(false);
   const [actionBusy, setActionBusy] = useState('');
   const { message: messageApi } = App.useApp();
+  const { vertical, horizontal } = useOverflowGrid(rows.length);
 
   const load = useCallback(async () => {
     setPending(true);
@@ -92,6 +93,7 @@ export default function AccountManagementList() {
     {
       title: '账号',
       dataIndex: 'name',
+      ...fixedLeft<Row>({}),
       render: (_, account) => (
         <div>
           <Typography.Link onClick={() => history.push(`/accounts/${account.id}`)}>{account.name}</Typography.Link>
@@ -173,7 +175,7 @@ export default function AccountManagementList() {
         loading={pending}
         sticky
         pagination={tablePagination()}
-        scroll={tableScroll(960)}
+        scroll={tableScroll(horizontal ? 960 : undefined, vertical ? 'calc(100vh - 300px)' : undefined)}
         locale={{ emptyText: '暂无自有账号。' }}
       />
       <Modal

web/src/components/accounts/MonitoringAccountList.tsx

@@ -6,7 +6,7 @@ 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 { fixedRight, tablePagination, tableScroll } from '@/utils/table';
+import { fixedLeft, fixedRight, tablePagination, tableScroll, useOverflowGrid } from '@/utils/table';
 
 interface CompetitorRow {
   id: string;
@@ -45,6 +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 load = useCallback(async () => {
     setPending(true);
@@ -130,6 +131,7 @@ export default function MonitoringAccountList() {
     {
       title: '账号',
       dataIndex: 'nickname',
+      ...fixedLeft<CompetitorRow>({}),
       render: (_, account) => (
         <Flex align="center" gap={12}>
           <Avatar size={40} shape="square" src={account.avatar_url || undefined}>{(account.nickname || '账').slice(0, 1).toUpperCase()}</Avatar>
@@ -223,7 +225,7 @@ export default function MonitoringAccountList() {
         sticky
         pagination={tablePagination()}
         locale={{ emptyText: '暂无监控账号。' }}
-        scroll={tableScroll(1100)}
+        scroll={tableScroll(horizontal ? 1100 : undefined, vertical ? 'calc(100vh - 300px)' : undefined)}
       />
       <Modal
         open={Boolean(tagTarget)}