diff --git a/src/layout/main.tsx b/src/layout/main.tsx index 782f8b8..440242a 100644 --- a/src/layout/main.tsx +++ b/src/layout/main.tsx @@ -6,6 +6,7 @@ import { useImageStore } from "../stores/imageStore"; import EmojiPicker, { EmojiClickData } from "emoji-picker-react"; import { PlusIcon, HeartIcon, SearchIcon, ChevronLeftIcon, HamburgerIcon, DeleteIcon } from '../components/icons'; import { cn } from '../utils/cn'; +import { ConfirmDialog } from '../components/ConfirmDialog'; export default () => { const { categories, activeCategory, setActiveCategory, getCategoryCount, getFavoritesCount, addCategory, deleteCategory } = useCategoryStore(); @@ -20,6 +21,8 @@ export default () => { const { searchQuery, setSearchQuery } = useImageStore(); const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 }); const [selectedCategoryId, setSelectedCategoryId] = useState(null); + const [isDeleteCategoryModalOpen, setIsDeleteCategoryModalOpen] = useState(false); + const [categoryToDelete, setCategoryToDelete] = useState(null); // 处理分类点击 const handleCategoryClick = (categoryId: string) => { @@ -72,8 +75,17 @@ export default () => { const handleDeleteCategory = () => { if (selectedCategoryId) { - deleteCategory(selectedCategoryId); - setSelectedCategoryId(null); + setCategoryToDelete(selectedCategoryId); + setIsDeleteCategoryModalOpen(true); + setSelectedCategoryId(null); // 关闭右键菜单 + } + }; + + const handleConfirmDeleteCategory = () => { + if (categoryToDelete) { + deleteCategory(categoryToDelete); + setCategoryToDelete(null); + setIsDeleteCategoryModalOpen(false); } }; @@ -403,6 +415,20 @@ export default () => { + + { + setIsDeleteCategoryModalOpen(false); + setCategoryToDelete(null); + }} + confirmText="Delete" + cancelText="Cancel" + type="error" + /> ); };