fix: 修复账号列表表格高度在不同分辨率下翻页按钮被裁剪问题
账号表格缺少 scroll.y 导致表体按内容自然撑开,低分辨率下 15 行内容超出容器,底部分页器被裁掉。改用 ResizeObserver 动态监听容器高度并计算 scroll.y,与任务记录表格共用同一个 observer,表体内部滚动、分页器固定底部,适配所有分辨率。
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user