资源搜索结果页面增加排序切换

src/views/torrent/TorrentCardListView.vue

@@ -37,6 +37,9 @@ const filterForm: Record<string, string[]> = reactive({
 
 // 排序选项
 const sortField = ref('default')
+// 降序
+const sortType = ref<'asc' | 'desc'>('desc')
+
 const sortTitles: Record<string, string> = {
   default: t('torrent.sortDefault'),
   site: t('torrent.sortSite'),
@@ -212,7 +215,7 @@ onMounted(() => {
 })
 
 // 修改watch监听，同时监听排序字段的变化
-watch([filterForm, groupedDataList, sortField], filterData)
+watch([filterForm, groupedDataList, sortField, sortType], filterData)
 
 function filterData() {
   // 清空列表
@@ -258,16 +261,30 @@ function filterData() {
   // 排序数据
   if (sortField.value !== 'default') {
     filteredData.sort((a, b) => {
-      if (sortField.value === 'site') {
+      if (sortType.value === 'desc') {
-        // 按站点名称排序
+        if (sortField.value === 'site') {
-        return (a.torrent_info.site_name || '').localeCompare(b.torrent_info.site_name || '')
+          // 按站点名称排序
-      } else if (sortField.value === 'size') {
+          return (a.torrent_info.site_name || '').localeCompare(b.torrent_info.site_name || '')
-        // 按文件大小排序（降序）
+        } else if (sortField.value === 'size') {
-        return (Number(b.torrent_info.size) || 0) - (Number(a.torrent_info.size) || 0)
+          // 按文件大小排序（降序）
-      } else if (sortField.value === 'seeder') {
+          return (Number(b.torrent_info.size) || 0) - (Number(a.torrent_info.size) || 0)
-        // 按做种数排序（降序）
+        } else if (sortField.value === 'seeder') {
-        return (Number(b.torrent_info.seeders) || 0) - (Number(a.torrent_info.seeders) || 0)
+          // 按做种数排序（降序）
+          return (Number(b.torrent_info.seeders) || 0) - (Number(a.torrent_info.seeders) || 0)
+        }
+      } else {
+        if (sortField.value === 'site') {
+          // 按站点名称排序
+          return (b.torrent_info.site_name || '').localeCompare(a.torrent_info.site_name || '')
+        } else if (sortField.value === 'size') {
+          // 按文件大小排序（降序）
+          return (Number(a.torrent_info.size) || 0) - (Number(b.torrent_info.size) || 0)
+        } else if (sortField.value === 'seeder') {
+          // 按做种数排序（降序）
+          return (Number(a.torrent_info.seeders) || 0) - (Number(b.torrent_info.seeders) || 0)
+        }
       }
+
       return 0
     })
   }
@@ -364,6 +381,12 @@ function loadMore({ done }: { done: any }) {
   displayDataList.value.push(...itemsToMove)
   done('ok')
 }
+
+// 处理图标点击
+const handleSortIconClick = () => {
+  // 切换排序方向
+  sortType.value = sortType.value === 'asc' ? 'desc' : 'asc'
+}
 </script>
 
 <template>
@@ -384,9 +407,13 @@ function loadMore({ done }: { done: any }) {
             density="compact"
             hide-details
             class="sort-select"
-            prepend-icon="mdi-sort"
             variant="plain"
-          ></VSelect>
+          >
+            <template #prepend-inner>
+              <!-- 添加排序点击事件 -->
+              <v-icon @mousedown.stop.prevent="handleSortIconClick">mdi-sort</v-icon>
+            </template>
+          </VSelect>
         </div>
 
         <!-- 筛选按钮组 -->

src/views/torrent/TorrentRowListView.vue

@@ -61,6 +61,8 @@ const filterOptions: Record<string, string[]> = reactive({
 
 // 排序字段
 const sortField = ref('default')
+// 降序
+const sortType = ref<'asc' | 'desc'>('desc')
 
 // 数据列表
 const dataList = ref<Array<Context>>([])
@@ -202,7 +204,7 @@ function sortSeasonOptions() {
 }
 
 // 修改watch监听，同时监听排序字段的变化
-watch([filterForm, sortField], filterData)
+watch([filterForm, sortField, sortType], filterData)
 
 // 计算过滤后的列表
 function filterData() {
@@ -247,16 +249,30 @@ function filterData() {
     })
 
     // 排序
-    if (sortField.value === 'default') {
+    if (sortType.value === 'desc') {
-      filteredData = filteredData.sort((a, b) => b.torrent_info.pri_order - a.torrent_info.pri_order)
+      if (sortField.value === 'default') {
-    } else if (sortField.value === 'site') {
+        filteredData = filteredData.sort((a, b) => b.torrent_info.pri_order - a.torrent_info.pri_order)
-      filteredData = filteredData.sort((a, b) =>
+      } else if (sortField.value === 'site') {
-        (a.torrent_info.site_name || '').localeCompare(b.torrent_info.site_name || ''),
+        filteredData = filteredData.sort((a, b) =>
-      )
+          (a.torrent_info.site_name || '').localeCompare(b.torrent_info.site_name || ''),
-    } else if (sortField.value === 'size') {
+        )
-      filteredData = filteredData.sort((a, b) => b.torrent_info.size - a.torrent_info.size)
+      } else if (sortField.value === 'size') {
-    } else if (sortField.value === 'seeder') {
+        filteredData = filteredData.sort((a, b) => b.torrent_info.size - a.torrent_info.size)
-      filteredData = filteredData.sort((a, b) => b.torrent_info.seeders - a.torrent_info.seeders)
+      } else if (sortField.value === 'seeder') {
+        filteredData = filteredData.sort((a, b) => b.torrent_info.seeders - a.torrent_info.seeders)
+      }
+    } else {
+      if (sortField.value === 'default') {
+        filteredData = filteredData.sort((a, b) => a.torrent_info.pri_order - b.torrent_info.pri_order)
+      } else if (sortField.value === 'site') {
+        filteredData = filteredData.sort((a, b) =>
+          (b.torrent_info.site_name || '').localeCompare(a.torrent_info.site_name || ''),
+        )
+      } else if (sortField.value === 'size') {
+        filteredData = filteredData.sort((a, b) => a.torrent_info.size - b.torrent_info.size)
+      } else if (sortField.value === 'seeder') {
+        filteredData = filteredData.sort((a, b) => a.torrent_info.seeders - b.torrent_info.seeders)
+      }
     }
 
     // 显示前20个
@@ -338,6 +354,12 @@ function loadMore({ done }: { done: any }) {
   done('ok')
 }
 
+// 处理图标点击
+const handleSortIconClick = () => {
+  // 切换排序方向
+  sortType.value = sortType.value === 'asc' ? 'desc' : 'asc'
+}
+
 onMounted(() => {
   filterData()
 })
@@ -363,9 +385,12 @@ onMounted(() => {
               density="compact"
               hide-details
               class="sort-select"
-              prepend-icon="mdi-sort"
               variant="plain"
             >
+              <template #prepend-inner>
+                <!-- 添加排序点击事件 -->
+                <v-icon @mousedown.stop.prevent="handleSortIconClick">mdi-sort</v-icon>
+              </template>
             </VSelect>
             <div class="filter-divider"></div>