update:Dialog替换

2026-09-02 10:10:41 +08:00
parent ed58344add
commit d0f0fd2922
16 changed files with 738 additions and 675 deletions
@@ -0,0 +1,90 @@
+import type { ReactNode } from "react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import { cn } from "~/lib/utils"
+
+/** 与系统管理弹窗 footer 一致的次要按钮样式 */
+export const dialogSecondaryButtonClass =
+  "h-[37px] gap-[7px] rounded-md border-[#d8e1e9] bg-white px-[15px] text-xs font-[650] text-[#56687c]"
+
+/** 与系统管理弹窗 footer 一致的主按钮样式 */
+export const dialogPrimaryButtonClass =
+  "h-[37px] gap-[7px] rounded-md border border-[#126ac3] bg-gradient-to-br from-[#1881e7] to-[#1268c9] px-[15px] text-xs font-[650] text-white shadow-[0_6px_15px_rgb(20_111_202/18%)] enabled:hover:from-[#1175d8] enabled:hover:to-[#0e5bad]"
+
+const EYEBROW_CLASS =
+  "text-[9px] font-extrabold tracking-[0.12em] text-[#2d82d4]"
+
+const TITLE_CLASS = "mt-1 text-[19px] font-normal text-[#1c2d42]"
+
+type AppFormDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  eyebrow?: string
+  title?: ReactNode
+  titleId?: string
+  children: ReactNode
+  footer?: ReactNode
+  contentClassName?: string
+  bodyClassName?: string
+  showCloseButton?: boolean
+  size?: "compact" | "panel"
+}
+
+function AppFormDialog({
+  open,
+  onOpenChange,
+  eyebrow,
+  title,
+  titleId,
+  children,
+  footer,
+  contentClassName,
+  bodyClassName,
+  showCloseButton = true,
+  size = "compact",
+}: AppFormDialogProps) {
+  const maxWidth =
+    size === "panel"
+      ? "sm:max-w-[min(520px,calc(100vw-40px))]"
+      : "sm:max-w-[min(480px,calc(100vw-40px))]"
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={showCloseButton}
+        className={cn(
+          "flex max-h-[80vh] flex-col gap-0 overflow-hidden rounded-[11px] border-[#dce4eb] bg-white p-0 text-[#1c2d42] shadow-[0_24px_70px_rgb(8_27_48/25%)] ring-0",
+          maxWidth,
+          contentClassName,
+        )}
+      >
+        {eyebrow || title ? (
+          <DialogHeader className="shrink-0 space-y-0 border-b border-[#e7ecf1] px-[22px] pb-4 pt-5 text-left">
+            {eyebrow ? <span className={EYEBROW_CLASS}>{eyebrow}</span> : null}
+            {title ? (
+              <DialogTitle id={titleId} className={TITLE_CLASS}>
+                {title}
+              </DialogTitle>
+            ) : null}
+          </DialogHeader>
+        ) : null}
+        <div className={cn("min-h-0 flex-1 overflow-y-auto", bodyClassName)}>
+          {children}
+        </div>
+        {footer ? (
+          <DialogFooter className="mt-0 shrink-0 flex-row justify-end gap-2 border-t border-[#e8edf2] bg-white px-[22px] py-3.5 sm:justify-end">
+            {footer}
+          </DialogFooter>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { AppFormDialog }
@@ -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 }