perf: optimize infinite list loading

src/views/discover/MediaCardListView.vue

@@ -4,6 +4,7 @@ import type { MediaInfo } from '@/api/types'
 import MediaCard from '@/components/cards/MediaCard.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
+import { loadPaginatedInfiniteScroll, type InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -14,11 +15,6 @@ const props = defineProps({
   params: Object as PropType<{ [key: string]: any }>,
 })
 
-// 判断是否有滚动条
-function hasScroll() {
-  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-}
-
 // 当前页码
 const page = ref(1)
 
@@ -60,7 +56,7 @@ const dedupFields = [
 
 function deduplicate(items: MediaInfo[]): MediaInfo[] {
   return items.filter(item => {
-    const key = dedupFields.map(field => String(item[field])).join('~')
+    const key = getMediaDedupKey(item)
     if (seenKeys.has(key)) {
       return false
     }
@@ -70,7 +66,16 @@ function deduplicate(items: MediaInfo[]): MediaInfo[] {
 }
 
 function appendData(items: MediaInfo[]) {
-  dataList.value = dataList.value.concat(items)
+  dataList.value.push(...items)
+  triggerRef(dataList)
+}
+
+function getMediaDedupKey(item: MediaInfo) {
+  return dedupFields.map(field => String(item[field] ?? '')).join('~')
+}
+
+function getMediaItemKey(item: MediaInfo) {
+  return [getMediaDedupKey(item), item.title ?? ''].join('~')
 }
 
 async function loadPageData() {
@@ -79,73 +84,30 @@ async function loadPageData() {
   })
 
   return {
-    rawCount: rawData.length,
-    uniqueData: deduplicate(rawData),
+    isLastPage: rawData.length === 0,
+    items: deduplicate(rawData),
   }
 }
 
 // 获取列表数据
-async function fetchData({ done }: { done: any }) {
-  try {
-    if (!props.apipath) return
-
-    // 如果正在加载中，直接返回
-    if (loading.value) {
-      done('ok')
-      return
-    }
-
-    // 加载到满屏或者加载出错
-    if (!hasScroll()) {
-      // 加载多次
-      while (!hasScroll()) {
-        // 设置加载中
-        loading.value = true
-        // 请求API
-        const { rawCount, uniqueData } = await loadPageData()
-        // 取消加载中
-        loading.value = false
-        // 标计为已请求完成
-        isRefreshed.value = true
-        if (rawCount === 0) {
-          // 如果没有数据，跳出
-          done('empty')
-          return
-        }
-        // 合并数据
-        appendData(uniqueData)
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    } else {
-      // 加载一次
-      // 设置加载中
-      loading.value = true
-      // 请求API
-      const { rawCount, uniqueData } = await loadPageData()
-      // 标计为已请求完成
-      isRefreshed.value = true
-      if (rawCount === 0) {
-        // 如果没有数据，跳出
-        done('empty')
-      } else {
-        // 合并数据
-        appendData(uniqueData)
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    }
-    // 取消加载中
-    loading.value = false
-  } catch (error) {
-    console.error(error)
-    // 返回加载失败
-    done('error')
+async function fetchData({ done }: { done: InfiniteScrollDone }) {
+  if (!props.apipath) {
+    done('empty')
+    return
   }
+
+  await loadPaginatedInfiniteScroll({
+    advancePage: () => {
+      page.value++
+    },
+    appendItems: appendData,
+    done,
+    loadPage: loadPageData,
+    loading,
+    markLoaded: () => {
+      isRefreshed.value = true
+    },
+  })
 }
 </script>
 
@@ -158,7 +120,7 @@ async function fetchData({ done }: { done: any }) {
       v-if="dataList.length > 0"
       :items="dataList"
       :item-aspect-ratio="1.5"
-      :get-item-key="item => item.tmdb_id || item.douban_id || item.bangumi_id || item.media_id || item.title"
+      :get-item-key="getMediaItemKey"
       tabindex="0"
     >
       <template #default="{ item }">

src/views/discover/PersonCardListView.vue

@@ -4,6 +4,7 @@ import type { Person } from '@/api/types'
 import PersonCard from '@/components/cards/PersonCard.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
+import { loadPaginatedInfiniteScroll, type InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -15,11 +16,6 @@ const props = defineProps({
   type: String,
 })
 
-// 判断是否有滚动条
-function hasScroll() {
-  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-}
-
 // 当前页码
 const page = ref(1)
 
@@ -33,7 +29,8 @@ const isRefreshed = ref(false)
 const dataList = shallowRef<Person[]>([])
 
 function appendData(items: Person[]) {
-  dataList.value = dataList.value.concat(items)
+  dataList.value.push(...items)
+  triggerRef(dataList)
 }
 
 async function loadPageData() {
@@ -53,68 +50,24 @@ function getParams() {
 }
 
 // 获取列表数据
-async function fetchData({ done }: { done: any }) {
-  try {
-    if (!props.apipath) return
-
-    // 如果正在加载中，直接返回
-    if (loading.value) {
-      done('ok')
-      return
-    }
-
-    // 加载到满屏或者加载出错
-    if (!hasScroll()) {
-      // 加载多次
-      while (!hasScroll()) {
-        // 设置加载中
-        loading.value = true
-        // 请求API
-        const currentData = await loadPageData()
-        // 取消加载中
-        loading.value = false
-        // 标计为已请求完成
-        isRefreshed.value = true
-        if (currentData.length === 0) {
-          // 如果没有数据，跳出
-          done('empty')
-          return
-        } else {
-          // 合并数据
-          appendData(currentData)
-          // 页码+1
-          page.value++
-          // 返回加载成功
-          done('ok')
-        }
-      }
-    } else {
-      // 加载一次
-      // 设置加载中
-      loading.value = true
-      // 请求API
-      const currentData = await loadPageData()
-      // 标计为已请求完成
-      isRefreshed.value = true
-      if (currentData.length === 0) {
-        // 如果没有数据，跳出
-        done('empty')
-      } else {
-        // 合并数据
-        appendData(currentData)
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-      // 取消加载中
-      loading.value = false
-    }
-  } catch (error) {
-    console.error(error)
-    // 返回加载失败
-    done('error')
+async function fetchData({ done }: { done: InfiniteScrollDone }) {
+  if (!props.apipath) {
+    done('empty')
+    return
   }
+
+  await loadPaginatedInfiniteScroll({
+    advancePage: () => {
+      page.value++
+    },
+    appendItems: appendData,
+    done,
+    loadPage: loadPageData,
+    loading,
+    markLoaded: () => {
+      isRefreshed.value = true
+    },
+  })
 }
 </script>
 

src/views/plugin/PluginCardListView.vue

@@ -13,6 +13,7 @@ import PluginMixedSortCard from '@/components/cards/PluginMixedSortCard.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import { usePWA } from '@/composables/usePWA'
 import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
+import type { InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 
 // 国际化
 const { t } = useI18n()
@@ -920,9 +921,14 @@ watch([dataList, installedFilter, hasUpdateFilter, enabledFilter], () => {
 })
 
 // 插件市场加载更多数据
-function loadMarketMore({ done }: { done: any }) {
+function loadMarketMore({ done }: { done: InfiniteScrollDone }) {
   // 从 dataList 中获取最前面的 20 个元素
   const itemsToMove = sortedUninstalledList.value.splice(0, 20)
+  if (itemsToMove.length === 0) {
+    done('empty')
+    return
+  }
+
   displayUninstalledList.value.push(...itemsToMove)
   done('ok')
 }

src/views/subscribe/SubscribePopularView.vue

@@ -4,6 +4,7 @@ import type { MediaInfo } from '@/api/types'
 import MediaCard from '@/components/cards/MediaCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
+import { loadPaginatedInfiniteScroll, type InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 import { useI18n } from 'vue-i18n'
 
 // 国际化
@@ -14,11 +15,6 @@ const props = defineProps({
   type: String,
 })
 
-// 判断是否有滚动条
-function hasScroll() {
-  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-}
-
 // API
 const apipath = 'subscribe/popular'
 
@@ -31,9 +27,8 @@ const loading = ref(false)
 // 是否加载完成
 const isRefreshed = ref(false)
 
-// 数据列表
-const dataList = ref<MediaInfo[]>([])
-const currData = ref<MediaInfo[]>([])
+// 使用 shallowRef 避免长列表中的深层代理开销
+const dataList = shallowRef<MediaInfo[]>([])
 
 // 筛选参数
 const filterParams = reactive({
@@ -136,68 +131,45 @@ function getParams() {
   return params
 }
 
-// 获取列表数据
-async function fetchData({ done }: { done: any }) {
-  try {
-    // 如果正在加载中，直接返回
-    if (loading.value) {
-      done('ok')
-      return
-    }
+function appendData(items: MediaInfo[]) {
+  dataList.value.push(...items)
+  triggerRef(dataList)
+}
 
-    // 加载到满屏或者加载出错
-    if (!hasScroll()) {
-      // 加载多次
-      while (!hasScroll()) {
-        // 设置加载中
-        loading.value = true
-        // 请求API
-        currData.value = await api.get(apipath, {
-          params: getParams(),
-        })
-        // 取消加载中
-        loading.value = false
-        // 标计为已请求完成
-        isRefreshed.value = true
-        if (currData.value.length === 0) {
-          // 如果没有数据，跳出
-          done('empty')
-          return
-        }
-        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    } else {
-      // 设置加载中
-      loading.value = true
-      // 请求API
-      currData.value = await api.get(apipath, {
-        params: getParams(),
-      })
-      loading.value = false
-      // 标计为已请求完成
+async function loadPageData() {
+  return api.get(apipath, {
+    params: getParams(),
+  }) as Promise<MediaInfo[]>
+}
+
+function getMediaItemKey(item: MediaInfo) {
+  return [
+    item.source ?? '',
+    item.type ?? '',
+    item.season ?? '',
+    item.tmdb_id ?? '',
+    item.douban_id ?? '',
+    item.bangumi_id ?? '',
+    item.mediaid_prefix ?? '',
+    item.media_id ?? '',
+    item.title ?? '',
+  ].join('~')
+}
+
+// 获取列表数据
+async function fetchData({ done }: { done: InfiniteScrollDone }) {
+  await loadPaginatedInfiniteScroll({
+    advancePage: () => {
+      page.value++
+    },
+    appendItems: appendData,
+    done,
+    loadPage: loadPageData,
+    loading,
+    markLoaded: () => {
       isRefreshed.value = true
-      if (currData.value.length === 0) {
-        // 如果没有数据，跳出
-        done('empty')
-      } else {
-        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    }
-  } catch (error) {
-    console.error(error)
-    // 返回加载失败
-    done('error')
-  }
+    },
+  })
 }
 </script>
 
@@ -278,7 +250,7 @@ async function fetchData({ done }: { done: any }) {
     <ProgressiveCardGrid
       v-if="dataList.length > 0"
       :items="dataList"
-      :get-item-key="item => item.tmdb_id || item.douban_id || item.bangumi_id || item.media_id || item.title"
+      :get-item-key="getMediaItemKey"
       :min-item-width="144"
       :estimated-item-height="320"
       tabindex="0"

src/views/subscribe/SubscribeShareView.vue

@@ -4,6 +4,7 @@ import type { SubscribeShare } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 import SubscribeShareCard from '@/components/cards/SubscribeShareCard.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
+import { loadPaginatedInfiniteScroll, type InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 import { useI18n } from 'vue-i18n'
 
 // 国际化
@@ -15,11 +16,6 @@ const props = defineProps({
   keyword: String,
 })
 
-// 判断是否有滚动条
-function hasScroll() {
-  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-}
-
 // API
 const apipath = 'subscribe/shares'
 
@@ -121,9 +117,8 @@ const loading = ref(false)
 // 是否加载完成
 const isRefreshed = ref(false)
 
-// 数据列表
-const dataList = ref<SubscribeShare[]>([])
-const currData = ref<SubscribeShare[]>([])
+// 使用 shallowRef 避免长列表中的深层代理开销
+const dataList = shallowRef<SubscribeShare[]>([])
 
 // 拼装参数
 function getParams() {
@@ -150,68 +145,31 @@ function getParams() {
   return params
 }
 
-// 获取列表数据
-async function fetchData({ done }: { done: any }) {
-  try {
-    // 如果正在加载中，直接返回
-    if (loading.value) {
-      done('ok')
-      return
-    }
+function appendData(items: SubscribeShare[]) {
+  dataList.value.push(...items)
+  triggerRef(dataList)
+}
 
-    // 加载到满屏或者加载出错
-    if (!hasScroll()) {
-      // 加载多次
-      while (!hasScroll()) {
-        // 设置加载中
-        loading.value = true
-        // 请求API
-        currData.value = await api.get(apipath, {
-          params: getParams(),
-        })
-        // 取消加载中
-        loading.value = false
-        // 标计为已请求完成
-        isRefreshed.value = true
-        if (currData.value.length === 0) {
-          // 如果没有数据，跳出
-          done('empty')
-          return
-        }
-        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    } else {
-      // 设置加载中
-      loading.value = true
-      // 请求API
-      currData.value = await api.get(apipath, {
-        params: getParams(),
-      })
-      loading.value = false
-      // 标计为已请求完成
+async function loadPageData() {
+  return api.get(apipath, {
+    params: getParams(),
+  }) as Promise<SubscribeShare[]>
+}
+
+// 获取列表数据
+async function fetchData({ done }: { done: InfiniteScrollDone }) {
+  await loadPaginatedInfiniteScroll({
+    advancePage: () => {
+      page.value++
+    },
+    appendItems: appendData,
+    done,
+    loadPage: loadPageData,
+    loading,
+    markLoaded: () => {
       isRefreshed.value = true
-      if (currData.value.length === 0) {
-        // 如果没有数据，跳出
-        done('empty')
-      } else {
-        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    }
-  } catch (error) {
-    console.error(error)
-    // 返回加载失败
-    done('error')
-  }
+    },
+  })
 }
 
 // 将数据从列表中移除

src/views/system/MessageView.vue

@@ -4,6 +4,7 @@ import MessageCard from '@/components/cards/MessageCard.vue'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
 import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
+import type { InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 
 // 国际化
 const { t } = useI18n()
@@ -11,8 +12,6 @@ const { useSSE } = useBackgroundOptimization()
 
 // 消息列表
 const messages = ref<Message[]>([])
-// 当前页数据
-const currData = ref<Message[]>([])
 
 // 已加载消息的签名集合
 // 使用消息内容签名去重，避免仅按秒级时间戳判断时误吞同一秒内的不同消息。
@@ -214,7 +213,7 @@ const { manager, isConnected } = useSSE(
 )
 
 // 调用API加载存量消息
-async function loadMessages({ done }: { done: any }) {
+async function loadMessages({ done }: { done: InfiniteScrollDone }) {
   // 如果正在加载中，直接返回
   if (loading.value) {
     done('ok')
@@ -223,7 +222,7 @@ async function loadMessages({ done }: { done: any }) {
   try {
     // 设置加载中
     loading.value = true
-    currData.value = await api.get('message/web', {
+    const currentData: Message[] = await api.get('message/web', {
       params: {
         page: page.value,
         size: 20,
@@ -231,8 +230,8 @@ async function loadMessages({ done }: { done: any }) {
     })
     // 已加载过
     isLoaded.value = true
-    if (currData.value.length > 0) {
-      const hasNewMessage = mergeMessages(currData.value)
+    if (currentData.length > 0) {
+      const hasNewMessage = mergeMessages(currentData)
 
       // 首次加载时滚动到底部
       if (page.value === 1 && hasNewMessage) {

src/views/workflow/WorkflowShareView.vue

@@ -4,6 +4,7 @@ import type { WorkflowShare } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 import WorkflowShareCard from '@/components/cards/WorkflowShareCard.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
+import { loadPaginatedInfiniteScroll, type InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 import { useI18n } from 'vue-i18n'
 
 // 国际化
@@ -18,11 +19,6 @@ const props = defineProps({
 // 定义事件
 const emit = defineEmits(['update'])
 
-// 判断是否有滚动条
-function hasScroll() {
-  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
-}
-
 // API
 const apipath = 'workflow/shares'
 
@@ -39,9 +35,8 @@ const loading = ref(false)
 // 是否加载完成
 const isRefreshed = ref(false)
 
-// 数据列表
-const dataList = ref<WorkflowShare[]>([])
-const currData = ref<WorkflowShare[]>([])
+// 使用 shallowRef 避免长列表中的深层代理开销
+const dataList = shallowRef<WorkflowShare[]>([])
 
 // 事件类型列表
 const eventTypes = ref<Array<{ title: string; value: string }>>([])
@@ -76,68 +71,31 @@ function getParams() {
   return params
 }
 
-// 获取列表数据
-async function fetchData({ done }: { done: any }) {
-  try {
-    // 如果正在加载中，直接返回
-    if (loading.value) {
-      done('ok')
-      return
-    }
+function appendData(items: WorkflowShare[]) {
+  dataList.value.push(...items)
+  triggerRef(dataList)
+}
 
-    // 加载到满屏或者加载出错
-    if (!hasScroll()) {
-      // 加载多次
-      while (!hasScroll()) {
-        // 设置加载中
-        loading.value = true
-        // 请求API
-        currData.value = await api.get(apipath, {
-          params: getParams(),
-        })
-        // 取消加载中
-        loading.value = false
-        // 标计为已请求完成
-        isRefreshed.value = true
-        if (currData.value.length === 0) {
-          // 如果没有数据，跳出
-          done('empty')
-          return
-        }
-        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    } else {
-      // 设置加载中
-      loading.value = true
-      // 请求API
-      currData.value = await api.get(apipath, {
-        params: getParams(),
-      })
-      loading.value = false
-      // 标计为已请求完成
+async function loadPageData() {
+  return api.get(apipath, {
+    params: getParams(),
+  }) as Promise<WorkflowShare[]>
+}
+
+// 获取列表数据
+async function fetchData({ done }: { done: InfiniteScrollDone }) {
+  await loadPaginatedInfiniteScroll({
+    advancePage: () => {
+      page.value++
+    },
+    appendItems: appendData,
+    done,
+    loadPage: loadPageData,
+    loading,
+    markLoaded: () => {
       isRefreshed.value = true
-      if (currData.value.length === 0) {
-        // 如果没有数据，跳出
-        done('empty')
-      } else {
-        // 合并数据
-        dataList.value = [...dataList.value, ...currData.value]
-        // 页码+1
-        page.value++
-        // 返回加载成功
-        done('ok')
-      }
-    }
-  } catch (error) {
-    console.error(error)
-    // 返回加载失败
-    done('error')
-  }
+    },
+  })
 }
 
 // 将数据从列表中移除