diff --git a/src/modules/lesson-preparation/components/paper-editor/inline-node.tsx b/src/modules/lesson-preparation/components/paper-editor/inline-node.tsx new file mode 100644 index 0000000..b9e5fb6 --- /dev/null +++ b/src/modules/lesson-preparation/components/paper-editor/inline-node.tsx @@ -0,0 +1,108 @@ +"use client"; + +import { useTranslations } from "next-intl"; +import type { Block, LessonPlanNode } from "../../types"; +import { InlineQaDialog } from "./inline-qa-dialog"; +import { useLessonPlanEditor } from "../../hooks/use-lesson-plan-editor"; + +interface Props { + node: LessonPlanNode; +} + +/** + * V4 inline-node:展开到正文流的节点渲染。 + * 用 Inter 字体 + 左侧细线区分正文(Fraunces)。 + */ +export function InlineNode({ node }: Props) { + const t = useTranslations("lessonPreparation"); + const toggleExpand = useLessonPlanEditor((s) => s.toggleExpand); + + // 师生交互节点用专门的对话体渲染 + if (node.type === "interaction") { + return ; + } + + // 其他节点类型:用 InlineNodeBody 渲染只读摘要 + // 完整编辑在右栏详情面板 + const dotColorVar = `var(--lp-dot-${node.type})`; + + return ( +
+
+ + {node.type} + + {node.id.slice(-4)} + + +
+

{node.title}

+
+ {/* 简化:各 block 类型的 inline 渲染在 InlineNodeBody 中处理 readonly 模式 */} + +
+
+ ); +} + +/** + * 各节点类型的 inline 只读渲染。 + * 这里给出最常见的几种的简化摘要,完整编辑在右栏详情面板。 + */ +function InlineNodeBody({ node }: { node: Block }) { + const data = node.data; + // 按类型渲染摘要 + switch (node.type) { + case "objective": { + const d = data as { objectives: { dimension: string; text: string }[] }; + if (!d.objectives?.length) return

; + return ( + + ); + } + case "summary": { + const d = data as { summaryPoints: string[] }; + if (!d.summaryPoints?.length) return

; + return ( + + ); + } + case "exercise": { + const d = data as { items: unknown[] }; + return

{d.items?.length ?? 0} 道练习

; + } + default: + return

{node.title}

; + } +}