diff --git a/web/frontend/src/pages/DouyuTasksPage.tsx b/web/frontend/src/pages/DouyuTasksPage.tsx index 9dfc3b3..693c81b 100644 --- a/web/frontend/src/pages/DouyuTasksPage.tsx +++ b/web/frontend/src/pages/DouyuTasksPage.tsx @@ -254,6 +254,8 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind }) const [accountSearch, setAccountSearch] = useState(''); const taskRecordAreaRef = useRef(null); const [taskRecordAreaHeight, setTaskRecordAreaHeight] = useState(360); + const accountTableAreaRef = useRef(null); + const [accountTableAreaHeight, setAccountTableAreaHeight] = useState(360); const [importOpen, setImportOpen] = useState(false); const [importPool, setImportPool] = useState([]); @@ -385,20 +387,29 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind }) useEffect(() => { loadData(); }, [loadData]); - // 监听任务记录区域高度变化,动态计算 scroll.y 实现表体内部滚动 + // 监听任务记录/账号表格区域高度变化,动态计算 scroll.y 实现表体内部滚动 useEffect(() => { - const node = taskRecordAreaRef.current; - if (!node) return; - const updateHeight = () => { - setTaskRecordAreaHeight(Math.max(200, Math.floor(node.getBoundingClientRect().height))); + const updateNode = ( + node: HTMLDivElement | null, + setter: (v: number) => void, + ) => { + if (!node) return; + setter(Math.max(200, Math.floor(node.getBoundingClientRect().height))); }; - updateHeight(); + const taskNode = taskRecordAreaRef.current; + const accountNode = accountTableAreaRef.current; + const updateHeights = () => { + updateNode(taskNode, setTaskRecordAreaHeight); + updateNode(accountNode, setAccountTableAreaHeight); + }; + updateHeights(); if (typeof ResizeObserver === 'undefined') { - window.addEventListener('resize', updateHeight); - return () => window.removeEventListener('resize', updateHeight); + window.addEventListener('resize', updateHeights); + return () => window.removeEventListener('resize', updateHeights); } - const observer = new ResizeObserver(updateHeight); - observer.observe(node); + const observer = new ResizeObserver(updateHeights); + if (taskNode) observer.observe(taskNode); + if (accountNode) observer.observe(accountNode); return () => observer.disconnect(); }, []); @@ -1207,24 +1218,28 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind }) )} - setSelectedIds(keys.map(Number)), - }} - columns={accountColumns} - dataSource={filteredAccounts} - pagination={{ pageSize: 15, showSizeChanger: false, size: 'small', showLessItems: true }} - onRow={(record) => ({ - onContextMenu: (e) => handleRowContextMenu(record, e), - style: { cursor: 'context-menu' }, - title: '右键打开账号动作', - })} - /> +
+
setSelectedIds(keys.map(Number)), + }} + columns={accountColumns} + dataSource={filteredAccounts} + pagination={{ pageSize: 15, showSizeChanger: false, size: 'small', showLessItems: true }} + tableLayout="fixed" + scroll={{ y: Math.max(120, accountTableAreaHeight - 80) }} + onRow={(record) => ({ + onContextMenu: (e) => handleRowContextMenu(record, e), + style: { cursor: 'context-menu' }, + title: '右键打开账号动作', + })} + /> +