创建浮动区

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 {