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

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

@@ -10,32 +10,29 @@
style="z-index: 9999;"
/>
<!-- 主区域 - 添加ref引用 -->
<Area
ref="mainAreaRef"
:windowState="windowState"
:showTitleBar="false"
title="主区域"
@dragover="handleMainAreaDragOver"
@dragleave="handleMainAreaDragLeave"
@area-merged="onAreaMerged"
>
<div class="main-content-container" style="position: relative; width: 100%; height: 100%;">
<ResizeBar
v-for="resizeBar in mainAreaResizeBars"
:key="resizeBar.id"
:target-id="resizeBar.targetId"
:direction="resizeBar.direction"
:min-size="resizeBar.minSize"
:max-size="resizeBar.maxSize"
:initial-size="resizeBar.initialSize"
@resize="(size) => handleMainAreaResizeBar(resizeBar.id, size)"
@resize-start="() => handleMainAreaResizeBarStart(resizeBar.id)"
@resize-end="() => handleMainAreaResizeBarEnd(resizeBar.id)"
:style="getMainAreaResizeBarStyle(resizeBar)"
/>
</div>
</Area>
<!-- 主区域使用Render组件统一渲染 -->
<div class="main-area-container" style="position: relative; width: 100%; height: 100%;">
<Render
:type="'Area'"
:config="mainAreaConfig"
ref="mainAreaRef"
/>
<!-- ResizeBar直接渲染在主区域容器中 -->
<ResizeBar
v-for="resizeBar in mainAreaResizeBars"
:key="resizeBar.id"
:target-id="resizeBar.targetId"
:direction="resizeBar.direction"
:min-size="resizeBar.minSize"
:max-size="resizeBar.maxSize"
:initial-size="resizeBar.initialSize"
@resize="(size) => handleMainAreaResizeBar(resizeBar.id, size)"
@resize-start="() => handleMainAreaResizeBarStart(resizeBar.id)"
@resize-end="() => handleMainAreaResizeBarEnd(resizeBar.id)"
:style="getMainAreaResizeBarStyle(resizeBar)"
/>
</div>
<!-- 浮动区域使用Render组件统一渲染 -->
<Render
@@ -44,27 +41,6 @@
:type="'Area'"
:config="area"
: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>
</template>
@@ -78,11 +54,13 @@ import DockIndicator from './DockIndicator.vue';
import ResizeBar from './ResizeBar.vue';
import Render from './Render.vue';
import { zIndexManager } from './dockLayers.js';
import { eventBus, EVENT_TYPES } from './eventBus.js';
// 导入事件处理器
import { areaActions } from './handlers/AreaHandler.js';
import { dragStateActions } from './handlers/DragStateManager.js';
import { panelActions } from './handlers/PanelHandler.js';
import { tabPageActions } from './handlers/TabPageHandler.js';
import { globalEventActions } from './handlers/GlobalEventManager.js';
// 定义组件可以发出的事件
@@ -98,6 +76,14 @@ const emit = defineEmits([
// 主区域状态
const windowState = ref('最大化')
// 主区域配置
const mainAreaConfig = ref({
id: 'MainArea',
title: '主区域',
windowState: windowState.value,
showTitleBar: false
})
// 浮动区域列表 - 每个area包含panels数组
const floatingAreas = ref([])
@@ -131,36 +117,36 @@ const onPanelDragEnd = () => {
dragStateActions.onPanelDragEnd();
};
const onPanelDragStartFromTabPage = (areaId, event) => {
dragStateActions.onPanelDragStartFromTabPage(areaId, event);
const onPanelDragStartFromTabPage = (event) => {
dragStateActions.onPanelDragStartFromTabPage(event.areaId, event);
};
const onPanelDragMoveFromTabPage = (areaId, event) => {
dragStateActions.onPanelDragMoveFromTabPage(areaId, event);
const onPanelDragMoveFromTabPage = (event) => {
dragStateActions.onPanelDragMoveFromTabPage(event.areaId, event);
};
const onPanelDragEndFromTabPage = () => {
dragStateActions.onPanelDragEndFromTabPage();
};
const onAreaDragStart = (areaId, event) => {
dragStateActions.onAreaDragStart(areaId, event);
const onAreaDragStart = (event) => {
dragStateActions.onAreaDragStart(event.areaId, event);
};
const onAreaDragMove = (areaId, event) => {
dragStateActions.onAreaDragMove(areaId, event);
const onAreaDragMove = (event) => {
dragStateActions.onAreaDragMove(event.areaId, event);
};
const onAreaDragEnd = (areaId, event) => {
dragStateActions.onAreaDragEnd(areaId, event);
const onAreaDragEnd = (event) => {
dragStateActions.onAreaDragEnd(event.areaId, event);
};
const onTabDragStart = (areaId, event) => {
dragStateActions.onTabDragStart(areaId, event);
const onTabDragStart = (event) => {
dragStateActions.onTabDragStart(event.areaId, event);
};
const onTabDragMove = (areaId, event) => {
dragStateActions.onTabDragMove(areaId, event);
const onTabDragMove = (event) => {
dragStateActions.onTabDragMove(event.areaId, event);
};
const onTabDragEnd = () => {
@@ -168,7 +154,8 @@ const onTabDragEnd = () => {
};
// Area相关事件处理
const onCloseFloatingArea = (id) => {
const onCloseFloatingArea = (event) => {
const id = event.areaId;
areaActions.closeFloatingArea(id);
const index = floatingAreas.value.findIndex(a => a.id === id);
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);
if (area) {
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);
};
const onClosePanel = (areaId, panelId) => {
const onClosePanel = (event) => {
const areaId = event.areaId;
const panelId = event.panelId;
areaActions.closePanel(areaId, panelId);
const area = floatingAreas.value.find(a => a.id === areaId);
if (area && area.children) {
@@ -228,8 +220,8 @@ const handleAreaDragOver = (event) => {
globalEventActions.handleDragOver('floating-area', event);
};
const handleAreaDragLeave = () => {
globalEventActions.handleDragLeave('floating-area');
const handleAreaDragLeave = (event) => {
globalEventActions.handleDragLeave('floating-area', event);
};
// 其他事件处理方法
@@ -238,23 +230,37 @@ const onDockZoneActive = (zone) => {
};
const onPanelMaximizeSync = ({ areaId, maximized }) => {
panelActions.syncMaximizeState(areaId, maximized);
// 使用areaActions.updateState来更新区域的最大化状态
areaActions.updateState(areaId, { maximized });
};
const onAreaMerged = () => {
areaActions.handleAreaMerged();
const onAreaMerged = (event) => {
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) => {
panelActions.handleTabClose(data);
const onTabClose = async (data) => {
try {
await tabPageActions.requestClose(data.tabPageId, data.areaId);
} catch (error) {
console.error('Failed to handle tab close:', error);
}
};
const onTabAdd = (data) => {
panelActions.handleTabAdd(data);
const onTabAdd = async (data) => {
try {
await tabPageActions.create(data.areaId, data.config);
} catch (error) {
console.error('Failed to handle tab add:', error);
}
};
// ResizeBar相关处理方法
@@ -279,9 +285,51 @@ const hideEdgeIndicators = computed(() => {
return !hasAreasInMainContent.value;
});
// 简化的事件监听器设置
// 设置事件总线监听器
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(() => {
// 初始化轻量级状态
console.log('DockLayout component mounted');
setupEventListeners();
})
// 组件卸载时清理资源
@@ -426,6 +475,8 @@ onUnmounted(() => {
// 清理事件监听器和其他资源
console.log('DockLayout component unmounted');
cleanup();
// 移除事件总线监听器
eventBus.offAll();
})
// 暴露轻量级接口给父组件