若依项目AI 助手代码解析

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

一、组件整体结构

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

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

html 复制代码

<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. 消息处理阶段

javascript 复制代码

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 API
    const 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. 消息渲染与样式

html 复制代码

.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 回复左对齐，使用灰色背景
都使用圆角矩形和最大宽度限制