Merge pull request #136 from zhaoshibao/feat-124

feat：使用md-editor-v3 MarkDown编辑器来渲染MarkDown数据，支持数学公式渲染。（关联 Issue #124）

web/package.json

@@ -26,6 +26,7 @@
     "less": "^4.1.3",
     "marked": "^13.0.2",
     "marked-highlight": "^2.1.4",
+    "md-editor-v3": "^4.16.7",
     "pinia": "^2.0.32",
     "vue": "^3.5.13",
     "vue-router": "^4.1.6"

web/src/components/MessageComponent.vue

@@ -42,8 +42,8 @@
       </div>
 
       <!-- 消息内容 -->
-      <div v-else-if="message.content" v-html="renderMarkdown(message)" class="message-md"></div>
+      <!--<div v-else-if="message.content" v-html="renderMarkdown(message)" class="message-md"></div>-->
-
+      <MdPreview v-else-if="message.content" ref="editorRef" editorId="preview-only" :modelValue="message.content" :key="index" class="maxkb-md"/>
       <div v-if="message.isStoppedByUser" class="retry-hint">
         你停止生成了本次回答
         <span class="retry-link" @click="emit('retryStoppedMessage', message.id)">重新编辑问题</span>
@@ -73,6 +73,28 @@ import { markedHighlight } from 'marked-highlight';
 import hljs from 'highlight.js';
 import 'highlight.js/styles/github.css';
 
+import { MdPreview, config } from 'md-editor-v3'
+config({
+  markdownItConfig(md) {
+    md.renderer.rules.image = (tokens, idx, options, env, self) => {
+      tokens[idx].attrSet('style', 'display:inline-block;min-height:33px;padding:0;margin:0')
+      if (tokens[idx].content) {
+        tokens[idx].attrSet('title', tokens[idx].content)
+      }
+      tokens[idx].attrSet(
+        'onerror',
+        'this.src="/ui/assets/load_error.png";this.onerror=null;this.height="33px"'
+      )
+      return md.renderer.renderToken(tokens, idx, options)
+    }
+    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+      tokens[idx].attrSet('target', '_blank')
+      return md.renderer.renderToken(tokens, idx, options)
+    }
+    document.appendChild
+  }
+})
+
 
 const props = defineProps({
   // 消息角色：'user'|'assistant'|'sent'|'received'
@@ -101,6 +123,7 @@ const props = defineProps({
   },
 });
 
+const editorRef = ref()
 const statusDefination = {
   init: '初始化',
   loading: '加载中',