test

package.json

@@ -51,6 +51,7 @@
     "vue-prism-component": "^2.0.0",
     "vue-router": "^4.2.0",
     "vue-toast-notification": "^3",
+    "vue-virtual-scroll-grid": "^1.11.0",
     "vue3-ace-editor": "^2.2.4",
     "vue3-apexcharts": "^1.4.1",
     "vue3-perfect-scrollbar": "^2.0.0",
@@ -113,4 +114,4 @@
   "resolutions": {
     "postcss": "8"
   }
-}
+}

src/views/plugin/PluginCardListView.vue

@@ -8,6 +8,7 @@ import PluginCard from '@/components/cards/PluginCard.vue'
 import noImage from '@images/logos/plugin.png'
 import { useDisplay } from 'vuetify'
 import { isNullOrEmptyObject } from '@/@core/utils'
+import Grid from 'vue-virtual-scroll-grid'
 
 // 显示器宽度
 const display = useDisplay()
@@ -274,6 +275,24 @@ function pluginLabels(label: string | undefined) {
   return label.split(',')
 }
 
+// 插件分页提供器
+const pluginsPageProvider = (pageNumber: number, pageSize: number) => {
+  return new Promise<Plugin[]>(resolve => {
+    const start = pageNumber * pageSize
+    const end = start + pageSize
+    resolve(dataList.value.slice(start, end + 1))
+  })
+}
+
+// 插件市场分页提供器
+const pluginsMarketPageProvider = (pageNumber: number, pageSize: number) => {
+  return new Promise<Plugin[]>(resolve => {
+    const start = pageNumber * pageSize
+    const end = start + pageSize
+    resolve(sortedUninstalledList.value.slice(start, end + 1))
+  })
+}
+
 // 加载时获取数据
 onBeforeMount(async () => {
   await refreshData()
@@ -283,18 +302,28 @@ onBeforeMount(async () => {
 
 <template>
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-  <div v-if="dataList.length > 0" class="grid gap-4 grid-plugin-card">
+  <Grid
-    <PluginCard
+    :length="dataList.length"
-      v-for="data in dataList"
+    :pageSize="20"
-      :key="`${data.id}_v${data.plugin_version}`"
+    :pageProvider="pluginsPageProvider"
-      :count="PluginStatistics[data.id || '0']"
+    class="grid gap-4 grid-plugin-card"
-      :plugin="data"
+  >
-      :action="pluginActions[data.id || '0']"
+    <template v-slot:probe>
-      @remove="refreshData"
+      <PluginAppCard />
-      @save="refreshData"
+    </template>
-      @action-done="pluginActions[data.id || '0'] = false"
+    <template v-slot:default="{ item, style, index }">
-    />
+      <PluginCard
-  </div>
+        :style="style"
+        :key="index"
+        :count="PluginStatistics[item.id || '0']"
+        :plugin="item"
+        :action="pluginActions[item.id || '0']"
+        @remove="refreshData"
+        @save="refreshData"
+        @action-done="pluginActions[item.id || '0'] = false"
+      />
+    </template>
+  </Grid>
   <NoDataFound
     v-if="dataList.length === 0 && isRefreshed"
     error-code="404"
@@ -376,15 +405,26 @@ onBeforeMount(async () => {
             </VCol>
           </VRow>
         </div>
-        <div v-if="isAppMarketLoaded" class="grid gap-4 grid-plugin-card">
+        <Grid
-          <PluginAppCard
+          v-if="isAppMarketLoaded"
-            v-for="data in sortedUninstalledList"
+          :length="sortedUninstalledList.length"
-            :key="`${data.id}_v${data.plugin_version}`"
+          :pageSize="20"
-            :plugin="data"
+          :pageProvider="pluginsMarketPageProvider"
-            :count="PluginStatistics[data.id || '0']"
+          class="grid gap-4 grid-plugin-card"
-            @install="pluginInstalled"
+        >
-          />
+          <template v-slot:probe>
-        </div>
+            <PluginAppCard />
+          </template>
+          <template v-slot:default="{ item, style, index }">
+            <PluginAppCard
+              :style="style"
+              :key="index"
+              :plugin="item"
+              :count="PluginStatistics[item.id || '0']"
+              @install="pluginInstalled"
+            />
+          </template>
+        </Grid>
         <NoDataFound
           v-if="uninstalledList.length === 0 && isAppMarketLoaded"
           error-code="404"

yarn.lock

@@ -2228,7 +2228,7 @@
   dependencies:
     upath "^2.0.1"
 
-"@vueuse/core@^10.1.2":
+"@vueuse/core@^10.0.0", "@vueuse/core@^10.1.2":
   version "10.9.0"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
   integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
@@ -5975,6 +5975,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+ramda@>=0.28.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.30.0.tgz#3cc4f0ddddfa6334dad2f371bd72c33237d92cd0"
+  integrity sha512-13Y0iMhIQuAm/wNGBL/9HEqIfRGmNmjKnTPlKWfA9f7dnDkr8d45wQ+S7+ZLh/Pq9PdcGxkqKUEA7ySu1QSd9Q==
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -6213,6 +6218,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.8.0:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-array-concat@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
@@ -6996,7 +7008,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.3.1:
+tslib@^2.1.0, tslib@^2.3.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -7445,6 +7457,15 @@ vue-tsc@^2.0.10:
     "@vue/language-core" "2.0.10"
     semver "^7.5.4"
 
+vue-virtual-scroll-grid@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroll-grid/-/vue-virtual-scroll-grid-1.11.0.tgz#83daa6af439f0b66283356faa4d45156eda2ffaf"
+  integrity sha512-f3hBqQgdbSVg8srhun/7nDkGBE/GOAXzyZH3fcgqO59y2iCfBoll2kUe9T42GAqXvslHzlTwNSPcwEyMsiKz3A==
+  dependencies:
+    "@vueuse/core" "^10.0.0"
+    ramda ">=0.28.0"
+    rxjs "^7.8.0"
+
 vue3-ace-editor@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/vue3-ace-editor/-/vue3-ace-editor-2.2.4.tgz#1f2a787f91cf7979f27fab29e0e0604bb3ee1c17"