feat: 添加日期选择器和分页器组件，优化页面布局和用户交互

src/pages/primevue/index.page.vue

@@ -7,12 +7,16 @@ import { openConfirm, openDialog } from './fns';
 
 <template>
   <div class="primevue py-4 flex items-start flex-wrap gap-6">
-    <ProgressSpinner class="w-6! h-6! m-0!" />
     <FloatLabel>
       <InputText default-value="DEFAULT_VALUE" id="username" />
       <label for="username">Username</label>
     </FloatLabel>
 
+    <FloatLabel>
+      <DatePicker :manualInput="false" inputId="datepicker" showButtonBar dateFormat="dd/mm/yy" />
+      <label for="datepicker">DatePicker</label>
+    </FloatLabel>
+
     <FloatLabel>
       <Select
         :options="[
@@ -38,11 +42,6 @@ import { openConfirm, openDialog } from './fns';
       <label>FileUpload</label>
     </FloatLabel>
 
-    <FloatLabel>
-      <DatePicker :manualInput="false" inputId="datepicker" showButtonBar dateFormat="dd/mm/yy" />
-      <label for="datepicker">DatePicker</label>
-    </FloatLabel>
-
     <!-- <Button @click="openToast">提示服务</Button> -->
     <Card>
       <template #title>提示服务</template>
@@ -71,6 +70,19 @@ import { openConfirm, openDialog } from './fns';
         </div>
       </template>
     </Card>
+    <Paginator
+      :template="{
+        '640px': 'PrevPageLink CurrentPageReport NextPageLink',
+        '960px': 'FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink',
+        '1300px': 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink',
+        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink JumpToPageDropdown JumpToPageInput',
+      }"
+      :rows="10"
+      :totalRecords="120"
+    >
+    </Paginator>
+
+    <ProgressSpinner class="w-6! h-6! m-0!" />
 
     <Button @click="openDialog">对话框服务</Button>
     <Button @click="openConfirm">确认服务</Button>