优化 TorrentItem 列表性能

src/components/cards/TorrentItem.vue

@@ -189,82 +189,84 @@ onMounted(() => {
 
 <style scoped>
 .list-item-wrapper {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .torrent-item {
-  transition: background-color 0.2s ease, transform 0.2s ease;
-  margin-bottom: 8px;
   padding: 12px;
   background-color: rgb(var(--v-theme-surface));
   box-shadow: none;
+  margin-block-end: 8px;
+  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
 .torrent-item:hover {
+  border-color: rgba(var(--v-theme-primary), 0.3);
   background-color: rgba(var(--v-theme-primary), 0.04);
   transform: translateY(-2px);
-  border-color: rgba(var(--v-theme-primary), 0.3);
 }
 
 .site-wrapper {
   display: flex;
-  align-items: center;
-  min-width: 100px;
   flex-wrap: wrap;
+  align-items: center;
+  min-inline-size: 100px;
 }
 
 .site-icon {
-  width: 32px;
-  height: 32px;
   border-radius: 4px;
-  margin-right: 8px;
+  block-size: 32px;
+  inline-size: 32px;
+  margin-inline-end: 8px;
 }
 
 .site-fallback {
-  width: 24px;
-  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   background-color: rgba(var(--v-theme-primary), 0.1);
+  block-size: 24px;
   color: rgb(var(--v-theme-primary));
-  font-weight: 700;
-  margin-right: 8px;
   font-size: 0.8rem;
+  font-weight: 700;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 
 .site-name {
-  margin-right: 8px;
-  font-weight: 600;
   color: rgba(var(--v-theme-on-surface), 0.8);
   font-size: 0.9rem;
+  font-weight: 600;
+  margin-inline-end: 8px;
 }
 
 .season-tag {
-  font-size: 0.875rem;
+  z-index: 2;
-  background-color: #5c6bc0;
-  color: white;
-  padding: 2px 6px;
-  border-radius: 4px;
-  margin-right: 8px;
-  font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  z-index: 2;
+  border-radius: 4px;
+  background-color: #5c6bc0;
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-inline-end: 8px;
+  padding-block: 2px;
+  padding-inline: 6px;
 }
 
 .free-tag {
   position: absolute;
-  top: -6px;
+  z-index: 1;
-  right: -6px;
-  color: white;
-  padding: 2px 6px;
   border-radius: 4px;
+  color: white;
   font-size: 0.7rem;
   font-weight: 700;
-  z-index: 1;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  padding-block: 2px;
+  padding-inline: 6px;
 }
 
 .free-discount {
@@ -284,14 +286,14 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .item-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  width: 100%;
+  justify-content: space-between;
+  inline-size: 100%;
 }
 
 .media-info {
@@ -299,9 +301,9 @@ onMounted(() => {
 }
 
 .media-title {
+  color: rgba(var(--v-theme-on-surface), 0.87);
   font-size: 1.125rem;
   font-weight: 600;
-  color: rgba(var(--v-theme-on-surface), 0.87);
 }
 
 .item-actions {
@@ -323,49 +325,50 @@ onMounted(() => {
 }
 
 .seed-info {
-  font-size: 0.95rem;
   display: flex;
   align-items: center;
-  gap: 4px;
+  font-size: 0.95rem;
   font-weight: 600;
+  gap: 4px;
 }
 
 .peer-info {
-  font-size: 0.95rem;
   display: flex;
   align-items: center;
-  gap: 4px;
+  font-size: 0.95rem;
   font-weight: 600;
+  gap: 4px;
 }
 
 .size-badge {
+  border-radius: 4px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
   font-size: 0.9rem;
   font-weight: 600;
-  color: rgb(var(--v-theme-primary));
+  margin-inline-end: 6px;
-  background-color: rgba(var(--v-theme-primary), 0.1);
+  padding-block: 2px;
-  padding: 2px 8px;
+  padding-inline: 8px;
-  border-radius: 4px;
-  margin-right: 6px;
 }
 
 .torrent-title {
-  font-size: 0.9rem;
-  color: rgba(var(--v-theme-on-surface), 0.87);
-  margin-bottom: 6px;
-  white-space: nowrap;
   overflow: hidden;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  font-size: 0.9rem;
+  margin-block-end: 6px;
+  max-inline-size: 100%;
   text-overflow: ellipsis;
-  max-width: 100%;
+  white-space: nowrap;
 }
 
 .torrent-description {
-  font-size: 0.8rem;
-  color: rgba(var(--v-theme-on-surface), 0.65);
-  margin-bottom: 8px;
-  white-space: nowrap;
   overflow: hidden;
+  color: rgba(var(--v-theme-on-surface), 0.65);
+  font-size: 0.8rem;
+  inline-size: 100%;
+  margin-block-end: 8px;
   text-overflow: ellipsis;
-  width: 100%;
+  white-space: nowrap;
 }
 
 .tags-container {
@@ -375,11 +378,12 @@ onMounted(() => {
 }
 
 .resource-tag {
-  font-size: 0.8rem;
-  padding: 3px 8px;
   border-radius: 4px;
   color: white;
+  font-size: 0.8rem;
   font-weight: 700;
+  padding-block: 3px;
+  padding-inline: 8px;
 }
 
 .edition {
@@ -407,7 +411,7 @@ onMounted(() => {
 }
 
 .hr {
-  background-color: #000000;
+  background-color: #000;
 }
 
 .detail-btn {
@@ -415,13 +419,13 @@ onMounted(() => {
 }
 
 .downloaded-item {
-  border-left: 4px solid #4caf50;
+  border-inline-start: 4px solid #4caf50;
   opacity: 0.85;
 }
 
 .break-words {
-  word-wrap: break-word;
   word-break: break-word;
+  word-wrap: break-word;
 }
 
 .overflow-visible {
@@ -432,26 +436,26 @@ onMounted(() => {
   white-space: normal !important;
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .torrent-item {
     padding: 8px;
   }
 
   .site-icon,
   .site-fallback {
-    width: 24px;
+    block-size: 24px;
-    height: 24px;
+    inline-size: 24px;
   }
 
   .site-wrapper {
-    min-width: 24px;
     flex-wrap: wrap;
-    margin-right: 10px;
+    margin-inline-end: 10px;
+    min-inline-size: 24px;
   }
 
   .site-name {
     font-size: 0.8rem;
-    margin-right: 4px;
+    margin-inline-end: 4px;
   }
 
   .size-badge {
@@ -460,7 +464,8 @@ onMounted(() => {
 
   .resource-tag {
     font-size: 0.75rem;
-    padding: 2px 6px;
+    padding-block: 2px;
+    padding-inline: 6px;
   }
 
   .action-buttons {
@@ -470,7 +475,7 @@ onMounted(() => {
   }
 
   .torrent-description {
-    max-width: calc(100vw - 150px);
+    max-inline-size: calc(100vw - 150px);
   }
 }
 </style>

src/views/torrent/TorrentCardListView.vue

@@ -64,6 +64,7 @@ const filterOptions: Record<string, string[]> = reactive({
 
 // 完整的数据列表
 let dataList: SearchTorrent[]
+
 // 显示用的数据列表
 const displayDataList = ref<Array<SearchTorrent>>([])
 
@@ -328,16 +329,6 @@ function toggleFilterMenu(key: string) {
   }
 }
 
-// 切换过滤器选项
-function toggleFilter(key: string, value: string) {
-  const index = filterForm[key].indexOf(value)
-  if (index === -1) {
-    filterForm[key].push(value)
-  } else {
-    filterForm[key].splice(index, 1)
-  }
-}
-
 // 清除所有过滤条件
 function clearAllFilters() {
   for (const key in filterForm) {
@@ -388,7 +379,8 @@ function removeFilter(key: string, value: string) {
 }
 
 function loadMore({ done }: { done: any }) {
-  const itemsToMove = dataList.splice(0, 20) // 从 dataList 中获取最前面的 20 个元素
+  // 从 dataList 中获取最前面的 20 个元素
+  const itemsToMove = dataList.splice(0, 20) 
   displayDataList.value.push(...itemsToMove)
   done('ok')
 }

src/views/torrent/TorrentRowListView.vue

@@ -1,11 +1,6 @@
 <script lang="ts" setup>
 import type { Context } from '@/api/types'
 import TorrentItem from '@/components/cards/TorrentItem.vue'
-import { useDisplay } from 'vuetify'
-
-// 设备模式
-const display = useDisplay()
-const appMode = inject('pwaMode') && display.mdAndDown.value
 
 // 定义输入参数
 const props = defineProps({
@@ -184,6 +179,9 @@ const sortField = ref('default')
 // 数据列表
 const dataList = ref<Array<Context>>([])
 
+// 显示用的数据列表
+const displayDataList = ref<Array<Context>>([])
+
 // 计算已选择的过滤条件数量
 const getFilterCount = computed(() => {
   let count = 0
@@ -253,6 +251,7 @@ watchEffect(() => {
 watchEffect(() => {
   // 清空列表
   dataList.value = []
+  displayDataList.value = []
   // 匹配过滤函数
   const match = (filter: Array<string>, value: string | undefined) =>
     filter.length === 0 || (value && filter.includes(value))
@@ -264,6 +263,9 @@ watchEffect(() => {
       initOptions(data)
     })
 
+    // 筛选数据
+    const filteredData: Context[] = []
+
     // 然后根据过滤条件筛选数据
     props.items.forEach(data => {
       const { meta_info, torrent_info } = data
@@ -283,9 +285,13 @@ watchEffect(() => {
         // 质量过滤
         match(filterForm.edition, meta_info.edition)
       ) {
-        dataList.value.push(data)
+        filteredData.push(data)
       }
     })
+    // 显示前20个
+    displayDataList.value = filteredData.slice(0, 20)
+    // 保存剩余数据
+    dataList.value = filteredData.slice(20)
   }
 })
 
@@ -337,6 +343,13 @@ function toggleFilterMenu(key: string) {
     filterMenuOpen.value = true
   }
 }
+
+function loadMore({ done }: { done: any }) {
+  // 从 dataList 中获取最前面的 20 个元素
+  const itemsToMove = dataList.value.splice(0, 20)
+  displayDataList.value.push(...itemsToMove)
+  done('ok')
+}
 </script>
 
 <template>
@@ -553,18 +566,26 @@ function toggleFilterMenu(key: string) {
     <!-- 资源列表容器 -->
     <VCard class="resource-list-container">
       <!-- 无结果时显示 -->
-      <div v-if="dataList.length === 0" class="no-results">
+      <div v-if="displayDataList.length === 0" class="no-results">
         <VIcon icon="mdi-file-search-outline" size="64" color="grey-lighten-1" />
         <div class="text-h6 text-grey mt-4">暂无符合条件的资源</div>
       </div>
-
       <!-- 资源列表 -->
-      <div v-else class="resource-list">
+      <VInfiniteScroll
-        <div v-for="(item, index) in dataList" :key="`${item.torrent_info?.enclosure || ''}-${index}`">
+        v-else
+        mode="intersect"
+        side="end"
+        :items="displayDataList"
+        class="resource-list"
+        @load="loadMore"
+      >
+        <template #loading />
+        <template #empty />
+        <div v-for="(item, index) in displayDataList" :key="`${item.torrent_info?.enclosure || ''}-${index}`">
           <TorrentItem :torrent="item" />
-          <VDivider v-if="index < dataList.length - 1" class="my-2" />
+          <VDivider v-if="index < displayDataList.length - 1" class="my-2" />
-        </div>
         </div>
+      </VInfiniteScroll>
     </VCard>
   </div>
 </template>