优化移动端界面：修复列表视图筛选栏固定问题，优化头部布局减少空间占用

src/pages/resource.vue

@@ -514,17 +514,43 @@ onUnmounted(() => {
 
 @media (max-width: 600px) {
   .search-header {
-    flex-direction: column;
+    padding: 8px 12px;
-    align-items: flex-start;
+  }
+  
+  .search-title {
+    font-size: 0.95rem;
+    white-space: nowrap;
   }
   
   .search-info-container {
-    margin-bottom: 12px;
+    flex: 1;
-    width: 100%;
+    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 {
-    align-self: flex-end;
+    flex-shrink: 0;
+  }
+  
+  .view-toggle-buttons {
+    padding: 2px;
+  }
+  
+  .view-toggle-btn {
+    width: 36px;
+    height: 32px;
   }
 }
 </style>

src/views/torrent/TorrentCardListView.vue

@@ -487,15 +487,15 @@ function loadMore({ done }: { done: any }) {
   </div>
 
   <!-- 移动端头部和筛选区域 -->
-  <div class="d-block d-sm-none">
+  <div class="d-block d-sm-none search-header-mobile">
     <!-- 移动端头部 -->
-    <div class="view-header mb-3">
+    <div class="view-header mb-2">
-      <div class="d-flex align-center flex-wrap pa-3">
+      <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 mb-1">
           <VChip
             color="primary"
             variant="elevated"
-            size="small"
+            size="x-small"
             class="search-count me-auto"
             prepend-icon="mdi-magnify"
           >
@@ -727,21 +727,21 @@ function loadMore({ done }: { done: any }) {
 }
 
 .mobile-sort-select {
-  min-width: 130px;
+  min-width: 110px;
-  max-width: 150px;
+  max-width: 130px;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
 }
 
 .filter-buttons-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
+  gap: 4px;
 }
 
 .filter-btn-mobile {
   height: auto;
-  min-height: 64px;
+  min-height: 48px;
-  padding: 8px 0;
+  padding: 4px 0;
   background-color: rgba(var(--v-theme-surface), 1);
   border-radius: 8px;
   display: flex;
@@ -752,12 +752,20 @@ function loadMore({ done }: { done: any }) {
 }
 
 .filter-icon {
-  margin-bottom: 4px;
+  margin-bottom: 2px;
-  font-size: 22px;
+  font-size: 18px;
 }
 
 .filter-label {
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   text-align: center;
 }
+
+.search-header-mobile {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: rgba(var(--v-theme-background), 0.95);
+  backdrop-filter: blur(10px);
+}
 </style>

src/views/torrent/TorrentRowListView.vue

@@ -379,8 +379,10 @@ function toggleFilterMenu(key: string) {
 
 <template>
   <div class="torrent-view">
+    <!-- 搜索头部容器 - 新增，用于固定在顶部 -->
+    <div class="search-header d-none d-sm-block">
       <!-- PC端页面头部和筛选栏 -->
-    <div class="view-header mb-3 d-none d-sm-block">
+      <div class="view-header mb-3">
         <div class="d-flex align-center flex-wrap">
           <VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
             {{ dataList.length }} 个资源
@@ -441,7 +443,7 @@ function toggleFilterMenu(key: string) {
       </div>
 
       <!-- 已选择的过滤项显示 -->
-    <div v-if="getFilterCount > 0" class="selected-filters mb-3 d-none d-sm-block">
+      <div v-if="getFilterCount > 0" class="selected-filters mb-3">
         <div class="d-flex flex-wrap align-center">
           <template v-for="(values, key) in getSelectedFilters" :key="key">
             <VChip
@@ -460,17 +462,18 @@ function toggleFilterMenu(key: string) {
           </template>
         </div>
       </div>
+    </div>
 
     <!-- 移动端头部和筛选区域 -->
-    <div class="d-block d-sm-none">
+    <div class="d-block d-sm-none search-header-mobile">
       <!-- 移动端头部 -->
-      <div class="view-header mb-3">
+      <div class="view-header mb-2">
-        <div class="d-flex align-center flex-wrap pa-3">
+        <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 mb-1">
             <VChip
               color="primary"
               variant="elevated"
-              size="small"
+              size="x-small"
               class="search-count me-auto"
               prepend-icon="mdi-magnify"
             >
@@ -584,13 +587,28 @@ function toggleFilterMenu(key: string) {
   height: 100%;
 }
 
+.search-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: rgba(var(--v-theme-background), 0.95);
+  backdrop-filter: blur(10px);
+}
+
+.search-header-mobile {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: rgba(var(--v-theme-background), 0.95);
+  backdrop-filter: blur(10px);
+}
+
 .view-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: none;
-  margin-bottom: 16px;
   overflow: hidden;
 }
 
@@ -664,23 +682,10 @@ function toggleFilterMenu(key: string) {
 }
 
 .resource-list-container {
-  height: calc(100vh - 10rem - env(safe-area-inset-bottom));
-  overflow-y: auto;
-  position: relative;
   border-radius: 12px;
   background-color: rgb(var(--v-theme-surface));
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
   padding: 8px;
-  scrollbar-width: thin;
-}
-
-.resource-list-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.resource-list-container::-webkit-scrollbar-thumb {
-  background-color: rgba(var(--v-theme-on-surface), 0.2);
-  border-radius: 3px;
 }
 
 .resource-list {
@@ -694,26 +699,25 @@ function toggleFilterMenu(key: string) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100%;
   min-height: 300px;
 }
 
 .mobile-sort-select {
-  min-width: 130px;
+  min-width: 110px;
-  max-width: 150px;
+  max-width: 130px;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
 }
 
 .filter-buttons-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
+  gap: 4px;
 }
 
 .filter-btn-mobile {
   height: auto;
-  min-height: 64px;
+  min-height: 48px;
-  padding: 8px 0;
+  padding: 4px 0;
   background-color: rgba(var(--v-theme-surface), 1);
   border-radius: 8px;
   display: flex;
@@ -724,18 +728,22 @@ function toggleFilterMenu(key: string) {
 }
 
 .filter-icon {
-  margin-bottom: 4px;
+  margin-bottom: 2px;
-  font-size: 22px;
+  font-size: 18px;
 }
 
 .filter-label {
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   text-align: center;
 }
 
 @media (max-width: 600px) {
-  .resource-list-container {
+  .filter-btn {
-    height: calc(100vh - 18rem - env(safe-area-inset-bottom));
+    font-size: 0.75rem;
+  }
+
+  .sort-select {
+    min-width: 100px;
   }
 }
 </style>