[fix]:[FL-156][任务监控页面分页细节对齐]

Co-authored-by: multica-agent <github@multica.ai>

memory/2026-06-20.md

@@ -211,6 +211,29 @@
   - 改动仅影响任务监控页前端展示、筛选布局、错误反馈和移动端呈现，不改变 `/api/v1/admin/flower/*` 接口路径、请求/响应字段或权限语义。
   - `web/package-lock.json` 此次同步了 `web/package.json` 已有依赖条目，变动较大但不改变业务代码。
 
+## Follow-up - 任务监控页分页和空态细节对齐（FL-156）
+
+- 背景：
+  - 复核发现任务监控页表格分页、移动卡片顶部间距和筛选空态文案仍与用户管理页存在细节差异。
+
+- 本次处理：
+  - 任务监控页新增与用户管理页一致的表格分页 state，默认 `pageSize` 调整为 20，并补齐 `current`、`total`、`onChange`。
+  - 表格分页选项改为 `[10, 20, 50, 100]`，`showTotal` 改为读取筛选后的任务总数。
+  - 筛选项变更和重置筛选时将表格分页复位到第一页。
+  - 移除 `.admin-task-monitor-card-view` 的 `margin-top: 16px`，与 `.admin-users-card-view` 对齐。
+  - 表格和卡片筛选空态文案统一为“未找到符合筛选条件的任务。”。
+
+- 验证：
+  - 基线：`npm --workspace web exec eslint src/app/admin/task-monitor/page.tsx --max-warnings=0` 通过。
+  - 基线：`npm --workspace web exec tsc --noEmit` 失败于既有 `src/app/admin/elevation-records/page.tsx` 类型错误。
+  - 修改后：`npm --workspace web exec eslint src/app/admin/task-monitor/page.tsx --max-warnings=0` 通过。
+  - 修改后：`npm --workspace web exec eslint src/app/admin/users/page.tsx src/app/admin/task-monitor/page.tsx` 通过，仍仅用户页 1 条既有 unused eslint-disable warning。
+  - 修改后：`node --experimental-strip-types web/src/lib/task-monitor-display.test.js` 通过，4 passed，仍有既有 MODULE_TYPELESS_PACKAGE_JSON warning。
+  - 修改后：`npm run build:web` 编译通过但类型检查失败，失败点仍为既有 `src/app/admin/elevation-records/page.tsx` 的 `useAuth().api` 等类型错误。
+
+- 风险与关注点：
+  - 改动仅影响任务监控页前端分页、筛选复位、空态文案和卡片间距，不改变接口、权限或任务数据转换逻辑。
+
 # Work Log - ATP 模型管理页面一致性优化（FL-158）
 
 - 背景：

web/src/app/admin/task-monitor/page.tsx

@@ -160,6 +160,7 @@ export default function AdminTaskMonitorPage() {
   const [queueKeyword, setQueueKeyword] = useState("");
   const [taskKeyword, setTaskKeyword] = useState("");
   const [statusFilter, setStatusFilter] = useState<"all" | "online" | "offline">("all");
+  const [pagination, setPagination] = useState({ current: 1, pageSize: 20 });
   const [tableScrollY, setTableScrollY] = useState(TASK_MONITOR_TABLE_MIN_SCROLL_Y);
   const tableScrollAnchorRef = useRef<HTMLDivElement | null>(null);
   const viewMode: "table" | "card" = isMobile ? "card" : "table";
@@ -380,6 +381,7 @@ export default function AdminTaskMonitorPage() {
     setQueueKeyword("");
     setTaskKeyword("");
     setStatusFilter("all");
+    setPagination((prev) => ({ ...prev, current: 1 }));
   };
 
   const workersOverviewErrorMessage = workersOverviewQuery.error instanceof Error
@@ -600,7 +602,10 @@ export default function AdminTaskMonitorPage() {
                 allowClear
                 placeholder="按执行节点名称筛选"
                 value={workerKeyword}
-                onChange={(event) => setWorkerKeyword(event.target.value)}
+                onChange={(event) => {
+                  setWorkerKeyword(event.target.value);
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
               />
             </Form.Item>
 
@@ -609,7 +614,10 @@ export default function AdminTaskMonitorPage() {
                 allowClear
                 placeholder="按队列名称筛选"
                 value={queueKeyword}
-                onChange={(event) => setQueueKeyword(event.target.value)}
+                onChange={(event) => {
+                  setQueueKeyword(event.target.value);
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
               />
             </Form.Item>
 
@@ -618,14 +626,20 @@ export default function AdminTaskMonitorPage() {
                 allowClear
                 placeholder="按任务 ID / 任务名称筛选"
                 value={taskKeyword}
-                onChange={(event) => setTaskKeyword(event.target.value)}
+                onChange={(event) => {
+                  setTaskKeyword(event.target.value);
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
               />
             </Form.Item>
 
             <Form.Item label="状态" style={{ marginBottom: 12 }}>
               <Select
                 value={statusFilter}
-                onChange={(value) => setStatusFilter(parseStatusFilter(value))}
+                onChange={(value) => {
+                  setStatusFilter(parseStatusFilter(value));
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
                 options={[
                   { label: "全部状态", value: "all" },
                   { label: "在线", value: "online" },
@@ -651,7 +665,10 @@ export default function AdminTaskMonitorPage() {
                 allowClear
                 placeholder="按执行节点名称筛选"
                 value={workerKeyword}
-                onChange={(event) => setWorkerKeyword(event.target.value)}
+                onChange={(event) => {
+                  setWorkerKeyword(event.target.value);
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
               />
             </Form.Item>
 
@@ -660,7 +677,10 @@ export default function AdminTaskMonitorPage() {
                 allowClear
                 placeholder="按队列名称筛选"
                 value={queueKeyword}
-                onChange={(event) => setQueueKeyword(event.target.value)}
+                onChange={(event) => {
+                  setQueueKeyword(event.target.value);
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
               />
             </Form.Item>
 
@@ -669,14 +689,20 @@ export default function AdminTaskMonitorPage() {
                 allowClear
                 placeholder="按任务 ID / 任务名称筛选"
                 value={taskKeyword}
-                onChange={(event) => setTaskKeyword(event.target.value)}
+                onChange={(event) => {
+                  setTaskKeyword(event.target.value);
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
               />
             </Form.Item>
 
             <Form.Item label="状态" style={{ width: 170 }}>
               <Select
                 value={statusFilter}
-                onChange={(value) => setStatusFilter(parseStatusFilter(value))}
+                onChange={(value) => {
+                  setStatusFilter(parseStatusFilter(value));
+                  setPagination((prev) => ({ ...prev, current: 1 }));
+                }}
                 options={[
                   { label: "全部状态", value: "all" },
                   { label: "在线", value: "online" },
@@ -728,18 +754,23 @@ export default function AdminTaskMonitorPage() {
               loading={workersOverviewQuery.isLoading || allTasksQuery.isLoading}
               tableLayout="fixed"
               pagination={{
-                pageSize: 50,
+                current: pagination.current,
+                pageSize: pagination.pageSize,
+                total: Math.max(filteredTaskRows.length, 1),
                 showSizeChanger: true,
-                pageSizeOptions: [20, 50, 100, 200],
+                pageSizeOptions: [10, 20, 50, 100],
-                showTotal: (total) => `共 ${total} 条`,
+                showTotal: () => `共 ${filteredTaskRows.length} 条`,
                 hideOnSinglePage: false,
                 style: { marginBottom: 0 },
+                onChange: (page, pageSize) => {
+                  setPagination({ current: page, pageSize });
+                },
               }}
               locale={{
                 emptyText: (
                   <Empty
                     image={Empty.PRESENTED_IMAGE_SIMPLE}
-                    description="暂无符合筛选条件的任务数据。"
+                    description="未找到符合筛选条件的任务。"
                   />
                 ),
               }}
@@ -756,7 +787,7 @@ export default function AdminTaskMonitorPage() {
               <div className="admin-task-monitor-card-view-state">
                 <Empty
                   image={Empty.PRESENTED_IMAGE_SIMPLE}
-                  description="暂无符合筛选条件的任务数据。"
+                  description="未找到符合筛选条件的任务。"
                 />
               </div>
             ) : (

web/src/app/globals.css

@@ -677,7 +677,6 @@ body {
   min-height: 0;
   flex: 1;
   flex-direction: column;
-  margin-top: 16px;
 }
 
 .admin-task-monitor-card-view-content {