完整性更新

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

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

@@ -0,0 +1,156 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import ReactMarkdown from "react-markdown"
+import remarkBreaks from "remark-breaks"
+import remarkGfm from "remark-gfm"
+import { useQueryState, parseAsString } from "nuqs"
+import { ChevronRight, FileText, Folder } from "lucide-react"
+
+import type { Chapter } from "../types"
+import { cn } from "@/shared/lib/utils"
+import { ScrollArea } from "@/shared/components/ui/scroll-area"
+import { Button } from "@/shared/components/ui/button"
+
+function buildChapterIndex(chapters: Chapter[]) {
+  const index = new Map<string, Chapter>()
+
+  const walk = (nodes: Chapter[]) => {
+    for (const node of nodes) {
+      index.set(node.id, node)
+      if (node.children && node.children.length > 0) walk(node.children)
+    }
+  }
+
+  walk(chapters)
+  return index
+}
+
+function ReaderChapterItem({
+  chapter,
+  level = 0,
+  selectedId,
+  onSelect,
+}: {
+  chapter: Chapter
+  level?: number
+  selectedId: string | null
+  onSelect: (chapterId: string) => void
+}) {
+  const hasChildren = Boolean(chapter.children && chapter.children.length > 0)
+  const [open, setOpen] = useState(level === 0)
+  const isSelected = selectedId === chapter.id
+
+  return (
+    <div className={cn("w-full", level > 0 && "ml-4 border-l pl-2")}>
+      <div
+        className={cn(
+          "flex items-center group py-1 rounded-md transition-colors",
+          isSelected ? "bg-accent text-accent-foreground" : "hover:bg-muted/50"
+        )}
+      >
+        {hasChildren ? (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 shrink-0 p-0 hover:bg-muted"
+            onClick={() => setOpen((v) => !v)}
+          >
+            <ChevronRight className={cn("h-4 w-4 text-muted-foreground transition-transform", open && "rotate-90")} />
+          </Button>
+        ) : (
+          <div className="w-6 shrink-0" />
+        )}
+
+        <button
+          type="button"
+          className={cn(
+            "flex flex-1 min-w-0 items-center gap-2 px-2 py-1.5 text-sm text-left cursor-pointer",
+            level === 0 ? "font-medium" : "text-muted-foreground",
+            isSelected && "text-accent-foreground font-medium"
+          )}
+          onClick={() => onSelect(chapter.id)}
+        >
+          {hasChildren ? (
+            <Folder className={cn("h-4 w-4", open ? "text-primary" : "text-muted-foreground/70")} />
+          ) : (
+            <FileText className="h-4 w-4 text-muted-foreground/50" />
+          )}
+          <span className="truncate flex-1 min-w-0">{chapter.title}</span>
+        </button>
+      </div>
+
+      {hasChildren && open ? (
+        <div className="pt-1">
+          {chapter.children!.map((child) => (
+            <ReaderChapterItem
+              key={child.id}
+              chapter={child}
+              level={level + 1}
+              selectedId={selectedId}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export function TextbookReader({ chapters }: { chapters: Chapter[] }) {
+  const [chapterId, setChapterId] = useQueryState("chapterId", parseAsString.withDefault(""))
+
+  const index = useMemo(() => buildChapterIndex(chapters), [chapters])
+  const selected = chapterId ? index.get(chapterId) ?? null : null
+  const selectedId = selected?.id ?? null
+
+  const handleSelect = (id: string) => setChapterId(id)
+
+  return (
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-12 h-full">
+      <div className="lg:col-span-4 lg:border-r lg:pr-6 flex flex-col min-h-0">
+        <div className="flex items-center justify-between mb-4 px-2 shrink-0">
+          <h3 className="font-semibold">Chapters</h3>
+        </div>
+        <ScrollArea className="flex-1 min-h-0 px-2">
+          <div className="space-y-1">
+            {chapters.map((chapter) => (
+              <ReaderChapterItem
+                key={chapter.id}
+                chapter={chapter}
+                selectedId={selectedId}
+                onSelect={handleSelect}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+
+      <div className="lg:col-span-8 flex flex-col min-h-0">
+        {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>
+            </div>
+            <ScrollArea className="flex-1 min-h-0 px-2">
+              <div className="p-4 min-h-full">
+                {selected.content ? (
+                  <div className="prose prose-sm dark:prose-invert max-w-none">
+                    <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>{selected.content}</ReactMarkdown>
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground italic py-8 text-center">No content available.</div>
+                )}
+              </div>
+            </ScrollArea>
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-muted-foreground px-2">
+            Select a chapter to start reading.
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+