富文本结构增强：折叠标题 + 段落折叠/展开功能 + 折叠状态多端同步设计 HarmonyOS 5.0.0 或以上

适配版本：HarmonyOS 5.0.0 或以上
阅读目标：实现段落级内容折叠、标题折叠逻辑、多设备折叠状态同步，提升长笔记的结构可视性、可控性与交互效率，适用于文档型笔记、会议纪要、读书笔记等场景。

---

🧱 一、折叠能力设计目标

功能	应用价值
标题支持折叠其下段落	形成类似大纲式层级文档结构
普通段落支持收起长内容	阅读更简洁，可手动“展开”
折叠状态可保存并同步多端	TV、手机、平板显示一致，避免用户迷失
每段折叠状态可独立控制	自由组合使用，灵活定制阅读/编辑视图

---

📦 二、段落折叠状态结构

每段 Block 增加字段：

interface RichTextBlock {
  id: string
  type: string
  content: string
  collapsed?: boolean  // 是否折叠
  parentTitleId?: string  // 若属于某标题下，用于结构折叠
}

---

➕ 三、标题折叠机制逻辑

function toggleTitleCollapse(titleId: string) {
  const affectedBlocks = getBlocksUnderTitle(titleId)
  const isCollapsed = !getBlockById(titleId).collapsed

  updateBlock({ ...getBlockById(titleId), collapsed: isCollapsed })

  affectedBlocks.forEach(b => {
    b.hiddenUnderTitle = isCollapsed
    updateBlock(b)
  })
}

📌 标题折叠时不删除段落，仅标记“当前是否应隐藏显示”

---

✂️ 四、段落折叠（全文折叠功能）

某些长段（如日志、摘要）允许手动收起，只显示前几行

function toggleBlockCollapse(blockId: string) {
  const block = getBlockById(blockId)
  block.collapsed = !block.collapsed
  updateBlock(block)
}

UI 展示方式建议：

• 折叠时仅显示前 2 行内容 + “展开查看更多”

• 展开后展示完整内容 + “收起”按钮

---

📡 五、折叠状态同步（使用 KV 分布式同步）

kvStore.put(`collapse_state_${blockId}`, { collapsed: true/false })

监听变化：

kvStore.on('dataChange', ..., (change) => {
  const id = change.key.replace('collapse_state_', '')
  const collapsed = JSON.parse(change.value.value).collapsed
  setBlockCollapseState(id, collapsed)
})

📌 所有设备共享状态，切换一次即多端生效

---

🎨 六、折叠 UI 建议设计

元素类型	折叠图标建议
标题块	🔽 / ▶️ 切换标识
段落块	“展开 / 收起”按钮文字提示
折叠区域背景色	使用淡灰背景区分折叠内容段
动画过渡	使用折叠/展开动画增强体验

---

🧠 七、辅助功能建议

能力	说明
一键“全部折叠”	折叠所有标题及长段内容
一键“全部展开”	恢复完整文档展示
折叠状态保存策略	持久化存储在 note_ui_${noteId} 下的折叠状态数组

---

✅ 八、小结

模块功能	实现说明
标题折叠机制	按标题分组段落，统一控制其下段落是否显示
段落折叠逻辑	任意段落支持收起/展开操作，提升阅读效率
多端折叠状态同步	使用 KV 存储每段折叠状态，支持所有设备自动同步
UI 动效与布局优化	显示折叠图标/按钮、动画折叠区域、美化背景与缩进线

---

📘 下一篇预告

第14篇｜富文本笔记导图能力：自动生成目录树 + 标题结构导航 + 快速跳转机制设计