fix: 修复任务记录表格高度在不同分辨率下底部被裁剪问题
表格缺少 scroll.y 导致 antd v6 中表体按内容自然撑开, 低分辨率下分页器被推出可视区域。改用 ResizeObserver 动态 监听容器高度并计算 scroll.y,使表头固定、表体内部滚动、 分页器固定底部,适配所有分辨率。
This commit is contained in:
@@ -252,6 +252,8 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
|
|||||||
const [giftCount, setGiftCount] = useState(() => savedPositiveInteger(DOUYU_GIFT_COUNT_STORAGE_KEY));
|
const [giftCount, setGiftCount] = useState(() => savedPositiveInteger(DOUYU_GIFT_COUNT_STORAGE_KEY));
|
||||||
const [selectedGoodsId, setSelectedGoodsId] = useState('');
|
const [selectedGoodsId, setSelectedGoodsId] = useState('');
|
||||||
const [accountSearch, setAccountSearch] = useState('');
|
const [accountSearch, setAccountSearch] = useState('');
|
||||||
|
const taskRecordAreaRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const [taskRecordAreaHeight, setTaskRecordAreaHeight] = useState(360);
|
||||||
|
|
||||||
const [importOpen, setImportOpen] = useState(false);
|
const [importOpen, setImportOpen] = useState(false);
|
||||||
const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]);
|
const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]);
|
||||||
@@ -383,6 +385,23 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
|
|||||||
|
|
||||||
useEffect(() => { loadData(); }, [loadData]);
|
useEffect(() => { loadData(); }, [loadData]);
|
||||||
|
|
||||||
|
// 监听任务记录区域高度变化,动态计算 scroll.y 实现表体内部滚动
|
||||||
|
useEffect(() => {
|
||||||
|
const node = taskRecordAreaRef.current;
|
||||||
|
if (!node) return;
|
||||||
|
const updateHeight = () => {
|
||||||
|
setTaskRecordAreaHeight(Math.max(200, Math.floor(node.getBoundingClientRect().height)));
|
||||||
|
};
|
||||||
|
updateHeight();
|
||||||
|
if (typeof ResizeObserver === 'undefined') {
|
||||||
|
window.addEventListener('resize', updateHeight);
|
||||||
|
return () => window.removeEventListener('resize', updateHeight);
|
||||||
|
}
|
||||||
|
const observer = new ResizeObserver(updateHeight);
|
||||||
|
observer.observe(node);
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
localStorage.setItem(DOUYU_GOLD_AMOUNT_STORAGE_KEY, String(goldAmount));
|
localStorage.setItem(DOUYU_GOLD_AMOUNT_STORAGE_KEY, String(goldAmount));
|
||||||
}, [goldAmount]);
|
}, [goldAmount]);
|
||||||
@@ -1222,20 +1241,22 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
|
|||||||
style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
|
style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
|
||||||
styles={{ body: { flex: 1, minHeight: 0, padding: '4px 6px', overflow: 'hidden', display: 'flex', flexDirection: 'column' } }}
|
styles={{ body: { flex: 1, minHeight: 0, padding: '4px 6px', overflow: 'hidden', display: 'flex', flexDirection: 'column' } }}
|
||||||
>
|
>
|
||||||
<Table
|
<div ref={taskRecordAreaRef} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
|
||||||
rowKey="id" size="small" columns={taskColumns} dataSource={visibleTasks}
|
<Table
|
||||||
className="douyu-task-record-table"
|
rowKey="id" size="small" columns={taskColumns} dataSource={visibleTasks}
|
||||||
loading={loading}
|
className="douyu-task-record-table"
|
||||||
pagination={{
|
loading={loading}
|
||||||
pageSize: 15,
|
pagination={{
|
||||||
showSizeChanger: false,
|
pageSize: 15,
|
||||||
size: 'small',
|
showSizeChanger: false,
|
||||||
showLessItems: true,
|
size: 'small',
|
||||||
showTotal: (total) => `共 ${total} 条`,
|
showLessItems: true,
|
||||||
}}
|
showTotal: (total) => `共 ${total} 条`,
|
||||||
tableLayout="fixed"
|
}}
|
||||||
scroll={{ x: 850 }}
|
tableLayout="fixed"
|
||||||
/>
|
scroll={{ x: 850, y: Math.max(120, taskRecordAreaHeight - 80) }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card
|
<Card
|
||||||
|
|||||||
Reference in New Issue
Block a user