fix: 修复账号列表表格高度在不同分辨率下翻页按钮被裁剪问题

账号表格缺少 scroll.y 导致表体按内容自然撑开,低分辨率下
15 行内容超出容器,底部分页器被裁掉。改用 ResizeObserver
动态监听容器高度并计算 scroll.y,与任务记录表格共用同一个
observer,表体内部滚动、分页器固定底部,适配所有分辨率。
This commit is contained in:
yml2213
2026-08-01 10:55:23 +08:00
parent 2756613eeb
commit dbf78b825c
+43 -28
View File
@@ -254,6 +254,8 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
const [accountSearch, setAccountSearch] = useState(''); const [accountSearch, setAccountSearch] = useState('');
const taskRecordAreaRef = useRef<HTMLDivElement | null>(null); const taskRecordAreaRef = useRef<HTMLDivElement | null>(null);
const [taskRecordAreaHeight, setTaskRecordAreaHeight] = useState(360); const [taskRecordAreaHeight, setTaskRecordAreaHeight] = useState(360);
const accountTableAreaRef = useRef<HTMLDivElement | null>(null);
const [accountTableAreaHeight, setAccountTableAreaHeight] = useState(360);
const [importOpen, setImportOpen] = useState(false); const [importOpen, setImportOpen] = useState(false);
const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]); const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]);
@@ -385,20 +387,29 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
useEffect(() => { loadData(); }, [loadData]); useEffect(() => { loadData(); }, [loadData]);
// 监听任务记录区域高度变化,动态计算 scroll.y 实现表体内部滚动 // 监听任务记录/账号表格区域高度变化,动态计算 scroll.y 实现表体内部滚动
useEffect(() => { useEffect(() => {
const node = taskRecordAreaRef.current; const updateNode = (
if (!node) return; node: HTMLDivElement | null,
const updateHeight = () => { setter: (v: number) => void,
setTaskRecordAreaHeight(Math.max(200, Math.floor(node.getBoundingClientRect().height))); ) => {
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') { if (typeof ResizeObserver === 'undefined') {
window.addEventListener('resize', updateHeight); window.addEventListener('resize', updateHeights);
return () => window.removeEventListener('resize', updateHeight); return () => window.removeEventListener('resize', updateHeights);
} }
const observer = new ResizeObserver(updateHeight); const observer = new ResizeObserver(updateHeights);
observer.observe(node); if (taskNode) observer.observe(taskNode);
if (accountNode) observer.observe(accountNode);
return () => observer.disconnect(); return () => observer.disconnect();
}, []); }, []);
@@ -1207,24 +1218,28 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
)} )}
</Space> </Space>
</Space> </Space>
<Table <div ref={accountTableAreaRef} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
rowKey="id" <Table
size="small" rowKey="id"
className="douyu-task-record-table" size="small"
loading={loading} className="douyu-task-record-table"
rowSelection={{ loading={loading}
selectedRowKeys: selectedIds, rowSelection={{
onChange: (keys) => setSelectedIds(keys.map(Number)), selectedRowKeys: selectedIds,
}} onChange: (keys) => setSelectedIds(keys.map(Number)),
columns={accountColumns} }}
dataSource={filteredAccounts} columns={accountColumns}
pagination={{ pageSize: 15, showSizeChanger: false, size: 'small', showLessItems: true }} dataSource={filteredAccounts}
onRow={(record) => ({ pagination={{ pageSize: 15, showSizeChanger: false, size: 'small', showLessItems: true }}
onContextMenu: (e) => handleRowContextMenu(record, e), tableLayout="fixed"
style: { cursor: 'context-menu' }, scroll={{ y: Math.max(120, accountTableAreaHeight - 80) }}
title: '右键打开账号动作', onRow={(record) => ({
})} onContextMenu: (e) => handleRowContextMenu(record, e),
/> style: { cursor: 'context-menu' },
title: '右键打开账号动作',
})}
/>
</div>
</Card> </Card>
</div> </div>