From fb403bde8bd10f3992e2be53eadfd645314b4545 Mon Sep 17 00:00:00 2001
From: lqins <lqins168@gmail.com>
Date: Sun, 22 Dec 2024 13:55:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=9C=E8=89=B2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ChatReply.vue | 76 ++++++++++++++++++++++++--------
 1 file changed, 58 insertions(+), 18 deletions(-)

diff --git a/web/src/components/ChatReply.vue b/web/src/components/ChatReply.vue
index d0940101..05c3dd04 100644
--- a/web/src/components/ChatReply.vue
+++ b/web/src/components/ChatReply.vue
@@ -6,14 +6,23 @@
       </div>
 
       <div class="chat-item">
-        <div class="content" v-html="md.render(processContent(data.content))"></div>
+        <div
+          class="content"
+          v-html="md.render(processContent(data.content))"
+        ></div>
         <div class="bar" v-if="data.created_at">
           <span class="bar-item"
-            ><el-icon><Clock /></el-icon> {{ dateFormat(data.created_at) }}</span
+            ><el-icon><Clock /></el-icon>
+            {{ dateFormat(data.created_at) }}</span
           >
           <span class="bar-item">tokens: {{ data.tokens }}</span>
           <span class="bar-item">
-            <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制回答"
+              placement="bottom"
+            >
               <el-icon class="copy-reply" :data-clipboard-text="data.content">
                 <DocumentCopy />
               </el-icon>
@@ -21,13 +30,23 @@
           </span>
           <span v-if="!readOnly">
             <span class="bar-item" @click="reGenerate(data.prompt)">
-              <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="重新生成"
+                placement="bottom"
+              >
                 <el-icon><Refresh /></el-icon>
               </el-tooltip>
             </span>
 
             <span class="bar-item" @click="synthesis(data.content)">
-              <el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="生成语音朗读"
+                placement="bottom"
+              >
                 <i class="iconfont icon-speaker"></i>
               </el-tooltip>
             </span>
@@ -56,15 +75,24 @@
       </div>
       <div class="chat-item">
         <div class="content-wrapper">
-          <div class="content" v-html="md.render(processContent(data.content))"></div>
+          <div
+            class="content"
+            v-html="md.render(processContent(data.content))"
+          ></div>
         </div>
         <div class="bar" v-if="data.created_at">
           <span class="bar-item"
-            ><el-icon><Clock /></el-icon> {{ dateFormat(data.created_at) }}</span
+            ><el-icon><Clock /></el-icon>
+            {{ dateFormat(data.created_at) }}</span
           >
           <!--          <span class="bar-item">tokens: {{ data.tokens }}</span>-->
           <span class="bar-item bg">
-            <el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="复制回答"
+              placement="bottom"
+            >
               <el-icon class="copy-reply" :data-clipboard-text="data.content">
                 <DocumentCopy />
               </el-icon>
@@ -72,13 +100,23 @@
           </span>
           <span v-if="!readOnly">
             <span class="bar-item bg" @click="reGenerate(data.prompt)">
-              <el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="重新生成"
+                placement="bottom"
+              >
                 <el-icon><Refresh /></el-icon>
               </el-tooltip>
             </span>
 
             <span class="bar-item bg" @click="synthesis(data.content)">
-              <el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="生成语音朗读"
+                placement="bottom"
+              >
                 <i class="iconfont icon-speaker"></i>
               </el-tooltip>
             </span>
@@ -102,17 +140,17 @@ const props = defineProps({
       icon: "",
       content: "",
       created_at: "",
-      tokens: 0,
-    },
+      tokens: 0
+    }
   },
   readOnly: {
     type: Boolean,
-    default: false,
+    default: false
   },
   listStyle: {
     type: String,
-    default: "list",
-  },
+    default: "list"
+  }
 });
 
 const mathjaxPlugin = require("markdown-it-mathjax3");
@@ -122,7 +160,8 @@ const md = require("markdown-it")({
   linkify: true,
   typographer: true,
   highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
+    const codeIndex =
+      parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
     // 显示复制代码按钮
     const copyBtn = `<span class="copy-code-btn" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
 <textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
@@ -141,7 +180,7 @@ const md = require("markdown-it")({
     const preCode = md.utils.escapeHtml(str);
     // 将代码包裹在 pre 中
     return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
-  },
+  }
 });
 md.use(mathjaxPlugin);
 
@@ -216,7 +255,8 @@ const reGenerate = (prompt) => {
             line-height 1.5
 
             code {
-              color:var(--theme-text-color-primary);
+              // color:var(--theme-text-color-primary);
+              color:#fff
               background-color var(--el-color-primary-light-3)
               padding 3px 5px;
               border-radius 5px;