tmui4x 2.0(Vapor)

主题

TMUI4x2026-10-29
1019
4.2m

x-chatmarkdown-u AI聊天Markdown ​

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

图片宽度默认铺满气泡，高度按原图比例自适应；HTML <img width height> 或 <img width="50%"> 里写了尺寸时按写的输出。视频使用各端系统播放器（Android VideoView、iOS AVPlayer、鸿蒙 Video、Web/小程序 <video>），带原生控制条。

兼容性 ​

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 端已复制纯文本
imageclick{ src, alt }点击图片（图片被链接包裹时改为触发 linkclick）
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.2.0（2026-10-20） ​

  • 新增图片渲染：![alt](url)、HTML <img> 都解析为块级图片；默认铺满容器宽、按原图比例自适应高，HTML 写了 width / height（含百分比）时按设定尺寸输出
  • 新增视频渲染：HTML <video> 与 ![](xxx.mp4) 自动识别为视频，Android 用系统 VideoView、iOS 用 AVPlayer、鸿蒙用 Video、Web/小程序用 <video>，各端带系统控制条
  • Android 图片复用 uni-app x SDK 同款 Fresco（无需新增图片库），支持远程、file、GIF 与内存缓存
  • 段落内与文字混排的图片会在 IR 层拆成「文本段 + 图片块」，三端渲染器无需处理内联图片；表格单元格中的图片退化为 alt 文本
  • 新增 imageclick 事件（{ src, alt }）；图片被链接包裹时改为 linkclick
  • 图片异步解码完成后自动重新测量高度，sizechange 会再次触发，native-view 不会出现底部空白

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
最近更新
稳定tokens