update

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>

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
+const handleConnect = (connectionId: number, event?: MouseEvent | KeyboardEvent) => {
-  // 增加检查：只处理左键点击 (button 0) 或非鼠标事件 (如 Enter 键)
   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.`);
+  const connection = connections.value.find(c => c.id === connectionId);
-  // 移除对 sessionStore 的直接调用，由父组件处理
+  if (!connection) {
-  // sessionStore.handleConnectRequest(connectionId);
+    console.error(`[WkspConnList] Connection with ID ${connectionId} not found.`);
-  emit('connect-request', connectionId); // 发出事件通知父组件
+    return;
-  closeContextMenu(); // 点击连接后关闭菜单 (如果菜单是打开的)
+  }
+
+  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>