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

client/src/pages/DelegationsPage.tsx

@@ -1,10 +1,13 @@
 import { useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { isApiError } from "../api/types";
 import { createDelegation, fetchMyDelegations, revokeDelegation } from "../api/delegations";
 import { fetchWorkflowApprovers } from "../api/workflow";
 import { PageHeader } from "../components/common/PageHeader";
+import { TableSkeleton } from "../components/common/TableSkeleton";
+import { StatusBadge } from "../components/common/StatusBadge";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
 import { Input } from "../components/ui/input";
@@ -46,13 +49,12 @@ export function DelegationsPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["delegations"] });
       setError("");
+      toast.success("委派已创建");
     },
     onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        return;
-      }
-      setError(err instanceof Error ? err.message : "创建委派失败");
+      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "创建委派失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
@@ -61,13 +63,12 @@ export function DelegationsPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["delegations"] });
       setError("");
+      toast.success("已撤销");
     },
     onError: (err) => {
-      if (isApiError(err)) {
-        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
-        return;
-      }
-      setError(err instanceof Error ? err.message : "撤销委派失败");
+      const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "撤销委派失败";
+      setError(msg);
+      toast.error(msg);
     },
   });
 
@@ -158,7 +159,7 @@ export function DelegationsPage() {
           </select>
         </div>
 
-        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+        {listQuery.isLoading ? <TableSkeleton columns={5} rows={3} /> : null}
         {listQuery.isError ? (
           <p className="text-sm text-red-600">
             {isApiError(listQuery.error)
@@ -193,7 +194,7 @@ export function DelegationsPage() {
                           <TableCell className="font-mono text-xs">{item.id}</TableCell>
                           <TableCell className="font-mono text-xs">{item.delegateEmployeeId}</TableCell>
                           <TableCell>{item.scope}</TableCell>
-                          <TableCell>{item.status}</TableCell>
+                          <TableCell><StatusBadge status={item.status} /></TableCell>
                           <TableCell>
                             <Button
                               data-testid="delegations-revoke"
@@ -239,7 +240,7 @@ export function DelegationsPage() {
                           <TableCell className="font-mono text-xs">{item.id}</TableCell>
                           <TableCell className="font-mono text-xs">{item.principalEmployeeId}</TableCell>
                           <TableCell>{item.scope}</TableCell>
-                          <TableCell>{item.status}</TableCell>
+                          <TableCell><StatusBadge status={item.status} /></TableCell>
                         </TableRow>
                       ))
                     ) : (