feat: 适配移动端界面以使用文件管理器和文件编辑器

packages/frontend/src/App.vue

@@ -2,8 +2,8 @@
 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 { useDeviceDetection } from './composables/useDeviceDetection';
 import { useSettingsStore } from './stores/settings.store';
 import { useAppearanceStore } from './stores/appearance.store';
 import { useLayoutStore } from './stores/layout.store';
@@ -36,8 +36,7 @@ const { isStyleCustomizerVisible } = storeToRefs(appearanceStore);
 const { isLayoutVisible, isHeaderVisible } = storeToRefs(layoutStore); // 添加 isHeaderVisible
 const { isConfiguratorVisible: isFocusSwitcherVisible } = storeToRefs(focusSwitcherStore);
 const { isRdpModalOpen, rdpConnectionInfo, isVncModalOpen, vncConnectionInfo } = storeToRefs(sessionStore); // +++ 获取 RDP 和 VNC 状态 +++
-const breakpoints = useBreakpoints(breakpointsTailwind); // +++ Initialize Breakpoints +++
+const { isMobile } = useDeviceDetection();
-const isMobile = breakpoints.smaller('md'); // +++ Define isMobile +++
 
 const route = useRoute();
 const navRef = ref<HTMLElement | null>(null);
@@ -302,7 +301,7 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
     <UINotificationDisplay />
 
     <!-- 根据设置条件渲染全局文件编辑器弹窗 -->
-    <FileEditorOverlay v-if="showPopupFileEditorBoolean" />
+    <FileEditorOverlay v-if="showPopupFileEditorBoolean" :is-mobile="isMobile" />
 
     <!-- 条件渲染样式自定义器，使用 store 的状态和方法 -->
     <StyleCustomizer v-if="isStyleCustomizerVisible" @close="closeStyleCustomizer" />

packages/frontend/src/components/FileEditorOverlay.vue

@@ -4,19 +4,24 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import MonacoEditor from './MonacoEditor.vue';
 import FileEditorTabs from './FileEditorTabs.vue';
-import { useFileEditorStore, type FileTab } from '../stores/fileEditor.store'; 
+import { useFileEditorStore, type FileTab } from '../stores/fileEditor.store';
 import { useSettingsStore } from '../stores/settings.store';
-import { useSessionStore } from '../stores/session.store'; 
+import { useSessionStore } from '../stores/session.store';
 
 
 const { t } = useI18n();
 const fileEditorStore = useFileEditorStore();
 const settingsStore = useSettingsStore();
-const sessionStore = useSessionStore(); 
+const sessionStore = useSessionStore();
 
 // --- 本地状态控制弹窗显示 ---
 const isVisible = ref(false);
 
+// 接收 isMobile 属性
+const props = defineProps<{
+  isMobile?: boolean;
+}>();
+
 // --- 从 Store 获取状态 ---
 // 全局 Store (用于共享模式和触发器)
 const {
@@ -83,10 +88,22 @@ const minHeight = 300; // 最小高度
 const encodingSelectRef = ref<HTMLSelectElement | null>(null); // +++ Ref for the select element +++
 
 // --- 计算属性，用于模板绑定 ---
-const popupStyle = computed(() => ({
+const popupStyle = computed(() => {
-    width: `${popupWidthPx.value}px`,
+    if (props.isMobile) {
-    height: `${popupHeightPx.value}px`,
+        return {
-}));
+            width: '100vw',
+            height: '100vh',
+            maxWidth: '100%',
+            maxHeight: '100%',
+            borderRadius: '0',
+        };
+    } else {
+        return {
+            width: `${popupWidthPx.value}px`,
+            height: `${popupHeightPx.value}px`,
+        };
+    }
+});
 
 // --- 动态计算属性 (根据模式选择数据源) ---
 
@@ -580,22 +597,55 @@ onBeforeUnmount(() => {
   position: relative; /* 为拖拽手柄定位 */
 }
 
+/* 移动设备上布满屏幕 */
+@media (max-width: 768px) {
+  .editor-popup {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+  .editor-header {
+    padding: 1.5rem 2.5rem 0.5rem 1rem; /* 增加顶部内边距以确保关闭按钮可见 */
+  }
+  .editor-actions {
+    flex-wrap: wrap;
+    max-width: 100%;
+    margin-top: 1rem;
+  }
+}
+
+/* 适配横向旋转 */
+@media (orientation: landscape) and (max-width: 1024px) {
+  .editor-popup {
+    width: 100vw;
+    height: 100vh;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+}
+
 /* 标签栏区域 (FileEditorTabs 组件将放在这里) */
 /* .file-tabs-container { ... } */
 
 .editor-header {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   padding: 0.5rem 1rem;
   background-color: #333;
   border-bottom: 1px solid #555;
   font-size: 0.9em;
   flex-shrink: 0;
+  position: relative;
 }
 .editor-header-placeholder {
-    justify-content: space-between; /* 保持关闭按钮在右侧 */
+    flex-direction: column;
+    align-items: flex-start;
     color: #888;
+    position: relative;
 }
 
 .modified-indicator {
@@ -611,6 +661,10 @@ onBeforeUnmount(() => {
   font-size: 1.2em;
   cursor: pointer;
   padding: 0.2rem 0.5rem;
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+  z-index: 10;
 }
 .close-editor-btn:hover {
   color: white;
@@ -647,6 +701,10 @@ onBeforeUnmount(() => {
     display: flex;
     align-items: center;
     gap: 0.8rem; /* 稍微减小间距以容纳下拉菜单 */
+    flex-wrap: wrap;
+    max-width: 100%;
+    justify-content: flex-start;
+    margin-top: 0.5rem;
 }
 
 .save-btn {

packages/frontend/src/composables/useDeviceDetection.ts

@@ -0,0 +1,9 @@
+import { computed } from 'vue';
+
+export function useDeviceDetection() {
+  const isMobile = computed(() => {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  });
+
+  return { isMobile };
+}

packages/frontend/src/views/WorkspaceView.vue

@@ -2,8 +2,8 @@
 import { onMounted, onBeforeUnmount, computed, ref, shallowRef, type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
 import { useLayoutStore } from '../stores/layout.store';
+import { useDeviceDetection } from '../composables/useDeviceDetection';
 import { useConnectionsStore, type ConnectionInfo } from '../stores/connections.store';
 import AddConnectionFormComponent from '../components/AddConnectionForm.vue';
 import TerminalTabBar from '../components/TerminalTabBar.vue';
@@ -36,8 +36,7 @@ const layoutStore = useLayoutStore();
 const commandHistoryStore = useCommandHistoryStore();
 const connectionsStore = useConnectionsStore(); 
 const { isHeaderVisible } = storeToRefs(layoutStore);
-const breakpoints = useBreakpoints(breakpointsTailwind); // +++ 初始化 Breakpoints +++
+const { isMobile } = useDeviceDetection();
-const isMobile = breakpoints.smaller('md'); // +++ 定义 isMobile (小于 md 断点) +++
 
 // --- 从 Store 获取响应式状态和 Getters ---
 const { sessionTabsWithStatus, activeSessionId, activeSession, isRdpModalOpen, rdpConnectionInfo, isVncModalOpen, vncConnectionInfo } = storeToRefs(sessionStore); // 使用 storeToRefs 获取 RDP 和 VNC 状态