update

2025-04-28 18:51:45 +08:00
parent a9e18e7f60
commit fa3cabc13d
4 changed files with 68 additions and 21 deletions
@@ -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
@@ -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');
@@ -205,6 +214,7 @@ const toggleButtonTitle = computed(() => {
              @open-new-session="handlePopupConnect"
              @request-add-connection="handleRequestAddFromPopup"
              @request-edit-connection="handleRequestEditFromPopup"
+              @request-rdp-modal="handleRequestRdpFromPopup"
              class="popup-connection-list"
            />
        </div>
@@ -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>

@@ -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>
@@ -383,6 +399,7 @@ const handleCloseEditorTab = (tabId: string) => {
        @open-layout-configurator="handleOpenLayoutConfigurator"
        @request-add-connection-from-popup="handleRequestAddConnection"
        @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>