feat(sidepanel): 优化 Chat 组件中的消息展示

- 引入 markdown-it 用于解析 Markdown 内容
- 添加 compiledMarkdown 计算属性以渲染 Markdown
- 修改消息内容的显示方式，支持 Markdown 格式
- 调整 Chat 组件的样式和布局

.env

@@ -2,13 +2,13 @@ VITE_OPENAI_API_KEY_TONG=sk-e9855234f47346049809ce23ed3ebe3f
 
 VITE_MAX_FILE_NUMBER=10
 
-VITE_APP_BASE_API='http://180.76.147.97:13088'
-# VITE_APP_BASE_API='http://192.168.1.166:7777'
+# VITE_APP_BASE_API='http://180.76.147.97:13088'
+VITE_APP_BASE_API='http://192.168.1.166:5555'
 
 # 接口地址 (WebSocket)
-VITE_API_WS_URL = 'ws://180.76.147.97:13088'
-# VITE_API_WS_URL = 'ws://192.168.1.166:7777'
+# VITE_API_WS_URL = 'ws://180.76.147.97:13088'
+VITE_API_WS_URL = 'ws://192.168.1.166:5555'
 # 终端ID
 # VITE_CLIENT_ID = '765be25e4e78b101b896cb3ecac39b1b'
-VITE_CLIENT_ID = '153062e567553ec0bf1a02b8f1f563b1'
+VITE_CLIENT_ID = '7a1958fafed3268a7515b083bd6f144f'
 

package.json

@@ -27,6 +27,7 @@
     "html2canvas": "^1.4.1",
     "jsencrypt": "^3.3.2",
     "lodash": "^4.17.21",
+    "markdown-it": "^14.1.0",
     "marked": "^15.0.8",
     "moment": "^2.30.1",
     "openai": "^4.85.4",
@@ -50,4 +51,4 @@
     "vue-tsc": "^2.1.10",
     "wxt": "^0.19.13"
   }
-}
+}

src/entrypoints/sidepanel/Chat.vue

@@ -1,5 +1,6 @@
 <!-- Chat.vue -->
 <template>
+  
   <div class="chat-container items-center">
     <div v-if="!messages.length && !msgLoading" class="message-list">
       <pageMask />
@@ -20,7 +21,10 @@
               <div class="content" v-if="message.role === 'system'"
                 :class="{ 'loading-content': message.content === '' }">
                 <formTable v-if="message.type === 'form'" :content="message.rawContent" />
-                <span v-else v-html="message.content"></span>
+                <div v-else>
+                  <div v-html="compiledMarkdown(message.rawContent)" class="markdown-body" style="font-size: small"></div>
+                  <!-- <link rel="stylesheet" href="/node_modules/github-markdown-css/github-markdown-dark.css"> -->
+                </div>
                 <span class="loading-indicator" v-if="sendLoading && index === messages.length - 1">
                   <span class="dot"></span>
                   <span class="dot"></span>
@@ -61,8 +65,6 @@
         <div v-show="isShowPage" style="border-bottom: 1px solid #F0F0F0;">
           <div class="card_list">
             <template v-for="(v, i) in pageInfoList" :key="i">
-
-
               <div class="card_image " v-if="v.type === 'image'">
                 <el-image v-loading="v.isUpload" class="w-full h-full p-0.5 object-cover" :src="v.url" :zoom-rate="1.2"
                   :max-scale="7" :min-scale="0.2" :preview-src-list="[v.url]" :initial-index="4" fit="cover" />
@@ -156,6 +158,9 @@ import { useUserStore } from '@/store/modules/user'
 import { putChat, uploadFile } from "@/api/index.js";
 import { askQues, getFormKey } from '@/api/modal.js'
 import { debounce } from 'lodash'
+import {renderMarkdown} from './utils/markdown.js'
+import "github-markdown-css"
+// import "/node_modules/github-markdown-css/github-markdown-dark.css"
 const userStore = useUserStore()
 // 在其他状态变量附近添加
 const isLoadingMore = ref(false)
@@ -187,6 +192,12 @@ const {
 const inputMessage = ref('')
 const pageInfo = ref('')
 const summaryHtml = ref(false)
+
+const compiledMarkdown = computed(() => {
+  return (val)=>{
+    return renderMarkdown(val)
+  }
+})
 function handleStopAsk() {
     inputMessage.value = ''
     pageInfoList.value = []
@@ -536,7 +547,7 @@ async function createWS(msg) {
           isShowPage.value = false
         } else {
           obj.rawContent += event.data;
-          obj.content = obj.type === 'form' ? obj.rawContent : formatMessage(obj.rawContent);
+          obj.content = obj.type === 'form' ? obj.rawContent : obj.rawContent;  //formatMessage(obj.rawContent)
           // 滚动到底部
           nextTick(() => {
             if (scrollbar.value && scrollbar.value.wrapRef) {

src/entrypoints/sidepanel/utils/markdown.js

@@ -0,0 +1,27 @@
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js/lib/core';
+// import javascript from 'highlight.js/lib/languages/javascript';
+// import 'highlight.js/styles/github-dark.css';
+// import 'highlight.js/styles/github.css';       // 浅色
+import 'highlight.js/styles/atom-one-dark.css'; // 深色
+
+
+// hljs.registerLanguage('javascript', javascript);
+
+
+const md = new MarkdownIt({
+  html: true,         // 允许 HTML 标签
+  linkify: true,      // 自动转换链接
+  typographer: true,  // 优化排版
+  highlight: (code, language) => {
+    if (language && hljs.getLanguage(language)) {
+      try {
+        return hljs.highlight(code, { language }).value;
+      } catch (__) { }
+    }
+    return hljs.highlightAuto(code).value; // 自动检测语言
+  },
+});
+
+
+export const renderMarkdown = (content) => md.render(content);

wxt.config.ts

@@ -15,6 +15,9 @@ export default defineConfig({
       ]
     }
   },
+  runner: {
+    chromiumArgs: ["--disable-features=DisableLoadExtensionCommandLineSwitch"],
+  },
   extensionApi: 'chrome',
   srcDir: 'src',
   manifest: {