优化多个组件的 VInfiniteScroll 属性,将 overflow-hidden 修改为 overflow-visible,以改善滚动体验。同时,更新 PluginCard.vue 的样式,添加 card-backdrop 和 card-backdrop-blur 类,提升视觉效果。

This commit is contained in:
jxxghp
2025-04-18 14:43:32 +08:00
parent 476d2f7e81
commit 06f4898ce8
11 changed files with 45 additions and 28 deletions

View File

@@ -340,12 +340,12 @@ watch(
}"
>
<div
class="relative flex flex-row items-start pa-3 justify-between grow"
:style="{ background: `${backgroundColor}` }"
class="relative flex flex-row items-start pa-3 justify-between grow card-backdrop"
:style="{ '--base-color': backgroundColor }"
>
<div
class="absolute inset-0 bg-cover bg-center"
:style="{ background: `${backgroundColor}`, filter: 'brightness(0.5)' }"
class="absolute inset-0 bg-cover bg-center card-backdrop-blur"
:style="{ '--base-color': backgroundColor }"
/>
<div class="relative flex-1 min-w-0">
<VCardTitle class="text-white text-lg px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
@@ -466,6 +466,33 @@ watch(
inset: 0;
}
.card-backdrop {
background: rgba(var(--v-theme-primary), 0.2);
&::before {
position: absolute;
background: color-mix(in srgb, var(--base-color) 60%, transparent);
content: '';
inset: 0;
opacity: 0.8;
}
}
.card-backdrop-blur {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: transparent;
&::before {
position: absolute;
background: color-mix(in srgb, var(--base-color) 30%, transparent);
content: '';
inset: 0;
opacity: 0.7;
}
}
.author-info {
display: flex;
align-items: center;

View File

@@ -140,7 +140,7 @@ const dropdownItems = ref([
<VDivider />
<VDialogCloseBtn @click="emit('close')" />
<VList lines="two">
<VInfiniteScroll mode="intersect" side="end" :items="historyList" class="overflow-hidden" @load="loadHistory">
<VInfiniteScroll mode="intersect" side="end" :items="historyList" class="overflow-visible" @load="loadHistory">
<template #loading>
<LoadingBanner />
</template>

View File

@@ -548,7 +548,7 @@ onMounted(() => {
<template>
<VCard class="d-flex flex-column w-full h-full rounded-t-0" :class="{ 'rounded-s-0': showTree }">
<VToolbar v-if="!loading" density="compact" flat color="gray">
<div v-if="!loading" class="flex">
<IconBtn v-if="display.mdAndUp.value">
<VIcon v-if="showTree" icon="mdi-file-tree" @click="switchFileTree(false)" />
<VIcon v-else icon="mdi-file-tree-outline" @click="switchFileTree(true)" />
@@ -559,7 +559,7 @@ onMounted(() => {
hide-details
flat
density="compact"
variant="solo-filled"
variant="tonal"
placeholder="搜索 ..."
prepend-inner-icon="mdi-filter-outline"
class="me-2"
@@ -591,7 +591,7 @@ onMounted(() => {
<VIcon icon="mdi-delete-outline" color="error" />
</IconBtn>
</span>
</VToolbar>
</div>
<VCardText v-if="loading" class="text-center flex flex-col items-center">
<VProgressCircular size="48" indeterminate color="primary" />
</VCardText>
@@ -616,7 +616,7 @@ onMounted(() => {
</VCardText>
<!-- 目录和文件列表 -->
<VCardText v-else-if="dirs.length || files.length" class="p-0">
<VList subheader>
<div class="text-high-emphasis">
<VVirtualScroll :items="[...dirs, ...files]" :style="listStyle">
<template #default="{ item }">
<VHover>
@@ -678,7 +678,7 @@ onMounted(() => {
</VHover>
</template>
</VVirtualScroll>
</VList>
</div>
</VCardText>
<VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5">
没有目录或文件
@@ -729,13 +729,3 @@ onMounted(() => {
@close="nameTestDialog = false"
/>
</template>
<style lang="scss" scoped>
.v-card {
block-size: 100%;
}
.v-toolbar {
background: rgb(var(--v-table-header-background));
}
</style>