feat: 将对话消息使用markdown 渲染

src/renderer/views/home/ChatBox.vue

@@ -18,10 +18,11 @@
             <span class="text-xs text-[#86909C]"> 20:30</span>
           </div>
 
-          <div class="text-sm text-gray-700"
-            :class="msg.messageRole === MessageRole.ME ? 'bg-[#f7f9fc] rounded-md px-2 py-2' : ''">
-            {{ msg.messageContent }}
-          </div>
+          <!-- AI 发的消息 -->
+          <ChatRoleAI v-if="msg.messageRole === MessageRole.AI" :msg="msg" />
+
+          <!-- 自己 发的消息 -->
+          <ChatRoleMe v-if="msg.messageRole === MessageRole.ME" :msg="msg" />
 
           <!-- AI 标识 -->
           <div v-if="msg.messageRole === MessageRole.AI && msg.finished" class="mt-2 text-xs text-gray-400 ">
@@ -29,7 +30,7 @@
           </div>
 
           <!-- AI 操作按钮 -->
-          <ChatOperation v-if="msg.messageRole === MessageRole.AI && msg.finished" :msg="msg" /> 
+          <ChatOperation v-if="msg.messageRole === MessageRole.AI && msg.finished" :msg="msg" />
         </div>
 
         <!-- User avatar -->
@@ -69,19 +70,22 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { RiLink, RiSendPlaneFill, RiStopFill, RiFileCopyLine, RiShareForwardLine, RiDownload2Line, RiThumbUpLine, RiThumbDownLine } from '@remixicon/vue'
+import { RiLink, RiSendPlaneFill, RiStopFill } from '@remixicon/vue'
 import { onMounted, nextTick, onUnmounted } from "vue";
 import { WebSocketManager } from "@common/WebSocketManager";
 import { MessageRole, ChatMessage } from "./model/ChatModel";
 import { IdUtils } from "@common/index";
 import ChatAvatar from './components/ChatAvatar.vue';
 import ChatOperation from './components/ChatOperation.vue';
+import ChatRoleAI from './components/ChatRoleAI.vue';
+import ChatRoleMe from './components/ChatRoleMe.vue';
 
 import { Session } from '../../utils/storage';
 
 import userAvatar from '@assets/images/login/user_icon.png';
 import aiAvatar from '@assets/images/login/blue_logo.png';
 
+
 ///（控制滚动位置）
 const scrollTop = ref(99999);
 

src/renderer/views/home/components/ChatRoleAI.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="text-sm text-gray-700" v-html="compiledMarkdown">
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ChatMessage } from '../model/ChatModel';
+import { computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github.css'
+
+interface Props {
+  msg: ChatMessage
+}
+
+const { msg } = defineProps<Props>()
+const md = new MarkdownIt({
+  highlight: function (str: string, lang: string) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+      } catch (__) { }
+    }
+    // 自动检测
+    return hljs.highlightAuto(str).value;
+  }
+});
+const compiledMarkdown = computed(() => md.render(msg.messageContent))
+
+</script>

src/renderer/views/home/components/ChatRoleMe.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="text-sm text-gray-700 bg-[#f7f9fc] rounded-md px-2 py-2">
+    {{ msg.messageContent }}
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ChatMessage } from '../model/ChatModel';
+
+interface Props {
+  msg: ChatMessage
+}
+
+const { msg } = defineProps<Props>()
+
+</script>