style: 调整文件管理工具栏布局

This commit is contained in:
Wenjie Zhang 2026-06-03 23:33:01 +08:00
parent 2e09fe328e
commit 5a8ecb8e02
3 changed files with 29 additions and 45 deletions

View File

@ -2465,6 +2465,7 @@ watch(currentChatId, (threadId, oldThreadId) => {
margin: 0 auto; margin: 0 auto;
flex-grow: 1; flex-grow: 1;
padding: 1rem var(--page-padding); padding: 1rem var(--page-padding);
padding-right: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

View File

@ -2,21 +2,20 @@
<div class="file-table-container"> <div class="file-table-container">
<div class="panel-header"> <div class="panel-header">
<div class="panel-actions"> <div class="panel-actions">
<slot name="toolbar-extra" /> <a-input
<div class="panel-actions-default"> v-model:value="filenameFilter"
<a-input placeholder="搜索"
v-model:value="filenameFilter" size="small"
placeholder="搜索" class="action-searcher"
size="small" allow-clear
class="action-searcher" @change="onFilterChange"
allow-clear >
@change="onFilterChange" <template #prefix>
> <Search size="14" style="color: var(--gray-400)" />
<template #prefix> </template>
<Search size="14" style="color: var(--gray-400)" /> </a-input>
</template>
</a-input>
<div class="panel-actions-default">
<a-dropdown trigger="click"> <a-dropdown trigger="click">
<a-button <a-button
type="text" type="text"
@ -1215,7 +1214,6 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
.action-searcher { .action-searcher {
width: 120px; width: 120px;
margin-right: 8px;
border-radius: 6px; border-radius: 6px;
padding: 4px 8px; padding: 4px 8px;
border: none; border: none;
@ -1225,6 +1223,7 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
@container file-table (max-width: 480px) { @container file-table (max-width: 480px) {
.panel-actions { .panel-actions {
.action-searcher,
.panel-actions-default { .panel-actions-default {
display: none; display: none;
} }
@ -1405,9 +1404,11 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 8px; border-radius: 6px;
padding: 4px; padding: 4px;
color: var(--gray-600); color: var(--gray-600);
background-color: var(--gray-0);
box-shadow: 0 0 0 1px var(--shadow-1);
transition: all 0.1s ease; transition: all 0.1s ease;
font-size: 12px; font-size: 12px;
width: auto; width: auto;
@ -1436,9 +1437,9 @@ import ChunkParamsConfig from '@/components/ChunkParamsConfig.vue'
.panel-action-btn.active { .panel-action-btn.active {
color: var(--main-color); color: var(--main-color);
background-color: var(--gray-100); background-color: var(--main-10);
font-weight: 600; font-weight: 600;
box-shadow: 0 0 0 1px var(--shadow-1); box-shadow: 0 0 0 1px var(--main-200);
} }
.action-trigger-btn { .action-trigger-btn {

View File

@ -79,6 +79,14 @@
<FileUp :size="14" /> <FileUp :size="14" />
<span>上传</span> <span>上传</span>
</button> </button>
<button
type="button"
class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
@click="showCreateFolderModal"
>
<FolderPlus :size="14" />
<span>新建文件夹</span>
</button>
</div> </div>
</div> </div>
<div class="file-panel-status"> <div class="file-panel-status">
@ -134,20 +142,7 @@
</div> </div>
</div> </div>
</div> </div>
<FileTable ref="fileTableRef"> <FileTable ref="fileTableRef" />
<template #toolbar-extra>
<div class="file-panel-actions">
<button
type="button"
class="lucide-icon-btn extension-panel-action extension-panel-action-secondary"
@click="showCreateFolderModal"
>
<FolderPlus :size="14" />
<span>新建文件夹</span>
</button>
</div>
</template>
</FileTable>
</div> </div>
<div v-show="activeTab === 'query'" class="tab-panel query-config-panel"> <div v-show="activeTab === 'query'" class="tab-panel query-config-panel">
@ -1036,14 +1031,6 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
} }
.file-panel-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.file-management-info { .file-management-info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -1237,11 +1224,6 @@ onMounted(() => {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }
.file-panel-actions {
width: 100%;
justify-content: flex-start;
}
} }
</style> </style>