优化事件总线

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

@@ -132,7 +132,8 @@
 </template>
 
 <script setup>
-import { defineProps, computed, defineEmits, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
+import { defineProps, computed, ref, onMounted, onUnmounted, watch, defineExpose } from 'vue'
+import { emitEvent, EVENT_TYPES } from './eventBus.js'
 import TabPage from './TabPage.vue'
 import Panel from './Panel.vue'
 import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers.js'
@@ -254,7 +255,7 @@ const areaStyle = computed(() => {
   return style
 })
 
-const emit = defineEmits(['close', 'update:windowState', 'update:position', 'dragover', 'dragleave', 'areaDragStart', 'areaDragMove', 'areaDragEnd', 'area-merged', 'toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd'])
+// 使用事件总线替代直接emit
 
 // 处理Panel的最大化事件
 const onPanelMaximize = (panelId) => {
@@ -271,18 +272,18 @@ const onPanelMaximize = (panelId) => {
   } else {
     // // console.log('🔸 非单Panel模式，转发到父组件')
     // 如果不是单Panel，转发给父组件处理
-    emit('maximize', panelId)
+    emitEvent(EVENT_TYPES.PANEL_MAXIMIZE, { panelId, areaId: props.id })
   }
 }
 
 // 处理拖拽悬停事件
 const handleDragOver = (event) => {
-  emit('dragover', event, props.id)
+  emitEvent(EVENT_TYPES.AREA_DRAG_OVER, { event, areaId: props.id })
 }
 
 // 处理拖拽离开事件
 const handleDragLeave = (event) => {
-  emit('dragleave', event, props.id)
+  emitEvent(EVENT_TYPES.AREA_DRAG_LEAVE, { event, areaId: props.id })
 }
 
 // 拖拽开始
@@ -301,7 +302,7 @@ const onDragStart = (e) => {
   }
   
   // 通知父组件拖拽开始
-  emit('areaDragStart', {
+  emitEvent(EVENT_TYPES.AREA_DRAG_START, {
     areaId: props.id,
     clientX: e.clientX,
     clientY: e.clientY,
@@ -345,7 +346,7 @@ const onDragMove = (e) => {
   originalPosition.value.top = newTop
   
   // 通知父组件拖拽移动
-  emit('areaDragMove', {
+  emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
     areaId: props.id,
     clientX: e.clientX,
     clientY: e.clientY,
@@ -354,13 +355,13 @@ const onDragMove = (e) => {
   })
   
   // 通知父组件位置变化
-  emit('update:position', { left: newLeft, top: newTop })
+  emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, { areaId: props.id, left: newLeft, top: newTop })
 }
 
 // 拖拽结束
 const onDragEnd = () => {
   // 通知父组件拖拽结束
-  emit('areaDragEnd', {
+  emitEvent(EVENT_TYPES.AREA_DRAG_END, {
     areaId: props.id,
     left: originalPosition.value.left,
     top: originalPosition.value.top
@@ -486,7 +487,8 @@ const onResizeStart = (direction, e) => {
   originalPosition.value.top = newTop
   
   // 通知父组件位置变化
-  emit('update:position', {
+  emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+    areaId: props.id,
     left: newLeft,
     top: newTop
   })
@@ -520,17 +522,23 @@ const onToggleMaximize = () => {
     // 从最大化状态还原时，恢复到保存的位置和大小
     originalPosition.value = { ...maximizedFromPosition.value }
     // 通知父组件位置变化
-    emit('update:position', {
+    emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+      areaId: props.id,
       left: originalPosition.value.left,
       top: originalPosition.value.top
     })
   }
   
   localState.value = next
-  emit('update:WindowState', next)
+  emitEvent(EVENT_TYPES.WINDOW_STATE_CHANGE, {
+    areaId: props.id,
+    state: next
+  })
 }
 
-const onClose = () => emit('close')
+const onClose = () => emitEvent(EVENT_TYPES.PANEL_CLOSE_REQUEST, {
+  areaId: props.id
+})
 
 // 组件挂载后获取父容器引用并初始化位置
 onMounted(() => {
@@ -561,7 +569,8 @@ onMounted(() => {
     originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
     
     // 通知父组件位置变化
-    emit('update:position', {
+    emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
+      areaId: props.id,
       left: originalPosition.value.left,
       top: originalPosition.value.top
     })
@@ -644,7 +653,7 @@ const mergeAreaContent = (sourceArea) => {
       }
       
       // 触发事件通知父组件将源Area保存到隐藏列表
-      emit('area-merged', {
+      emitEvent(EVENT_TYPES.AREA_MERGED, {
         sourceArea: sourceArea,
         targetAreaId: props.id,
         targetAreaHasContent: false, // 目标Area为空
@@ -703,7 +712,7 @@ const mergeAreaContent = (sourceArea) => {
       }
       
       // 触发事件通知父组件将源Area及其TabPage组件保存到隐藏列表
-      emit('area-merged', {
+      emitEvent(EVENT_TYPES.AREA_MERGED, {
         sourceArea: sourceArea,
         targetAreaId: props.id,
         targetAreaHasContent: true, // 目标Area已有内容