完整性更新

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

src/modules/textbooks/components/chapter-sidebar-list.tsx

@@ -1,7 +1,8 @@
 "use client"
 
 import { useState } from "react"
-import { ChevronRight, FileText, Folder, MoreHorizontal } from "lucide-react"
+import { ChevronRight, FileText, Folder, MoreHorizontal, Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
 import { Chapter } from "../types"
 import {
   Collapsible,
@@ -9,20 +10,55 @@ import {
   CollapsibleTrigger,
 } from "@/shared/components/ui/collapsible"
 import { Button } from "@/shared/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/components/ui/alert-dialog"
 import { cn } from "@/shared/lib/utils"
+import { CreateChapterDialog } from "./create-chapter-dialog"
+import { deleteChapterAction } from "../actions"
 
 interface ChapterItemProps {
   chapter: Chapter
   level?: number
   selectedId?: string
   onSelect: (chapter: Chapter) => void
+  textbookId: string
 }
 
-function ChapterItem({ chapter, level = 0, selectedId, onSelect }: ChapterItemProps) {
+function ChapterItem({ chapter, level = 0, selectedId, onSelect, textbookId }: ChapterItemProps) {
   const [isOpen, setIsOpen] = useState(false)
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
   const hasChildren = chapter.children && chapter.children.length > 0
   const isSelected = chapter.id === selectedId
 
+  const handleDelete = async () => {
+    setIsDeleting(true)
+    const res = await deleteChapterAction(chapter.id, textbookId)
+    setIsDeleting(false)
+    if (res.success) {
+      toast.success(res.message)
+      setShowDeleteDialog(false)
+    } else {
+      toast.error(res.message)
+    }
+  }
+
   return (
     <div className={cn("w-full", level > 0 && "ml-4 border-l pl-2")}>
       <Collapsible open={isOpen} onOpenChange={setIsOpen}>
@@ -53,7 +89,7 @@ function ChapterItem({ chapter, level = 0, selectedId, onSelect }: ChapterItemPr
           
           <div 
             className={cn(
-                "flex flex-1 items-center gap-2 px-2 py-1.5 text-sm cursor-pointer",
+                "flex flex-1 min-w-0 items-center gap-2 px-2 py-1.5 text-sm cursor-pointer",
                 level === 0 ? "font-medium" : "text-muted-foreground",
                 isSelected && "text-accent-foreground font-medium"
             )}
@@ -64,19 +100,33 @@ function ChapterItem({ chapter, level = 0, selectedId, onSelect }: ChapterItemPr
             ) : (
               <FileText className="h-4 w-4 text-muted-foreground/50" />
             )}
-            <span className="truncate">{chapter.title}</span>
+            <span className="truncate flex-1 min-w-0">{chapter.title}</span>
             
-            <Button
-              variant="ghost"
-              size="icon"
-              className="ml-auto h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
-              onClick={(e) => {
-                  e.stopPropagation();
-                  // Dropdown menu logic here
-              }}
-            >
-              <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
-            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="ml-auto h-6 w-6 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity focus:opacity-100"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onSelect={() => setShowCreateDialog(true)}
+                >
+                  <Plus />
+                  Add Subchapter
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive" onSelect={() => setShowDeleteDialog(true)}>
+                  <Trash2 />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
 
@@ -90,12 +140,42 @@ function ChapterItem({ chapter, level = 0, selectedId, onSelect }: ChapterItemPr
                     level={level + 1} 
                     selectedId={selectedId}
                     onSelect={onSelect}
+                    textbookId={textbookId}
                 />
               ))}
             </div>
           </CollapsibleContent>
         )}
       </Collapsible>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete chapter?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will delete this chapter and all its subchapters and linked knowledge points.
+            </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>
+
+      <CreateChapterDialog
+        textbookId={textbookId}
+        parentId={chapter.id}
+        trigger={null}
+        open={showCreateDialog}
+        onOpenChange={setShowCreateDialog}
+      />
     </div>
   )
 }
@@ -103,11 +183,13 @@ function ChapterItem({ chapter, level = 0, selectedId, onSelect }: ChapterItemPr
 export function ChapterSidebarList({ 
     chapters, 
     selectedChapterId, 
-    onSelectChapter 
+    onSelectChapter,
+    textbookId,
 }: { 
     chapters: Chapter[], 
     selectedChapterId?: string,
     onSelectChapter: (chapter: Chapter) => void 
+    textbookId: string
 }) {
   return (
     <div className="space-y-1">
@@ -117,6 +199,7 @@ export function ChapterSidebarList({
             chapter={chapter} 
             selectedId={selectedChapterId}
             onSelect={onSelectChapter}
+            textbookId={textbookId}
         />
       ))}
     </div>