From 7df715f612d698fe5cfcdbb8311433aa8ff9896c Mon Sep 17 00:00:00 2001
From: zqm <zqm@example.com>
Date: Mon, 3 Nov 2025 17:26:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E6=B5=AE=E5=8A=A8=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Windows/Robot/Web/src/DockLayout/Area.vue | 84 +++++++++----------
 .../Robot/Web/src/DockLayout/DockLayout.vue   | 41 ++++-----
 2 files changed, 57 insertions(+), 68 deletions(-)

diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index 90df47e..d7b4349 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -1,53 +1,53 @@
 <template>
   <div class="vs-area-wrapper">
     <div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle">
-    <!-- 顶部标题栏 -->
-    <div v-if="showTitleBar" class="vs-title-bar">
-      <div class="vs-title-left">
-        <div class="vs-app-icon" aria-label="AppIcon">
-          <svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true">
-            <path
-              fill="#68217A"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              style="shape-rendering: crispEdges;"
-              d="M0 4.2 L1.8 3.4 L5.8 6.6 L12.6 0 L16.6 1.8 L16.6 15 L12.4 16.6 L6 10.2 L1.8 13.4 L0 12.6 Z
-                 M1.8 5.8 L4.2 8.4 L1.8 10.8 Z
-                 M8.2 8.4 L12.6 5 L12.4 11.6 Z" />
-          </svg>
-        </div>
-        <span class="vs-title-text">{{ title || '面板区' }}</span>
-      </div>
-      <div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
-        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" :aria-label="isMaximized ? '还原' : '最大化'" @click="onToggleMaximize">
-          <svg v-if="!isMaximized" class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
-            <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
-            <rect x="3" y="3" width="5" height="1" fill="#b8c6ff" />
-            <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
-          </svg>
-          <svg v-else class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+      <!-- 顶部标题栏 -->
+      <div v-if="showTitleBar" class="vs-title-bar">
+        <div class="vs-title-left">
+          <div class="vs-app-icon" aria-label="AppIcon">
+            <svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true">
               <path
-                fill="#CED4DD"
+                fill="#68217A"
                 fill-rule="evenodd"
                 clip-rule="evenodd"
-                d="M1 4 L4 4 L4 1 L11 1 L11 8 L8 8 L8 11 L1 11 Z
-                 M5 4 L5 3 L10 3 L10 7 L8 7 L8 4 Z
-                 M2 6 L12.6 5 L7 6 L7 10 L2 10 Z" />    
-          </svg>
-        </button>
-        <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
-          <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
-            <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
-            <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
-          </svg>
-        </button>
+                style="shape-rendering: crispEdges;"
+                d="M0 4.2 L1.8 3.4 L5.8 6.6 L12.6 0 L16.6 1.8 L16.6 15 L12.4 16.6 L6 10.2 L1.8 13.4 L0 12.6 Z
+                   M1.8 5.8 L4.2 8.4 L1.8 10.8 Z
+                   M8.2 8.4 L12.6 5 L12.4 11.6 Z" />
+            </svg>
+          </div>
+          <span class="vs-title-text">{{ title || '面板区' }}</span>
+        </div>
+        <div class="vs-title-right title-bar-buttons flex items-center gap-0.5">
+          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" :aria-label="isMaximized ? '还原' : '最大化'" @click="onToggleMaximize">
+            <svg v-if="!isMaximized" class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+              <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
+              <rect x="3" y="3" width="5" height="1" fill="#b8c6ff" />
+              <rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
+            </svg>
+            <svg v-else class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+                <path
+                  fill="#CED4DD"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M1 4 L4 4 L4 1 L11 1 L11 8 L8 8 L8 11 L1 11 Z
+                   M5 4 L5 3 L10 3 L10 7 L8 7 L8 4 Z
+                   M2 6 L12.6 5 L7 6 L7 10 L2 10 Z" />    
+            </svg>
+          </button>
+          <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" aria-label="关闭" @click="onClose">
+            <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
+              <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1"></line>
+              <line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1"></line>
+            </svg>
+          </button>
+        </div>
       </div>
-    </div>
 
-    <!-- 内容区域（空） -->
-    <div class="vs-content">
-      <!-- 内容区域已清空 -->
-    </div>
+      <!-- 内容区域（空） -->
+      <div class="vs-content">
+        <!-- 内容区域已清空 -->
+      </div>
     </div>
   </div>
 </template>
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index a826963..7dd9979 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -4,27 +4,23 @@
     <Area :WindowState="windowState" :showTitleBar="false" title="主区域" />
     
     <!-- 浮动区域列表 -->
-    <div
+    <Area
       v-for="area in floatingAreas"
       :key="area.id"
-      class="floating-area"
+      :id="area.id"
+      :title="area.title"
+      :WindowState="area.WindowState"
+      :showTitleBar="area.showTitleBar"
+      :width="area.width"
+      :height="area.height"
       :style="{
+        position: 'absolute',
         left: area.x + 'px',
         top: area.y + 'px',
-        width: area.width + 'px',
-        height: area.height + 'px'
+        zIndex: 10
       }"
-    >
-      <Area
-        :id="area.id"
-        :title="area.title"
-        :WindowState="'正常'"
-        :showTitleBar="true"
-        :width="area.width"
-        :height="area.height"
-        @close="onCloseFloatingArea(area.id)"
-      />
-    </div>
+      @close="onCloseFloatingArea(area.id)"
+    />
   </div>
 </template>
 
@@ -44,6 +40,7 @@ let areaIdCounter = 1
 
 // 添加新的浮动区域
 const addFloatingArea = () => {
+  // 创建新的Area组件配置
   const newArea = {
     id: `floating-area-${areaIdCounter++}`,
     title: `浮动区域 ${areaIdCounter - 1}`,
@@ -51,8 +48,8 @@ const addFloatingArea = () => {
     y: 50 + (areaIdCounter - 2) * 20,
     width: 300,
     height: 200,
-    collapsed: false,
-    toolbarExpanded: false
+    WindowState: '正常',
+    showTitleBar: true
   }
   floatingAreas.value.push(newArea)
 }
@@ -106,15 +103,7 @@ defineExpose({
   overflow: hidden;
 }
 
-/* 浮动区域样式 */
-.floating-area {
-  position: absolute;
-  z-index: 10;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  background-color: #fff;
-  overflow: hidden;
-}
+/* 浮动区域样式已直接应用到Area组件 */
 
 /* 添加浮动区域按钮样式 */
 .add-floating-btn {