当前位置：首页 > news >正文

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

news 2026/3/27 5:07:16

前言

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

项目概述

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

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

️ 技术栈

前端框架: Vue 3.5.13 (Composition API)
类型系统: TypeScript 5.8.3
UI 组件库: Element Plus 2.11.9
HTTP 客户端: Axios 1.13.2
AI 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