From ae62847ded95e6f9365a140cbd05a8a3b030f1ec Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 1 Apr 2025 13:17:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E8=B0=83=E6=95=B4=20VCard=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=EF=BC=8C=E6=8F=90=E5=8D=87=E7=95=8C=E9=9D=A2=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E6=80=A7=E5=92=8C=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileBrowser.vue               |  4 +--
 src/components/dialog/AddDownloadDialog.vue  |  2 +-
 src/components/filebrowser/FileList.vue      |  2 +-
 src/components/filebrowser/FileNavigator.vue |  8 ++---
 src/components/filebrowser/FileToolbar.vue   |  2 +-
 src/pages/resource.vue                       | 35 +++++++-------------
 src/plugins/vuetify/defaults.ts              |  2 +-
 src/views/torrent/TorrentCardListView.vue    | 14 ++++----
 src/views/torrent/TorrentRowListView.vue     | 20 +++++------
 9 files changed, 35 insertions(+), 54 deletions(-)

diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 0452c06c..0fe3b483 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -187,7 +187,7 @@ const fileListStyle = computed(() => {
 </script>
 
 <template>
-  <VCard class="mx-auto" :loading="loading > 0">
+  <div class="mx-auto" :loading="loading > 0">
     <div v-if="activeStorage && item">
       <FileToolbar
         :item="item"
@@ -229,5 +229,5 @@ const fileListStyle = computed(() => {
         />
       </div>
     </div>
-  </VCard>
+  </div>
 </template>
diff --git a/src/components/dialog/AddDownloadDialog.vue b/src/components/dialog/AddDownloadDialog.vue
index d96b40b9..2a3846d6 100644
--- a/src/components/dialog/AddDownloadDialog.vue
+++ b/src/components/dialog/AddDownloadDialog.vue
@@ -120,7 +120,7 @@ onMounted(() => {
 <template>
   <VDialog max-width="35rem" scrollable>
     <VCard>
-      <VCardTitle class="py-3">
+      <VCardTitle class="py-3 me-12">
         <VIcon icon="mdi-download" class="me-2" />
         <span v-if="title">{{ torrent?.site_name }} - {{ title }}</span>
         <span v-else>确认下载</span>
diff --git a/src/components/filebrowser/FileList.vue b/src/components/filebrowser/FileList.vue
index 332eaac3..19eb60f8 100644
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -533,7 +533,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard class="d-flex flex-column w-full h-full">
+  <VCard class="d-flex flex-column w-full h-full rounded-t-0 rounded-s-0">
     <VToolbar v-if="!loading" density="compact" flat color="gray">
       <VTextField
         v-if="!isFile"
diff --git a/src/components/filebrowser/FileNavigator.vue b/src/components/filebrowser/FileNavigator.vue
index 447463d8..441f4c5e 100644
--- a/src/components/filebrowser/FileNavigator.vue
+++ b/src/components/filebrowser/FileNavigator.vue
@@ -259,7 +259,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
 </script>
 
 <template>
-  <div class="file-navigator" v-if="!isMobile">
+  <VCard class="file-navigator rounded-t-0 rounded-e-0" v-if="!isMobile">
     <div class="tree-container">
       <!-- 根目录项 -->
       <div
@@ -382,20 +382,19 @@ function getIndentLevel(path: string, ancestorPath: string) {
         </div>
       </template>
     </div>
-  </div>
+  </VCard>
 </template>
 
 <style lang="scss" scoped>
 .file-navigator {
   width: 240px;
-  border-right: 1px solid rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  background-color: var(--v-theme-surface);
   flex-shrink: 0;
   border-bottom-left-radius: 12px;
+  background: rgb(var(--v-table-header-background));
 }
 
 .navigator-header {
@@ -403,7 +402,6 @@ function getIndentLevel(path: string, ancestorPath: string) {
   display: flex;
   align-items: center;
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  background-color: var(--v-theme-surface);
 }
 
 .tree-container {
diff --git a/src/components/filebrowser/FileToolbar.vue b/src/components/filebrowser/FileToolbar.vue
index 2ead04e5..42033652 100644
--- a/src/components/filebrowser/FileToolbar.vue
+++ b/src/components/filebrowser/FileToolbar.vue
@@ -115,7 +115,7 @@ const sortIcon = computed(() => {
 </script>
 
 <template>
-  <VToolbar flat dense>
+  <VToolbar flat dense class="rounded-t-lg border-b">
     <VToolbarItems class="overflow-hidden">
       <VMenu v-if="inProps.storages?.length || 0 > 1" offset-y>
         <template #activator="{ props }">
diff --git a/src/pages/resource.vue b/src/pages/resource.vue
index a6472198..58646445 100644
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -4,11 +4,6 @@ import api from '@/api'
 import type { Context } from '@/api/types'
 import TorrentCardListView from '@/views/torrent/TorrentCardListView.vue'
 import TorrentRowListView from '@/views/torrent/TorrentRowListView.vue'
-import { useDisplay } from 'vuetify'
-
-// APP
-const display = useDisplay()
-const appMode = inject('pwaMode') && display.mdAndDown.value
 
 // 路由参数
 const route = useRoute()
@@ -80,14 +75,14 @@ function startLoadingProgress() {
       }
     }
   }
-  
+
   // 添加错误处理
   progressEventSource.value.onerror = () => {
     setTimeout(() => {
       stopLoadingProgress()
     }, 1000)
   }
-  
+
   // 添加安全超时，确保不会永远卡住
   setTimeout(() => {
     if (progressEventSource.value && progressValue.value < 100) {
@@ -204,7 +199,7 @@ onUnmounted(() => {
     </VFadeTransition>
 
     <!-- 精简标题栏 -->
-    <div v-if="isRefreshed" class="search-header d-flex align-center mb-4">
+    <VCard v-if="isRefreshed" class="search-header d-flex align-center mb-4">
       <div class="search-info-container d-flex align-center flex-wrap">
         <div class="search-title text-primary">资源搜索结果</div>
         <div class="search-tags d-flex flex-wrap">
@@ -216,9 +211,7 @@ onUnmounted(() => {
           <VChip v-if="season" class="search-tag" color="primary" size="small" variant="flat"> 季: {{ season }} </VChip>
         </div>
       </div>
-
       <VSpacer />
-
       <!-- 重新设计的视图切换按钮 -->
       <div class="view-toggle-container">
         <div class="view-toggle-buttons">
@@ -230,7 +223,7 @@ onUnmounted(() => {
           </button>
         </div>
       </div>
-    </div>
+    </VCard>
 
     <!-- 视图切换加载状态 -->
     <VFadeTransition>
@@ -261,10 +254,7 @@ onUnmounted(() => {
 
     <!-- 无数据显示 -->
     <div v-else-if="isRefreshed && !isViewChanging" class="d-flex flex-column align-center justify-center py-8">
-      <NoDataFound
-        :errorTitle="errorTitle"
-        :errorDescription="errorDescription"
-      />
+      <NoDataFound :errorTitle="errorTitle" :errorDescription="errorDescription" />
       <VBtn class="mt-4" color="primary" prepend-icon="mdi-magnify" to="/"> 返回首页 </VBtn>
     </div>
 
@@ -356,7 +346,6 @@ onUnmounted(() => {
 .search-header {
   padding: 12px 16px;
   background-color: rgb(var(--v-theme-surface));
-  border-radius: 12px;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
@@ -546,38 +535,38 @@ onUnmounted(() => {
   .search-header {
     padding: 8px 12px;
   }
-  
+
   .search-title {
     font-size: 0.95rem;
     white-space: nowrap;
   }
-  
+
   .search-info-container {
     flex: 1;
     gap: 8px;
     min-width: 0;
     overflow: hidden;
   }
-  
+
   .search-tags {
     overflow-x: auto;
     flex-wrap: nowrap;
     scrollbar-width: none;
     margin-right: 8px;
   }
-  
+
   .search-tags::-webkit-scrollbar {
     display: none;
   }
-  
+
   .view-toggle-container {
     flex-shrink: 0;
   }
-  
+
   .view-toggle-buttons {
     padding: 2px;
   }
-  
+
   .view-toggle-btn {
     width: 36px;
     height: 32px;
diff --git a/src/plugins/vuetify/defaults.ts b/src/plugins/vuetify/defaults.ts
index 13941a7a..587fb510 100644
--- a/src/plugins/vuetify/defaults.ts
+++ b/src/plugins/vuetify/defaults.ts
@@ -30,7 +30,7 @@ export default {
     color: 'primary',
   },
   VCard: {
-    elevation: 2,
+    elevation: 1,
   },
   VChip: {
     elevation: 0,
diff --git a/src/views/torrent/TorrentCardListView.vue b/src/views/torrent/TorrentCardListView.vue
index 18f3ae53..2976f698 100644
--- a/src/views/torrent/TorrentCardListView.vue
+++ b/src/views/torrent/TorrentCardListView.vue
@@ -397,12 +397,11 @@ function loadMore({ done }: { done: any }) {
 <template>
   <div class="search-header d-none d-sm-flex">
     <!-- 页面头部和筛选栏 -->
-    <div class="view-header bg-surface rounded-xl">
+    <VCard class="view-header rounded-xl">
       <div class="d-flex align-center flex-wrap pa-3">
         <VChip color="primary" variant="elevated" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
           {{ props.items?.length || 0 }} 个资源
         </VChip>
-
         <!-- 排序选择 -->
         <div class="sort-container me-4">
           <VSelect
@@ -438,7 +437,7 @@ function loadMore({ done }: { done: any }) {
             <VMenu activator="parent" :close-on-content-click="false">
               <VCard max-width="25rem">
                 <VCardText class="filter-menu-content">
-                  <div class="text-end">
+                  <div class="flex justify-between">
                     <VBtn variant="text" size="small" color="primary" @click="selectAll(key)"> 全选 </VBtn>
                     <VBtn
                       v-if="filterForm[key].length > 0"
@@ -504,13 +503,13 @@ function loadMore({ done }: { done: any }) {
           </template>
         </div>
       </div>
-    </div>
+    </VCard>
   </div>
 
   <!-- 移动端头部和筛选区域 -->
-  <div class="d-block d-sm-none search-header-mobile">
+  <VCard class="d-block d-sm-none search-header-mobile rounded-lg">
     <!-- 移动端头部 -->
-    <div class="view-header mb-2">
+    <div class="view-header">
       <div class="d-flex align-center flex-wrap pa-2">
         <div class="d-flex align-center w-100 mb-2">
           <VChip
@@ -563,7 +562,7 @@ function loadMore({ done }: { done: any }) {
         </div>
       </div>
     </div>
-  </div>
+  </VCard>
 
   <!-- 筛选菜单 -->
   <VDialog v-model="filterMenuOpen" max-width="25rem" max-height="80%" location="center">
@@ -632,7 +631,6 @@ function loadMore({ done }: { done: any }) {
 
 .view-header {
   background-color: rgb(var(--v-theme-surface));
-  border-radius: 12px;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   overflow: hidden;
 }
diff --git a/src/views/torrent/TorrentRowListView.vue b/src/views/torrent/TorrentRowListView.vue
index be1eae3c..c21ac667 100644
--- a/src/views/torrent/TorrentRowListView.vue
+++ b/src/views/torrent/TorrentRowListView.vue
@@ -344,12 +344,11 @@ function toggleFilterMenu(key: string) {
     <!-- 搜索头部容器 - 新增，用于固定在顶部 -->
     <div class="search-header d-none d-sm-block">
       <!-- PC端页面头部和筛选栏 -->
-      <div class="view-header mb-3">
+      <VCard class="view-header mb-3 rounded-lg">
         <div class="d-flex align-center flex-wrap pa-3">
           <VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
             {{ dataList.length }} 个资源
           </VChip>
-
           <div class="filter-bar">
             <!-- 排序选择 -->
             <VSelect
@@ -364,9 +363,7 @@ function toggleFilterMenu(key: string) {
               prepend-icon="mdi-sort"
             >
             </VSelect>
-
             <div class="filter-divider"></div>
-
             <!-- 筛选按钮 -->
             <VBtn
               v-for="(title, key) in filterTitles"
@@ -430,6 +427,7 @@ function toggleFilterMenu(key: string) {
             </VBtn>
           </div>
         </div>
+
         <!-- 已选择的过滤项显示 -->
         <div v-if="getFilterCount > 0" class="selected-filters">
           <div class="d-flex flex-wrap align-center">
@@ -450,15 +448,15 @@ function toggleFilterMenu(key: string) {
             </template>
           </div>
         </div>
-      </div>
+      </VCard>
     </div>
 
     <!-- 移动端头部和筛选区域 -->
-    <div class="d-block d-sm-none search-header-mobile">
+    <VCard class="d-block d-sm-none search-header-mobile rounded-lg mb-3">
       <!-- 移动端头部 -->
-      <div class="view-header mb-2">
+      <div class="view-header">
         <div class="d-flex align-center flex-wrap pa-2">
-          <div class="d-flex align-center w-100 mb-2">
+          <div class="d-flex align-center w-100">
             <VChip
               color="primary"
               variant="elevated"
@@ -484,7 +482,7 @@ function toggleFilterMenu(key: string) {
           </div>
 
           <!-- 筛选图标按钮区域 -->
-          <div class="filter-buttons-grid w-100">
+          <div class="filter-buttons-grid w-100 mt-2">
             <VBtn
               v-for="(title, key) in filterTitles"
               v-show="filterOptions[key].length > 0"
@@ -509,7 +507,7 @@ function toggleFilterMenu(key: string) {
           </div>
         </div>
       </div>
-    </div>
+    </VCard>
 
     <!-- 筛选菜单 -->
     <VDialog v-model="filterMenuOpen" max-width="25rem" max-height="80%" location="center">
@@ -583,7 +581,6 @@ function toggleFilterMenu(key: string) {
   z-index: 10;
   background-color: rgba(var(--v-theme-background), 0.95);
   backdrop-filter: blur(10px);
-  
 }
 
 .search-header-mobile {
@@ -596,7 +593,6 @@ function toggleFilterMenu(key: string) {
 
 .view-header {
   background-color: rgb(var(--v-theme-surface));
-  border-radius: 12px;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   box-shadow: none;
   overflow: hidden;