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> {{ crumb.label }}<span v-if="idx < toolbarCrumbs.length - 1"> / </span>
</button> </button>
</div> </div>
<div class="tool-right"> <div class="tool-right" :class="{ 'tool-right-files': nav === 'files' }">
<template v-if="nav === 'files'"> <template v-if="nav === 'files'">
<div class="file-search-row">
<input <input
v-model="searchKeyword" v-model="searchKeyword"
type="text" type="text"
@@ -1719,6 +1720,9 @@ onBeforeUnmount(() => {
placeholder="输入关键词回车全局搜索..." placeholder="输入关键词回车全局搜索..."
@keyup.enter="runGlobalSearch" @keyup.enter="runGlobalSearch"
/> />
<button class="action-btn" @click="runGlobalSearch">搜索</button>
</div>
<div class="file-actions-row">
<select v-model="fileViewState.filter" class="compact-select"> <select v-model="fileViewState.filter" class="compact-select">
<option v-for="opt in fileTypeFilterOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option> <option v-for="opt in fileTypeFilterOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
</select> </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 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="batchShareSelected">批量分享</button>
<button v-if="batchMode" class="action-btn" :disabled="batchSelectedItems.length === 0" @click="batchDirectLinkSelected">批量直链</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="createFolder">新建文件夹</button>
<button class="action-btn" @click="loadFiles(pathState.currentPath)">刷新</button> <button class="action-btn" @click="loadFiles(pathState.currentPath)">刷新</button>
</div>
</template> </template>
<template v-else-if="nav === 'transfers'"> <template v-else-if="nav === 'transfers'">
<button class="action-btn" @click="toggleTransferQueuePause">{{ transferQueue.paused ? "继续队列" : "暂停队列" }}</button> <button class="action-btn" @click="toggleTransferQueuePause">{{ transferQueue.paused ? "继续队列" : "暂停队列" }}</button>
@@ -2402,7 +2406,7 @@ select:focus {
.work-area { .work-area {
display: grid; display: grid;
grid-template-rows: 52px 1fr; grid-template-rows: auto minmax(0, 1fr);
gap: 12px; gap: 12px;
} }
@@ -2413,7 +2417,7 @@ select:focus {
padding: 8px 12px; padding: 8px 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-start;
gap: 12px; gap: 12px;
} }
@@ -2423,6 +2427,7 @@ select:focus {
align-items: center; align-items: center;
gap: 4px; gap: 4px;
overflow-x: auto; overflow-x: auto;
padding-top: 3px;
} }
.crumb-btn { .crumb-btn {
@@ -2447,6 +2452,30 @@ select:focus {
gap: 8px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; 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 { .search-input {
@@ -2456,6 +2485,12 @@ select:focus {
font-size: 13px; font-size: 13px;
} }
.tool-right-files .search-input {
width: auto;
flex: 1 1 420px;
min-width: 220px;
}
.compact-select { .compact-select {
width: 120px; width: 120px;
height: 36px; height: 36px;
@@ -3150,6 +3185,32 @@ select:focus {
} }
@media (max-width: 1260px) { @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 { .main-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }