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

- 待办列表使用 Tabs/Table 统一样式 - 待办详情动作区使用 Button/Textarea/Card 收敛 - 增加 data-testid 供 Playwright 稳定定位
2026-02-08 23:26:20 +08:00
@@ -14,6 +14,9 @@ import {
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
 import { PageHeader } from "../components/common/PageHeader";
+import { Button } from "../components/ui/button";
+import { Card } from "../components/ui/card";
+import { Textarea } from "../components/ui/textarea";

 export function WorkflowTaskDetailPage() {
  const { taskId = "" } = useParams();
@@ -93,17 +96,17 @@ export function WorkflowTaskDetailPage() {

  if (!taskId) {
    return (
-      <section className="card-std">
+      <Card className="p-6">
        <p className="text-sm text-red-600">缺少 taskId 参数。</p>
-      </section>
+      </Card>
    );
  }

  if (detailQuery.isLoading) {
    return (
-      <section className="card-std">
+      <Card className="p-6">
        <p className="text-sm text-slate-500">加载任务详情中...</p>
-      </section>
+      </Card>
    );
  }

@@ -117,10 +120,16 @@ export function WorkflowTaskDetailPage() {
      : "加载失败，请返回列表重试";

    return (
-      <section className="card-std space-y-3">
+      <Card className="space-y-3 p-6">
        <p className="text-sm text-red-600">{message}</p>
-        <button className="btn-secondary" onClick={() => navigate("/workflow/tasks")}>返回待办列表</button>
-      </section>
+        <Button
+          variant="secondary"
+          onClick={() => navigate("/workflow/tasks")}
+          type="button"
+        >
+          返回待办列表
+        </Button>
+      </Card>
    );
  }

@@ -132,81 +141,87 @@ export function WorkflowTaskDetailPage() {
        title={`任务详情 ${detail.task.stepName}`}
        subtitle={`任务ID: ${detail.task.id}`}
        actions={
-          <Link className="btn-secondary" to="/workflow/tasks">
-            返回待办列表
-          </Link>
+          <Button asChild variant="secondary" data-testid="workflow-task-back">
+            <Link to="/workflow/tasks">返回待办列表</Link>
+          </Button>
        }
      />

-      <section className="card-std space-y-2 text-sm">
+      <Card className="space-y-2 p-6 text-sm" data-testid="workflow-task-summary">
        <div>状态：{detail.task.status}</div>
        <div>实例：{detail.workflowInstance?.id ?? "-"}</div>
        <div>报销单号：{detail.reimbursement?.formNumber ?? "-"}</div>
        <div>报销金额：{detail.reimbursement?.totalAmount ?? "-"}</div>
        <div>提交人：{detail.reimbursement?.submitter?.name ?? "-"}</div>
        <div>报销人：{detail.reimbursement?.owner?.name ?? "-"}</div>
-      </section>
+      </Card>

-      <section className="card-std space-y-3">
+      <Card className="space-y-4 p-6">
        <h3 className="text-base font-semibold text-slate-900">审批动作</h3>

        {actionError ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
+          <p
+            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
+            data-testid="workflow-task-action-error"
+          >
            {actionError}
          </p>
        ) : null}

        <div className="flex flex-wrap gap-2">
-          <button
-            className="btn-primary"
+          <Button
+            data-testid="workflow-task-approve"
            disabled={!allowedActions.has("approve") || mutation.isPending}
            onClick={() => mutation.mutate("approve")}
            type="button"
          >
            通过
-          </button>
+          </Button>
        </div>

-        <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
          <p className="text-sm font-medium text-slate-800">驳回</p>
-          <textarea
-            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+          <Textarea
+            data-testid="workflow-task-reject-comment"
            onChange={(event) => setRejectComment(event.target.value)}
            rows={2}
            value={rejectComment}
          />
-          <button
-            className="btn-secondary"
+          <Button
+            data-testid="workflow-task-reject"
+            variant="secondary"
            disabled={!allowedActions.has("reject") || mutation.isPending || rejectComment.trim().length < 1}
            onClick={() => mutation.mutate("reject")}
            type="button"
          >
            提交驳回
-          </button>
+          </Button>
        </div>

-        <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
          <p className="text-sm font-medium text-slate-800">退回</p>
-          <textarea
-            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+          <Textarea
+            data-testid="workflow-task-return-comment"
            onChange={(event) => setReturnComment(event.target.value)}
            rows={2}
            value={returnComment}
          />
-          <button
-            className="btn-secondary"
+          <Button
+            data-testid="workflow-task-return"
+            variant="secondary"
            disabled={!allowedActions.has("return") || mutation.isPending || returnComment.trim().length < 1}
            onClick={() => mutation.mutate("return")}
            type="button"
          >
            提交退回
-          </button>
+          </Button>
        </div>

-        <div className="space-y-2 rounded-lg border border-slate-200 p-3">
+        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
          <p className="text-sm font-medium text-slate-800">转审</p>
          <select
-            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+            className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+            data-testid="workflow-task-transfer-to-approver"
            onChange={(event) => setSelectedApprover(event.target.value)}
            value={selectedApprover}
          >
@@ -217,14 +232,15 @@ export function WorkflowTaskDetailPage() {
              </option>
            ))}
          </select>
-          <textarea
-            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
+          <Textarea
+            data-testid="workflow-task-transfer-reason"
            onChange={(event) => setTransferReason(event.target.value)}
            rows={2}
            value={transferReason}
          />
-          <button
-            className="btn-secondary"
+          <Button
+            data-testid="workflow-task-transfer"
+            variant="secondary"
            disabled={
              !allowedActions.has("transfer") ||
              mutation.isPending ||
@@ -235,11 +251,11 @@ export function WorkflowTaskDetailPage() {
            type="button"
          >
            提交转审
-          </button>
+          </Button>
        </div>
-      </section>
+      </Card>

-      <section className="card-std space-y-3">
+      <Card className="space-y-3 p-6">
        <h3 className="text-base font-semibold text-slate-900">处理历史</h3>
        <div className="space-y-2">
          {detail.history.length ? (
@@ -256,7 +272,7 @@ export function WorkflowTaskDetailPage() {
            <p className="text-sm text-slate-500">暂无历史记录</p>
          )}
        </div>
-      </section>
+      </Card>
    </div>
  );
 }
@@ -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,8 +35,13 @@ 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">
+      <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: "已通过" },
@@ -40,18 +49,16 @@ export function WorkflowTasksPage() {
              { value: "cancelled", label: "已取消" },
              { value: "skipped", label: "已跳过" },
            ].map((item) => (
-            <button
-              className={status === item.value ? "btn-primary" : "btn-secondary"}
+              <TabsTrigger
+                data-testid={`workflow-tasks-tab-${item.value}`}
                key={item.value}
-              onClick={() => {
-                setSearchParams({ status: item.value, page: "1" });
-              }}
-              type="button"
+                value={item.value}
              >
                {item.label}
-            </button>
+              </TabsTrigger>
            ))}
-        </div>
+          </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>
  );
 }
@@ -2,7 +2,7 @@ ID,Title,Description,Acceptance,Test_Method,Tools,Dev_Status,Review1_Status,Regr
 E1,CSV快照收口（试运行上线版）,新建P4试运行上线版执行合同快照承接全部前后端与联动工作,新CSV通过校验且依赖关系正确旧快照不改动,python3 /home/shunli/.codex/skills/plan/scripts/validate_issues_csv.py issues/2026-02-08_21-50-09-p4-trialrun-ready.csv,manual,DONE,DONE,DONE,issues/2026-02-08_21-50-09-p4-trialrun-ready.csv,[],none
 E2,前端UI组件基线（成熟复用）,引入UI primitives与移动端44px触控规范并保持现有token策略,三大业务页可复用组件且typecheck与build通过,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/components/ui/* | client/src/lib/* | client/src/styles/mobile-touch.css | client/src/index.css | client/tailwind.config.js | client/package.json,"[""E1""]",本地拷贝shadcn风格组件子集并记录来源/许可证与回滚路径
 E3,前端布局导航收敛,统一Sidebar与Topbar交互视觉响应式与权限菜单体验,四角色菜单正确窄屏可用路由守卫无闪烁,"manual: 按server与client README启动联调并验证employee manager finance finance_mgr菜单与守卫",manual,DONE,TODO,TODO,client/src/layouts/AppShellLayout.tsx | client/src/components/navigation/* | client/src/components/common/PageHeader.tsx | client/src/router/*,"[""E2""]",none
-E4,待办页精修（列表详情动作）,用UI primitives收敛待办列表与详情动作区统一加载空态错误并补data-testid,approve reject return transfer动作可用且动作后列表详情刷新一致,cd client && npm run typecheck && npm run build,manual,TODO,TODO,TODO,client/src/pages/WorkflowTasksPage.tsx | client/src/pages/WorkflowTaskDetailPage.tsx | client/src/api/workflow.ts,"[""E3""]",为E2E补稳定选择器data-testid
+E4,待办页精修（列表详情动作）,用UI primitives收敛待办列表与详情动作区统一加载空态错误并补data-testid,approve reject return transfer动作可用且动作后列表详情刷新一致,cd client && npm run typecheck && npm run build,manual,DONE,DONE,DONE,client/src/pages/WorkflowTasksPage.tsx | client/src/pages/WorkflowTaskDetailPage.tsx | client/src/api/workflow.ts,"[""E3""]",为E2E补稳定选择器data-testid
 E5,报销页精修（列表详情联动）,收敛报销列表详情展示并优化支付凭证与票据区块一致性并补data-testid,employee可create submit withdraw且finance可pay并填写凭证字段,cd client && npm run typecheck && npm run build,manual,TODO,TODO,TODO,client/src/pages/ReimbursementsPage.tsx | client/src/pages/ReimbursementDetailPage.tsx | client/src/api/reimbursements.ts,"[""E3""]",为E2E补稳定选择器data-testid
 E6,票据中心精修（OCR与预览）,收敛上传列表详情并强化OCR状态展示绑定与签名预览交互并补data-testid,OCR_PROVIDER=mock联调可轮询pending_ocr且ocr_failed展示原因且预览可用,cd client && npm run typecheck && npm run build,manual,TODO,TODO,TODO,client/src/pages/InvoicePoolPage.tsx | client/src/api/invoicePool.ts | client/src/api/http.ts,"[""E3""]",为E2E补稳定选择器data-testid
 E7,委派管理前端页（运营可用）,新增委派管理页与API封装支持创建列表撤销并加菜单入口与守卫,可创建委派撤销后delegate不可代办且无权限用户403提示正确,"manual: manager创建委派让delegate代办一次后撤销再验证PERM_002",manual,TODO,TODO,TODO,client/src/pages/DelegationsPage.tsx | client/src/api/delegations.ts | client/src/router/index.tsx | client/src/components/navigation/Sidebar.tsx,"[""E3""]",权限码沿用expense.proxy_manage