From 60f97fcd4bb31bcc396389f37c3354d372e9bca8 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 5 Apr 2026 23:52:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E7=AE=80=E5=8C=96=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=B3=BB=E7=BB=9F=E9=9D=A2=E6=9D=BF=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AgentPanel.vue | 107 ++++++++++--------------------
 1 file changed, 34 insertions(+), 73 deletions(-)

diff --git a/web/src/components/AgentPanel.vue b/web/src/components/AgentPanel.vue
index 4fbedc12..c852c77c 100644
--- a/web/src/components/AgentPanel.vue
+++ b/web/src/components/AgentPanel.vue
@@ -5,27 +5,22 @@
     <div class="panel-header">
       <div class="panel-title">
         <FolderCode :size="20" class="header-icon" />
-        <span><strong>状态工作台</strong></span>
+        <span><strong>文件系统</strong></span>
       </div>
       <div class="header-actions">
-        <button class="close-btn" @click="$emit('close')">
-          <X :size="18" />
+        <button class="header-action-btn" title="刷新" @click="emitRefresh">
+          <RefreshCw :size="15" />
         </button>
-      </div>
-    </div>
-
-    <div class="tabs">
-      <div class="tab active">文件系统</div>
-      <div class="tab-actions">
+        <span class="header-divider"></span>
         <button
-          class="tab-action-btn"
+          class="header-action-btn"
           :title="isExpanded ? '恢复高度' : '向上展开'"
           @click="emit('toggle-expand')"
         >
           <component :is="isExpanded ? ChevronsDownUp : ChevronsUpDown" :size="15" />
         </button>
-        <button class="tab-action-btn" title="刷新" @click="emitRefresh">
-          <RefreshCw :size="15" />
+        <button class="close-btn" @click="$emit('close')">
+          <X :size="18" />
         </button>
       </div>
     </div>
@@ -675,6 +670,26 @@ watch(useInlinePreview, (isInline) => {
   flex-shrink: 0;
 }
 
+.header-action-btn {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--gray-600);
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: var(--gray-100);
+    color: var(--gray-900);
+  }
+}
+
 .panel-title {
   display: flex;
   align-items: center;
@@ -694,6 +709,13 @@ watch(useInlinePreview, (isInline) => {
   gap: 4px;
 }
 
+.header-divider {
+  width: 1px;
+  height: 16px;
+  background: var(--gray-300);
+  margin: 0 4px;
+}
+
 .close-btn {
   border: none;
   background: transparent;
@@ -712,67 +734,6 @@ watch(useInlinePreview, (isInline) => {
   }
 }
 
-.tabs {
-  display: flex;
-  background: var(--gray-25);
-  position: relative;
-  align-items: center;
-  padding: 8px 10px;
-  padding-top: 0px;
-  gap: 4px;
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--gray-150);
-}
-
-.tab-actions {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.tab {
-  padding: 4px 12px;
-  border: none;
-  background: none;
-  color: var(--gray-600);
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  transition: all 0.15s ease;
-  border-radius: 999px;
-
-  &:hover {
-    background: var(--gray-150);
-    color: var(--gray-900);
-  }
-
-  &.active {
-    background: var(--gray-150);
-    color: var(--gray-900);
-  }
-}
-
-.tab-action-btn {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--gray-600);
-  cursor: pointer;
-  padding: 0;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background: var(--gray-150);
-    color: var(--gray-900);
-  }
-}
-
 .tab-content {
   flex: 1;
   overflow-y: auto;