From 5f91fd925d362ef1ef716c94adcbd961b0424366 Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Wed, 18 Feb 2026 21:08:18 +0800
Subject: [PATCH] fix(desktop-ui): stabilize files toolbar layout

---
 desktop-client/src/App.vue | 111 ++++++++++++++++++++++++++++---------
 1 file changed, 86 insertions(+), 25 deletions(-)

diff --git a/desktop-client/src/App.vue b/desktop-client/src/App.vue
index f6d8b91..0445e82 100644
--- a/desktop-client/src/App.vue
+++ b/desktop-client/src/App.vue
@@ -1710,30 +1710,34 @@ onBeforeUnmount(() => {
               {{ crumb.label }}<span v-if="idx < toolbarCrumbs.length - 1"> / </span>
             </button>
           </div>
-          <div class="tool-right">
+          <div class="tool-right" :class="{ 'tool-right-files': nav === 'files' }">
             <template v-if="nav === 'files'">
-              <input
-                v-model="searchKeyword"
-                type="text"
-                class="search-input"
-                placeholder="输入关键词回车全局搜索..."
-                @keyup.enter="runGlobalSearch"
-              />
-              <select v-model="fileViewState.filter" class="compact-select">
-                <option v-for="opt in fileTypeFilterOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
-              </select>
-              <select v-model="fileViewState.sortBy" class="compact-select">
-                <option v-for="opt in fileSortOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
-              </select>
-              <button class="action-btn" @click="toggleFileSortOrder">{{ fileViewState.sortOrder === "asc" ? "升序" : "降序" }}</button>
-              <button class="action-btn" :class="{ active: batchMode }" @click="toggleBatchMode">{{ batchMode ? "退出批量" : "批量选择" }}</button>
-              <button v-if="batchMode" class="action-btn" @click="clearBatchSelection">清空勾选</button>
-              <button v-if="batchMode" class="action-btn danger" :disabled="batchSelectedItems.length === 0" @click="batchDeleteSelected">批量删除</button>
-              <button v-if="batchMode" class="action-btn" :disabled="batchSelectedItems.length === 0" @click="batchShareSelected">批量分享</button>
-              <button v-if="batchMode" class="action-btn" :disabled="batchSelectedItems.length === 0" @click="batchDirectLinkSelected">批量直链</button>
-              <button class="action-btn" @click="runGlobalSearch">搜索</button>
-              <button class="action-btn" @click="createFolder">新建文件夹</button>
-              <button class="action-btn" @click="loadFiles(pathState.currentPath)">刷新</button>
+              <div class="file-search-row">
+                <input
+                  v-model="searchKeyword"
+                  type="text"
+                  class="search-input"
+                  placeholder="输入关键词回车全局搜索..."
+                  @keyup.enter="runGlobalSearch"
+                />
+                <button class="action-btn" @click="runGlobalSearch">搜索</button>
+              </div>
+              <div class="file-actions-row">
+                <select v-model="fileViewState.filter" class="compact-select">
+                  <option v-for="opt in fileTypeFilterOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+                </select>
+                <select v-model="fileViewState.sortBy" class="compact-select">
+                  <option v-for="opt in fileSortOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+                </select>
+                <button class="action-btn" @click="toggleFileSortOrder">{{ fileViewState.sortOrder === "asc" ? "升序" : "降序" }}</button>
+                <button class="action-btn" :class="{ active: batchMode }" @click="toggleBatchMode">{{ batchMode ? "退出批量" : "批量选择" }}</button>
+                <button v-if="batchMode" class="action-btn" @click="clearBatchSelection">清空勾选</button>
+                <button v-if="batchMode" class="action-btn danger" :disabled="batchSelectedItems.length === 0" @click="batchDeleteSelected">批量删除</button>
+                <button v-if="batchMode" class="action-btn" :disabled="batchSelectedItems.length === 0" @click="batchShareSelected">批量分享</button>
+                <button v-if="batchMode" class="action-btn" :disabled="batchSelectedItems.length === 0" @click="batchDirectLinkSelected">批量直链</button>
+                <button class="action-btn" @click="createFolder">新建文件夹</button>
+                <button class="action-btn" @click="loadFiles(pathState.currentPath)">刷新</button>
+              </div>
             </template>
             <template v-else-if="nav === 'transfers'">
               <button class="action-btn" @click="toggleTransferQueuePause">{{ transferQueue.paused ? "继续队列" : "暂停队列" }}</button>
@@ -2402,7 +2406,7 @@ select:focus {
 
 .work-area {
   display: grid;
-  grid-template-rows: 52px 1fr;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 12px;
 }
 
@@ -2413,7 +2417,7 @@ select:focus {
   padding: 8px 12px;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: 12px;
 }
 
@@ -2423,6 +2427,7 @@ select:focus {
   align-items: center;
   gap: 4px;
   overflow-x: auto;
+  padding-top: 3px;
 }
 
 .crumb-btn {
@@ -2447,6 +2452,30 @@ select:focus {
   gap: 8px;
   flex-wrap: wrap;
   justify-content: flex-end;
+  min-width: 0;
+}
+
+.tool-right-files {
+  flex: 1 1 700px;
+  min-width: 460px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.file-search-row {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.file-actions-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .search-input {
@@ -2456,6 +2485,12 @@ select:focus {
   font-size: 13px;
 }
 
+.tool-right-files .search-input {
+  width: auto;
+  flex: 1 1 420px;
+  min-width: 220px;
+}
+
 .compact-select {
   width: 120px;
   height: 36px;
@@ -3150,6 +3185,32 @@ select:focus {
 }
 
 @media (max-width: 1260px) {
+  .top-tools {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .crumbs {
+    padding-top: 0;
+  }
+
+  .tool-right {
+    justify-content: flex-start;
+  }
+
+  .tool-right-files {
+    min-width: 0;
+  }
+
+  .file-search-row,
+  .file-actions-row {
+    justify-content: flex-start;
+  }
+
+  .tool-right-files .search-input {
+    min-width: 0;
+  }
+
   .main-grid {
     grid-template-columns: 1fr;
   }