From 639d2e15253a73c0235d16c6721864961a7510c0 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Thu, 26 Sep 2024 23:09:17 +0800
Subject: [PATCH] feat: add pagination component (#4522)

* feat: add pagination component

* chore: update
---
 packages/@core/ui-kit/shadcn-ui/package.json  |   1 -
 .../ui-kit/shadcn-ui/src/components/index.ts  |   2 +
 .../src/components/pagination/index.ts        |   2 +
 .../src/components/pagination/pagination.ts   |  41 +++++++
 .../src/components/pagination/pagination.vue  | 111 ++++++++++++++++++
 .../ui/accordion/AccordionTrigger.vue         |   4 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |   4 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |   4 +-
 .../src/components/ui/button/Button.vue       |   2 +-
 .../src/components/ui/checkbox/Checkbox.vue   |   4 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |   4 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |   4 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |   4 +-
 .../components/ui/dialog/DialogContent.vue    |   4 +-
 .../ui/dialog/DialogScrollContent.vue         |   3 +-
 .../DropdownMenuCheckboxItem.vue              |   4 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |   4 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |   4 +-
 .../ui/pagination/PaginationEllipsis.vue      |  27 +++++
 .../ui/pagination/PaginationFirst.vue         |  33 ++++++
 .../ui/pagination/PaginationLast.vue          |  33 ++++++
 .../ui/pagination/PaginationNext.vue          |  33 ++++++
 .../ui/pagination/PaginationPrev.vue          |  33 ++++++
 .../src/components/ui/pagination/index.ts     |  10 ++
 .../ui/pin-input/PinInputSeparator.vue        |   4 +-
 .../ui/radio-group/RadioGroupItem.vue         |   4 +-
 .../src/components/ui/select/SelectItem.vue   |   4 +-
 .../ui/select/SelectScrollDownButton.vue      |   4 +-
 .../ui/select/SelectScrollUpButton.vue        |   4 +-
 .../components/ui/select/SelectTrigger.vue    |   4 +-
 .../src/components/ui/toast/ToastClose.vue    |   4 +-
 pnpm-lock.yaml                                |  15 ---
 pnpm-workspace.yaml                           |   1 -
 33 files changed, 364 insertions(+), 55 deletions(-)
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/pagination/index.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.ts
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationEllipsis.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationFirst.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationLast.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationNext.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationPrev.vue
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/index.ts

diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 1150065e123..e32c40d6640 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -40,7 +40,6 @@
     }
   },
   "dependencies": {
-    "@radix-icons/vue": "catalog:",
     "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shared": "workspace:*",
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
index b4099279e40..c6a3e6806b7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
@@ -14,6 +14,7 @@ export * from './input-password';
 export * from './link';
 export * from './logo';
 export * from './menu-badge';
+export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './render-content';
@@ -38,6 +39,7 @@ export * from './ui/hover-card';
 export * from './ui/input';
 export * from './ui/label';
 export * from './ui/number-field';
+export * from './ui/pagination';
 export * from './ui/pin-input';
 export * from './ui/popover';
 export * from './ui/radio-group';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pagination/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pagination/index.ts
new file mode 100644
index 00000000000..5b875294400
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pagination/index.ts
@@ -0,0 +1,2 @@
+export type { PaginationProps as VbenPaginationProps } from './pagination';
+export { default as VbenPagination } from './pagination.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.ts
new file mode 100644
index 00000000000..a14d3867e53
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.ts
@@ -0,0 +1,41 @@
+export interface PaginationProps {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 每页记录数选项
+   */
+  pageSizeOptions?: number[];
+  /**
+   * 当 时true，始终显示第一页、最后一页和省略号
+   */
+  showEdges?: boolean;
+  /**
+   * 显示当前页选择下拉框
+   */
+  showRowsPerPage?: boolean;
+  /**
+   * 显示总条数文本
+   */
+  showTotalText?: boolean;
+  /**
+   * 当前页面周围应显示的兄弟页面数量
+   */
+  siblingCount?: number;
+  /**
+   * 组件尺寸
+   */
+  size?: 'default' | 'large' | 'small';
+
+  /**
+   * 总条数
+   */
+  total?: number;
+}
+
+export const SIZE_CLASS_MAP = {
+  default: 'size-8',
+  large: 'size-9',
+  small: 'size-7',
+};
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.vue
new file mode 100644
index 00000000000..37f1ba3901d
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pagination/pagination.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Button } from '../ui/button';
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from '../ui/pagination';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { type PaginationProps, SIZE_CLASS_MAP } from './pagination';
+
+interface Props extends PaginationProps {}
+
+const {
+  disabled = false,
+  pageSizeOptions = [10, 20, 30, 50, 100, 200],
+  showEdges = true,
+  showRowsPerPage = true,
+  showTotalText = true,
+  siblingCount = 1,
+  size = 'default',
+  total = 500,
+} = defineProps<Props>();
+
+const currentPage = defineModel<number>('currentPage', { default: 1 });
+const itemPerPage = defineModel<number>('itemPerPage', { default: 20 });
+
+const itemSize = computed(() => {
+  return SIZE_CLASS_MAP[size];
+});
+
+const options = computed(() => {
+  return pageSizeOptions.map((item) => ({
+    label: `${item} 条/页`,
+    value: `${item}`,
+  }));
+});
+
+function handleUpdateModelValue(value: string) {
+  itemPerPage.value = Number(value);
+}
+</script>
+
+<template>
+  <Pagination
+    v-model:page="currentPage"
+    :disabled="disabled"
+    :items-per-page="itemPerPage"
+    :show-edges="showEdges"
+    :sibling-count="siblingCount"
+    :total="total"
+  >
+    <PaginationList
+      v-slot="{ items }"
+      class="flex w-full items-center justify-end gap-1"
+    >
+      <span v-if="showTotalText" class="mr-2">共 {{ total }} 条</span>
+
+      <Select
+        v-if="showRowsPerPage"
+        :model-value="`${itemPerPage}`"
+        @update:model-value="handleUpdateModelValue"
+      >
+        <SelectTrigger class="w-30 mr-auto h-8">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <template v-for="item in options" :key="item.value">
+            <SelectItem :value="item.value"> {{ item.label }} </SelectItem>
+          </template>
+        </SelectContent>
+      </Select>
+
+      <PaginationFirst :class="cn('size-8', itemSize)" />
+      <PaginationPrev :class="cn('size-8', itemSize)" />
+      <template v-for="(item, index) in items">
+        <PaginationListItem
+          v-if="item.type === 'page'"
+          :key="index"
+          :value="item.value"
+          as-child
+        >
+          <Button
+            :class="cn('size-8 p-0 shadow-none', itemSize)"
+            :variant="item.value === currentPage ? 'default' : 'outline'"
+          >
+            {{ item.value }}
+          </Button>
+        </PaginationListItem>
+        <PaginationEllipsis v-else :key="item.type" :index="index" />
+      </template>
+
+      <PaginationNext :class="cn('size-8', itemSize)" />
+      <PaginationLast :class="cn('size-8', itemSize)" />
+    </PaginationList>
+  </Pagination>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue
index ed40834cda6..48d65e6f63a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/accordion/AccordionTrigger.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ChevronDownIcon } from '@radix-icons/vue';
+import { ChevronDown } from 'lucide-vue-next';
 import {
   AccordionHeader,
   AccordionTrigger,
@@ -32,7 +32,7 @@ const delegatedProps = computed(() => {
     >
       <slot></slot>
       <slot name="icon">
-        <ChevronDownIcon
+        <ChevronDown
           class="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200"
         />
       </slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
index e0a6a7c844b..b98f99e8bb7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@vben-core/shared/utils';
 
-import { DotsHorizontalIcon } from '@radix-icons/vue';
+import { MoreHorizontal } from 'lucide-vue-next';
 
 const props = defineProps<{
   class?: any;
@@ -15,7 +15,7 @@ const props = defineProps<{
     role="presentation"
   >
     <slot>
-      <DotsHorizontalIcon class="h-4 w-4" />
+      <MoreHorizontal class="h-4 w-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
index c221f4e0378..bf0585187f8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { cn } from '@vben-core/shared/utils';
 
-import { ChevronRightIcon } from '@radix-icons/vue';
+import { ChevronRight } from 'lucide-vue-next';
 
 const props = defineProps<{
   class?: any;
@@ -15,7 +15,7 @@ const props = defineProps<{
     role="presentation"
   >
     <slot>
-      <ChevronRightIcon />
+      <ChevronRight />
     </slot>
   </li>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue
index cd795725910..7895d01060e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/button/Button.vue
@@ -10,7 +10,7 @@ import { buttonVariants } from './button';
 interface Props extends PrimitiveProps {
   class?: any;
   size?: ButtonVariantSize;
-  variant?: 'heavy' & ButtonVariants;
+  variant?: ButtonVariants;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue
index e22cd6394e6..a0462e6e558 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/checkbox/Checkbox.vue
@@ -5,7 +5,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { CheckIcon } from '@radix-icons/vue';
+import { Check } from 'lucide-vue-next';
 import {
   CheckboxIndicator,
   CheckboxRoot,
@@ -38,7 +38,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       class="flex h-full w-full items-center justify-center text-current"
     >
       <slot>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
index 576a81979c6..5a787564516 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { CheckIcon } from '@radix-icons/vue';
+import { Check } from 'lucide-vue-next';
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </ContextMenuItemIndicator>
     </span>
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue
index 4f8bf392edb..05d7a4923e4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuRadioItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DotFilledIcon } from '@radix-icons/vue';
+import { Circle } from 'lucide-vue-next';
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <Circle class="h-2 w-2 fill-current" />
       </ContextMenuItemIndicator>
     </span>
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue
index c7275154f55..fbf6fe1d9cd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/context-menu/ContextMenuSubTrigger.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ChevronRightIcon } from '@radix-icons/vue';
+import { ChevronRight } from 'lucide-vue-next';
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
@@ -38,6 +38,6 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <slot></slot>
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </ContextMenuSubTrigger>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
index 233a2778e26..4b74b712f76 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Cross2Icon } from '@radix-icons/vue';
+import { X } from 'lucide-vue-next';
 import {
   DialogClose,
   DialogContent,
@@ -77,7 +77,7 @@ defineExpose({
         "
         @click="() => emits('close')"
       >
-        <Cross2Icon class="h-4 w-4" />
+        <X class="h-4 w-4" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue
index 39afc20c5e5..f17048b4ca1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogScrollContent.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
+import { X } from 'lucide-vue-next';
 import {
   DialogClose,
   DialogContent,
@@ -56,7 +57,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <DialogClose
           class="hover:bg-secondary absolute right-4 top-4 rounded-md p-0.5 transition-colors"
         >
-          <Cross2Icon class="h-4 w-4" />
+          <X class="h-4 w-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 46729c23c9b..508218ccd0c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { CheckIcon } from '@radix-icons/vue';
+import { Check } from 'lucide-vue-next';
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 5b6593a8990..54bcee374b9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DotFilledIcon } from '@radix-icons/vue';
+import { Circle } from 'lucide-vue-next';
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <DotFilledIcon class="h-4 w-4 fill-current" />
+        <Circle class="h-2 w-2 fill-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index e3a5056900a..5efdbf6d717 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ChevronRightIcon } from '@radix-icons/vue';
+import { ChevronRight } from 'lucide-vue-next';
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
@@ -32,6 +32,6 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <slot></slot>
-    <ChevronRightIcon class="ml-auto h-4 w-4" />
+    <ChevronRight class="ml-auto h-4 w-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationEllipsis.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 00000000000..a05beb8a6bc
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { MoreHorizontal } from 'lucide-vue-next';
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue';
+
+const props = defineProps<{ class?: any } & PaginationEllipsisProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationEllipsis
+    v-bind="delegatedProps"
+    :class="cn('flex size-8 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationFirst.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationFirst.vue
new file mode 100644
index 00000000000..ea5ca42d206
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronsLeft } from 'lucide-vue-next';
+import { PaginationFirst, type PaginationFirstProps } from 'radix-vue';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<{ class?: any } & PaginationFirstProps>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsLeft class="size-4" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationLast.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationLast.vue
new file mode 100644
index 00000000000..d6b24fd87c3
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationLast.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronsRight } from 'lucide-vue-next';
+import { PaginationLast, type PaginationLastProps } from 'radix-vue';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<{ class?: any } & PaginationLastProps>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsRight class="size-4" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationNext.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationNext.vue
new file mode 100644
index 00000000000..cc67596314e
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationNext.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronRight } from 'lucide-vue-next';
+import { PaginationNext, type PaginationNextProps } from 'radix-vue';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<{ class?: any } & PaginationNextProps>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronRight class="size-4" />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationPrev.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationPrev.vue
new file mode 100644
index 00000000000..4996e687be2
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/PaginationPrev.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronLeft } from 'lucide-vue-next';
+import { PaginationPrev, type PaginationPrevProps } from 'radix-vue';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<{ class?: any } & PaginationPrevProps>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronLeft class="size-4" />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/index.ts
new file mode 100644
index 00000000000..ce93dc4ea12
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
+export { default as PaginationFirst } from './PaginationFirst.vue';
+export { default as PaginationLast } from './PaginationLast.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+export { default as PaginationPrev } from './PaginationPrev.vue';
+export {
+  PaginationList,
+  PaginationListItem,
+  PaginationRoot as Pagination,
+} from 'radix-vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputSeparator.vue
index e8c86f7231c..d6b867a7f79 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/pin-input/PinInputSeparator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DashIcon } from '@radix-icons/vue';
+import { Dot } from 'lucide-vue-next';
 import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue';
 
 const props = defineProps<PrimitiveProps>();
@@ -9,7 +9,7 @@ const forwardedProps = useForwardProps(props);
 <template>
   <Primitive v-bind="forwardedProps">
     <slot>
-      <DashIcon />
+      <Dot />
     </slot>
   </Primitive>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue
index 9dfaed34519..23468138c75 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/radio-group/RadioGroupItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { CheckIcon } from '@radix-icons/vue';
+import { Circle } from 'lucide-vue-next';
 import {
   RadioGroupIndicator,
   RadioGroupItem,
@@ -33,7 +33,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <RadioGroupIndicator class="flex items-center justify-center">
-      <CheckIcon class="fill-primary h-3.5 w-3.5" />
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
     </RadioGroupIndicator>
   </RadioGroupItem>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue
index 8047915cf02..ea96e10f1d5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { CheckIcon } from '@radix-icons/vue';
+import { Check } from 'lucide-vue-next';
 import {
   SelectItem,
   SelectItemIndicator,
@@ -35,7 +35,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   >
     <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <CheckIcon class="h-4 w-4" />
+        <Check class="h-4 w-4" />
       </SelectItemIndicator>
     </span>
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue
index ab43dc2fa71..9aa28b08271 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollDownButton.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ChevronDownIcon } from '@radix-icons/vue';
+import { ChevronDown } from 'lucide-vue-next';
 import {
   SelectScrollDownButton,
   type SelectScrollDownButtonProps,
@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <slot>
-      <ChevronDownIcon />
+      <ChevronDown class="h-4 w-4" />
     </slot>
   </SelectScrollDownButton>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue
index e03e66bd5dd..c1b23bb34fd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectScrollUpButton.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ChevronUpIcon } from '@radix-icons/vue';
+import { ChevronUp } from 'lucide-vue-next';
 import {
   SelectScrollUpButton,
   type SelectScrollUpButtonProps,
@@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     "
   >
     <slot>
-      <ChevronUpIcon />
+      <ChevronUp class="h-4 w-4" />
     </slot>
   </SelectScrollUpButton>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue
index a7fa13a7e22..9cb34f0f457 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/select/SelectTrigger.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { CaretSortIcon } from '@radix-icons/vue';
+import { ChevronDown } from 'lucide-vue-next';
 import {
   SelectIcon,
   SelectTrigger,
@@ -34,7 +34,7 @@ const forwardedProps = useForwardProps(delegatedProps);
   >
     <slot></slot>
     <SelectIcon as-child>
-      <CaretSortIcon class="h-4 w-4 opacity-50" />
+      <ChevronDown class="h-4 w-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue
index 3a110eccb2a..9112f95ebc0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toast/ToastClose.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Cross2Icon } from '@radix-icons/vue';
+import { X } from 'lucide-vue-next';
 import { ToastClose, type ToastCloseProps } from 'radix-vue';
 
 const props = defineProps<
@@ -29,6 +29,6 @@ const delegatedProps = computed(() => {
       )
     "
   >
-    <Cross2Icon class="h-4 w-4" />
+    <X class="size-4" />
   </ToastClose>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81d38cd0106..d5e83e0efbe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,9 +54,6 @@ catalogs:
     '@playwright/test':
       specifier: ^1.47.2
       version: 1.47.2
-    '@radix-icons/vue':
-      specifier: ^1.0.0
-      version: 1.0.0
     '@stylistic/stylelint-plugin':
       specifier: ^3.1.0
       version: 3.1.0
@@ -1373,9 +1370,6 @@ importers:
 
   packages/@core/ui-kit/shadcn-ui:
     dependencies:
-      '@radix-icons/vue':
-        specifier: 'catalog:'
-        version: 1.0.0(vue@3.5.8(typescript@5.6.2))
       '@vben-core/composables':
         specifier: workspace:*
         version: link:../../composables
@@ -4212,11 +4206,6 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
-  '@radix-icons/vue@1.0.0':
-    resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
-    peerDependencies:
-      vue: 3.5.8
-
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
     engines: {node: '>=14.0.0'}
@@ -13050,10 +13039,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
-  '@radix-icons/vue@1.0.0(vue@3.5.8(typescript@5.6.2))':
-    dependencies:
-      vue: 3.5.8(typescript@5.6.2)
-
   '@rollup/plugin-alias@5.1.1(rollup@3.29.5)':
     optionalDependencies:
       rollup: 3.29.5
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 8739fc4d1ab..511e0738ddb 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -30,7 +30,6 @@ catalog:
   '@manypkg/get-packages': ^2.2.2
   '@nolebase/vitepress-plugin-git-changelog': ^2.5.0
   '@playwright/test': ^1.47.2
-  '@radix-icons/vue': ^1.0.0
   '@stylistic/stylelint-plugin': ^3.1.0
   '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
   '@tailwindcss/typography': ^0.5.15