修改TabPage标签布局：使用内部flex容器和justify-between确保标题靠左、关闭按钮靠右显示

AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue

@@ -8,18 +8,19 @@
         :class="['tab-item', { 'active': activeTabIndex === index }]"
         @click="setActiveTab(index)"
       >
-        <span class="tab-title">{{ panel.title }}</span>
+        <div class="flex w-full justify-between items-center">
-        <span class="tab-spacer"></span>
+          <span class="tab-title">{{ panel.title }}</span>
-        <button 
+          <button 
-          class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
+            class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
-          @click.stop="closeTab(panel.id)"
+            @click.stop="closeTab(panel.id)"
-          aria-label="关闭"
+            aria-label="关闭"
-        >
+          >
-          <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+            <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="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
-            <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
+              <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
-          </svg>
+            </svg>
-        </button>
+          </button>
+        </div>
       </div>
       <div class="tab-placeholder"></div>
     </div>
@@ -113,7 +114,7 @@ const closeTab = (tabId) => {
   font-size: 12px;
   user-select: none;
   position: relative;
-  width: fit-content;
+  min-width: 120px;
 }
 
 .tab-title {
@@ -122,12 +123,7 @@ const closeTab = (tabId) => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-right: 8px;
-}
-
-.tab-spacer {
   flex: 1;
-  min-width: 0;
 }
 
 .tab-item.active {