富文本笔记导图能力：自动生成目录树 + 标题结构导航 + 快速跳转机制设计 HarmonyOS 5.0.0 或以上-CSDN博客

本文链接：https://blog.csdn.net/2501_92049284/article/details/148024465

适配版本：HarmonyOS 5.0.0 或以上
阅读目标：构建一个支持实时生成目录的导航系统，识别标题层级、建立层级目录树，并实现点击跳转段落的功能，提升阅读与编辑效率。

🧱 一、标题层级结构设计

标题 Block 示例结构（基于已有结构扩展）：

interface RichTextBlock {
  id: string
  type: 'title'
  content: string
  level: 1 | 2 | 3  // 标题层级：H1、H2、H3
  collapsed?: boolean
}

📌 每个标题段落应明确标注层级，用于目录树分层渲染。

🌲 二、目录树生成逻辑

function buildOutlineTree(blocks: RichTextBlock[]) {
  const titles = blocks.filter(b => b.type === 'title')
  const tree: OutlineNode[] = []

  const stack: OutlineNode[] = []

  titles.forEach(block => {
    const node: OutlineNode = {
      id: block.id,
      title: block.content,
      level: block.level,
      children: []
    }

    while (stack.length && stack[stack.length - 1].level >= block.level) {
      stack.pop()
    }

    if (stack.length === 0) {
      tree.push(node)
    } else {
      stack[stack.length - 1].children.push(node)
    }

    stack.push(node)
  })

  return tree
}

📌 可生成多级嵌套的树状结构：用于左侧导航面板或悬浮菜单

🗺️ 三、目录 UI 展示建议

function renderOutlineNode(node: OutlineNode) {
  return Column(paddingLeft: node.level * 12)(
    Text(node.title)
      .fontSize(14 + (3 - node.level) * 2)
      .onClick(() => scrollToBlock(node.id)),
    ...node.children.map(renderOutlineNode)
  )
}

可配合 Collapse 折叠组件
可在 TV 端右侧常驻浮窗展示

🧭 四、跳转锚点机制

渲染器为每个标题段落绑定 DOM 锚点：

<div id={`anchor_${block.id}`}>
  {renderTitleBlock(block)}
</div>

执行跳转：

function scrollToBlock(blockId: string) {
  const el = document.getElementById(`anchor_${blockId}`)
  el?.scrollIntoView({ behavior: 'smooth' })
}

📌 HarmonyOS ArkTS 可使用 ScrollController 实现同等跳转逻辑

🔄 五、目录实时刷新机制

每当以下事件触发时，重新构建目录：

插入/删除标题段落
编辑标题内容或修改其层级
重新排序段落（标题位置改变）

watch(blockList, () => {
  outlineTree = buildOutlineTree(blockList)
})

🧩 六、辅助功能建议

能力	功能说明
当前高亮指示	当前视口正在阅读的标题自动高亮
回到顶部按钮	提供“返回顶部”快速操作
小地图模式（进阶）	右侧浮动一列缩略标题导航，适用于长篇阅读场景
折叠/展开目录	目录区域支持收起与展开，以节省空间

✅ 七、小结

功能模块	实现说明
标题层级结构定义	每个 title block 携带 `level` 字段，用于识别目录结构
目录树构建算法	使用栈构建多级嵌套目录树，支持任意层级组合
跳转锚点机制	渲染器标记锚点，点击目录项 → 定位对应段落
UI 渲染与交互建议	支持折叠/高亮/自动刷新，增强导航体验