完整性更新

现在已经实现了大部分基础功能

src/modules/textbooks/components/knowledge-point-panel.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { useState } from "react"
+import { useRouter } from "next/navigation"
 import { Card, CardContent } from "@/shared/components/ui/card"
-import { Badge } from "@/shared/components/ui/badge"
 import { Button } from "@/shared/components/ui/button"
 import { Tag, Trash2 } from "lucide-react"
 import { KnowledgePoint } from "../types"
@@ -9,6 +10,16 @@ import { CreateKnowledgePointDialog } from "./create-knowledge-point-dialog"
 import { deleteKnowledgePointAction } from "../actions"
 import { toast } from "sonner"
 import { ScrollArea } from "@/shared/components/ui/scroll-area"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/components/ui/alert-dialog"
 
 interface KnowledgePointPanelProps {
   knowledgePoints: KnowledgePoint[]
@@ -21,15 +32,33 @@ export function KnowledgePointPanel({
   selectedChapterId, 
   textbookId 
 }: KnowledgePointPanelProps) {
+  const router = useRouter()
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<KnowledgePoint | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
   
-  const handleDelete = async (id: string) => {
-    if (!confirm("Are you sure you want to delete this knowledge point?")) return
-    
-    const result = await deleteKnowledgePointAction(id, textbookId)
-    if (result.success) {
-      toast.success(result.message)
-    } else {
-      toast.error(result.message)
+  const requestDelete = (kp: KnowledgePoint) => {
+    setDeleteTarget(kp)
+    setShowDeleteDialog(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    setIsDeleting(true)
+    try {
+      const result = await deleteKnowledgePointAction(deleteTarget.id, textbookId)
+      if (result.success) {
+        toast.success(result.message)
+        setShowDeleteDialog(false)
+        setDeleteTarget(null)
+        router.refresh()
+      } else {
+        toast.error(result.message)
+      }
+    } catch {
+      toast.error("Failed to delete knowledge point")
+    } finally {
+      setIsDeleting(false)
     }
   }
 
@@ -53,7 +82,7 @@ export function KnowledgePointPanel({
         )}
       </div>
 
-      <ScrollArea className="flex-1 -mx-2 px-2">
+      <ScrollArea className="flex-1 min-h-0 -mx-2 px-2">
         {selectedChapterId ? (
             chapterKPs.length > 0 ? (
                 <div className="space-y-3">
@@ -74,8 +103,8 @@ export function KnowledgePointPanel({
                                     <Button
                                         variant="ghost"
                                         size="icon"
-                                        className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1"
-                                        onClick={() => handleDelete(kp.id)}
+                                        className="h-6 w-6 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive hover:bg-destructive/10 -mt-1 -mr-1"
+                                        onClick={() => requestDelete(kp)}
                                     >
                                         <Trash2 className="h-3.5 w-3.5" />
                                     </Button>
@@ -95,6 +124,40 @@ export function KnowledgePointPanel({
             </div>
         )}
       </ScrollArea>
+
+      <AlertDialog
+        open={showDeleteDialog}
+        onOpenChange={(open) => {
+          if (isDeleting) return
+          setShowDeleteDialog(open)
+          if (!open) setDeleteTarget(null)
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete knowledge point?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {deleteTarget ? (
+                <>
+                  This will permanently delete <span className="font-medium text-foreground">{deleteTarget.name}</span>.
+                </>
+              ) : (
+                "This will permanently delete the selected knowledge point."
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={handleDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }