优化 FileList 组件的结构,调整搜索框样式和列表渲染方式,提升用户体验。同时,修复样式文件中卡片和列表的背景设置,确保在不同主题下的显示效果一致。

This commit is contained in:
jxxghp
2025-04-19 07:54:44 +08:00
parent d0ea7f3fd9
commit 913e1728e0
2 changed files with 15 additions and 11 deletions

View File

@@ -559,7 +559,7 @@ onMounted(() => {
hide-details
flat
density="compact"
variant="tonal"
variant="plain"
placeholder="搜索 ..."
prepend-inner-icon="mdi-filter-outline"
class="me-2"
@@ -616,7 +616,7 @@ onMounted(() => {
</VCardText>
<!-- 目录和文件列表 -->
<VCardText v-else-if="dirs.length || files.length" class="p-0">
<div class="text-high-emphasis">
<VList class="text-high-emphasis">
<VVirtualScroll :items="[...dirs, ...files]" :style="listStyle">
<template #default="{ item }">
<VHover>
@@ -678,7 +678,7 @@ onMounted(() => {
</VHover>
</template>
</VVirtualScroll>
</div>
</VList>
</VCardText>
<VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5">
没有目录或文件

View File

@@ -335,12 +335,6 @@ html.v-overlay-scroll-blocked {
.navbar-blur::after {
background: transparent;
}
// 卡片
.v-card:not(.no-blur) {
backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-surface), 0.3);
}
// 列表
.v-list {
@@ -348,6 +342,16 @@ html.v-overlay-scroll-blocked {
background-color: rgba(var(--v-theme-surface), 0.3);
}
// 卡片
.v-card:not(.no-blur) {
backdrop-filter: blur(10px);
background-color: rgba(var(--v-theme-surface), 0.3);
.v-list {
background-color: transparent;
backdrop-filter: none;
}
}
// 工具栏
.v-toolbar {
backdrop-filter: blur(10px);
@@ -392,12 +396,12 @@ html[data-theme="transparent"] {
.v-overlay__content {
backdrop-filter: blur(10px) !important;
.v-card:not(.bg-primary) {
.v-list {
backdrop-filter: blur(10px);
background-color: rgb(var(--v-theme-surface), 0.5) !important;
}
.v-list {
.v-card:not(.bg-primary) {
backdrop-filter: blur(10px);
background-color: rgb(var(--v-theme-surface), 0.5) !important;
}