Commit c560ab0d by User

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

parent 8f347ca8
<!doctype html>
<html lang="zh-cmn-Hans">
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta name="buildTime" content="2025-06-08 19:06:22">
<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-7l3HYvBE.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-CKpMNMck.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
<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-BV5IaHCk.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-BFEuYhFr.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
......@@ -64,7 +64,10 @@
"dayjs": "1.11.12",
"echarts": "5.5.1",
"font-awesome": "4.7.0",
"highlight.js": "^11.11.1",
"katex": "^0.16.22",
"markdown-it": "^14.1.0",
"markdown-it-katex": "^2.0.3",
"naive-ui": "2.39.0",
"nprogress": "0.2.0",
"pinia": "2.2.0",
......
......@@ -59,9 +59,18 @@ importers:
font-awesome:
specifier: 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:
specifier: ^14.1.0
version: 14.1.0
markdown-it-katex:
specifier: ^2.0.3
version: 2.0.3
naive-ui:
specifier: 2.39.0
version: 2.39.0(vue@3.4.35(typescript@5.5.4))
......@@ -2134,6 +2143,10 @@ packages:
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
engines: {node: '>= 10'}
commander@8.3.0:
resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
engines: {node: '>= 12'}
comment-parser@1.4.1:
resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
engines: {node: '>= 12.0.0'}
......@@ -3394,10 +3407,6 @@ packages:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
hasBin: true
highlight.js@11.10.0:
resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
engines: {node: '>=12.0.0'}
highlight.js@11.11.1:
resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
engines: {node: '>=12.0.0'}
......@@ -3796,6 +3805,14 @@ packages:
resolution: {integrity: sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg==}
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:
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
......@@ -3959,6 +3976,9 @@ packages:
markdown-it-emoji@3.0.0:
resolution: {integrity: sha512-+rUD93bXHubA4arpEZO3q80so0qgoFJEKRkRbjKX8RTdca89v2kfyF+xR3i2sQTwql9tpPZPOQN5B+PunspXRg==}
markdown-it-katex@2.0.3:
resolution: {integrity: sha512-nUkkMtRWeg7OpdflamflE/Ho/pWl64Lk9wNBKOmaj33XkQdumhXAIYhI0WO03GeiycPCsxbmX536V5NEXpC3Ng==}
markdown-it-plantuml@1.4.1:
resolution: {integrity: sha512-13KgnZaGYTHBp4iUmGofzZSBz+Zj6cyqfR0SXUIc9wgWTto5Xhn7NjaXYxY0z7uBeTUMlc9LMQq5uP4OM5xCHg==}
......@@ -3970,6 +3990,9 @@ packages:
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
hasBin: true
match-at@0.1.1:
resolution: {integrity: sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==}
mdast-util-from-markdown@2.0.1:
resolution: {integrity: sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==}
......@@ -7670,6 +7693,8 @@ snapshots:
commander@7.2.0: {}
commander@8.3.0: {}
comment-parser@1.4.1: {}
compatx@0.1.8:
......@@ -9053,8 +9078,6 @@ snapshots:
he@1.2.0: {}
highlight.js@11.10.0: {}
highlight.js@11.11.1: {}
highlight.js@11.9.0:
......@@ -9382,6 +9405,14 @@ snapshots:
dependencies:
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:
dependencies:
json-buffer: 3.0.1
......@@ -9551,6 +9582,10 @@ snapshots:
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@12.2.0:
......@@ -9570,6 +9605,8 @@ snapshots:
punycode.js: 2.3.1
uc.micro: 2.1.0
match-at@0.1.1: {}
mdast-util-from-markdown@2.0.1:
dependencies:
'@types/mdast': 4.0.4
......@@ -9883,7 +9920,7 @@ snapshots:
date-fns: 2.30.0
date-fns-tz: 2.0.1(date-fns@2.30.0)
evtd: 0.2.4
highlight.js: 11.10.0
highlight.js: 11.11.1
lodash: 4.17.21
lodash-es: 4.17.21
seemly: 0.3.8
......@@ -11176,7 +11213,7 @@ snapshots:
diff2html: 3.4.51
echarts: 5.3.3
fs-extra: 10.1.0
highlight.js: 11.10.0
highlight.js: 11.11.1
katex: 0.12.0
lodash: 4.17.21
lodash-es: 4.17.21
......
......@@ -155,19 +155,20 @@ const local: App.I18n.Schema = {
500: 'Server Error',
'iframe-page': 'Iframe',
home: 'Home',
exception: '异常页',
chat: 'Chat',
exception: 'Exception',
exception_403: '403',
exception_404: '404',
exception_500: '500',
document: '文档',
document_project: '项目文档',
'document_project-link': '项目文档(外链)',
document_vue: 'Vue文档',
document_localhost:'本地测试',
document_vite: 'Vite文档',
document_unocss: 'UnoCSS文档',
document_naive: 'Naive UI文档',
document_antd: 'Ant Design Vue文档'
document: 'Document',
document_project: 'Project Document',
'document_project-link': 'Project Document (Link)',
document_vue: 'Vue Document',
document_localhost: 'Local Test',
document_vite: 'Vite Document',
document_unocss: 'UnoCSS Document',
document_naive: 'Naive UI Document',
document_antd: 'Ant Design Vue Document'
},
page: {
login: {
......
......@@ -155,6 +155,7 @@ const local: App.I18n.Schema = {
500: '服务器错误',
'iframe-page': '外链页面',
home: '首页',
chat: 'AI助手',
exception: '异常页',
exception_403: '403',
exception_404: '404',
......
......@@ -8,6 +8,8 @@ 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';
......
......@@ -20,10 +20,6 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
500: () => import("@/views/_builtin/500/index.vue"),
"iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
login: () => import("@/views/_builtin/login/index.vue"),
test: () => import("@/views/_builtin/test/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"),
chat: () => import("@/views/chat/index.vue"),
home: () => import("@/views/home/index.vue"),
};
......@@ -41,22 +41,13 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: 'chat',
path: '/chat',
component: 'layout.base',
component: 'layout.base$view.chat',
meta: {
title: 'chat',
i18nKey: 'route.chat'
},
children: [
{
name: 'chat_deepseek',
path: '/chat/deepseek',
component: 'view.chat_deepseek',
meta: {
title: 'chat_deepseek',
i18nKey: 'route.chat_deepseek'
}
}
]
i18nKey: 'route.chat',
icon: 'mdi:chat',
order: 1
}
},
{
name: 'home',
......@@ -93,43 +84,5 @@ export const generatedRoutes: GeneratedRoute[] = [
constant: 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'
}
}
]
}
];
......@@ -180,14 +180,9 @@ const routeMap: RouteMap = {
"404": "/404",
"500": "/500",
"chat": "/chat",
"chat_deepseek": "/chat/deepseek",
"home": "/home",
"iframe-page": "/iframe-page/:url",
"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"
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?"
};
/**
......
......@@ -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的示例
// {
// name: 'document',
......
......@@ -4,6 +4,13 @@ interface DeepSeekConfig {
model: string;
}
interface ModelOption {
id: string;
name: string;
description: string;
config: DeepSeekConfig;
}
interface DeepSeekMessage {
role: 'system' | 'user' | 'assistant';
content: string;
......@@ -39,21 +46,62 @@ interface DeepSeekResponse {
class DeepSeekService {
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() {
this.config = {
apiKey: '', // 用户需要填入自己的 API Key
baseURL: 'https://api.deepseek.com',
model: 'deepseek-chat'
};
// 默认使用第一个模型
this.config = { ...this.modelOptions[0].config };
}
// 获取可用模型列表
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) {
this.config.apiKey = apiKey;
}
// 设置模型
// 设置模型 (保留兼容性)
setModel(model: string) {
this.config.model = model;
}
......@@ -61,7 +109,7 @@ class DeepSeekService {
// 检查配置是否完整
private validateConfig(): boolean {
if (!this.config.apiKey) {
console.error('DeepSeek API Key 未设置');
console.error('API Key 未设置');
return false;
}
return true;
......@@ -77,7 +125,7 @@ class DeepSeekService {
}
): Promise<DeepSeekResponse> {
if (!this.validateConfig()) {
throw new Error('DeepSeek 配置不完整');
throw new Error('API 配置不完整');
}
const requestBody: DeepSeekRequest = {
......@@ -100,15 +148,13 @@ class DeepSeekService {
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
`DeepSeek API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`
);
throw new Error(`API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('DeepSeek API 调用错误:', error);
console.error('API 调用错误:', error);
throw error;
}
}
......@@ -125,7 +171,7 @@ class DeepSeekService {
}
): Promise<void> {
if (!this.validateConfig()) {
onError(new Error('DeepSeek 配置不完整'));
onError(new Error('API 配置不完整'));
return;
}
......@@ -149,9 +195,7 @@ class DeepSeekService {
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
`DeepSeek API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`
);
throw new Error(`API 请求失败: ${response.status} ${response.statusText} - ${errorData.error?.message || ''}`);
}
const reader = response.body?.getReader();
......@@ -194,7 +238,7 @@ class DeepSeekService {
}
}
} catch (error) {
console.error('DeepSeek 流式请求错误:', error);
console.error('流式请求错误:', error);
onError(error as Error);
}
}
......@@ -227,4 +271,4 @@ class DeepSeekService {
export const deepSeekService = new DeepSeekService();
// 导出类型
export type { DeepSeekMessage, DeepSeekResponse };
export type { DeepSeekMessage, DeepSeekResponse, ModelOption };
......@@ -78,7 +78,6 @@ export function getTabByRoute(route: App.Global.TabRoute) {
fixedIndex: fixedIndexInTab,
icon,
localIcon,
icons: icons as string,
i18nKey
};
......
......@@ -34,14 +34,9 @@ declare module "@elegant-router/types" {
"404": "/404";
"500": "/500";
"chat": "/chat";
"chat_deepseek": "/chat/deepseek";
"home": "/home";
"iframe-page": "/iframe-page/:url";
"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" {
| "home"
| "iframe-page"
| "login"
| "test"
>;
/**
......@@ -117,11 +111,7 @@ declare module "@elegant-router/types" {
| "500"
| "iframe-page"
| "login"
| "test"
| "test_test1"
| "test_test2"
| "test_test3"
| "chat_deepseek"
| "chat"
| "home"
>;
......
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;
};
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);
};
<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>
<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>
<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>
<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>
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