更新记录

1.0.1（2026-03-17） 下载此版本

核心功能：智能导购对话交互，支持预设热门购物问题（爆款推荐、预算选购、礼物推荐等）； 基础能力：场景化快捷标签（推荐商品 / 性价比 / 数码产品），一键触发对应咨询； 适配性：完成小程序、App、H5 多端 UI 适配，兼容 UniApp 主流版本； 集成体验：极简接入流程，低代码配置即可上线。

平台兼容性

uni-app(4.76)

其他

uni-ai-chat-plugin 使用说明

📁 目录结构

uni-ai-chat-plugin/
├── components/
│   └── ai-chat/
│       └── ai-chat.vue          # 核心聊天组件
├── utils/
│   └── aiService.js             # AI 服务、提示词、商品推荐
├── pages/
│   └── demo/
│       └── demo.vue             # 演示页面
├── index.js                     # 插件入口
├── pages.json                   # 页面配置
└── package.json

🚀 快速开始

方式一：直接引入组件

<template>
  <ai-chat
    :api-key="apiKey"
    :default-role="'shopping'"
    height="100vh"
    @product-tap="onProductTap"
    @buy="onBuy"
  />
</template>

<script>
import AiChat from '@/uni-ai-chat-plugin/components/ai-chat/ai-chat.vue';

export default {
  components: { AiChat },
  data() {
    return {
      apiKey: 'sk-你的APIKey',
    };
  },
  methods: {
    onProductTap(product) {
      // 跳转商品详情页
      uni.navigateTo({ url: `/pages/product/detail?id=${product.id}` });
    },
    onBuy(product) {
      // 立即购买逻辑
    },
  },
};
</script>

方式二：全局注册（main.js）

import Vue from 'vue';
import App from './App';
import AiChatPlugin from '@/uni-ai-chat-plugin';

Vue.use(AiChatPlugin, {
  apiKey: 'sk-你的APIKey',
  apiUrl: 'https://api.openai.com/v1/chat/completions', // 或替换为国内模型地址
  model: 'gpt-3.5-turbo',
  temperature: 0.7,
});

// 之后在任意页面直接使用 <ai-chat /> 无需 import

⚙️ 组件属性（Props）

📡 事件（Events）

🤖 AI 角色说明

内置 5 种角色，用户可在设置面板切换：

自定义角色示例：

import { DEFAULT_PROMPT_TEMPLATES } from '@/uni-ai-chat-plugin';

// 添加自定义角色
DEFAULT_PROMPT_TEMPLATES.law = {
  name: '法律顾问',
  icon: '⚖️',
  systemPrompt: '你是一位专业的法律顾问，能够解答合同、劳动、消费者权益等常见法律问题...',
};

🛍️ 商品推荐机制

自动触发

当 AI 回复内容或用户消息中包含以下关键词时，自动触发商品推荐：

手机 电脑 耳机 衣服 裙子 鞋 护肤 口红 零食 咖啡 书 包 手表 家电 健身 等

AI 主动标记

在系统提示词中要求 AI 在需要推荐时加上 [RECOMMEND:关键词] 标记，插件会自动识别并展示商品卡片。

对接真实商品接口

替换 utils/aiService.js 中的 getMockProducts 函数：

export async function getMockProducts(keyword, category) {
  // 调用你的商品接口
  const res = await uni.request({
    url: `https://your-api.com/products/search?keyword=${keyword}&category=${category}`,
    method: 'GET',
  });
  return res.data.products;
}

🌐 支持的 AI 模型

任何 OpenAI 兼容接口均可使用，只需修改 apiUrl：

// DeepSeek
apiUrl: 'https://api.deepseek.com/v1/chat/completions'
model: 'deepseek-chat'

// 阿里通义千问
apiUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions'
model: 'qwen-turbo'

// 字节豆包
apiUrl: 'https://ark.cn-beijing.volces.com/api/v3/chat/completions'
model: 'ep-xxxxxxxx'

// 腾讯混元
apiUrl: 'https://api.hunyuan.cloud.tencent.com/v1/chat/completions'
model: 'hunyuan-turbo'

// 月之暗面 Kimi
apiUrl: 'https://api.moonshot.cn/v1/chat/completions'
model: 'moonshot-v1-8k'

📝 用户设置项

用户可在「设置面板」中调整：

• AI 角色：切换不同的专业顾问角色
• 对话风格：亲切友好 / 专业严谨 / 幽默风趣 / 简洁直接
• 回复长度：精简 / 适中 / 详细
• 自定义提示词：自由填写额外的角色要求
• 智能推荐开关：是否开启商品推荐
• API Key：运行时动态配置

🎨 主题定制

通过 CSS 变量自定义主题（修改组件内 --theme-color）：

<ai-chat theme-color="#FF6B6B" />   <!-- 红色主题 -->
<ai-chat theme-color="#00C896" />   <!-- 绿色主题 -->
<ai-chat theme-color="#F5A623" />   <!-- 橙色主题 -->

📱 演示模式

不填写 apiKey 时自动进入演示模式，使用预设的模拟回复，方便开发调试：

• 发送含「推荐」「买」等关键词 → 触发商品推荐演示
• 发送含「手机」→ 展示手机商品卡片
• 发送含「衣」「裙」→ 展示服装商品卡片
• 其他消息 → 返回通用模拟回复