Skip to content

V
Vue-Dashboard
Commit 523c65df by User
Options

补充聊天模块的完整文件和依赖

parent 75526240
Showing with 108 additions and 4 deletions
DEEPSEEK_SETUP.md 0 → 100644
# DeepSeek API 集成指南
## 功能特性
✨ **已完成的功能**：
- ✅ DeepSeek API 完整集成
- ✅ 实时思考过程展示
- ✅ 打字机效果显示
- ✅ Markdown 格式化回复
- ✅ 对话历史管理
- ✅ API 配置界面
- ✅ 连接测试功能
- ✅ 流式响应支持
## 快速开始
### 1. 获取 DeepSeek API Key
- 访问 [DeepSeek 官网](https://www.deepseek.com/)
- 注册账号并获取 API Key
### 2. 访问聊天界面
- 在浏览器中打开：`http://localhost:3000/chat/deepseek`
- 或通过侧边导航：AI聊天 → DeepSeek Chat
### 3. 配置 API Key
1. 点击左侧工具栏中的 ⚙️ 配置按钮
2. 输入您的 DeepSeek API Key
3. 点击"测试连接"验证配置
4. 点击"保存配置"
### 4. 开始对话
- 在底部输入框输入问题
- 按 Enter 发送，Shift+Enter 换行
- 享受AI的深度思考过程！
## 核心文件说明
### API 服务层
- `src/service/api/deepseek.ts` - DeepSeek API 封装服务
- `src/components/chat/ApiConfig.vue` - API 配置组件
### 用户界面
- `src/views/chat/deepseek.vue` - 主要聊天界面
- `src/router/routes/index.ts` - 路由配置
## API 配置选项
- **API Key**: 您的 DeepSeek API 密钥
- **模型**: 支持 `deepseek-chat` 和 `deepseek-coder`
- **Base URL**: 默认 `https://api.deepseek.com`
## 特殊功能
### 思考过程展示
AI 会先展示详细的思考过程，然后给出最终答案：
1. 🤖 思考中... (显示实时计时)
2. 🧠 深度思考过程 (打字机效果显示)
3. ✅ 最终答案 (Markdown 格式化)
### 对话管理
- 自动保存对话历史
- 支持新建多个对话
- 支持搜索历史对话
## 使用技巧
1. **复杂问题**: 对于编程、分析等复杂问题，AI 会展示详细的思考过程
2. **代码生成**: 支持多种编程语言的代码生成和解释
3. **Markdown**: 回复支持完整的 Markdown 格式，包括代码块、表格、列表等
## 故障排除
### API 连接失败
1. 检查 API Key 是否正确
2. 确认网络连接
3. 查看浏览器控制台错误信息
### 思考过程不显示
1. 确认 API 响应正常
2. 检查 JavaScript 控制台是否有错误
3. 刷新页面重试
## 开发说明
如需自定义或扩展功能：
1. **修改思考逻辑**: 编辑 `deepseek.ts` 中的 `generateThinking` 方法
2. **调整界面样式**: 修改 `deepseek.vue` 中的 SCSS 样式
3. **添加新模型**: 在 `ApiConfig.vue` 中添加模型选项
## 技术栈
- Vue 3 + TypeScript
- Naive UI 组件库
- Markdown-it 渲染器
- DeepSeek API
---
🎉 **现在您可以开始使用 DeepSeek AI 进行智能对话了！**
dist/index.html
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta name="buildTime" content="2025-04-25 17:56:27">
<meta name="buildTime" content="2025-06-10 15:32:11">
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>VueDashboard</title>
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-CsI39EZy.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-DhhgO4aJ.css">
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-BV5IaHCk.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-BFEuYhFr.css">
</head>
<body>
<div id="app"></div>
......
src/main.ts
......@@ -2,10 +2,14 @@ import { createApp } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css';
import VueGridLayout from 'vue-grid-layout';
import MateChat from '@matechat/core';
import '@devui-design/icons/icomoon/devui-icon.css';
import './plugins/assets';
import { localStg } from '@/utils/storage';
// main.js or main.ts
import 'font-awesome/css/font-awesome.css';
// 引入 KaTeX 样式以支持数学公式渲染
import 'katex/dist/katex.min.css';
import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
import { setupStore } from './store';
import { setupRouter } from './router';
......@@ -79,6 +83,7 @@ async function setupApp() {
// startInactivityTimer(app);
app.use(VueGridLayout);
app.use(MateChat);
// 全局注册 wangeditor 组件
app.component('WangEditor', Editor);
......
src/store/modules/tab/shared.ts
......@@ -78,7 +78,6 @@ export function getTabByRoute(route: App.Global.TabRoute) {
fixedIndex: fixedIndexInTab,
icon,
localIcon,
icons: icons as string,
i18nKey
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment