From b19a0c1a39d695901d5d3fcf07ebe5d7093e2d39 Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Tue, 18 Nov 2025 08:46:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E7=8E=B0=E7=82=B9=E5=87=BBtabpage?=
 =?UTF-8?q?=E7=9A=84=E4=B8=8D=E5=90=8C=E9=A1=B5=E6=A0=87=E7=AD=BE=EF=BC=8C?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=86=85=E5=AE=B9=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E6=94=B9=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 36 +++---------------
 .../Robot/Web/src/DockLayout/TabPage.vue      | 38 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index 3ae45d8..b592bbc 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -115,28 +115,7 @@
             @tabDragStart="() => {}"
             @tabDragMove="() => {}"
             @tabDragEnd="() => {}"
-          >
-            <!-- 在TabPage内渲染其包含的Panels -->
-            <Panel
-              v-for="panel in item.tabPage.panels"
-              :key="`received-panel-${index}-${panel.id}`"
-              :id="panel.id"
-              :title="panel.title"
-              :collapsed="panel.collapsed"
-              :toolbarExpanded="panel.toolbarExpanded"
-              :maximized="panel.maximized"
-              :content="panel.content"
-              @toggleCollapse="() => {}"
-              @maximize="onPanelMaximize"
-              @close="() => {}"
-              @toggleToolbar="() => {}"
-              @dragStart="() => {}"
-              @dragMove="() => {}"
-              @dragEnd="() => {}"
-              @dragover="handleDragOver"
-              @dragleave="handleDragLeave"
-            />
-          </TabPage>
+          />
         </template>
       </div>
     </div>
@@ -593,11 +572,10 @@ const mergeAreaContent = (sourceArea) => {
         sourceArea.tabPages.forEach((tabPage, tabIndex) => {
           const newTabPageId = `merged-tabpage-${Date.now()}-${tabIndex}`
           const newPanels = (tabPage.panels || []).map((panel, panelIndex) => {
-            const newPanelId = `merged-panel-${Date.now()}-${tabIndex}-${panelIndex}`
-            console.log(`[Area] 添加Panel: ${panel.id} -> ${newPanelId}`)
+            // 保持原有Panel ID不变，确保Vue响应式和状态稳定性
+            console.log(`[Area] 添加Panel: ${panel.id}`)
             return {
               ...panel,
-              id: newPanelId,
               maximized: true
             }
           })
@@ -643,20 +621,18 @@ const mergeAreaContent = (sourceArea) => {
       if (sourceArea.tabPages && sourceArea.tabPages.length > 0) {
         sourceArea.tabPages.forEach((sourceTabPage, tabIndex) => {
           if (sourceTabPage && sourceTabPage.panels) {
-            // 为每个Panel创建新的唯一ID避免冲突
+            // 保持原有Panel ID不变，避免Vue组件重新创建和状态丢失
             const newPanels = sourceTabPage.panels.map((panel, panelIndex) => {
-              const newPanelId = `merged-panel-${Date.now()}-${tabIndex}-${panelIndex}`
-              console.log(`[Area] 合并Panel到现有TabPage: ${panel.id} -> ${newPanelId}`)
+              console.log(`[Area] 合并Panel到现有TabPage: ${panel.id}`)
               return {
                 ...panel,
-                id: newPanelId,
                 maximized: true
               }
             })
             
             // 将新的Panel添加到现有TabPage
             existingTabPage.tabPage.panels.push(...newPanels)
-            existingTabPage.panels.push(...newPanels)
+            // existingTabPage.panels 是旧引用，保持结构一致性但避免重复添加
             
             console.log(`[Area] 成功合并 ${newPanels.length} 个Panel到现有TabPage`)
           }
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
index ddc7198..a8d690d 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
@@ -58,8 +58,41 @@
 
     <!-- Tab页内容区域 -->
     <div class="tab-content">
-      <!-- 渲染slot内容（Panel组件） -->
-      <slot></slot>
+      <!-- 渲染当前激活的Panel内容 -->
+      <template v-if="activeTabIndex >= 0 && activeTabIndex < panels.length">
+        <div 
+          v-for="(panel, index) in panels" 
+          :key="panel.id"
+          v-show="index === activeTabIndex"
+          class="tab-panel"
+          :class="{ active: index === activeTabIndex }"
+        >
+          <!-- 使用Panel组件渲染面板内容 -->
+          <Panel 
+            :id="panel.id"
+            :title="panel.title"
+            :x="panel.x || 0"
+            :y="panel.y || 0"
+            :width="panel.width || 300"
+            :height="panel.height || 200"
+            :collapsed="panel.collapsed || false"
+            :toolbar-expanded="panel.toolbarExpanded || false"
+            :maximized="panel.maximized || false"
+            :content="panel.content"
+            @toggle-collapse="$emit('toggleCollapse', $event)"
+            @maximize="$emit('maximize', $event)"
+            @close="$emit('close', $event)"
+            @toggle-toolbar="$emit('toggleToolbar', $event)"
+            @drag-start="$emit('dragStart', $event)"
+            @drag-move="$emit('dragMove', $event)"
+            @drag-end="$emit('dragEnd', $event)"
+          />
+        </div>
+      </template>
+      <!-- 空状态提示 -->
+      <div v-else class="tab-empty">
+        <span>没有可显示的内容</span>
+      </div>
     </div>
 
     <!-- 右侧标签栏 -->
@@ -122,6 +155,7 @@
 
 <script setup>
 import { defineProps, defineEmits, ref, onMounted } from 'vue'
+import Panel from './Panel.vue'
 
 const props = defineProps({
   id: { type: String, required: true },