style(ui): 统一工具调用结果组件的视觉样式

web/src/assets/css/base.css

@@ -33,6 +33,7 @@
   --gray-400:   #bfbfbf;
   --gray-300:   #d9d9d9; /* 修正了原300/200重复 */
   --gray-200:   #e6e6e6; /* 稍微加深一点，便于分层 */
+  --gray-150:   #f0f0f0;
   --gray-100:   #f2f2f2;
   --gray-50:    #f7f7f7;
   --gray-25:    #fafafa;

web/src/components/AgentMessageComponent.vue

@@ -241,11 +241,6 @@ const toggleToolCall = (toolCallId) => {
     overflow: hidden;
     transition: all 0.2s ease;
 
-    &:hover {
-      border-color: var(--main-500);
-      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
-    }
-
     :deep(.ant-collapse) {
       background-color: transparent;
       border: none;
@@ -259,13 +254,8 @@ const toggleToolCall = (toolCallId) => {
           font-size: 14px;
           font-weight: 500;
           color: var(--gray-700);
-          // border-bottom: 1px solid var(--gray-200);
           transition: all 0.2s ease;
 
-          &:hover {
-            background-color: var(--gray-150);
-          }
-
           .ant-collapse-expand-icon {
             color: var(--gray-400);
           }
@@ -277,7 +267,7 @@ const toggleToolCall = (toolCallId) => {
 
           .ant-collapse-content-box {
             padding: 16px;
-            background-color: var(--gray-50);
+            background-color: var(--gray-25);
           }
         }
       }
@@ -329,20 +319,13 @@ const toggleToolCall = (toolCallId) => {
     overflow: hidden;
     transition: all 0.2s ease;
 
-    &:hover {
-      background-color: var(--gray-50);
-      outline: 1px solid var(--gray-200);
-      outline-color: var(--main-500);
-      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
-    }
-
     .tool-header {
       padding: 8px 12px;
       // background-color: var(--gray-100);
       font-size: 14px;
       font-weight: 500;
       color: var(--gray-800);
-      border-bottom: 1px solid var(--gray-200);
+      border-bottom: 1px solid var(--gray-100);
       display: flex;
       align-items: center;
       gap: 8px;
@@ -352,10 +335,6 @@ const toggleToolCall = (toolCallId) => {
       transition: color 0.2s ease;
       align-items: center;
 
-      &:hover {
-        background-color: var(--gray-150);
-      }
-
       .anticon {
         color: var(--main-color);
         font-size: 16px;
@@ -398,10 +377,12 @@ const toggleToolCall = (toolCallId) => {
       transition: all 0.3s ease;
 
       .tool-params {
-        padding: 16px;
+        padding: 10px 16px;
-        background-color: var(--gray-50);
+        background-color: var(--gray-25);
+        border-bottom: 1px solid var(--gray-150);
 
         .tool-params-header {
+          // unused
           background-color: var(--gray-100);
           font-size: 13px;
           color: var(--gray-800);
@@ -412,9 +393,8 @@ const toggleToolCall = (toolCallId) => {
         .tool-params-content {
           margin: 0;
           font-size: 13px;
-          // background-color: var(--gray-100);
           overflow-x: auto;
-          color: var(--gray-800);
+          color: var(--gray-700);
           line-height: 1.5;
 
           pre {

web/src/components/ToolCallingResult/CalculatorResult.vue

@@ -13,10 +13,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { NumberOutlined } from '@ant-design/icons-vue'
-import { message } from 'ant-design-vue'
-import { NumberOutlined, CopyOutlined } from '@ant-design/icons-vue'
-import { useClipboard } from '@vueuse/core'
 
 const props = defineProps({
   data: {
@@ -25,15 +22,6 @@ const props = defineProps({
   }
 })
 
-const { copy } = useClipboard()
-
-// 计算属性
-const isInteger = computed(() => Number.isInteger(props.data))
-
-const showScientificNotation = computed(() => {
-  const absValue = Math.abs(props.data)
-  return absValue >= 1e6 || (absValue > 0 && absValue < 1e-3)
-})
 
 // 方法
 const formatNumber = (num) => {
@@ -53,56 +41,16 @@ const formatNumber = (num) => {
   }).format(num)
 }
 
-const getNumberType = () => {
-  if (!isFinite(props.data)) {
-    if (isNaN(props.data)) return 'NaN'
-    return '无穷大'
-  }
 
-  if (isInteger.value) {
-    if (props.data === 0) return '零'
-    if (props.data > 0) return '正整数'
-    return '负整数'
-  }
-
-  if (props.data > 0) return '正数'
-  if (props.data < 0) return '负数'
-  return '数字'
-}
-
-const getNumberTypeColor = () => {
-  if (!isFinite(props.data)) return 'red'
-  if (props.data === 0) return 'default'
-  if (props.data > 0) return 'green'
-  return 'orange'
-}
-
-const getDecimalPlaces = () => {
-  if (isInteger.value) return 0
-  const decimalPart = String(props.data).split('.')[1]
-  return decimalPart ? decimalPart.length : 0
-}
-
-const copyResult = async () => {
-  try {
-    await copy(String(props.data))
-    message.success('计算结果已复制到剪贴板')
-  } catch (error) {
-    message.error('复制失败')
-  }
-}
 </script>
 
 <style lang="less" scoped>
 .calculator-result {
-  background: var(--gray-0);
+  background: var(--gray-25);
   border-radius: 8px;
-  border: 1px solid var(--gray-200);
 
   .calc-header {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--gray-200);
-    background: var(--gray-50);
 
     h4 {
       margin: 0;
@@ -119,11 +67,7 @@ const copyResult = async () => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 8px;
     padding: 16px;
-    background: var(--main-10);
-    border-radius: 6px;
-    border: 1px solid var(--main-200);
 
     .result-container {
       display: flex;
@@ -138,7 +82,7 @@ const copyResult = async () => {
       }
 
       .result-value {
-        font-size: 20px;
+        font-size: 1.1rem;
         font-weight: 600;
         color: var(--main-color);
         font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
@@ -151,42 +95,5 @@ const copyResult = async () => {
       gap: 6px;
     }
   }
-
-  .scientific-notation {
-    margin: 0 8px 8px 8px;
-    padding: 8px 10px;
-    background: var(--gray-50);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .notation-label {
-      font-size: 12px;
-      color: var(--gray-600);
-    }
-
-    .notation-value {
-      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-      font-size: 13px;
-      color: var(--main-color);
-      font-weight: 500;
-    }
-  }
-
-  .number-info {
-    padding: 0 8px 8px 8px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-
-    .number-detail {
-      color: var(--gray-600);
-      background: var(--gray-100);
-      padding: 2px 6px;
-      border-radius: 3px;
-    }
-  }
 }
 </style>

web/src/components/ToolCallingResult/KnowledgeBaseResult.vue

@@ -184,11 +184,11 @@ const getScoreColor = (score) => {
 .knowledge-base-result {
   background: var(--gray-0);
   border-radius: 8px;
-  border: 1px solid var(--gray-200);
+  // border: 1px solid var(--gray-200);
 
   .kb-header {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--gray-200);
+    // border-bottom: 1px solid var(--gray-200);
     background: var(--gray-25);
 
     h4 {
@@ -226,7 +226,7 @@ const getScoreColor = (score) => {
     overflow: hidden;
 
     .file-header {
-      padding: 12px 14px;
+      padding: 8px 14px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -239,8 +239,8 @@ const getScoreColor = (score) => {
       }
 
       &.expanded {
-        background: var(--gray-50);
+        background: var(--gray-25);
-        border-bottom: 1px solid var(--gray-150);
+        border-bottom: 1px solid var(--gray-100);
       }
 
       .file-info {
@@ -258,7 +258,7 @@ const getScoreColor = (score) => {
         .file-name {
           font-size: 13px;
           font-weight: 500;
-          color: var(--gray-800);
+          color: var(--gray-700);
           flex: 1;
           min-width: 0;
           white-space: nowrap;
@@ -268,12 +268,9 @@ const getScoreColor = (score) => {
 
         .chunk-count {
           font-size: 11px;
-          color: var(--gray-400);
+          color: var(--gray-500);
-          background: var(--gray-50);
-          padding: 2px 6px;
-          border-radius: 12px;
-          border: 1px solid var(--gray-150);
           white-space: nowrap;
+          margin-right: 4px;
         }
       }
 

web/src/components/ToolCallingResult/KnowledgeGraphResult.vue

@@ -243,12 +243,12 @@ defineExpose({
 .knowledge-graph-result {
   background: var(--gray-0);
   border-radius: 8px;
-  border: 1px solid var(--gray-200);
+  // border: 1px solid var(--gray-200);
 
   .kg-header {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--gray-200);
+    // border-bottom: 1px solid var(--gray-200);
-    background: var(--gray-50);
+    background: var(--gray-25);
 
     h4 {
       margin: 0 0 4px 0;

web/src/components/ToolCallingResult/ToolResultRenderer.vue

@@ -177,12 +177,11 @@ defineExpose({
   .default-result {
     background: var(--gray-0);
     border-radius: 8px;
-    border: 1px solid var(--gray-200);
 
     .default-header {
       padding: 12px 16px;
-      border-bottom: 1px solid var(--gray-200);
+      border-bottom: 1px solid var(--gray-100);
-      background: var(--gray-50);
+      background: var(--gray-25);
 
       h4 {
         margin: 0;
@@ -211,7 +210,7 @@ defineExpose({
         background: var(--gray-50);
         padding: 10px;
         border-radius: 4px;
-        border-left: 2px solid var(--main-color);
+        // border-left: 2px solid var(--main-color);
       }
     }
   }

web/src/components/ToolCallingResult/WebSearchResult.vue

@@ -67,12 +67,10 @@ const formatDate = (dateString) => {
 .web-search-result {
   background: var(--gray-0);
   border-radius: 8px;
-  border: 1px solid var(--gray-200);
 
   .search-header {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--gray-200);
+    background: var(--gray-25);
-    background: var(--gray-50);
 
     h4 {
       margin: 0 0 6px 0;
@@ -111,16 +109,10 @@ const formatDate = (dateString) => {
     border: 1px solid var(--gray-200);
     transition: all 0.2s ease;
 
-    &:hover {
-      border-color: var(--main-200);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
-    }
-
     .result-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
-      margin-bottom: 8px;
 
       .result-title {
         margin: 0;
@@ -143,7 +135,7 @@ const formatDate = (dateString) => {
       .result-score {
         font-size: 11px;
         color: var(--gray-600);
-        background: var(--gray-100);
+        background: var(--gray-50);
         padding: 2px 6px;
         border-radius: 10px;
         margin-left: 8px;