更新记录

v1.0.0（2026-04-21） 下载此版本

• 提供通用聊天 UI 组件 vm-openai-chat
• 支持顶部标题、消息区、底部输入框布局
• 支持空状态插槽与顶部菜单插槽
• 默认内置清空消息菜单
• 支持外部控制消息数据、输入内容与流式状态
• 可搭配 vm-openai 使用，也支持自定义数据源

平台兼容性

uni-app(3.8.0)

其他

vm-openai-ui

vm-openai-ui 是一个通用聊天 UI 插件，只负责界面和交互，不内置任何具体请求实现。

你可以把它和 vm-openai 搭配使用，也可以接入你自己的流式接口。

组件

基础用法

<template>
  <vm-openai-chat
    title="My AI Chat"
    :messages="messages"
    :model-value="inputText"
    :selected-key="selectedKey"
    :is-streaming="isStreaming"
    :error-message="errorMessage"
    @update:modelValue="inputText = $event"
    @submit="handleSubmit"
    @cancel="handleCancel"
    @change-selection="selectedKey = $event"
    @menu-select="handleMenuSelect"
  >
    <template #menu="{ selectedKey, selectKey, selectMenuItem }">
      <view class="custom-menu-item" @click="selectKey('custom')">切换到自定义模式</view>
      <view class="custom-menu-item" @click="selectMenuItem({ key: 'clear', label: '清空消息' })">清空消息</view>
    </template>

    <template #empty="{ selectedKey }">
      <view class="custom-empty">
        <text class="custom-empty-title">开始一段新对话</text>
        <text class="custom-empty-subtitle">当前选择：{{ selectedKey }}</text>
      </view>
    </template>
  </vm-openai-chat>
</template>

Props

Events

Slots