From c5369bdc3cbe671d782b60d26abefd022e044065 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Mon, 28 Sep 2026 07:25:52 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BB=BB=E5=8A=A1=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E7=AD=9B=E9=80=89=E6=94=B9=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E3=80=81=E4=BB=BB=E5=8A=A1/=E8=B4=A6=E5=8F=B7=20ID=20=E5=8F=AF?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B6=EF=BC=88=E8=B5=B0=E6=9F=A5=20P2-#8=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/tasks/index.tsx | 53 +++++++++++++++++++++++++++--------
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/tasks/index.tsx b/web/src/pages/tasks/index.tsx
index 8d67191..72c37b7 100644
--- a/web/src/pages/tasks/index.tsx
+++ b/web/src/pages/tasks/index.tsx
@@ -1,7 +1,7 @@
 // 任务中心列表：语义对齐 web.archived TasksPage.jsx 的 TaskList。
 import { useCallback, useEffect, useState } from 'react';
 import { history } from '@umijs/max';
-import { Alert, Button, Card, Flex, Input, Select, Space, Table, Tag, Typography } from 'antd';
+import { Alert, Button, Card, Flex, Select, Space, Table, Tag, Typography } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { getList } from '@/services/api';
 import { dateTime } from '@/utils/helpers';
@@ -48,9 +48,11 @@ const holdText: Record<string, string> = {
 export const holdLabel = (reason?: string) => (reason ? holdText[reason] || `未知停止原因：${reason}` : '无');
 
 export default function Page() {
-  const [accountFilter, setAccountFilter] = useState('');
+  const [accountFilter, setAccountFilter] = useState<string | undefined>(undefined);
   const [stateFilter, setStateFilter] = useState<string | undefined>(undefined);
   const [rows, setRows] = useState<any[]>([]);
+  const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]);
+  const [accountsPending, setAccountsPending] = useState(false);
   const [pending, setPending] = useState(true);
   const [error, setError] = useState<any>(null);
 
@@ -60,7 +62,7 @@ export default function Page() {
     try {
       const result = await getList({
         resource: 'tasks',
-        filters: { account_id: accountFilter || undefined, state: stateFilter || undefined },
+        filters: { account_id: accountFilter, state: stateFilter || undefined },
       });
       setRows(result.data ?? []);
     } catch (loadError) {
@@ -74,16 +76,42 @@ export default function Page() {
     load();
   }, [load]);
 
+  // 账号筛选下拉：一次性拉取账号列表，无需手输 UUID。
+  useEffect(() => {
+    setAccountsPending(true);
+    getList({ resource: 'accounts' })
+      .then((result) =>
+        setAccountOptions(
+          (result.data ?? []).map((account: any) => ({
+            value: account.id,
+            label: account.name ? `${account.name}（${account.id}）` : account.id,
+          })),
+        ),
+      )
+      .catch(() => setAccountOptions([]))
+      .finally(() => setAccountsPending(false));
+  }, []);
+
   const columns: ColumnsType<any> = [
     {
       title: '任务',
       dataIndex: 'id',
-      render: (value: string) => <Typography.Link onClick={() => history.push(`/tasks/${value}`)}>{value}</Typography.Link>,
+      render: (value: string) => (
+        <Space size={4}>
+          <Typography.Link onClick={() => history.push(`/tasks/${value}`)}>{value}</Typography.Link>
+          <Typography.Text copyable={{ text: value }} style={{ fontSize: 12 }} />
+        </Space>
+      ),
     },
     {
       title: '账号',
       dataIndex: 'account_id',
-      render: (value: string) => <Typography.Link onClick={() => history.push(`/accounts/${value}`)}>{value}</Typography.Link>,
+      render: (value: string) => (
+        <Space size={4}>
+          <Typography.Link onClick={() => history.push(`/accounts/${value}`)}>{value}</Typography.Link>
+          <Typography.Text copyable={{ text: value }} style={{ fontSize: 12 }} />
+        </Space>
+      ),
     },
     { title: '确认', dataIndex: 'confirmation_id', render: (value?: string) => value || '未确认' },
     {
@@ -115,12 +143,16 @@ export default function Page() {
         <Flex justify="space-between" align="center">
           <Typography.Text type="secondary">共 {rows.length} 个任务</Typography.Text>
           <Space wrap>
-            <Input
+            <Select
               style={{ width: 280 }}
-              placeholder="账号 ID"
-              value={accountFilter}
-              onChange={(event) => setAccountFilter(event.target.value)}
+              placeholder="全部账号"
               allowClear
+              showSearch
+              optionFilterProp="label"
+              loading={accountsPending && accountOptions.length === 0}
+              value={accountFilter}
+              onChange={setAccountFilter}
+              options={accountOptions}
             />
             <Select
               style={{ width: 200 }}
@@ -141,8 +173,7 @@ export default function Page() {
         dataSource={rows}
         loading={pending}
         pagination={false}
-        locale={{ emptyText: accountFilter || stateFilter ? '没有符合筛选条件的任务' : '尚无任务' }}
-        />
+        locale={{ emptyText: accountFilter || stateFilter ? '没有符合筛选条件的任务' : '尚无任务' }}        />
       </Card>
     </div>
   );