perf: unify delete modal

apps/fronted/src/components/editor/custom/CustomItem.tsx

@@ -9,20 +9,10 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { useResumeStore } from "@/store/useResumeStore";
 import { GripVertical, Eye, EyeOff, ChevronDown, Trash2 } from "lucide-react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from "@/components/ui/alert-dialog";
 import Field from "../Field";
 
 import { CustomItem as CustomItemType } from "@/types/resume";
+import ThemeModal from "@/components/shared/ThemeModal";
 const CustomItemEditor = ({
   item,
   onSave
@@ -71,54 +61,6 @@ const CustomItemEditor = ({
   );
 };
 
-const DeleteConfirmDialog = ({
-  title,
-  onDelete
-}: {
-  title: string;
-  onDelete: () => void;
-}) => {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn(
-            "text-sm",
-            "dark:hover:bg-red-900/50 dark:text-red-400 hover:bg-red-50 text-red-600"
-          )}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Trash2 className="w-4 h-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent
-        className={cn("dark:bg-neutral-900 dark:border-neutral-800 bg-white")}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <AlertDialogHeader
-          className={cn("dark:text-neutral-200 text-gray-900")}
-        >
-          <AlertDialogTitle>确认删除</AlertDialogTitle>
-          <AlertDialogDescription>
-            您确定要删除 {title || "此项"} 吗？此操作无法撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={onDelete}
-            className="bg-red-600 hover:bg-red-700 text-white"
-          >
-            删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-
 const CustomItem = ({
   item,
   sectionId
@@ -126,11 +68,11 @@ const CustomItem = ({
   item: CustomItemType;
   sectionId: string;
 }) => {
+  const { updateCustomItem, removeCustomItem } = useResumeStore();
   const dragControls = useDragControls();
   const [expandedId, setExpandedId] = useState<string | null>(null);
-  const { updateCustomItem, removeCustomItem } = useResumeStore();
-
   const [isUpdating, setIsUpdating] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const handleVisibilityToggle = useCallback(
     (e: React.MouseEvent) => {
@@ -224,13 +166,31 @@ const CustomItem = ({
                 <EyeOff className="w-4 h-4" />
               )}
             </Button>
-            <DeleteConfirmDialog
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "text-sm",
+                "dark:hover:bg-red-900/50 dark:text-red-400 hover:bg-red-50 text-red-600"
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                setDeleteDialogOpen(true);
+              }}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            <ThemeModal
+              isOpen={deleteDialogOpen}
               title={item.title}
-              onDelete={() => {
+              onClose={() => setDeleteDialogOpen(false)}
+              onConfirm={() => {
                 removeCustomItem(sectionId, item.id);
                 setExpandedId(null);
+                setDeleteDialogOpen(false);
               }}
             />
+
             <motion.div
               initial={false}
               animate={{

apps/fronted/src/components/editor/education/EducationItem.tsx

@@ -12,17 +12,7 @@ import {
 import { GripVertical, Eye, EyeOff, ChevronDown, Trash2 } from "lucide-react";
 import { useState, useCallback } from "react";
 import Field from "../Field";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from "@/components/ui/alert-dialog";
+import ThemeModal from "@/components/shared/ThemeModal";
 
 interface EducationEditorProps {
   education: Education;
@@ -31,11 +21,6 @@ interface EducationEditorProps {
   onCancel: () => void;
 }
 
-interface DeleteConfirmDialogProps {
-  schoolName: string;
-  onDelete: () => void;
-}
-
 const EducationEditor: React.FC<EducationEditorProps> = ({
   education,
   onSave
@@ -121,77 +106,12 @@ const EducationEditor: React.FC<EducationEditorProps> = ({
   );
 };
 
-const DeleteConfirmDialog: React.FC<DeleteConfirmDialogProps> = ({
-  schoolName,
-  onDelete
-}) => {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn(
-            "text-sm",
-            "dark:hover:bg-red-900/50 dark:text-red-400",
-            "hover:bg-red-50 text-red-600"
-          )}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Trash2 className="w-4 h-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent
-        className={cn(
-          "dark:bg-neutral-900 dark:border-neutral-800",
-          "bg-white"
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <AlertDialogHeader>
-          <AlertDialogTitle
-            className={cn("dark:text-neutral-200", "text-gray-900")}
-          >
-            确认删除经历
-          </AlertDialogTitle>
-          <AlertDialogDescription
-            className={cn("dark:text-neutral-400", "text-gray-500")}
-          >
-            您确定要删除经历 {schoolName} 吗？此操作无法撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel
-            className={cn(
-              "dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:border-neutral-700"
-            )}
-          >
-            取消
-          </AlertDialogCancel>
-          <AlertDialogAction
-            onClick={(e: { preventDefault: () => void }) => {
-              e.preventDefault();
-              onDelete();
-            }}
-            className={cn(
-              "dark:bg-red-600 dark:hover:bg-red-700 dark:text-white",
-              "bg-red-600 hover:bg-red-700 text-white"
-            )}
-          >
-            删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-
 const EducationItem = ({ education }: { education: Education }) => {
+  const { updateEducation, deleteEducation } = useResumeStore();
   const dragControls = useDragControls();
   const [expandedId, setExpandedId] = useState<string | null>(null);
-  const { updateEducation, deleteEducation } = useResumeStore();
-
   const [isUpdating, setIsUpdating] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const handleVisibilityToggle = useCallback(
     (e: React.MouseEvent) => {
@@ -307,13 +227,31 @@ const EducationItem = ({ education }: { education: Education }) => {
                 <EyeOff className="w-4 h-4" />
               )}
             </Button>
-            <DeleteConfirmDialog
-              schoolName={education.school}
-              onDelete={() => {
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "text-sm",
+                "dark:hover:bg-red-900/50 dark:text-red-400 hover:bg-red-50 text-red-600"
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                setDeleteDialogOpen(true);
+              }}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            <ThemeModal
+              isOpen={deleteDialogOpen}
+              title={education.school}
+              onClose={() => setDeleteDialogOpen(false)}
+              onConfirm={() => {
                 deleteEducation(education.id);
                 setExpandedId(null);
+                setDeleteDialogOpen(false);
               }}
             />
+
             <motion.div
               initial={false}
               animate={{

apps/fronted/src/components/editor/experience/ExperienceItem.tsx

@@ -11,18 +11,8 @@ import {
 import { ChevronDown, Eye, EyeOff, GripVertical, Trash2 } from "lucide-react";
 import { useCallback, useState } from "react";
 import Field from "../Field";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from "@/components/ui/alert-dialog";
 import { Experience } from "@/types/resume";
+import ThemeModal from "@/components/shared/ThemeModal";
 
 interface ProjectEditorProps {
   experience: Experience;
@@ -31,69 +21,6 @@ interface ProjectEditorProps {
   onCancel: () => void;
 }
 
-interface DeleteConfirmDialogProps {
-  projectName: string;
-  onDelete: () => void;
-}
-
-const DeleteConfirmDialog: React.FC<DeleteConfirmDialogProps> = ({
-  projectName,
-  onDelete
-}) => {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn(
-            "text-sm",
-            "hover:bg-red-50 text-red-600 dark:hover:bg-red-900/50 dark:text-red-400"
-          )}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Trash2 className="w-4 h-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent
-        className={cn("bg-white dark:bg-neutral-900 dark:border-neutral-800")}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <AlertDialogHeader>
-          <AlertDialogTitle
-            className={cn("text-gray-900 dark:text-neutral-200")}
-          >
-            确认删除经历
-          </AlertDialogTitle>
-          <AlertDialogDescription
-            className={cn("text-gray-500 dark:text-neutral-400")}
-          >
-            您确定要删除经历 {projectName} 吗？此操作无法撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel
-            className={cn(
-              "dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:border-neutral-700"
-            )}
-          >
-            取消
-          </AlertDialogCancel>
-          <AlertDialogAction
-            onClick={(e: { preventDefault: () => void }) => {
-              e.preventDefault();
-              onDelete();
-            }}
-            className={cn("bg-red-600 hover:bg-red-700 text-white")}
-          >
-            删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-
 const ProjectEditor: React.FC<ProjectEditorProps> = ({
   experience,
   onSave
@@ -148,6 +75,7 @@ const ExperienceItem = ({ experience }: { experience: Experience }) => {
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const { updateExperience, deleteExperience } = useResumeStore();
   const [isUpdating, setIsUpdating] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const handleVisibilityToggle = useCallback(
     (e: React.MouseEvent) => {
@@ -258,13 +186,32 @@ const ExperienceItem = ({ experience }: { experience: Experience }) => {
                 <EyeOff className="w-4 h-4" />
               )}
             </Button>
-            <DeleteConfirmDialog
-              projectName={experience.company}
-              onDelete={() => {
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "text-sm",
+                "dark:hover:bg-red-900/50 dark:text-red-400 hover:bg-red-50 text-red-600"
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                setDeleteDialogOpen(true);
+              }}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            <ThemeModal
+              isOpen={deleteDialogOpen}
+              title={experience.company}
+              onClose={() => setDeleteDialogOpen(false)}
+              onConfirm={() => {
                 deleteExperience(experience.id);
                 setExpandedId(null);
+                setDeleteDialogOpen(false);
               }}
             />
+
             <motion.div
               initial={false}
               animate={{

apps/fronted/src/components/editor/project/ProjectItem.tsx

@@ -11,17 +11,7 @@ import {
 import { ChevronDown, Eye, EyeOff, GripVertical, Trash2 } from "lucide-react";
 import { useCallback, useState } from "react";
 import Field from "../Field";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from "@/components/ui/alert-dialog";
+import ThemeModal from "@/components/shared/ThemeModal";
 
 interface Project {
   id: string;
@@ -39,69 +29,6 @@ interface ProjectEditorProps {
   onCancel: () => void;
 }
 
-interface DeleteConfirmDialogProps {
-  projectName: string;
-  onDelete: () => void;
-}
-
-const DeleteConfirmDialog: React.FC<DeleteConfirmDialogProps> = ({
-  projectName,
-  onDelete
-}) => {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn(
-            "text-sm",
-            "dark:hover:bg-red-900/50 dark:text-red-400 hover:bg-red-50 text-red-600"
-          )}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Trash2 className="w-4 h-4" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent
-        className={cn("dark:bg-neutral-900 dark:border-neutral-800 bg-white")}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <AlertDialogHeader>
-          <AlertDialogTitle
-            className={cn("dark:text-neutral-200 text-gray-900")}
-          >
-            确认删除项目
-          </AlertDialogTitle>
-          <AlertDialogDescription
-            className={cn("dark:text-neutral-400 text-gray-500")}
-          >
-            您确定要删除项目 {projectName} 吗？此操作无法撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel
-            className={cn(
-              "dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:border-neutral-700"
-            )}
-          >
-            取消
-          </AlertDialogCancel>
-          <AlertDialogAction
-            onClick={(e: { preventDefault: () => void }) => {
-              e.preventDefault();
-              onDelete();
-            }}
-            className={cn("bg-red-600 hover:bg-red-700 text-white")}
-          >
-            删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-
 const ProjectEditor: React.FC<ProjectEditorProps> = ({ project, onSave }) => {
   const handleChange = (field: keyof Project, value: string) => {
     onSave({
@@ -149,11 +76,11 @@ const ProjectEditor: React.FC<ProjectEditorProps> = ({ project, onSave }) => {
 };
 
 const ProjectItem = ({ project }: { project: Project }) => {
+  const { updateProjects, deleteProject } = useResumeStore();
   const dragControls = useDragControls();
   const [expandedId, setExpandedId] = useState<string | null>(null);
-  const { updateProjects, deleteProject } = useResumeStore();
-
   const [isUpdating, setIsUpdating] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const handleVisibilityToggle = useCallback(
     (e: React.MouseEvent) => {
@@ -264,13 +191,31 @@ const ProjectItem = ({ project }: { project: Project }) => {
                 <EyeOff className="w-4 h-4" />
               )}
             </Button>
-            <DeleteConfirmDialog
-              projectName={project.name}
-              onDelete={() => {
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "text-sm",
+                "dark:hover:bg-red-900/50 dark:text-red-400 hover:bg-red-50 text-red-600"
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                setDeleteDialogOpen(true);
+              }}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            <ThemeModal
+              isOpen={deleteDialogOpen}
+              title={project.name}
+              onClose={() => setDeleteDialogOpen(false)}
+              onConfirm={() => {
                 deleteProject(project.id);
                 setExpandedId(null);
+                setDeleteDialogOpen(false);
               }}
             />
+
             <motion.div
               initial={false}
               animate={{

apps/fronted/src/components/shared/ThemeModal.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "@/components/ui/alert-dialog";
+
+interface ThemedAlertDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+}
+
+const ThemeModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title
+}: ThemedAlertDialogProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const modalContent = {
+    delete: {
+      title: "确定要删除吗",
+      description: (
+        <>
+          <span>
+            您确定要删除
+            <span className="px-2 font-semibold text-primary">{title}</span>
+          </span>
+          吗？
+        </>
+      ),
+      confirmText: "删除",
+      illustration: (
+        <svg
+          className="h-32 w-32"
+          viewBox="0 0 200 200"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="100" cy="100" r="70" fill="hsl(262.1, 83.3%, 57.8%)" />
+          <rect
+            x="70"
+            y="85"
+            width="60"
+            height="40"
+            rx="5"
+            stroke="white"
+            strokeWidth="4"
+          />
+          <path
+            d="M85 85V75C85 70 90 65 95 65H105C110 65 115 70 115 75V85"
+            stroke="white"
+            strokeWidth="4"
+          />
+          <path
+            d="M80 95L120 115M120 95L80 115"
+            stroke="white"
+            strokeWidth="4"
+            strokeLinecap="round"
+          />
+        </svg>
+      )
+    }
+  };
+
+  const content = modalContent["delete"];
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent
+        onClick={(e) => e.stopPropagation()}
+        className="max-w-md rounded-[32px] border-none dark:bg-neutral-900 bg-white p-0 shadow-xl"
+      >
+        <div className="relative overflow-hidden p-6">
+          <div className="absolute -left-16 -top-16 h-32 w-32 rounded-full bg-primary/20" />
+          <div className="absolute -bottom-16 -right-16 h-32 w-32 rounded-full bg-primary/20" />
+          <div className="absolute left-4 top-4 h-2 w-2 rounded-sm bg-primary" />
+          <div className="absolute bottom-4 right-4 h-2 w-2 rounded-sm bg-primary" />
+
+          <div className="relative flex flex-col items-center">
+            <motion.div
+              initial={{ y: 10 }}
+              animate={{ y: 0 }}
+              transition={{ duration: 0.4 }}
+              className="mb-6"
+            >
+              {content.illustration}
+            </motion.div>
+
+            <AlertDialogHeader>
+              <AlertDialogTitle className="text-center text-xl font-bold text-gray-900 dark:text-neutral-200">
+                {content.title}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-center text-gray-500 dark:text-neutral-400">
+                {content.description}
+                {/* 渲染成组件 */}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+
+            <AlertDialogFooter className="mt-8 flex w-full gap-4 sm:flex-row">
+              <AlertDialogCancel className="flex-1 rounded-full dark:bg-gray-800 dark:text-neutral-200  text-base font-semibold text-gray-800 ">
+                取消
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={onConfirm}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+                className="group relative flex-1 overflow-hidden rounded-full bg-primary px-6 py-3 text-base font-semibold text-white hover:bg-primary"
+              >
+                <span className="relative z-10">{content.confirmText}</span>
+                <motion.div
+                  className="absolute inset-0 bg-red-600"
+                  initial={false}
+                  animate={isHovered ? { scale: 1.1 } : { scale: 1 }}
+                />
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </div>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default ThemeModal;