feat(client): 待办页精修与 testid（E4）

- 待办列表使用 Tabs/Table 统一样式
- 待办详情动作区使用 Button/Textarea/Card 收敛
- 增加 data-testid 供 Playwright 稳定定位

client/src/pages/WorkflowTasksPage.tsx

@@ -4,6 +4,10 @@ import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { fetchWorkflowTasks } from "../api/workflow";
 import { PageHeader } from "../components/common/PageHeader";
+import { Button } from "../components/ui/button";
+import { Card } from "../components/ui/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
+import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";
 
 const PAGE_SIZE = 20;
 
@@ -31,27 +35,30 @@ export function WorkflowTasksPage() {
     <div className="space-y-6">
       <PageHeader title="待我处理" subtitle="审批待办列表（支持筛选与详情动作联动）。" />
 
-      <section className="card-std space-y-4">
-        <div className="flex flex-wrap items-center gap-2">
-          {[
-            { value: "pending", label: "待处理" },
-            { value: "completed", label: "已通过" },
-            { value: "rejected", label: "已驳回" },
-            { value: "cancelled", label: "已取消" },
-            { value: "skipped", label: "已跳过" },
-          ].map((item) => (
-            <button
-              className={status === item.value ? "btn-primary" : "btn-secondary"}
-              key={item.value}
-              onClick={() => {
-                setSearchParams({ status: item.value, page: "1" });
-              }}
-              type="button"
-            >
-              {item.label}
-            </button>
-          ))}
-        </div>
+      <Card className="space-y-4 p-6">
+        <Tabs
+          data-testid="workflow-tasks-status-tabs"
+          value={status}
+          onValueChange={(value) => setSearchParams({ status: value, page: "1" })}
+        >
+          <TabsList className="flex w-full flex-wrap justify-start gap-1">
+            {[
+              { value: "pending", label: "待处理" },
+              { value: "completed", label: "已通过" },
+              { value: "rejected", label: "已驳回" },
+              { value: "cancelled", label: "已取消" },
+              { value: "skipped", label: "已跳过" },
+            ].map((item) => (
+              <TabsTrigger
+                data-testid={`workflow-tasks-tab-${item.value}`}
+                key={item.value}
+                value={item.value}
+              >
+                {item.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
 
         {query.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
 
@@ -68,44 +75,51 @@ export function WorkflowTasksPage() {
         ) : null}
 
         {!query.isLoading && !query.isError ? (
-          <div className="overflow-x-auto rounded-lg border border-slate-200">
-            <table className="min-w-full text-left text-sm">
-              <thead className="bg-slate-50 text-slate-600">
+          <div className="rounded-lg border border-slate-200">
+            <Table data-testid="workflow-tasks-table">
+              <TableHeader>
                 <tr>
-                  <th className="px-3 py-2">任务</th>
-                  <th className="px-3 py-2">报销ID</th>
-                  <th className="px-3 py-2">状态</th>
-                  <th className="px-3 py-2">创建时间</th>
-                  <th className="px-3 py-2">操作</th>
+                  <TableHead>任务</TableHead>
+                  <TableHead>报销ID</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead>创建时间</TableHead>
+                  <TableHead className="w-24">操作</TableHead>
                 </tr>
-              </thead>
-              <tbody>
+              </TableHeader>
+              <TableBody>
                 {(query.data?.items ?? []).length ? (
                   query.data?.items.map((task) => (
-                    <tr className="border-t border-slate-100" key={task.id}>
-                      <td className="px-3 py-2">
+                    <TableRow data-testid="workflow-task-row" key={task.id}>
+                      <TableCell>
                         <div className="font-medium text-slate-900">{task.stepName}</div>
                         <div className="text-xs text-slate-500">{task.id}</div>
-                      </td>
-                      <td className="px-3 py-2 font-mono text-xs">{task.workflowInstance?.entityId}</td>
-                      <td className="px-3 py-2">{task.status}</td>
-                      <td className="px-3 py-2">{new Date(task.createdAt).toLocaleString()}</td>
-                      <td className="px-3 py-2">
-                        <Link className="btn-secondary" to={`/workflow/tasks/${task.id}`}>
-                          详情
-                        </Link>
-                      </td>
-                    </tr>
+                      </TableCell>
+                      <TableCell className="font-mono text-xs">
+                        {task.workflowInstance?.entityId}
+                      </TableCell>
+                      <TableCell>{task.status}</TableCell>
+                      <TableCell>{new Date(task.createdAt).toLocaleString()}</TableCell>
+                      <TableCell>
+                        <Button
+                          asChild
+                          size="sm"
+                          variant="secondary"
+                          data-testid="workflow-task-detail-link"
+                        >
+                          <Link to={`/workflow/tasks/${task.id}`}>详情</Link>
+                        </Button>
+                      </TableCell>
+                    </TableRow>
                   ))
                 ) : (
-                  <tr>
-                    <td className="px-3 py-3 text-slate-500" colSpan={5}>
+                  <TableRow>
+                    <TableCell className="py-3 text-slate-500" colSpan={5}>
                       暂无数据
-                    </td>
-                  </tr>
+                    </TableCell>
+                  </TableRow>
                 )}
-              </tbody>
-            </table>
+              </TableBody>
+            </Table>
           </div>
         ) : null}
 
@@ -114,16 +128,18 @@ export function WorkflowTasksPage() {
             第 {page} / {totalPages} 页
           </span>
           <div className="flex gap-2">
-            <button
-              className="btn-secondary"
+            <Button
+              data-testid="workflow-tasks-prev-page"
+              variant="secondary"
               disabled={page <= 1}
               onClick={() => setSearchParams({ status, page: String(Math.max(1, page - 1)) })}
               type="button"
             >
               上一页
-            </button>
-            <button
-              className="btn-secondary"
+            </Button>
+            <Button
+              data-testid="workflow-tasks-next-page"
+              variant="secondary"
               disabled={page >= totalPages}
               onClick={() =>
                 setSearchParams({ status, page: String(Math.min(totalPages, page + 1)) })
@@ -131,10 +147,10 @@ export function WorkflowTasksPage() {
               type="button"
             >
               下一页
-            </button>
+            </Button>
           </div>
         </div>
-      </section>
+      </Card>
     </div>
   );
 }