From 9cbed254bb52da3425cb98ab9f1aeabc91076833 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Mon, 2 Mar 2026 21:01:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0Markdown=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91=E5=B9=B6=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=86=97=E4=BD=99=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/base.dark.css              |  2 +-
 web/src/assets/css/main.css                   |  1 +
 web/src/assets/css/markdown-preview.less      | 59 +++++++++++++++++++
 web/src/components/AgentPanel.vue             | 10 +---
 web/src/components/FileDetailModal.vue        | 51 +---------------
 .../ToolCallingResult/tools/TaskTool.vue      |  2 +-
 .../components/sources/KbChunkDetailModal.vue |  6 +-
 .../sources/KbResultGroupedList.vue           |  3 +-
 8 files changed, 67 insertions(+), 67 deletions(-)
 create mode 100644 web/src/assets/css/markdown-preview.less

diff --git a/web/src/assets/css/base.dark.css b/web/src/assets/css/base.dark.css
index bbd6ed25..825c69b6 100644
--- a/web/src/assets/css/base.dark.css
+++ b/web/src/assets/css/base.dark.css
@@ -131,5 +131,5 @@
 }
 
 :root.dark .md-editor {
-  --md-bk-color: var(--gray-0);
+  --md-bk-color: transparent;
 }
diff --git a/web/src/assets/css/main.css b/web/src/assets/css/main.css
index 527baf6f..3b444c8a 100644
--- a/web/src/assets/css/main.css
+++ b/web/src/assets/css/main.css
@@ -3,6 +3,7 @@
 @import './sigma.css';
 @import './shorts.css';
 @import './dashboard.css';
+@import './markdown-preview.less';
 
 :root {
   --header-height: 45px;
diff --git a/web/src/assets/css/markdown-preview.less b/web/src/assets/css/markdown-preview.less
new file mode 100644
index 00000000..9708fbd2
--- /dev/null
+++ b/web/src/assets/css/markdown-preview.less
@@ -0,0 +1,59 @@
+// MdPreview 统一样式覆盖 - 扁平化风格
+
+.flat-md-preview {
+  .md-editor {
+    background: transparent;
+  }
+  .md-editor-preview-wrapper {
+    padding: 0;
+  }
+
+  .md-editor-preview {
+    font-size: 14px;
+    line-height: 1.75;
+    color: var(--gray-1000);
+
+    h1 {
+      font-size: 1.2rem;
+      margin: 16px 0 12px;
+      font-weight: 600;
+    }
+
+    h2 {
+      font-size: 1.15rem;
+      margin: 16px 0 12px;
+      font-weight: 600;
+    }
+
+    h3 {
+      font-size: 1.1rem;
+      margin: 14px 0 10px;
+      font-weight: 600;
+    }
+
+    h4 {
+      font-size: 1rem;
+      margin: 14px 0 10px;
+      font-weight: 600;
+    }
+
+    h5 {
+      font-size: 1rem;
+      margin: 12px 0 8px;
+      font-weight: 600;
+    }
+
+    h6 {
+      font-size: 1rem;
+      margin: 12px 0 8px;
+      font-weight: 600;
+    }
+  }
+}
+
+// 背景透明场景
+.flat-md-preview--transparent {
+  .md-editor {
+    background: transparent;
+  }
+}
diff --git a/web/src/components/AgentPanel.vue b/web/src/components/AgentPanel.vue
index 7d1385b7..476b28b4 100644
--- a/web/src/components/AgentPanel.vue
+++ b/web/src/components/AgentPanel.vue
@@ -114,7 +114,7 @@
           </div>
         </div>
       </template>
-      <div class="file-content">
+      <div class="file-content flat-md-preview">
         <template v-if="isMarkdown">
           <MdPreview
             :modelValue="formatContent(currentFile?.content)"
@@ -823,14 +823,6 @@ const stopResize = () => {
     color: var(--gray-1000);
     background: transparent;
   }
-
-  :deep(.md-editor-preview-wrapper) {
-    padding: 0;
-  }
-
-  :deep(.md-editor-preview) {
-    font-size: 14px;
-  }
 }
 
 .modal-header-title {
diff --git a/web/src/components/FileDetailModal.vue b/web/src/components/FileDetailModal.vue
index d2da897b..237b2a27 100644
--- a/web/src/components/FileDetailModal.vue
+++ b/web/src/components/FileDetailModal.vue
@@ -65,7 +65,7 @@
     </div>
     <div v-else-if="file && hasContent" class="file-detail-content">
       <!-- Markdown 模式 -->
-      <div v-if="viewMode === 'markdown'" class="content-panel">
+      <div v-if="viewMode === 'markdown'" class="content-panel flat-md-preview">
         <MdPreview
           v-if="mergedContent"
           :modelValue="mergedContent"
@@ -315,7 +315,6 @@ const handleDownloadMarkdown = () => {
   flex: 1;
   overflow-y: auto;
   padding: 16px 0;
-  background: var(--gray-0);
   min-height: 0;
 }
 
@@ -492,52 +491,4 @@ const handleDownloadMarkdown = () => {
     margin-right: 8px;
   }
 }
-/* MdPreview 覆盖样式 - 非 scoped */
-.content-panel {
-  .md-editor-preview-wrapper {
-    padding: 0;
-  }
-
-  .md-editor-preview {
-    font-size: 14px;
-    line-height: 1.75;
-    color: var(--gray-1000);
-
-    h1 {
-      font-size: 1.2rem;
-      margin: 16px 0 12px;
-      font-weight: 600;
-    }
-
-    h2 {
-      font-size: 1.2rem;
-      margin: 16px 0 12px;
-      font-weight: 600;
-    }
-
-    h3 {
-      font-size: 1.1rem;
-      margin: 14px 0 10px;
-      font-weight: 600;
-    }
-
-    h4 {
-      font-size: 1rem;
-      margin: 14px 0 10px;
-      font-weight: 600;
-    }
-
-    h5 {
-      font-size: 1rem;
-      margin: 12px 0 8px;
-      font-weight: 600;
-    }
-
-    h6 {
-      font-size: 1rem;
-      margin: 12px 0 8px;
-      font-weight: 600;
-    }
-  }
-}
 </style>
diff --git a/web/src/components/ToolCallingResult/tools/TaskTool.vue b/web/src/components/ToolCallingResult/tools/TaskTool.vue
index 26e80b10..41405cc7 100644
--- a/web/src/components/ToolCallingResult/tools/TaskTool.vue
+++ b/web/src/components/ToolCallingResult/tools/TaskTool.vue
@@ -18,7 +18,7 @@
           :modelValue="String(resultContent)"
           :theme="theme"
           previewTheme="github"
-          class="md-preview-wrapper"
+          class="md-preview-wrapper flat-md-preview"
         />
       </div>
     </template>
diff --git a/web/src/components/sources/KbChunkDetailModal.vue b/web/src/components/sources/KbChunkDetailModal.vue
index 235131c3..d1626618 100644
--- a/web/src/components/sources/KbChunkDetailModal.vue
+++ b/web/src/components/sources/KbChunkDetailModal.vue
@@ -20,7 +20,7 @@
       :modelValue="chunk.content"
       :theme="theme"
       previewTheme="github"
-      class="chunk-markdown-content"
+      class="chunk-markdown-content flat-md-preview"
     />
     <div v-else class="empty-text">暂无内容</div>
   </a-modal>
@@ -85,10 +85,6 @@ const modalTitle = computed(() => {
   background: transparent;
 }
 
-.chunk-markdown-content :deep(.md-editor-preview-wrapper) {
-  padding: 0;
-}
-
 .empty-text {
   color: var(--gray-500);
   font-size: 13px;
diff --git a/web/src/components/sources/KbResultGroupedList.vue b/web/src/components/sources/KbResultGroupedList.vue
index 579d4b1d..55ab5f2b 100644
--- a/web/src/components/sources/KbResultGroupedList.vue
+++ b/web/src/components/sources/KbResultGroupedList.vue
@@ -147,6 +147,7 @@ const openChunkDetail = (chunk, index) => {
 
 <style scoped lang="less">
 .kb-result-grouped-list {
+  padding: 4px;
   .result-summary {
     padding: 10px 12px;
     background: var(--gray-25);
@@ -231,7 +232,7 @@ const openChunkDetail = (chunk, index) => {
       }
 
       &.high-relevance {
-        background: var(--main-5);
+        background: var(--gray-5);
       }
 
       &:hover {