From db4ca635eea3e5e050153e06ca4906199c001eb5 Mon Sep 17 00:00:00 2001
From: zhaoshibao <501348474@qq.com>
Date: Sun, 6 Apr 2025 00:09:40 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BD=BF=E7=94=A8md-editor-v3Mark?=
 =?UTF-8?q?Down=E7=BC=96=E8=BE=91=E5=99=A8=E6=9D=A5=E6=B8=B2=E6=9F=93MarkD?=
 =?UTF-8?q?own=E6=95=B0=E6=8D=AE=EF=BC=8C=E6=94=AF=E6=8C=81=E6=95=B0?=
 =?UTF-8?q?=E5=AD=A6=E5=85=AC=E5=BC=8F=E6=B8=B2=E6=9F=93=E3=80=82=EF=BC=88?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=20Issue=20#124=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json                        |  1 +
 web/src/components/MessageComponent.vue | 27 +++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/web/package.json b/web/package.json
index 81f50e75..2a496842 100644
--- a/web/package.json
+++ b/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"
diff --git a/web/src/components/MessageComponent.vue b/web/src/components/MessageComponent.vue
index 53acf069..54b268a5 100644
--- a/web/src/components/MessageComponent.vue
+++ b/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 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: '加载中',