更新记录

1.0.1（2026-02-25） 下载此版本

1. 修复了插件包目录结构问题
2. 优化了自动化发布流程
3. 增强了上传稳定性

平台兼容性

uni-app(5.01)

AI 智能对话 UI 组件 (Vue3 + TS)

极简、高性能的 AI 对话 UI 组件，支持流式渲染与 Markdown 代码高亮。基于 Vue3 + TypeScript 开发，完美适配现代开发流。

✨ 特性

• 流式文本渲染 - 内置打字机效果支持
• Markdown & 代码高亮 - 使用 marked + highlight.js，支持 GitHub Dark 风格代码高亮
• 预设快捷 Prompt - 配置快速回复按钮，提升用户体验
• 自动滚动 - 新消息自动滚动到底部
• 全端兼容 - 支持 H5、App、微信小程序等多端
• Vue3 + TypeScript - 采用最新技术栈

📦 安装

本组件依赖 marked 和 highlight.js，请先安装依赖：

npm install marked marked-highlight highlight.js

然后在你的 pages.json 中配置 easycom（推荐）：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^uni-ai-chat-ui": "@/uni_modules/antigravity-ai-chat-ui/components/uni-ai-chat-ui/uni-ai-chat-ui.vue"
    }
  }
}

🚀 基础用法

<template>
  <view class="content">
    <uni-ai-chat-ui
      :messages="messages"
      :loading="loading"
      :preset-prompts="['你好', '你能做什么？']"
      @send="handleSend"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 消息类型定义
interface Message {
  role: 'user' | 'assistant' | 'system'
  content: string
}

const messages = ref<Message[]>([
  { role: 'assistant', content: '你好，我是 AI 助手！' }
])

const loading = ref(false)

const handleSend = (text: string) => {
  // 1. 添加用户消息
  messages.value.push({ role: 'user', content: text })
  loading.value = true

  // 2. 添加空白的助手消息
  messages.value.push({ role: 'assistant', content: '' })

  // 3. 模拟流式更新（实际项目中来自 SSE/WebSocket）
  const targetIndex = messages.value.length - 1
  messages.value[targetIndex].content = '这是对您的回复。'
  loading.value = false
}
</script>

📝 Props

🎯 Events

🔧 高级用法

流式渲染示例

<script setup lang="ts">
const streamResponse = async (text: string) => {
  messages.value.push({ role: 'user', content: text })
  loading.value = true

  messages.value.push({ role: 'assistant', content: '' })
  const targetIndex = messages.value.length - 1

  // 模拟流式输出
  const response = '这是一个流式输出的示例...'
  for (let i = 0; i < response.length; i++) {
    messages.value[targetIndex].content += response[i]
    await new Promise(resolve => setTimeout(resolve, 50))
  }

  loading.value = false
}
</script>

💰 授权说明

基础版（本版本）- MIT License

本插件完全免费开源，可自由用于个人或商业项目。

Pro 版（计划中）- 商业授权

后续将推出包含以下高级功能的 Pro 版：

• 多模态支持（图片、文件上传）
• 语音输入与播放
• 高级交互模板
• 原生性能优化

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License