课文锚点时间线布局

课文作为主轴,节点锚定到课文位置,形成教学流程时间线

备课编辑器 — 课文锚点时间线
📖 秋天(第一课时) 语文 · 一年级上册 · 第一单元
💾 已保存 · 2 分钟前 📋 版本历史 💾 保存
1
2
3
4
5
秋天

天气凉了,树叶黄了, 一片片叶子从树上落下来。

天空那么蓝,那么高。 一群大雁往南飞,

一会儿排成个"人"字, 一会儿排成个"一"字。

啊!秋天来了!

💡 选中文字可"关联节点",或从右侧拖动节点到课文某字前
教学流程时间线
1 💡 导入 📍 锚定
"天气凉了,树叶黄了" → 提问:你见过秋天的树叶吗?
2 📝 文本研习 📍 锚定
"天空那么蓝,那么高" → 赏析:叠词的运用
3 📚 新授 📍 锚定
"一会儿排成个'人'字" → 讲解:大雁南飞
4 ✏️ 练习 📍 锚定
"一会儿排成个'一'字" → 3 道题
5 📌 小结 📍 锚定
"啊!秋天来了!" → 总结全文
未锚定节点
🎯 教学目标 全局
⭐ 重难点 全局
🏠 作业 课后
📋 板书设计 全局
💭 教学反思 课后
+ 添加节点

核心交互:两种锚定方式

方式 1:拖动节点到课文某字前
右侧节点
💡 导入
课文
天气凉了,|树叶黄了,
一片片叶子从树上落下来。
💡 节点锚定到此位置
方式 2:选中文字 → 关联节点
1. 选中文字
天空那么蓝,那么高
2. 弹出菜单选择节点
💡 导入 📝 文本研习 📚 新授 ✏️ 练习 📌 小结 + 新建节点

数据模型:锚点(Anchor)

// 节点锚点 — 记录节点与课文位置的关联
interface NodeAnchor {
  nodeId: string; // 关联的节点 ID
  type: "point" | "range"; // 点锚点 or 范围锚点
  start: number; // 课文纯文本偏移量(字符)
  end?: number; // range 锚点的结束偏移
  textPreview?: string; // 锚定文字预览(便于回显)
}

// LessonPlanDocument 扩展
interface LessonPlanDocument {
  version: 3; // 升级到 v3
  nodes: LessonPlanNode[];
  edges: LessonPlanEdge[]; // 保留:节点间连线
  anchors: NodeAnchor[]; // 新增:节点与课文的锚点
}

这个设计的优势

优势

  • 教学流程可视化:节点按课文位置排序,天然形成时间线
  • 节点与课文强关联:每个节点对应课文的哪部分一目了然
  • 双模式锚定:拖动(点锚点)+ 选文字(范围锚点)
  • 保留连线能力:节点间仍可连线(如"导入→新授"流程线)
  • 未锚定节点:目标/重难点/作业/板书/反思等全局节点不强制锚定

需要注意

  • 课文偏移量需基于纯文本(Markdown 渲染后需映射)
  • 课文内容变更后锚点可能失效(需重新定位或提示)
  • 数据结构升级到 v3,需迁移现有 v2 数据