refactor(component): 优化UI样式和工具参数显示逻辑

1. 调整多个组件的间距、字体大小和样式细节
2. 重构工具参数显示逻辑，支持更多参数格式
3. 移除状态按钮中的计数显示，更新图标

Author: xerrors

web/src/components/AgentChatComponent.vue

@@ -64,8 +64,8 @@
               :class="{ 'has-content': hasAgentStateContent }"
               :title="hasAgentStateContent ? '查看工作状态' : '暂无工作状态'"
             >
-              <Layers class="nav-btn-icon" size="18"/>
-              <span v-if="hasAgentStateContent" class="text">状态({{ totalAgentStateItems }})</span>
+              <FolderDotIcon class="nav-btn-icon" size="18"/>
+              <span v-if="hasAgentStateContent" class="text">状态</span>
             </div>
           </AgentPopover>
           <!-- <div class="nav-btn" @click="shareChat" v-if="currentChatId && currentAgent">
@@ -243,7 +243,7 @@ import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
 import ImagePreviewComponent from '@/components/ImagePreviewComponent.vue'
 import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
 import RefsComponent from '@/components/RefsComponent.vue'
-import { PanelLeftOpen, MessageCirclePlus, LoaderCircle, Layers, ChevronDown } from 'lucide-vue-next';
+import { PanelLeftOpen, MessageCirclePlus, LoaderCircle, FolderDotIcon, ChevronDown } from 'lucide-vue-next';
 import { handleChatError, handleValidationError } from '@/utils/errorHandler';
 import { ScrollController } from '@/utils/scrollController';
 import { AgentValidator } from '@/utils/agentValidator';
@@ -397,14 +397,6 @@ const hasAgentStateContent = computed(() => {
   return todoCount > 0 || fileCount > 0;
 });
 
-const totalAgentStateItems = computed(() => {
-  const s = currentAgentState.value;
-  if (!s) return 0;
-  const todoCount = Array.isArray(s.todos) ? s.todos.length : 0;
-  const fileCount = countFiles(s.files);
-  return todoCount + fileCount;
-});
-
 const currentThreadMessages = computed(() => threadMessages.value[currentChatId.value] || []);
 
 // 计算是否显示Refs组件的条件
@@ -1841,13 +1833,9 @@ watch(conversations, () => {
 }
 
 /* AgentState 按钮有内容时的样式 */
-.agent-nav-btn.agent-state-btn.has-content {
-  color: var(--main-600);
-
-  &:hover:not(.is-disabled) {
-    color: var(--main-700);
-    background-color: var(--main-40);
-  }
+.agent-nav-btn.agent-state-btn.has-content:hover:not(.is-disabled) {
+  color: var(--main-700);
+  background-color: var(--main-20);
 }
 
 @keyframes spin {

web/src/components/AgentMessageComponent.vue

@@ -60,11 +60,10 @@
               </span>
             </div>
             <div class="tool-content" v-show="expandedToolCalls.has(toolCall.id)">
-              <div class="tool-params" v-if="toolCall.args || toolCall.function?.arguments">
+              <div class="tool-params" v-if="String(toolCall.args).length > 2 || String(toolCall.function?.arguments).length > 2">
                 <div class="tool-params-content">
-                  <strong>参数:</strong>
-                  <span v-if="getFormattedToolArgs(toolCall)">{{ getFormattedToolArgs(toolCall) }}</span>
-                  <span v-else>{{ toolCall.args || toolCall.function?.arguments }}</span>
+                  <strong>参数: </strong>
+                  <span>{{ getFormattedToolArgs(toolCall) }}</span>
                 </div>
               </div>
               <div class="tool-result" v-if="toolCall.tool_call_result && toolCall.tool_call_result.content">
@@ -205,17 +204,22 @@ const getToolNameByToolCall = (toolCall) => {
 };
 
 const getFormattedToolArgs = (toolCall) => {
-  const args = toolCall.args || toolCall.function?.arguments;
+  const args = toolCall.args ? toolCall.args : toolCall.function?.arguments;
   if (!args) return '';
 
   try {
     // 尝试解析JSON格式的参数
     if (typeof args === 'string' && args.trim().startsWith('{')) {
       const parsed = JSON.parse(args);
       return JSON.stringify(parsed, null, 2);
+    } else if (typeof args === 'object' && args !== null) {
+      // 如果是对象类型，直接转换为字符串
+      console.log('Object args:', args);
+      return JSON.stringify(args, null, 2);
     }
   } catch (e) {
     // 如果解析失败，直接返回原始字符串
+    console.log('Failed to parse tool arguments as JSON:', args);
   }
 
   return args;
@@ -513,7 +517,7 @@ const toggleToolCall = (toolCallId) => {
 
         .tool-params-content {
           margin: 0;
-          font-size: 13px;
+          font-size: 12px;
           overflow-x: auto;
           color: var(--gray-700);
           line-height: 1.5;

web/src/components/AgentPopover.vue

@@ -4,7 +4,7 @@
     :title="null"
     placement="bottomRight"
     trigger="click"
-    :overlayStyle="{ width: '400px', zIndex: 1030 }"
+    :overlayStyle="{ width: '400px', zIndex: 999 }"
   >
     <template #content>
       <div class="popover-content">
@@ -202,6 +202,7 @@ const formatDate = (dateString) => {
   try {
     const date = new Date(dateString);
     return date.toLocaleString('zh-CN', {
+      year: 'numeric',
       month: '2-digit',
       day: '2-digit',
       hour: '2-digit',
@@ -438,11 +439,11 @@ const emitRefresh = () => {
 .file-list {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
 }
 
 .file-item {
-  padding: 12px 14px;
+  padding: 8px 12px;
   background: var(--gray-0);
   border: 1px solid var(--gray-150);
   border-radius: 6px;
@@ -468,14 +469,13 @@ const emitRefresh = () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   min-width: 0;
 }
 
 .file-name {
   font-size: 14px;
   color: var(--gray-1000);
-  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-weight: 500;
   flex: 1;
   overflow: hidden;