diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
index a04872d..1d93082 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
@@ -215,7 +215,7 @@ const areaStyle = computed(() => {
   return style
 })
 
-const emit = defineEmits(['close', 'update:WindowState', 'update:position', 'dragover', 'dragleave'])
+const emit = defineEmits(['close', 'update:WindowState', 'update:position', 'dragover', 'dragleave', 'areaDragStart', 'areaDragMove', 'areaDragEnd'])
 
 // 处理Panel的最大化事件
 const onPanelMaximize = (panelId) => {
@@ -254,6 +254,15 @@ const onDragStart = (e) => {
     y: originalPosition.value.top || 0
   }
   
+  // 通知父组件拖拽开始
+  emit('areaDragStart', {
+    areaId: props.id,
+    clientX: e.clientX,
+    clientY: e.clientY,
+    startLeft: originalPosition.value.left || 0,
+    startTop: originalPosition.value.top || 0
+  })
+  
   // 添加全局事件监听
   document.addEventListener('mousemove', onDragMove)
   document.addEventListener('mouseup', onDragEnd)
@@ -289,12 +298,28 @@ const onDragMove = (e) => {
   originalPosition.value.left = newLeft
   originalPosition.value.top = newTop
   
+  // 通知父组件拖拽移动
+  emit('areaDragMove', {
+    areaId: props.id,
+    clientX: e.clientX,
+    clientY: e.clientY,
+    left: newLeft,
+    top: newTop
+  })
+  
   // 通知父组件位置变化
   emit('update:position', { left: newLeft, top: newTop })
 }
 
 // 拖拽结束
 const onDragEnd = () => {
+  // 通知父组件拖拽结束
+  emit('areaDragEnd', {
+    areaId: props.id,
+    left: originalPosition.value.left,
+    top: originalPosition.value.top
+  })
+  
   isDragging.value = false
   // 移除全局事件监听
   document.removeEventListener('mousemove', onDragMove)
diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
index cc93048..abab22e 100644
--- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
+++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
@@ -51,6 +51,9 @@
       @close="onCloseFloatingArea(area.id)"
       @update:position="onUpdatePosition(area.id, $event)"
       @panelMaximizeSync="onPanelMaximizeSync"
+      @areaDragStart="onAreaDragStart(area.id, $event)"
+      @areaDragMove="onAreaDragMove(area.id, $event)"
+      @areaDragEnd="onAreaDragEnd(area.id, $event)"
     >
       <!-- 每个Area内渲染其包含的TabPages -->
       <TabPage
@@ -445,6 +448,45 @@ const onPanelDragEnd = () => {
   }
 }
 
+// Area拖拽开始
+const onAreaDragStart = (areaId, event) => {
+  const area = floatingAreas.value.find(a => a.id === areaId)
+  if (!area) return
+  
+  // 拖拽开始时显示指示器
+  showDockIndicator.value = true
+  
+  // 检查主区域内是否有其他Area
+  checkMainContentForAreas()
+  
+  // 使用dock-layout作为默认目标区域
+  if (dockLayoutRef.value) {
+    const rect = dockLayoutRef.value.getBoundingClientRect()
+    targetAreaRect.value = {
+      left: 0,
+      top: 0,
+      width: rect.width,
+      height: rect.height
+    }
+    
+    // 拖拽开始时立即更新停靠区域
+    updateDockZoneByMousePosition(event.clientX, event.clientY)
+  }
+}
+
+// Area拖拽移动
+const onAreaDragMove = (areaId, event) => {
+  // 根据鼠标位置动态更新停靠区域
+  updateDockZoneByMousePosition(event.clientX, event.clientY)
+}
+
+// Area拖拽结束
+const onAreaDragEnd = (areaId, event) => {
+  // 隐藏停靠指示器
+  showDockIndicator.value = false
+  activeDockZone.value = null
+}
+
 // TabPage拖拽开始
 const onTabDragStart = (areaId, event) => {
   const area = floatingAreas.value.find(a => a.id === areaId)