feat: 处理对话框文本样式

ui/env.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="vite/client" />
+
+declare module 'markdown-it-task-lists'
+declare module 'markdown-it-abbr'
+declare module 'markdown-it-anchor'
+declare module 'markdown-it-footnote'
+declare module 'markdown-it-sub'
+declare module 'markdown-it-sup'
+declare module 'markdown-it-toc-done-right'
 interface ImportMeta {
   readonly env: ImportMetaEnv
-}
+}

ui/package.json

@@ -17,6 +17,15 @@
     "element-plus": "^2.3.14",
     "install": "^0.13.0",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.2",
+    "markdown-it-abbr": "^1.0.4",
+    "markdown-it-anchor": "^8.6.7",
+    "markdown-it-footnote": "^3.0.3",
+    "markdown-it-highlightjs": "^4.0.1",
+    "markdown-it-sub": "^1.0.0",
+    "markdown-it-sup": "^1.0.0",
+    "markdown-it-task-lists": "^2.1.1",
+    "markdown-it-toc-done-right": "^4.2.0",
     "mitt": "^3.0.0",
     "npm": "^10.2.4",
     "nprogress": "^0.2.0",
@@ -29,6 +38,8 @@
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^18.2.0",
     "@types/jsdom": "^21.1.1",
+    "@types/markdown-it": "^13.0.7",
+    "@types/markdown-it-highlightjs": "^3.3.4",
     "@types/node": "^18.17.5",
     "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^4.3.1",

ui/src/components/ai-dialog/index.vue

@@ -55,10 +55,12 @@
               </AppAvatar>
             </div>
             <div class="content">
-              <div class="flex" v-if="!item.answer_text">
+              <div class="flex" v-if="!item.answer_text || item.problem_text.length === 0">
                 <el-card shadow="always" class="dialog-card"> {{ '回答中...' }} </el-card>
               </div>
-              <el-card v-else shadow="always" class="dialog-card"> {{ item.answer_text }} </el-card>
+              <el-card v-else shadow="always" class="dialog-card">
+                <MarkdownRenderer :source="item.answer_text"></MarkdownRenderer>
+              </el-card>
             </div>
           </div>
         </template>
@@ -102,6 +104,7 @@ import { ref, nextTick, onUpdated } from 'vue'
 import applicationApi from '@/api/application'
 import { ChatManage, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
+import MarkdownRenderer from '@/components/markdown-renderer/index.vue'
 const props = defineProps({
   data: {
     type: Object,

ui/src/components/markdown-renderer/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-html="markdownIt.render(source)" />
+</template>
+
+<script setup lang="ts">
+import MarkdownIt from 'markdown-it'
+import MarkdownItAbbr from 'markdown-it-abbr'
+import MarkdownItAnchor from 'markdown-it-anchor'
+import MarkdownItFootnote from 'markdown-it-footnote'
+import MarkdownItHighlightjs from 'markdown-it-highlightjs'
+import MarkdownItTasklists from 'markdown-it-task-lists'
+import MarkdownItSub from 'markdown-it-sub'
+import MarkdownItSup from 'markdown-it-sup'
+import MarkdownItTOC from 'markdown-it-toc-done-right'
+const markdownIt = MarkdownIt({
+  html: true, // 允许HTML语法
+  typographer: true, // 启用Typographer插件，可以更好地处理中文字符和标点符号
+  linkify: true // 自动将文本中的URL转换为链接
+})
+
+markdownIt
+  .use(MarkdownItHighlightjs)
+  .use(MarkdownItTasklists)
+  .use(MarkdownItAbbr)
+  .use(MarkdownItAnchor)
+  .use(MarkdownItFootnote)
+  .use(MarkdownItSub)
+  .use(MarkdownItSup)
+  .use(MarkdownItTOC)
+
+defineProps({
+  source: {
+    type: String,
+    default: ''
+  }
+})
+</script>