sync-docs-and-fixes

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

@@ -5,13 +5,8 @@ import ReactMarkdown from "react-markdown"
 import remarkBreaks from "remark-breaks"
 import remarkGfm from "remark-gfm"
 import { useQueryState, parseAsString } from "nuqs"
-import { Tag, List, Plus, Edit2, Save, Trash2, Pencil, PlusCircle, ChevronDown, ChevronUp } from "lucide-react"
+import { Tag, List, Plus, Edit2, Save, Trash2, Pencil, PlusCircle, Share2 } from "lucide-react"
 import { toast } from "sonner"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/shared/components/ui/collapsible"
 
 import type { Chapter, KnowledgePoint } from "../types"
 import { createKnowledgePointAction, updateChapterContentAction, deleteKnowledgePointAction, updateKnowledgePointAction } from "../actions"
@@ -243,6 +238,96 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
     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 ""
@@ -293,7 +378,7 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
       <div className="lg:col-span-4 lg:border-r lg:pr-6 flex flex-col min-h-0">
         <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">
           <div className="flex items-center justify-between mb-4 px-2 shrink-0">
-            <TabsList className="grid w-full grid-cols-2">
+            <TabsList className="grid w-full grid-cols-3">
               <TabsTrigger value="chapters" className="gap-2">
                 <List className="h-4 w-4" />
                 章节目录
@@ -305,6 +390,10 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
                    <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}>
+                <Share2 className="h-4 w-4" />
+                图谱
+              </TabsTrigger>
             </TabsList>
           </div>
           
@@ -399,6 +488,62 @@ export function TextbookReader({ chapters, knowledgePoints = [], canEdit = false
                 </ScrollArea>
              )}
           </TabsContent>
+
+          <TabsContent value="graph" 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="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>
+            )}
+          </TabsContent>
         </Tabs>
       </div>