From 39fd152aa5085b63609dea6ae25515bf05854746 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 13 May 2025 12:48:43 +0800
Subject: [PATCH] update

---
 .../frontend/src/components/FileManager.vue   | 23 +++++++++++++------
 packages/frontend/src/views/WorkspaceView.vue | 13 ++++++-----
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/FileManager.vue b/packages/frontend/src/components/FileManager.vue
index 3faf5bb..5b06bc3 100644
--- a/packages/frontend/src/components/FileManager.vue
+++ b/packages/frontend/src/components/FileManager.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect, type PropType, readonly, defineExpose, shallowRef } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect, type PropType, readonly, defineExpose, shallowRef, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router'; 
+import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia'; 
 import { createSftpActionsManager, type WebSocketDependencies } from '../composables/useSftpActions';
 import { useFileUploader } from '../composables/useFileUploader';
@@ -44,6 +44,10 @@ const props = defineProps({
     type: Object as PropType<WebSocketDependencies>,
     required: true,
   },
+  isMobile: {
+    type: Boolean,
+    default: false
+  }
 });
 
 // --- 核心 Composables ---
@@ -651,6 +655,7 @@ const {
   isConnected: props.wsDeps.isConnected,
   isSftpReady: props.wsDeps.isSftpReady,
   clipboardState: readonly(clipboardState), // +++ 传递剪贴板状态 (只读) +++
+  isMobile: toRef(props, 'isMobile'), // +++ 传递 isMobile prop 作为 ref +++
   t,
   // --- 传递回调函数 ---
   // 修改：确保在调用前检查 currentSftpManager.value
@@ -1322,7 +1327,7 @@ const handleOpenEditorClick = () => {
             <!-- Path Bar -->
             <div class="flex items-center bg-background border border-border rounded px-1.5 py-0.5 overflow-hidden min-w-[100px] flex-shrink">
               <span v-show="!isEditingPath" class="text-text-secondary whitespace-nowrap overflow-x-auto pr-2">
-                {{ t('fileManager.currentPath') }}:
+                <span v-if="!props.isMobile">{{ t('fileManager.currentPath') }}:</span>
                 <strong
                   @click="startPathEdit"
                   :title="t('fileManager.editPathTooltip')"
@@ -1358,9 +1363,10 @@ const handleOpenEditorClick = () => {
               :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
               :title="t('fileManager.actions.openEditor', 'Open Popup Editor')"
               class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
+              :class="{ 'px-1.5': props.isMobile }"
             >
               <i class="far fa-edit text-sm"></i> <!-- 使用编辑图标 -->
-              <span>{{ t('fileManager.actions.openEditor', 'Open Editor') }}</span> <!-- 添加 i18n key -->
+              <span v-if="!props.isMobile">{{ t('fileManager.actions.openEditor', 'Open Editor') }}</span> <!-- 添加 i18n key -->
             </button>
             <!-- 上传按钮 -->
             <button
@@ -1368,27 +1374,30 @@ const handleOpenEditorClick = () => {
               :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
               :title="t('fileManager.actions.uploadFile')"
               class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
+              :class="{ 'px-1.5': props.isMobile }"
             >
               <i class="fas fa-upload text-sm"></i>
-              <span>{{ t('fileManager.actions.upload') }}</span>
+              <span v-if="!props.isMobile">{{ t('fileManager.actions.upload') }}</span>
             </button>
             <button
               @click="handleNewFolderContextMenuClick"
               :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
               :title="t('fileManager.actions.newFolder')"
               class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
+              :class="{ 'px-1.5': props.isMobile }"
             >
               <i class="fas fa-folder-plus text-sm"></i>
-              <span>{{ t('fileManager.actions.newFolder') }}</span>
+              <span v-if="!props.isMobile">{{ t('fileManager.actions.newFolder') }}</span>
             </button>
             <button
               @click="handleNewFileContextMenuClick"
               :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
               :title="t('fileManager.actions.newFile')"
               class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
+              :class="{ 'px-1.5': props.isMobile }"
             >
               <i class="far fa-file-alt text-sm"></i>
-              <span>{{ t('fileManager.actions.newFile') }}</span>
+              <span v-if="!props.isMobile">{{ t('fileManager.actions.newFile') }}</span>
             </button>
          </div>
      </div>
diff --git a/packages/frontend/src/views/WorkspaceView.vue b/packages/frontend/src/views/WorkspaceView.vue
index 612d2f5..6c80368 100644
--- a/packages/frontend/src/views/WorkspaceView.vue
+++ b/packages/frontend/src/views/WorkspaceView.vue
@@ -807,13 +807,14 @@ const closeFileManagerModal = () => {
           </button>
         </div>
         <div class="flex-grow overflow-hidden">
-          <template v-for="props in fileManagerPropsMap.values()" :key="props.sessionId">
-            <div v-show="props.sessionId === currentFileManagerSessionId" class="h-full">
+          <template v-for="propsData in fileManagerPropsMap.values()" :key="`${propsData.sessionId}-${isMobile}`">
+            <div v-show="propsData.sessionId === currentFileManagerSessionId" class="h-full">
               <FileManager
-                :session-id="props.sessionId"
-                :instance-id="props.instanceId"
-                :db-connection-id="props.dbConnectionId"
-                :ws-deps="props.wsDeps"
+                :session-id="propsData.sessionId"
+                :instance-id="propsData.instanceId"
+                :db-connection-id="propsData.dbConnectionId"
+                :ws-deps="propsData.wsDeps"
+                :is-mobile="isMobile"
                 class="h-full"
               />
             </div>