修复运行异常
This commit is contained in:
@@ -79,7 +79,11 @@ const mainAreaConfig = ref({
|
||||
id: 'MainArea',
|
||||
title: '主区域',
|
||||
windowState: windowState.value,
|
||||
showTitleBar: false
|
||||
showTitleBar: false,
|
||||
children: {
|
||||
type: 'TabPage',
|
||||
children: []
|
||||
}
|
||||
})
|
||||
|
||||
// 浮动区域列表 - 每个area包含panels数组
|
||||
@@ -102,7 +106,27 @@ const mainAreaResizeBars = ref([])
|
||||
// 检查主区域内是否有其他Area(简化版)
|
||||
const hasAreasInMainContent = ref(false)
|
||||
|
||||
// Area相关事件处理
|
||||
const shouldOperateAreaInsteadOfPanel = (areaId) => {
|
||||
const area = floatingAreas.value.find(a => a.id === areaId);
|
||||
if (!area) return false;
|
||||
|
||||
const childrenArray = Array.isArray(area.children) ? area.children : [area.children];
|
||||
if (childrenArray.length !== 1) return false;
|
||||
|
||||
const tabPage = childrenArray[0];
|
||||
if (tabPage.type !== 'TabPage') return false;
|
||||
|
||||
const tabPageChildren = tabPage.children;
|
||||
const tabPageChildrenArray = Array.isArray(tabPageChildren) ? tabPageChildren : [tabPageChildren];
|
||||
if (tabPageChildrenArray.length !== 1) return false;
|
||||
|
||||
// 检查TabPage的children是否是Panel组件
|
||||
const childItem = tabPageChildrenArray[0];
|
||||
if (childItem.type !== 'Panel') return false;
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const onCloseFloatingArea = (event) => {
|
||||
const id = event.areaId;
|
||||
areaActions.closeFloatingArea(id);
|
||||
@@ -124,27 +148,55 @@ const onUpdatePosition = (event) => {
|
||||
|
||||
const onMaximize = (event) => {
|
||||
const panelId = event.panelId;
|
||||
areaActions.toggleMaximize(panelId);
|
||||
const areaId = event.areaId;
|
||||
|
||||
if (shouldOperateAreaInsteadOfPanel(areaId)) {
|
||||
areaActions.toggleMaximize(areaId);
|
||||
} else {
|
||||
panelActions.maximize(panelId);
|
||||
}
|
||||
};
|
||||
|
||||
const onClosePanel = (event) => {
|
||||
const onPanelClose = (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) {
|
||||
// 移除对应面板
|
||||
for (const child of area.children) {
|
||||
if (child.type === 'TabPage' && child.children && child.children.type === 'Panel') {
|
||||
const panels = child.children.items || [];
|
||||
const panelIndex = panels.findIndex(p => p.id === panelId);
|
||||
if (panelIndex !== -1) {
|
||||
panels.splice(panelIndex, 1);
|
||||
// 如果没有面板了,移除整个TabPage
|
||||
if (panels.length === 0) {
|
||||
const tabPageIndex = area.children.indexOf(child);
|
||||
if (tabPageIndex !== -1) {
|
||||
area.children.splice(tabPageIndex, 1);
|
||||
|
||||
if (shouldOperateAreaInsteadOfPanel(areaId)) {
|
||||
onCloseFloatingArea({ areaId });
|
||||
} else {
|
||||
areaActions.closePanel(areaId, panelId);
|
||||
const area = floatingAreas.value.find(a => a.id === areaId);
|
||||
if (area && area.children) {
|
||||
for (const child of area.children) {
|
||||
if (child.type === 'TabPage' && child.children) {
|
||||
// 处理TabPage的children,可能是单个Panel或Panel数组
|
||||
const isArray = Array.isArray(child.children);
|
||||
const childrenArray = isArray ? child.children : [child.children];
|
||||
|
||||
// 检查每个子项是否为Panel组件
|
||||
for (let i = 0; i < childrenArray.length; i++) {
|
||||
const item = childrenArray[i];
|
||||
if (item.type === 'Panel' && item.id === panelId) {
|
||||
// 从数组中移除Panel
|
||||
if (isArray) {
|
||||
child.children.splice(i, 1);
|
||||
} else {
|
||||
// 如果是单个Panel,移除整个TabPage
|
||||
const tabPageIndex = area.children.indexOf(child);
|
||||
if (tabPageIndex !== -1) {
|
||||
area.children.splice(tabPageIndex, 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// 如果Panel数组为空,移除TabPage
|
||||
if (child.children.length === 0) {
|
||||
const tabPageIndex = area.children.indexOf(child);
|
||||
if (tabPageIndex !== -1) {
|
||||
area.children.splice(tabPageIndex, 1);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
@@ -170,7 +222,70 @@ const handleAreaDragOver = (event) => {
|
||||
};
|
||||
|
||||
const handleAreaDragLeave = (event) => {
|
||||
globalEventActions.handleDragLeave('floating-area', event);
|
||||
globalEventActions.handleDragLeave('floating-area');
|
||||
};
|
||||
|
||||
const onPanelDragStart = (event) => {
|
||||
const areaId = event.areaId;
|
||||
if (shouldOperateAreaInsteadOfPanel(areaId)) {
|
||||
const area = floatingAreas.value.find(a => a.id === areaId);
|
||||
const startLeft = area ? (area.x || 0) : 0;
|
||||
const startTop = area ? (area.y || 0) : 0;
|
||||
|
||||
eventBus.emit(EVENT_TYPES.AREA_DRAG_START, {
|
||||
dragId: event.dragId,
|
||||
areaId: areaId,
|
||||
event: {
|
||||
clientX: event.position.x,
|
||||
clientY: event.position.y
|
||||
},
|
||||
element: null,
|
||||
position: event.position,
|
||||
clientX: event.position.x,
|
||||
clientY: event.position.y,
|
||||
startLeft: startLeft,
|
||||
startTop: startTop,
|
||||
timestamp: event.timestamp
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onPanelDragMove = (event) => {
|
||||
const areaId = event.areaId;
|
||||
if (shouldOperateAreaInsteadOfPanel(areaId)) {
|
||||
eventBus.emit(EVENT_TYPES.AREA_DRAG_MOVE, {
|
||||
dragId: event.dragId,
|
||||
areaId: areaId,
|
||||
event: {
|
||||
clientX: event.position.x,
|
||||
clientY: event.position.y
|
||||
},
|
||||
position: event.position,
|
||||
clientX: event.position.x,
|
||||
clientY: event.position.y,
|
||||
timestamp: event.timestamp
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onPanelDragEnd = (event) => {
|
||||
const areaId = event.areaId;
|
||||
if (shouldOperateAreaInsteadOfPanel(areaId)) {
|
||||
const area = floatingAreas.value.find(a => a.id === areaId);
|
||||
const left = area ? (area.x || 0) : 0;
|
||||
const top = area ? (area.y || 0) : 0;
|
||||
|
||||
eventBus.emit(EVENT_TYPES.AREA_DRAG_END, {
|
||||
dragId: event.dragId,
|
||||
areaId: areaId,
|
||||
finalPosition: {
|
||||
x: left,
|
||||
y: top
|
||||
},
|
||||
left: left,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 其他事件处理方法
|
||||
@@ -285,9 +400,12 @@ const setupEventListeners = () => {
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_COLLAPSE, () => emit('toggleCollapse'), { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE, onMaximize, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE_REQUEST, onCloseFloatingArea, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE, onClosePanel, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_CLOSE, onPanelClose, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_TOGGLE_TOOLBAR, () => emit('toggleToolbar'), { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_MAXIMIZE_SYNC, onPanelMaximizeSync, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_START, onPanelDragStart, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_MOVE, onPanelDragMove, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.PANEL_DRAG_END, onPanelDragEnd, { componentId: 'dock-layout' }));
|
||||
|
||||
// Resize相关事件
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.RESIZE_START, () => emit('dragStart'), { componentId: 'dock-layout' }));
|
||||
@@ -300,8 +418,8 @@ const setupEventListeners = () => {
|
||||
}, { componentId: 'dock-layout' }));
|
||||
|
||||
// 自定义事件
|
||||
unsubscribeFunctions.push(eventBus.on('area-merged', onAreaMerged, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on('dock-zone-active', (event) => onDockZoneActive(event.zoneId), { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.AREA_MERGED, onAreaMerged, { componentId: 'dock-layout' }));
|
||||
unsubscribeFunctions.push(eventBus.on(EVENT_TYPES.DOCK_ZONE_ACTIVE, (event) => onDockZoneActive(event.zoneId), { componentId: 'dock-layout' }));
|
||||
|
||||
return unsubscribeFunctions;
|
||||
};
|
||||
@@ -314,6 +432,11 @@ const cleanup = () => {
|
||||
// 清理事件监听器和其他资源
|
||||
console.log('🧹 开始清理DockLayout资源');
|
||||
|
||||
// 清理事件监听器
|
||||
console.log('🔇 开始清理事件监听器');
|
||||
unsubscribeFunctions.value.forEach(unsubscribe => unsubscribe());
|
||||
unsubscribeFunctions.value = [];
|
||||
|
||||
// 清理浮动区域
|
||||
floatingAreas.value = [];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user