兼容渲染markdown格式的内容

public/cdn/highlight/atom-one-dark.min.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

public/index.html

@@ -8,11 +8,14 @@
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/viewerjs/1.11.6/viewer.css"/>
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.10.18/index.css">
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/jsoneditor/10.0.2/jsoneditor.min.css">
+    <link rel="stylesheet" href="<%= BASE_URL %>cdn/highlight/atom-one-dark.min.css">
     <script src="<%= BASE_URL %>cdn/jsoneditor/10.0.2/jsoneditor.min.js" charset="utf-8"></script>
     <script src="<%= BASE_URL %>cdn/viewerjs/1.11.6/viewer.min.js" charset="utf-8"></script>
     <script src="<%= BASE_URL %>cdn/avue/2.10.18/avue.min.js" charset="utf-8"></script>
     <script src="<%= BASE_URL %>cdn/echarts/echarts@5.5.0.min.js" charset="utf-8"></script>
     <script src="<%= BASE_URL %>cdn/echarts/echarts-gl@2.0.9.min.js" charset="utf-8"></script>
+    <script src="<%= BASE_URL %>cdn/markdown-it/markdown-it.min.js" charset="utf-8"></script>
+    <script src="<%= BASE_URL %>cdn/highlight/highlight.min.js" charset="utf-8"></script>
     <title>web端应用库-展示页面</title>
     <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
     <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

ui/packages/ai/components/chatContent.vue

@@ -3,7 +3,7 @@
     <div class="chat-wrapper" v-for="item in list" :key="item.id">
       <div class="chat-text" :class="{right:item.userType == '0',system:item.userType == '2'}">
         <img v-if="item.userType!=2" class="avatar" :src="avatar(item)" alt=""/>
-        <div class="content" v-text="item.content"/>
+        <div class="content" v-html="markdown(item.content)"/>
       </div>
     </div>
   </el-scrollbar>
@@ -19,6 +19,11 @@ export default {
   props: {
     list: {default: () => []}
   },
+  data() {
+    return {
+      md: null
+    }
+  },
   computed: {
     lastMessage: v => v.list.at(-1)?.content
   },
@@ -37,9 +42,24 @@ export default {
     avatar(item) {
       return item.avatar || (item.userType == '0' ? 'https://cdn.sinoecare.com/i/2024/06/17/666fdb275be82.png' :
           'https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png')
+    },
+    markdown(v) {
+      return this.md?.render(v) || v
     }
   },
   mounted() {
+    const {hljs, markdownit} = window
+    this.md = markdownit({
+      highlight: function (str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return hljs.highlight(str, {language: lang}).value;
+          } catch (__) {
+          }
+        }
+        return ''; // use external default escaping
+      }
+    })
     this.scrollBottom()
   }
 }
@@ -49,6 +69,21 @@ export default {
 .chatContent {
   :deep(.el-scrollbar__wrap) {
     overflow-x: hidden;
+
+    .content {
+      pre {
+        background-color: #282c34;
+        color: #abb2bf;
+        font-size: 12px;
+        padding: 4px;
+        line-height: 16px;
+      }
+
+      code {
+        white-space: pre-wrap;
+        width: 100%;
+      }
+    }
   }
 
   .chat-text {