重构TabPage组件为Windows Forms风格的TabControl，添加标签栏、切换和关闭功能

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

@@ -1,20 +1,69 @@
 <template>
   <div class="tab-page">
+    <!-- Tab标签栏 -->
+    <div class="tab-header">
+      <div 
+        v-for="(tab, index) in tabs" 
+        :key="tab.id"
+        :class="['tab-item', { 'active': activeTabIndex === index }]"
+        @click="setActiveTab(index)"
+      >
+        {{ tab.title }}
+        <span 
+          v-if="tab.closable" 
+          class="tab-close"
+          @click.stop="closeTab(tab.id)"
+        >×</span>
+      </div>
+      <div class="tab-placeholder"></div>
+    </div>
     <!-- Tab页内容区域 -->
-    <div class="tab-page-content">
-      <slot></slot>
+    <div class="tab-content">
+      <div v-for="(tab, index) in tabs" :key="tab.id" :class="['tab-panel', { 'active': activeTabIndex === index }]">
+        <component :is="tab.component" v-bind="tab.props"></component>
+      </div>
+      <div v-if="tabs.length === 0" class="tab-empty">
+        <slot name="empty">无标签页</slot>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
+import { defineProps, defineEmits, ref } from 'vue'
 
 const props = defineProps({
   id: { type: String, required: true },
-  title: { type: String, default: '标签页' }
+  title: { type: String, default: '标签页' },
+  // 可选的标签页数组配置
+  tabs: {
+    type: Array,
+    default: () => []
+  },
+  // 默认激活的标签页索引
+  activeIndex: {
+    type: Number,
+    default: 0
+  }
 })
 
+const emit = defineEmits(['tabChange', 'tabClose', 'tabAdd'])
+
+// 当前激活的标签页索引
+const activeTabIndex = ref(props.activeIndex)
+
+// 设置激活的标签页
+const setActiveTab = (index) => {
+  if (index >= 0 && index < props.tabs.length) {
+    activeTabIndex.value = index
+    emit('tabChange', { index, tab: props.tabs[index] })
+  }
+}
+
+// 关闭标签页
+const closeTab = (tabId) => {
+  emit('tabClose', { id: tabId })
+}
 </script>
 
 <style scoped>
@@ -24,33 +73,142 @@ const props = defineProps({
   width: 100%;
   height: 100%;
   background: #ffffff;
+  border: 1px solid #c7d2ea;
+  border-radius: 0;
+  overflow: hidden;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* 标签栏样式 - 模仿Windows Forms */
+.tab-header {
+  display: flex;
+  flex-wrap: nowrap;
+  height: 28px;
+  background: #f0f0f0;
+  border-bottom: 1px solid #c7d2ea;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-top: 2px;
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 16px;
+  margin-left: 1px;
+  background: #e8e8e8;
+  border: 1px solid #c7d2ea;
+  border-bottom-color: #c7d2ea;
+  border-radius: 3px 3px 0 0;
+  cursor: pointer;
+  white-space: nowrap;
+  color: #333;
+  font-size: 12px;
+  user-select: none;
+}
+
+.tab-item.active {
+  background: #ffffff;
+  border-bottom-color: #ffffff;
+  font-weight: 500;
+}
+
+.tab-item:hover {
+  background: #f5f5f5;
+}
+
+.tab-item.active:hover {
+  background: #ffffff;
+}
+
+.tab-close {
+  margin-left: 8px;
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 1px;
+}
+
+.tab-close:hover {
+  background: #ff6b6b;
+  color: white;
+}
+
+.tab-placeholder {
+  flex: 1;
+  background: transparent;
+  height: 26px;
+  margin-left: 1px;
+  border: 1px solid transparent;
+  border-bottom-color: #c7d2ea;
+}
+
+/* 内容区域样式 */
+.tab-content {
+  flex: 1;
+  position: relative;
   overflow: hidden;
 }
 
-.tab-page-content {
-  flex: 1;
-  padding: 16px;
+.tab-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 12px;
   overflow: auto;
+  background: #ffffff;
+  display: none;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+.tab-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: #999;
+  font-size: 14px;
 }
 
 /* 滚动条样式 */
-.tab-page-content::-webkit-scrollbar {
+.tab-header::-webkit-scrollbar {
+  height: 6px;
+}
+
+.tab-header::-webkit-scrollbar-track {
+  background: #f0f0f0;
+}
+
+.tab-header::-webkit-scrollbar-thumb {
+  background: #c7d2ea;
+  border-radius: 3px;
+}
+
+.tab-panel::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
 
-.tab-page-content::-webkit-scrollbar-track {
+.tab-panel::-webkit-scrollbar-track {
   background: #f5f7fb;
   border-left: 1px solid #c7d2ea;
 }
 
-.tab-page-content::-webkit-scrollbar-thumb {
+.tab-panel::-webkit-scrollbar-thumb {
   background: linear-gradient(to bottom, #d0d6ea, #c0c7e0);
   border: 1px solid #b0b6d6;
   border-radius: 6px;
 }
 
-.tab-page-content::-webkit-scrollbar-thumb:hover {
+.tab-panel::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(to bottom, #c1c7e2, #b2b8d9);
 }
 </style>