From 6d99f1134d5a7d6662717bff6858b0cd08e24c95 Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Wed, 5 Nov 2025 10:42:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84TabPage=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=BAWindows=20Forms=E9=A3=8E=E6=A0=BC=E7=9A=84TabControl?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=A0=87=E7=AD=BE=E6=A0=8F=E3=80=81?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=92=8C=E5=85=B3=E9=97=AD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Robot/Web/src/DockLayout/TabPage.vue      | 180 ++++++++++++++++--
 1 file changed, 169 insertions(+), 11 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
index 0b4925e..9038e23 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
+++ b/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>
\ No newline at end of file