From 10beee84fb94f739e9497b5569714654e6d44857 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Mon, 13 May 2024 18:26:28 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E5=A2=9E=E5=8A=A0=20marked=20=E6=B8=B2=E6=9F=93=20mar?=
 =?UTF-8?q?kdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                |  1 +
 src/views/ai/chat/index.vue | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 21a57724..c8dab2b8 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "highlight.js": "^11.9.0",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
+    "marked": "^12.0.2",
     "min-dash": "^4.1.1",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue
index 6b43e706..2e5cead6 100644
--- a/src/views/ai/chat/index.vue
+++ b/src/views/ai/chat/index.vue
@@ -98,9 +98,7 @@
                   <el-text class="time">{{formatDate(item.createTime)}}</el-text>
                 </div>
                 <div class="left-text-container">
-                  <el-text class="left-text">
-                    {{item.content}}
-                  </el-text>
+                  <div class="left-text" v-html="item.content"></div>
                 </div>
                 <div class="left-btns">
                   <div class="btn-cus" @click="noCopy(item.content)">
@@ -126,9 +124,7 @@
                   <el-text class="time">{{formatDate(item.createTime)}}</el-text>
                 </div>
                 <div class="right-text-container">
-                  <el-text class="right-text">
-                    {{item.content}}
-                  </el-text>
+                  <div class="right-text" v-html="item.content"></div>
                 </div>
                 <div class="right-btns">
                   <div class="btn-cus"  @click="noCopy(item.content)">
@@ -165,9 +161,12 @@
 </template>
 
 <script setup lang="ts">
-import {ChatMessageApi, ChatMessageSendVO, ChatMessageVO} from "@/api/ai/chat/message";
-import {formatDate} from "@/utils/formatTime";
+import 'highlight.js/styles/idea.css'
+import {ChatMessageApi, ChatMessageSendVO, ChatMessageVO} from "@/api/ai/chat/message"
+import {formatDate} from "@/utils/formatTime"
 import {useClipboard} from '@vueuse/core'
+import { marked } from 'marked'
+
 
 // 初始化 copy 到粘贴板
 const { copy } = useClipboard();
@@ -257,6 +256,8 @@ const doSendStream = async (userMessage: ChatMessageVO) => {
       } else {
         const lastMessage = list.value[list.value.length - 1];
         lastMessage.content = lastMessage.content + data.content
+        // markdown
+        lastMessage.content = marked(lastMessage.content)
         list.value[list.value - 1] = lastMessage
       }
       // 滚动到最下面
@@ -285,7 +286,15 @@ const messageList = async () => {
   try {
     // 获取列表数据
     const res = await ChatMessageApi.messageList(conversationId.value)
+
+    // 处理 markdown
+    // marked(this.markdownText)
+    res.map(item => {
+      item.content = marked(item.content)
+    })
+
     list.value = res;
+
     // 滚动到最下面
     scrollToBottom();
   } finally {
@@ -558,6 +567,7 @@ onMounted(async () => {
 
       .left-text {
         color: #393939;
+        //font-size: 14px;
       }
     }