参考Panel标题栏实现，重构TabPage标签布局：添加中间flex容器使用justify-between确保标题靠左显示、关闭按钮靠右显示

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

@@ -8,8 +8,11 @@
         :class="['tab-item', { 'active': activeTabIndex === index }]"
         @click="setActiveTab(index)"
       >
-        <div class="tab-title">{{ panel.title }}</div>
+        <div class="flex items-center justify-between w-full">
-        <div class="tab-buttons">
+          <div class="tab-title-container">
+            <span class="tab-title-text">{{ panel.title }}</span>
+          </div>
+          <div class="tab-buttons-container">
             <button 
               class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
               @click.stop="closeTab(panel.id)"
@@ -22,6 +25,7 @@
             </button>
           </div>
         </div>
+      </div>
       <div class="tab-placeholder"></div>
     </div>
     <!-- Tab页内容区域 -->
@@ -102,7 +106,6 @@ const closeTab = (tabId) => {
 .tab-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   height: 26px;
   padding: 0 16px;
   margin-left: 1px;
@@ -118,17 +121,22 @@ const closeTab = (tabId) => {
   width: fit-content;
 }
 
-.tab-title {
+.tab-title-container {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.tab-title-text {
   text-align: left;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1;
-  margin-right: 8px;
 }
 
-.tab-buttons {
+.tab-buttons-container {
   display: flex;
   align-items: center;
 }