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

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

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -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>
   );
 }