更新记录

1.1.1（2026-07-11）

更新组件使用说明

1.1.0（2026-07-11）

新增组件（17 个模块）

• Snippet — 轻量代码片段、终端命令复制
• TestResults — 测试结果树、通过/失败/跳过
• FileTree — 文件树浏览与选择
• Commit — Git 提交信息与文件变更
• Context — 上下文窗口 Token 使用率与成本
• Plan — 智能体执行计划与步骤状态
• AiLoading — 18 种 AI 加载动效
• Confirmation — 工具调用审批流程
• Avatar — 头像组件与变体
• CodeDiff — 代码差异对比
• Video — 视频播放与预览
• EditorSlashMenu — 斜杠命令菜单
• AudioPlayer — 音频播放器
• MicSelector — 麦克风设备选择
• VoiceSelector — 音色选择
• Terminal — 终端输出流式展示
• JSXPreview / VuePreview — 动态 UI 预览

增强

• 新增 composables/index.ts 统一导出
• 插件内部路径改为相对引用，兼容插件市场安装
• 完善 package.json 平台兼容性与加密配置
• 完善插件文档与发布指南

示例

• 新增 AI 智能体综合演示 页面，聚合全部组件

平台兼容性

uni-app(4.56)

其他

AI Elements - AI 对话界面组件库

专为 AI 对话与智能体场景设计的 UniApp Vue3 组件库，对齐 Vercel AI Elements 设计理念。

[]() []()

特性

• 40+ 组件模块 — 对话、消息、输入、推理、工具、代码、附件、模型选择等
• 9 个 Composables — 对话逻辑、流式 Markdown、主题、虚拟列表等
• 流式 Markdown — 代码高亮、Mermaid 图表、块级增量渲染
• 智能体工作流 — 计划、审批、测试、终端、文件树、提交信息
• 主题系统 — 8 种主题色 + 暗色模式
• 多端兼容 — H5、App、微信/支付宝小程序

平台兼容

安装

方式一：插件市场（推荐）

1. 打开 DCloud 插件市场 搜索 aiko-ai-elements
2. 点击「使用 HBuilderX 导入插件」或下载 zip 解压到项目 uni_modules 目录
3. 在插件目录右键 → 安装插件三方依赖

方式二：手动安装

将 uni_modules/aiko-ai-elements 目录复制到项目根目录（与 src 同级）或 src/uni_modules/ 下。

安装 npm 依赖

插件依赖以下 npm 包，请在项目根目录执行：

npm install highlight.js markdown-it mermaid remixicon vue-virtual-scroller

项目配置

1. 引入主题样式

在 main.ts 中：

import './common/theme-colors.scss'

2. 引入设计变量（推荐）

在 uni.scss 末尾添加：

@import './common/variables.scss';

3. H5 可选依赖

H5 端虚拟滚动与 Mermaid 图表需要额外配置：

// main.ts
// #ifdef H5
import mermaid from 'mermaid'
;(window as any).mermaid = mermaid

import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
// #endif

export function createApp() {
  const app = createSSRApp(App)
  // #ifdef H5
  app.use(VueVirtualScroller)
  // #endif
  return { app }
}

4. 引入 Remix Icon 字体

将 uni_modules/aiko-ai-elements/static/fonts/remixicon.ttf 复制到项目的 static/fonts/，并在 App.vue 或全局样式中：

@import './common/remixicon.scss';

快速开始

按需导入（推荐）

import {
  AiConversation,
  AiConversationContent,
  AiConversationScrollButton,
  AiMessage,
  AiMessageContent,
  AiMessageResponse,
  AiPromptFormComposer,
} from './components'

也可从模块入口导入：

import { AiMessage } from './components/message'
import { useTheme } from './composables'

基础对话示例

<template>
  <view class="chat-page">
    <AiConversation>
      <AiConversationContent>
        <AiMessage v-for="msg in messages" :key="msg.id" :from="msg.from">
          <AiMessageContent>
            <AiMessageResponse :content="msg.content" :streaming="msg.streaming" />
          </AiMessageContent>
        </AiMessage>
      </AiConversationContent>
      <AiConversationScrollButton />
    </AiConversation>

    <AiPromptFormComposer
      :status="status"
      placeholder="输入消息…"
      @submit="onSubmit"
      @stop="onStop"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  AiConversation,
  AiConversationContent,
  AiConversationScrollButton,
  AiMessage,
  AiMessageContent,
  AiMessageResponse,
  AiPromptFormComposer,
} from './components'
import type { PromptFormMessage } from './components'

const messages = ref<{ id: string; from: 'user' | 'assistant'; content: string; streaming?: boolean }[]>([])
const status = ref<'idle' | 'streaming'>('idle')

function onSubmit(message: PromptFormMessage) {
  if (!message.text?.trim()) return
  messages.value.push({ id: String(Date.now()), from: 'user', content: message.text })
  status.value = 'streaming'
  // 接入你的 AI API…
}

function onStop() {
  status.value = 'idle'
}
</script>

<style lang="scss" scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: $ai-bg-secondary;
}
</style>

主题

import { useTheme } from './composables'

const { theme, toggleDark, setThemeColor } = useTheme()
setThemeColor('violet')  // blue | violet | emerald | rose | amber | cyan | pink | slate
toggleDark()

选用建议

组件使用说明

完整 Props、事件与示例见 components.md。

目录结构

aiko-ai-elements/
├── components/       # 40+ 组件模块
├── composables/      # 组合式函数
├── core/markdown/    # Markdown 解析引擎
├── common/           # 主题变量与样式
├── static/           # 字体与图标
├── native/towxml/    # 小程序 Markdown 渲染
├── package.json
├── readme.md         # 安装、配置、快速开始
├── components.md     # 组件使用说明（Props / 事件 / 示例）
├── changelog.md
└── license.md

常见问题

Q: 导入路径找不到？

确认 uni_modules/aiko-ai-elements 位置，并确保 @ 别名指向 src。若插件装在项目根 uni_modules/，请相应调整路径或配置 Vite 别名。

Q: 样式变量未定义？

在 uni.scss 中 @import 插件的 variables.scss。

Q: 小程序 Markdown 不显示？

小程序端使用内置 towxml 渲染，部分 HTML 标签有限制，复杂内容建议在 H5 端验证。

Q: Mermaid 图表不渲染？

仅 H5 端支持，需按上文配置 mermaid 全局变量。

Q: AiLoader 和 AiLoading 怎么选？

消息 / 工具内联等待用 AiLoader；全屏或展示型特效用 AiLoading。

授权

详见 license.md。普通授权版与源码授权版价格见插件市场页面。

更新日志

详见 changelog.md