From dbf78b825c6452891ff7537587fb56c0b05bcd76 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 1 Aug 2026 10:55:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B4=A6=E5=8F=B7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=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=E7=BF=BB?=
 =?UTF-8?q?=E9=A1=B5=E6=8C=89=E9=92=AE=E8=A2=AB=E8=A3=81=E5=89=AA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

账号表格缺少 scroll.y 导致表体按内容自然撑开，低分辨率下
15 行内容超出容器，底部分页器被裁掉。改用 ResizeObserver
动态监听容器高度并计算 scroll.y，与任务记录表格共用同一个
observer，表体内部滚动、分页器固定底部，适配所有分辨率。
---
 web/frontend/src/pages/DouyuTasksPage.tsx | 71 ++++++++++++++---------
 1 file changed, 43 insertions(+), 28 deletions(-)

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<HTMLDivElement | null>(null);
   const [taskRecordAreaHeight, setTaskRecordAreaHeight] = useState(360);
+  const accountTableAreaRef = useRef<HTMLDivElement | null>(null);
+  const [accountTableAreaHeight, setAccountTableAreaHeight] = useState(360);
 
   const [importOpen, setImportOpen] = useState(false);
   const [importPool, setImportPool] = useState<DouyuTaskAccountItem[]>([]);
@@ -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 })
                 )}
               </Space>
             </Space>
-            <Table
-              rowKey="id"
-              size="small"
-              className="douyu-task-record-table"
-              loading={loading}
-              rowSelection={{
-                selectedRowKeys: selectedIds,
-                onChange: (keys) => 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: '右键打开账号动作',
-              })}
-            />
+            <div ref={accountTableAreaRef} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+              <Table
+                rowKey="id"
+                size="small"
+                className="douyu-task-record-table"
+                loading={loading}
+                rowSelection={{
+                  selectedRowKeys: selectedIds,
+                  onChange: (keys) => 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: '右键打开账号动作',
+                })}
+              />
+            </div>
           </Card>
         </div>