基于 Vue3 + TypeScript + Element Plus 实现 DeepSeek AI 对话界面（流式输出）

📖 前言

最近在开发一个后台管理系统时，需要集成 AI 对话功能。经过调研，选择了 DeepSeek API 作为后端服务，使用 Vue3 + TypeScript + Element Plus 实现了一个功能完善的对话界面。本文将详细介绍实现过程，包括流式输出、思考模式、对话历史管理等核心功能。

🎯 项目概述

本项目实现了一个完整的 DeepSeek AI 对话界面，支持：

✅ 流式回答（逐字显示）✅ 思考模式切换✅ 对话历史管理✅ 用户信息展示✅ 账户余额查询✅ 模型切换✅ 美观的 UI 界面

🛠️ 技术栈

前端框架: Vue 3.5.13 (Composition API)类型系统: TypeScript 5.8.3UI 组件库: Element Plus 2.11.9HTTP 客户端: Axios 1.13.2AI SDK: OpenAI SDK 6.10.0 (兼容 DeepSeek API)构建工具: Vite 6.3.5样式预处理: Less 4.3.0

📦 项目结构


src/views/index/
├── index.vue      # 主组件（UI 界面）
├── index.ts       # 业务逻辑（API 调用、对话管理）
└── index.scss     # 样式文件

🚀 核心功能实现

1. 流式回答实现

流式回答是核心功能之一，让 AI 的回答能够逐字显示，提升用户体验。

1.1 API 调用层（index.ts）


// 聊天 - 支持流式和思考模式
export async function main(
  userMessage?: string, 
  model: string = "deepseek-chat", 
  options?: {
    stream?: boolean;           // 是否流式输出
    thinkingMode?: boolean;     // 是否思考模式
    onStreamChunk?: (chunk: string) => void;  // 流式数据回调
  }
) {
  try {
    // 如果提供了用户消息，添加到历史
    if (userMessage) {
      addMessageToHistory({ role: "user", content: userMessage });
    }

    // 构建消息数组，包含系统提示和对话历史
    const conversation = conversations.find((c) => c.id === currentConversationId);
    const historyMessages = conversation?.messages || [];
    const messages: Message[] = [
      { role: "system", content: "You are a helpful assistant." },
      ...historyMessages,
    ];

    // 流式模式
    if (options?.stream) {
      const stream = await openai.chat.completions.create({
        messages: messages as any,
        model: model,
        stream: true,
      });

      let fullContent = "";

      for await (const chunk of stream) {
        const content = chunk.choices[0]?.delta?.content || "";
        if (content) {
          fullContent += content;
          // 调用回调函数，实时更新UI
          options?.onStreamChunk?.(fullContent);
        }
      }

      // 将完整回复添加到历史
      addMessageToHistory({ role: "assistant", content: fullContent });
      return fullContent;
    }
    // 非流式模式...
  } catch (error: any) {
    // 错误处理...
  }
}

关键点：

使用 stream: true 启用流式输出通过 for await...of 遍历流数据使用回调函数 onStreamChunk 实时更新 UIchunk.choices[0]?.delta?.content 获取增量内容

1.2 UI 层实现（index.vue）


<script setup lang="ts">
// 发送消息 - 流式处理
const handleSend = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return;

  const userMsg = inputMessage.value.trim();
  inputMessage.value = "";

  // 添加用户消息到界面
  messages.value.push({ role: "user", content: userMsg });

  // 添加一个空的助手消息，用于流式更新
  const assistantMessageIndex = messages.value.length;
  messages.value.push({
    role: "assistant",
    content: "",
  });
  scrollToBottom();

  isLoading.value = true;
  streamingMessage.value = "";
  
  try {
    await main(userMsg, selectedModel.value, {
      stream: true,
      thinkingMode: thinkingMode.value,
      onStreamChunk: (chunk) => {
        // chunk 已经是完整的累积内容，直接赋值
        streamingMessage.value = chunk;
        messages.value[assistantMessageIndex].content = chunk;
        scrollToBottom();
      },
    });
  } catch (error) {
    console.error("发送消息失败:", error);
    messages.value.pop();
  } finally {
    isLoading.value = false;
    streamingMessage.value = "";
    scrollToBottom();
  }
};
</script>

关键点：

先创建空的助手消息，用于流式更新chunk 参数是完整的累积内容，直接赋值（不要累加）实时更新消息内容并自动滚动

2. 思考模式实现

思考模式允许用户切换 AI 的思考方式，通过开关控制。


<template>
  <div class="header-right">
    <!-- 思考模式开关 -->
    <el-switch
      v-model="thinkingMode"
      active-text="思考模式"
      inactive-text="普通模式"
      class="thinking-switch"
    />
  </div>
</template>

<script setup lang="ts">
const thinkingMode = ref(false); // 思考模式状态
</script>

3. 对话历史管理

实现了多对话管理，支持创建、切换、删除对话。


// 对话历史管理
interface Conversation {
  id: string;
  title: string;
  messages: Message[];
  createdAt: number;
  updatedAt: number;
}

let conversations: Conversation[] = [];
let currentConversationId: string | null = null;

// 创建新对话
export function createNewConversation(): string {
  const id = `conv_${Date.now()}`;
  const newConversation: Conversation = {
    id,
    title: "新对话",
    messages: [],
    createdAt: Date.now(),
    updatedAt: Date.now(),
  };
  conversations.unshift(newConversation);
  currentConversationId = id;
  return id;
}

// 切换到指定对话
export function switchConversation(conversationId: string) {
  currentConversationId = conversationId;
  const conversation = conversations.find((c) => c.id === conversationId);
  return conversation?.messages || [];
}

4. 用户信息展示

在侧边栏展示用户头像、姓名和账户余额。


<template>
  <div class="user-info-card">
    <el-avatar :size="50" :src="userInfo.accountBalance.avatar">{ userInfo.accountBalance.name || "用户" }}</div>
      <div class="user-total-balance" v-if="userInfo.accountBalance.total_balance !== undefined">
        <span>总额: ¥{{ formatBalance(userInfo.accountBalance.total_balance) }}</span>
      </div>
    </div>
  </div>
</template>

5. 键盘快捷键

实现了便捷的键盘操作：

Enter: 发送消息Shift + Enter: 换行Ctrl + Enter / Cmd + Enter: 发送消息


// 处理回车键
const handleEnterKey = (event: Event) => {
  const keyboardEvent = event as KeyboardEvent;
  // 如果按了 Shift+Enter，允许换行（默认行为）
  if (keyboardEvent.shiftKey) {
    return;
  }
  // 如果按了 Ctrl+Enter 或 Cmd+Enter，发送消息
  if (keyboardEvent.ctrlKey || keyboardEvent.metaKey) {
    handleSend();
    return;
  }
  // 单独按 Enter，发送消息并阻止默认换行
  keyboardEvent.preventDefault();
  handleSend();
};

🎨 UI 设计亮点

1. 左侧可折叠侧边栏

支持折叠/展开，节省空间显示用户信息和对话历史流畅的动画过渡

2. 消息气泡设计

用户消息：右侧显示，渐变紫色背景AI 消息：左侧显示，白色背景加载状态：在消息气泡内显示”正在思考…”