feat: 移动端适配挂起会话管理器

packages/frontend/src/components/CommandInputBar.vue

@@ -8,6 +8,7 @@ import { useSettingsStore } from '../stores/settings.store';
 import { useQuickCommandsStore } from '../stores/quickCommands.store';
 import { useCommandHistoryStore } from '../stores/commandHistory.store';
 import QuickCommandsModal from './QuickCommandsModal.vue'; // +++ Import the modal component +++
+import SuspendedSshSessionsModal from './SuspendedSshSessionsModal.vue'; // +++ Import the new modal +++
 import { useWorkspaceEventEmitter } from '../composables/workspaceEvents'; // +++ 新增导入 +++
 
 // Disable attribute inheritance as this component has multiple root nodes (div + modal)
@@ -46,6 +47,7 @@ const props = defineProps<{
 const isSearching = ref(false);
 const searchTerm = ref('');
 const showQuickCommands = ref(false); // +++ Add state for modal visibility +++
+const showSuspendedSshSessionsModal = ref(false); // +++ Add state for suspended SSH sessions modal +++
 // *** 移除本地的搜索结果 ref ***
 // const searchResultCount = ref(0);
 // const currentSearchResultIndex = ref(0);
@@ -280,6 +282,15 @@ const closeQuickCommandsModal = () => {
   showQuickCommands.value = false;
 };
 
+// +++ Functions to control the suspended SSH sessions modal +++
+const openSuspendedSshSessionsModal = () => {
+  showSuspendedSshSessionsModal.value = true;
+};
+
+const closeSuspendedSshSessionsModal = () => {
+  showSuspendedSshSessionsModal.value = false;
+};
+
 // +++ Handler for command execution from the modal +++
 const handleQuickCommandExecute = (command: string) => {
   console.log(`[CommandInputBar] Executing quick command: ${command}`);
@@ -362,6 +373,15 @@ const handleQuickCommandExecute = (command: string) => {
         >
           <i class="fas fa-keyboard text-base" :class="{ 'opacity-50': !props.isVirtualKeyboardVisible }"></i>
         </button>
+        <!-- +++ Suspended SSH Sessions Button (Mobile only, moved here) +++ -->
+        <button
+          v-if="props.isMobile"
+          @click="openSuspendedSshSessionsModal"
+          class="flex-shrink-0 flex items-center justify-center w-8 h-8 border border-border/50 rounded-lg text-text-secondary transition-colors duration-200 hover:bg-border hover:text-foreground"
+          :title="t('suspendedSshSessions.title', '挂起会话')"
+        >
+          <i class="fas fa-pause-circle text-base"></i>
+        </button>
         <!-- Search Toggle Button -->
         <button
           v-if="!props.isMobile"
@@ -401,6 +421,11 @@ const handleQuickCommandExecute = (command: string) => {
     @close="closeQuickCommandsModal"
     @execute-command="handleQuickCommandExecute"
   />
+  <!-- +++ Suspended SSH Sessions Modal Instance +++ -->
+  <SuspendedSshSessionsModal
+    :is-visible="showSuspendedSshSessionsModal"
+    @close="closeSuspendedSshSessionsModal"
+  />
 </template>
 
 <style scoped>