diff --git a/apps/fronted/src/components/editor/custom/CustomItem.tsx b/apps/fronted/src/components/editor/custom/CustomItem.tsx index c6ac4fc..2b59772 100644 --- a/apps/fronted/src/components/editor/custom/CustomItem.tsx +++ b/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 ( - - - - - e.stopPropagation()} - > - - 确认删除 - - 您确定要删除 {title || "此项"} 吗？此操作无法撤销。 - - - - 取消 - - 删除 - - - - - ); -}; - 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(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 = ({ )} - { + e.stopPropagation(); + setDeleteDialogOpen(true); + }} + > + + + { + onClose={() => setDeleteDialogOpen(false)} + onConfirm={() => { removeCustomItem(sectionId, item.id); setExpandedId(null); + setDeleteDialogOpen(false); }} /> + void; } -interface DeleteConfirmDialogProps { - schoolName: string; - onDelete: () => void; -} - const EducationEditor: React.FC = ({ education, onSave @@ -121,77 +106,12 @@ const EducationEditor: React.FC = ({ ); }; -const DeleteConfirmDialog: React.FC = ({ - schoolName, - onDelete -}) => { - return ( - - - - - e.stopPropagation()} - > - - - 确认删除经历 - - - 您确定要删除经历 {schoolName} 吗？此操作无法撤销。 - - - - - 取消 - - 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" - )} - > - 删除 - - - - - ); -}; - const EducationItem = ({ education }: { education: Education }) => { + const { updateEducation, deleteEducation } = useResumeStore(); const dragControls = useDragControls(); const [expandedId, setExpandedId] = useState(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 }) => { )} - { + + setDeleteDialogOpen(false)} + onConfirm={() => { deleteEducation(education.id); setExpandedId(null); + setDeleteDialogOpen(false); }} /> + void; } -interface DeleteConfirmDialogProps { - projectName: string; - onDelete: () => void; -} - -const DeleteConfirmDialog: React.FC = ({ - projectName, - onDelete -}) => { - return ( - - - - - e.stopPropagation()} - > - - - 确认删除经历 - - - 您确定要删除经历 {projectName} 吗？此操作无法撤销。 - - - - - 取消 - - void }) => { - e.preventDefault(); - onDelete(); - }} - className={cn("bg-red-600 hover:bg-red-700 text-white")} - > - 删除 - - - - - ); -}; - const ProjectEditor: React.FC = ({ experience, onSave @@ -148,6 +75,7 @@ const ExperienceItem = ({ experience }: { experience: Experience }) => { const [expandedId, setExpandedId] = useState(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 }) => { )} - { + + + setDeleteDialogOpen(false)} + onConfirm={() => { deleteExperience(experience.id); setExpandedId(null); + setDeleteDialogOpen(false); }} /> + void; } -interface DeleteConfirmDialogProps { - projectName: string; - onDelete: () => void; -} - -const DeleteConfirmDialog: React.FC = ({ - projectName, - onDelete -}) => { - return ( - - - - - e.stopPropagation()} - > - - - 确认删除项目 - - - 您确定要删除项目 {projectName} 吗？此操作无法撤销。 - - - - - 取消 - - void }) => { - e.preventDefault(); - onDelete(); - }} - className={cn("bg-red-600 hover:bg-red-700 text-white")} - > - 删除 - - - - - ); -}; - const ProjectEditor: React.FC = ({ project, onSave }) => { const handleChange = (field: keyof Project, value: string) => { onSave({ @@ -149,11 +76,11 @@ const ProjectEditor: React.FC = ({ project, onSave }) => { }; const ProjectItem = ({ project }: { project: Project }) => { + const { updateProjects, deleteProject } = useResumeStore(); const dragControls = useDragControls(); const [expandedId, setExpandedId] = useState(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 }) => { )} - { + + setDeleteDialogOpen(false)} + onConfirm={() => { deleteProject(project.id); setExpandedId(null); + setDeleteDialogOpen(false); }} /> + void; + onConfirm: () => void; + title: string; +} + +const ThemeModal = ({ + isOpen, + onClose, + onConfirm, + title +}: ThemedAlertDialogProps) => { + const [isHovered, setIsHovered] = useState(false); + + const modalContent = { + delete: { + title: "确定要删除吗", + description: ( + <> + + 您确定要删除 + {title} + + 吗？ + + ), + confirmText: "删除", + illustration: ( + + + + + + + ) + } + }; + + const content = modalContent["delete"]; + + return ( + + e.stopPropagation()} + className="max-w-md rounded-[32px] border-none dark:bg-neutral-900 bg-white p-0 shadow-xl" + > +
+
+
+
+
+ +
+ + {content.illustration} + + + + + {content.title} + + + {content.description} + {/* 渲染成组件 */} + + + + + + 取消 + + 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" + > + {content.confirmText} + + + +
+
+ + + ); +}; + +export default ThemeModal;