From fa3cabc13d48b9c8cbdbf3e8a6b6636a91bbf221 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Mon, 28 Apr 2025 18:51:45 +0800
Subject: [PATCH] update

---
 .../src/components/LayoutRenderer.vue         | 13 +++++++-
 .../src/components/TerminalTabBar.vue         | 16 +++++++--
 .../components/WorkspaceConnectionList.vue    | 33 ++++++++++---------
 packages/frontend/src/views/WorkspaceView.vue | 27 ++++++++++++++-
 4 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/LayoutRenderer.vue b/packages/frontend/src/components/LayoutRenderer.vue
index 12740cd..22f012a 100644
--- a/packages/frontend/src/components/LayoutRenderer.vue
+++ b/packages/frontend/src/components/LayoutRenderer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ConnectionInfo } from '../stores/connections.store'; // +++ 导入 ConnectionInfo 类型 +++
 import { computed, defineAsyncComponent, type PropType, type Component, ref, watch, onMounted } from 'vue'; // +++ Add onMounted +++
 import { useI18n } from 'vue-i18n'; // <-- Import useI18n
 // 添加依赖 font-awesome
@@ -63,6 +64,7 @@ const emit = defineEmits({
   'find-next': null, // ()
   'find-previous': null, // ()
   'close-search': null, // ()
+  'request-rdp-modal': null, // +++ 新增：转发 RDP 模态框请求事件 +++
 });
 
 // --- Setup ---
@@ -222,8 +224,10 @@ const componentProps = computed(() => {
          onOpenNewSession: (id: number) => emit('open-new-session', id),
          // onRequestAddConnection: () => { ... }, // 移除，将在模板中处理
          onRequestEditConnection: (conn: any) => emit('request-edit-connection', conn),
+         // --- 移除重复的 RDP 事件处理 prop，依赖模板监听 ---
+         // onRequestRdpModal: (conn: ConnectionInfo) => emit('request-rdp-modal', conn),
        };
-    case 'commandHistory':
+     case 'commandHistory':
     case 'quickCommands':
        // 这两个视图需要转发 execute-command 事件
        return {
@@ -283,6 +287,11 @@ const sidebarProps = computed(() => (paneName: PaneName | null, side: 'left' | '
        onRequestAddConnection: () => {
            console.log(`[LayoutRenderer Sidebar] Forwarding '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':
@@ -492,6 +501,7 @@ onMounted(() => {
                         @find-next="emit('find-next')"
                         @find-previous="emit('find-previous')"
                         @close-search="emit('close-search')"
+                        @request-rdp-modal="emit('request-rdp-modal', $event)"
                         class="flex-grow overflow-auto"
                     />
                   </pane>
@@ -561,6 +571,7 @@ onMounted(() => {
                       :is="currentMainComponent"
                       v-bind="componentProps"
                       @request-add-connection="() => emit('request-add-connection')"
+                      @request-rdp-modal="emit('request-rdp-modal', $event)"
                       class="flex-grow overflow-auto"
                     />
                     <component
diff --git a/packages/frontend/src/components/TerminalTabBar.vue b/packages/frontend/src/components/TerminalTabBar.vue
index cc26124..d6470ff 100644
--- a/packages/frontend/src/components/TerminalTabBar.vue
+++ b/packages/frontend/src/components/TerminalTabBar.vue
@@ -38,7 +38,8 @@ const emit = defineEmits([
   'close-session',
   'open-layout-configurator',
   'request-add-connection-from-popup', // 声明从弹窗发出的添加请求事件
-  'request-edit-connection-from-popup'  // 新增：声明从弹窗发出的编辑请求事件
+  'request-edit-connection-from-popup', // 新增：声明从弹窗发出的编辑请求事件
+  'request-rdp-modal-from-popup'       // +++ 新增：声明从弹窗发出的 RDP 请求事件 +++
 ]);
 
 const activateSession = (sessionId: string) => {
@@ -88,6 +89,14 @@ const handleRequestEditFromPopup = (connection: any) => { // 假设 WorkspaceCon
   emit('request-edit-connection-from-popup', connection);
 };
 
+// +++ 新增：处理从弹窗内部发出的 RDP 模态框请求 +++
+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 = () => {
   console.log('[TabBar] Emitting open-layout-configurator event');
@@ -202,9 +211,10 @@ const toggleButtonTitle = computed(() => {
         <div class="flex-grow overflow-y-auto border border-border rounded">
             <WorkspaceConnectionListComponent
               @connect-request="handlePopupConnect"
-              @open-new-session="handlePopupConnect" 
+              @open-new-session="handlePopupConnect"
               @request-add-connection="handleRequestAddFromPopup"
-              @request-edit-connection="handleRequestEditFromPopup" 
+              @request-edit-connection="handleRequestEditFromPopup"
+              @request-rdp-modal="handleRequestRdpFromPopup"
               class="popup-connection-list"
             />
         </div>
diff --git a/packages/frontend/src/components/WorkspaceConnectionList.vue b/packages/frontend/src/components/WorkspaceConnectionList.vue
index 213d20a..707a80d 100644
--- a/packages/frontend/src/components/WorkspaceConnectionList.vue
+++ b/packages/frontend/src/components/WorkspaceConnectionList.vue
@@ -3,7 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount, defineExpose, watch, nextTic
 import { storeToRefs } from 'pinia';
 // import { useRouter } from 'vue-router'; // 不再需要 router
 import { useI18n } from 'vue-i18n';
-import RemoteDesktopModal from './RemoteDesktopModal.vue'; // +++ 导入 RDP 模态框 +++
+// import RemoteDesktopModal from './RemoteDesktopModal.vue'; // --- 移除 RDP 模态框导入 ---
 import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store';
 import { useTagsStore, TagInfo } from '../stores/tags.store';
 import { useSessionStore } from '../stores/session.store'; // 导入 session store
@@ -14,7 +14,8 @@ const emit = defineEmits([
   'connect-request',        // 左键单击 - 请求激活或替换当前标签
   // 'open-new-session',       // 中键单击 - 请求在新标签中打开 (已移除)
   'request-add-connection', // 右键菜单 - 添加
-  'request-edit-connection' // 右键菜单 - 编辑
+  'request-edit-connection', // 右键菜单 - 编辑
+  'request-rdp-modal'       // +++ 新增：请求打开 RDP 模态框 +++
 ]);
 
 const { t } = useI18n();
@@ -39,9 +40,9 @@ const contextTargetConnection = ref<ConnectionInfo | null>(null);
 // 分组展开状态
 const expandedGroups = ref<Record<string, boolean>>({}); // 使用 Record<string, boolean>
 
-// +++ RDP 模态框状态 +++
-const showRdpModal = ref(false);
-const selectedRdpConnection = ref<ConnectionInfo | null>(null);
+// --- 移除 RDP 模态框状态 ---
+// const showRdpModal = ref(false);
+// const selectedRdpConnection = ref<ConnectionInfo | null>(null);
 
 // 键盘导航状态
 const highlightedIndex = ref(-1); // -1 表示没有高亮项
@@ -170,9 +171,9 @@ const handleConnect = (connectionId: number, event?: MouseEvent | KeyboardEvent)
   closeContextMenu(); // 关闭右键菜单
 
   if (connection.type === 'RDP') {
-    console.log(`[WkspConnList] RDP connection clicked (ID: ${connectionId}). Opening modal.`);
-    selectedRdpConnection.value = connection;
-    showRdpModal.value = true;
+    console.log(`[WkspConnList] RDP connection clicked (ID: ${connectionId}). Emitting request-rdp-modal.`);
+    // --- 修改：不再本地处理，而是向上触发事件 ---
+    emit('request-rdp-modal', connection); // 传递整个连接对象
   } else {
     console.log(`[WkspConnList] Non-RDP connection clicked (ID: ${connectionId}, Type: ${connection.type}). Emitting connect-request.`);
     // 对于非 RDP 连接，保持原有逻辑，发出事件给父组件处理
@@ -180,11 +181,11 @@ const handleConnect = (connectionId: number, event?: MouseEvent | KeyboardEvent)
   }
 };
 
-// +++ 关闭 RDP 模态框 +++
-const closeRdpModal = () => {
-  showRdpModal.value = false;
-  selectedRdpConnection.value = null;
-};
+// --- 移除 closeRdpModal 方法 ---
+// const closeRdpModal = () => {
+//   showRdpModal.value = false;
+//   selectedRdpConnection.value = null;
+// };
 
 // 显示右键菜单
 const showContextMenu = (event: MouseEvent, connection: ConnectionInfo) => {
@@ -430,12 +431,12 @@ const scrollToHighlighted = async () => {
       </ul>
     </div>
 
-    <!-- +++ RDP Modal +++ -->
-    <RemoteDesktopModal
+    <!-- --- 移除 RDP Modal 渲染 --- -->
+    <!-- <RemoteDesktopModal
       v-if="showRdpModal"
       :connection="selectedRdpConnection"
       @close="closeRdpModal"
-    />
+    /> -->
   </div>
 </template>
 
diff --git a/packages/frontend/src/views/WorkspaceView.vue b/packages/frontend/src/views/WorkspaceView.vue
index f276b44..164a7f6 100644
--- a/packages/frontend/src/views/WorkspaceView.vue
+++ b/packages/frontend/src/views/WorkspaceView.vue
@@ -9,6 +9,7 @@ import AddConnectionFormComponent from '../components/AddConnectionForm.vue';
 import TerminalTabBar from '../components/TerminalTabBar.vue';
 import LayoutRenderer from '../components/LayoutRenderer.vue'; // *** 导入布局渲染器 ***
 import LayoutConfigurator from '../components/LayoutConfigurator.vue'; // *** 导入布局配置器 ***
+import RemoteDesktopModal from '../components/RemoteDesktopModal.vue'; // +++ 导入 RDP 模态框 +++
 import { useSessionStore, type SessionTabInfoWithStatus, type SshTerminalInstance } from '../stores/session.store';
 import { useSettingsStore } from '../stores/settings.store';
 import { useFileEditorStore } from '../stores/fileEditor.store';
@@ -57,6 +58,8 @@ const activeEditorTabId = computed(() => {
 const showAddEditForm = ref(false);
 const connectionToEdit = ref<ConnectionInfo | null>(null);
 const showLayoutConfigurator = ref(false); // 控制布局配置器可见性
+const showRdpModal = ref(false); // +++ 控制 RDP 模态框可见性 +++
+const rdpConnectionToShow = ref<ConnectionInfo | null>(null); // +++ 存储要显示的 RDP 连接信息 +++
 
 // --- 搜索状态 ---
 const currentSearchTerm = ref(''); // 当前搜索的关键词
@@ -369,6 +372,19 @@ const handleCloseEditorTab = (tabId: string) => {
     sessionStore.handleOpenNewSession(id);
  };
 
+// +++ 处理 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>
 
 <template>
@@ -382,7 +398,8 @@ const handleCloseEditorTab = (tabId: string) => {
         @close-session="sessionStore.closeSession"
         @open-layout-configurator="handleOpenLayoutConfigurator"
         @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 绑定 -->
@@ -411,6 +428,7 @@ const handleCloseEditorTab = (tabId: string) => {
         @find-next="handleFindNext"
         @find-previous="handleFindPrevious"
         @close-search="handleCloseSearch"
+        @request-rdp-modal="handleRequestRdpModal"
       ></LayoutRenderer> <!-- 修正：使用单独的结束标签 -->
       <div v-else class="pane-placeholder"> <!-- 确保 v-else 紧随 v-if -->
         {{ t('layout.loading', '加载布局中...') }}
@@ -430,6 +448,13 @@ const handleCloseEditorTab = (tabId: string) => {
       :is-visible="showLayoutConfigurator"
       @close="handleCloseLayoutConfigurator"
     />
+
+    <!-- +++ RDP Modal (Rendered at top level) +++ -->
+    <RemoteDesktopModal
+      v-if="showRdpModal"
+      :connection="rdpConnectionToShow"
+      @close="handleCloseRdpModal"
+    />
   </div> <!-- End of root element -->
 </template>