refactor: RBAC权限系统重构 + UI组件拆分 + 测试修复 + 架构文档

- RBAC: 新增30个权限点、DataScope行级权限、requirePermission守卫，所有57+ Server Action接入权限校验
- UI拆分: exam-form(1623行→11文件)、textbook-reader(744行→7文件)，均降至300行以内
- 测试: 新增5个单元测试文件(19用例)，修复4个集成测试文件(38用例全部通过)
- 架构文档: 新增架构影响地图(004/005)、标准功能清单(006)、差距审计报告(007)
- 项目规则: 架构图优先规则，改码必同步图
- 安全: rehype-sanitize净化、AES加密API Key、权限路由守卫
- 无障碍: skip-link、aria-label、prefers-reduced-motion
- 性能: next/font优化、next/image、代码分割

src/modules/textbooks/components/textbook-reader.tsx

@@ -1,42 +1,33 @@
 "use client"
 
-import { useMemo, useState, useEffect, useRef } from "react"
-import ReactMarkdown from "react-markdown"
-import remarkBreaks from "remark-breaks"
-import remarkGfm from "remark-gfm"
+import { useMemo, useState, useEffect } from "react"
 import { useQueryState, parseAsString } from "nuqs"
-import { Tag, List, Plus, Edit2, Save, Trash2, Pencil, PlusCircle, Share2 } from "lucide-react"
+import { Tag, List, Share2 } from "lucide-react"
 import { toast } from "sonner"
 
 import type { Chapter, KnowledgePoint } from "../types"
-import { createKnowledgePointAction, updateChapterContentAction, deleteKnowledgePointAction, updateKnowledgePointAction } from "../actions"
-import { CreateQuestionDialog } from "@/modules/questions/components/create-question-dialog"
-import { cn } from "@/shared/lib/utils"
+import { updateChapterContentAction } from "../actions"
 import { ScrollArea } from "@/shared/components/ui/scroll-area"
-import { Button } from "@/shared/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
 import { Badge } from "@/shared/components/ui/badge"
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/shared/components/ui/dialog"
-import { Input } from "@/shared/components/ui/input"
-import { Label } from "@/shared/components/ui/label"
-import { Textarea } from "@/shared/components/ui/textarea"
-
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/shared/components/ui/context-menu"
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/components/ui/alert-dialog"
 
 import { ChapterSidebarList } from "./chapter-sidebar-list"
-import { RichTextEditor } from "@/shared/components/ui/rich-text-editor"
+import { KnowledgeGraph } from "./knowledge-graph"
+import { KnowledgePointList } from "./knowledge-point-list"
+import { TextbookContentPanel } from "./textbook-content-panel"
+import { KnowledgePointDialogs } from "./knowledge-point-dialogs"
+import { useTextSelection } from "../hooks/use-text-selection"
+import { useKnowledgePointActions } from "../hooks/use-knowledge-point-actions"
 
 function buildChapterIndex(chapters: Chapter[]) {
   const index = new Map<string, Chapter>()
@@ -52,109 +43,81 @@ function buildChapterIndex(chapters: Chapter[]) {
   return index
 }
 
-export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false, textbookId }: { chapters: Chapter[]; knowledgePoints?: KnowledgePoint[]; canEdit?: boolean; textbookId?: string }) {
+export function TextbookReader({
+  chapters,
+  knowledgePoints = [],
+  canEdit = false,
+  textbookId,
+}: {
+  chapters: Chapter[]
+  knowledgePoints?: KnowledgePoint[]
+  canEdit?: boolean
+  textbookId?: string
+}) {
   const [chapterId, setChapterId] = useQueryState("chapterId", parseAsString.withDefault(""))
   const [activeTab, setActiveTab] = useState("chapters")
   const [highlightedKpId, setHighlightedKpId] = useState<string | null>(null)
-  
-  // Selection & Creation State
-  const [selectedText, setSelectedText] = useState("")
-  const selectionRef = useRef("") // Store selection temporarily to avoid re-renders on pointer down
-  const [createDialogOpen, setCreateDialogOpen] = useState(false)
-  const [isCreating, setIsCreating] = useState(false)
-  const contentRef = useRef<HTMLDivElement>(null)
 
-  // Editing State
   const [isEditing, setIsEditing] = useState(false)
   const [editContent, setEditContent] = useState("")
   const [isSaving, setIsSaving] = useState(false)
 
-  // Knowledge Point Edit State
-  const [editingKp, setEditingKp] = useState<KnowledgePoint | null>(null)
-  const [editKpDialogOpen, setEditKpDialogOpen] = useState(false)
-  const [isUpdatingKp, setIsUpdatingKp] = useState(false)
-
-  // Question Creation State
-  const [questionDialogOpen, setQuestionDialogOpen] = useState(false)
-  const [targetKpForQuestion, setTargetKpForQuestion] = useState<KnowledgePoint | null>(null)
+  const {
+    selectedText,
+    setSelectedText,
+    contentRef,
+    createDialogOpen,
+    setCreateDialogOpen,
+    isCreating,
+    setIsCreating,
+    handleContentPointerDown,
+    handleContextMenuChange,
+  } = useTextSelection()
 
   const index = useMemo(() => buildChapterIndex(chapters), [chapters])
   const selected = chapterId ? index.get(chapterId) ?? null : null
   const selectedId = selected?.id ?? null
 
-  const handleSelect = (chapter: Chapter) => {
-    setChapterId(chapter.id)
-    setIsEditing(false)
-  }
+  const currentChapterKPs = useMemo(() => {
+    if (!selectedId) return []
+    return knowledgePoints.filter((kp) => kp.chapterId === selectedId)
+  }, [knowledgePoints, selectedId])
 
-  // Handle Text Selection via Context Menu
-  // We capture selection on PointerDown (Right Click) to ensure we get the state before any context menu logic runs.
-  // Using onContextMenu directly caused conflicts with Radix UI's ContextMenuTrigger in some cases.
-  const handleContentPointerDown = (e: React.PointerEvent) => {
-    // Only capture on right click (button 2)
-    if (e.button !== 2) return
+  const {
+    editingKp,
+    setEditingKp,
+    editKpDialogOpen,
+    setEditKpDialogOpen,
+    isUpdatingKp,
+    questionDialogOpen,
+    setQuestionDialogOpen,
+    targetKpForQuestion,
+    setTargetKpForQuestion,
+    deleteConfirmOpen,
+    setDeleteConfirmOpen,
+    handleCreateKnowledgePoint,
+    requestDeleteKnowledgePoint,
+    confirmDeleteKnowledgePoint,
+    handleUpdateKnowledgePoint,
+  } = useKnowledgePointActions(
+    textbookId,
+    selectedId,
+    selected?.textbookId,
+    highlightedKpId,
+    setHighlightedKpId,
+    () => {
+      setCreateDialogOpen(false)
+      setActiveTab("knowledge")
+      setSelectedText("")
+    },
+  )
 
-    const selection = window.getSelection()
-    if (!selection || selection.isCollapsed) {
-      selectionRef.current = ""
-      return
-    }
-    
-    // Check if selection is within content area
-    if (contentRef.current && contentRef.current.contains(selection.anchorNode)) {
-      // Store in ref, don't trigger re-render yet
-      selectionRef.current = selection.toString().trim()
-    } else {
-      selectionRef.current = ""
-    }
-  }
+  const [localContent, setLocalContent] = useState<string | null>(null)
 
-  const handleContextMenuChange = (open: boolean) => {
-    if (!open) return
-    
-    // When menu opens, sync ref to state to update UI
-    if (selectionRef.current) {
-        setSelectedText(selectionRef.current)
-    } else {
-        // Fallback: If pointer down didn't capture (e.g. keyboard), try now
-        const selection = window.getSelection()
-        if (selection && !selection.isCollapsed && contentRef.current && contentRef.current.contains(selection.anchorNode)) {
-            const text = selection.toString().trim()
-            selectionRef.current = text
-            setSelectedText(text)
-        } else {
-            setSelectedText("")
-        }
-    }
-  }
-
-  const handleCreateKnowledgePoint = async (formData: FormData) => {
-    if (!selectedId || !selected) return
+  const onCreateKnowledgePoint = async (formData: FormData) => {
     setIsCreating(true)
-    
-    try {
-      const result = await createKnowledgePointAction(
-        selectedId,
-        selected.textbookId,
-        null,
-        formData
-      )
-      
-      if (result.success) {
-        toast.success("知识点已创建")
-        setCreateDialogOpen(false)
-        setActiveTab("knowledge")
-        // Clear selection
-        window.getSelection()?.removeAllRanges()
-        setSelectedText("")
-      } else {
-        toast.error(result.message || "创建知识点失败")
-      }
-    } catch {
-      toast.error("发生错误")
-    } finally {
-      setIsCreating(false)
-    }
+    await handleCreateKnowledgePoint(formData)
+    setIsCreating(false)
   }
 
   const handleSaveContent = async () => {
@@ -162,23 +125,11 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
     setIsSaving(true)
     const result = await updateChapterContentAction(selectedId, editContent, textbookId)
     setIsSaving(false)
-    
+
     if (result.success) {
       toast.success(result.message)
       setIsEditing(false)
-      // Optimistic update might be tricky here without full reload, but let's assume parent revalidates or we rely on router refresh
-      // For now, we manually update the local state if needed, but since we use `chapters` prop which comes from server, 
-      // we ideally want to trigger a refresh.
-      // However, for this component, we can just let the user see the new content if we render `editContent` or rely on props update.
-      // But `chapters` prop won't update automatically unless we router.refresh().
-      // Let's rely on the fact that `selected` comes from `chapters` which might be stale until refresh.
-      // A full solution would use `router.refresh()`.
-      // For now, we can update the `selected.content` in place? No, it's a prop.
-      // We will rely on router refresh in the parent or just simple UI feedback.
-      // Actually, let's trigger a router refresh if possible, but we don't have router here.
-      // We'll just exit edit mode. The content might look old until refresh.
-      // To fix this, we can locally override content.
-      if (selected) selected.content = editContent
+      setLocalContent(editContent)
     } else {
       toast.error(result.message)
     }
@@ -191,180 +142,33 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
     }
   }
 
-  const handleDeleteKnowledgePoint = async (kpId: string, e: React.MouseEvent) => {
-    e.stopPropagation()
-    if (!confirm("确定要删除这个知识点吗？")) return
-    
-    if (!textbookId) return
-    
-    try {
-      const result = await deleteKnowledgePointAction(kpId, textbookId)
-      if (result.success) {
-        toast.success(result.message)
-        if (highlightedKpId === kpId) {
-          setHighlightedKpId(null)
-        }
-      } else {
-        toast.error(result.message)
-      }
-    } catch {
-      toast.error("删除失败")
-    }
+  const handleSelect = (chapter: Chapter) => {
+    setChapterId(chapter.id)
+    setIsEditing(false)
+    setLocalContent(null)
   }
 
-  const handleUpdateKnowledgePoint = async (formData: FormData) => {
-    if (!editingKp || !textbookId) return
-    setIsUpdatingKp(true)
-    
-    try {
-      const result = await updateKnowledgePointAction(editingKp.id, textbookId, null, formData)
-      if (result.success) {
-        toast.success(result.message)
-        setEditKpDialogOpen(false)
-        setEditingKp(null)
-      } else {
-        toast.error(result.message)
-      }
-    } catch {
-      toast.error("更新失败")
-    } finally {
-      setIsUpdatingKp(false)
-    }
-  }
+  const effectiveContent = localContent ?? selected?.content
 
-  // Filter KPs for the current chapter
-  const currentChapterKPs = useMemo(() => {
-    if (!selectedId) return []
-    return knowledgePoints.filter(kp => kp.chapterId === selectedId)
-  }, [knowledgePoints, selectedId])
-
-  const graphLayout = useMemo(() => {
-    if (currentChapterKPs.length === 0) {
-      return { nodes: [], edges: [], width: 0, height: 0 }
-    }
-
-    const byId = new Map<string, KnowledgePoint>()
-    for (const kp of currentChapterKPs) byId.set(kp.id, kp)
-
-    const children = new Map<string, string[]>()
-    const roots: string[] = []
-
-    for (const kp of currentChapterKPs) {
-      if (kp.parentId && byId.has(kp.parentId)) {
-        const arr = children.get(kp.parentId) ?? []
-        arr.push(kp.id)
-        children.set(kp.parentId, arr)
-      } else {
-        roots.push(kp.id)
-      }
-    }
-
-    const levelMap = new Map<string, number>()
-    const levels: string[][] = []
-    const queue = [...roots].map((id) => ({ id, level: 0 }))
-
-    if (queue.length === 0) {
-      for (const kp of currentChapterKPs) queue.push({ id: kp.id, level: 0 })
-    }
-
-    while (queue.length > 0) {
-      const item = queue.shift()
-      if (!item) continue
-      if (levelMap.has(item.id)) continue
-      levelMap.set(item.id, item.level)
-      if (!levels[item.level]) levels[item.level] = []
-      levels[item.level].push(item.id)
-      const kids = children.get(item.id) ?? []
-      for (const kid of kids) {
-        if (!levelMap.has(kid)) queue.push({ id: kid, level: item.level + 1 })
-      }
-    }
-
-    for (const kp of currentChapterKPs) {
-      if (!levelMap.has(kp.id)) {
-        const level = levels.length
-        levelMap.set(kp.id, level)
-        if (!levels[level]) levels[level] = []
-        levels[level].push(kp.id)
-      }
-    }
-
-    const nodeWidth = 160
-    const nodeHeight = 52
-    const gapX = 40
-    const gapY = 90
-    const maxCount = Math.max(...levels.map((l) => l.length), 1)
-    const width = maxCount * (nodeWidth + gapX) + gapX
-    const height = levels.length * (nodeHeight + gapY) + gapY
-
-    const positions = new Map<string, { x: number; y: number }>()
-    levels.forEach((ids, level) => {
-      ids.forEach((id, index) => {
-        const x = gapX + index * (nodeWidth + gapX)
-        const y = gapY + level * (nodeHeight + gapY)
-        positions.set(id, { x, y })
-      })
-    })
-
-    const nodes = currentChapterKPs.map((kp) => {
-      const pos = positions.get(kp.id) ?? { x: gapX, y: gapY }
-      return { ...kp, x: pos.x, y: pos.y }
-    })
-
-    const edges = currentChapterKPs
-      .filter((kp) => kp.parentId && positions.has(kp.parentId))
-      .map((kp) => {
-        const parentPos = positions.get(kp.parentId as string)!
-        const childPos = positions.get(kp.id)!
-        return {
-          id: `${kp.parentId}-${kp.id}`,
-          x1: parentPos.x + nodeWidth / 2,
-          y1: parentPos.y + nodeHeight,
-          x2: childPos.x + nodeWidth / 2,
-          y2: childPos.y,
-        }
-      })
-
-    return { nodes, edges, width, height }
-  }, [currentChapterKPs])
-
-  // Pre-process content to mark knowledge points
   const processedContent = useMemo(() => {
-    if (!selected?.content) return ""
-    let content = selected.content
-    
-    // Sort KPs by name length descending to handle overlapping names
+    if (!effectiveContent) return ""
+    let content = effectiveContent
     const sortedKPs = [...currentChapterKPs].sort((a, b) => b.name.length - a.name.length)
-    
-    // We use a temporary replacement strategy to avoid nested replacements
-    // This is simple but works for most cases
-    // We replace "Name" with "[Name](kp://id)"
-    
-    for (const kp of sortedKPs) {
-       // Escape regex special characters
-       const escapedName = kp.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-       // Case insensitive match, but preserve original text casing
-       // We use a simplified lookahead to avoid replacing inside existing links if possible, 
-       // but perfect markdown parsing is hard with regex. 
-       // For now, we assume KPs don't overlap in a way that breaks things often.
-       const regex = new RegExp(`(${escapedName})`, 'gi')
-       
-       // We only replace if not already part of a link (simplified check)
-       // A robust parser would be better, but regex is acceptable for this level
-       content = content.replace(regex, `[$1](#kp-${kp.id})`)
-    }
-    
-    return content
-  }, [selected?.content, currentChapterKPs])
 
-  // Scroll to highlighted KP
+    for (const kp of sortedKPs) {
+      const escapedName = kp.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+      const regex = new RegExp(`(${escapedName})`, "gi")
+      content = content.replace(regex, `[$1](#kp-${kp.id})`)
+    }
+
+    return content
+  }, [effectiveContent, currentChapterKPs])
+
   useEffect(() => {
     if (highlightedKpId) {
-      // Find first element by data attribute
       const el = document.querySelector(`[data-kp-id="${highlightedKpId}"]`)
       if (el) {
         el.scrollIntoView({ behavior: "smooth", block: "center" })
-        // Add temporary highlight effect
         el.classList.add("ring-2", "ring-primary", "ring-offset-2")
         setTimeout(() => {
           el.classList.remove("ring-2", "ring-primary", "ring-offset-2")
@@ -387,7 +191,9 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
                 <Tag className="h-4 w-4" />
                 知识点
                 {currentChapterKPs.length > 0 && (
-                   <Badge variant="secondary" className="ml-1 px-1 py-0 h-5 text-[10px]">{currentChapterKPs.length}</Badge>
+                  <Badge variant="secondary" className="ml-1 px-1 py-0 h-5 text-[10px]">
+                    {currentChapterKPs.length}
+                  </Badge>
                 )}
               </TabsTrigger>
               <TabsTrigger value="graph" className="gap-2" disabled={!selectedId}>
@@ -396,97 +202,43 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
               </TabsTrigger>
             </TabsList>
           </div>
-          
+
           <TabsContent value="chapters" className="flex-1 min-h-0 mt-0">
             <ScrollArea className="flex-1 h-full px-2">
               <div className="space-y-1 pb-4">
-                <ChapterSidebarList 
-                   chapters={chapters}
-                   selectedChapterId={selectedId || undefined}
-                   onSelectChapter={handleSelect}
-                   textbookId={textbookId || ""}
-                   canEdit={canEdit}
+                <ChapterSidebarList
+                  chapters={chapters}
+                  selectedChapterId={selectedId || undefined}
+                  onSelectChapter={handleSelect}
+                  textbookId={textbookId || ""}
+                  canEdit={canEdit}
                 />
               </div>
             </ScrollArea>
           </TabsContent>
 
           <TabsContent value="knowledge" className="flex-1 min-h-0 mt-0">
-             {!selectedId ? (
-                <div className="flex h-full items-center justify-center text-muted-foreground p-4 text-center text-sm">
-                  请选择一个章节查看知识点。
-                </div>
-             ) : currentChapterKPs.length === 0 ? (
-                <div className="flex h-full items-center justify-center text-muted-foreground p-4 text-center text-sm">
-                  该章节暂无知识点。
-                </div>
-             ) : (
-                <ScrollArea className="flex-1 h-full px-2">
-                  <div className="space-y-2 pb-4">
-                    {currentChapterKPs.map((kp) => (
-                      <div 
-                        key={kp.id} 
-                        className={cn(
-                          "p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors cursor-pointer",
-                          highlightedKpId === kp.id && "border-primary bg-primary/5"
-                        )}
-                        onClick={() => setHighlightedKpId(kp.id)}
-                      >
-                        <div className="flex items-start justify-between gap-2">
-                          <h4 className="text-sm font-medium leading-none">{kp.name}</h4>
-                          <div className="flex items-center gap-1">
-                             <Badge variant="outline" className="text-[10px] h-5 px-1">Lv.{kp.level}</Badge>
-                             {canEdit && (
-                               <div className="flex items-center gap-1 ml-1">
-                                 <Button 
-                                   variant="ghost" 
-                                   size="icon" 
-                                   className="h-5 w-5 text-muted-foreground hover:text-foreground"
-                                   onClick={(e) => {
-                                     e.stopPropagation()
-                                     setTargetKpForQuestion(kp)
-                                     setQuestionDialogOpen(true)
-                                   }}
-                                   title="创建相关题目"
-                                 >
-                                   <PlusCircle className="h-3 w-3" />
-                                 </Button>
-                                 <Button 
-                                   variant="ghost" 
-                                   size="icon" 
-                                   className="h-5 w-5 text-muted-foreground hover:text-foreground"
-                                   onClick={(e) => {
-                                     e.stopPropagation()
-                                     setEditingKp(kp)
-                                     setEditKpDialogOpen(true)
-                                   }}
-                                   title="编辑知识点"
-                                 >
-                                   <Pencil className="h-3 w-3" />
-                                 </Button>
-                                 <Button 
-                                   variant="ghost" 
-                                   size="icon" 
-                                   className="h-5 w-5 text-muted-foreground hover:text-destructive"
-                                   onClick={(e) => handleDeleteKnowledgePoint(kp.id, e)}
-                                   title="删除知识点"
-                                 >
-                                   <Trash2 className="h-3 w-3" />
-                                 </Button>
-                               </div>
-                             )}
-                          </div>
-                        </div>
-                        {kp.description && (
-                          <p className="mt-2 text-xs text-muted-foreground line-clamp-2">
-                            {kp.description}
-                          </p>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                </ScrollArea>
-             )}
+            {!selectedId ? (
+              <div className="flex h-full items-center justify-center text-muted-foreground p-4 text-center text-sm">
+                请选择一个章节查看知识点。
+              </div>
+            ) : (
+              <KnowledgePointList
+                knowledgePoints={currentChapterKPs}
+                canEdit={canEdit}
+                highlightedKpId={highlightedKpId}
+                onHighlight={setHighlightedKpId}
+                onEdit={(kp) => {
+                  setEditingKp(kp)
+                  setEditKpDialogOpen(true)
+                }}
+                onDelete={requestDeleteKnowledgePoint}
+                onCreateQuestion={(kp) => {
+                  setTargetKpForQuestion(kp)
+                  setQuestionDialogOpen(true)
+                }}
+              />
+            )}
           </TabsContent>
 
           <TabsContent value="graph" className="flex-1 min-h-0 mt-0">
@@ -494,250 +246,73 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
               <div className="flex h-full items-center justify-center text-muted-foreground p-4 text-center text-sm">
                 请选择一个章节查看知识图谱。
               </div>
-            ) : currentChapterKPs.length === 0 ? (
-              <div className="flex h-full items-center justify-center text-muted-foreground p-4 text-center text-sm">
-                该章节暂无知识点。
-              </div>
             ) : (
-              <ScrollArea className="flex-1 h-full px-2">
-                <div
-                  className="relative"
-                  style={{ width: graphLayout.width, height: graphLayout.height }}
-                >
-                  <svg
-                    width={graphLayout.width}
-                    height={graphLayout.height}
-                    className="absolute inset-0"
-                  >
-                    {graphLayout.edges.map((edge) => (
-                      <line
-                        key={edge.id}
-                        x1={edge.x1}
-                        y1={edge.y1}
-                        x2={edge.x2}
-                        y2={edge.y2}
-                        stroke="hsl(var(--border))"
-                        strokeWidth={2}
-                      />
-                    ))}
-                  </svg>
-                  {graphLayout.nodes.map((node) => (
-                    <button
-                      key={node.id}
-                      type="button"
-                      className={cn(
-                        "absolute rounded-lg border bg-card px-3 py-2 text-left text-sm shadow-sm hover:bg-accent/50",
-                        highlightedKpId === node.id && "border-primary bg-primary/5"
-                      )}
-                      style={{ left: node.x, top: node.y, width: 160, height: 52 }}
-                      onClick={() => setHighlightedKpId(node.id)}
-                    >
-                      <div className="font-medium truncate">{node.name}</div>
-                      {node.description && (
-                        <div className="text-[10px] text-muted-foreground truncate">
-                          {node.description}
-                        </div>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              </ScrollArea>
+              <KnowledgeGraph
+                knowledgePoints={currentChapterKPs}
+                selectedId={highlightedKpId}
+                onHighlight={setHighlightedKpId}
+              />
             )}
           </TabsContent>
         </Tabs>
       </div>
 
       <div className="lg:col-span-8 flex flex-col min-h-0 relative">
-        <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>添加知识点</DialogTitle>
-              <DialogDescription>
-                从选中的文本创建知识点。
-              </DialogDescription>
-            </DialogHeader>
-            <form action={handleCreateKnowledgePoint}>
-              <div className="grid gap-4 py-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="name">名称</Label>
-                  <Input id="name" name="name" defaultValue={selectedText} required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="description">描述（可选）</Label>
-                  <Textarea id="description" name="description" placeholder="请输入描述..." />
-                </div>
-              </div>
-              <DialogFooter>
-                <Button type="button" variant="outline" onClick={() => setCreateDialogOpen(false)} disabled={isCreating}>
-                  取消
-                </Button>
-                <Button type="submit" disabled={isCreating}>
-                  {isCreating ? "创建中..." : "创建"}
-                </Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
+        <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>确认删除</AlertDialogTitle>
+              <AlertDialogDescription>
+                确定要删除这个知识点吗？此操作无法撤销。
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>取消</AlertDialogCancel>
+              <AlertDialogAction onClick={confirmDeleteKnowledgePoint}>删除</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
 
-        <Dialog open={editKpDialogOpen} onOpenChange={setEditKpDialogOpen}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>编辑知识点</DialogTitle>
-              <DialogDescription>
-                修改知识点的名称和描述。
-              </DialogDescription>
-            </DialogHeader>
-            <form action={handleUpdateKnowledgePoint}>
-              <div className="grid gap-4 py-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="edit-name">显示名称</Label>
-                  <Input id="edit-name" name="name" defaultValue={editingKp?.name} required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="edit-description">描述（可选）</Label>
-                  <Textarea id="edit-description" name="description" defaultValue={editingKp?.description || ""} placeholder="请输入描述..." />
-                </div>
-
-                <div className="space-y-2 border rounded-md p-3 bg-muted/20">
-                  <div className="flex items-center justify-between">
-                    <Label htmlFor="edit-anchorText" className="text-muted-foreground text-xs flex items-center gap-1">
-                      高级：关联文本 (影响文中高亮)
-                    </Label>
-                  </div>
-                  <div className="pt-2">
-                    <Input 
-                      key={editingKp?.id} // Force re-render when kp changes
-                      id="edit-anchorText" 
-                      name="anchorText" 
-                      defaultValue={editingKp?.anchorText || editingKp?.name} 
-                      className="text-sm font-mono"
-                      required 
-                    />
-                    <p className="text-[10px] text-muted-foreground mt-1">
-                      修改此字段会改变文中被高亮匹配的文字。通常保持与原文一致。
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <DialogFooter>
-                <Button type="button" variant="outline" onClick={() => setEditKpDialogOpen(false)} disabled={isUpdatingKp}>
-                  取消
-                </Button>
-                <Button type="submit" disabled={isUpdatingKp}>
-                  {isUpdatingKp ? "保存中..." : "保存"}
-                </Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
-
-        <CreateQuestionDialog 
-          open={questionDialogOpen} 
-          onOpenChange={setQuestionDialogOpen}
-          defaultKnowledgePointIds={targetKpForQuestion ? [targetKpForQuestion.id] : []}
-          defaultContent={targetKpForQuestion ? `Please explain the knowledge point: ${targetKpForQuestion.name}` : ""}
-          defaultType="text"
+        <KnowledgePointDialogs
+          createDialogOpen={createDialogOpen}
+          setCreateDialogOpen={setCreateDialogOpen}
+          selectedText={selectedText}
+          isCreating={isCreating}
+          onCreateKnowledgePoint={onCreateKnowledgePoint}
+          editKpDialogOpen={editKpDialogOpen}
+          setEditKpDialogOpen={setEditKpDialogOpen}
+          editingKp={editingKp}
+          isUpdatingKp={isUpdatingKp}
+          onUpdateKnowledgePoint={handleUpdateKnowledgePoint}
+          questionDialogOpen={questionDialogOpen}
+          setQuestionDialogOpen={setQuestionDialogOpen}
+          targetKpForQuestion={targetKpForQuestion}
         />
 
-        {selected ? (
-          <>
-            <div className="flex items-center justify-between mb-4 pb-2 border-b px-2 shrink-0">
-              <h2 className="text-xl font-bold tracking-tight line-clamp-1">{selected.title}</h2>
-              {canEdit && (
-                <div className="flex gap-2">
-                  {isEditing ? (
-                      <>
-                          <Button size="sm" variant="ghost" onClick={() => setIsEditing(false)} disabled={isSaving}>
-                              取消
-                          </Button>
-                          <Button size="sm" onClick={handleSaveContent} disabled={isSaving}>
-                              <Save className="mr-2 h-4 w-4" />
-                              {isSaving ? "保存中..." : "保存"}
-                          </Button>
-                      </>
-                  ) : (
-                      <Button size="sm" variant="outline" onClick={startEditing}>
-                          <Edit2 className="mr-2 h-4 w-4" />
-                          编辑内容
-                      </Button>
-                  )}
-                </div>
-              )}
-            </div>
-            <ScrollArea className="flex-1 min-h-0 px-2">
-              {isEditing ? (
-                  <div className="h-full">
-                      <RichTextEditor
-                          value={editContent}
-                          onChange={setEditContent}
-                          className="min-h-[500px] border-none shadow-none"
-                      />
-                  </div>
-              ) : (
-                <ContextMenu onOpenChange={handleContextMenuChange}>
-                  <ContextMenuTrigger asChild>
-                    <div 
-                      className="p-4 min-h-full" 
-                      ref={contentRef}
-                      onPointerDown={handleContentPointerDown}
-                    >
-                      {selected.content ? (
-                        <div className="prose prose-sm dark:prose-invert max-w-none">
-                          <ReactMarkdown 
-                            remarkPlugins={[remarkGfm, remarkBreaks]}
-                            components={{
-                              a: ({ href, children, ...props }) => {
-                                if (href?.startsWith("#kp-")) {
-                                  const id = href.replace("#kp-", "")
-                                  const isHighlighted = highlightedKpId === id
-                                  return (
-                                    <span 
-                                      data-kp-id={id}
-                                      className={cn(
-                                        "font-medium text-primary cursor-pointer hover:underline decoration-dashed underline-offset-4 transition-all duration-300",
-                                        isHighlighted && "bg-yellow-300 dark:bg-yellow-600 text-black dark:text-white rounded px-1 py-0.5 shadow-sm scale-110 inline-block mx-0.5 font-bold ring-2 ring-yellow-400/50 dark:ring-yellow-500/50"
-                                      )}
-                                      onClick={(e) => {
-                                        e.preventDefault()
-                                        setHighlightedKpId(id)
-                                        setActiveTab("knowledge")
-                                      }}
-                                      title="点击查看知识点详情"
-                                    >
-                                      {children}
-                                    </span>
-                                  )
-                                }
-                                return <a href={href} {...props}>{children}</a>
-                              }
-                            }}
-                          >
-                            {processedContent}
-                          </ReactMarkdown>
-                        </div>
-                      ) : (
-                        <div className="text-muted-foreground italic py-8 text-center">暂无内容</div>
-                      )}
-                    </div>
-                  </ContextMenuTrigger>
-                  <ContextMenuContent>
-                    <ContextMenuItem 
-                      disabled={!selectedText} 
-                      onClick={() => setCreateDialogOpen(true)}
-                    >
-                      <Plus className="mr-2 h-4 w-4" />
-                      添加知识点
-                    </ContextMenuItem>
-                  </ContextMenuContent>
-                </ContextMenu>
-              )}
-            </ScrollArea>
-          </>
-        ) : (
-          <div className="flex-1 flex items-center justify-center text-muted-foreground px-2">
-            请选择一个章节开始阅读。
-          </div>
-        )}
+        <TextbookContentPanel
+          selected={selected}
+          isEditing={isEditing}
+          editContent={editContent}
+          setEditContent={setEditContent}
+          canEdit={canEdit}
+          knowledgePoints={currentChapterKPs}
+          highlightedKpId={highlightedKpId}
+          onHighlight={setHighlightedKpId}
+          onSwitchToKnowledgeTab={() => setActiveTab("knowledge")}
+          contentRef={contentRef}
+          onPointerDown={handleContentPointerDown}
+          onContextMenuChange={handleContextMenuChange}
+          selectedText={selectedText}
+          createDialogOpen={createDialogOpen}
+          setCreateDialogOpen={setCreateDialogOpen}
+          isCreating={isCreating}
+          onCreateKnowledgePoint={onCreateKnowledgePoint}
+          startEditing={startEditing}
+          cancelEditing={() => setIsEditing(false)}
+          saveContent={handleSaveContent}
+          isSaving={isSaving}
+          processedContent={processedContent}
+        />
       </div>
     </div>
   )