admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化移动端适配布局

Browse Source
This commit is contained in:
Baobhan Sith
2025-05-04 10:19:48 +08:00
parent 54631416ff
commit 6378cd7106
5 changed files with 64 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/App.vue
+12 -8
View File
@@ -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<HTMLElement | null>(null);
@@ -269,14 +272,15 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
</div>
<!-- Right navigation links with Tailwind classes using theme variables -->
<div class="flex items-center space-x-1">
<a href="https://github.com/Heavrnl/nexus-terminal" target="_blank" rel="noopener noreferrer" title="Heavrnl/nexus-terminal" class="px-2 py-2 rounded-md text-lg text-icon hover:text-icon-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
<a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')" class="px-2 py-2 rounded-md text-lg text-icon hover:text-icon-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out"><i class="fas fa-paint-brush"></i></a>
<RouterLink v-if="!isAuthenticated" to="/login" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap">{{ t('nav.login') }}</RouterLink>
<a href="#" v-if="isAuthenticated" @click.prevent="handleLogout" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap">{{ t('nav.logout') }}</a>
<!-- GitHub Icon (Hide on mobile) -->
<a v-if="!isMobile" href="https://github.com/Heavrnl/nexus-terminal" target="_blank" rel="noopener noreferrer" title="Heavrnl/nexus-terminal" class="px-2 py-2 rounded-md text-lg text-icon hover:text-icon-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
<a href="#" @click.prevent="openStyleCustomizer" :title="t('nav.customizeStyle')" class="px-2 py-2 rounded-md text-lg text-icon hover:text-icon-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out"><i class="fas fa-paint-brush"></i></a>
<RouterLink v-if="!isAuthenticated" to="/login" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap">{{ t('nav.login') }}</RouterLink>
<a href="#" v-if="isAuthenticated" @click.prevent="handleLogout" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap">{{ t('nav.logout') }}</a>
</div>
<!-- Sliding underline element with Tailwind classes using theme variables (JS still controls positioning) -->
<div ref="underlineRef" class="absolute bottom-0 h-0.5 bg-link-active rounded transition-all duration-300 ease-in-out pointer-events-none opacity-0 transform translate-y-1.5"></div> <!-- Changed translate-y-1 to translate-y-1.5 -->
packages/frontend/src/components/CommandInputBar.vue
+26 -4
View File
@@ -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
+5 -4
View File
@@ -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
+11 -7
View File
@@ -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>
packages/frontend/src/views/WorkspaceView.vue
+10 -1
View File
@@ -66,6 +66,7 @@ const showLayoutConfigurator = ref(false); // 控制布局配置器可见性
// --- 搜索状态 ---
const currentSearchTerm = ref(''); // 当前搜索的关键词
const mobileTerminalRef = ref<InstanceType<typeof Terminal> | null>(null); // +++ 添加 mobileTerminalRef +++
const isVirtualKeyboardVisible = ref(true); // +++ State for virtual keyboard visibility +++
// --- 新增：处理全局键盘事件 ---
const handleGlobalKeyDown = (event: KeyboardEvent) => {
@@ -475,6 +476,11 @@ const handleVirtualKeyPress = (keySequence: string) => {
}
};
// +++ Function to toggle virtual keyboard visibility +++
const toggleVirtualKeyboard = () => {
isVirtualKeyboardVisible.value = !isVirtualKeyboardVisible.value;
};
// RDP 事件处理方法已被移除
// --- 标签页关闭操作处理 ---
@@ -614,9 +620,12 @@ const handleVirtualKeyPress = (keySequence: string) => {
@find-previous="handleFindPrevious"
@close-search="handleCloseSearch"
@clear-terminal="handleClearTerminal"
:is-virtual-keyboard-visible="isVirtualKeyboardVisible"
@toggle-virtual-keyboard="toggleVirtualKeyboard"
/>
<!-- +++ 添加虚拟键盘，监听事件 +++ -->
<!-- +++ Use v-show for VirtualKeyboard and bind visibility +++ -->
<VirtualKeyboard
v-show="isVirtualKeyboardVisible"
class="mobile-virtual-keyboard"
@send-key="handleVirtualKeyPress"
/>