From fc8bb934c0c4535045fb6bccf32fa76de06f3bc3 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Tue, 26 Aug 2025 10:54:28 +0800
Subject: [PATCH] =?UTF-8?q?style(web):=20=E6=9B=B4=E6=96=B0=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=B8=B2=E6=9F=93=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加新的颜色变量用于工具调用状态显示
- 调整工具调用组件的悬停样式和边框
- 改进列表和表格的显示样式
- 移除部分不必要的背景色和阴影
---
 docs/changelog/update.md                     |  1 +
 web/src/assets/css/base.css                  |  6 +-
 web/src/components/AgentMessageComponent.vue | 80 +++++++++++++++++---
 3 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/docs/changelog/update.md b/docs/changelog/update.md
index c3b9efdb..f2549de1 100644
--- a/docs/changelog/update.md
+++ b/docs/changelog/update.md
@@ -20,6 +20,7 @@
 - [x] 文件上传模块 UI的边距、配色有问题
 - [x] 知识图谱页面的节点数量统计方法 #236
 - [x] 当没有手动添加节点的时候，尝试检索，会出现为创建索引的情况 #236
+- [ ] LlightRAG 知识库中，点击边，没有显示
 
 # 💯 More:
 
diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css
index e2153af4..29bbe5e5 100644
--- a/web/src/assets/css/base.css
+++ b/web/src/assets/css/base.css
@@ -39,12 +39,16 @@
   --gray-10:    #fcfcfc;
   --gray-0:     #ffffff;
 
-
   --main-color: #016179;
   /* 鲜艳一点的 */
   --main-bright: #0188a6;
   --secondry-color: #4e616d;
   --error-color: #ba1a1a;
+  --color-primary: #1c7796;
+  --color-primary-bg: #d6eef1;
+  --color-success: #45b30e;
+  --color-error: #c73234;
+  --color-info: #0058d4;
 
 
   --bg-sider: var(--main-5);
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index bf3e6c71..09d37486 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -32,12 +32,12 @@
           <div v-if="toolCall" class="tool-call-display" :class="{ 'is-collapsed': !expandedToolCalls.has(toolCall.id) }">
             <div class="tool-header" @click="toggleToolCall(toolCall.id)">
               <span v-if="!toolCall.tool_call_result">
-                <span><Loader size="16" class="tool-loader rotate" /></span> &nbsp;
+                <span><Loader size="16" class="tool-loader rotate tool-loading" /></span> &nbsp;
                 <span>正在调用工具: </span>
                 <span class="tool-name">{{ getToolNameByToolCall(toolCall) }}</span>
               </span>
               <span v-else>
-                <span><CircleCheckBig size="16" class="tool-loader" /></span> &nbsp; 工具 <span class="tool-name">{{ getToolNameByToolCall(toolCall) }}</span> 执行完成
+                <span><CircleCheckBig size="16" class="tool-loader tool-success" /></span> &nbsp; 工具 <span class="tool-name">{{ getToolNameByToolCall(toolCall) }}</span> 执行完成
               </span>
             </div>
             <div class="tool-content" v-show="expandedToolCalls.has(toolCall.id)">
@@ -242,8 +242,8 @@ const toggleToolCall = (toolCallId) => {
     transition: all 0.2s ease;
 
     &:hover {
-      border-color: var(--main-300);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+      border-color: var(--main-500);
+      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
     }
 
     :deep(.ant-collapse) {
@@ -331,9 +331,9 @@ const toggleToolCall = (toolCallId) => {
 
     &:hover {
       background-color: var(--gray-50);
-      outline: 2px solid var(--gray-200);
-      outline-color: var(--main-300);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+      outline: 1px solid var(--gray-200);
+      outline-color: var(--main-500);
+      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
     }
 
     .tool-header {
@@ -380,6 +380,18 @@ const toggleToolCall = (toolCallId) => {
       .tool-loader.rotate {
         animation: rotate 2s linear infinite;
       }
+
+      .tool-loader.tool-success {
+        color: var(--color-success);
+      }
+
+      .tool-loader.tool-error {
+        color: var(--color-error);
+      }
+
+      .tool-loader.tool-loading {
+        color: var(--color-info);
+      }
     }
 
     .tool-content {
@@ -400,7 +412,7 @@ const toggleToolCall = (toolCallId) => {
         .tool-params-content {
           margin: 0;
           font-size: 13px;
-          background-color: var(--gray-100);
+          // background-color: var(--gray-100);
           overflow-x: auto;
           color: var(--gray-800);
           line-height: 1.5;
@@ -532,12 +544,13 @@ const toggleToolCall = (toolCallId) => {
     margin: 0.25rem 0;
   }
 
+  ul li::marker,
   ol li::marker {
-    color: var(--main-color);
+    color: var(--main-bright);
   }
 
-  ul li::marker {
-    color: var(--main-bright);
+  ul, ol {
+    padding-left: 1.625rem;
   }
 
   cite {
@@ -566,6 +579,51 @@ const toggleToolCall = (toolCallId) => {
   p:last-child {
     margin-bottom: 0;
   }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1em 0;
+    font-size: 16px;
+    display: table;
+
+
+    thead th,
+    tbody th {
+      border: none;
+      border-bottom: 1.5px solid var(--gray-400);
+    }
+
+    tbody tr:last-child td {
+      border-bottom: 1.5px solid var(--gray-300);
+      border: none;
+    }
+  }
+
+  th,
+  td {
+    padding: 0.5rem 0rem;
+    text-align: left;
+    border: none;
+  }
+
+  td {
+    border-bottom: 1px solid var(--gray-100);
+    color: var(--gray-800);
+  }
+
+  th {
+    font-weight: 600;
+    color: var(--gray-800);
+  }
+
+  tr {
+    background-color: var(--gray-0);
+  }
+
+  // tbody tr:last-child td {
+  //   border-bottom: none;
+  // }
 }
 
 :deep(.chat-box.font-smaller #preview-only-preview) {