大模型流式输出核心技术：智能 Markdown 渲染引擎方案

专为 AI 复杂内容交付与流式响应场景 深度定制的 Markdown 渲染核心组件。与常规直接使用 marked.js 或 v-html 渲染富文本的做法不同，该组件采用 Markdown 文本预处理 → Unified AST（抽象语法树）解析 → Vue 渲染函数（h()）转译为 VNode 的全流程虚拟 DOM 管线。

一、核心架构设计与流程

复制代码

原始 Markdown / 流式文本
            │
            ▼
【1. 文本规范化与预处理】
   - HTML 标签转义与 （span/a 标签转换）
   - 表格缩进与空行修复（针对 GFM 规范兼容）
            │
            ▼
【2. Unified / Remark AST 解析管线】
   -  (基础语法) + (表格/删除线/任务列表)
   - (文本/块级指令) + (换行处理)
            │
            ▼
【3. renderAst 递归转译为 Vue VNode】
   - 基础 Markdown 节点映射 
   - 交互指令扩展 
   - 脚注与引用体系 
   - 动态子组件集成 
            │
            ▼
输出安全、响应式的真实 DOM (支持多套主题与样式预设)

二、核心技术功能深度解析

1. Unified/Remark 驱动的 AST → VNode 编译体系

动态按需加载：通过异步加载编译器核心库，避免主包体积膨胀。
原生 VNode 直出 ：不借助 innerHTML / v-html 渲染，全部通过 Vue 原生 h() 渲染函数转译：
- 天然防御 XSS：纯文本节点与属性经过 Vue 响应式转义，杜绝脚本注入。
- 组件级交互能力：Markdown 内部的链接、指令、代码块可直接无缝挂载 Vue 组件、事件监听与插槽。
开放式规则重写：对外暴露自定义规则和插件属性，上层业务可按需覆盖任意 AST 节点的转译逻辑或注入自定义 Unified 插件。

2. 面向 AI 流式输出的特化文本预处理（Regex Pipeline）

LLM 生成的文本常混杂 HTML 标签或不规范排版，组件在进入 AST 解析前设计了一套清洗层：

HTML → Directive 转换：
- 将 <span style='...'>text</span> 自动转换为 :spanHtml[text]{style="..."}，通过 Directive 机制安全地渲染内联样式。
- 将 <a href="...">text</a> 正则提取并规范化为标准 Markdown 链接 [text](href)。
数学/比较符号防吞 ：将诸如 <5、<10 等数学比较符转义为 <5，防止被 Markdown 解析器误判为未闭合的 HTML 标签而导致文本截断。
缩进表格兼容性修复（算法）：
- 在 GFM 规范中，带缩进的表格容易被误判为代码块。
- 组件通过逐行扫描识别表格起止与分隔线，自动在紧贴上文的表格块前注入对齐空行，保障大模型输出缩进表格时的解析稳定性。

3. 三级 Directive（指令）体系与动态组件插槽

基于 remark-directive，实现了对文本流内自定义组件与图标的声明式渲染：

指令类型	典型应用场景与技术实现
行内文本指令	• 内置图标映射：识别特定大写指令，直接按需加载内置 SVG 图标。 • 外层插槽委托：命中外部传入插槽时将控制权交由父级渲染（如角标、引用链接）。
单行叶子指令	• 用于渲染独立的单行警告块、分割卡片等，支持自定义 Slot 接管。
多行容器指令	• 异步容器挂载：通过组件映射表结合异步组件挂载重量级业务卡片。 • 流式闭合防护：针对 SSE 流式输出，实时检测末尾是否已输出闭合标记，未闭合前降级为原生占位容器，避免频繁挂载与闪烁。

4. 流式 Mermaid 图表闭合感知与渲染

闭合状态智能感知：在遇到代码块时，通过 AST 节点偏移量切片原始文本，利用正则判断末尾是否包含闭合标记：
双频防抖流式渲染：
- 内容输出中：以 200ms 防抖解析 Mermaid DSL，防止高频语法错误导致页面崩溃。
- 内容结束：以 80ms 快速响应最终图表呈现。
图表交互与导出：内置视口平移缩放、全屏浏览、代码/预览双模式切换，并基于 DOM 转图谱库实现高质量 PNG 导出与一键剪贴板复制。

5. 结构化学术脚注与引用链

结构与视图解耦：解析 AST 时提取所有的节点，统一汇总至底部的专用容器中独立渲染。
递归链接查找：当用户点击正文中的上标时，组件会自动深搜脚注定义树中的引用 URL，为上标赋予直接跳转能力。

6. 多场景排版预设系统

内置了多套精心调校的排版样式，适配不同产品端及卡片容器：

标准全量排版：适用于主对话窗口与独立报告页。
紧凑型适配：专为侧边栏、弹窗卡片及移动端优化。
弱化排版：低饱和度样式，专用于「思考中/Thinking 模块」及引用摘要折叠区。
极简嵌入模式：去除了大段落外边距，适合作为提示气泡与内联卡片。

三、扩展衍生组件：引用增强 Markdown

在基础 Markdown 渲染之上，衍生出了面向 RAG 检索增强场景的高阶封装组件：

引用标记转换：通过正则将正文中检索到的自动替换为特定文本指令。
浮动链接预览卡片：通过 Popover 结合自定义预览卡片，鼠标悬浮即可预览外部来源的网站 Logo、标题与摘要。
右侧来源抽屉面板：底部提供引用源统计按钮，点击后弹出右侧可调宽度的抽屉列表，支持外部页面一键跳转与统一管理。