diff --git a/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue b/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue index d4eed1e1b..c60227473 100644 --- a/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue +++ b/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue @@ -71,17 +71,10 @@ const modelValue = defineModel({ default: '', type: String }); const visible = ref(false); const currentSelect = ref(''); -const currentPage = ref(1); const keyword = ref(''); const keywordDebounce = refDebounced(keyword, 300); const innerIcons = ref([]); -/* 当检索关键词变化时,重置分页 */ -watch(keywordDebounce, () => { - currentPage.value = 1; - setCurrentPage(1); -}); - watchDebounced( () => props.prefix, async (prefix) => { @@ -122,7 +115,7 @@ const showList = computed(() => { ); }); -const { paginationList, total, setCurrentPage } = usePagination( +const { paginationList, total, setCurrentPage, currentPage } = usePagination( showList, props.pageSize, ); @@ -145,7 +138,6 @@ const handleClick = (icon: string) => { }; const handlePageChange = (page: number) => { - currentPage.value = page; setCurrentPage(page); }; diff --git a/packages/effects/hooks/src/use-pagination.ts b/packages/effects/hooks/src/use-pagination.ts index 8d7ee78c6..0115606d3 100644 --- a/packages/effects/hooks/src/use-pagination.ts +++ b/packages/effects/hooks/src/use-pagination.ts @@ -1,6 +1,6 @@ import type { Ref } from 'vue'; -import { computed, ref, unref } from 'vue'; +import { computed, ref, unref, watch } from 'vue'; /** * Paginates an array of items @@ -22,7 +22,11 @@ function pagination(list: T[], pageNo: number, pageSize: number): T[] { return ret; } -export function usePagination(list: Ref, pageSize: number) { +export function usePagination( + list: Ref, + pageSize: number, + totalChangeToFirstPage = true, +) { const currentPage = ref(1); const pageSizeRef = ref(pageSize); @@ -38,11 +42,21 @@ export function usePagination(list: Ref, pageSize: number) { return unref(list).length; }); + if (totalChangeToFirstPage) { + watch(total, () => { + setCurrentPage(1); + }); + } + function setCurrentPage(page: number) { - if (page < 1 || page > unref(totalPages)) { - throw new Error('Invalid page number'); + if (page === 1 && unref(totalPages) === 0) { + currentPage.value = 1; + } else { + if (page < 1 || page > unref(totalPages)) { + throw new Error('Invalid page number'); + } + currentPage.value = page; } - currentPage.value = page; } function setPageSize(pageSize: number) { @@ -54,5 +68,5 @@ export function usePagination(list: Ref, pageSize: number) { currentPage.value = 1; } - return { setCurrentPage, total, setPageSize, paginationList }; + return { setCurrentPage, total, setPageSize, paginationList, currentPage }; }