fix: 优化移动端适配布局

packages/frontend/src/components/CommandInputBar.vue

@@ -12,7 +12,15 @@ import QuickCommandsModal from './QuickCommandsModal.vue'; // +++ Import the mod
 // Disable attribute inheritance as this component has multiple root nodes (div + modal)
 defineOptions({ inheritAttrs: false });
 
-const emit = defineEmits(['send-command', 'search', 'find-next', 'find-previous', 'close-search', 'clear-terminal']); // 添加 clear-terminal 事件
+const emit = defineEmits([
+  'send-command',
+  'search',
+  'find-next',
+  'find-previous',
+  'close-search',
+  'clear-terminal',
+  'toggle-virtual-keyboard' // +++ Add new emit +++
+]);
 const { t } = useI18n();
 const focusSwitcherStore = useFocusSwitcherStore();
 const settingsStore = useSettingsStore();
@@ -35,8 +43,8 @@ const { updateSessionCommandInput } = sessionStore;
 // Props definition is now empty as search results are no longer handled here
 const props = defineProps<{
   // No props defined here currently
-  // +++ Add isMobile prop +++
   isMobile?: boolean;
+  isVirtualKeyboardVisible?: boolean; // +++ Add prop to receive state +++
 }>();
 // --- 移除本地 commandInput ref ---
 // const commandInput = ref('');
@@ -305,7 +313,11 @@ const handleQuickCommandExecute = (command: string) => {
         v-model="currentSessionCommandInput"
         :placeholder="t('commandInputBar.placeholder')"
         class="flex-grow min-w-0 px-4 py-1.5 border border-border/50 rounded-lg bg-input text-foreground text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300 ease-in-out"
-        :class="{ 'basis-3/4': !props.isMobile && isSearching, 'basis-full': !isSearching }" 
+        :class="{
+          'basis-3/4': !props.isMobile && isSearching,      // Desktop searching: 3/4 width
+          'basis-full': !props.isMobile && !isSearching   // Desktop non-searching: full width
+          // Mobile non-searching: No basis class, rely on flex-grow
+        }"
         ref="commandInputRef"
         data-focus-id="commandInput"
         @keydown="handleCommandInputKeydown"
@@ -329,7 +341,17 @@ const handleQuickCommandExecute = (command: string) => {
       />
 
       <!-- Search Controls -->
-      <div class="flex items-center gap-1 flex-shrink-0"> <!-- Adjusted gap -->
+      <div class="flex items-center gap-1 flex-shrink-0">
+        <!-- +++ Toggle Virtual Keyboard Button (Moved here, Mobile only) +++ -->
+        <button
+          v-if="props.isMobile"
+          @click="emit('toggle-virtual-keyboard')"
+          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="props.isVirtualKeyboardVisible ? t('commandInputBar.hideKeyboard', '隐藏虚拟键盘') : t('commandInputBar.showKeyboard', '显示虚拟键盘')"
+        >
+          <i class="fas fa-keyboard text-base" :class="{ 'opacity-50': !props.isVirtualKeyboardVisible }"></i>
+        </button>
+        <!-- Search Toggle Button -->
         <button
           @click="toggleSearch"
           class="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"

packages/frontend/src/components/TerminalTabBar.vue

@@ -264,11 +264,12 @@ const toggleButtonTitle = computed(() => {
 </script>
 
 <template>
-  <!-- +++ 使用 :class 绑定来条件化样式 +++ -->
-  <div :class="['flex bg-header border border-border overflow-hidden h-10',
-               { 'rounded-t-md mx-2 mt-2': !isMobile } // 只在非移动端应用这些类
+  <!-- +++ 使用 :class 绑定来条件化样式，包括高度 (修正 props 引用) +++ -->
+  <div :class="['flex bg-header border border-border overflow-hidden',
+               { 'rounded-t-md mx-2 mt-2': !props.isMobile }, // Desktop margins/rounding - Use props.isMobile
+               props.isMobile ? 'h-8' : 'h-10' // Mobile height h-8, Desktop h-10 - Use props.isMobile
               ]">
-    <div class="flex items-center overflow-x-auto flex-shrink min-w-0">
+    <div class="flex items-center overflow-x-auto flex-shrink min-w-0 h-full"> <!-- Ensure inner div has h-full -->
       <ul class="flex list-none p-0 m-0 h-full flex-shrink-0">
         <li
           v-for="session in sessions"

packages/frontend/src/components/VirtualKeyboard.vue

@@ -82,13 +82,17 @@ const keys: KeyDefinition[] = [
   { label: 'End', sequence: '\x1b[4~', type: 'navigation' }, // +++ End +++
   { label: 'PgUp', sequence: '\x1b[5~', type: 'navigation' }, // +++ PageUp +++
   { label: 'PgDn', sequence: '\x1b[6~', type: 'navigation' }, // +++ PageDown +++
-  // Row 3: Example character keys for combinations
-  { label: 'A', type: 'char' },
-  { label: 'B', type: 'char' },
-  { label: 'C', type: 'char' }, 
-  { label: 'D', type: 'char' },
-  { label: 'F', type: 'char' },
-  // Add more letters, numbers, or symbols as needed
+  // Row 3: Alphabet Keys (A-Z)
+  { label: 'A', type: 'char' }, { label: 'B', type: 'char' }, { label: 'C', type: 'char' },
+  { label: 'D', type: 'char' }, { label: 'E', type: 'char' }, { label: 'F', type: 'char' },
+  { label: 'G', type: 'char' }, { label: 'H', type: 'char' }, { label: 'I', type: 'char' },
+  { label: 'J', type: 'char' }, { label: 'K', type: 'char' }, { label: 'L', type: 'char' },
+  { label: 'M', type: 'char' }, { label: 'N', type: 'char' }, { label: 'O', type: 'char' },
+  { label: 'P', type: 'char' }, { label: 'Q', type: 'char' }, { label: 'R', type: 'char' },
+  { label: 'S', type: 'char' }, { label: 'T', type: 'char' }, { label: 'U', type: 'char' },
+  { label: 'V', type: 'char' }, { label: 'W', type: 'char' }, { label: 'X', type: 'char' },
+  { label: 'Y', type: 'char' }, { label: 'Z', type: 'char' },
+  // Add numbers or other symbols if needed
 ];
 </script>