基于 Vue.js 和 Element UI 的 AI 助手组件

一、组件整体结构

这个 AI 助手组件由三部分组成：

1. 悬浮按钮：点击后展开 / 收起对话窗口
2. 对话窗口：显示历史消息和输入框
3. API 调用逻辑：与 AI 服务通信并处理响应

<template><div class="ai-assistant"><!-- 悬浮按钮 --><div class="chat-icon" @click="toggleChat"><i class="el-icon-chat-dot-round"></i></div><!-- 对话框 --><el-dialog title="AI 助手" :visible.sync="dialogVisible"><div class="chat-container"><!-- 消息区域 --><div class="messages" ref="messages"><div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]"><div class="content">{{ msg.content }}</div></div><div v-if="loading" class="loading">思考中...</div></div><!-- 输入区域 --><div class="input-area"><el-input v-model="inputMessage" @keyup.enter.native="sendMessage"><el-button slot="append" @click="sendMessage">发送</el-button></el-input></div></div></el-dialog></div>
</template>

二、AI 功能实现流程

1. 用户交互阶段

当用户点击悬浮按钮时：

• 调用toggleChat()方法切换对话框显示状态
• 对话框使用 Element UI 的el-dialog组件实现

当用户输入内容并点击发送按钮（或按 Enter 键）时：

• 触发sendMessage()方法
• 检查输入内容是否为空，避免无效请求

2. 消息处理阶段

async sendMessage() {if (!this.inputMessage.trim()) return;// 1. 添加用户消息到对话历史const userMsg = { role: "user", content: this.inputMessage };this.messages.push(userMsg);this.inputMessage = ""; // 清空输入框this.loading = true; // 显示"思考中..."状态try {// 2. 调用AI APIconst response = await fetch("https://api.siliconflow.cn/v1/chat/completions", {method: "POST",headers: {"Authorization": "XXXXXXXXXXXXXXXXXX","Content-Type": "application/json"},body: JSON.stringify({model: "Qwen/QwQ-32B",messages: this.messages, // 传递完整对话历史temperature: 0.7,max_tokens: 512})});// 3. 处理API响应const data = await response.json();if (data.choices && data.choices.length > 0) {const aiMsg = {role: "assistant",content: data.choices[0].message.content};this.messages.push(aiMsg); // 添加AI回复到对话历史}} catch (error) {console.error("API Error:", error);this.$message.error("请求失败，请稍后重试");} finally {this.loading = false; // 隐藏加载状态// 滚动到底部显示最新消息this.$nextTick(() => {this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight;});}
}

3. API 请求解析

这个 AI 助手使用了一个第三方 API（https://api.siliconflow.cn），该 API 兼容 OpenAI ChatCompletion 接口规范，主要参数包括：

• model: 指定使用的 AI 模型（这里是 "Qwen/QwQ-32B"，一个开源大语言模型）
• messages: 对话历史数组，包含用户和 AI 的消息
• temperature: 控制生成文本的随机性（0-1 之间，值越高越随机）
• max_tokens: 限制最大生成的 token 数量

4. 消息渲染与样式

.message {margin: 10px 0;&.user {text-align: right;.content {background: #409EFF;color: white;}}&.assistant {text-align: left;.content {background: #f0f2f5;}}.content {display: inline-block;max-width: 80%;padding: 8px 12px;border-radius: 12px;word-break: break-word;}
}

通过 CSS 类区分用户消息和 AI 回复：

• 用户消息右对齐，使用蓝色背景
• AI 回复左对齐，使用灰色背景
• 都使用圆角矩形和最大宽度限制