修复切换页标签后关闭面板会关闭所有面板的异常
This commit is contained in:
@@ -86,6 +86,7 @@ const mainAreaConfig = ref({
|
||||
showTitleBar: false,
|
||||
children: {
|
||||
type: 'TabPage',
|
||||
id: `tabPage-${Date.now()}`,
|
||||
children: []
|
||||
}
|
||||
})
|
||||
@@ -286,6 +287,15 @@ const onPanelClose = (event) => {
|
||||
// 3. 只移除指定的面板,不影响其他面板
|
||||
child.children.splice(i, 1);
|
||||
|
||||
// 发送面板移除事件,通知TabPage组件调整activeTabIndex
|
||||
const tabPageId = child.id || `tabPage-${areaId}`;
|
||||
eventBus.emit(EVENT_TYPES.TABPAGE_PANEL_REMOVED, {
|
||||
tabPageId,
|
||||
removedPanelId: panelId,
|
||||
removedIndex: i,
|
||||
remainingPanelCount: child.children.length
|
||||
}, { componentId: 'dock-layout' });
|
||||
|
||||
// 4. 检查TabPage是否还有子元素
|
||||
// 当child.children为空数组时,认为TabPage没有子元素
|
||||
if (child.children.length === 0) {
|
||||
@@ -535,12 +545,28 @@ const onTabClose = async (data) => {
|
||||
if (Array.isArray(targetTabPage.children)) {
|
||||
targetTabPage.children.splice(panelIndex, 1);
|
||||
console.log(`📌 从TabPage移除Panel后,剩余Panel数量: ${targetTabPage.children.length}`);
|
||||
|
||||
// 发送Panel移除事件,通知TabPage组件调整activeTabIndex
|
||||
eventBus.emit(EVENT_TYPES.TABPAGE_PANEL_REMOVED, {
|
||||
tabPageId,
|
||||
removedPanelId: panelId,
|
||||
removedIndex: panelIndex,
|
||||
remainingPanelCount: targetTabPage.children.length
|
||||
}, { componentId: 'dock-layout' });
|
||||
} else {
|
||||
// 当TabPage只有一个Panel时,我们将children设置为null
|
||||
// 这样shouldShowTabs计算属性会返回false,不显示标签栏
|
||||
// 但TabPage仍然存在
|
||||
targetTabPage.children = null;
|
||||
console.log(`📌 移除了唯一的Panel,TabPage不显示标签栏`);
|
||||
|
||||
// 发送Panel移除事件,通知TabPage组件调整activeTabIndex
|
||||
eventBus.emit(EVENT_TYPES.TABPAGE_PANEL_REMOVED, {
|
||||
tabPageId,
|
||||
removedPanelId: panelId,
|
||||
removedIndex: panelIndex,
|
||||
remainingPanelCount: 0
|
||||
}, { componentId: 'dock-layout' });
|
||||
}
|
||||
|
||||
// 5. 检查TabPage是否还有子元素
|
||||
@@ -874,6 +900,7 @@ const addFloatingPanel = (panel) => {
|
||||
// 使用children结构以兼容Render组件的渲染逻辑
|
||||
children: {
|
||||
type: 'TabPage',
|
||||
id: `tabPage-${areaId}`,
|
||||
tabPosition: ['top', 'right', 'bottom', 'left'][Math.floor(Math.random() * 4)],
|
||||
children: [
|
||||
{
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { emitEvent, EVENT_TYPES } from './eventBus'
|
||||
import { emitEvent, eventBus, EVENT_TYPES } from './eventBus'
|
||||
import Render from './Render.vue'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -215,6 +215,37 @@ onMounted(() => {
|
||||
setActiveTab(0)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听面板移除事件,调整activeTabIndex
|
||||
const unsubscribe = eventBus.on(EVENT_TYPES.TABPAGE_PANEL_REMOVED, (data) => {
|
||||
if (data.tabPageId === props.id) {
|
||||
console.log(`[TabPage:${props.id}] 收到Panel移除事件:`, data);
|
||||
|
||||
if (data.remainingPanelCount === 0) {
|
||||
// 如果移除后没有Panel了,重置activeTabIndex
|
||||
activeTabIndex.value = -1;
|
||||
console.log(` → 没有Panel了,重置activeTabIndex为-1`);
|
||||
} else if (activeTabIndex.value >= data.remainingPanelCount) {
|
||||
// 如果当前激活的索引超出范围,调整为最后一个
|
||||
const oldIndex = activeTabIndex.value;
|
||||
activeTabIndex.value = data.remainingPanelCount - 1;
|
||||
console.log(` → 激活索引${oldIndex}超出范围,调整为${activeTabIndex.value}`);
|
||||
} else if (activeTabIndex.value > data.removedIndex) {
|
||||
// 如果当前激活的索引在移除的索引之后,需要减1
|
||||
const oldIndex = activeTabIndex.value;
|
||||
activeTabIndex.value -= 1;
|
||||
console.log(` → 激活索引在移除索引之后,从${oldIndex}调整为${activeTabIndex.value}`);
|
||||
}
|
||||
// 如果当前激活的索引在移除的索引之前,不需要调整
|
||||
console.log(` → 调整后的activeTabIndex: ${activeTabIndex.value}`);
|
||||
}
|
||||
}, { componentId: 'tabpage' });
|
||||
|
||||
// 保存取消订阅函数,在组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
unsubscribe();
|
||||
console.log(`[TabPage:${props.id}] 已清理Panel移除事件监听`);
|
||||
});
|
||||
})
|
||||
|
||||
// 关闭标签页
|
||||
|
||||
@@ -177,6 +177,9 @@ export const EVENT_TYPES = {
|
||||
TABPAGE_DRAG_END: 'tabpage.drag.end',
|
||||
TABPAGE_DRAG_CANCEL: 'tabpage.drag.cancel',
|
||||
|
||||
// 标签页面板移除事件
|
||||
TABPAGE_PANEL_REMOVED: 'tabpage.panel.removed',
|
||||
|
||||
INDICATOR_SHOW: 'indicator.show',
|
||||
INDICATOR_HIDE: 'indicator.hide',
|
||||
INDICATOR_UPDATE: 'indicator.update',
|
||||
|
||||
@@ -206,6 +206,8 @@ class PanelEventHandler {
|
||||
panelState.closed = true
|
||||
panelState.closedAt = Date.now()
|
||||
panelState.areaId = areaId
|
||||
}else{
|
||||
console.warn(`[PanelHandler] 未找到Panel状态: ${panelId}`)
|
||||
}
|
||||
|
||||
// 触发关闭事件
|
||||
|
||||
Reference in New Issue
Block a user