From de1eb7f9b9465f66b399d07a868e576b6836a721 Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Wed, 5 Nov 2025 14:53:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86TabPage=E4=B8=AD=E7=9A=84span=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E6=8C=89=E9=92=AE=E6=9B=BF=E6=8D=A2=E4=B8=BA=E4=B8=8E?=
 =?UTF-8?q?Panel=E4=B8=80=E8=87=B4=E7=9A=84button=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Robot/Web/src/DockLayout/TabPage.vue      | 43 ++++++++++++++-----
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
index 116b28a..d307d6a 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
@@ -9,10 +9,16 @@
         @click="setActiveTab(index)"
       >
         {{ panel.title }}
-        <span 
-          class="tab-close"
+        <button 
+          class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
           @click.stop="closeTab(panel.id)"
-        >×</span>
+          aria-label="关闭"
+        >
+          <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+            <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
+            <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
+          </svg>
+        </button>
       </div>
       <div class="tab-placeholder"></div>
     </div>
@@ -127,18 +133,33 @@ const closeTab = (tabId) => {
   color: #333;
 }
 
-.tab-close {
+.button-icon {
   margin-left: 8px;
-  font-size: 14px;
-  color: #333;
+  background: transparent;
+  border: none;
   cursor: pointer;
-  padding: 0 4px;
-  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.tab-close:hover {
-  background: #ff6b6b;
-  color: white;
+/* 确保在活动标签页中的按钮样式正确 */
+.tab-item.active .button-icon {
+  opacity: 0.6;
+}
+
+.tab-item.active .button-icon:hover {
+  opacity: 1;
+  background: #f3f4f6;
+}
+
+/* 确保在非活动标签页中的按钮样式正确 */
+.tab-item:not(.active) .button-icon svg line {
+  stroke: #e6efff;
+}
+
+.tab-item:not(.active) .button-icon:hover svg line {
+  stroke: white;
 }
 
 .tab-placeholder {