update:Dialog替换

2026-08-26 16:48:19 +08:00
parent d7f3db1cc4
commit e326cc1a93
16 changed files with 738 additions and 675 deletions
@@ -0,0 +1,74 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "~/components/ui/alert-dialog"
+import { cn } from "~/lib/utils"
+
+import {
+  dialogPrimaryButtonClass,
+  dialogSecondaryButtonClass,
+} from "./AppFormDialog"
+
+type ConfirmDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description: string
+  confirmLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
+  onConfirm: () => void | Promise<void>
+}
+
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "确定",
+  cancelLabel = "取消",
+  destructive = false,
+  onConfirm,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="rounded-[11px] border-[#dce4eb] bg-white">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-[#1c2d42]">{title}</AlertDialogTitle>
+          <AlertDialogDescription className="text-[#56687c]">
+            {description}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            variant="outline"
+            size="sm"
+            className={dialogSecondaryButtonClass}
+          >
+            {cancelLabel}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            variant={destructive ? "destructive" : "default"}
+            size="sm"
+            className={cn(
+              destructive
+                ? "h-[37px] gap-[7px] rounded-md border-0 bg-[#d75b5b] px-[15px] text-xs font-[650] text-white hover:bg-[#a94f4f]"
+                : dialogPrimaryButtonClass,
+            )}
+            onClick={() => void onConfirm()}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+export { ConfirmDialog }