diff --git a/package.json b/package.json index 11a03371..ae7eb9f4 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/views/plugin/PluginCardListView.vue b/src/views/plugin/PluginCardListView.vue index 34e0d190..c6ae1e93 100644 --- a/src/views/plugin/PluginCardListView.vue +++ b/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(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(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 () => {