基于 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 回復左對齊，使用灰色背景
• 都使用圓角矩形和最大寬度限制