This commit is contained in:
Baobhan Sith
2025-04-28 19:03:50 +08:00
parent fa3cabc13d
commit bc08141982
4 changed files with 36 additions and 55 deletions
@@ -64,7 +64,7 @@ const emit = defineEmits({
'find-next': null, // () 'find-next': null, // ()
'find-previous': null, // () 'find-previous': null, // ()
'close-search': null, // () 'close-search': null, // ()
'request-rdp-modal': null, // +++ 新增:转发 RDP 模态框请求事件 +++ // --- 移除 RDP 事件 ---
}); });
// --- Setup --- // --- Setup ---
@@ -224,8 +224,6 @@ const componentProps = computed(() => {
onOpenNewSession: (id: number) => emit('open-new-session', id), onOpenNewSession: (id: number) => emit('open-new-session', id),
// onRequestAddConnection: () => { ... }, // 移除,将在模板中处理 // onRequestAddConnection: () => { ... }, // 移除,将在模板中处理
onRequestEditConnection: (conn: any) => emit('request-edit-connection', conn), onRequestEditConnection: (conn: any) => emit('request-edit-connection', conn),
// --- 移除重复的 RDP 事件处理 prop,依赖模板监听 ---
// onRequestRdpModal: (conn: ConnectionInfo) => emit('request-rdp-modal', conn),
}; };
case 'commandHistory': case 'commandHistory':
case 'quickCommands': case 'quickCommands':
@@ -288,11 +286,6 @@ const sidebarProps = computed(() => (paneName: PaneName | null, side: 'left' | '
console.log(`[LayoutRenderer Sidebar] Forwarding 'request-add-connection'`); console.log(`[LayoutRenderer Sidebar] Forwarding 'request-add-connection'`);
emit('request-add-connection'); emit('request-add-connection');
}, },
// +++ 新增:转发侧边栏的 RDP 模态框请求 +++
onRequestRdpModal: (conn: ConnectionInfo) => {
console.log(`[LayoutRenderer Sidebar] Forwarding 'request-rdp-modal' for ID: ${conn.id}`);
emit('request-rdp-modal', conn);
}
}; };
case 'fileManager': case 'fileManager':
// Only provide props if there's an active session // Only provide props if there's an active session
@@ -501,7 +494,6 @@ onMounted(() => {
@find-next="emit('find-next')" @find-next="emit('find-next')"
@find-previous="emit('find-previous')" @find-previous="emit('find-previous')"
@close-search="emit('close-search')" @close-search="emit('close-search')"
@request-rdp-modal="emit('request-rdp-modal', $event)"
class="flex-grow overflow-auto" class="flex-grow overflow-auto"
/> />
</pane> </pane>
@@ -571,7 +563,6 @@ onMounted(() => {
:is="currentMainComponent" :is="currentMainComponent"
v-bind="componentProps" v-bind="componentProps"
@request-add-connection="() => emit('request-add-connection')" @request-add-connection="() => emit('request-add-connection')"
@request-rdp-modal="emit('request-rdp-modal', $event)"
class="flex-grow overflow-auto" class="flex-grow overflow-auto"
/> />
<component <component
@@ -38,8 +38,9 @@ const emit = defineEmits([
'close-session', 'close-session',
'open-layout-configurator', 'open-layout-configurator',
'request-add-connection-from-popup', // 声明从弹窗发出的添加请求事件 'request-add-connection-from-popup', // 声明从弹窗发出的添加请求事件
'request-edit-connection-from-popup', // 新增:声明从弹窗发出的编辑请求事件 'request-edit-connection-from-popup' // 新增:声明从弹窗发出的编辑请求事件
'request-rdp-modal-from-popup' // +++ 新增:声明从弹窗发出的 RDP 请求事件 +++ // --- 移除 RDP 事件 ---
// 'request-rdp-modal-from-popup'
]); ]);
const activateSession = (sessionId: string) => { const activateSession = (sessionId: string) => {
@@ -64,12 +65,20 @@ const togglePopup = () => {
// 处理从弹出列表中选择连接的事件 // 处理从弹出列表中选择连接的事件
const handlePopupConnect = (connectionId: number) => { const handlePopupConnect = (connectionId: number) => {
console.log(`[TabBar] Popup connect request for ID: ${connectionId}`); console.log(`[TabBar] Popup connect request for ID: ${connectionId}`);
// +++ 修复:传递 ConnectionInfo 而不是 ID +++
const connectionInfo = connectionsStore.connections.find(c => c.id === connectionId); const connectionInfo = connectionsStore.connections.find(c => c.id === connectionId);
if (connectionInfo) { if (!connectionInfo) {
sessionStore.handleConnectRequest(connectionInfo);
} else {
console.error(`[TabBar] handlePopupConnect: 未找到 ID 为 ${connectionId} 的连接信息。`); console.error(`[TabBar] handlePopupConnect: 未找到 ID 为 ${connectionId} 的连接信息。`);
showConnectionListPopup.value = false; // 关闭弹出窗口
return;
}
// --- 修改:根据类型决定调用哪个 Action ---
if (connectionInfo.type === 'RDP') {
console.log(`[TabBar] Popup RDP connect request for ID: ${connectionId}. Calling sessionStore.openRdpModal.`);
sessionStore.openRdpModal(connectionInfo);
} else {
console.log(`[TabBar] Popup non-RDP connect request for ID: ${connectionId}. Calling sessionStore.handleConnectRequest.`);
sessionStore.handleConnectRequest(connectionInfo); // 非 RDP 保持原逻辑
} }
showConnectionListPopup.value = false; // 关闭弹出窗口 showConnectionListPopup.value = false; // 关闭弹出窗口
}; };
@@ -89,13 +98,8 @@ const handleRequestEditFromPopup = (connection: any) => { // 假设 WorkspaceCon
emit('request-edit-connection-from-popup', connection); emit('request-edit-connection-from-popup', connection);
}; };
// +++ 新增:处理从弹窗内部发出的 RDP 模态框请求 +++ // --- 移除 handleRequestRdpFromPopup 方法 ---
const handleRequestRdpFromPopup = (connection: ConnectionInfo) => { // const handleRequestRdpFromPopup = (connection: ConnectionInfo) => { ... };
console.log('[TabBar] Received request-rdp-modal from popup component for connection:', connection.name);
showConnectionListPopup.value = false; // 关闭弹窗
// 向上发出事件,并携带连接信息
emit('request-rdp-modal-from-popup', connection);
};
// 新增:处理打开布局配置器的事件 // 新增:处理打开布局配置器的事件
const openLayoutConfigurator = () => { const openLayoutConfigurator = () => {
@@ -214,7 +218,6 @@ const toggleButtonTitle = computed(() => {
@open-new-session="handlePopupConnect" @open-new-session="handlePopupConnect"
@request-add-connection="handleRequestAddFromPopup" @request-add-connection="handleRequestAddFromPopup"
@request-edit-connection="handleRequestEditFromPopup" @request-edit-connection="handleRequestEditFromPopup"
@request-rdp-modal="handleRequestRdpFromPopup"
class="popup-connection-list" class="popup-connection-list"
/> />
</div> </div>
@@ -14,8 +14,9 @@ const emit = defineEmits([
'connect-request', // 左键单击 - 请求激活或替换当前标签 'connect-request', // 左键单击 - 请求激活或替换当前标签
// 'open-new-session', // 中键单击 - 请求在新标签中打开 (已移除) // 'open-new-session', // 中键单击 - 请求在新标签中打开 (已移除)
'request-add-connection', // 右键菜单 - 添加 'request-add-connection', // 右键菜单 - 添加
'request-edit-connection', // 右键菜单 - 编辑 'request-edit-connection' // 右键菜单 - 编辑
'request-rdp-modal' // +++ 新增:请求打开 RDP 模态框 +++ // --- 移除 RDP 事件 ---
// 'request-rdp-modal'
]); ]);
const { t } = useI18n(); const { t } = useI18n();
@@ -171,9 +172,9 @@ const handleConnect = (connectionId: number, event?: MouseEvent | KeyboardEvent)
closeContextMenu(); // 关闭右键菜单 closeContextMenu(); // 关闭右键菜单
if (connection.type === 'RDP') { if (connection.type === 'RDP') {
console.log(`[WkspConnList] RDP connection clicked (ID: ${connectionId}). Emitting request-rdp-modal.`); console.log(`[WkspConnList] RDP connection clicked (ID: ${connectionId}). Calling sessionStore.openRdpModal.`);
// --- 修改:不再本地处理,而是向上触发事件 --- // --- 修改:调用 Store Action ---
emit('request-rdp-modal', connection); // 传递整个连接对象 sessionStore.openRdpModal(connection);
} else { } else {
console.log(`[WkspConnList] Non-RDP connection clicked (ID: ${connectionId}, Type: ${connection.type}). Emitting connect-request.`); console.log(`[WkspConnList] Non-RDP connection clicked (ID: ${connectionId}, Type: ${connection.type}). Emitting connect-request.`);
// 对于非 RDP 连接,保持原有逻辑,发出事件给父组件处理 // 对于非 RDP 连接,保持原有逻辑,发出事件给父组件处理
+12 -26
View File
@@ -1,27 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onBeforeUnmount, computed, ref } from 'vue'; import { onMounted, onBeforeUnmount, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia'; // 导入 storeToRefs
import { useLayoutStore } from '../stores/layout.store'; // *** 重新导入 layoutStore *** import { useLayoutStore } from '../stores/layout.store'; // *** 重新导入 layoutStore ***
import { useConnectionsStore } from '../stores/connections.store'; // +++ 导入 connectionsStore +++ import { useConnectionsStore, type ConnectionInfo } from '../stores/connections.store'; // +++ 导入 connectionsStore +++
// 移除不再直接使用的组件导入 // 移除不再直接使用的组件导入
import AddConnectionFormComponent from '../components/AddConnectionForm.vue'; import AddConnectionFormComponent from '../components/AddConnectionForm.vue';
import TerminalTabBar from '../components/TerminalTabBar.vue'; import TerminalTabBar from '../components/TerminalTabBar.vue';
import LayoutRenderer from '../components/LayoutRenderer.vue'; // *** 导入布局渲染器 *** import LayoutRenderer from '../components/LayoutRenderer.vue'; // *** 导入布局渲染器 ***
import LayoutConfigurator from '../components/LayoutConfigurator.vue'; // *** 导入布局配置器 *** import LayoutConfigurator from '../components/LayoutConfigurator.vue'; // *** 导入布局配置器 ***
import RemoteDesktopModal from '../components/RemoteDesktopModal.vue'; // +++ 导入 RDP 模态框 +++ import RemoteDesktopModal from '../components/RemoteDesktopModal.vue'; // +++ 导入 RDP 模态框 +++
import { useSessionStore, type SessionTabInfoWithStatus, type SshTerminalInstance } from '../stores/session.store'; import { useSessionStore, type SessionTabInfoWithStatus, type SshTerminalInstance } from '../stores/session.store'; // 导入 session store
import { useSettingsStore } from '../stores/settings.store'; import { useSettingsStore } from '../stores/settings.store';
import { useFileEditorStore } from '../stores/fileEditor.store'; import { useFileEditorStore } from '../stores/fileEditor.store';
// import { useLayoutStore } from '../stores/layout.store'; // 重复导入,移除 // import { useLayoutStore } from '../stores/layout.store'; // 重复导入,移除
import { useCommandHistoryStore } from '../stores/commandHistory.store'; import { useCommandHistoryStore } from '../stores/commandHistory.store';
import type { ConnectionInfo } from '../stores/connections.store'; // import type { ConnectionInfo } from '../stores/connections.store'; // 重复导入,移除
import type { Terminal } from 'xterm'; // *** 导入 Terminal 类型 *** import type { Terminal } from 'xterm'; // *** 导入 Terminal 类型 ***
import type { ISearchOptions } from '@xterm/addon-search'; // *** 导入搜索选项类型 *** import type { ISearchOptions } from '@xterm/addon-search'; // *** 导入搜索选项类型 ***
// --- Setup --- // --- Setup ---
const { t } = useI18n(); const { t } = useI18n();
const sessionStore = useSessionStore(); const sessionStore = useSessionStore(); // 获取 session store 实例
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
const fileEditorStore = useFileEditorStore(); const fileEditorStore = useFileEditorStore();
const layoutStore = useLayoutStore(); // *** 确保 layoutStore 实例存在 *** const layoutStore = useLayoutStore(); // *** 确保 layoutStore 实例存在 ***
@@ -30,7 +30,7 @@ const connectionsStore = useConnectionsStore(); // +++ 获取 connectionsStore
const { isHeaderVisible } = storeToRefs(layoutStore); // *** 获取 isHeaderVisible 状态 *** const { isHeaderVisible } = storeToRefs(layoutStore); // *** 获取 isHeaderVisible 状态 ***
// --- 从 Store 获取响应式状态和 Getters --- // --- 从 Store 获取响应式状态和 Getters ---
const { sessionTabsWithStatus, activeSessionId, activeSession } = storeToRefs(sessionStore); const { sessionTabsWithStatus, activeSessionId, activeSession, isRdpModalOpen, rdpConnectionInfo } = storeToRefs(sessionStore); // 使用 storeToRefs 获取 RDP 状态
const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore); const { shareFileEditorTabsBoolean } = storeToRefs(settingsStore);
const { orderedTabs: globalEditorTabs, activeTabId: globalActiveEditorTabId } = storeToRefs(fileEditorStore); const { orderedTabs: globalEditorTabs, activeTabId: globalActiveEditorTabId } = storeToRefs(fileEditorStore);
const { layoutTree } = storeToRefs(layoutStore); // 只获取布局树 const { layoutTree } = storeToRefs(layoutStore); // 只获取布局树
@@ -58,8 +58,7 @@ const activeEditorTabId = computed(() => {
const showAddEditForm = ref(false); const showAddEditForm = ref(false);
const connectionToEdit = ref<ConnectionInfo | null>(null); const connectionToEdit = ref<ConnectionInfo | null>(null);
const showLayoutConfigurator = ref(false); // 控制布局配置器可见性 const showLayoutConfigurator = ref(false); // 控制布局配置器可见性
const showRdpModal = ref(false); // +++ 控制 RDP 模态框可见性 +++ // 本地 RDP 状态已被移除
const rdpConnectionToShow = ref<ConnectionInfo | null>(null); // +++ 存储要显示的 RDP 连接信息 +++
// --- 搜索状态 --- // --- 搜索状态 ---
const currentSearchTerm = ref(''); // 当前搜索的关键词 const currentSearchTerm = ref(''); // 当前搜索的关键词
@@ -372,18 +371,7 @@ const handleCloseEditorTab = (tabId: string) => {
sessionStore.handleOpenNewSession(id); sessionStore.handleOpenNewSession(id);
}; };
// +++ 处理 RDP 模态框请求 +++ // RDP 事件处理方法已被移除
const handleRequestRdpModal = (connection: ConnectionInfo) => {
console.log(`[WorkspaceView] Received 'request-rdp-modal' for connection: ${connection.name || connection.host}`);
rdpConnectionToShow.value = connection;
showRdpModal.value = true;
};
// +++ 关闭 RDP 模态框 +++
const handleCloseRdpModal = () => {
showRdpModal.value = false;
rdpConnectionToShow.value = null;
};
</script> </script>
@@ -399,7 +387,6 @@ const handleCloseRdpModal = () => {
@open-layout-configurator="handleOpenLayoutConfigurator" @open-layout-configurator="handleOpenLayoutConfigurator"
@request-add-connection-from-popup="handleRequestAddConnection" @request-add-connection-from-popup="handleRequestAddConnection"
@request-edit-connection-from-popup="handleRequestEditConnection" @request-edit-connection-from-popup="handleRequestEditConnection"
@request-rdp-modal-from-popup="handleRequestRdpModal"
/> />
<!-- 移除 :class 绑定 --> <!-- 移除 :class 绑定 -->
@@ -428,7 +415,6 @@ const handleCloseRdpModal = () => {
@find-next="handleFindNext" @find-next="handleFindNext"
@find-previous="handleFindPrevious" @find-previous="handleFindPrevious"
@close-search="handleCloseSearch" @close-search="handleCloseSearch"
@request-rdp-modal="handleRequestRdpModal"
></LayoutRenderer> <!-- 修正使用单独的结束标签 --> ></LayoutRenderer> <!-- 修正使用单独的结束标签 -->
<div v-else class="pane-placeholder"> <!-- 确保 v-else 紧随 v-if --> <div v-else class="pane-placeholder"> <!-- 确保 v-else 紧随 v-if -->
{{ t('layout.loading', '加载布局中...') }} {{ t('layout.loading', '加载布局中...') }}
@@ -449,11 +435,11 @@ const handleCloseRdpModal = () => {
@close="handleCloseLayoutConfigurator" @close="handleCloseLayoutConfigurator"
/> />
<!-- +++ RDP Modal (Rendered at top level) +++ --> <!-- RDP Modal (使用 Store 状态控制) -->
<RemoteDesktopModal <RemoteDesktopModal
v-if="showRdpModal" v-if="isRdpModalOpen"
:connection="rdpConnectionToShow" :connection="rdpConnectionInfo"
@close="handleCloseRdpModal" @close="sessionStore.closeRdpModal()"
/> />
</div> <!-- End of root element --> </div> <!-- End of root element -->
</template> </template>