feat: 增加 FaPagination 组件

apps/example/src/router/modules/component.example.ts

@@ -190,6 +190,14 @@ const routes: RouteRecordRaw = {
         title: '内容块',
       },
     },
+    {
+      path: 'pagination',
+      name: 'componentExamplePagination',
+      component: () => import('@/views/component_example/pagination/index.vue'),
+      meta: {
+        title: '分页',
+      },
+    },
     {
       path: 'password_strength',
       name: 'componentExamplePasswordStrength',

apps/example/src/views/component_example/pagination/_demo1.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const page = ref(1)
+const size = ref(10)
+const total = ref(100)
+</script>
+
+<template>
+  <FaPagination :page="page" :size="size" :total="total" />
+</template>

apps/example/src/views/component_example/pagination/_demo2.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const page = ref(1)
+const size = ref(10)
+const total = ref(100)
+</script>
+
+<template>
+  <FaPagination :page="page" :size="size" :total="total" layout="jumper, pager, ->, total, sizes" />
+  <div class="my-4 border-t" />
+  <FaPagination :page="page" :size="size" :total="total" layout="pager" />
+</template>

apps/example/src/views/component_example/pagination/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Demo1 from './_demo1.vue'
+import Demo2 from './_demo2.vue'
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="分页" description="FaPagination" />
+    <FaPageMain main-class="p-0">
+      <div class="p-4">
+        <Demo1 />
+      </div>
+    </FaPageMain>
+    <FaPageMain title="布局" main-class="p-0">
+      <div class="p-4">
+        <Demo2 />
+      </div>
+    </FaPageMain>
+  </div>
+</template>