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

2026-05-24 17:59:40 +08:00 · 2025-04-18 14:43:32 +08:00
parent 476d2f7e81
commit 06f4898ce8
11 changed files with 45 additions and 28 deletions
--- 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;
--- 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>
--- 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>
--- 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">
--- 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">
--- 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 />
--- 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">
--- 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">
--- 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="加载更多 ..."
  >
--- 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">
--- 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 />