perf: virtualize management lists and make drag sorting opt-in

src/components/cards/PluginCard.vue

@@ -25,6 +25,10 @@ const props = defineProps({
   action: Boolean, // 动作标识
   width: String,
   height: String,
+  sortable: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // 定义触发的自定义事件
@@ -420,6 +424,7 @@ watch(
   (newOpenState, _) => {
     if (newOpenState) openPluginDetail()
   },
+  { immediate: true },
 )
 </script>
 
@@ -458,7 +463,7 @@ watch(
                   {{ props.plugin?.plugin_desc }}
                 </div>
               </div>
-              <div class="relative flex-shrink-0 self-center pb-3" :class="{ 'cursor-move': display.mdAndUp.value }">
+              <div class="relative flex-shrink-0 self-center pb-3" :class="{ 'cursor-move': props.sortable && display.mdAndUp.value }">
                 <VAvatar size="48">
                   <VImg
                     ref="imageRef"

src/components/cards/PluginFolderCard.vue

@@ -25,6 +25,10 @@ const props = defineProps({
   },
   width: String,
   height: String,
+  sortable: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // 定义触发的自定义事件
@@ -302,14 +306,14 @@ const dropdownItems = ref([
                   :icon="folderIcon"
                   :size="display.mobile ? 56 : 72"
                   :color="iconColor"
-                  :class="{ 'cursor-move': display.mdAndUp.value }"
+                  :class="{ 'cursor-move': props.sortable && display.mdAndUp.value }"
                 />
               </div>
 
               <!-- 文件夹信息 -->
               <div
                 class="plugin-folder-card__info"
-                :class="{ 'cursor-move': display.mdAndUp.value, 'plugin-folder-card__info--no-icon': !shouldShowIcon }"
+                :class="{ 'cursor-move': props.sortable && display.mdAndUp.value, 'plugin-folder-card__info--no-icon': !shouldShowIcon }"
               >
                 <!-- 文件夹名称 -->
                 <h3 class="plugin-folder-card__name">

src/components/cards/PluginMixedSortCard.vue

@@ -14,12 +14,14 @@ interface Props {
   pluginStatistics?: { [key: string]: number }
   pluginActions?: { [key: string]: boolean }
   showRemoveButton?: boolean
+  sortable?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   pluginStatistics: () => ({}),
   pluginActions: () => ({}),
   showRemoveButton: false,
+  sortable: false,
 })
 
 const emit = defineEmits<{
@@ -36,7 +38,7 @@ const emit = defineEmits<{
 // 拖拽事件处理
 function handleDragOver(event: DragEvent) {
   // 只有当拖拽的是插件时才允许放入文件夹
-  if (props.item.type === 'folder') {
+  if (props.sortable && props.item.type === 'folder') {
     event.preventDefault()
     event.stopPropagation()
     event.dataTransfer!.dropEffect = 'move'
@@ -46,14 +48,14 @@ function handleDragOver(event: DragEvent) {
 }
 
 function handleDragEnter(event: DragEvent) {
-  if (props.item.type === 'folder') {
+  if (props.sortable && props.item.type === 'folder') {
     event.preventDefault()
     event.stopPropagation()
   }
 }
 
 function handleDragLeave(event: DragEvent) {
-  if (props.item.type === 'folder') {
+  if (props.sortable && props.item.type === 'folder') {
     event.preventDefault()
     event.stopPropagation()
     const target = event.currentTarget as HTMLElement
@@ -62,7 +64,7 @@ function handleDragLeave(event: DragEvent) {
 }
 
 function handleDropToFolder(event: DragEvent) {
-  if (props.item.type === 'folder') {
+  if (props.sortable && props.item.type === 'folder') {
     event.preventDefault()
     event.stopPropagation()
     const target = event.currentTarget as HTMLElement
@@ -89,6 +91,7 @@ function handleDropToFolder(event: DragEvent) {
         :folder-name="item.data.name"
         :plugin-count="item.data.pluginCount"
         :folder-config="item.data.config"
+        :sortable="sortable"
         @open="$emit('openFolder', item.id)"
         @delete="$emit('deleteFolder', item.id)"
         @rename="(oldName, newName) => $emit('renameFolder', oldName, newName)"
@@ -102,6 +105,7 @@ function handleDropToFolder(event: DragEvent) {
         :count="pluginStatistics[item.id] || 0"
         :plugin="item.data"
         :action="pluginActions[item.id] || false"
+        :sortable="sortable"
         @remove="$emit('refreshData')"
         @save="$emit('refreshData')"
         @action-done="$emit('actionDone', item.id)"

src/components/cards/SiteCard.vue

@@ -12,6 +12,7 @@ import type { Site, SiteStatistic, SiteUserData } from '@/api/types'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { formatFileSize } from '@/@core/utils/formatters'
 import { useConfirm } from '@/composables/useConfirm'
+import { getCachedSiteIcon } from '@/utils/siteIconCache'
 import { useDisplay } from 'vuetify'
 
 // 显示器宽度
@@ -25,6 +26,10 @@ const cardProps = defineProps({
   site: Object as PropType<Site>,
   data: Object as PropType<SiteUserData>,
   stats: Object as PropType<SiteStatistic>,
+  sortable: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // 定义触发的自定义事件
@@ -34,7 +39,8 @@ const emit = defineEmits(['update', 'remove', 'refresh-stats'])
 const createConfirm = useConfirm()
 
 // 图标
-const siteIcon = ref<string>('')
+const defaultSiteIcon = getLogoUrl('site')
+const siteIcon = ref<string>(defaultSiteIcon)
 
 // 提示框
 const $toast = useToast()
@@ -59,12 +65,20 @@ const siteUserDataDialog = ref(false)
 
 // 查询站点图标
 async function getSiteIcon() {
+  const siteId = cardProps.site?.id
+  if (!siteId) {
+    siteIcon.value = defaultSiteIcon
+    return
+  }
+
   try {
-    siteIcon.value = (await api.get(`site/icon/${cardProps.site?.id}`)).data.icon
+    siteIcon.value = await getCachedSiteIcon(siteId, async () => {
-    if (!siteIcon.value) {
+      const response = await api.get(`site/icon/${siteId}`)
-      siteIcon.value = getLogoUrl('site')
+
-    }
+      return response?.data?.icon || defaultSiteIcon
+    })
   } catch (error) {
+    siteIcon.value = defaultSiteIcon
     console.error(error)
   }
 }
@@ -225,7 +239,7 @@ onMounted(() => {
             rounded="lg"
             size="32"
             class="shrink-0"
-            :class="{ 'cursor-move': display.mdAndUp.value }"
+            :class="{ 'cursor-move': cardProps.sortable && display.mdAndUp.value }"
           >
             <VImg :src="siteIcon" class="w-full h-full" :alt="cardProps.site?.name" cover>
               <template #placeholder>

src/components/cards/SubscribeCard.vue

@@ -29,6 +29,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  sortable: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // 从 provide 中获取全局设置
@@ -266,6 +270,7 @@ watch(
   (newOpenState, _) => {
     if (newOpenState) editSubscribeDialog()
   },
+  { immediate: true },
 )
 
 // 监听订阅状态
@@ -380,7 +385,7 @@ function handleCardClick() {
                 <div
                   class="h-auto w-12 flex-shrink-0 overflow-hidden rounded-md"
                   v-if="imageLoaded"
-                  :class="{ 'cursor-move': display.mdAndUp.value }"
+                  :class="{ 'cursor-move': props.sortable && display.mdAndUp.value }"
                 >
                   <VImg :src="posterUrl" aspect-ratio="2/3" cover>
                     <template #placeholder>

src/components/misc/VirtualCardGrid.vue

@@ -4,6 +4,8 @@ const props = withDefaults(
     items: any[]
     minItemWidth?: number
     itemAspectRatio?: number
+    estimatedItemHeight?: number
+    scrollToIndex?: number
     gap?: number
     overscanRows?: number
     getItemKey?: (item: any, index: number) => string | number
@@ -11,6 +13,8 @@ const props = withDefaults(
   {
     minItemWidth: 144,
     itemAspectRatio: 1.5,
+    estimatedItemHeight: undefined,
+    scrollToIndex: undefined,
     gap: 16,
     overscanRows: 4,
     getItemKey: undefined,
@@ -27,7 +31,8 @@ const endIndex = ref(0)
 let resizeObserver: ResizeObserver | null = null
 let animationFrameId: number | null = null
 
-const rowStep = computed(() => itemHeight.value + props.gap)
+const effectiveItemHeight = computed(() => props.estimatedItemHeight ?? itemHeight.value)
+const rowStep = computed(() => effectiveItemHeight.value + props.gap)
 const totalRows = computed(() => Math.ceil(props.items.length / columnCount.value))
 
 const visibleItems = computed(() => props.items.slice(startIndex.value, endIndex.value))
@@ -104,7 +109,7 @@ function syncVisibleRange() {
   const columns = Math.max(1, Math.floor((containerWidth + props.gap) / (props.minItemWidth + props.gap)))
   columnCount.value = columns
   itemWidth.value = (containerWidth - props.gap * (columns - 1)) / columns
-  itemHeight.value = itemWidth.value * props.itemAspectRatio
+  itemHeight.value = props.estimatedItemHeight ?? itemWidth.value * props.itemAspectRatio
 
   const rowHeight = rowStep.value || 1
   const containerTop = window.scrollY + container.getBoundingClientRect().top
@@ -129,6 +134,30 @@ function queueSyncVisibleRange() {
   })
 }
 
+function scrollToItemIndex(index: number) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const container = containerRef.value
+  if (!container || props.items.length === 0 || index < 0) {
+    return
+  }
+
+  syncVisibleRange()
+
+  const safeIndex = Math.min(index, props.items.length - 1)
+  const targetRow = Math.floor(safeIndex / columnCount.value)
+  const targetTop = window.scrollY + container.getBoundingClientRect().top + targetRow * rowStep.value
+
+  window.scrollTo({
+    top: Math.max(targetTop - props.gap, 0),
+    behavior: 'auto',
+  })
+
+  queueSyncVisibleRange()
+}
+
 onMounted(() => {
   queueSyncVisibleRange()
   window.addEventListener('scroll', queueSyncVisibleRange, { passive: true })
@@ -157,7 +186,13 @@ onUnmounted(() => {
 })
 
 watch(
-  () => props.items.length,
+  [
+    () => props.items.length,
+    () => props.minItemWidth,
+    () => props.itemAspectRatio,
+    () => props.estimatedItemHeight,
+    () => props.gap,
+  ],
   () => {
     nextTick(() => {
       queueSyncVisibleRange()
@@ -165,6 +200,20 @@ watch(
   },
   { immediate: true },
 )
+
+watch(
+  [() => props.scrollToIndex, () => props.items.length],
+  ([scrollToIndex]) => {
+    if (scrollToIndex === undefined || scrollToIndex < 0) {
+      return
+    }
+
+    nextTick(() => {
+      scrollToItemIndex(scrollToIndex)
+    })
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

src/locales/en-US.ts

@@ -74,6 +74,8 @@ export default {
     descending: 'Descending',
     versionMismatch: 'The browser cache version is inconsistent with the server version, please try to clear the cache',
     clearCache: 'Clear Cache',
+    sortMode: 'Sort Mode',
+    sortModeHint: 'Virtualization is disabled for large lists to allow drag sorting, which may reduce smoothness.',
   },
   mediaType: {
     movie: 'Movie',

src/locales/zh-CN.ts

@@ -74,6 +74,8 @@ export default {
     descending: '降序',
     versionMismatch: '浏览器缓存版本与服务端版本不一致，请尝试清除缓存',
     clearCache: '清除缓存',
+    sortMode: '排序模式',
+    sortModeHint: '已关闭大列表虚拟渲染，方便拖拽排序，但页面流畅度可能下降。',
   },
   mediaType: {
     movie: '电影',

src/locales/zh-TW.ts

@@ -74,6 +74,8 @@ export default {
     descending: '降序',
     versionMismatch: '瀏覽器快取版本與服務端版本不一致，請嘗試清除快取',
     clearCache: '清除快取',
+    sortMode: '排序模式',
+    sortModeHint: '已關閉大列表虛擬渲染，方便拖拽排序，但頁面流暢度可能下降。',
   },
   mediaType: {
     movie: '電影',

src/pages/subscribe.vue

@@ -46,6 +46,9 @@ const searchShareDialog = ref(false)
 // 订阅分享统计弹窗
 const shareStatisticsDialog = ref(false)
 
+// 排序模式
+const subscribeSortMode = ref(false)
+
 // 订阅过滤词
 const subscribeFilter = ref('')
 
@@ -122,6 +125,10 @@ function openShareStatisticsDialog() {
   shareStatisticsDialog.value = true
 }
 
+function toggleSubscribeSortMode() {
+  subscribeSortMode.value = !subscribeSortMode.value
+}
+
 const shareKeywordUpdater = debounce((keyword: string) => {
   shareKeyword.value = keyword.trim()
 }, 300)
@@ -220,6 +227,14 @@ registerHeaderTab({
       },
       show: computed(() => activeTab.value === 'mysub'),
     },
+    {
+      icon: 'mdi-sort-variant',
+      variant: 'text',
+      color: computed(() => (subscribeSortMode.value ? 'warning' : 'gray')),
+      class: 'settings-icon-button',
+      action: toggleSubscribeSortMode,
+      show: computed(() => activeTab.value === 'mysub'),
+    },
     {
       icon: 'mdi-checkbox-multiple-marked-outline',
       variant: 'text',
@@ -267,6 +282,8 @@ onMounted(() => {
               :subid="subId"
               :keyword="subscribeFilter"
               :status-filter="subscribeStatusFilter ?? ''"
+              :sort-mode="subscribeSortMode"
+              @update:sort-mode="subscribeSortMode = $event"
             />
           </div>
         </transition>

src/utils/siteIconCache.ts

@@ -0,0 +1,52 @@
+type SiteIconCacheEntry = {
+  expiresAt: number
+  value: string
+}
+
+const SITE_ICON_CACHE_TTL = 10 * 60 * 1000
+const siteIconCache = new Map<string, SiteIconCacheEntry>()
+const siteIconRequests = new Map<string, Promise<string>>()
+
+function readCachedSiteIcon(key: string): string | undefined {
+  const entry = siteIconCache.get(key)
+  if (!entry) {
+    return undefined
+  }
+
+  if (entry.expiresAt <= Date.now()) {
+    siteIconCache.delete(key)
+    return undefined
+  }
+
+  return entry.value
+}
+
+export async function getCachedSiteIcon(siteId: string | number, loader: () => Promise<string>): Promise<string> {
+  const cacheKey = String(siteId)
+  const cachedIcon = readCachedSiteIcon(cacheKey)
+  if (cachedIcon !== undefined) {
+    return cachedIcon
+  }
+
+  const currentRequest = siteIconRequests.get(cacheKey)
+  if (currentRequest) {
+    return currentRequest
+  }
+
+  const request = loader()
+    .then(icon => {
+      siteIconCache.set(cacheKey, {
+        expiresAt: Date.now() + SITE_ICON_CACHE_TTL,
+        value: icon,
+      })
+
+      return icon
+    })
+    .finally(() => {
+      siteIconRequests.delete(cacheKey)
+    })
+
+  siteIconRequests.set(cacheKey, request)
+
+  return request
+}

src/views/plugin/PluginCardListView.vue

@@ -13,6 +13,7 @@ import PluginMarketSettingDialog from '@/components/dialog/PluginMarketSettingDi
 import { useDynamicButton } from '@/composables/useDynamicButton'
 import { useI18n } from 'vue-i18n'
 import PluginMixedSortCard from '@/components/cards/PluginMixedSortCard.vue'
+import VirtualCardGrid from '@/components/misc/VirtualCardGrid.vue'
 import { usePWA } from '@/composables/usePWA'
 import { useDynamicHeaderTab } from '@/composables/useDynamicHeaderTab'
 
@@ -30,6 +31,7 @@ const { appMode } = usePWA()
 
 // 当前标签
 const activeTab = ref('installed')
+const sortMode = ref(false)
 
 // 获取插件标签页
 const pluginTabs = computed(() => getPluginTabs(t))
@@ -58,6 +60,16 @@ registerHeaderTab({
       },
       show: computed(() => activeTab.value === 'installed'),
     },
+    {
+      icon: 'mdi-sort-variant',
+      variant: 'text',
+      color: computed(() => (sortMode.value ? 'warning' : 'gray')),
+      class: 'settings-icon-button',
+      action: () => {
+        sortMode.value = !sortMode.value
+      },
+      show: computed(() => activeTab.value === 'installed'),
+    },
     {
       icon: 'mdi-filter-multiple-outline',
       variant: 'text',
@@ -249,6 +261,41 @@ const newFolderDialog = ref(false)
 // 新文件夹名称
 const newFolderName = ref('')
 
+const pluginByIdMap = computed(() => new Map(dataList.value.map(plugin => [plugin.id, plugin])))
+const orderValueMap = computed(() => {
+  const map = new Map<string, number>()
+
+  orderConfig.value.forEach((item, index) => {
+    map.set(`${item.type || 'plugin'}:${item.id}`, item.order ?? index)
+  })
+
+  return map
+})
+
+const folderedPluginIds = computed(() => {
+  const pluginIds = new Set<string>()
+
+  Object.values(pluginFolders.value).forEach(folderData => {
+    const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
+    plugins.forEach((pluginId: string) => pluginIds.add(pluginId))
+  })
+
+  return pluginIds
+})
+
+const canDragSort = computed(() => sortMode.value && activeTab.value === 'installed')
+const shouldVirtualizeInstalledMainList = computed(() => !sortMode.value && !currentFolder.value)
+const shouldVirtualizeInstalledFolderList = computed(() => !sortMode.value && !!currentFolder.value)
+const installedScrollToIndex = computed(() => {
+  if (sortMode.value || currentFolder.value || !pluginId.value) {
+    return undefined
+  }
+
+  const targetIndex = mixedSortList.value.findIndex(item => item.type === 'plugin' && item.id === pluginId.value)
+
+  return targetIndex >= 0 ? targetIndex : undefined
+})
+
 // 获取文件夹内筛选后的插件
 const getFilteredFolderPlugins = (folderName: string) => {
   const folderData = pluginFolders.value[folderName]
@@ -257,7 +304,7 @@ const getFilteredFolderPlugins = (folderName: string) => {
   // 获取文件夹内的插件并应用筛选条件
   const folderPlugins: Plugin[] = []
   folderPluginIds.forEach((pluginId: string) => {
-    const plugin = dataList.value.find(p => p.id === pluginId)
+    const plugin = pluginByIdMap.value.get(pluginId)
     if (plugin) {
       folderPlugins.push(plugin)
     }
@@ -288,12 +335,7 @@ const getFilteredFolderPlugins = (folderName: string) => {
 const displayedPlugins = computed(() => {
   if (!currentFolder.value) {
     // 主列表：显示未归类的插件
-    const folderedPluginIds = new Set()
+    return filteredDataList.value.filter(plugin => !folderedPluginIds.value.has(plugin.id))
-    Object.values(pluginFolders.value).forEach(folderData => {
-      const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
-      plugins.forEach((pid: string) => folderedPluginIds.add(pid))
-    })
-    return filteredDataList.value.filter(plugin => !folderedPluginIds.has(plugin.id))
   } else {
     // 文件夹内：返回筛选后的插件
     return getFilteredFolderPlugins(currentFolder.value)
@@ -365,23 +407,21 @@ function updateMixedSortList() {
 
     // 添加文件夹项目
     displayedFolders.value.forEach(folder => {
-      const orderItem = orderConfig.value.find((item: any) => item.type === 'folder' && item.id === folder.name)
       allItems.push({
         type: 'folder',
         id: folder.name,
         data: folder,
-        order: orderItem?.order ?? 999,
+        order: orderValueMap.value.get(`folder:${folder.name}`) ?? 999,
       })
     })
 
     // 添加插件项目
     displayedPlugins.value.forEach(plugin => {
-      const orderItem = orderConfig.value.find((item: any) => item.type === 'plugin' && item.id === plugin.id)
       allItems.push({
         type: 'plugin',
         id: plugin.id || '',
         data: plugin,
-        order: orderItem?.order ?? 999,
+        order: orderValueMap.value.get(`plugin:${plugin.id}`) ?? 999,
       })
     })
 
@@ -463,9 +503,10 @@ function sortPluginOrder() {
     return
   }
   dataList.value.sort((a, b) => {
-    const aIndex = orderConfig.value.findIndex((item: { id: string }) => item.id === a.id)
+    const aIndex = orderValueMap.value.get(`plugin:${a.id}`) ?? Number.MAX_SAFE_INTEGER
-    const bIndex = orderConfig.value.findIndex((item: { id: string }) => item.id === b.id)
+    const bIndex = orderValueMap.value.get(`plugin:${b.id}`) ?? Number.MAX_SAFE_INTEGER
-    return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
+
+    return aIndex - bIndex
   })
 }
 
@@ -505,7 +546,7 @@ async function saveMixedSortOrder() {
     Object.values(pluginFolders.value).forEach(folderData => {
       const plugins = Array.isArray(folderData) ? folderData : folderData.plugins || []
       plugins.forEach((id: string) => {
-        const folderPlugin = dataList.value.find(p => p.id === id)
+        const folderPlugin = pluginByIdMap.value.get(id)
         if (folderPlugin && !newPluginOrder.find(p => p.id === id)) {
           newPluginOrder.push(folderPlugin)
         }
@@ -994,12 +1035,8 @@ async function loadPluginFolders() {
     // 设置文件夹排序 - 使用全局排序配置
     const folderNames = Object.keys(processedFolders)
     folderOrder.value = folderNames.sort((a, b) => {
-      // 从全局排序配置中查找文件夹的order
+      const aOrder = orderValueMap.value.get(`folder:${a}`) ?? processedFolders[a].order ?? 999
-      const aOrderItem = orderConfig.value.find((item: any) => item.type === 'folder' && item.id === a)
+      const bOrder = orderValueMap.value.get(`folder:${b}`) ?? processedFolders[b].order ?? 999
-      const bOrderItem = orderConfig.value.find((item: any) => item.type === 'folder' && item.id === b)
-
-      const aOrder = aOrderItem?.order ?? processedFolders[a].order ?? 999
-      const bOrder = bOrderItem?.order ?? processedFolders[b].order ?? 999
 
       return aOrder - bOrder
     })
@@ -1228,7 +1265,7 @@ async function handleDropToFolder(event: DragEvent, folderName: string) {
     }
 
     // 验证插件ID
-    const plugin = filteredDataList.value.find(p => p.id === pluginId)
+    const plugin = pluginByIdMap.value.get(pluginId)
 
     if (!plugin) {
       return
@@ -1485,6 +1522,9 @@ function onDragStartPlugin(evt: any) {
           <div>
             <VPageContentTitle v-if="installedFilter" :title="t('plugin.filter', { name: installedFilter })" />
             <LoadingBanner v-if="!isRefreshed" class="mt-12" />
+            <VAlert v-if="sortMode" color="warning" variant="tonal" class="mb-4">
+              {{ t('common.sortModeHint') }}
+            </VAlert>
 
             <!-- 文件夹和插件网格 -->
             <div v-if="(mixedSortList.length > 0 || displayedPlugins.length > 0) && isRefreshed">
@@ -1492,6 +1532,7 @@ function onDragStartPlugin(evt: any) {
               <template v-if="!currentFolder">
                 <!-- 主列表：使用draggable进行混合排序 -->
                 <draggable
+                  v-if="canDragSort"
                   v-model="mixedSortList"
                   @end="saveMixedSortOrder"
                   @start="onDragStartPlugin"
@@ -1506,6 +1547,7 @@ function onDragStartPlugin(evt: any) {
                       :item="element"
                       :plugin-statistics="PluginStatistics"
                       :plugin-actions="pluginActions"
+                      :sortable="true"
                       @open-folder="openFolder"
                       @delete-folder="deleteFolder"
                       @rename-folder="(oldName, newName) => renameFolder(oldName, newName)"
@@ -1520,11 +1562,40 @@ function onDragStartPlugin(evt: any) {
                     />
                   </template>
                 </draggable>
+                <VirtualCardGrid
+                  v-else-if="shouldVirtualizeInstalledMainList"
+                  :items="mixedSortList"
+                  :get-item-key="item => `${item.type}:${item.id}`"
+                  :min-item-width="256"
+                  :estimated-item-height="260"
+                  :scroll-to-index="installedScrollToIndex"
+                >
+                  <template #default="{ item }">
+                    <PluginMixedSortCard
+                      :item="item"
+                      :plugin-statistics="PluginStatistics"
+                      :plugin-actions="pluginActions"
+                      :sortable="false"
+                      @open-folder="openFolder"
+                      @delete-folder="deleteFolder"
+                      @rename-folder="(oldName, newName) => renameFolder(oldName, newName)"
+                      @update-folder-config="(folderName, config) => updateFolderConfig(folderName, config)"
+                      @refresh-data="refreshData"
+                      @action-done="
+                        pluginId => {
+                          pluginActions[pluginId] = false
+                        }
+                      "
+                      @drop-to-folder="(event, folderName) => handleDropToFolder(event, folderName)"
+                    />
+                  </template>
+                </VirtualCardGrid>
               </template>
 
               <template v-else>
                 <!-- 文件夹内：使用draggable排序 + 移出按钮 -->
                 <draggable
+                  v-if="canDragSort"
                   v-model="draggableFolderPlugins"
                   @end="saveFolderPluginOrder"
                   @start="onDragStartPlugin"
@@ -1539,6 +1610,7 @@ function onDragStartPlugin(evt: any) {
                       :item="{ type: 'plugin', id: element.id, data: element, order: 0 }"
                       :plugin-statistics="PluginStatistics"
                       :plugin-actions="pluginActions"
+                      :sortable="true"
                       :show-remove-button="true"
                       @refresh-data="refreshData"
                       @action-done="
@@ -1550,6 +1622,30 @@ function onDragStartPlugin(evt: any) {
                     />
                   </template>
                 </draggable>
+                <VirtualCardGrid
+                  v-else-if="shouldVirtualizeInstalledFolderList"
+                  :items="draggableFolderPlugins"
+                  :get-item-key="item => item.id"
+                  :min-item-width="256"
+                  :estimated-item-height="260"
+                >
+                  <template #default="{ item }">
+                    <PluginMixedSortCard
+                      :item="{ type: 'plugin', id: item.id, data: item, order: 0 }"
+                      :plugin-statistics="PluginStatistics"
+                      :plugin-actions="pluginActions"
+                      :sortable="false"
+                      :show-remove-button="true"
+                      @refresh-data="refreshData"
+                      @action-done="
+                        pluginId => {
+                          pluginActions[pluginId] = false
+                        }
+                      "
+                      @remove-from-folder="removeFromFolder"
+                    />
+                  </template>
+                </VirtualCardGrid>
               </template>
             </div>
 
@@ -1580,14 +1676,17 @@ function onDragStartPlugin(evt: any) {
             >
               <template #loading />
               <template #empty />
-              <div class="grid gap-4 grid-plugin-card">
+              <VirtualCardGrid
-                <template
+                v-if="displayUninstalledList.length > 0"
-                  v-for="(data, index) in displayUninstalledList"
+                :items="displayUninstalledList"
-                  :key="`${data.id}_v${data.plugin_version}_${index}`"
+                :get-item-key="item => `${item.id}_v${item.plugin_version}`"
-                >
+                :min-item-width="256"
-                  <PluginAppCard :plugin="data" :count="PluginStatistics[data.id || '0']" @install="pluginInstalled" />
+                :estimated-item-height="260"
+              >
+                <template #default="{ item }">
+                  <PluginAppCard :plugin="item" :count="PluginStatistics[item.id || '0']" @install="pluginInstalled" />
                 </template>
-              </div>
+              </VirtualCardGrid>
             </VInfiniteScroll>
             <NoDataFound
               v-if="displayUninstalledList.length === 0 && isAppMarketLoaded"

src/views/site/SiteCardListView.vue

@@ -7,6 +7,7 @@ import NoDataFound from '@/components/NoDataFound.vue'
 import SiteAddEditDialog from '@/components/dialog/SiteAddEditDialog.vue'
 import SiteStatisticsDialog from '@/components/dialog/SiteStatisticsDialog.vue'
 import SiteImportDialog from '@/components/dialog/SiteImportDialog.vue'
+import VirtualCardGrid from '@/components/misc/VirtualCardGrid.vue'
 import { useDisplay } from 'vuetify'
 import { useDynamicButton } from '@/composables/useDynamicButton'
 import { useI18n } from 'vue-i18n'
@@ -50,6 +51,7 @@ const siteStatsDialog = ref(false)
 
 // 导入站点对话框
 const siteImportDialog = ref(false)
+const sortMode = ref(false)
 
 // 筛选相关
 const filterMenu = ref(false)
@@ -96,6 +98,21 @@ const draggableSiteList = computed({
   },
 })
 
+const siteUserDataMap = computed<Record<string, SiteUserData | undefined>>(() => {
+  const map: Record<string, SiteUserData | undefined> = {}
+
+  userDataList.value.forEach(userData => {
+    if (userData.domain) {
+      map[userData.domain] = userData
+    }
+  })
+
+  return map
+})
+
+const canDragSort = computed(() => sortMode.value && filterOption.value === 'all')
+const shouldVirtualizeList = computed(() => !sortMode.value)
+
 // 当前筛选选项的显示信息
 const currentFilter = computed(() => {
   return filterOptions.value.find(option => option.value === filterOption.value)
@@ -106,12 +123,13 @@ async function fetchData() {
   try {
     loading.value = true
     siteList.value = await api.get('site/')
-    loading.value = false
     isRefreshed.value = true
     // 获取站点列表后，获取统计数据
     await fetchSiteStats()
   } catch (error) {
     console.error(error)
+  } finally {
+    loading.value = false
   }
 }
 
@@ -182,16 +200,6 @@ async function savaSitesPriority() {
   }
 }
 
-// 根据站点ID获取站点数据
-function getUserData(domain: string) {
-  return userDataList.value.find(userData => userData.domain === domain)
-}
-
-// 根据站点域名获取统计数据
-function getSiteStats(domain: string) {
-  return siteStatsList.value[domain] || {}
-}
-
 // 处理站点统计数据刷新请求
 async function handleRefreshStats(domain?: string) {
   if (domain) {
@@ -220,6 +228,10 @@ function selectFilter(value: string) {
   filterMenu.value = false
 }
 
+function toggleSortMode() {
+  sortMode.value = !sortMode.value
+}
+
 // 导出站点数据
 async function exportSites() {
   try {
@@ -284,6 +296,16 @@ onActivated(() => {
   }
 })
 
+watch(
+  () => filterOption.value,
+  value => {
+    if (value !== 'all' && sortMode.value) {
+      sortMode.value = false
+    }
+  },
+  { immediate: true },
+)
+
 // 使用动态按钮钩子
 useDynamicButton({
   icon: 'mdi-web-plus',
@@ -321,6 +343,17 @@ useDynamicButton({
             {{ t('site.statistics') }}
           </span>
         </VBtn>
+        <VBtn
+          :icon="display.smAndDown.value"
+          variant="text"
+          :color="sortMode ? 'warning' : 'gray'"
+          @click="toggleSortMode"
+        >
+          <VIcon icon="mdi-sort-variant" />
+          <span v-if="!display.smAndDown.value" class="ml-2">
+            {{ t('common.sortMode') }}
+          </span>
+        </VBtn>
         <!-- 筛选按钮 -->
         <VMenu v-model="filterMenu" offset-y :close-on-content-click="false" location="bottom end">
           <template #activator="{ props }">
@@ -362,28 +395,52 @@ useDynamicButton({
       </div>
     </div>
 
+    <VAlert v-if="sortMode" color="warning" variant="tonal" class="mb-4">
+      {{ t('common.sortModeHint') }}
+    </VAlert>
+
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />
     <draggable
-      v-if="draggableSiteList.length > 0"
+      v-if="draggableSiteList.length > 0 && canDragSort"
       v-model="draggableSiteList"
       @end="savaSitesPriority"
       handle=".cursor-move"
       item-key="id"
       tag="div"
       :component-data="{ 'class': 'grid gap-4 grid-site-card px-2' }"
-      :disabled="filterOption !== 'all'"
     >
       <template #item="{ element }">
         <SiteCard
           :site="element"
-          :data="getUserData(element.domain)"
+          :data="siteUserDataMap[element.domain]"
-          :stats="getSiteStats(element.domain)"
+          :stats="siteStatsList[element.domain] || {}"
+          :sortable="true"
           @remove="fetchData"
           @update="fetchData"
           @refresh-stats="handleRefreshStats"
         />
       </template>
     </draggable>
+    <VirtualCardGrid
+      v-else-if="draggableSiteList.length > 0 && shouldVirtualizeList"
+      :items="draggableSiteList"
+      :get-item-key="item => item.id"
+      :min-item-width="256"
+      :estimated-item-height="240"
+      class="px-2"
+    >
+      <template #default="{ item }">
+        <SiteCard
+          :site="item"
+          :data="siteUserDataMap[item.domain]"
+          :stats="siteStatsList[item.domain] || {}"
+          :sortable="false"
+          @remove="fetchData"
+          @update="fetchData"
+          @refresh-stats="handleRefreshStats"
+        />
+      </template>
+    </VirtualCardGrid>
   </div>
   <NoDataFound
     v-if="draggableSiteList.length === 0 && isRefreshed"

src/views/subscribe/SubscribeListView.vue

@@ -5,6 +5,7 @@ import type { Subscribe } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 import SubscribeCard from '@/components/cards/SubscribeCard.vue'
 import SubscribeHistoryDialog from '@/components/dialog/SubscribeHistoryDialog.vue'
+import VirtualCardGrid from '@/components/misc/VirtualCardGrid.vue'
 import { useUserStore } from '@/stores'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
@@ -32,8 +33,16 @@ const props = defineProps({
   subid: String,
   keyword: String,
   statusFilter: String,
+  sortMode: {
+    type: Boolean,
+    default: false,
+  },
 })
 
+const emit = defineEmits<{
+  'update:sortMode': [value: boolean]
+}>()
+
 // 是否刷新过
 let isRefreshed = ref(false)
 
@@ -56,6 +65,27 @@ const displayList = ref<Subscribe[]>([])
 const isBatchMode = ref(false)
 const selectedSubscribes = ref<number[]>([])
 
+const normalizedKeyword = computed(() => props.keyword?.trim().toLowerCase() || '')
+const selectedSubscribesSet = computed(() => new Set(selectedSubscribes.value))
+const canSortContext = computed(
+  () => !normalizedKeyword.value && (!props.statusFilter || props.statusFilter === 'all') && !isBatchMode.value,
+)
+const sortMode = computed({
+  get: () => props.sortMode,
+  set: value => emit('update:sortMode', value),
+})
+const canDragSort = computed(() => sortMode.value && canSortContext.value)
+const shouldVirtualizeList = computed(() => !sortMode.value)
+const scrollToIndex = computed(() => {
+  if (!props.subid || sortMode.value) {
+    return undefined
+  }
+
+  const targetIndex = displayList.value.findIndex(item => item.id.toString() === props.subid?.toString())
+
+  return targetIndex >= 0 ? targetIndex : undefined
+})
+
 // 根据订阅数据判断订阅状态
 function getSubscribeStatus(subscribe: Subscribe) {
   // 洗版中
@@ -95,26 +125,52 @@ function getSubscribeStatus(subscribe: Subscribe) {
 // API请求键值（计算属性）
 const orderRequestKey = computed(() => (props.type === '电影' ? 'SubscribeMovieOrder' : 'SubscribeTvOrder'))
 
-// 监听dataList变化，同步更新displayList
+// 监听数据和筛选变化，同步更新显示列表
-watch([dataList, () => props.keyword, () => props.statusFilter], () => {
+watch(
-  if (superUser)
+  [dataList, normalizedKeyword, () => props.statusFilter, orderConfig],
-    displayList.value = dataList.value.filter(
+  () => {
-      data =>
+    const orderIndexMap = new Map(orderConfig.value.map((item, index) => [item.id, index]))
-        data.type === props.type &&
+    const nextDisplayList = dataList.value.filter(data => {
-        (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())) &&
+      if (data.type !== props.type) {
-        (!props.statusFilter || props.statusFilter === 'all' || getSubscribeStatus(data) === props.statusFilter),
+        return false
-    )
+      }
-  else
+
-    displayList.value = dataList.value.filter(
+      if (!superUser && data.username !== userName) {
-      data =>
+        return false
-        data.type === props.type &&
+      }
-        data.username === userName &&
+
-        (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())) &&
+      if (normalizedKeyword.value && !data.name?.toLowerCase().includes(normalizedKeyword.value)) {
-        (!props.statusFilter || props.statusFilter === 'all' || getSubscribeStatus(data) === props.statusFilter),
+        return false
-    )
+      }
-  // 排序
+
-  sortSubscribeOrder()
+      if (props.statusFilter && props.statusFilter !== 'all' && getSubscribeStatus(data) !== props.statusFilter) {
-})
+        return false
+      }
+
+      return true
+    })
+
+    nextDisplayList.sort((a, b) => {
+      const aIndex = orderIndexMap.get(a.id) ?? Number.MAX_SAFE_INTEGER
+      const bIndex = orderIndexMap.get(b.id) ?? Number.MAX_SAFE_INTEGER
+
+      return aIndex - bIndex
+    })
+
+    displayList.value = nextDisplayList
+  },
+  { immediate: true },
+)
+
+watch(
+  canSortContext,
+  canSort => {
+    if (!canSort && sortMode.value) {
+      sortMode.value = false
+    }
+  },
+  { immediate: true },
+)
 
 // 加载顺序
 async function loadSubscribeOrderConfig() {
@@ -129,22 +185,6 @@ async function loadSubscribeOrderConfig() {
   }
 }
 
-// 按order的顺序排序
-async function sortSubscribeOrder() {
-  if (!orderConfig.value) {
-    return
-  }
-  if (displayList.value.length === 0) {
-    return
-  }
-  await loadSubscribeOrderConfig()
-  displayList.value.sort((a, b) => {
-    const aIndex = orderConfig.value.findIndex((item: { id: number }) => item.id === a.id)
-    const bIndex = orderConfig.value.findIndex((item: { id: number }) => item.id === b.id)
-    return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
-  })
-}
-
 // 保存顺序设置
 async function saveSubscribeOrder() {
   // 顺序配置
@@ -164,10 +204,11 @@ async function fetchData() {
   try {
     loading.value = true
     dataList.value = await api.get('subscribe/')
-    loading.value = false
     isRefreshed.value = true
   } catch (error) {
     console.error(error)
+  } finally {
+    loading.value = false
   }
 }
 
@@ -352,6 +393,7 @@ const errorTitle = computed(() => {
 })
 
 onMounted(async () => {
+  await loadSubscribeOrderConfig()
   await fetchData()
   if (props.subid) {
     // 找到这个订阅
@@ -441,28 +483,54 @@ defineExpose({
     </VCard>
   </div>
 
+  <VAlert v-if="sortMode" color="warning" variant="tonal" class="mb-4 mx-2">
+    {{ t('common.sortModeHint') }}
+  </VAlert>
+
   <draggable
-    v-if="displayList.length > 0"
+    v-if="displayList.length > 0 && canDragSort"
     v-model="displayList"
     @end="saveSubscribeOrder"
     handle=".cursor-move"
     item-key="id"
     tag="div"
     :component-data="{ class: 'grid gap-4 grid-subscribe-card px-2' }"
-    :disabled="props.keyword || (props.statusFilter && props.statusFilter !== 'all') || isBatchMode"
   >
     <template #item="{ element }">
       <SubscribeCard
         :key="element.id"
         :media="element"
         :batch-mode="isBatchMode"
-        :selected="selectedSubscribes.includes(element.id)"
+        :selected="selectedSubscribesSet.has(element.id)"
+        :sortable="true"
         @remove="fetchData"
         @save="fetchData"
         @select="toggleSelectSubscribe(element.id)"
       />
     </template>
   </draggable>
+  <VirtualCardGrid
+    v-else-if="displayList.length > 0 && shouldVirtualizeList"
+    :items="displayList"
+    :get-item-key="item => item.id"
+    :min-item-width="240"
+    :estimated-item-height="300"
+    :scroll-to-index="scrollToIndex"
+    class="px-2"
+  >
+    <template #default="{ item }">
+      <SubscribeCard
+        :key="item.id"
+        :media="item"
+        :batch-mode="isBatchMode"
+        :selected="selectedSubscribesSet.has(item.id)"
+        :sortable="false"
+        @remove="fetchData"
+        @save="fetchData"
+        @select="toggleSelectSubscribe(item.id)"
+      />
+    </template>
+  </VirtualCardGrid>
   <NoDataFound
     v-if="displayList.length === 0 && isRefreshed"
     error-code="404"