From 2a631de845e57af2aeb6ede5d1aa2b5a8a0f7819 Mon Sep 17 00:00:00 2001
From: ihuangxiaomin <1219549841@qq.com>
Date: Thu, 7 Nov 2024 18:12:59 +0800
Subject: [PATCH] fix: resolve conversations

---
 packages/effects/common-ui/package.json       |  2 +-
 .../components/icon-picker/icon-picker.vue    |  8 +++++
 packages/effects/hooks/src/use-pagination.ts  | 27 ++++++++++++++--
 .../demos/features/icons/icon-picker.vue      | 31 +++++++++++--------
 4 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index aa757d283d4..766b370e8cc 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -27,8 +27,8 @@
     "@vben/constants": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/types": "workspace:*",
     "@vben/hooks": "workspace:*",
+    "@vben/types": "workspace:*",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "qrcode": "catalog:",
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 6bbbc7559a6..2d4f2eb137d 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
@@ -42,6 +42,14 @@ const currentSelect = ref('');
 const currentList = ref(props.icons);
 const refTrigger = ref<HTMLDivElement>();
 
+watch(
+  () => props.icons,
+  (newIcons) => {
+    currentList.value = newIcons;
+  },
+  { immediate: true },
+);
+
 const { getPaginationList, getTotal, setCurrentPage } = usePagination(
   currentList,
   props.pageSize,
diff --git a/packages/effects/hooks/src/use-pagination.ts b/packages/effects/hooks/src/use-pagination.ts
index 5422e87f268..ba3e269333e 100644
--- a/packages/effects/hooks/src/use-pagination.ts
+++ b/packages/effects/hooks/src/use-pagination.ts
@@ -1,12 +1,23 @@
 import type { Ref } from 'vue';
 import { computed, ref, unref } from 'vue';
 
+/**
+ * Paginates an array of items
+ * @param list The array to paginate
+ * @param pageNo The current page number (1-based)
+ * @param pageSize Number of items per page
+ * @returns Paginated array slice
+ * @throws {Error} If pageNo or pageSize are invalid
+ */
 function pagination<T = any>(list: T[], pageNo: number, pageSize: number): T[] {
+  if (pageNo < 1) throw new Error('Page number must be positive');
+  if (pageSize < 1) throw new Error('Page size must be positive');
+
   const offset = (pageNo - 1) * Number(pageSize);
   const ret =
-    offset + Number(pageSize) >= list.length
+    offset + pageSize >= list.length
       ? list.slice(offset)
-      : list.slice(offset, offset + Number(pageSize));
+      : list.slice(offset, offset + pageSize);
   return ret;
 }
 
@@ -14,6 +25,10 @@ export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) {
   const currentPage = ref(1);
   const pageSizeRef = ref(pageSize);
 
+  const totalPages = computed(() =>
+    Math.ceil(unref(list).length / unref(pageSizeRef)),
+  );
+
   const getPaginationList = computed(() => {
     return pagination(unref(list), unref(currentPage), unref(pageSizeRef));
   });
@@ -23,11 +38,19 @@ export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) {
   });
 
   function setCurrentPage(page: number) {
+    if (page < 1 || page > unref(totalPages)) {
+      throw new Error('Invalid page number');
+    }
     currentPage.value = page;
   }
 
   function setPageSize(pageSize: number) {
+    if (pageSize < 1) {
+      throw new Error('Page size must be positive');
+    }
     pageSizeRef.value = pageSize;
+    // Reset to first page to prevent invalid state
+    currentPage.value = 1;
   }
 
   return { setCurrentPage, getTotal, setPageSize, getPaginationList };
diff --git a/playground/src/views/demos/features/icons/icon-picker.vue b/playground/src/views/demos/features/icons/icon-picker.vue
index 6e05637f10e..699ebec6733 100644
--- a/playground/src/views/demos/features/icons/icon-picker.vue
+++ b/playground/src/views/demos/features/icons/icon-picker.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { IconPicker } from '@vben/common-ui';
 import { listIcons } from '@vben/icons';
@@ -37,21 +37,26 @@ const props = withDefaults(defineProps<Props>(), {
 const refIconPicker = ref();
 const currentSelect = ref('');
 
-function getIcons() {
-  if (props.prefix) {
-    return listIcons('', props.prefix);
-  } else {
-    const prefix = iconsData.prefix;
-    return iconsData.icons.map((icon) => `${prefix}:${icon}`);
+const currentList = computed(() => {
+  try {
+    if (props.prefix) {
+      const icons = listIcons('', props.prefix);
+      if (icons.length === 0) {
+        console.warn(`No icons found for prefix: ${props.prefix}`);
+      }
+      return icons;
+    } else {
+      const prefix = iconsData.prefix;
+      return iconsData.icons.map((icon) => `${prefix}:${icon}`);
+    }
+  } catch (error) {
+    console.error('Failed to load icons:', error);
+    return [];
   }
-}
-
-const currentList = ref(getIcons());
+});
 
 const triggerPopover = () => {
-  if (refIconPicker.value) {
-    refIconPicker.value.changeOpenState();
-  }
+  refIconPicker.value?.changeOpenState?.();
 };
 
 const handleChange = (icon: string) => {