完整性更新

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

src/modules/textbooks/components/textbook-content-layout.tsx

@@ -1,12 +1,15 @@
 "use client"
 
 import { useState } from "react"
+import ReactMarkdown from "react-markdown"
+import remarkBreaks from "remark-breaks"
+import remarkGfm from "remark-gfm"
 import { Chapter, KnowledgePoint } from "../types"
 import { ChapterSidebarList } from "./chapter-sidebar-list"
 import { KnowledgePointPanel } from "./knowledge-point-panel"
 import { ScrollArea } from "@/shared/components/ui/scroll-area"
 import { Button } from "@/shared/components/ui/button"
-import { Edit2, Save, Plus } from "lucide-react"
+import { Edit2, Save } from "lucide-react"
 import { CreateChapterDialog } from "./create-chapter-dialog"
 import { updateChapterContentAction } from "../actions"
 import { toast } from "sonner"
@@ -54,17 +57,18 @@ export function TextbookContentLayout({ chapters, knowledgePoints, textbookId }:
             <h3 className="font-semibold">Chapters</h3>
             <CreateChapterDialog textbookId={textbookId} />
         </div>
-        <ScrollArea className="flex-1 -mx-2 px-2">
+        <ScrollArea className="flex-1 px-2">
             <ChapterSidebarList 
                 chapters={chapters} 
                 selectedChapterId={selectedChapter?.id}
                 onSelectChapter={handleSelectChapter}
+                textbookId={textbookId}
             />
         </ScrollArea>
       </div>
 
       {/* Middle: Content Viewer/Editor (6 cols) */}
-      <div className="col-span-6 flex flex-col h-full px-2">
+      <div className="col-span-6 flex flex-col h-full px-2 min-h-0">
         {selectedChapter ? (
             <>
                 <div className="flex items-center justify-between mb-4 pb-2 border-b">
@@ -89,8 +93,8 @@ export function TextbookContentLayout({ chapters, knowledgePoints, textbookId }:
                     </div>
                 </div>
                 
-                <ScrollArea className="flex-1">
-                    <div className="p-4 h-full">
+                <ScrollArea className="flex-1 min-h-0">
+                    <div className="p-4 min-h-full">
                         {isEditing ? (
                             <Textarea 
                                 className="min-h-[500px] font-mono text-sm"
@@ -101,7 +105,9 @@ export function TextbookContentLayout({ chapters, knowledgePoints, textbookId }:
                         ) : (
                             <div className="prose prose-sm dark:prose-invert max-w-none">
                                 {selectedChapter.content ? (
-                                    <div className="whitespace-pre-wrap">{selectedChapter.content}</div>
+                                    <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+                                      {selectedChapter.content}
+                                    </ReactMarkdown>
                                 ) : (
                                     <div className="text-muted-foreground italic py-8 text-center">
                                         No content available. Click edit to add content.