实现Area组件拖拽功能和边界限制，完善初始居中定位

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="dock-layout">
+  <div class="dock-layout" ref="dockLayoutRef">
     <!-- 浮动区域列表 -->
     <Area
       v-for="area in floatingAreas"
@@ -19,6 +19,7 @@
         zIndex: 100
       }"
       @close="onCloseFloatingArea(area.id)"
+      @update:position="onUpdatePosition(area.id, $event)"
     />
     
     <!-- 主区域 -->
@@ -32,7 +33,7 @@
 </template>
 
 <script setup>
-import { ref, defineExpose } from 'vue'
+import { ref, defineExpose, nextTick } from 'vue'
 import Area from './Area.vue';
 import Panel from './Panel.vue';
 
@@ -42,25 +43,50 @@ const windowState = ref('最大化')
 // 浮动区域列表
 const floatingAreas = ref([])
 
+// 容器引用
+const dockLayoutRef = ref(null)
+
 // 区域ID计数器
 let areaIdCounter = 1
 
 // 添加新的浮动区域
 const addFloatingArea = () => {
+  // 获取父容器尺寸以计算居中位置
+  let x = 50 + (areaIdCounter - 2) * 20
+  let y = 50 + (areaIdCounter - 2) * 20
+  
+  // 如果容器已渲染，计算居中位置
+  if (dockLayoutRef.value) {
+    const containerRect = dockLayoutRef.value.getBoundingClientRect()
+    const width = 300
+    const height = 250
+    x = Math.floor((containerRect.width - width) / 2)
+    y = Math.floor((containerRect.height - height) / 2)
+  }
+  
   // 创建新的Area组件配置
   const newArea = {
     id: `floating-area-${areaIdCounter++}`,
     title: `浮动区域 ${areaIdCounter - 1}`,
-    x: 50 + (areaIdCounter - 2) * 20, // 错开位置
-    y: 50 + (areaIdCounter - 2) * 20,
+    x: x,
+    y: y,
     width: 300,
-    height: 200,
+    height: 250,
     WindowState: '正常',
     showTitleBar: true
   }
   floatingAreas.value.push(newArea)
 }
 
+// 更新区域位置
+const onUpdatePosition = (id, position) => {
+  const area = floatingAreas.value.find(a => a.id === id)
+  if (area) {
+    area.x = position.left
+    area.y = position.top
+  }
+}
+
 // 切换折叠状态
 const onToggleCollapse = (id) => {
   const area = floatingAreas.value.find(a => a.id === id)