备课编辑器 · 正文节点布局对比

三种交互形态对比。共同前提:正文节点变成真实的富文本编辑器(Tiptap),支持加粗/标题/列表/图片真实排版,锚点用 Mark 系统而非字符串偏移。三种方案只差在"正文和教学节点如何排布"。

教材正文
教学目标
新授
练习
总结
锚点标记
方案 A

保留画布 · 正文节点变真实编辑器

最小改动。React Flow 画布不变,把中央那个 520px 假正文框换成真正的 Tiptap 富文本编辑器卡片,可拖拽缩放到更大。

已保存
教学目标
新授
📖 教材正文(可编辑副本) 右键锚定
第一章 · 走进大自然 春天的轻轻吹过田野, 带来泥土的芬芳。
观察要点:
• 花朵的颜色变化
叶片的形状
• 气温的回升
BI H1 🖼
课堂练习
总结
选中节点
✓ 优点
  • 改动最小,画布交互不变
  • 保留"思维导图"式空间关系
  • 锚点系统改造可独立进行
✗ 缺点
  • 长文档在画布上仍受限,需频繁缩放
  • 编辑器卡片和教学节点抢空间
  • 移动端几乎不可用
方案 B

文档流为主(类 Notion)

正文和教学节点都在同一文档流里,按顺序拼成一篇完整教案。左侧大纲,中间文档,右侧选中节点详情。

已保存
大纲
正文
目标
新授
练习
总结
📖 教材正文
第一章 · 走进大自然
春天的轻轻吹过田野,带来泥土的芬芳。 叶片的形状
🎯 教学目标
认识春天的自然现象…
📚 新授
引导学生观察…
✏ 课堂练习
画一画你看到的春天…
选中: 新授
✓ 优点
  • 编辑体验最好,长文档自然滚动
  • 所见即所得,适合打印导出
  • 移动端友好
  • 教学节点和正文同流,关系清晰
✗ 缺点
  • 失去"画布"的空间思维导图感
  • 需要重构数据模型(节点顺序流)
  • 锚点仍需跨"正文块"定位
方案 C

双栏 · 正文编辑器 + 节点面板

正文富文本编辑器独占主区域(类 A4 文档页),教学节点在右侧面板编辑,左侧是节点树。正文与节点通过锚点关联,互不混排。

已保存
节点树
📖 正文
🎯 目标
📚 新授
✏ 练习
📝 总结
第一章 · 走进大自然
春天的轻轻吹过田野,带来泥土的芬芳。

观察要点:
• 花朵的颜色变化
叶片的形状
• 气温的回升
B I H1 🖼
🎯 教学目标
+ AI 生成
✓ 优点
  • 正文编辑区最大、最专注
  • 正文与节点分离,职责清晰
  • 锚点只在正文里,定位简单
  • 保留节点树导航,不丢结构
✗ 缺点
  • 失去画布的连线/空间感
  • 节点间关系靠树而非图表达
  • 需要新增"节点树"组件
★ 推荐:在"正文必须好编辑"这个核心诉求下,C 兼顾了编辑体验和结构清晰,改动量适中。