diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue index 2bc2459..b042fbe 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Area.vue @@ -132,7 +132,8 @@ diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue index f505125..3bb3453 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue @@ -10,32 +10,29 @@ style="z-index: 9999;" /> - - -
- -
- + +
+ + + + +
@@ -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(); }) // 暴露轻量级接口给父组件 diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue index d754cf0..46c74ce 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/Render.vue @@ -24,6 +24,7 @@ import { computed } from 'vue' import Area from './Area.vue' import TabPage from './TabPage.vue' import Panel from './Panel.vue' +import { eventBus, EVENT_TYPES } from './eventBus.js' // 定义组件属性 const props = defineProps({ @@ -45,19 +46,7 @@ const props = defineProps({ } }) -// 定义事件 -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' -]) +// 不再需要定义emit，因为事件将通过事件总线发送 // 根据type计算要渲染的组件 const componentType = computed(() => { @@ -124,43 +113,59 @@ const componentListeners = computed(() => { // Area组件的事件 allListeners['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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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组件的事件 allListeners['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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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组件的事件 allListeners['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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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) => { // 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 }) } } diff --git a/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue b/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue index 14e3e21..47397dd 100644 --- a/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue +++ b/AutoRobot/Windows/Robot/Web/src/DockLayout/ResizeBar.vue @@ -14,6 +14,7 @@