ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化事件总线

Browse Source
This commit is contained in:
zqm
2025-12-15 09:03:32 +08:00
parent 7d92e0b6b1
commit 4ca836df37
7 changed files with 237 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue
View File

@@ -132,7 +132,8 @@
</template> </template>
<script setup> <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 TabPage from './TabPage.vue'
import Panel from './Panel.vue' import Panel from './Panel.vue'
import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers.js' import { zIndexManager, Z_INDEX_LAYERS } from './dockLayers.js'
@@ -254,7 +255,7 @@ const areaStyle = computed(() => {
return style 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的最大化事件 // 处理Panel的最大化事件
const onPanelMaximize = (panelId) => { const onPanelMaximize = (panelId) => {
@@ -271,18 +272,18 @@ const onPanelMaximize = (panelId) => {
} else { } else {
// // console.log('🔸 非单Panel模式，转发到父组件') // // console.log('🔸 非单Panel模式，转发到父组件')
// 如果不是单Panel，转发给父组件处理 // 如果不是单Panel，转发给父组件处理
emit('maximize', panelId) emitEvent(EVENT_TYPES.PANEL_MAXIMIZE, { panelId, areaId: props.id })
} }
} }
// 处理拖拽悬停事件 // 处理拖拽悬停事件
const handleDragOver = (event) => { const handleDragOver = (event) => {
emit('dragover', event, props.id) emitEvent(EVENT_TYPES.AREA_DRAG_OVER, { event, areaId: props.id })
} }
// 处理拖拽离开事件 // 处理拖拽离开事件
const handleDragLeave = (event) => { 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, areaId: props.id,
clientX: e.clientX, clientX: e.clientX,
clientY: e.clientY, clientY: e.clientY,
@@ -345,7 +346,7 @@ const onDragMove = (e) => {
originalPosition.value.top = newTop originalPosition.value.top = newTop
// 通知父组件拖拽移动 // 通知父组件拖拽移动
emit('areaDragMove', { emitEvent(EVENT_TYPES.AREA_DRAG_MOVE, {
areaId: props.id, areaId: props.id,
clientX: e.clientX, clientX: e.clientX,
clientY: e.clientY, 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 = () => { const onDragEnd = () => {
// 通知父组件拖拽结束 // 通知父组件拖拽结束
emit('areaDragEnd', { emitEvent(EVENT_TYPES.AREA_DRAG_END, {
areaId: props.id, areaId: props.id,
left: originalPosition.value.left, left: originalPosition.value.left,
top: originalPosition.value.top top: originalPosition.value.top
@@ -486,7 +487,8 @@ const onResizeStart = (direction, e) => {
originalPosition.value.top = newTop originalPosition.value.top = newTop
// 通知父组件位置变化 // 通知父组件位置变化
emit('update:position', { emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: newLeft, left: newLeft,
top: newTop top: newTop
}) })
@@ -520,17 +522,23 @@ const onToggleMaximize = () => {
// 从最大化状态还原时，恢复到保存的位置和大小 // 从最大化状态还原时，恢复到保存的位置和大小
originalPosition.value = { ...maximizedFromPosition.value } originalPosition.value = { ...maximizedFromPosition.value }
// 通知父组件位置变化 // 通知父组件位置变化
emit('update:position', { emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left, left: originalPosition.value.left,
top: originalPosition.value.top top: originalPosition.value.top
}) })
} }
localState.value = next 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(() => { onMounted(() => {
@@ -561,7 +569,8 @@ onMounted(() => {
originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2) originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
// 通知父组件位置变化 // 通知父组件位置变化
emit('update:position', { emitEvent(EVENT_TYPES.AREA_POSITION_UPDATE, {
areaId: props.id,
left: originalPosition.value.left, left: originalPosition.value.left,
top: originalPosition.value.top top: originalPosition.value.top
}) })
@@ -644,7 +653,7 @@ const mergeAreaContent = (sourceArea) => {
} }
// 触发事件通知父组件将源Area保存到隐藏列表 // 触发事件通知父组件将源Area保存到隐藏列表
emit('area-merged', { emitEvent(EVENT_TYPES.AREA_MERGED, {
sourceArea: sourceArea, sourceArea: sourceArea,
targetAreaId: props.id, targetAreaId: props.id,
targetAreaHasContent: false, // 目标Area为空 targetAreaHasContent: false, // 目标Area为空
@@ -703,7 +712,7 @@ const mergeAreaContent = (sourceArea) => {
} }
// 触发事件通知父组件将源Area及其TabPage组件保存到隐藏列表 // 触发事件通知父组件将源Area及其TabPage组件保存到隐藏列表
emit('area-merged', { emitEvent(EVENT_TYPES.AREA_MERGED, {
sourceArea: sourceArea, sourceArea: sourceArea,
targetAreaId: props.id, targetAreaId: props.id,
targetAreaHasContent: true, // 目标Area已有内容 targetAreaHasContent: true, // 目标Area已有内容

7
AutoRobot/Windows/Robot/Web/src/DockLayout/DockIndicator.vue
View File

@@ -437,7 +437,8 @@
</template> </template>
<script setup> <script setup>
import { computed, watch, ref, onUnmounted } from 'vue' import { computed, watch, ref, onUnmounted, defineProps } from 'vue'
import { emitEvent } from './eventBus.js'
const props = defineProps({ const props = defineProps({
visible: Boolean, visible: Boolean,
@@ -711,11 +712,11 @@ const enhancedPreviewAreaStyle = computed(() => {
}) })
// 定义事件 // 定义事件
const emit = defineEmits(['zone-active']) // 使用事件总线替代直接emit
// 监听activeDockZone变化，触发事件 // 监听activeDockZone变化，触发事件
watch(activeDockZone, (newZone) => { watch(activeDockZone, (newZone) => {
emit('zone-active', newZone) emitEvent('dock-zone-active', { zoneId: newZone })
}) })
</script> </script>

177
AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
View File

@@ -10,17 +10,15 @@
style="z-index: 9999;" style="z-index: 9999;"
/> />
<!-- 主区域 - 添加ref引用 --> <!-- 主区域使用Render组件统一渲染 -->
<Area <div class="main-area-container" style="position: relative; width: 100%; height: 100%;">
<Render
:type="'Area'"
:config="mainAreaConfig"
ref="mainAreaRef" ref="mainAreaRef"
:windowState="windowState" />
:showTitleBar="false"
title="主区域" <!-- ResizeBar直接渲染在主区域容器中 -->
@dragover="handleMainAreaDragOver"
@dragleave="handleMainAreaDragLeave"
@area-merged="onAreaMerged"
>
<div class="main-content-container" style="position: relative; width: 100%; height: 100%;">
<ResizeBar <ResizeBar
v-for="resizeBar in mainAreaResizeBars" v-for="resizeBar in mainAreaResizeBars"
:key="resizeBar.id" :key="resizeBar.id"
@@ -35,7 +33,6 @@
:style="getMainAreaResizeBarStyle(resizeBar)" :style="getMainAreaResizeBarStyle(resizeBar)"
/> />
</div> </div>
</Area>
<!-- 浮动区域使用Render组件统一渲染 --> <!-- 浮动区域使用Render组件统一渲染 -->
<Render <Render
@@ -44,27 +41,6 @@
:type="'Area'" :type="'Area'"
:config="area" :config="area"
:style="{ zIndex: area.zIndex || zIndexManager.getFloatingAreaZIndex(area.id) }" :style="{ zIndex: area.zIndex || zIndexManager.getFloatingAreaZIndex(area.id) }"
@close="() => onCloseFloatingArea(area.id)"
@update:position="(position) => onUpdatePosition(area.id, position)"
@panelMaximizeSync="onPanelMaximizeSync"
@areaDragStart="(event) => onAreaDragStart(area.id, event)"
@areaDragMove="(event) => onAreaDragMove(area.id, event)"
@areaDragEnd="(event) => onAreaDragEnd(area.id, event)"
@tab-change="onTabChange"
@tab-close="onTabClose"
@tab-add="onTabAdd"
@tabDragStart="(event) => onTabDragStart(area.id, event)"
@tabDragMove="(event) => onTabDragMove(area.id, event)"
@tabDragEnd="onTabDragEnd"
@toggleCollapse="(panelId) => $emit('toggleCollapse', panelId)"
@maximize="(panelId) => onMaximize(panelId)"
@closePanel="(panelId) => onClosePanel(area.id, panelId)"
@toggleToolbar="(panelId) => $emit('toggleToolbar', panelId)"
@dragStart="(event) => onPanelDragStartFromTabPage(area.id, event)"
@dragMove="(event) => onPanelDragMoveFromTabPage(area.id, event)"
@dragEnd="onPanelDragEndFromTabPage"
@dragover="handleAreaDragOver"
@dragleave="handleAreaDragLeave"
/> />
</div> </div>
</template> </template>
@@ -78,11 +54,13 @@ import DockIndicator from './DockIndicator.vue';
import ResizeBar from './ResizeBar.vue'; import ResizeBar from './ResizeBar.vue';
import Render from './Render.vue'; import Render from './Render.vue';
import { zIndexManager } from './dockLayers.js'; import { zIndexManager } from './dockLayers.js';
import { eventBus, EVENT_TYPES } from './eventBus.js';
// 导入事件处理器 // 导入事件处理器
import { areaActions } from './handlers/AreaHandler.js'; import { areaActions } from './handlers/AreaHandler.js';
import { dragStateActions } from './handlers/DragStateManager.js'; import { dragStateActions } from './handlers/DragStateManager.js';
import { panelActions } from './handlers/PanelHandler.js'; import { panelActions } from './handlers/PanelHandler.js';
import { tabPageActions } from './handlers/TabPageHandler.js';
import { globalEventActions } from './handlers/GlobalEventManager.js'; import { globalEventActions } from './handlers/GlobalEventManager.js';
// 定义组件可以发出的事件 // 定义组件可以发出的事件
@@ -98,6 +76,14 @@ const emit = defineEmits([
// 主区域状态 // 主区域状态
const windowState = ref('最大化') const windowState = ref('最大化')
// 主区域配置
const mainAreaConfig = ref({
id: 'MainArea',
title: '主区域',
windowState: windowState.value,
showTitleBar: false
})
// 浮动区域列表 - 每个area包含panels数组 // 浮动区域列表 - 每个area包含panels数组
const floatingAreas = ref([]) const floatingAreas = ref([])
@@ -131,36 +117,36 @@ const onPanelDragEnd = () => {
dragStateActions.onPanelDragEnd(); dragStateActions.onPanelDragEnd();
}; };
const onPanelDragStartFromTabPage = (areaId, event) => { const onPanelDragStartFromTabPage = (event) => {
dragStateActions.onPanelDragStartFromTabPage(areaId, event); dragStateActions.onPanelDragStartFromTabPage(event.areaId, event);
}; };
const onPanelDragMoveFromTabPage = (areaId, event) => { const onPanelDragMoveFromTabPage = (event) => {
dragStateActions.onPanelDragMoveFromTabPage(areaId, event); dragStateActions.onPanelDragMoveFromTabPage(event.areaId, event);
}; };
const onPanelDragEndFromTabPage = () => { const onPanelDragEndFromTabPage = () => {
dragStateActions.onPanelDragEndFromTabPage(); dragStateActions.onPanelDragEndFromTabPage();
}; };
const onAreaDragStart = (areaId, event) => { const onAreaDragStart = (event) => {
dragStateActions.onAreaDragStart(areaId, event); dragStateActions.onAreaDragStart(event.areaId, event);
}; };
const onAreaDragMove = (areaId, event) => { const onAreaDragMove = (event) => {
dragStateActions.onAreaDragMove(areaId, event); dragStateActions.onAreaDragMove(event.areaId, event);
}; };
const onAreaDragEnd = (areaId, event) => { const onAreaDragEnd = (event) => {
dragStateActions.onAreaDragEnd(areaId, event); dragStateActions.onAreaDragEnd(event.areaId, event);
}; };
const onTabDragStart = (areaId, event) => { const onTabDragStart = (event) => {
dragStateActions.onTabDragStart(areaId, event); dragStateActions.onTabDragStart(event.areaId, event);
}; };
const onTabDragMove = (areaId, event) => { const onTabDragMove = (event) => {
dragStateActions.onTabDragMove(areaId, event); dragStateActions.onTabDragMove(event.areaId, event);
}; };
const onTabDragEnd = () => { const onTabDragEnd = () => {
@@ -168,7 +154,8 @@ const onTabDragEnd = () => {
}; };
// Area相关事件处理 // Area相关事件处理
const onCloseFloatingArea = (id) => { const onCloseFloatingArea = (event) => {
const id = event.areaId;
areaActions.closeFloatingArea(id); areaActions.closeFloatingArea(id);
const index = floatingAreas.value.findIndex(a => a.id === id); const index = floatingAreas.value.findIndex(a => a.id === id);
if (index !== -1) { if (index !== -1) {
@@ -176,7 +163,9 @@ const onCloseFloatingArea = (id) => {
} }
}; };
const onUpdatePosition = (id, position) => { const onUpdatePosition = (event) => {
const id = event.areaId;
const position = event;
const area = floatingAreas.value.find(a => a.id === id); const area = floatingAreas.value.find(a => a.id === id);
if (area) { if (area) {
area.x = position.left; area.x = position.left;
@@ -184,11 +173,14 @@ const onUpdatePosition = (id, position) => {
} }
}; };
const onMaximize = (panelId) => { const onMaximize = (event) => {
const panelId = event.panelId;
areaActions.toggleMaximize(panelId); areaActions.toggleMaximize(panelId);
}; };
const onClosePanel = (areaId, panelId) => { const onClosePanel = (event) => {
const areaId = event.areaId;
const panelId = event.panelId;
areaActions.closePanel(areaId, panelId); areaActions.closePanel(areaId, panelId);
const area = floatingAreas.value.find(a => a.id === areaId); const area = floatingAreas.value.find(a => a.id === areaId);
if (area && area.children) { if (area && area.children) {
@@ -228,8 +220,8 @@ const handleAreaDragOver = (event) => {
globalEventActions.handleDragOver('floating-area', event); globalEventActions.handleDragOver('floating-area', event);
}; };
const handleAreaDragLeave = () => { const handleAreaDragLeave = (event) => {
globalEventActions.handleDragLeave('floating-area'); globalEventActions.handleDragLeave('floating-area', event);
}; };
// 其他事件处理方法 // 其他事件处理方法
@@ -238,23 +230,37 @@ const onDockZoneActive = (zone) => {
}; };
const onPanelMaximizeSync = ({ areaId, maximized }) => { const onPanelMaximizeSync = ({ areaId, maximized }) => {
panelActions.syncMaximizeState(areaId, maximized); // 使用areaActions.updateState来更新区域的最大化状态
areaActions.updateState(areaId, { maximized });
}; };
const onAreaMerged = () => { const onAreaMerged = (event) => {
areaActions.handleAreaMerged(); areaActions.handleAreaMerged(event.areaId);
}; };
const onTabChange = (data) => { // 标签页切换事件处理
panelActions.handleTabChange(data); const onTabChange = async (data) => {
try {
await tabPageActions.switch(data.tabPageId, data.areaId, data.fromTabPageId);
} catch (error) {
console.error('Failed to handle tab change:', error);
}
}; };
const onTabClose = (data) => { const onTabClose = async (data) => {
panelActions.handleTabClose(data); try {
await tabPageActions.requestClose(data.tabPageId, data.areaId);
} catch (error) {
console.error('Failed to handle tab close:', error);
}
}; };
const onTabAdd = (data) => { const onTabAdd = async (data) => {
panelActions.handleTabAdd(data); try {
await tabPageActions.create(data.areaId, data.config);
} catch (error) {
console.error('Failed to handle tab add:', error);
}
}; };
// ResizeBar相关处理方法 // ResizeBar相关处理方法
@@ -279,9 +285,51 @@ const hideEdgeIndicators = computed(() => {
return !hasAreasInMainContent.value; return !hasAreasInMainContent.value;
}); });
// 简化的事件监听器设置 // 设置事件总线监听器
const setupEventListeners = () => { const setupEventListeners = () => {
// 可以在这里添加必要的事件监听器 // Area相关事件
eventBus.on(EVENT_TYPES.AREA_DRAG_START, onAreaDragStart)
eventBus.on(EVENT_TYPES.AREA_DRAG_MOVE, onAreaDragMove)
eventBus.on(EVENT_TYPES.AREA_DRAG_END, onAreaDragEnd)
eventBus.on(EVENT_TYPES.AREA_POSITION_UPDATE, onUpdatePosition)
eventBus.on(EVENT_TYPES.AREA_DRAG_OVER, handleAreaDragOver)
eventBus.on(EVENT_TYPES.AREA_DRAG_LEAVE, handleAreaDragLeave)
// Tab相关事件
eventBus.on(EVENT_TYPES.TAB_CHANGE, onTabChange)
eventBus.on(EVENT_TYPES.TAB_CLOSE, onTabClose)
eventBus.on(EVENT_TYPES.TAB_ADD, onTabAdd)
eventBus.on(EVENT_TYPES.TAB_DRAG_START, onTabDragStart)
eventBus.on(EVENT_TYPES.TAB_DRAG_MOVE, onTabDragMove)
eventBus.on(EVENT_TYPES.TAB_DRAG_END, onTabDragEnd)
// Panel相关事件
eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse'))
eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize)
eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea)
eventBus.on(EVENT_TYPES.PANEL_CLOSE, onClosePanel)
eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar'))
eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart)
eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove)
eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd)
eventBus.on(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, onPanelDragStartFromTabPage)
eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, onPanelDragMoveFromTabPage)
eventBus.on(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, onPanelDragEndFromTabPage)
eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync)
// Resize相关事件
eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'))
eventBus.on(EVENT_TYPES.RESIZE_MOVE, () => emit('dragMove'))
eventBus.on(EVENT_TYPES.RESIZE_END, () => emit('dragEnd'))
// Window相关事件
eventBus.on(EVENT_TYPES.WINDOW_STATE_CHANGE, (event) => {
// 处理窗口状态变化
})
// 自定义事件
eventBus.on('area-merged', onAreaMerged)
eventBus.on('dock-zone-active', (event) => onDockZoneActive(event.zoneId))
}; };
// 清理函数 // 清理函数
@@ -419,6 +467,7 @@ const findOrCreateMainAreaTabPage = () => {
onMounted(() => { onMounted(() => {
// 初始化轻量级状态 // 初始化轻量级状态
console.log('DockLayout component mounted'); console.log('DockLayout component mounted');
setupEventListeners();
}) })
// 组件卸载时清理资源 // 组件卸载时清理资源
@@ -426,6 +475,8 @@ onUnmounted(() => {
// 清理事件监听器和其他资源 // 清理事件监听器和其他资源
console.log('DockLayout component unmounted'); console.log('DockLayout component unmounted');
cleanup(); cleanup();
// 移除事件总线监听器
eventBus.offAll();
}) })
// 暴露轻量级接口给父组件 // 暴露轻量级接口给父组件

91
AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue
View File

@@ -24,6 +24,7 @@ import { computed } from 'vue'
import Area from './Area.vue' import Area from './Area.vue'
import TabPage from './TabPage.vue' import TabPage from './TabPage.vue'
import Panel from './Panel.vue' import Panel from './Panel.vue'
import { eventBus, EVENT_TYPES } from './eventBus.js'
// 定义组件属性 // 定义组件属性
const props = defineProps({ const props = defineProps({
@@ -45,19 +46,7 @@ const props = defineProps({
} }
}) })
// 定义事件 // 不再需要定义emit，因为事件将通过事件总线发送
const emit = defineEmits([
// Area事件
'areaDragStart', 'areaDragMove', 'areaDragEnd', 'area-merged',
'toggleCollapse', 'maximize', 'close', 'toggleToolbar',
'dragStart', 'dragMove', 'dragEnd',
// TabPage事件
'tabChange', 'tabClose', 'tabAdd', 'tabDragStart', 'tabDragMove', 'tabDragEnd',
// Panel事件
'panelToggleCollapse', 'panelMaximize', 'panelClose', 'panelToggleToolbar',
// 通用的update事件
'update:windowState', 'update:position'
])
// 根据type计算要渲染的组件 // 根据type计算要渲染的组件
const componentType = computed(() => { const componentType = computed(() => {
@@ -124,43 +113,59 @@ const componentListeners = computed(() => {
// Area组件的事件 // Area组件的事件
allListeners['areaDragStart'] = (event) => { allListeners['areaDragStart'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragStart:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragStart:`, event)
emit('areaDragStart', event) eventBus.emit(EVENT_TYPES.AREA_DRAG_START, { ...event, areaId: props.config.id })
} }
allListeners['areaDragMove'] = (event) => { allListeners['areaDragMove'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragMove:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragMove:`, event)
emit('areaDragMove', event) eventBus.emit(EVENT_TYPES.AREA_DRAG_MOVE, { ...event, areaId: props.config.id })
} }
allListeners['areaDragEnd'] = (event) => { allListeners['areaDragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragEnd:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] areaDragEnd:`, event)
emit('areaDragEnd', event) eventBus.emit(EVENT_TYPES.AREA_DRAG_END, { ...event, areaId: props.config.id })
} }
allListeners['area-merged'] = (event) => { allListeners['area-merged'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] area-merged:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] area-merged:`, event)
emit('area-merged', event) eventBus.emit('area-merged', { ...event, areaId: props.config.id })
} }
allListeners['toggleCollapse'] = (event) => { allListeners['toggleCollapse'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleCollapse:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleCollapse:`, event)
emit('toggleCollapse', event) eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
} }
allListeners['maximize'] = (event) => { allListeners['maximize'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] maximize:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] maximize:`, event)
emit('maximize', event) eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
} }
allListeners['close'] = (event) => { allListeners['close'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] close:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] close:`, event)
emit('close', event) eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
} }
allListeners['toggleToolbar'] = (event) => { allListeners['toggleToolbar'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleToolbar:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] toggleToolbar:`, event)
emit('toggleToolbar', event) eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
} }
allListeners['update:windowState'] = (event) => { allListeners['update:windowState'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] update:windowState:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] update:windowState:`, event)
emit('update:windowState', event) eventBus.emit(EVENT_TYPES.WINDOW_STATE_CHANGE, event)
} }
allListeners['update:position'] = (event) => { allListeners['update:position'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] update:position:`, event) // if (props.debug) console.log(`[Render-Area ${props.config.id}] update:position:`, event)
emit('update:position', event) eventBus.emit(EVENT_TYPES.AREA_POSITION_UPDATE, event)
}
allListeners['dragover'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] dragover:`, event)
eventBus.emit(EVENT_TYPES.AREA_DRAG_OVER, { ...event, areaId: props.config.id })
}
allListeners['dragleave'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] dragleave:`, event)
eventBus.emit(EVENT_TYPES.AREA_DRAG_LEAVE, { ...event, areaId: props.config.id })
}
allListeners['panelMaximizeSync'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] panelMaximizeSync:`, event)
eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, { ...event, areaId: props.config.id })
}
allListeners['closePanel'] = (event) => {
// if (props.debug) console.log(`[Render-Area ${props.config.id}] closePanel:`, event)
eventBus.emit(EVENT_TYPES.PANEL_CLOSE, { ...event, areaId: props.config.id })
} }
} }
@@ -168,55 +173,55 @@ const componentListeners = computed(() => {
// TabPage组件的事件 // TabPage组件的事件
allListeners['tabChange'] = (event) => { allListeners['tabChange'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabChange:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabChange:`, event)
emit('tabChange', event) eventBus.emit(EVENT_TYPES.TAB_CHANGE, { ...event, areaId: props.config.id })
} }
allListeners['tabClose'] = (event) => { allListeners['tabClose'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabClose:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabClose:`, event)
emit('tabClose', event) eventBus.emit(EVENT_TYPES.TAB_CLOSE, { ...event, areaId: props.config.id })
} }
allListeners['tabAdd'] = (event) => { allListeners['tabAdd'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabAdd:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabAdd:`, event)
emit('tabAdd', event) eventBus.emit(EVENT_TYPES.TAB_ADD, { ...event, areaId: props.config.id })
} }
allListeners['tabDragStart'] = (event) => { allListeners['tabDragStart'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragStart:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragStart:`, event)
emit('tabDragStart', event) eventBus.emit(EVENT_TYPES.TAB_DRAG_START, { ...event, areaId: props.config.id })
} }
allListeners['tabDragMove'] = (event) => { allListeners['tabDragMove'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragMove:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragMove:`, event)
emit('tabDragMove', event) eventBus.emit(EVENT_TYPES.TAB_DRAG_MOVE, { ...event, areaId: props.config.id })
} }
allListeners['tabDragEnd'] = (event) => { allListeners['tabDragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragEnd:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] tabDragEnd:`, event)
emit('tabDragEnd', event) eventBus.emit(EVENT_TYPES.TAB_DRAG_END, { ...event, areaId: props.config.id })
} }
allListeners['toggleCollapse'] = (event) => { allListeners['toggleCollapse'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleCollapse:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleCollapse:`, event)
emit('toggleCollapse', event) eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
} }
allListeners['maximize'] = (event) => { allListeners['maximize'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] maximize:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] maximize:`, event)
emit('maximize', event) eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
} }
allListeners['close'] = (event) => { allListeners['close'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] close:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] close:`, event)
emit('close', event) eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
} }
allListeners['toggleToolbar'] = (event) => { allListeners['toggleToolbar'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleToolbar:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] toggleToolbar:`, event)
emit('toggleToolbar', event) eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
} }
allListeners['dragStart'] = (event) => { allListeners['dragStart'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragStart:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragStart:`, event)
emit('dragStart', event) eventBus.emit(EVENT_TYPES.PANEL_DRAG_START_FROM_TABPAGE, { ...event, areaId: props.config.id })
} }
allListeners['dragMove'] = (event) => { allListeners['dragMove'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragMove:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragMove:`, event)
emit('dragMove', event) eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE_FROM_TABPAGE, { ...event, areaId: props.config.id })
} }
allListeners['dragEnd'] = (event) => { allListeners['dragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragEnd:`, event) // if (props.debug) console.log(`[Render-TabPage ${props.config.id}] dragEnd:`, event)
emit('dragEnd', event) eventBus.emit(EVENT_TYPES.PANEL_DRAG_END_FROM_TABPAGE, { ...event, areaId: props.config.id })
} }
} }
@@ -224,31 +229,31 @@ const componentListeners = computed(() => {
// Panel组件的事件 // Panel组件的事件
allListeners['toggleCollapse'] = (event) => { allListeners['toggleCollapse'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleCollapse:`, event) // if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleCollapse:`, event)
emit('panelToggleCollapse', event) eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, { ...event, areaId: props.config.id })
} }
allListeners['maximize'] = (event) => { allListeners['maximize'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] maximize:`, event) // if (props.debug) console.log(`[Render-Panel ${props.config.id}] maximize:`, event)
emit('panelMaximize', event) eventBus.emit(EVENT_TYPES.PANEL_MAXIMIZE, { ...event, areaId: props.config.id })
} }
allListeners['close'] = (event) => { allListeners['close'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] close:`, event) // if (props.debug) console.log(`[Render-Panel ${props.config.id}] close:`, event)
emit('panelClose', event) eventBus.emit(EVENT_TYPES.PANEL_CLOSE_REQUEST, { ...event, areaId: props.config.id })
} }
allListeners['toggleToolbar'] = (event) => { allListeners['toggleToolbar'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleToolbar:`, event) // if (props.debug) console.log(`[Render-Panel ${props.config.id}] toggleToolbar:`, event)
emit('panelToggleToolbar', event) eventBus.emit(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, { ...event, areaId: props.config.id })
} }
allListeners['dragStart'] = (event) => { allListeners['dragStart'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragStart:`, event) // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragStart:`, event)
emit('dragStart', event) eventBus.emit(EVENT_TYPES.PANEL_DRAG_START, { ...event, areaId: props.config.id })
} }
allListeners['dragMove'] = (event) => { allListeners['dragMove'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragMove:`, event) // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragMove:`, event)
emit('dragMove', event) eventBus.emit(EVENT_TYPES.PANEL_DRAG_MOVE, { ...event, areaId: props.config.id })
} }
allListeners['dragEnd'] = (event) => { allListeners['dragEnd'] = (event) => {
// if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragEnd:`, event) // if (props.debug) console.log(`[Render-Panel ${props.config.id}] dragEnd:`, event)
emit('dragEnd', event) eventBus.emit(EVENT_TYPES.PANEL_DRAG_END, { ...event, areaId: props.config.id })
} }
} }

9
AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue
View File

@@ -14,6 +14,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue' import { ref, computed, onMounted, onUnmounted } from 'vue'
import { emitEvent, EVENT_TYPES } from './eventBus.js'
// Props定义 // Props定义
interface Props { interface Props {
@@ -39,7 +40,7 @@ interface Emits {
resizeEnd: [] resizeEnd: []
} }
const emit = defineEmits<Emits>() // 使用事件总线替代直接emit
// 响应式状态 // 响应式状态
const isHovered = ref(false) const isHovered = ref(false)
@@ -79,7 +80,7 @@ const startResize = (event: MouseEvent) => {
startX.value = event.clientX startX.value = event.clientX
startY.value = event.clientY startY.value = event.clientY
emit('resizeStart') emitEvent(EVENT_TYPES.RESIZE_START, { direction: props.direction, targetId: props.targetId })
// 添加全局鼠标事件监听 // 添加全局鼠标事件监听
document.addEventListener('mousemove', handleMouseMove) document.addEventListener('mousemove', handleMouseMove)
@@ -112,7 +113,7 @@ const handleMouseMove = (event: MouseEvent) => {
if (newSize !== currentSize.value) { if (newSize !== currentSize.value) {
currentSize.value = newSize currentSize.value = newSize
emit('resize', newSize) emitEvent(EVENT_TYPES.RESIZE_MOVE, { direction: props.direction, targetId: props.targetId, newSize })
} }
startX.value = event.clientX startX.value = event.clientX
@@ -122,7 +123,7 @@ const handleMouseMove = (event: MouseEvent) => {
// 结束调整大小 // 结束调整大小
const endResize = () => { const endResize = () => {
isResizing.value = false isResizing.value = false
emit('resizeEnd') emitEvent(EVENT_TYPES.RESIZE_END, { direction: props.direction, targetId: props.targetId })
// 移除全局鼠标事件监听 // 移除全局鼠标事件监听
document.removeEventListener('mousemove', handleMouseMove) document.removeEventListener('mousemove', handleMouseMove)

15
AutoRobot/Windows/Robot/Web/src/DockLayout/TabPage.vue
View File

@@ -126,7 +126,8 @@
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits, ref, onMounted, onUnmounted, computed, useSlots } from 'vue' import { defineProps, ref, onMounted, onUnmounted, computed, useSlots } from 'vue'
import { emitEvent, EVENT_TYPES } from './eventBus.js'
const slots = useSlots() const slots = useSlots()
@@ -146,7 +147,7 @@ const props = defineProps({
} }
}) })
const emit = defineEmits(['tabChange', 'tabClose', 'tabAdd', 'tabDragStart', 'tabDragMove', 'tabDragEnd', 'toggleCollapse', 'maximize', 'close', 'toggleToolbar', 'dragStart', 'dragMove', 'dragEnd']) // 使用事件总线替代直接emit
// 当前激活的标签页索引 // 当前激活的标签页索引
const activeTabIndex = ref(-1) const activeTabIndex = ref(-1)
@@ -173,7 +174,7 @@ const setActiveTab = (index) => {
const slotChildren = slots.default ? slots.default() : [] const slotChildren = slots.default ? slots.default() : []
if (index >= 0 && index < slotChildren.length) { if (index >= 0 && index < slotChildren.length) {
activeTabIndex.value = index activeTabIndex.value = index
emit('tabChange', { index, tab: slotChildren[index] }) emitEvent(EVENT_TYPES.TAB_CHANGE, { index, tab: slotChildren[index] })
} }
} }
@@ -187,7 +188,7 @@ onMounted(() => {
// 关闭标签页 // 关闭标签页
const closeTab = (tabId) => { const closeTab = (tabId) => {
emit('tabClose', { id: tabId }) emitEvent(EVENT_TYPES.TAB_CLOSE, { id: tabId })
} }
// 标签拖拽开始 // 标签拖拽开始
@@ -198,7 +199,7 @@ const onTabDragStart = (index, event) => {
dragIndex = index dragIndex = index
// 传递标签页索引和鼠标位置 // 传递标签页索引和鼠标位置
emit('tabDragStart', { emitEvent(EVENT_TYPES.TAB_DRAG_START, {
clientX: event.clientX, clientX: event.clientX,
clientY: event.clientY, clientY: event.clientY,
tabIndex: index, tabIndex: index,
@@ -222,7 +223,7 @@ const onTabDragMove = (event) => {
// 防止文本选择和默认行为 // 防止文本选择和默认行为
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
emit('tabDragMove', { emitEvent(EVENT_TYPES.TAB_DRAG_MOVE, {
clientX: event.clientX, clientX: event.clientX,
clientY: event.clientY, clientY: event.clientY,
tabIndex: dragIndex tabIndex: dragIndex
@@ -234,7 +235,7 @@ const onTabDragMove = (event) => {
const onTabDragEnd = () => { const onTabDragEnd = () => {
if (isDragging) { if (isDragging) {
isDragging = false isDragging = false
emit('tabDragEnd', { tabIndex: dragIndex }) emitEvent(EVENT_TYPES.TAB_DRAG_END, { tabIndex: dragIndex })
dragIndex = -1 dragIndex = -1
// 拖拽结束后移除事件监听器 // 拖拽结束后移除事件监听器

24
AutoRobot/Windows/Robot/Web/src/DockLayout/handlers/DragStateManager.js
View File

@@ -1189,8 +1189,10 @@ class DragStateManager {
}); });
// 设置起始位置 // 设置起始位置
const startX = position.x || event.clientX; const clientX = event?.clientX || eventData.clientX;
const startY = position.y || event.clientY; const clientY = event?.clientY || eventData.clientY;
const startX = position.x || clientX;
const startY = position.y || clientY;
dragState.startPosition = { x: startX, y: startY }; dragState.startPosition = { x: startX, y: startY };
dragState.updatePosition(startX, startY); dragState.updatePosition(startX, startY);
@@ -1250,8 +1252,10 @@ class DragStateManager {
} }
// 更新位置 // 更新位置
const currentX = position.x || event.clientX; const clientX = event?.clientX || eventData.clientX;
const currentY = position.y || event.clientY; const clientY = event?.clientY || eventData.clientY;
const currentX = position.x || clientX;
const currentY = position.y || clientY;
dragState.updatePosition(currentX, currentY); dragState.updatePosition(currentX, currentY);
// 检测目标区域 // 检测目标区域
@@ -1308,8 +1312,10 @@ class DragStateManager {
const dragState = activeDrag.dragState; const dragState = activeDrag.dragState;
// 更新最终位置 // 更新最终位置
const finalX = finalPosition.x || event.clientX; const clientX = event?.clientX || eventData.clientX;
const finalY = finalPosition.y || event.clientY; const clientY = event?.clientY || eventData.clientY;
const finalX = finalPosition.x || clientX;
const finalY = finalPosition.y || clientY;
dragState.updatePosition(finalX, finalY); dragState.updatePosition(finalX, finalY);
// 设置最终状态 // 设置最终状态
@@ -1578,6 +1584,12 @@ class DragStateManager {
// 这里可以实现具体的拖拽目标检测逻辑 // 这里可以实现具体的拖拽目标检测逻辑
// 例如：检测鼠标下的元素类型和区域 // 例如：检测鼠标下的元素类型和区域
// 验证坐标是否为有限值，避免elementFromPoint抛出错误
if (!Number.isFinite(x) || !Number.isFinite(y)) {
console.warn('检测拖拽目标时坐标无效:', { x, y });
return null;
}
// 简化实现：检查坐标是否在预设区域内 // 简化实现：检查坐标是否在预设区域内
const targetAreas = ['main-area', 'floating-area', 'hidden-area']; const targetAreas = ['main-area', 'floating-area', 'hidden-area'];
const detectedArea = targetAreas[Math.floor(Math.random() * targetAreas.length)]; const detectedArea = targetAreas[Math.floor(Math.random() * targetAreas.length)];