正文占位符标记布局

正文中嵌入占位符标记(特殊符号),默认接近透明,选中节点时完整显示

备课编辑器 — 默认状态(占位符 10% 透明度)
📖 秋天(第一课时) 语文 · 一年级上册
💾 已保存 💾 保存
📜 课文正文 🔒 固定
秋天

天气凉了,树叶黄了,

天空那么蓝,那么高。

一群大雁往南飞,

一会儿排成个"人"字

一会儿排成个"一"字

啊!秋天来了!

1 💡 导入
提问:你见过秋天的树叶吗?
2 📝 文本研习
赏析:叠词的运用
3 📚 新授
讲解:大雁南飞
4 ✏️ 练习
3 道题
5 📌 小结
总结全文
占位符默认 10% · 选中节点时 100% 显示

选中"导入"节点时的状态变化

默认 — 占位符 ① 10% 透明度
天气凉了,树叶黄了,
占位符几乎不可见 · 画布干净
选中"导入"节点 — 占位符 ① 100% + 连线显示
天气凉了,树叶黄了,
占位符完整显示 · 连线高亮 · 锚定位置清晰

占位符样式选项

选择占位符在正文中的视觉呈现方式

天气凉了

数字圆圈

①②③④⑤ — 与节点编号对应,简洁清晰

💡天气凉了

节点图标

💡📝📚✏️📌 — 与节点类型图标一致,直观

天气凉了

彩色圆点

● — 极简,颜色对应节点,不干扰阅读

【1】天气凉了

方括号编号

【1】【2】【3】— 类似脚注标记,学术感

占位符数据模型

// 正文中的占位符标记
interface ContentPlaceholder {
  id: string; // 占位符 ID
  nodeId: string; // 关联的节点 ID
  offset: number; // 在正文纯文本中的字符偏移量
  label: string; // 显示的标记("①" / "💡" / "●" / "【1】")
  color: string; // 节点颜色(用于占位符背景)
}

// 正文渲染时注入占位符
function renderContentWithPlaceholders(
  content: string, // Markdown 原文
  placeholders: ContentPlaceholder[]
): string {
  // 按 offset 排序,在对应位置插入占位符标记
  // 渲染为 <span class="placeholder" data-node-id="xxx">①</span>
}

// CSS 透明度控制
.placeholder { opacity: 0.1; transition: opacity 0.2s; }
.placeholder.active { opacity: 1; }
.placeholder:hover { opacity: 0.6; }

交互流程

🔗 添加占位符

  1. 教师点击正文某个位置(光标位置)
  2. 或选中一段文字后释放
  3. 弹出菜单:"在此处添加节点 →"
  4. 选择节点类型或已有节点
  5. 在正文对应位置插入占位符标记
  6. 创建 AnchorEdge 连线

👁️ 选中节点时的视觉反馈

  1. 点击画布上的某个节点
  2. 该节点对应的占位符 opacity 从 0.1 → 1
  3. 连线从 10% → 100% 显示
  4. 占位符添加 active 样式(边框/阴影)
  5. 其他占位符保持 10% 透明度
  6. 点击空白处恢复默认状态