Skip to content

V
Vue-Dashboard
Commit c560ab0d by User
Options

聊天助手添加数学公式展示

parent 8f347ca8
Showing with 501 additions and 331 deletions
dist/index.html
<!doctype html> <!doctype html>
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<head> <head>
<meta name="buildTime" content="2025-06-08 19:06:22"> <meta name="buildTime" content="2025-06-10 15:32:11">
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" /> <link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<title>VueDashboard</title> <title>VueDashboard</title>
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-7l3HYvBE.js"></script> <script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-BV5IaHCk.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-CKpMNMck.css"> <link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-BFEuYhFr.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>
package.json
...@@ -64,7 +64,10 @@ ...@@ -64,7 +64,10 @@
"dayjs": "1.11.12", "dayjs": "1.11.12",
"echarts": "5.5.1", "echarts": "5.5.1",
"font-awesome": "4.7.0", "font-awesome": "4.7.0",
"highlight.js": "^11.11.1",
"katex": "^0.16.22",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"markdown-it-katex": "^2.0.3",
"naive-ui": "2.39.0", "naive-ui": "2.39.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"pinia": "2.2.0", "pinia": "2.2.0",
......
pnpm-lock.yaml
...@@ -59,9 +59,18 @@ importers: ...@@ -59,9 +59,18 @@ importers:
font-awesome: font-awesome:
specifier: 4.7.0 specifier: 4.7.0
version: 4.7.0 version: 4.7.0
highlight.js:
specifier: ^11.11.1
version: 11.11.1
katex:
specifier: ^0.16.22
version: 0.16.22
markdown-it: markdown-it:
specifier: ^14.1.0 specifier: ^14.1.0
version: 14.1.0 version: 14.1.0
markdown-it-katex:
specifier: ^2.0.3
version: 2.0.3
naive-ui: naive-ui:
specifier: 2.39.0 specifier: 2.39.0
version: 2.39.0(vue@3.4.35(typescript@5.5.4)) version: 2.39.0(vue@3.4.35(typescript@5.5.4))
...@@ -2134,6 +2143,10 @@ packages: ...@@ -2134,6 +2143,10 @@ packages:
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
commander@8.3.0:
resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
engines: {node: '>= 12'}
comment-parser@1.4.1: comment-parser@1.4.1:
resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==} resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
engines: {node: '>= 12.0.0'} engines: {node: '>= 12.0.0'}
...@@ -3394,10 +3407,6 @@ packages: ...@@ -3394,10 +3407,6 @@ packages:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==} resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
hasBin: true hasBin: true
highlight.js@11.10.0:
resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
engines: {node: '>=12.0.0'}
highlight.js@11.11.1: highlight.js@11.11.1:
resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==} resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
engines: {node: '>=12.0.0'} engines: {node: '>=12.0.0'}
...@@ -3796,6 +3805,14 @@ packages: ...@@ -3796,6 +3805,14 @@ packages:
resolution: {integrity: sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==} resolution: {integrity: sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==}
hasBin: true hasBin: true
katex@0.16.22:
resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==}
hasBin: true
katex@0.6.0:
resolution: {integrity: sha512-rS4mY3SvHYg5LtQV6RBcK0if7ur6plyEukAOV+jGGPqFImuzu8fHL6M752iBmRGoUyF0bhZbAPoezehn7xYksA==}
hasBin: true
keyv@4.5.4: keyv@4.5.4:
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
...@@ -3959,6 +3976,9 @@ packages: ...@@ -3959,6 +3976,9 @@ packages:
markdown-it-emoji@3.0.0: markdown-it-emoji@3.0.0:
resolution: {integrity: sha512-+rUD93bXHubA4arpEZO3q80so0qgoFJEKRkRbjKX8RTdca89v2kfyF+xR3i2sQTwql9tpPZPOQN5B+PunspXRg==} resolution: {integrity: sha512-+rUD93bXHubA4arpEZO3q80so0qgoFJEKRkRbjKX8RTdca89v2kfyF+xR3i2sQTwql9tpPZPOQN5B+PunspXRg==}
markdown-it-katex@2.0.3:
resolution: {integrity: sha512-nUkkMtRWeg7OpdflamflE/Ho/pWl64Lk9wNBKOmaj33XkQdumhXAIYhI0WO03GeiycPCsxbmX536V5NEXpC3Ng==}
markdown-it-plantuml@1.4.1: markdown-it-plantuml@1.4.1:
resolution: {integrity: sha512-13KgnZaGYTHBp4iUmGofzZSBz+Zj6cyqfR0SXUIc9wgWTto5Xhn7NjaXYxY0z7uBeTUMlc9LMQq5uP4OM5xCHg==} resolution: {integrity: sha512-13KgnZaGYTHBp4iUmGofzZSBz+Zj6cyqfR0SXUIc9wgWTto5Xhn7NjaXYxY0z7uBeTUMlc9LMQq5uP4OM5xCHg==}
...@@ -3970,6 +3990,9 @@ packages: ...@@ -3970,6 +3990,9 @@ packages:
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==} resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
hasBin: true hasBin: true
match-at@0.1.1:
resolution: {integrity: sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==}
mdast-util-from-markdown@2.0.1: mdast-util-from-markdown@2.0.1:
resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==} resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
...@@ -7670,6 +7693,8 @@ snapshots: ...@@ -7670,6 +7693,8 @@ snapshots:
commander@7.2.0: {} commander@7.2.0: {}
commander@8.3.0: {}
comment-parser@1.4.1: {} comment-parser@1.4.1: {}
compatx@0.1.8: compatx@0.1.8:
...@@ -9053,8 +9078,6 @@ snapshots: ...@@ -9053,8 +9078,6 @@ snapshots:
he@1.2.0: {} he@1.2.0: {}
highlight.js@11.10.0: {}
highlight.js@11.11.1: {} highlight.js@11.11.1: {}
highlight.js@11.9.0: highlight.js@11.9.0:
...@@ -9382,6 +9405,14 @@ snapshots: ...@@ -9382,6 +9405,14 @@ snapshots:
dependencies: dependencies:
commander: 2.20.3 commander: 2.20.3
katex@0.16.22:
dependencies:
commander: 8.3.0
katex@0.6.0:
dependencies:
match-at: 0.1.1
keyv@4.5.4: keyv@4.5.4:
dependencies: dependencies:
json-buffer: 3.0.1 json-buffer: 3.0.1
...@@ -9551,6 +9582,10 @@ snapshots: ...@@ -9551,6 +9582,10 @@ snapshots:
markdown-it-emoji@3.0.0: {} markdown-it-emoji@3.0.0: {}
markdown-it-katex@2.0.3:
dependencies:
katex: 0.6.0
markdown-it-plantuml@1.4.1: {} markdown-it-plantuml@1.4.1: {}
markdown-it@12.2.0: markdown-it@12.2.0:
...@@ -9570,6 +9605,8 @@ snapshots: ...@@ -9570,6 +9605,8 @@ snapshots:
punycode.js: 2.3.1 punycode.js: 2.3.1
uc.micro: 2.1.0 uc.micro: 2.1.0
match-at@0.1.1: {}
mdast-util-from-markdown@2.0.1: mdast-util-from-markdown@2.0.1:
dependencies: dependencies:
'@types/mdast': 4.0.4 '@types/mdast': 4.0.4
...@@ -9883,7 +9920,7 @@ snapshots: ...@@ -9883,7 +9920,7 @@ snapshots:
date-fns: 2.30.0 date-fns: 2.30.0
date-fns-tz: 2.0.1(date-fns@2.30.0) date-fns-tz: 2.0.1(date-fns@2.30.0)
evtd: 0.2.4 evtd: 0.2.4
highlight.js: 11.10.0 highlight.js: 11.11.1
lodash: 4.17.21 lodash: 4.17.21
lodash-es: 4.17.21 lodash-es: 4.17.21
seemly: 0.3.8 seemly: 0.3.8
...@@ -11176,7 +11213,7 @@ snapshots: ...@@ -11176,7 +11213,7 @@ snapshots:
diff2html: 3.4.51 diff2html: 3.4.51
echarts: 5.3.3 echarts: 5.3.3
fs-extra: 10.1.0 fs-extra: 10.1.0
highlight.js: 11.10.0 highlight.js: 11.11.1
katex: 0.12.0 katex: 0.12.0
lodash: 4.17.21 lodash: 4.17.21
lodash-es: 4.17.21 lodash-es: 4.17.21
......
src/locales/langs/en-us.ts
...@@ -155,19 +155,20 @@ const local: App.I18n.Schema = { ...@@ -155,19 +155,20 @@ const local: App.I18n.Schema = {
500: 'Server Error', 500: 'Server Error',
'iframe-page': 'Iframe', 'iframe-page': 'Iframe',
home: 'Home', home: 'Home',
exception: '异常页', chat: 'Chat',
exception: 'Exception',
exception_403: '403', exception_403: '403',
exception_404: '404', exception_404: '404',
exception_500: '500', exception_500: '500',
document: '文档', document: 'Document',
document_project: '项目文档', document_project: 'Project Document',
'document_project-link': '项目文档(外链)', 'document_project-link': 'Project Document (Link)',
document_vue: 'Vue文档', document_vue: 'Vue Document',
document_localhost:'本地测试', document_localhost: 'Local Test',
document_vite: 'Vite文档', document_vite: 'Vite Document',
document_unocss: 'UnoCSS文档', document_unocss: 'UnoCSS Document',
document_naive: 'Naive UI文档', document_naive: 'Naive UI Document',
document_antd: 'Ant Design Vue文档' document_antd: 'Ant Design Vue Document'
}, },
page: { page: {
login: { login: {
......
src/locales/langs/zh-cn.ts
...@@ -155,6 +155,7 @@ const local: App.I18n.Schema = { ...@@ -155,6 +155,7 @@ const local: App.I18n.Schema = {
500: '服务器错误', 500: '服务器错误',
'iframe-page': '外链页面', 'iframe-page': '外链页面',
home: '首页', home: '首页',
chat: 'AI助手',
exception: '异常页', exception: '异常页',
exception_403: '403', exception_403: '403',
exception_404: '404', exception_404: '404',
......
src/main.ts
...@@ -8,6 +8,8 @@ import './plugins/assets'; ...@@ -8,6 +8,8 @@ import './plugins/assets';
import { localStg } from '@/utils/storage'; import { localStg } from '@/utils/storage';
// main.js or main.ts // main.js or main.ts
import 'font-awesome/css/font-awesome.css'; import 'font-awesome/css/font-awesome.css';
// 引入 KaTeX 样式以支持数学公式渲染
import 'katex/dist/katex.min.css';
import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins'; import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
import { setupStore } from './store'; import { setupStore } from './store';
import { setupRouter } from './router'; import { setupRouter } from './router';
......
src/router/elegant/imports.ts
...@@ -20,10 +20,6 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro ...@@ -20,10 +20,6 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
500: () => import("@/views/_builtin/500/index.vue"), 500: () => import("@/views/_builtin/500/index.vue"),
"iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"), "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
login: () => import("@/views/_builtin/login/index.vue"), login: () => import("@/views/_builtin/login/index.vue"),
test: () => import("@/views/_builtin/test/index.vue"), chat: () => import("@/views/chat/index.vue"),
test_test1: () => import("@/views/_builtin/test/test1/index.vue"),
test_test2: () => import("@/views/_builtin/test/test2/index.vue"),
test_test3: () => import("@/views/_builtin/test/test3/index.vue"),
chat_deepseek: () => import("@/views/chat/deepseek/index.vue"),
home: () => import("@/views/home/index.vue"), home: () => import("@/views/home/index.vue"),
}; };
src/router/elegant/routes.ts
...@@ -41,22 +41,13 @@ export const generatedRoutes: GeneratedRoute[] = [ ...@@ -41,22 +41,13 @@ export const generatedRoutes: GeneratedRoute[] = [
{ {
name: 'chat', name: 'chat',
path: '/chat', path: '/chat',
component: 'layout.base', component: 'layout.base$view.chat',
meta: { meta: {
title: 'chat', title: 'chat',
i18nKey: 'route.chat' i18nKey: 'route.chat',
}, icon: 'mdi:chat',
children: [ order: 1
{ }
name: 'chat_deepseek',
path: '/chat/deepseek',
component: 'view.chat_deepseek',
meta: {
title: 'chat_deepseek',
i18nKey: 'route.chat_deepseek'
}
}
]
}, },
{ {
name: 'home', name: 'home',
...@@ -93,43 +84,5 @@ export const generatedRoutes: GeneratedRoute[] = [ ...@@ -93,43 +84,5 @@ export const generatedRoutes: GeneratedRoute[] = [
constant: true, constant: true,
hideInMenu: true hideInMenu: true
} }
},
{
name: 'test',
path: '/test',
component: 'layout.base',
meta: {
title: 'test',
i18nKey: 'route.test'
},
children: [
{
name: 'test_test1',
path: '/test/test1',
component: 'view.test_test1',
meta: {
title: 'test_test1',
i18nKey: 'route.test_test1'
}
},
{
name: 'test_test2',
path: '/test/test2',
component: 'view.test_test2',
meta: {
title: 'test_test2',
i18nKey: 'route.test_test2'
}
},
{
name: 'test_test3',
path: '/test/test3',
component: 'view.test_test3',
meta: {
title: 'test_test3',
i18nKey: 'route.test_test3'
}
}
]
} }
]; ];
src/router/elegant/transform.ts
...@@ -180,14 +180,9 @@ const routeMap: RouteMap = { ...@@ -180,14 +180,9 @@ const routeMap: RouteMap = {
"404": "/404", "404": "/404",
"500": "/500", "500": "/500",
"chat": "/chat", "chat": "/chat",
"chat_deepseek": "/chat/deepseek",
"home": "/home", "home": "/home",
"iframe-page": "/iframe-page/:url", "iframe-page": "/iframe-page/:url",
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?", "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?"
"test": "/test",
"test_test1": "/test/test1",
"test_test2": "/test/test2",
"test_test3": "/test/test3"
}; };
/** /**
......
src/router/routes/index.ts
...@@ -57,59 +57,7 @@ const customRoutes: CustomRoute[] = [ ...@@ -57,59 +57,7 @@ const customRoutes: CustomRoute[] = [
] ]
}, },
{
name: 'test' as any,
path: '/test' as any,
component: 'layout.base',
meta: {
title: '测试页面',
i18nKey: 'route.test' as any,
icon: 'mdi:test-tube',
order: 8
},
children: [
{
name: 'test_page' as any,
path: '/test/page' as any,
component: 'view._builtin.test' as any,
meta: {
title: '测试页面',
i18nKey: 'route.test_page' as any,
icon: 'mdi:test-tube-empty'
}
},
{
name: 'test_page1' as any,
path: '/test/test1' as any,
component: 'view._builtin.test.test1' as any,
meta: {
title: '测试页面1',
i18nKey: 'route.test_page1' as any,
icon: 'mdi:numeric-1-box'
}
},
{
name: 'test_page2' as any,
path: '/test/test2' as any,
component: 'view._builtin.test.test2' as any,
meta: {
title: '测试页面2',
i18nKey: 'route.test_page2' as any,
icon: 'mdi:numeric-2-box'
}
},
{
name: 'test_page3' as any,
path: '/test/test3' as any,
component: 'view._builtin.test.test3' as any,
meta: {
title: '测试页面3',
i18nKey: 'route.test_page3' as any,
icon: 'mdi:numeric-3-box'
}
}
]
}
// 以下是iframe-page的示例 // 以下是iframe-page的示例
// { // {
// name: 'document', // name: 'document',
......
src/service/api/deepseek.ts
...@@ -4,6 +4,13 @@ interface DeepSeekConfig { ...@@ -4,6 +4,13 @@ interface DeepSeekConfig {
model: string; model: string;
} }
interface ModelOption {
id: string;
name: string;
description: string;
config: DeepSeekConfig;
}
interface DeepSeekMessage { interface DeepSeekMessage {
role: 'system' | 'user' | 'assistant'; role: 'system' | 'user' | 'assistant';
content: string; content: string;
...@@ -39,21 +46,62 @@ interface DeepSeekResponse { ...@@ -39,21 +46,62 @@ interface DeepSeekResponse {
class DeepSeekService { class DeepSeekService {
private config: DeepSeekConfig; private config: DeepSeekConfig;
private readonly modelOptions: ModelOption[] = [
{
id: 'deepseek',
name: 'DeepSeek Chat',
description: 'DeepSeek 深度思考模型，适合复杂问题分析',
config: {
apiKey: 'sk-71f583d8c182420d9d2001f01aa2b643', // 预配置的DeepSeek API Key
baseURL: 'https://api.deepseek.com',
model: 'deepseek-chat'
}
},
{
id: 'openai-gpt4o-mini',
name: 'GPT-4o Mini',
description: 'OpenAI GPT-4o Mini 模型，快速响应',
config: {
apiKey: 'sk-m5oOhoMo9l3QboachCkbIjRAetfc0c1DCcBPvHUs8U3cMzS2', // 预配置的OpenAI API Key
baseURL: 'https://aicvw.com',
model: 'gpt-4o-mini'
}
}
];
constructor() { constructor() {
this.config = { // 默认使用第一个模型
apiKey: '', // 用户需要填入自己的 API Key this.config = { ...this.modelOptions[0].config };
baseURL: 'https://api.deepseek.com', }
model: 'deepseek-chat'
}; // 获取可用模型列表
getModelOptions(): ModelOption[] {
return this.modelOptions;
}
// 根据模型ID切换模型
switchModel(modelId: string) {
const selectedModel = this.modelOptions.find(model => model.id === modelId);
if (selectedModel) {
this.config = { ...selectedModel.config };
return true;
}
return false;
}
// 获取当前模型信息
getCurrentModel(): ModelOption | undefined {
return this.modelOptions.find(
model => model.config.model === this.config.model && model.config.baseURL === this.config.baseURL
);
} }
// 设置 API Key // 设置 API Key (保留兼容性)
setApiKey(apiKey: string) { setApiKey(apiKey: string) {
this.config.apiKey = apiKey; this.config.apiKey = apiKey;
} }
// 设置模型 // 设置模型 (保留兼容性)
setModel(model: string) { setModel(model: string) {
this.config.model = model; this.config.model = model;
} }
...@@ -61,7 +109,7 @@ class DeepSeekService { ...@@ -61,7 +109,7 @@ class DeepSeekService {
// 检查配置是否完整 // 检查配置是否完整
private validateConfig(): boolean { private validateConfig(): boolean {
if (!this.config.apiKey) { if (!this.config.apiKey) {
console.error('DeepSeek API Key 未设置'); console.error('API Key 未设置');
return false; return false;
} }
return true; return true;
...@@ -77,7 +125,7 @@ class DeepSeekService { ...@@ -77,7 +125,7 @@ class DeepSeekService {
} }
): Promise<DeepSeekResponse> { ): Promise<DeepSeekResponse> {
if (!this.validateConfig()) { if (!this.validateConfig()) {
throw new Error('DeepSeek 配置不完整'); throw new Error('API 配置不完整');
} }
const requestBody: DeepSeekRequest = { const requestBody: DeepSeekRequest = {
...@@ -100,15 +148,13 @@ class DeepSeekService { ...@@ -100,15 +148,13 @@ class DeepSeekService {
if (!response.ok) { if (!response.ok) {
const errorData = await response.json().catch(() => ({})); const errorData = await response.json().catch(() => ({}));
throw new Error( throw new Error(`API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`);
`DeepSeek API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`
);
} }
const data = await response.json(); const data = await response.json();
return data; return data;
} catch (error) { } catch (error) {
console.error('DeepSeek API 调用错误:', error); console.error('API 调用错误:', error);
throw error; throw error;
} }
} }
...@@ -125,7 +171,7 @@ class DeepSeekService { ...@@ -125,7 +171,7 @@ class DeepSeekService {
} }
): Promise<void> { ): Promise<void> {
if (!this.validateConfig()) { if (!this.validateConfig()) {
onError(new Error('DeepSeek 配置不完整')); onError(new Error('API 配置不完整'));
return; return;
} }
...@@ -149,9 +195,7 @@ class DeepSeekService { ...@@ -149,9 +195,7 @@ class DeepSeekService {
if (!response.ok) { if (!response.ok) {
const errorData = await response.json().catch(() => ({})); const errorData = await response.json().catch(() => ({}));
throw new Error( throw new Error(`API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`);
`DeepSeek API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`
);
} }
const reader = response.body?.getReader(); const reader = response.body?.getReader();
...@@ -194,7 +238,7 @@ class DeepSeekService { ...@@ -194,7 +238,7 @@ class DeepSeekService {
} }
} }
} catch (error) { } catch (error) {
console.error('DeepSeek 流式请求错误:', error); console.error('流式请求错误:', error);
onError(error as Error); onError(error as Error);
} }
} }
...@@ -227,4 +271,4 @@ class DeepSeekService { ...@@ -227,4 +271,4 @@ class DeepSeekService {
export const deepSeekService = new DeepSeekService(); export const deepSeekService = new DeepSeekService();
// 导出类型 // 导出类型
export type { DeepSeekMessage, DeepSeekResponse }; export type { DeepSeekMessage, DeepSeekResponse, ModelOption };
src/store/modules/tab/shared.ts
...@@ -78,7 +78,6 @@ export function getTabByRoute(route: App.Global.TabRoute) { ...@@ -78,7 +78,6 @@ export function getTabByRoute(route: App.Global.TabRoute) {
fixedIndex: fixedIndexInTab, fixedIndex: fixedIndexInTab,
icon, icon,
localIcon, localIcon,
icons: icons as string,
i18nKey i18nKey
}; };
......
src/typings/elegant-router.d.ts
...@@ -34,14 +34,9 @@ declare module "@elegant-router/types" { ...@@ -34,14 +34,9 @@ declare module "@elegant-router/types" {
"404": "/404"; "404": "/404";
"500": "/500"; "500": "/500";
"chat": "/chat"; "chat": "/chat";
"chat_deepseek": "/chat/deepseek";
"home": "/home"; "home": "/home";
"iframe-page": "/iframe-page/:url"; "iframe-page": "/iframe-page/:url";
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?"; "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
"test": "/test";
"test_test1": "/test/test1";
"test_test2": "/test/test2";
"test_test3": "/test/test3";
}; };
/** /**
...@@ -93,7 +88,6 @@ declare module "@elegant-router/types" { ...@@ -93,7 +88,6 @@ declare module "@elegant-router/types" {
| "home" | "home"
| "iframe-page" | "iframe-page"
| "login" | "login"
| "test"
>; >;
/** /**
...@@ -117,11 +111,7 @@ declare module "@elegant-router/types" { ...@@ -117,11 +111,7 @@ declare module "@elegant-router/types" {
| "500" | "500"
| "iframe-page" | "iframe-page"
| "login" | "login"
| "test" | "chat"
| "test_test1"
| "test_test2"
| "test_test3"
| "chat_deepseek"
| "home" | "home"
>; >;
......
src/utils/katex-renderer.ts 0 → 100644
import katex from 'katex';
// 简单的数学公式渲染器
export const renderMathFormulas = (content: string): string => {
console.log('开始处理数学公式，内容长度:', content.length);
// 渲染块级数学公式 $$...$$ 和 \[...\]（支持多行）
content = content.replace(/\$\$([\s\S]*?)\$\$/g, (match, formula) => {
console.log('发现$$块级公式:', formula.trim());
try {
const rendered = katex.renderToString(formula.trim(), {
displayMode: true,
throwOnError: false
});
console.log('$$块级公式渲染成功');
return `<div class="math-display">${rendered}</div>`;
} catch (error) {
console.error('KaTeX $$块级公式渲染错误:', error, '公式内容:', formula);
return `<div class="math-error">数学公式渲染错误: ${formula.trim()}</div>`;
}
});
// 渲染 \[...\] 块级数学公式
content = content.replace(/\\\[([\s\S]*?)\\\]/g, (match, formula) => {
console.log('发现\\[\\]块级公式:', formula.trim());
try {
const rendered = katex.renderToString(formula.trim(), {
displayMode: true,
throwOnError: false
});
console.log('\\[\\]块级公式渲染成功');
return `<div class="math-display">${rendered}</div>`;
} catch (error) {
console.error('KaTeX \\[\\]块级公式渲染错误:', error, '公式内容:', formula);
return `<div class="math-error">数学公式渲染错误: ${formula.trim()}</div>`;
}
});
// 渲染行内数学公式 $...$
content = content.replace(/\$([^$]+?)\$/g, (match, formula) => {
console.log('发现$行内公式:', formula.trim());
try {
const rendered = katex.renderToString(formula.trim(), {
displayMode: false,
throwOnError: false
});
console.log('$行内公式渲染成功');
return rendered;
} catch (error) {
console.error('KaTeX $行内公式渲染错误:', error, '公式内容:', formula);
return `<span class="math-error">公式错误: ${formula.trim()}</span>`;
}
});
// 渲染 \(...\) 行内数学公式
content = content.replace(/\\\((.*?)\\\)/g, (match, formula) => {
console.log('发现\\(\\)行内公式:', formula.trim());
try {
const rendered = katex.renderToString(formula.trim(), {
displayMode: false,
throwOnError: false
});
console.log('\\(\\)行内公式渲染成功');
return rendered;
} catch (error) {
console.error('KaTeX \\(\\)行内公式渲染错误:', error, '公式内容:', formula);
return `<span class="math-error">公式错误: ${formula.trim()}</span>`;
}
});
return content;
};
// 处理 markdown + 数学公式
export const renderMarkdownWithMath = (content: string): string => {
console.log('原始内容:', content);
// 首先处理数学公式
const withMath = renderMathFormulas(content);
console.log('处理数学公式后:', withMath);
// 简单的 markdown 处理，但保持数学公式完整
let processed = withMath;
// 处理标题（只在行首）
processed = processed.replace(/^### (.*)$/gm, '<h3>$1</h3>');
processed = processed.replace(/^## (.*)$/gm, '<h2>$1</h2>');
processed = processed.replace(/^# (.*)$/gm, '<h1>$1</h1>');
// 处理粗体
processed = processed.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
// 处理有序列表
processed = processed.replace(/^\d+\.\s+(.*)$/gm, '<li>$1</li>');
// 处理无序列表
processed = processed.replace(/^[-*]\s+(.*)$/gm, '<li>$1</li>');
// 将连续的 li 标签包装在 ol 或 ul 中
processed = processed.replace(/(<li>.*?<\/li>(?:\s*<li>.*?<\/li>)*)/gs, '<ul>$1</ul>');
// 处理段落（双换行表示段落分隔）
const paragraphs = processed.split(/\n\s*\n/);
processed = paragraphs.map(paragraph => {
const trimmed = paragraph.trim();
if (!trimmed) return '';
// 如果已经是HTML标签，不要包装
if (trimmed.startsWith('<')) {
return trimmed;
}
// 处理单行换行
const withBreaks = trimmed.replace(/\n/g, '<br>');
return `<p>${withBreaks}</p>`;
}).join('\n');
console.log('最终处理结果:', processed);
return processed;
};
src/utils/markdown.ts 0 → 100644
import MarkdownIt from 'markdown-it';
// @ts-ignore
import markdownItKatex from 'markdown-it-katex';
// 创建 markdown-it 实例并配置 KaTeX 支持
export const createMarkdownRenderer = () => {
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: true,
});
// 使用 markdown-it-katex 插件
md.use(markdownItKatex, {
blockClass: 'math-display',
errorColor: '#cc0000',
macros: {
"\\RR": "\\mathbb{R}"
}
});
return md;
};
// 渲染 markdown 内容
export const renderMarkdown = (content: string): string => {
const md = createMarkdownRenderer();
return md.render(content);
};
src/views/_builtin/test/index.vue deleted 100644 → 0
<script setup lang="ts">
// 测试页面组件
</script>
<template>
<div class="h-full wh-full flex-col flex-center">
<div class="text-primary text-32px font-bold mb-24px">测试页面</div>
<div class="text-16px mb-12px">这是一个用于测试的页面组件</div>
<div class="text-14px text-gray-400">您可以在这里添加任何需要测试的内容</div>
</div>
</template>
<style scoped></style>
src/views/_builtin/test/test1/index.vue deleted 100644 → 0
<script setup lang="ts">
// 测试页面1组件
</script>
<template>
<div class="h-full wh-full flex-col flex-center">
<div class="text-primary text-32px font-bold mb-24px">测试页面12</div>
<div class="text-16px mb-12px">这是测试页面1</div>
<div class="text-14px text-gray-400">测试子菜单项是否能正常展示</div>
</div>
</template>
<style scoped></style>
src/views/_builtin/test/test2/index.vue deleted 100644 → 0
<script setup lang="ts">
// 测试页面2组件
</script>
<template>
<div class="h-full wh-full flex-col flex-center">
<div class="text-primary text-32px font-bold mb-24px">测试页面2</div>
<div class="text-16px mb-12px">这是测试页面2</div>
<div class="text-14px text-gray-400">测试子菜单项是否能正常展示</div>
</div>
</template>
<style scoped></style>
src/views/_builtin/test/test3/index.vue deleted 100644 → 0
<script setup lang="ts">
// 测试页面3组件
</script>
<template>
<div class="h-full wh-full flex-col flex-center">
<div class="text-primary text-32px font-bold mb-24px">测试页面3</div>
<div class="text-16px mb-12px">这是测试页面3</div>
<div class="text-14px text-gray-400">测试子菜单项是否能正常展示</div>
</div>
</template>
<style scoped></style>
src/views/chat/deepseek/index.vue → src/views/chat/index.vue
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'; import { computed, onMounted, onUnmounted, ref } from 'vue';
import MarkdownIt from 'markdown-it'; import { type ModelOption, deepSeekService } from '@/service/api/deepseek';
import { deepSeekService } from '@/service/api/deepseek'; import { renderMarkdownWithMath as renderContentWithMath } from '@/utils/katex-renderer';
// 初始化 markdown 渲染器
const mdt = new MarkdownIt({
breaks: true,
linkify: true,
html: true
});
interface ChatMessage { interface ChatMessage {
id: string; id: string;
...@@ -47,8 +40,9 @@ const lastThinkingTime = ref(0); ...@@ -47,8 +40,9 @@ const lastThinkingTime = ref(0);
// 配置相关 // 配置相关
const showConfig = ref(false); const showConfig = ref(false);
const apiKey = ref(''); const selectedModelId = ref('deepseek');
const testing = ref(false); const testing = ref(false);
const modelOptions = ref<ModelOption[]>([]);
// 聊天历史数据 // 聊天历史数据
const chatHistory = ref<ChatHistory[]>([ const chatHistory = ref<ChatHistory[]>([
...@@ -72,12 +66,27 @@ const currentChat = computed(() => { ...@@ -72,12 +66,27 @@ const currentChat = computed(() => {
}); });
const isApiConfigured = computed(() => { const isApiConfigured = computed(() => {
return apiKey.value.trim() !== ''; return selectedModelId.value !== '';
});
const currentModelName = computed(() => {
if (!selectedModelId.value) return 'AI助手';
const currentModel = modelOptions.value.find(model => model.id === selectedModelId.value);
return currentModel?.name || 'AI助手';
}); });
// 方法 // 聊天容器引用
const renderMarkdown = (content: string) => { const chatContentRef = ref<HTMLElement | null>(null);
return mdt.render(content);
// 滚动到底部
const scrollToBottom = () => {
if (chatContentRef.value) {
setTimeout(() => {
if (chatContentRef.value) {
chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight;
}
}, 50);
}
}; };
const newChat = () => { const newChat = () => {
...@@ -107,15 +116,15 @@ const switchChat = (chatId: string) => { ...@@ -107,15 +116,15 @@ const switchChat = (chatId: string) => {
}; };
// 配置相关方法 // 配置相关方法
const onConfigChange = () => { const onModelChange = () => {
if (apiKey.value) { if (selectedModelId.value) {
deepSeekService.setApiKey(apiKey.value); deepSeekService.switchModel(selectedModelId.value);
} }
}; };
const saveConfig = () => { const saveConfig = () => {
localStorage.setItem('deepseek-api-key', apiKey.value); localStorage.setItem('deepseek-selected-model', selectedModelId.value);
deepSeekService.setApiKey(apiKey.value); deepSeekService.switchModel(selectedModelId.value);
showConfig.value = false; showConfig.value = false;
// alert('配置已保存！'); // alert('配置已保存！');
}; };
...@@ -123,7 +132,7 @@ const saveConfig = () => { ...@@ -123,7 +132,7 @@ const saveConfig = () => {
const testConnection = async () => { const testConnection = async () => {
testing.value = true; testing.value = true;
try { try {
deepSeekService.setApiKey(apiKey.value); deepSeekService.switchModel(selectedModelId.value);
await deepSeekService.chat([{ role: 'user', content: 'Hello' }], { maxTokens: 10 }); await deepSeekService.chat([{ role: 'user', content: 'Hello' }], { maxTokens: 10 });
// alert('连接测试成功！'); // alert('连接测试成功！');
} catch (error) { } catch (error) {
...@@ -161,7 +170,7 @@ const showThinkingProcess = (message: ChatMessage, content: string) => { ...@@ -161,7 +170,7 @@ const showThinkingProcess = (message: ChatMessage, content: string) => {
const typeNextChar = () => { const typeNextChar = () => {
if (currentIndex < content.length) { if (currentIndex < content.length) {
message.currentThinkingText += content[currentIndex]; message.currentThinkingText += content[currentIndex];
currentIndex++; currentIndex += 1;
setTimeout(typeNextChar, 15); // 快速显示思考过程 setTimeout(typeNextChar, 15); // 快速显示思考过程
} else { } else {
message.isShowingThinking = false; message.isShowingThinking = false;
...@@ -190,40 +199,6 @@ const updateChatHistory = () => { ...@@ -190,40 +199,6 @@ const updateChatHistory = () => {
} }
}; };
// 显示最终答案
const showFinalAnswer = async (thinkingMessage: ChatMessage) => {
try {
const question = messages.value[messages.value.length - 2]?.content || '';
const thinkingProcess = thinkingMessage.currentThinkingText || '';
const finalAnswer = await deepSeekService.generateAnswer(question, thinkingProcess);
const aiMessage: ChatMessage = {
id: `msg_${Date.now() + 1}`,
from: 'ai',
content: finalAnswer,
timestamp: Date.now(),
thinkingTime: thinkingMessage.thinkingTime,
contentType: 'markdown'
};
messages.value.push(aiMessage);
// 更新聊天历史
updateChatHistory();
} catch (error) {
console.error('生成最终答案失败:', error);
const errorMessage: ChatMessage = {
id: `msg_error_${Date.now()}`,
from: 'ai',
content: `抱歉，生成回答时出现错误：${error instanceof Error ? error.message : '未知错误'}`,
timestamp: Date.now(),
contentType: 'text'
};
messages.value.push(errorMessage);
}
};
// 混合方案：思考过程 + 真正流式输出 // 混合方案：思考过程 + 真正流式输出
const onSubmit = async () => { const onSubmit = async () => {
if (!inputValue.value.trim() || !isApiConfigured.value) return; if (!inputValue.value.trim() || !isApiConfigured.value) return;
...@@ -239,6 +214,7 @@ const onSubmit = async () => { ...@@ -239,6 +214,7 @@ const onSubmit = async () => {
contentType: 'text' contentType: 'text'
}; };
messages.value.push(userMessage); messages.value.push(userMessage);
scrollToBottom();
const question = inputValue.value; const question = inputValue.value;
inputValue.value = ''; inputValue.value = '';
...@@ -261,6 +237,7 @@ const onSubmit = async () => { ...@@ -261,6 +237,7 @@ const onSubmit = async () => {
}; };
messages.value.push(aiMessage); messages.value.push(aiMessage);
scrollToBottom();
// 显示思考过程 // 显示思考过程
const thinkingContent = `分析用户问题：${question} const thinkingContent = `分析用户问题：${question}
...@@ -290,17 +267,15 @@ const onSubmit = async () => { ...@@ -290,17 +267,15 @@ const onSubmit = async () => {
aiMessage.isShowingThinking = false; aiMessage.isShowingThinking = false;
aiMessage.isTyping = true; aiMessage.isTyping = true;
console.log('🚀 开始流式输出答案...'); // console.log('🚀 开始流式输出答案...');
// 更详细的流式日志和强制刷新 // 更详细的流式日志和强制刷新
let chunkCount = 0;
await deepSeekService.streamChat( await deepSeekService.streamChat(
[{ role: 'user', content: question }], [{ role: 'user', content: question }],
// onChunk: 每收到一个数据块立即更新 // onChunk: 每收到一个数据块立即更新
async (chunk: string) => { async (chunk: string) => {
chunkCount += 1; // console.log(`📦 [${chunkCount}] 收到数据块:`, JSON.stringify(chunk));
console.log(`📦 [${chunkCount}] 收到数据块:`, JSON.stringify(chunk));
// 累加内容 // 累加内容
aiMessage.content += chunk; aiMessage.content += chunk;
...@@ -314,11 +289,12 @@ const onSubmit = async () => { ...@@ -314,11 +289,12 @@ const onSubmit = async () => {
content: aiMessage.content, content: aiMessage.content,
displayContent: aiMessage.content displayContent: aiMessage.content
}; };
scrollToBottom();
} }
console.log( // console.log(
`📝 更新后总长度: ${aiMessage.content.length}, 显示长度: ${aiMessage.displayContent || aiMessage.content.length}` // `📝 更新后总长度: ${aiMessage.content.length}, 显示长度: ${aiMessage.displayContent || aiMessage.content.length}`
); // );
}, },
// onComplete: 流式传输完成 // onComplete: 流式传输完成
...@@ -326,13 +302,13 @@ const onSubmit = async () => { ...@@ -326,13 +302,13 @@ const onSubmit = async () => {
aiMessage.isTyping = false; aiMessage.isTyping = false;
aiMessage.phase = 'completed'; aiMessage.phase = 'completed';
lastThinkingTime.value = aiMessage.thinkingTime || 0; lastThinkingTime.value = aiMessage.thinkingTime || 0;
console.log(`✅ 流式传输完成，共收到 ${chunkCount} 个数据块，最终内容长度: ${aiMessage.content.length}`); // console.log(`✅ 流式传输完成，共收到 ${chunkCount} 个数据块，最终内容长度: ${aiMessage.content.length}`);
updateChatHistory(); updateChatHistory();
}, },
// onError: 处理错误 // onError: 处理错误
(error: Error) => { (error: Error) => {
console.error('❌ 流式传输错误:', error); // console.error('❌ 流式传输错误:', error);
aiMessage.content = `抱歉，AI回复失败：${error.message}`; aiMessage.content = `抱歉，AI回复失败：${error.message}`;
aiMessage.displayContent = aiMessage.content; aiMessage.displayContent = aiMessage.content;
aiMessage.isTyping = false; aiMessage.isTyping = false;
...@@ -342,7 +318,7 @@ const onSubmit = async () => { ...@@ -342,7 +318,7 @@ const onSubmit = async () => {
}, 3000); // 3秒思考时间 }, 3000); // 3秒思考时间
} catch (error) { } catch (error) {
stopThinking(); stopThinking();
console.error('AI回复失败:', error); // console.error('AI回复失败:', error);
aiMessage.content = `抱歉，AI回复失败：${error instanceof Error ? error.message : '未知错误'}`; aiMessage.content = `抱歉，AI回复失败：${error instanceof Error ? error.message : '未知错误'}`;
aiMessage.isTyping = false; aiMessage.isTyping = false;
aiMessage.phase = 'completed'; aiMessage.phase = 'completed';
...@@ -360,9 +336,42 @@ const handleKeyDown = (event: KeyboardEvent) => { ...@@ -360,9 +336,42 @@ const handleKeyDown = (event: KeyboardEvent) => {
const copyMessage = async (content: string) => { const copyMessage = async (content: string) => {
try { try {
await navigator.clipboard.writeText(content); await navigator.clipboard.writeText(content);
alert('已复制到剪贴板'); // alert('已复制到剪贴板');
} catch (error) {
// console.error('复制失败:', error);
}
};
// 格式化内容，将思考过程和回答内容组合
const getFormattedContent = (message: ChatMessage): string => {
let content = '';
// 如果有思考过程就直接显示
if (message.currentThinkingText) {
content += `<think>
${message.currentThinkingText}
</think>
`;
}
// 添加最终答案内容
if (message.content && (message.phase === 'completed' || message.phase === 'answering')) {
content += message.displayContent || message.content;
}
return content;
};
// 使用自定义 markdown 渲染器渲染内容
const renderMarkdownWithMath = (content: string): string => {
try {
const result = renderContentWithMath(content);
console.log('Markdown 渲染结果:', result);
return result;
} catch (error) { } catch (error) {
console.error('复制失败:', error); console.error('Markdown 渲染错误:', error);
return content; // 返回原内容作为fallback
} }
}; };
...@@ -380,18 +389,21 @@ const regenerateMessage = async (message: ChatMessage) => { ...@@ -380,18 +389,21 @@ const regenerateMessage = async (message: ChatMessage) => {
} }
}; };
const showChatMenu = (chatId: string) => { const showChatMenu = (_chatId: string) => {
// 实现聊天菜单功能（删除、重命名等） // 实现聊天菜单功能（删除、重命名等）
console.log('显示聊天菜单', chatId); // console.log('显示聊天菜单', _chatId);
}; };
// 生命周期 // 生命周期
onMounted(() => { onMounted(() => {
// 加载保存的API Key // 加载可用模型选项
const savedApiKey = localStorage.getItem('deepseek-api-key'); modelOptions.value = deepSeekService.getModelOptions();
if (savedApiKey) {
apiKey.value = savedApiKey; // 加载保存的模型选择
deepSeekService.setApiKey(savedApiKey); const savedModel = localStorage.getItem('deepseek-selected-model');
if (savedModel) {
selectedModelId.value = savedModel;
deepSeekService.switchModel(savedModel);
} }
}); });
...@@ -413,7 +425,7 @@ onUnmounted(() => { ...@@ -413,7 +425,7 @@ onUnmounted(() => {
<div class="logo"> <div class="logo">
<i class="icon-user"></i> <i class="icon-user"></i>
</div> </div>
<span class="title">DeepSeek Chat</span> <span class="title">{{ currentModelName }}</span>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<i class="icon-add action-btn" @click="newChat"></i> <i class="icon-add action-btn" @click="newChat"></i>
...@@ -421,15 +433,22 @@ onUnmounted(() => { ...@@ -421,15 +433,22 @@ onUnmounted(() => {
</div> </div>
</div> </div>
<!-- API 配置面板 --> <!-- 模型配置面板 -->
<div v-if="showConfig" class="config-panel"> <div v-if="showConfig" class="config-panel">
<div class="config-item"> <div class="config-item">
<label>API Key:</label> <label>选择模型:</label>
<input v-model="apiKey" type="password" placeholder="请输入DeepSeek API Key" @input="onConfigChange" /> <select v-model="selectedModelId" @change="onModelChange">
<option v-for="model in modelOptions" :key="model.id" :value="model.id">
{{ model.name }}
</option>
</select>
<div v-if="selectedModelId" class="model-description">
{{ modelOptions.find(m => m.id === selectedModelId)?.description }}
</div>
</div> </div>
<div class="config-actions"> <div class="config-actions">
<button :disabled="!apiKey" class="save-btn" @click="saveConfig">保存</button> <button :disabled="!selectedModelId" class="save-btn" @click="saveConfig">保存</button>
<button :disabled="testing || !apiKey" class="test-btn" @click="testConnection"> <button :disabled="testing || !selectedModelId" class="test-btn" @click="testConnection">
{{ testing ? '测试中...' : '测试连接' }} {{ testing ? '测试中...' : '测试连接' }}
</button> </button>
</div> </div>
...@@ -466,7 +485,7 @@ onUnmounted(() => { ...@@ -466,7 +485,7 @@ onUnmounted(() => {
<!-- 状态指示 --> <!-- 状态指示 -->
<div class="sidebar-footer"> <div class="sidebar-footer">
<div class="status-indicator" :class="{ connected: isApiConfigured }"> <div class="status-indicator" :class="{ connected: isApiConfigured }">
<span>{{ isApiConfigured ? '✅ API已配置' : '❌ 未配置API' }}</span> <span>{{ isApiConfigured ? '✅ 模型已选择' : '❌ 未选择模型' }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -486,7 +505,7 @@ onUnmounted(() => { ...@@ -486,7 +505,7 @@ onUnmounted(() => {
</div> </div>
<!-- 聊天内容区域 --> <!-- 聊天内容区域 -->
<div v-if="!showStartPage" class="chat-content"> <div v-if="!showStartPage" ref="chatContentRef" class="chat-content">
<template v-for="msg in messages" :key="`${msg.id}-${msg.phase}-${Date.now()}`"> <template v-for="msg in messages" :key="`${msg.id}-${msg.phase}-${Date.now()}`">
<!-- 用户消息 --> <!-- 用户消息 -->
<div v-if="msg.from === 'user'" class="message user-message"> <div v-if="msg.from === 'user'" class="message user-message">
...@@ -506,20 +525,13 @@ onUnmounted(() => { ...@@ -506,20 +525,13 @@ onUnmounted(() => {
🧠 正在深度思考... 🧠 正在深度思考...
</div> </div>
<!-- 中间：思考过程内容 --> <!-- 统一使用 MarkdownCard 展示思考过程和答案 -->
<div v-if="msg.currentThinkingText" class="thinking-process-section"> <div class="unified-markdown-section">
<div class="thinking-content"> <!-- 使用 McMarkdownCard 统一渲染 -->
{{ msg.currentThinkingText }} <div
<span v-if="msg.phase === 'thinking' && msg.isShowingThinking" class="thinking-cursor">|</span> class="unified-content markdown-content"
</div> v-html="renderMarkdownWithMath(getFormattedContent(msg))"
</div> ></div>
<!-- 底部：最终答案（加粗显示） -->
<div
v-if="msg.content && (msg.phase === 'completed' || msg.phase === 'answering')"
class="final-answer-section"
>
<div class="final-answer" v-html="renderMarkdown(msg.displayContent || '')"></div>
</div> </div>
<!-- 底部：操作按钮 --> <!-- 底部：操作按钮 -->
...@@ -561,9 +573,11 @@ onUnmounted(() => { ...@@ -561,9 +573,11 @@ onUnmounted(() => {
<div class="feature-item">✨ 深度思考过程展示</div> <div class="feature-item">✨ 深度思考过程展示</div>
<div class="feature-item">💻 专业代码生成</div> <div class="feature-item">💻 专业代码生成</div>
<div class="feature-item">📝 Markdown格式化回复</div> <div class="feature-item">📝 Markdown格式化回复</div>
<div class="feature-item">🧮 数学公式渲染支持</div>
</div> </div>
<div v-if="!isApiConfigured" class="config-tip"> <div v-if="!isApiConfigured" class="config-tip">
<p>⚠️ 请先在左侧配置您的DeepSeek API Key</p> <p>⚠️ 请先在左侧选择AI模型</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -597,7 +611,7 @@ onUnmounted(() => { ...@@ -597,7 +611,7 @@ onUnmounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.chat-container { .chat-container {
display: flex; display: flex;
height: 100vh; height: 85vh;
background: #f5f5f5; background: #f5f5f5;
.sidebar { .sidebar {
...@@ -667,13 +681,24 @@ onUnmounted(() => { ...@@ -667,13 +681,24 @@ onUnmounted(() => {
color: #666; color: #666;
} }
input { input,
select {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
} }
.model-description {
margin-top: 6px;
padding: 6px 8px;
background: #f0f0f0;
border-radius: 4px;
font-size: 11px;
color: #666;
line-height: 1.4;
}
} }
.config-actions { .config-actions {
...@@ -758,6 +783,7 @@ onUnmounted(() => { ...@@ -758,6 +783,7 @@ onUnmounted(() => {
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
margin-bottom: 4px; margin-bottom: 4px;
color: #252b3a; // 默认黑色字体
&:hover { &:hover {
background: #f5f5f5; background: #f5f5f5;
...@@ -771,6 +797,11 @@ onUnmounted(() => { ...@@ -771,6 +797,11 @@ onUnmounted(() => {
.icon-message { .icon-message {
margin-right: 8px; margin-right: 8px;
color: #999; color: #999;
// 选中状态下的图标颜色
.chat-item.active & {
color: #5e7ce0;
}
} }
.chat-title { .chat-title {
...@@ -779,11 +810,18 @@ onUnmounted(() => { ...@@ -779,11 +810,18 @@ onUnmounted(() => {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: inherit; // 继承父元素颜色
} }
.icon-more { .icon-more {
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
color: #999;
// 选中状态下的图标颜色
.chat-item.active & {
color: #5e7ce0;
}
} }
&:hover .icon-more { &:hover .icon-more {
...@@ -963,6 +1001,28 @@ onUnmounted(() => { ...@@ -963,6 +1001,28 @@ onUnmounted(() => {
font-weight: 500; font-weight: 500;
} }
} }
.math-demo {
margin: 24px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
h3 {
color: #252b3a;
margin-bottom: 16px;
font-size: 16px;
font-weight: 600;
}
.math-demo-card {
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: 16px;
}
}
} }
} }
...@@ -1192,6 +1252,11 @@ onUnmounted(() => { ...@@ -1192,6 +1252,11 @@ onUnmounted(() => {
border: 1px solid #e3e3e3; border: 1px solid #e3e3e3;
} }
// 统一内容区域
.unified-content {
margin: 0;
}
// 顶部思考状态头 // 顶部思考状态头
.thinking-status-header { .thinking-status-header {
color: #6b7280; color: #6b7280;
...@@ -1398,6 +1463,45 @@ onUnmounted(() => { ...@@ -1398,6 +1463,45 @@ onUnmounted(() => {
text-decoration: underline; text-decoration: underline;
} }
} }
// KaTeX 数学公式样式
.katex {
font-size: 1.1em;
}
.katex-display {
margin: 16px 0;
text-align: center;
}
.math-display {
margin: 16px 0;
text-align: center;
overflow-x: auto;
}
// 思考过程样式
think {
display: block;
background: #f0f8ff;
border-left: 4px solid #5e7ce0;
padding: 12px 16px;
margin: 16px 0;
border-radius: 0 8px 8px 0;
font-style: italic;
color: #4a6cf7;
white-space: pre-wrap;
}
// 数学公式错误样式
.math-error {
color: #cc0000;
background: #ffe6e6;
padding: 4px 8px;
border-radius: 4px;
font-family: monospace;
border: 1px solid #ffcccc;
}
} }
.text-content { .text-content {
......
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