refactor(ui): [UI7-1] 为其余配置与边缘页面应用新版空壳布局

client/src/pages/WorkflowTaskDetailPage.tsx

@@ -11,9 +11,12 @@ import {
   returnWorkflowTask,
   transferWorkflowTask,
 } from "../api/workflow";
+import { toast } from "sonner";
 import { useAuth } from "../auth/AuthContext";
 import { hasPermission } from "../auth/permissions";
+import { CardSkeleton } from "../components/common/CardSkeleton";
 import { PageHeader } from "../components/common/PageHeader";
+import { StatusBadge } from "../components/common/StatusBadge";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
 import { Textarea } from "../components/ui/textarea";
@@ -70,27 +73,26 @@ export function WorkflowTaskDetailPage() {
 
       return transferWorkflowTask(taskId, selectedApprover, transferReason.trim());
     },
-    onSuccess: async () => {
+    onSuccess: async (_data, action) => {
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: ["workflow", "tasks"] }),
         queryClient.invalidateQueries({ queryKey: ["workflow", "task", taskId] }),
       ]);
       setActionError("");
+      const messages: Record<string, string> = { approve: "已通过", reject: "已驳回", return: "已退回", transfer: "已转审" };
+      toast.success(messages[action] ?? "操作成功");
     },
     onError: (error) => {
+      let msg: string;
       if (error instanceof Error && !isApiError(error)) {
-        setActionError(error.message);
-        return;
+        msg = error.message;
+      } else if (isApiError(error)) {
+        msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
+      } else {
+        msg = "动作执行失败，请稍后重试";
       }
-
-      if (isApiError(error)) {
-        setActionError(
-          `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`,
-        );
-        return;
-      }
-
-      setActionError("动作执行失败，请稍后重试");
+      setActionError(msg);
+      toast.error(msg);
     },
   });
 
@@ -104,9 +106,7 @@ export function WorkflowTaskDetailPage() {
 
   if (detailQuery.isLoading) {
     return (
-      <Card className="p-6">
-        <p className="text-sm text-slate-500">加载任务详情中...</p>
-      </Card>
+      <CardSkeleton lines={8} />
     );
   }
 
@@ -148,7 +148,7 @@ export function WorkflowTaskDetailPage() {
       />
 
       <Card className="space-y-2 p-6 text-sm" data-testid="workflow-task-summary">
-        <div>状态：{detail.task.status}</div>
+        <div>状态：<StatusBadge status={detail.task.status} /></div>
         <div>实例：{detail.workflowInstance?.id ?? "-"}</div>
         <div>报销单号：{detail.reimbursement?.formNumber ?? "-"}</div>
         <div>报销金额：{detail.reimbursement?.totalAmount ?? "-"}</div>