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 {