完全按照Panel标题栏结构重构TabPage标签布局：使用嵌套flex容器和justify-between确保标题靠左、关闭按钮靠右

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

@@ -8,10 +8,13 @@
         :class="['tab-item', { 'active': activeTabIndex === index }]"
         @click="setActiveTab(index)"
       >
-        <div class="relative w-full">
+        <div class="flex items-center justify-between w-full px-16">
+          <div class="flex items-center">
             <span class="tab-title">{{ panel.title }}</span>
+          </div>
+          <div class="tab-buttons flex items-center">
             <button 
-            class="button-icon p-[2px] rounded hover:opacity-100 opacity-80 absolute right-0"
+              class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
               @click.stop="closeTab(panel.id)"
               aria-label="关闭"
             >
@@ -22,6 +25,7 @@
             </button>
           </div>
         </div>
+      </div>
       <div class="tab-placeholder"></div>
     </div>
     <!-- Tab页内容区域 -->
@@ -103,7 +107,6 @@ const closeTab = (tabId) => {
   display: flex;
   align-items: center;
   height: 26px;
-  padding: 0 16px;
   margin-left: 1px;
   background: linear-gradient(to bottom, var(--vs-blue-top), var(--vs-blue-bottom));
   border-bottom-color: #c7d2ea;
@@ -113,7 +116,6 @@ const closeTab = (tabId) => {
   color: white;
   font-size: 12px;
   user-select: none;
-  position: relative;
   min-width: 120px;
 }
 
@@ -123,7 +125,6 @@ const closeTab = (tabId) => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-right: 20px; /* 为关闭按钮留出空间 */
 }
 
 .tab-item.active {
@@ -145,6 +146,11 @@ const closeTab = (tabId) => {
   color: #333;
 }
 
+.tab-buttons {
+  display: flex;
+  align-items: center;
+}
+
 .button-icon {
   background: transparent;
   border: none;
@@ -152,7 +158,6 @@ const closeTab = (tabId) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
 }
 
 /* 确保在活动标签页中的按钮样式正确 */