tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-21
694
2.9m

x-chatmarkdown-u AI聊天Markdown ​

AI 聊天气泡的 Markdown 渲染。支持 GFM 表格、代码高亮、数学公式和流式追加。思考时间、重试、复制按钮请自己在外层做。

兼容性 ​

HarmonyIOSAndroidWEB小程序
支持支持支持支持支持

调用 ​

vue
<x-chatmarkdown-u
  ref="bubbleRef"
  :content="item.content"
  :dark="false"
  :font-size="14"
  @linkclick="onLinkClick"
  @codecopy="onCodeCopy"
  @longpress="onLongPress"
></x-chatmarkdown-u>

流式：

ts
bubbleRef.value?.appendChunk(tokenText)
bubbleRef.value?.finish()

只解析不渲染：

ts
import { xChatMarkdownParse } from "@/uni_modules/x-chatmarkdown-u"

xChatMarkdownParse(md, {
  success: (res) => {
    console.log(res.plainText, res.ir)
  }
})

参数 ​

字段说明默认
contentMarkdown""
dark深色false
fontSize基础字号 px15
reasoningTime推理秒数，组件不渲染0
statusidle / streaming / done / error，组件不渲染idle
errorMsg失败文案，组件不渲染""
showRetry / showCopy兼容保留，组件不渲染按钮true

事件 ​

名称参数说明
sizechange{ width, height }内容尺寸变化
linkclick{ href, text }点击链接
codecopy{ lang, code }点击代码块复制
longpress{ text }长按气泡；App 端已复制纯文本
rendered{ blockCount, parseMs }本次解析渲染完成
error{ errSubject, errCode, errMsg }解析或渲染失败

方法 ​

名称需要说明
setContentcontent: string全量更新 Markdown
appendChunkchunk: string流式追加一段文本
finish无结束流式，立刻把剩余内容渲染完
getContent无返回当前原始 Markdown
getPlainText无返回纯文本，可用来复制整条
getIR无返回渲染中间层 JSON
xChatMarkdownParsemd，可选 success / fail / complete只解析不渲染，独立函数

版本 ​

版权归https://xui.tmui.design你不得修改及二次开发，仅供TMUI4会员商用使用。不得转给非VIP会员使用，一经查实数倍赔偿，并追究法律责任。

更新日志 ​

1.1.0（2026-08-04） ​

  • Web / 微信小程序：Emscripten 编译独立 .wasm + ES6 glue（export default），与 App 共用同一套 IR
  • Web：uni.request 拉 wasm + instantiateWasm（对齐 uni-cmark web）
  • 小程序：WXWebAssembly.instantiate(包内路径)（static/mp-weixin/*.wasm，对齐 uni-cmark loader）
  • 新增 x-chatmarkdown-u-node 递归块节点；数学字体 base64 @font-face
  • 重新编译：bash native-src/web/build_wasm.sh

1.0.0（2026-08-03） ​

  • 首个版本
  • cmark-gfm 0.29.0.gfm.13 C 核心交叉编译三端（Android AAR / iOS Framework / HarmonyOS HAR）
  • GFM 解析：标题、加粗/斜体/删除线、行内代码、链接、引用、有序/无序/任务列表、表格（对齐）、分割线
  • 代码块：语言标签 + 右上角复制 + 通用关键字高亮（kotlin/java/swift/js/ts/python/c/cpp/go/rust/bash/sql/json/dart/ruby/lua/php/html/css 等）
  • 数学公式：块级 $$...$$ 与 ```math 代码块、行内 $...$，LaTeX 符号 Unicode 化渲染（\frac、\sqrt、上下标等）
  • 流式渲染：appendChunk 节流解析 + 块级 hash 缓存复用
  • 交互：长按复制整条气泡、代码块复制、链接点击事件
  • 独立 API xChatMarkdownParse：导出 IR 中间件供自行渲染；组件暴露 getIR/getPlainText/getContent
最近更新