From 06f4898ce8f7ea20b59d6a9aae33801d733c68a1 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 18 Apr 2025 14:43:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=A4=9A=E4=B8=AA=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=20VInfiniteScroll=20=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=EF=BC=8C=E5=B0=86=20overflow-hidden=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=20overflow-visible=EF=BC=8C=E4=BB=A5=E6=94=B9?=
 =?UTF-8?q?=E5=96=84=E6=BB=9A=E5=8A=A8=E4=BD=93=E9=AA=8C=E3=80=82=E5=90=8C?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=20PluginCard.vue=20?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=B7=BB=E5=8A=A0=20card-b?=
 =?UTF-8?q?ackdrop=20=E5=92=8C=20card-backdrop-blur=20=E7=B1=BB=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/PluginCard.vue           | 35 ++++++++++++++++---
 .../dialog/SubscribeHistoryDialog.vue         |  2 +-
 src/components/filebrowser/FileList.vue       | 20 +++--------
 src/views/discover/MediaCardListView.vue      |  2 +-
 src/views/discover/PersonCardListView.vue     |  2 +-
 src/views/plugin/PluginCardListView.vue       |  2 +-
 src/views/subscribe/SubscribePopularView.vue  |  2 +-
 src/views/subscribe/SubscribeShareView.vue    |  2 +-
 src/views/system/MessageView.vue              |  2 +-
 src/views/torrent/TorrentCardListView.vue     |  2 +-
 src/views/torrent/TorrentRowListView.vue      |  2 +-
 11 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index d590eb70..059af503 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -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;
diff --git a/src/components/dialog/SubscribeHistoryDialog.vue b/src/components/dialog/SubscribeHistoryDialog.vue
index 2a448ddf..d14c6233 100644
--- a/src/components/dialog/SubscribeHistoryDialog.vue
+++ b/src/components/dialog/SubscribeHistoryDialog.vue
@@ -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>
diff --git a/src/components/filebrowser/FileList.vue b/src/components/filebrowser/FileList.vue
index d47a6cf6..47467b17 100644
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -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>
diff --git a/src/views/discover/MediaCardListView.vue b/src/views/discover/MediaCardListView.vue
index 30cc8c1c..fdb6959e 100644
--- a/src/views/discover/MediaCardListView.vue
+++ b/src/views/discover/MediaCardListView.vue
@@ -109,7 +109,7 @@ async function fetchData({ done }: { done: any }) {
 
 <template>
   <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 #empty />
     <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
diff --git a/src/views/discover/PersonCardListView.vue b/src/views/discover/PersonCardListView.vue
index be8d5e5b..b664f6e6 100644
--- a/src/views/discover/PersonCardListView.vue
+++ b/src/views/discover/PersonCardListView.vue
@@ -110,7 +110,7 @@ async function fetchData({ done }: { done: any }) {
 
 <template>
   <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 #empty />
     <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue
index a5ff8ca1..f7669918 100644
--- a/src/views/plugin/PluginCardListView.vue
+++ b/src/views/plugin/PluginCardListView.vue
@@ -622,7 +622,7 @@ onMounted(async () => {
               side="end"
               :items="displayUninstalledList"
               @load="loadMarketMore"
-              class="overflow-hidden"
+              class="overflow-visible"
             >
               <template #loading />
               <template #empty />
diff --git a/src/views/subscribe/SubscribePopularView.vue b/src/views/subscribe/SubscribePopularView.vue
index 9beca904..fd8dbfb7 100644
--- a/src/views/subscribe/SubscribePopularView.vue
+++ b/src/views/subscribe/SubscribePopularView.vue
@@ -107,7 +107,7 @@ async function fetchData({ done }: { done: any }) {
 
 <template>
   <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 #empty />
     <div v-if="dataList.length > 0" class="grid gap-4 grid-media-card" tabindex="0">
diff --git a/src/views/subscribe/SubscribeShareView.vue b/src/views/subscribe/SubscribeShareView.vue
index d8025b4d..a01c33f4 100644
--- a/src/views/subscribe/SubscribeShareView.vue
+++ b/src/views/subscribe/SubscribeShareView.vue
@@ -117,7 +117,7 @@ function removeData(id: number) {
 <template>
   <VPageContentTitle v-if="keyword" :title="`搜索：${keyword}`" />
   <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 #empty />
     <div v-if="dataList.length > 0" class="grid gap-4 grid-subscribe-card" tabindex="0">
diff --git a/src/views/system/MessageView.vue b/src/views/system/MessageView.vue
index 7bf7b133..e401cfb4 100644
--- a/src/views/system/MessageView.vue
+++ b/src/views/system/MessageView.vue
@@ -101,7 +101,7 @@ onBeforeUnmount(() => {
     :mode="!isLoaded ? 'intersect' : 'manual'"
     side="start"
     :items="messages"
-    class="overflow-hidden"
+    class="overflow-visible"
     @load="loadMessages"
     load-more-text="加载更多 ..."
   >
diff --git a/src/views/torrent/TorrentCardListView.vue b/src/views/torrent/TorrentCardListView.vue
index d94a749d..ccefa404 100644
--- a/src/views/torrent/TorrentCardListView.vue
+++ b/src/views/torrent/TorrentCardListView.vue
@@ -598,7 +598,7 @@ function loadMore({ done }: { done: any }) {
   </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 #empty />
     <div class="grid gap-4 grid-torrent-card items-start">
diff --git a/src/views/torrent/TorrentRowListView.vue b/src/views/torrent/TorrentRowListView.vue
index 1894a4d2..44550666 100644
--- a/src/views/torrent/TorrentRowListView.vue
+++ b/src/views/torrent/TorrentRowListView.vue
@@ -583,7 +583,7 @@ onMounted(() => {
         mode="intersect"
         side="end"
         :items="displayDataList"
-        class="resource-list overflow-hidden"
+        class="resource-list overflow-visible"
         @load="loadMore"
       >
         <template #loading />