From 21f82a1df7ed66bcf0c7caec5ae7766ebbb1ea32 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Wed, 30 Apr 2025 14:08:41 +0800
Subject: [PATCH] Update FileManager.vue

---
 .../frontend/src/components/FileManager.vue   | 175 +++++++++---------
 1 file changed, 89 insertions(+), 86 deletions(-)

diff --git a/packages/frontend/src/components/FileManager.vue b/packages/frontend/src/components/FileManager.vue
index 752d19a..9270d43 100644
--- a/packages/frontend/src/components/FileManager.vue
+++ b/packages/frontend/src/components/FileManager.vue
@@ -1150,93 +1150,96 @@ defineExpose({ focusSearchInput, startPathEdit });
 <template>
   <div class="flex flex-col h-full overflow-hidden bg-background text-foreground text-sm font-sans">
     <div class="flex items-center justify-between flex-wrap gap-2 p-2 bg-header  flex-shrink-0">
-        <!-- 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') }}:
-            <strong
-              @click="startPathEdit"
-              :title="t('fileManager.editPathTooltip')"
-              class="font-medium text-link ml-1 px-1 rounded cursor-text transition-colors duration-200"
-              :class="{
-                'hover:bg-black/5': currentSftpManager && props.wsDeps.isConnected.value,
-                'opacity-60 cursor-not-allowed': !currentSftpManager || !props.wsDeps.isConnected.value
-              }"
-            >
-              {{ currentSftpManager?.currentPath?.value ?? '/' }}
-            </strong>
-          </span>
-          <input
-            v-show="isEditingPath"
-            ref="pathInputRef"
-            type="text"
-            v-model="editablePath"
-            class="flex-grow bg-transparent text-foreground p-0.5 outline-none min-w-[100px]"
-            data-focus-id="fileManagerPathInput"
-            @keyup.enter="handlePathInput"
-            @blur="handlePathInput"
-            @keyup.esc="cancelPathEdit"
-          />
-        </div>
-        <!-- Path Actions -->
-        <div class="flex items-center flex-shrink-0 mr-auto">
-          <!-- 新增：CD 到终端按钮 -->
-          <button
-            class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
-            @click.stop="sendCdCommandToTerminal"
-            :disabled="!currentSftpManager || !props.wsDeps.isConnected.value || isEditingPath"
-            :title="t('fileManager.actions.cdToTerminal', 'Change terminal directory to current path')"
-          >
-            <i class="fas fa-terminal text-base"></i>
-          </button>
-          <!-- 刷新按钮 -->
-          <button
-            class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
-            @click.stop="currentSftpManager?.loadDirectory(currentSftpManager?.currentPath?.value ?? '/', true)"
-            :disabled="!currentSftpManager || !props.wsDeps.isConnected.value || isEditingPath"
-            :title="t('fileManager.actions.refresh')"
-          >
-            <i class="fas fa-sync-alt text-base"></i>
-          </button>
-          <button
-            class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
-            @click.stop="handleItemClick($event, { filename: '..', longname: '..', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })"
-            :disabled="!currentSftpManager || !props.wsDeps.isConnected.value || currentSftpManager?.currentPath?.value === '/' || isEditingPath"
-            :title="t('fileManager.actions.parentDirectory')"
-          >
-            <i class="fas fa-arrow-up text-base"></i>
-          </button>
-         <!-- Search Area -->
-         <div class="flex items-center flex-shrink-0">
-             <button
-                 v-if="!isSearchActive"
-                 class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
-                 @click.stop="activateSearch"
-                 :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
-                 :title="t('fileManager.searchPlaceholder')"
-             >
-                 <i class="fas fa-search text-base"></i>
-             </button>
-             <div v-else class="relative flex items-center min-w-[150px] flex-shrink">
-                 <i class="fas fa-search absolute left-2 top-1/2 -translate-y-1/2 text-text-secondary pointer-events-none"></i>
-                 <input
-                     ref="searchInputRef"
-                     type="text"
-                     v-model="searchQuery"
-                     :placeholder="t('fileManager.searchPlaceholder')"
-                     class="flex-grow bg-background border border-border rounded pl-7 pr-2 py-1 text-foreground text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary min-w-[10px] transition-colors duration-200"
-                     data-focus-id="fileManagerSearch"
-                     @blur="deactivateSearch"
-                     @keyup.esc="cancelSearch"
-                     @keydown.up.prevent="handleKeydown"
-                     @keydown.down.prevent="handleKeydown"
-                     @keydown.enter.prevent="handleKeydown"
-                 />
-                 <!-- Optional: Clear button -->
-                 <!-- <button @click="searchQuery = ''; searchInputRef?.focus()" v-if="searchQuery" class="absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-foreground">&times;</button> -->
+        <!-- Wrapper for Path Actions and Path Bar -->
+        <div class="flex items-center gap-2 flex-shrink"> <!-- Added gap-2 -->
+            <!-- Path Actions -->
+            <div class="flex items-center flex-shrink-0"> <!-- Removed mr-auto -->
+              <!-- 新增：CD 到终端按钮 -->
+              <button
+                class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
+                @click.stop="sendCdCommandToTerminal"
+                :disabled="!currentSftpManager || !props.wsDeps.isConnected.value || isEditingPath"
+                :title="t('fileManager.actions.cdToTerminal', 'Change terminal directory to current path')"
+              >
+                <i class="fas fa-terminal text-base"></i>
+              </button>
+              <!-- 刷新按钮 -->
+              <button
+                class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
+                @click.stop="currentSftpManager?.loadDirectory(currentSftpManager?.currentPath?.value ?? '/', true)"
+                :disabled="!currentSftpManager || !props.wsDeps.isConnected.value || isEditingPath"
+                :title="t('fileManager.actions.refresh')"
+              >
+                <i class="fas fa-sync-alt text-base"></i>
+              </button>
+              <button
+                class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
+                @click.stop="handleItemClick($event, { filename: '..', longname: '..', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })"
+                :disabled="!currentSftpManager || !props.wsDeps.isConnected.value || currentSftpManager?.currentPath?.value === '/' || isEditingPath"
+                :title="t('fileManager.actions.parentDirectory')"
+              >
+                <i class="fas fa-arrow-up text-base"></i>
+              </button>
+             <!-- Search Area -->
+             <div class="flex items-center flex-shrink-0">
+                 <button
+                     v-if="!isSearchActive"
+                     class="flex items-center justify-center w-7 h-7 text-text-secondary rounded transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-black/10 hover:enabled:text-foreground"
+                     @click.stop="activateSearch"
+                     :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
+                     :title="t('fileManager.searchPlaceholder')"
+                 >
+                     <i class="fas fa-search text-base"></i>
+                 </button>
+                 <div v-else class="relative flex items-center min-w-[150px] flex-shrink">
+                     <i class="fas fa-search absolute left-2 top-1/2 -translate-y-1/2 text-text-secondary pointer-events-none"></i>
+                     <input
+                         ref="searchInputRef"
+                         type="text"
+                         v-model="searchQuery"
+                         :placeholder="t('fileManager.searchPlaceholder')"
+                         class="flex-grow bg-background border border-border rounded pl-7 pr-2 py-1 text-foreground text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary min-w-[10px] transition-colors duration-200"
+                         data-focus-id="fileManagerSearch"
+                         @blur="deactivateSearch"
+                         @keyup.esc="cancelSearch"
+                         @keydown.up.prevent="handleKeydown"
+                         @keydown.down.prevent="handleKeydown"
+                         @keydown.enter.prevent="handleKeydown"
+                     />
+                     <!-- Optional: Clear button -->
+                     <!-- <button @click="searchQuery = ''; searchInputRef?.focus()" v-if="searchQuery" class="absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-foreground">&times;</button> -->
+                 </div>
              </div>
-         </div>
-        </div> <!-- End Path Actions -->
+            </div> <!-- End Path Actions -->
+            <!-- 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') }}:
+                <strong
+                  @click="startPathEdit"
+                  :title="t('fileManager.editPathTooltip')"
+                  class="font-medium text-link ml-1 px-1 rounded cursor-text transition-colors duration-200"
+                  :class="{
+                    'hover:bg-black/5': currentSftpManager && props.wsDeps.isConnected.value,
+                    'opacity-60 cursor-not-allowed': !currentSftpManager || !props.wsDeps.isConnected.value
+                  }"
+                >
+                  {{ currentSftpManager?.currentPath?.value ?? '/' }}
+                </strong>
+              </span>
+              <input
+                v-show="isEditingPath"
+                ref="pathInputRef"
+                type="text"
+                v-model="editablePath"
+                class="flex-grow bg-transparent text-foreground p-0.5 outline-none min-w-[100px]"
+                data-focus-id="fileManagerPathInput"
+                @keyup.enter="handlePathInput"
+                @blur="handlePathInput"
+                @keyup.esc="cancelPathEdit"
+              />
+            </div>
+        </div> <!-- End Wrapper -->
        <!-- Main Actions Bar -->
        <div class="flex items-center gap-2 flex-shrink-0">
             <input type="file" ref="fileInputRef" @change="handleFileSelected" multiple class="hidden" />