富文本引用段落支持：支持文献/段落引用 + 源文追溯 + 统一引用管理面板设计 HarmonyOS 5.0.0 或以上-CSDN博客

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

适配版本：HarmonyOS 5.0.0 或以上
阅读目标：实现富文本中引用其他笔记段落或外部文献信息，支持引用跳转、自动编号、统一管理入口，构建结构清晰、学术风格强的笔记体系。

🧱 一、引用类型结构设计

interface QuoteBlock extends RichTextBlock {
  type: 'quote'
  sourceType: 'note' | 'external'
  sourceId: string            // 引用目标 ID（段落ID或文献ID）
  previewText: string         // 展示的引用摘要
  reference?: string          // 引用说明（如页码、链接等）
}

📌 引用段落为特殊 block，不可直接编辑，但可点击跳转源头。

📝 二、引用本地段落（note block）

插入逻辑：

function insertQuoteFromBlock(sourceBlockId: string) {
  const source = getBlockById(sourceBlockId)
  const block: QuoteBlock = {
    id: genId(),
    type: 'quote',
    sourceType: 'note',
    sourceId: sourceBlockId,
    previewText: source.content.slice(0, 100),
    timestamp: Date.now()
  }
  insertBlock(block)
}

点击引用 → 自动滚动到目标段落 + 高亮几秒钟

📚 三、引用外部文献（reference）

function insertExternalReference(title: string, reference: string) {
  const block: QuoteBlock = {
    id: genId(),
    type: 'quote',
    sourceType: 'external',
    sourceId: genId(), // 可关联独立 reference 列表项
    previewText: title,
    reference,
    timestamp: Date.now()
  }
  insertBlock(block)
}

📌 可用于论文、报告、网页文章等“来源注明”

🔁 四、引用跳转与高亮展示

function jumpToSource(block: QuoteBlock) {
  if (block.sourceType === 'note') {
    scrollToBlock(block.sourceId)
    highlightBlock(block.sourceId)
  } else {
    openWeb(block.reference)
  }
}

📌 高亮建议：黄底闪烁 2 秒，视觉提示定位成功

📂 五、统一引用管理面板设计

interface ReferenceItem {
  quoteId: string
  sourceType: 'note' | 'external'
  preview: string
  fromBlockId: string
}

可通过扫描当前笔记所有 type: quote 的 block 构建列表，展示：

引用内容预览（支持跳转）
引用来源（段落编号 / 外部链接）
所在位置（引用插入在哪一段）
删除引用 / 编辑引用信息等操作

🎨 六、引用 UI 样式建议

类型	展示样式
段落引用	左侧缩进 + 灰色引号图标 + 摘要文字 + 来源编号
文献引用	下标样式 `[1]`，点击展开文献信息浮窗
引用跳转动画	滚动至目标后，块背景高亮色 2 秒自动渐隐
引用列表面板	类似“脚注管理”浮层，支持一键跳转 + 批量清除引用

🧠 七、进阶能力建议（后续拓展）

能力名称	功能说明
引用编号自动排序	每条引用自动赋予 `[1]`、`[2]` 等文献编号
引用去重与合并	同一段落引用多次仅显示一次，可设置“被引用次数”提示
支持引用类型区分	支持 “引用段落” 与 “引用图片 / 视频 / 图表”等
导出引用整理功能	导出 Markdown / PDF 时自动生成参考文献页

✅ 八、小结

功能模块	实现说明
引用段落结构定义	使用 `quote` 类型 block，支持引用本地段落与外部资源
引用跳转与高亮机制	点击引用可跳转原文并高亮提示
引用管理面板	汇总所有引用，支持跳转、修改、删除等操作
UI 与交互优化	引号样式、编号展示、浮窗说明、引用来源提示