深度优化 ui

2026-09-29 11:34:18 +08:00
parent 916a4f5ffc
commit 3faf960f35
27 changed files with 6510 additions and 2232 deletions
@@ -0,0 +1,65 @@
+"use client";
+
+import { useRef, useState, type ComponentProps } from "react";
+import { useFormStatus } from "react-dom";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/components/ui/alert-dialog";
+
+export function SubmitButton({
+  children,
+  confirm,
+  ...props
+}: ComponentProps<typeof Button> & { confirm?: string }) {
+  const { pending } = useFormStatus();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <>
+      <Button
+        {...props}
+        ref={ref}
+        type="submit"
+        size="sm"
+        disabled={pending || props.disabled}
+        onClick={(event) => {
+          if (confirm) {
+            event.preventDefault();
+            setOpen(true);
+          }
+        }}
+      >
+        {pending && <Loader2 className="animate-spin" aria-hidden="true" />}
+        {pending ? "处理中…" : children}
+      </Button>
+      {confirm && (
+        <AlertDialog open={open} onOpenChange={setOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>确认{children}？</AlertDialogTitle>
+              <AlertDialogDescription>{confirm}</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>取消</AlertDialogCancel>
+              <AlertDialogAction
+                variant="destructive"
+                onClick={() => ref.current?.form?.requestSubmit(ref.current)}
+              >
+                确认{children}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </>
+  );
+}