perf: optimize infinite list loading

src/@core/utils/image.ts

@@ -1,5 +1,15 @@
 import ColorThief from 'colorthief'
 
+const DEFAULT_DOMINANT_COLOR = '#28A9E1'
+const DOMINANT_COLOR_CACHE_LIMIT = 100
+const colorThief = new ColorThief()
+const dominantColorCache = new Map<string, Promise<string>>()
+
+interface DominantColorOptions {
+  fallback?: string
+  quality?: number
+}
+
 // 将 RGB 转换为十六进制
 function rgbStringToHex(rgbArray: number[]): string {
   if (rgbArray.length !== 3 || rgbArray.some(isNaN)) throw new Error('Invalid RGB string format')
@@ -14,11 +24,46 @@ function rgbStringToHex(rgbArray: number[]): string {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`
 }
 
+function getImageCacheKey(image: HTMLImageElement) {
+  return image.currentSrc || image.src || ''
+}
+
+function rememberDominantColor(key: string, colorPromise: Promise<string>) {
+  if (!key) return colorPromise
+
+  if (dominantColorCache.size >= DOMINANT_COLOR_CACHE_LIMIT) {
+    const firstKey = dominantColorCache.keys().next().value
+    if (firstKey) dominantColorCache.delete(firstKey)
+  }
+
+  dominantColorCache.set(key, colorPromise)
+  return colorPromise
+}
+
 // 提取主要颜色
-export async function getDominantColor(image: HTMLImageElement): Promise<string> {
-  const colorThief = new ColorThief()
-  const dominantColor = colorThief.getColor(image)
-  return rgbStringToHex(dominantColor)
+export async function getDominantColor(
+  image: HTMLImageElement | undefined | null,
+  options: DominantColorOptions = {},
+): Promise<string> {
+  const fallback = options.fallback ?? DEFAULT_DOMINANT_COLOR
+
+  if (!image) return fallback
+
+  const cacheKey = getImageCacheKey(image)
+  const cachedColor = cacheKey ? dominantColorCache.get(cacheKey) : undefined
+  if (cachedColor) return cachedColor
+
+  const colorPromise = Promise.resolve()
+    .then(() => {
+      const dominantColor = colorThief.getColor(image, options.quality ?? 20)
+      return rgbStringToHex(dominantColor)
+    })
+    .catch(error => {
+      console.warn('Failed to extract dominant color:', error)
+      return fallback
+    })
+
+  return rememberDominantColor(cacheKey, colorPromise)
 }
 
 // 预加载图片

src/components/dialog/SubscribeHistoryDialog.vue

@@ -6,6 +6,7 @@ import { useDisplay } from 'vuetify'
 import ProgressDialog from './ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { mediaTypeDict } from '@/api/constants'
+import type { InfiniteScrollDone } from '@/composables/usePaginatedInfiniteScroll'
 
 // 国际化
 const { t } = useI18n()
@@ -24,9 +25,6 @@ const emit = defineEmits(['close', 'save'])
 // 订阅历史列表
 const historyList = ref<Subscribe[]>([])
 
-// 当前加载数据
-const currData = ref<Subscribe[]>([])
-
 // 当前页
 const currentPage = ref(1)
 
@@ -46,7 +44,7 @@ const progressDialog = ref(false)
 const progressText = ref('')
 
 // 调用API查询列表
-async function loadHistory({ done }: { done: any }) {
+async function loadHistory({ done }: { done: InfiniteScrollDone }) {
   // 如果正在加载中，直接返回
   if (loading.value) {
     done('ok')
@@ -57,7 +55,7 @@ async function loadHistory({ done }: { done: any }) {
   try {
     // 设置加载中
     loading.value = true
-    currData.value = await api.get(`subscribe/history/${props.type}`, {
+    const currentData: Subscribe[] = await api.get(`subscribe/history/${props.type}`, {
       params: {
         page: currentPage.value,
         count: pageSize.value,
@@ -65,12 +63,12 @@ async function loadHistory({ done }: { done: any }) {
     })
     // 标计为已请求完成
     isRefreshed.value = true
-    if (currData.value.length === 0) {
+    if (currentData.length === 0) {
       // 如果没有数据，跳出
       done('empty')
     } else {
       // 合并数据
-      historyList.value = [...historyList.value, ...currData.value]
+      historyList.value.push(...currentData)
       // 页码+1
       currentPage.value++
       // 返回加载成功

src/composables/usePaginatedInfiniteScroll.ts

@@ -0,0 +1,87 @@
+import type { Ref } from 'vue'
+import { nextTick } from 'vue'
+
+export type InfiniteScrollStatus = 'ok' | 'empty' | 'loading' | 'error'
+export type InfiniteScrollDone = (status: InfiniteScrollStatus) => void
+
+interface InfiniteScrollPage<T> {
+  isLastPage?: boolean
+  items: T[]
+}
+
+interface LoadPaginatedInfiniteScrollOptions<T> {
+  advancePage: () => void
+  appendItems: (items: T[]) => void
+  done: InfiniteScrollDone
+  hasScroll?: () => boolean
+  loadPage: () => Promise<T[] | InfiniteScrollPage<T>>
+  loading: Ref<boolean>
+  markLoaded?: () => void
+  maxAutoLoadPages?: number
+}
+
+const DEFAULT_MAX_AUTO_LOAD_PAGES = 6
+
+export function hasDocumentScroll() {
+  return document.body.scrollHeight - (window.innerHeight || document.documentElement.clientHeight) > 2
+}
+
+function normalizePageResult<T>(result: T[] | InfiniteScrollPage<T>): InfiniteScrollPage<T> {
+  if (Array.isArray(result)) {
+    return {
+      isLastPage: result.length === 0,
+      items: result,
+    }
+  }
+
+  return result
+}
+
+export async function loadPaginatedInfiniteScroll<T>({
+  advancePage,
+  appendItems,
+  done,
+  hasScroll = hasDocumentScroll,
+  loadPage,
+  loading,
+  markLoaded,
+  maxAutoLoadPages = DEFAULT_MAX_AUTO_LOAD_PAGES,
+}: LoadPaginatedInfiniteScrollOptions<T>) {
+  if (loading.value) {
+    done('ok')
+    return
+  }
+
+  loading.value = true
+
+  let status: InfiniteScrollStatus = 'ok'
+  let loadedPages = 0
+
+  try {
+    do {
+      const { isLastPage, items } = normalizePageResult(await loadPage())
+
+      markLoaded?.()
+
+      if (isLastPage) {
+        status = 'empty'
+        break
+      }
+
+      if (items.length > 0) {
+        appendItems(items)
+      }
+
+      advancePage()
+      loadedPages += 1
+
+      await nextTick()
+    } while (!hasScroll() && loadedPages < maxAutoLoadPages)
+  } catch (error) {
+    console.error(error)
+    status = 'error'
+  } finally {
+    loading.value = false
+    done(status)
+  }
+}

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')
-  }
+    },
+  })
 }
 
 // 将数据从列表中移除