From 6378cd7106a42143dcba00d6283ea83058ec7983 Mon Sep 17 00:00:00 2001 From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com> Date: Sun, 4 May 2025 10:19:48 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/App.vue | 20 ++++++++----- .../src/components/CommandInputBar.vue | 30 ++++++++++++++++--- .../src/components/TerminalTabBar.vue | 9 +++--- .../src/components/VirtualKeyboard.vue | 18 ++++++----- packages/frontend/src/views/WorkspaceView.vue | 11 ++++++- 5 files changed, 64 insertions(+), 24 deletions(-) diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue index 8bd3ffa..6b3d174 100644 --- a/packages/frontend/src/App.vue +++ b/packages/frontend/src/App.vue @@ -2,6 +2,7 @@ import { RouterLink, RouterView, useRoute } from 'vue-router'; import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'; import { useI18n } from 'vue-i18n'; +import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'; // +++ Import useBreakpoints +++ import { useAuthStore } from './stores/auth.store'; import { useSettingsStore } from './stores/settings.store'; import { useAppearanceStore } from './stores/appearance.store'; @@ -33,6 +34,8 @@ const { isStyleCustomizerVisible } = storeToRefs(appearanceStore); const { isLayoutVisible, isHeaderVisible } = storeToRefs(layoutStore); // 添加 isHeaderVisible const { isConfiguratorVisible: isFocusSwitcherVisible } = storeToRefs(focusSwitcherStore); const { isRdpModalOpen, rdpConnectionInfo } = storeToRefs(sessionStore); // +++ 获取 RDP 状态 +++ +const breakpoints = useBreakpoints(breakpointsTailwind); // +++ Initialize Breakpoints +++ +const isMobile = breakpoints.smaller('md'); // +++ Define isMobile +++ const route = useRoute(); const navRef = ref(null); @@ -269,14 +272,15 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
- - - - - - - {{ t('nav.login') }} - {{ t('nav.logout') }} + + + + + + + + {{ t('nav.login') }} + {{ t('nav.logout') }}
diff --git a/packages/frontend/src/components/CommandInputBar.vue b/packages/frontend/src/components/CommandInputBar.vue index f2d44b1..d24f322 100644 --- a/packages/frontend/src/components/CommandInputBar.vue +++ b/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) => { /> -
+
+ + +