feat: 支持上传列表分页

ATQQ · Jan 21, 2024 · 81f73eb · 81f73eb
1 parent 6521619
commit 81f73eb
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/packages/client/components.d.ts b/packages/client/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElUpload: typeof import('element-plus/es')['ElUpload']

diff --git a/packages/client/src/components/ImageList.vue b/packages/client/src/components/ImageList.vue
@@ -5,7 +5,8 @@ import { useImageStore } from '@/store'
 import { computed } from 'vue';
 import { ElMessageBox } from 'element-plus'
 import { IImage } from '@/store/modules/imageStore'
-
+import { ref } from 'vue'
+import { useUploadConfig } from '@/composables';
 const imageStore = useImageStore()
 const copyAddress = (url: string) => {
   copyRes(url)
@@ -29,12 +30,20 @@ const checkInfo = (image: IImage) => {
       </div>`
   })
 }
+const uploadConfig = useUploadConfig()
+const currentPage = ref(1)
+
+const showImage =computed(()=>{
+  const pageSize = uploadConfig.value.pageSize
+  const current = currentPage.value
+  return successImages.value.slice((current - 1) * pageSize, current * pageSize)
+})
 </script>
 <template>
   <!-- 链接列表 -->
   <p class="title">历史上传记录 ↓</p>
   <ul class="el-upload-list el-upload-list--text">
-    <li class="el-upload-list__item" v-for="(image, idx) in successImages" :key="idx">
+    <li class="el-upload-list__item" v-for="(image, idx) in showImage" :key="idx">
       <div class="el-upload-list__item-info">
         <div class="el-upload-list__item-name list-item-link-wrapper">
           <span>
@@ -54,6 +63,10 @@ const checkInfo = (image: IImage) => {
       </div>
     </li>
   </ul>
+  <div class="pagination">
+    <el-pagination small background v-model:current-page="currentPage" v-model:page-size="uploadConfig.pageSize"
+      :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next" :total="successImages.length" />
+  </div>
 </template>
 <style lang="scss" scoped>
 .title {
@@ -73,19 +86,50 @@ ul.el-upload-list {
   a {
     color: inherit;
     text-decoration: none;
-    max-width: 200px;
   }
 
   span {
     display: flex;
     align-items: center;
   }
 }
+
 .ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@media screen and (max-width: 500px) {
+  .list-item-link-wrapper {
+    a {
+      max-width: 200px;
+    }
+  }
+}
+
+@media screen and (max-width: 390px) {
+  .list-item-link-wrapper {
+    a {
+      max-width: 160px;
+    }
+  }
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+
+  .el-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    :deep(.el-pager){
+      margin: 10px;
+    }
+  }
+}
 </style>
 <style lang="scss">
 .preview-info {

diff --git a/packages/client/src/composables/index.ts b/packages/client/src/composables/index.ts
@@ -24,6 +24,6 @@ export function useIsMobile() {
 }
 
 export function useUploadConfig() {
-  const cacheConfig = useLocalStorage('uploadConfig', { autoCopy: true, copyType: 'markdown' })
+  const cacheConfig = useLocalStorage('uploadConfig', { autoCopy: true, copyType: 'markdown', pageSize: 20 })
   return cacheConfig
 }