feat(ui): [UI7-1] 构建通用原子UI组件与业务Hooks

client/src/hooks/useMutationWithToast.ts

@@ -0,0 +1,30 @@
+import { useMutation, type UseMutationOptions } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { resolveErrorMessage } from "../lib/resolveErrorMessage";
+
+export function useMutationWithToast<TData = unknown, TVariables = void, TOnMutateResult = unknown>(
+  options: UseMutationOptions<TData, Error, TVariables, TOnMutateResult> & {
+    successMessage?: string | ((data: TData, variables: TVariables) => string);
+    errorMessage?: string;
+  },
+) {
+  const { successMessage, errorMessage, onSuccess, onError, ...rest } = options;
+
+  return useMutation<TData, Error, TVariables, TOnMutateResult>({
+    ...rest,
+    onSuccess: (data, variables, onMutateResult, context) => {
+      if (successMessage) {
+        const msg =
+          typeof successMessage === "function"
+            ? successMessage(data, variables)
+            : successMessage;
+        toast.success(msg);
+      }
+      onSuccess?.(data, variables, onMutateResult, context);
+    },
+    onError: (error, variables, onMutateResult, context) => {
+      toast.error(errorMessage ?? resolveErrorMessage(error));
+      onError?.(error, variables, onMutateResult, context);
+    },
+  });
+}