前言
最近在开发一个后台管理系统时，需要集成 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
