TDesign Chat - AI 智能对话系统

作品简介

TDesign Chat 是一个基于 Vue3 和 TDesign 组件库开发的智能对话系统。它集成了 DeepSeek AI 的能力，提供了智能对话、代码生成、多语言翻译等功能。系统采用了响应式设计，支持深色/浅色主题切换，并实现了流式响应，为用户提供流畅的对话体验。

核心功能

• 🤖 智能对话：支持自然语言交互
• 💻 代码生成：提供编程相关问题解答
• 🌐 多语言翻译：自动识别语言并翻译
• 🎨 主题切换：支持深色/浅色模式
• 📱 响应式设计：完美适配多端显示

技术架构

前端技术栈

• 框架: Vue 3 + Vite
• UI组件: TDesign Vue Next
• 样式处理: Less
• HTTP客户端: Axios
• 状态管理: Vue Composition API

后端技术栈

• 运行环境: Node.js
• Web框架: Express
• AI能力: DeepSeek API
• 安全性: dotenv 环境变量管理

系统架构图

用户界面 (Vue3 + TDesign)
↓
前端业务逻辑
↓
Express 后端
↓
DeepSeek API

实现过程

1. 项目搭建

• 使用 Vite 创建 Vue3 项目
• 集成 TDesign 组件库
• 配置开发环境和构建流程

2. 核心功能实现

对话系统

<template>
	<t-chat
		ref="chatRef"
		:class="['chat-container', { 'mobile': isMobile }]"
		:messages="chatList"
		@send="handleSend"
	/>
</template>
<script setup>
const handleSend = async (message) => {
	// 实现消息发送和流式响应
	await fetchSSE(messages, {
		success: (res) => {
			if (res.type === 'delta') {
			updateMessage(res.data.delta.content);
			}
		}
	});
};
</script>

主题切换

<script setup>
const toggleTheme = () => {
	isDarkTheme.value = !isDarkTheme.value;
	const htmlElement = document.documentElement;
	if (isDarkTheme.value) {
		htmlElement.setAttribute('theme-mode', 'dark');
	} else {
		htmlElement.removeAttribute('theme-mode');
	}
};
</script>

智能模式切换

const CHAT_MODES = {
	TRANSLATE: 'translate',
		CODE: 'code',
		CHAT: 'chat'
	};
	const detectMode = (content) => {
	// 智能检测用户意图
	if (hasCodeKeywords) return CHAT_MODES.CODE;
	if (isTranslateRequest) return CHAT_MODES.TRANSLATE;
	return CHAT_MODES.CHAT;
};

开发环境、开发流程

开发环境

• Node.js v18+
• npm v8+
• VS Code
• Chrome DevTools

开发流程

1. 环境准备
   安装依赖
   npm install
   启动开发服务器
   npm run dev

2. 配置说明

env
VITE_APP_API_URL=your_api_url
DEEPSEEK_API_KEY=your_api_key

腾讯云AI代码助手的助力

在开发过程中，腾讯云 AI 代码助手提供了重要支持：

1. 代码补全

• 智能提示 Vue 组件属性
• 自动补全 TypeScript 类型
• 提供最佳实践建议

2. 问题诊断

• 实时代码错误检测
• 提供优化建议
• 帮助解决类型问题

3. 文档生成

• 自动生成注释
• 提供代码示例
• 辅助编写文档

4. 重构建议

• 提供代码优化方案
• 识别潜在问题
• 建议更好的实现方式

效果演示

主题切换

功能演示

1. 智能对话

   • 自然语言交互
   • 上下文理解
   • 流式响应

2. 代码生成

   • 智能代码补全
   • 多语言支持
   • 代码解释

3. 翻译功能

   • 自动语言检测
   • 精准翻译
   • 保持原文风格