From 2756613eeb802297c883c70aac248d76dd15307e Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 1 Aug 2026 10:37:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E8=A1=A8=E6=A0=BC=E9=AB=98=E5=BA=A6=E5=9C=A8?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E5=88=86=E8=BE=A8=E7=8E=87=E4=B8=8B=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E8=A2=AB=E8=A3=81=E5=89=AA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

表格缺少 scroll.y 导致 antd v6 中表体按内容自然撑开，
低分辨率下分页器被推出可视区域。改用 ResizeObserver 动态
监听容器高度并计算 scroll.y，使表头固定、表体内部滚动、
分页器固定底部，适配所有分辨率。
---
 web/frontend/src/pages/DouyuTasksPage.tsx | 49 ++++++++++++++++-------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/web/frontend/src/pages/DouyuTasksPage.tsx b/web/frontend/src/pages/DouyuTasksPage.tsx
index 4d0d0d1..9dfc3b3 100644
--- a/web/frontend/src/pages/DouyuTasksPage.tsx
+++ b/web/frontend/src/pages/DouyuTasksPage.tsx
@@ -252,6 +252,8 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
   const [giftCount, setGiftCount] = useState(() => savedPositiveInteger(DOUYU_GIFT_COUNT_STORAGE_KEY));
   const [selectedGoodsId, setSelectedGoodsId] = useState('');
   const [accountSearch, setAccountSearch] = useState('');
+  const taskRecordAreaRef = useRef<HTMLDivElement | null>(null);
+  const [taskRecordAreaHeight, setTaskRecordAreaHeight] = useState(360);
 
   const [importOpen, setImportOpen] = useState(false);
   const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]);
@@ -383,6 +385,23 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
 
   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(() => {
     localStorage.setItem(DOUYU_GOLD_AMOUNT_STORAGE_KEY, String(goldAmount));
   }, [goldAmount]);
@@ -1222,20 +1241,22 @@ export default function DouyuTasksPage({ handbook }: { handbook: HandbookKind })
             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' } }}
           >
-            <Table
-              rowKey="id" size="small" columns={taskColumns} dataSource={visibleTasks}
-              className="douyu-task-record-table"
-              loading={loading}
-              pagination={{
-                pageSize: 15,
-                showSizeChanger: false,
-                size: 'small',
-                showLessItems: true,
-                showTotal: (total) => `共 ${total} 条`,
-              }}
-              tableLayout="fixed"
-              scroll={{ x: 850 }}
-            />
+            <div ref={taskRecordAreaRef} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+              <Table
+                rowKey="id" size="small" columns={taskColumns} dataSource={visibleTasks}
+                className="douyu-task-record-table"
+                loading={loading}
+                pagination={{
+                  pageSize: 15,
+                  showSizeChanger: false,
+                  size: 'small',
+                  showLessItems: true,
+                  showTotal: (total) => `共 ${total} 条`,
+                }}
+                tableLayout="fixed"
+                scroll={{ x: 850, y: Math.max(120, taskRecordAreaHeight - 80) }}
+              />
+            </div>
           </Card>
 
           <Card