优化多个组件的 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
+31 -4
View File
@@ -340,12 +340,12 @@ watch(
}" }"
> >
<div <div
class="relative flex flex-row items-start pa-3 justify-between grow" class="relative flex flex-row items-start pa-3 justify-between grow card-backdrop"
:style="{ background: `${backgroundColor}` }" :style="{ '--base-color': backgroundColor }"
> >
<div <div
class="absolute inset-0 bg-cover bg-center" class="absolute inset-0 bg-cover bg-center card-backdrop-blur"
:style="{ background: `${backgroundColor}`, filter: 'brightness(0.5)' }" :style="{ '--base-color': backgroundColor }"
/> />
<div class="relative flex-1 min-w-0"> <div class="relative flex-1 min-w-0">
<VCardTitle class="text-white text-lg px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis"> <VCardTitle class="text-white text-lg px-2 text-shadow whitespace-nowrap overflow-hidden text-ellipsis">
@@ -466,6 +466,33 @@ watch(
inset: 0; 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 { .author-info {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -140,7 +140,7 @@ const dropdownItems = ref([
<VDivider /> <VDivider />
<VDialogCloseBtn @click="emit('close')" /> <VDialogCloseBtn @click="emit('close')" />
<VList lines="two"> <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> <template #loading>
<LoadingBanner /> <LoadingBanner />
</template> </template>
+5 -15
View File
@@ -548,7 +548,7 @@ onMounted(() => {
<template> <template>
<VCard class="d-flex flex-column w-full h-full rounded-t-0" :class="{ 'rounded-s-0': showTree }"> <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"> <IconBtn v-if="display.mdAndUp.value">
<VIcon v-if="showTree" icon="mdi-file-tree" @click="switchFileTree(false)" /> <VIcon v-if="showTree" icon="mdi-file-tree" @click="switchFileTree(false)" />
<VIcon v-else icon="mdi-file-tree-outline" @click="switchFileTree(true)" /> <VIcon v-else icon="mdi-file-tree-outline" @click="switchFileTree(true)" />
@@ -559,7 +559,7 @@ onMounted(() => {
hide-details hide-details
flat flat
density="compact" density="compact"
variant="solo-filled" variant="tonal"
placeholder="搜索 ..." placeholder="搜索 ..."
prepend-inner-icon="mdi-filter-outline" prepend-inner-icon="mdi-filter-outline"
class="me-2" class="me-2"
@@ -591,7 +591,7 @@ onMounted(() => {
<VIcon icon="mdi-delete-outline" color="error" /> <VIcon icon="mdi-delete-outline" color="error" />
</IconBtn> </IconBtn>
</span> </span>
</VToolbar> </div>
<VCardText v-if="loading" class="text-center flex flex-col items-center"> <VCardText v-if="loading" class="text-center flex flex-col items-center">
<VProgressCircular size="48" indeterminate color="primary" /> <VProgressCircular size="48" indeterminate color="primary" />
</VCardText> </VCardText>
@@ -616,7 +616,7 @@ onMounted(() => {
</VCardText> </VCardText>
<!-- 目录和文件列表 --> <!-- 目录和文件列表 -->
<VCardText v-else-if="dirs.length || files.length" class="p-0"> <VCardText v-else-if="dirs.length || files.length" class="p-0">
<VList subheader> <div class="text-high-emphasis">
<VVirtualScroll :items="[...dirs, ...files]" :style="listStyle"> <VVirtualScroll :items="[...dirs, ...files]" :style="listStyle">
<template #default="{ item }"> <template #default="{ item }">
<VHover> <VHover>
@@ -678,7 +678,7 @@ onMounted(() => {
</VHover> </VHover>
</template> </template>
</VVirtualScroll> </VVirtualScroll>
</VList> </div>
</VCardText> </VCardText>
<VCardText v-else-if="filter" class="grow d-flex justify-center align-center grey--text py-5"> <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" @close="nameTestDialog = false"
/> />
</template> </template>
<style lang="scss" scoped>
.v-card {
block-size: 100%;
}
.v-toolbar {
background: rgb(var(--v-table-header-background));
}
</style>
+1 -1
View File
@@ -109,7 +109,7 @@ async function fetchData({ done }: { done: any }) {
<template> <template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData"> <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
<template #loading /> <template #loading />
<template #empty /> <template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0"> <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
+1 -1
View File
@@ -110,7 +110,7 @@ async function fetchData({ done }: { done: any }) {
<template> <template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData"> <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
<template #loading /> <template #loading />
<template #empty /> <template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0"> <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
+1 -1
View File
@@ -622,7 +622,7 @@ onMounted(async () => {
side="end" side="end"
:items="displayUninstalledList" :items="displayUninstalledList"
@load="loadMarketMore" @load="loadMarketMore"
class="overflow-hidden" class="overflow-visible"
> >
<template #loading /> <template #loading />
<template #empty /> <template #empty />
+1 -1
View File
@@ -107,7 +107,7 @@ async function fetchData({ done }: { done: any }) {
<template> <template>
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData"> <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
<template #loading /> <template #loading />
<template #empty /> <template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0"> <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
+1 -1
View File
@@ -117,7 +117,7 @@ function removeData(id: number) {
<template> <template>
<VPageContentTitle v-if="keyword" :title="`搜索:${keyword}`" /> <VPageContentTitle v-if="keyword" :title="`搜索:${keyword}`" />
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-hidden" @load="fetchData"> <VInfiniteScroll mode="intersect" side="end" :items="dataList" class="overflow-visible" @load="fetchData">
<template #loading /> <template #loading />
<template #empty /> <template #empty />
<div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card" tabindex="0"> <div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card" tabindex="0">
+1 -1
View File
@@ -101,7 +101,7 @@ onBeforeUnmount(() => {
:mode="!isLoaded ? 'intersect' : 'manual'" :mode="!isLoaded ? 'intersect' : 'manual'"
side="start" side="start"
:items="messages" :items="messages"
class="overflow-hidden" class="overflow-visible"
@load="loadMessages" @load="loadMessages"
load-more-text="加载更多 ..." load-more-text="加载更多 ..."
> >
+1 -1
View File
@@ -598,7 +598,7 @@ function loadMore({ done }: { done: any }) {
</VDialog> </VDialog>
<!-- 资源列表 --> <!-- 资源列表 -->
<VInfiniteScroll mode="intersect" side="end" :items="displayDataList" class="overflow-hidden" @load="loadMore"> <VInfiniteScroll mode="intersect" side="end" :items="displayDataList" class="overflow-visible" @load="loadMore">
<template #loading /> <template #loading />
<template #empty /> <template #empty />
<div class="grid gap-4 grid-torrent-card items-start"> <div class="grid gap-4 grid-torrent-card items-start">
+1 -1
View File
@@ -583,7 +583,7 @@ onMounted(() => {
mode="intersect" mode="intersect"
side="end" side="end"
:items="displayDataList" :items="displayDataList"
class="resource-list overflow-hidden" class="resource-list overflow-visible"
@load="loadMore" @load="loadMore"
> >
<template #loading /> <template #loading />