fix(desktop-ui): stabilize files toolbar layout

This commit is contained in:
2026-02-18 21:08:18 +08:00
parent 5c484e33a6
commit 5f91fd925d

View File

@@ -1710,8 +1710,9 @@ 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'">
<div class="file-search-row">
<input
v-model="searchKeyword"
type="text"
@@ -1719,6 +1720,9 @@ onBeforeUnmount(() => {
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>
@@ -1731,9 +1735,9 @@ onBeforeUnmount(() => {
<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>
</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;
}