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

2026-08-09 15:43:29 +08:00 · 2026-05-09 16:07:28 +08:00
parent a475085d7b
commit 96d655155a
14 changed files with 481 additions and 101 deletions
--- a/src/views/plugin/PluginCardListView.vue
+++ b/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()
-    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))
+    return filteredDataList.value.filter(plugin => !folderedPluginIds.value.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 bIndex = orderConfig.value.findIndex((item: { id: string }) => item.id === b.id)
-    return (aIndex === -1 ? 999 : aIndex) - (bIndex === -1 ? 999 : bIndex)
+    const aIndex = orderValueMap.value.get(`plugin:${a.id}`) ?? Number.MAX_SAFE_INTEGER
+    const bIndex = orderValueMap.value.get(`plugin:${b.id}`) ?? Number.MAX_SAFE_INTEGER
+
+    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 aOrderItem = orderConfig.value.find((item: any) => item.type === 'folder' && item.id === a)
-      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
+      const aOrder = orderValueMap.value.get(`folder:${a}`) ?? processedFolders[a].order ?? 999
+      const bOrder = orderValueMap.value.get(`folder:${b}`) ?? 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">
-                <template
-                  v-for="(data, index) in displayUninstalledList"
-                  :key="`${data.id}_v${data.plugin_version}_${index}`"
-                >
-                  <PluginAppCard :plugin="data" :count="PluginStatistics[data.id || '0']" @install="pluginInstalled" />
+              <VirtualCardGrid
+                v-if="displayUninstalledList.length > 0"
+                :items="displayUninstalledList"
+                :get-item-key="item => `${item.id}_v${item.plugin_version}`"
+                :min-item-width="256"
+                :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"
--- a/src/views/site/SiteCardListView.vue
+++ b/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)"
-          :stats="getSiteStats(element.domain)"
+          :data="siteUserDataMap[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"
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/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], () => {
-  if (superUser)
-    displayList.value = dataList.value.filter(
-      data =>
-        data.type === props.type &&
-        (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())) &&
-        (!props.statusFilter || props.statusFilter === 'all' || getSubscribeStatus(data) === props.statusFilter),
-    )
-  else
-    displayList.value = dataList.value.filter(
-      data =>
-        data.type === props.type &&
-        data.username === userName &&
-        (!props.keyword || data.name.toLowerCase().includes(props.keyword.toLowerCase())) &&
-        (!props.statusFilter || props.statusFilter === 'all' || getSubscribeStatus(data) === props.statusFilter),
-    )
-  // 排序
-  sortSubscribeOrder()
-})
+// 监听数据和筛选变化，同步更新显示列表
+watch(
+  [dataList, normalizedKeyword, () => props.statusFilter, orderConfig],
+  () => {
+    const orderIndexMap = new Map(orderConfig.value.map((item, index) => [item.id, index]))
+    const nextDisplayList = dataList.value.filter(data => {
+      if (data.type !== props.type) {
+        return false
+      }
+
+      if (!superUser && data.username !== userName) {
+        return false
+      }
+
+      if (normalizedKeyword.value && !data.name?.toLowerCase().includes(normalizedKeyword.value)) {
+        return false
+      }
+
+      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"