若依项目AI 助手代码解析

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

一、组件整体结构

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

  1. 悬浮按钮:点击后展开 / 收起对话窗口
  2. 对话窗口:显示历史消息和输入框
  3. 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 回复左对齐,使用灰色背景
  • 都使用圆角矩形和最大宽度限制
相关推荐
吕永强34 分钟前
人工智能与环境:守护地球的智能防线
人工智能·科普
兮℡檬,41 分钟前
房价预测|Pytorch
人工智能·pytorch·python
白-胖-子6 小时前
深入剖析大模型在文本生成式 AI 产品架构中的核心地位
人工智能·架构
想要成为计算机高手7 小时前
11. isaacsim4.2教程-Transform 树与Odometry
人工智能·机器人·自动驾驶·ros·rviz·isaac sim·仿真环境
静心问道7 小时前
InstructBLIP:通过指令微调迈向通用视觉-语言模型
人工智能·多模态·ai技术应用
宇称不守恒4.08 小时前
2025暑期—06神经网络-常见网络2
网络·人工智能·神经网络
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
小楓12018 小时前
醫護行業在未來會被AI淘汰嗎?
人工智能·醫療·護理·職業
数据与人工智能律师8 小时前
数字迷雾中的安全锚点:解码匿名化与假名化的法律边界与商业价值
大数据·网络·人工智能·云计算·区块链