feat: 新增首页项目列表分页效果

src/views/project/items/components/ProjectItemsCard/index.vue

@@ -15,7 +15,7 @@
         <div class="list-content-img" @click="resizeHandle">
           <n-image
             object-fit="contain"
-            height="200"
+            height="180"
             preview-disabled
             :src="
               requireUrl('project/moke-20211219181327.png')
@@ -193,7 +193,7 @@ const resizeHandle = () => {
 </script>
 
 <style lang="scss" scoped>
-$contentHeight: 200px;
+$contentHeight: 180px;
 @include go('items-list-card') {
   position: relative;
   border-radius: $--border-radius-base;

src/views/project/items/components/ProjectItemsList/index.vue

@@ -12,9 +12,16 @@
           @resize="resizeHandle"
           @delete="deleteHandle($event, index)"
           @edit="editHandle"
-       ></project-items-card>
+        ></project-items-card>
       </n-grid-item>
     </n-grid>
+    <div class="list-pagination">
+      <n-pagination
+        :item-count="10"
+        :page-sizes="[10, 20, 30, 40]"
+        show-size-picker
+      />
+    </div>
   </div>
   <project-items-modal-card
     v-if="modalData"
@@ -22,7 +29,7 @@
     :cardData="modalData"
     @close="closeModal"
     @edit="editHandle"
- ></project-items-modal-card>
+  ></project-items-modal-card>
 </template>
 
 <script setup lang="ts">
@@ -34,21 +41,25 @@ import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 const { list, deleteHandle } = useDataListInit()
-const {
-  modalData,
-  modalShow,
-  closeModal,
-  resizeHandle,
-  editHandle
-} = useModalDataInit()
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
+  useModalDataInit()
 </script>
 
 <style lang="scss" scoped>
 $contentHeight: 250px;
 @include go('items-list') {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: calc(100vh - #{$--header-height} * 2 - 2px);
   .list-content {
     position: relative;
     height: $contentHeight;
   }
+  .list-pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
 }
 </style>