From 8ad6cfefd48b20fdc0c6b4768772d209d6f7eb20 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Sun, 27 Apr 2025 21:57:34 +0800
Subject: [PATCH] update

---
 .../backend/data/nexus-terminal.db-journal    | Bin 0 -> 4612 bytes
 .../src/components/RemoteDesktopModal.vue     |  61 ++++++++++++++++++
 .../components/WorkspaceConnectionList.vue    |  49 +++++++++++---
 3 files changed, 100 insertions(+), 10 deletions(-)
 create mode 100644 packages/backend/data/nexus-terminal.db-journal
 create mode 100644 packages/frontend/src/components/RemoteDesktopModal.vue

diff --git a/packages/backend/data/nexus-terminal.db-journal b/packages/backend/data/nexus-terminal.db-journal
new file mode 100644
index 0000000000000000000000000000000000000000..77d7f5b4be29f4bf3e16318f7ad9a06f06d9a122
GIT binary patch
literal 4612
zcmeH_%}(1u5XVg#XbZ&YtwO!c1qp(ibwg<O6tG<y3E~JlCxoIUwrWd_ZN)|{0v~t?
z9-z0rM2}S;fJdkh;?`5uBeRBls0s?IdP2LBHM`!~`Oo}jBx$sMeAz1EsVqr3G%rRM
zV)vK{<O^8c!s4k^{9ZgQQu&X3E)zLdxF`e#{#z_TKoAfF1OY)n5D)|e0YN|z5Cr}U
zfwRShIVn%hdY-I&)y!to(CmiU?6h0@rfuja&<%sY?IwO0G#sFBN^lf8EODK8zWdRM
zf$l@VdM=b8IgYsT!Z<+_g?(<0Vz+;HAN9k}#~t6{uIvMDVmK&4;C{0CLkgDl9#S@+
zW%JULOW($_(e{i<*;MXSDeUPjjGHM@aB$%%%Y*`{ZYUc>Aq2lNfwcQPlX!&^_308=
za8}q~5-fHY7BCW7uPSP#s?=0PB{fLbp3Ndvf*NE@LpOGe2~bJ8_H^L>db+!s9?oSY
zEP3+k?=k;-D5;Z6NZdG4@2`N(4mz=VJzawgHFz6`o!}Z{61SaD%WoA@K}hvHR=vzT
zdF9uRx!q`XthS~ZmUWVi4IeiQJDea2%<1_7hVvsF7fP|0^(TV}SN|AcJBJb0c@CGG
i`YzAGu-mPUX709luO6OCZ3Y7^@jyQ@6|-$W{OJw2Aq=np

literal 0
HcmV?d00001

diff --git a/packages/frontend/src/components/RemoteDesktopModal.vue b/packages/frontend/src/components/RemoteDesktopModal.vue
new file mode 100644
index 0000000..1418a4a
--- /dev/null
+++ b/packages/frontend/src/components/RemoteDesktopModal.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// Props (可以稍后添加，例如接收连接信息)
+// const props = defineProps<{
+//   connection?: ConnectionInfo; // 假设有 ConnectionInfo 类型
+// }>();
+
+// Emits (用于通知父组件关闭模态框)
+const emit = defineEmits(['close']);
+
+const closeModal = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-overlay p-4"> <!-- Changed background class -->
+    <div class="bg-background text-foreground rounded-lg shadow-xl w-11/12 max-w-4xl h-5/6 flex flex-col overflow-hidden border border-border">
+      <!-- Modal Header -->
+      <div class="flex items-center justify-between p-4 border-b border-border flex-shrink-0">
+        <h3 class="text-lg font-semibold">
+          <!-- 可以根据 props.connection?.name 动态显示标题 -->
+          {{ t('remoteDesktopModal.titlePlaceholder') }}
+        </h3>
+        <button
+          @click="closeModal"
+          class="text-text-secondary hover:text-foreground transition-colors duration-150"
+          :title="t('common.close')"
+        >
+          <i class="fas fa-times fa-lg"></i>
+        </button>
+      </div>
+
+      <!-- Modal Body (Placeholder) -->
+      <div class="flex-grow p-4 overflow-y-auto">
+        <div class="flex items-center justify-center h-full text-text-secondary text-center">
+          <div>
+            <i class="fas fa-desktop fa-3x mb-4"></i>
+            <p>{{ t('remoteDesktopModal.contentPlaceholder') }}</p>
+            <!-- 这里将来会是 Guacamole 或其他 RDP 客户端的容器 -->
+          </div>
+        </div>
+      </div>
+
+      <!-- Modal Footer (Optional) -->
+      <!-- <div class="p-4 border-t border-border flex-shrink-0 text-right">
+        <button @click="closeModal" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark">
+          {{ t('common.close') }}
+        </button>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 如果需要，可以在这里添加特定的样式 */
+</style>
\ No newline at end of file
diff --git a/packages/frontend/src/components/WorkspaceConnectionList.vue b/packages/frontend/src/components/WorkspaceConnectionList.vue
index 4d4cd5a..213d20a 100644
--- a/packages/frontend/src/components/WorkspaceConnectionList.vue
+++ b/packages/frontend/src/components/WorkspaceConnectionList.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, defineExpose, watch, nextTick } from 'vue'; // 确保 ref, defineExpose, onBeforeUnmount, watch, nextTick 已导入
+import { ref, computed, onMounted, onBeforeUnmount, defineExpose, watch, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 // import { useRouter } from 'vue-router'; // 不再需要 router
 import { useI18n } from 'vue-i18n';
+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
@@ -38,6 +39,10 @@ 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);
+
 // 键盘导航状态
 const highlightedIndex = ref(-1); // -1 表示没有高亮项
 const listAreaRef = ref<HTMLElement | null>(null); // 列表容器的 ref
@@ -150,18 +155,35 @@ const toggleGroup = (groupName: string) => {
 };
 
 // 处理单击连接 (左键/Enter) - 使用 session store 处理连接请求
-const handleConnect = (connectionId: number, event?: MouseEvent | KeyboardEvent) => { // 接受 MouseEvent 或 KeyboardEvent
-  // 增加检查：只处理左键点击 (button 0) 或非鼠标事件 (如 Enter 键)
+const handleConnect = (connectionId: number, event?: MouseEvent | KeyboardEvent) => {
   if (event instanceof MouseEvent && event.button !== 0) {
     console.log(`[WkspConnList] DEBUG: handleConnect called with non-left click (button: ${event.button}). Ignoring.`);
-    return; // 如果不是左键点击，则忽略
+    return;
   }
-  // console.log('[WkspConnList] DEBUG: handleConnect triggered! Event:', event); // 移除调试日志
-  console.log(`[WkspConnList] handleConnect (左键/Enter) called for ID: ${connectionId}. Emitting event.`);
-  // 移除对 sessionStore 的直接调用，由父组件处理
-  // sessionStore.handleConnectRequest(connectionId);
-  emit('connect-request', connectionId); // 发出事件通知父组件
-  closeContextMenu(); // 点击连接后关闭菜单 (如果菜单是打开的)
+
+  const connection = connections.value.find(c => c.id === connectionId);
+  if (!connection) {
+    console.error(`[WkspConnList] Connection with ID ${connectionId} not found.`);
+    return;
+  }
+
+  closeContextMenu(); // 关闭右键菜单
+
+  if (connection.type === 'RDP') {
+    console.log(`[WkspConnList] RDP connection clicked (ID: ${connectionId}). Opening modal.`);
+    selectedRdpConnection.value = connection;
+    showRdpModal.value = true;
+  } else {
+    console.log(`[WkspConnList] Non-RDP connection clicked (ID: ${connectionId}, Type: ${connection.type}). Emitting connect-request.`);
+    // 对于非 RDP 连接，保持原有逻辑，发出事件给父组件处理
+    emit('connect-request', connectionId);
+  }
+};
+
+// +++ 关闭 RDP 模态框 +++
+const closeRdpModal = () => {
+  showRdpModal.value = false;
+  selectedRdpConnection.value = null;
 };
 
 // 显示右键菜单
@@ -407,6 +429,13 @@ const scrollToHighlighted = async () => {
         </li>
       </ul>
     </div>
+
+    <!-- +++ RDP Modal +++ -->
+    <RemoteDesktopModal
+      v-if="showRdpModal"
+      :connection="selectedRdpConnection"
+      @close="closeRdpModal"
+    />
   </div>
 </template>