Merge pull request #314 from madrays/v2

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,98 +379,101 @@ function toggleFilterMenu(key: string) {
 
 <template>
   <div class="torrent-view">
-    <!-- PC端页面头部和筛选栏 -->
+    <!-- 搜索头部容器 - 新增，用于固定在顶部 -->
-    <div class="view-header mb-3 d-none d-sm-block">
+    <div class="search-header d-none d-sm-block">
-      <div class="d-flex align-center flex-wrap">
+      <!-- PC端页面头部和筛选栏 -->
-        <VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
+      <div class="view-header mb-3">
-          {{ dataList.length }} 个资源
+        <div class="d-flex align-center flex-wrap">
-        </VChip>
+          <VChip color="primary" variant="flat" size="small" class="search-count me-3" prepend-icon="mdi-magnify">
+            {{ dataList.length }} 个资源
+          </VChip>
 
-        <div class="filter-bar">
+          <div class="filter-bar">
-          <!-- 排序选择 -->
+            <!-- 排序选择 -->
-          <VSelect
+            <VSelect
-            v-model="sortField"
+              v-model="sortField"
-            :items="Object.entries(sortTitles).map(([key, title]) => ({ title, value: key }))"
+              :items="Object.entries(sortTitles).map(([key, title]) => ({ title, value: key }))"
-            item-title="title"
+              item-title="title"
-            item-value="value"
+              item-value="value"
-            variant="plain"
+              variant="plain"
-            density="compact"
+              density="compact"
-            hide-details
+              hide-details
-            class="sort-select"
+              class="sort-select"
-          >
+            >
-            <template v-slot:prepend>
+              <template v-slot:prepend>
-              <VIcon size="small" icon="mdi-sort"></VIcon>
+                <VIcon size="small" icon="mdi-sort"></VIcon>
-            </template>
+              </template>
-          </VSelect>
+            </VSelect>
 
-          <div class="filter-divider"></div>
+            <div class="filter-divider"></div>
 
-          <!-- 筛选按钮 -->
+            <!-- 筛选按钮 -->
-          <VBtn
+            <VBtn
-            v-for="(title, key) in filterTitles"
+              v-for="(title, key) in filterTitles"
-            v-show="filterOptions[key].length > 0"
+              v-show="filterOptions[key].length > 0"
-            :key="key"
+              :key="key"
-            variant="tonal"
+              variant="tonal"
-            size="small"
+              size="small"
-            :color="filterForm[key].length > 0 ? 'primary' : undefined"
+              :color="filterForm[key].length > 0 ? 'primary' : undefined"
-            :prepend-icon="getFilterIcon(key)"
+              :prepend-icon="getFilterIcon(key)"
-            @click="toggleFilterMenu(key)"
+              @click="toggleFilterMenu(key)"
-            class="filter-btn"
+              class="filter-btn"
-            rounded="pill"
+              rounded="pill"
-          >
+            >
-            {{ title }}
+              {{ title }}
-            <VChip v-if="filterForm[key].length > 0" size="x-small" color="primary" class="ms-1" variant="elevated">{{
+              <VChip v-if="filterForm[key].length > 0" size="x-small" color="primary" class="ms-1" variant="elevated">{{
-              filterForm[key].length
+                filterForm[key].length
-            }}</VChip>
+              }}</VChip>
-          </VBtn>
+            </VBtn>
 
-          <!-- 清除全部筛选按钮 -->
+            <!-- 清除全部筛选按钮 -->
-          <VBtn
+            <VBtn
-            v-if="getFilterCount > 0"
+              v-if="getFilterCount > 0"
-            variant="text"
+              variant="text"
-            size="small"
+              size="small"
-            color="error"
+              color="error"
-            @click="clearAllFilters"
+              @click="clearAllFilters"
-            class="filter-btn"
+              class="filter-btn"
-            prepend-icon="mdi-close-circle-outline"
+              prepend-icon="mdi-close-circle-outline"
-          >
+            >
-            清除筛选
+              清除筛选
-          </VBtn>
+            </VBtn>
+          </div>
+        </div>
+      </div>
+
+      <!-- 已选择的过滤项显示 -->
+      <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
+              v-for="(value, index) in values"
+              :key="`${key}-${index}`"
+              color="primary"
+              size="small"
+              closable
+              variant="elevated"
+              class="me-1 mb-1 mt-1 filter-tag"
+              @click:close="removeFilter(key, value)"
+            >
+              <VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
+              <strong>{{ filterTitles[key] }}:</strong> {{ value }}
+            </VChip>
+          </template>
         </div>
       </div>
     </div>
 
-    <!-- 已选择的过滤项显示 -->
-    <div v-if="getFilterCount > 0" class="selected-filters mb-3 d-none d-sm-block">
-      <div class="d-flex flex-wrap align-center">
-        <template v-for="(values, key) in getSelectedFilters" :key="key">
-          <VChip
-            v-for="(value, index) in values"
-            :key="`${key}-${index}`"
-            color="primary"
-            size="small"
-            closable
-            variant="elevated"
-            class="me-1 mb-1 mt-1 filter-tag"
-            @click:close="removeFilter(key, value)"
-          >
-            <VIcon size="x-small" :icon="getFilterIcon(key)" class="me-1"></VIcon>
-            <strong>{{ filterTitles[key] }}:</strong> {{ value }}
-          </VChip>
-        </template>
-      </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>