fix: 统一使用事件总线,修复模态框不自动消失的问题

This commit is contained in:
Baobhan Sith
2025-05-10 13:15:54 +08:00
parent 87375c6e85
commit 9ec75c0fdd
3 changed files with 24 additions and 5 deletions
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { defineProps, defineEmits, watch } from 'vue';
import { defineProps, defineEmits, watch, onMounted, onBeforeUnmount } from 'vue';
import QuickCommandsView from '../views/QuickCommandsView.vue'; // 导入视图
import { useWorkspaceEventSubscriber } from '../composables/workspaceEvents'; // 导入事件订阅器
const props = defineProps<{
isVisible: boolean;
@@ -36,12 +37,22 @@ watch(() => props.isVisible, (newValue) => {
}
});
const onWorkspaceEvent = useWorkspaceEventSubscriber(); // 获取事件订阅器
// Clean up listener on unmount (though v-if usually handles this)
import { onUnmounted } from 'vue';
onUnmounted(() => {
document.removeEventListener('keydown', handleKeydown);
});
onMounted(() => {
// 监听 terminal:sendCommand 事件以关闭模态框
onWorkspaceEvent('terminal:sendCommand', () => {
console.log('[QuickCommandsModal] Received terminal:sendCommand event, closing modal.');
closeModal();
});
});
</script>
<template>
@@ -9,13 +9,14 @@ import TabBarContextMenu from './TabBarContextMenu.vue';
import { useSessionStore } from '../stores/session.store';
import { useConnectionsStore, type ConnectionInfo } from '../stores/connections.store';
import { useLayoutStore, type PaneName } from '../stores/layout.store';
import { useWorkspaceEventEmitter } from '../composables/workspaceEvents'; // +++ 新增导入 +++
import { useWorkspaceEventEmitter, useWorkspaceEventSubscriber } from '../composables/workspaceEvents'; // +++ 新增导入 +++
import type { SessionTabInfoWithStatus } from '../stores/session/types'; // 路径修正
const { t } = useI18n(); // 初始化 i18n
const emitWorkspaceEvent = useWorkspaceEventEmitter(); // +++ 获取事件发射器 +++
const onWorkspaceEvent = useWorkspaceEventSubscriber(); // +++ 获取事件订阅器 +++
const layoutStore = useLayoutStore(); // 初始化布局 store
const connectionsStore = useConnectionsStore();
const { isHeaderVisible } = storeToRefs(layoutStore); // 从 layout store 获取主导航栏可见状态
@@ -272,8 +273,13 @@ onMounted(() => {
isWorkspaceRoute.value = route.path === '/workspace';
if (isWorkspaceRoute.value) {
// 初始加载时,不需要在这里加载 Header 状态,App.vue 会处理
console.log('[TabBar] Mounted on /workspace route. Header toggle button is now active.');
console.log('[TabBar] Mounted on /workspace route. Header toggle button is now active.');
}
// 监听连接事件
onWorkspaceEvent('connection:connect', (payload) => {
console.log('[TabBar] Received connection:connect event:', payload);
handlePopupConnect(payload.connectionId);
});
});
// +++ 组件卸载前移除全局监听器 +++
@@ -135,7 +135,8 @@ onMounted(() => {
subscribeToWorkspaceEvents('editor:closeTabsToRight', (payload) => handleCloseEditorTabsToRight(payload.tabId));
subscribeToWorkspaceEvents('editor:closeTabsToLeft', (payload) => handleCloseEditorTabsToLeft(payload.tabId));
subscribeToWorkspaceEvents('connection:connect', (payload) => handleConnectRequest(payload.connectionId));
// 移除对 connection:connect 事件的监听,以避免重复创建会话
// subscribeToWorkspaceEvents('connection:connect', (payload) => handleConnectRequest(payload.connectionId));
subscribeToWorkspaceEvents('connection:openNewSession', (payload) => handleOpenNewSession(payload.connectionId));
subscribeToWorkspaceEvents('connection:requestAdd', handleRequestAddConnection);
subscribeToWorkspaceEvents('connection:requestEdit', (payload) => handleRequestEditConnection(payload.connectionInfo));
@@ -176,7 +177,8 @@ onBeforeUnmount(() => {
unsubscribeFromWorkspaceEvents('editor:closeTabsToRight', (payload) => handleCloseEditorTabsToRight(payload.tabId));
unsubscribeFromWorkspaceEvents('editor:closeTabsToLeft', (payload) => handleCloseEditorTabsToLeft(payload.tabId));
unsubscribeFromWorkspaceEvents('connection:connect', (payload) => handleConnectRequest(payload.connectionId));
// 移除对 connection:connect 事件的监听,以避免重复创建会话
// unsubscribeFromWorkspaceEvents('connection:connect', (payload) => handleConnectRequest(payload.connectionId));
unsubscribeFromWorkspaceEvents('connection:openNewSession', (payload) => handleOpenNewSession(payload.connectionId));
unsubscribeFromWorkspaceEvents('connection:requestAdd', handleRequestAddConnection);
unsubscribeFromWorkspaceEvents('connection:requestEdit', (payload) => handleRequestEditConnection(payload.connectionInfo));