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

client/src/pages/ApprovalRulesPage.tsx

@@ -16,6 +16,9 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
+import { toast } from "sonner";
+import { TableSkeleton } from "../components/common/TableSkeleton";
+import { ConfirmDialog } from "../components/common/ConfirmDialog";
 
 const ROLE_OPTIONS: Array<{ code: ApprovalRoleCode; label: string }> = [
   { code: "manager", label: "manager" },
@@ -45,6 +48,7 @@ export function ApprovalRulesPage() {
 
   const [editOpen, setEditOpen] = useState(false);
   const [editRule, setEditRule] = useState<ApprovalRule | null>(null);
+  const [confirmToggleRule, setConfirmToggleRule] = useState<ApprovalRule | null>(null);
 
   const listQuery = useQuery({
     queryKey: ["approval-rules"],
@@ -79,13 +83,12 @@ export function ApprovalRulesPage() {
       setLevel3Role("");
       setEnabled(true);
       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);
     },
   });
 
@@ -94,13 +97,12 @@ export function ApprovalRulesPage() {
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["approval-rules"] });
       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);
     },
   });
 
@@ -117,13 +119,12 @@ export function ApprovalRulesPage() {
       setEditOpen(false);
       setEditRule(null);
       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);
     },
   });
 
@@ -283,7 +284,7 @@ export function ApprovalRulesPage() {
       <Card className="space-y-4 p-6">
         <h3 className="text-base font-semibold text-slate-900">规则列表</h3>
 
-        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+        {listQuery.isLoading ? <TableSkeleton columns={6} rows={5} /> : null}
 
         {listQuery.isError ? (
           <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
@@ -348,10 +349,7 @@ export function ApprovalRulesPage() {
                             variant="secondary"
                             type="button"
                             disabled={toggleEnabledMutation.isPending}
-                            onClick={() => {
-                              if (!window.confirm(`确认${rule.enabled ? "停用" : "启用"}该审批规则？`)) return;
-                              toggleEnabledMutation.mutate(rule);
-                            }}
+                            onClick={() => setConfirmToggleRule(rule)}
                           >
                             {rule.enabled ? "停用" : "启用"}
                           </Button>
@@ -372,6 +370,13 @@ export function ApprovalRulesPage() {
         ) : null}
       </Card>
 
+      <ConfirmDialog
+        open={confirmToggleRule !== null}
+        onOpenChange={(open) => { if (!open) setConfirmToggleRule(null); }}
+        title={`确认${confirmToggleRule?.enabled ? "停用" : "启用"}该审批规则？`}
+        onConfirm={() => { if (confirmToggleRule) toggleEnabledMutation.mutate(confirmToggleRule); }}
+      />
+
       <Dialog open={editOpen} onOpenChange={setEditOpen}>
         <DialogContent>
           <DialogHeader>