From 76d72182f97167d54cc468ff3914a5a4eaa3d1cb Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Mon, 10 Feb 2025 01:08:28 +0800
Subject: [PATCH] :arrow_up: upgrade dependencies and optimize the image
 display list

---
 components.d.ts                               |   3 +
 package.json                                  |  16 +-
 src/api/storage/index.ts                      | 109 ++++++++-
 src/assets/images/default-cover.png           | Bin 0 -> 10699 bytes
 src/components/MyUI/CheckCard/CheckCard.vue   |   9 +-
 src/components/MyUI/Pagination/Pagination.vue |  10 +-
 src/layout/default/Header/Menu.vue            |   6 +-
 src/store/modules/uploadStore.ts              |  16 +-
 src/views/Album/Phoalbum/PhoalbumList.vue     | 212 ++++++++++++++----
 src/views/Photograph/AllPhoto/AllPhoto.vue    | 132 ++++-------
 .../Photograph/ImageUpload/ImageUpload.vue    |  18 +-
 .../Photograph/RecentUpload/RecentUpload.vue  |   6 +-
 12 files changed, 379 insertions(+), 158 deletions(-)
 create mode 100644 src/assets/images/default-cover.png

diff --git a/components.d.ts b/components.d.ts
index eaefd98..94929a0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,6 +26,7 @@ declare module 'vue' {
     AImage: typeof import('ant-design-vue/es')['Image']
     AImagePreviewGroup: typeof import('ant-design-vue/es')['ImagePreviewGroup']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     Alert: typeof import('./src/components/MyUI/Alert/Alert.vue')['default']
     AList: typeof import('ant-design-vue/es')['List']
@@ -187,5 +188,7 @@ declare module 'vue' {
     Video: typeof import('./src/components/MyUI/Video/Video.vue')['default']
     VueCompareImage: typeof import('./src/components/VueCompareImage/VueCompareImage.vue')['default']
     WarningOutlined: typeof import('@ant-design/icons-vue')['WarningOutlined']
+    Waterfall: typeof import('./src/views/Photograph/WaterfallList/Waterfall.vue')['default']
+    WaterfallList: typeof import('./src/views/Photograph/WaterfallList/WaterfallList.vue')['default']
   }
 }
diff --git a/package.json b/package.json
index 745dba8..c0a4bf1 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@types/json-stringify-safe": "^5.0.3",
     "@types/node": "^22.13.1",
     "@types/nprogress": "^0.2.3",
-    "@vladmandic/face-api": "^1.7.14",
+    "@vladmandic/face-api": "^1.7.15",
     "@vuepic/vue-datepicker": "^11.0.1",
     "@vueuse/core": "^12.5.0",
     "@vueuse/integrations": "^12.5.0",
@@ -44,7 +44,7 @@
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
     "echarts": "^5.6.0",
-    "eslint": "9.19.0",
+    "eslint": "9.20.0",
     "exifr": "^7.1.3",
     "go-captcha-vue": "^2.0.5",
     "gsap": "^3.12.7",
@@ -66,28 +66,28 @@
     "vite-plugin-node-polyfills": "^0.23.0",
     "vue": "^3.5.13",
     "vue-dompurify-html": "^5.2.0",
-    "vue-i18n": "^11.1.0",
+    "vue-i18n": "^11.1.1",
     "vue-router": "^4.5.0",
-    "vue-waterfall-plugin-next": "^2.6.5",
+    "vue3-justified-layout": "^0.0.6",
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.19.0",
+    "@eslint/js": "^9.20.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
-    "sass": "^1.83.4",
+    "sass": "^1.84.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.23.0",
     "unplugin-vue-components": "^28.0.0",
-    "vite": "^6.0.11",
+    "vite": "^6.1.0",
     "vite-plugin-bundle-obfuscator": "1.4.1",
     "vite-plugin-chunk-split": "^0.5.0",
     "vue-tsc": "2.2.0"
   },
   "overrides": {
     "vite-plugin-chunk-split": {
-      "vite": "^6.0.11"
+      "vite": "^6.1.0"
     }
   }
 }
diff --git a/src/api/storage/index.ts b/src/api/storage/index.ts
index 1c90e54..c93c4a3 100644
--- a/src/api/storage/index.ts
+++ b/src/api/storage/index.ts
@@ -1,11 +1,16 @@
 import {service} from "@/utils/alova/service.ts";
 
+/**
+ * 上传文件
+ * @param formData
+ */
 export const uploadFile = (formData) => {
     return service.Post('/api/auth/storage/uploads', formData, {
         meta: {
             ignoreToken: false,
             signature: false,
-        }
+        },
+        name: "upload-file",
     });
 };
 
@@ -24,7 +29,8 @@ export const getFaceSamplesList = (type: number) => {
         meta: {
             ignoreToken: false,
             signature: false,
-        }
+        },
+        hitSource: ["modify-face-sample-name", "modify-face-sample-type"],
     });
 };
 /**
@@ -40,7 +46,8 @@ export const modifyFaceSampleName = (id: number, face_name: string) => {
         meta: {
             ignoreToken: false,
             signature: false,
-        }
+        },
+        name: "modify-face-sample-name",
     });
 };
 /**
@@ -56,7 +63,101 @@ export const modifyFaceTypeBatch = (ids: number[], face_type: number) => {
         meta: {
             ignoreToken: false,
             signature: false,
-        }
+        },
+        name: "modify-face-sample-type"
+    });
+};
+/**
+ * 创建相册
+ * @param name
+ */
+export const createAlbumApi = (name: string) => {
+    return service.Post('/api/auth/storage/album/create', {
+        name: name,
+    }, {
+        meta: {
+            ignoreToken: false,
+            signature: false,
+        },
+        name: "create-album",
+    });
+};
+/**
+ * 获取相册列表
+ * @param type
+ * @param sort
+ */
+export const albumListApi = (type: string, sort: boolean) => {
+    return service.Post('/api/auth/storage/album/list', {
+        type: type,
+        sort: sort,
+    }, {
+        cacheFor: {
+            expire: 60 * 60 * 24 * 7,
+            mode: "restore",
+        },
+        meta: {
+            ignoreToken: false,
+            signature: false,
+        },
+        hitSource: ["create-album", "rename-album", "delete-album"],
     });
 };
 
+/**
+ *  重命名相册
+ * @param id
+ * @param name
+ */
+export const renameAlbumApi = (id: number, name: string) => {
+    return service.Post('/api/auth/storage/album/rename', {
+        id: id,
+        name: name,
+    }, {
+        meta: {
+            ignoreToken: false,
+            signature: false,
+        },
+        name: "rename-album",
+    });
+};
+/**
+ * 删除相册
+ * @param id
+ */
+export const deleteAlbumApi = (id: number) => {
+    return service.Post('/api/auth/storage/album/delete', {
+        id: id,
+    }, {
+        meta: {
+            ignoreToken: false,
+            signature: false,
+        },
+        name: "delete-album",
+    });
+};
+/**
+ * 获取所有照片列表
+ * @param type
+ * @param sort
+ * @param provider
+ * @param bucket
+ */
+export const queryAllImagesApi = (type: string, sort: boolean, provider: string, bucket: string) => {
+    return service.Post('/api/auth/storage/image/all/list', {
+        type: type,
+        sort: sort,
+        provider: provider,
+        bucket: bucket,
+    }, {
+        cacheFor: {
+            expire: 60 * 60 * 24 * 7,
+            mode: "restore",
+        },
+        meta: {
+            ignoreToken: false,
+            signature: false,
+        },
+        hitSource: ["upload-file"],
+    });
+};
diff --git a/src/assets/images/default-cover.png b/src/assets/images/default-cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..1aef613fa2aa260cbd923e5d66def47fd9b2e6c1
GIT binary patch
literal 10699
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

literal 0
HcmV?d00001

diff --git a/src/components/MyUI/CheckCard/CheckCard.vue b/src/components/MyUI/CheckCard/CheckCard.vue
index 0b276b6..1f85f09 100644
--- a/src/components/MyUI/CheckCard/CheckCard.vue
+++ b/src/components/MyUI/CheckCard/CheckCard.vue
@@ -89,7 +89,7 @@ function toggleSelection() {
 <style scoped lang="scss">
 .check-card {
   position: relative;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -100,11 +100,16 @@ function toggleSelection() {
 .check-card.selected {
   border: 1px solid rgba(125, 167, 255, 0.68);
   box-shadow: 0 0 2px rgba(77, 167, 255, 0.89);
-  padding: 10px;
 }
 
 .card-content {
+  display: inline-block;
   flex: 1;
+  transition: transform 0.3s ease-in-out;
+}
+
+.check-card.selected .card-content {
+  transform: scale(0.95);
 }
 
 .card-selected-icon {
diff --git a/src/components/MyUI/Pagination/Pagination.vue b/src/components/MyUI/Pagination/Pagination.vue
index 2998b72..5e8abd1 100644
--- a/src/components/MyUI/Pagination/Pagination.vue
+++ b/src/components/MyUI/Pagination/Pagination.vue
@@ -368,10 +368,10 @@ function onPageSizeChange(pageSize: number) {
     }
 
     &:hover {
-      border-color: @themeColor;
+      border-color: #00aced;
 
       .arrow-svg {
-        color: @themeColor;
+        color: #00aced;
       }
     }
   }
@@ -383,8 +383,8 @@ function onPageSizeChange(pageSize: number) {
   .item-active {
     // 悬浮/选中样式
     font-weight: 600;
-    color: @themeColor;
-    border-color: @themeColor;
+    color: #00aced;
+    border-color: #00aced;
   }
 
   .item-disabled {
@@ -443,7 +443,7 @@ function onPageSizeChange(pageSize: number) {
       right: 0;
       margin: auto;
       display: inline-block;
-      fill: @themeColor;
+      fill: #000;
       width: 12px;
       height: 12px;
       opacity: 0;
diff --git a/src/layout/default/Header/Menu.vue b/src/layout/default/Header/Menu.vue
index 5247c88..15196a2 100644
--- a/src/layout/default/Header/Menu.vue
+++ b/src/layout/default/Header/Menu.vue
@@ -11,7 +11,8 @@
       </div>
       <!--  上传按钮 -->
       <div class="button-wrapper">
-        <AButton type="text" shape="circle" size="large" class="header-menu-item-btn">
+        <AButton type="text" shape="circle" size="large" class="header-menu-item-btn"
+                 @click="uploadStore.openUploadDrawerFn">
           <template #icon>
             <AAvatar size="default" shape="circle" :src="upload"/>
           </template>
@@ -116,6 +117,7 @@
         </template>
       </APopover>
     </AFlex>
+    <ImageUpload/>
   </AFlex>
 </template>
 <script setup lang="ts">
@@ -130,7 +132,9 @@ import personalCenter from "@/assets/svgs/personal-center.svg";
 import accountSetting from "@/assets/svgs/setting.svg";
 import logout from "@/assets/svgs/logout.svg";
 import useStore from "@/store";
+import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
 
+const uploadStore = useStore().upload;
 const user = useStore().user;
 </script>
 
diff --git a/src/store/modules/uploadStore.ts b/src/store/modules/uploadStore.ts
index 0ff4e32..4f019ff 100644
--- a/src/store/modules/uploadStore.ts
+++ b/src/store/modules/uploadStore.ts
@@ -3,10 +3,12 @@ import localforage from 'localforage';
 interface UploadPredictResult {
     isAnime: boolean;
     objectArray: string[] | unknown[];
-    landscape: 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none';
+    landscape: 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | null;
     isScreenshot: boolean;
     topCategory: string | undefined;
-    exif: object | null;
+    exif: object | "";
+    width: number | null;
+    height: number | null;
 }
 
 
@@ -18,10 +20,12 @@ export const useUploadStore = defineStore(
         const predictResult = reactive<UploadPredictResult>({
             isAnime: false,
             objectArray: [],
-            landscape: 'none',
+            landscape: null,
             isScreenshot: false,
             topCategory: '',
-            exif: {}
+            exif: "",
+            width: null,
+            height: null,
         });
 
         /**
@@ -37,10 +41,10 @@ export const useUploadStore = defineStore(
         function clearPredictResult() {
             predictResult.isAnime = false;
             predictResult.objectArray = [];
-            predictResult.landscape = 'none';
+            predictResult.landscape = null;
             predictResult.isScreenshot = false;
             predictResult.topCategory = '';
-            predictResult.exif = {};
+            predictResult.exif = "";
         }
 
 
diff --git a/src/views/Album/Phoalbum/PhoalbumList.vue b/src/views/Album/Phoalbum/PhoalbumList.vue
index dda2a9c..025b7ee 100644
--- a/src/views/Album/Phoalbum/PhoalbumList.vue
+++ b/src/views/Album/Phoalbum/PhoalbumList.vue
@@ -1,12 +1,28 @@
 <template>
   <div class="phoalbum">
     <div class="phoalbum-header">
-      <AButton type="primary" shape="round" size="middle">
-        <template #icon>
-          <PlusSquareOutlined/>
+      <APopover placement="bottom" trigger="click">
+        <AButton type="primary" shape="round" size="middle">
+          <template #icon>
+            <PlusSquareOutlined/>
+          </template>
+          创建相册
+        </AButton>
+        <template #content>
+          <span style="color: #999; font-size: 15px;">创建相册</span>
+          <AInputGroup compact style="display: flex;flex-direction: row;margin-top: 15px">
+            <AInput placeholder="请填写相册名称" class="phoalbum-create-input"
+                    v-model:value="albumNameValue" size="large">
+              <template #suffix>
+                <AButton type="text" @click.prevent size="middle" style="color: #0e87cc" @click="createAlbumSubmit">
+                  确认
+                </AButton>
+              </template>
+            </AInput>
+          </AInputGroup>
         </template>
-        创建相册
-      </AButton>
+
+      </APopover>
       <ADropdown>
         <AButton type="default" shape="round" size="middle">
           <template #icon>
@@ -15,9 +31,9 @@
           排序
         </AButton>
         <template #overlay>
-          <AMenu>
-            <AMenuItem key="1">按时间排序</AMenuItem>
-            <AMenuItem key="2">按名称排序</AMenuItem>
+          <AMenu selectable :selectedKeys="[selecetedKey]" @select="handleSelect">
+            <AMenuItem :key="true">按时间排序</AMenuItem>
+            <AMenuItem :key="false">按名称排序</AMenuItem>
           </AMenu>
         </template>
       </ADropdown>
@@ -33,42 +49,64 @@
     </div>
     <div class="phoalbum-content">
       <ATabs size="small" :tabBarGutter="50" type="line" tabPosition="top" :tabBarStyle="{position:'unset'}"
-             style="width: 100%;">
+             style="width: 100%;" @change="handleTabChange">
         <template #rightExtra>
-          <span style="color: #999; font-size: 12px;">已全部加载，共 0 个相册</span>
+          <span
+              style="color: #999; font-size: 12px;">已全部加载，共 {{ albumList ? albumList.length : 0 }} 个相册</span>
         </template>
-        <ATabPane key="1" tab="全部相册">
-          <div class="phoalbum-item-container">
-            <div class="phoalbum-item" @mouseover="isHovered = true" @mouseleave="isHovered = false">
-              <PhotoStack :src="'/test/1.png'" default-src=""/>
-              <div class="phoalbum-item-info">
-                <span class="phoalbum-item-name">我的相册</span>
-                <span class="phoalbum-item-date">2022-01-01</span>
-              </div>
-              <div class="phoalbum-item-operation" :class="{ 'fade-in': isHovered, 'fade-out': !isHovered }">
-                <ADropdown trigger="click">
-                  <AButton type="text" shape="circle" size="small">
-                    <template #icon>
-                      <AAvatar shape="circle" size="small" :src="more"/>
+        <ATabPane key="0" tab="全部相册">
+          <ASpin tip="Loading..." :spinning="loading" size="large">
+            <div class="phoalbum-item-container">
+              <div class="phoalbum-item"
+                   v-for="(album, index) in albumList"
+                   :key="album.id"
+                   @mouseover="isHovered = index"
+                   @mouseleave="isHovered = null">
+                <PhotoStack :src="album.cover_image" :default-src="default_cover"/>
+                <div class="phoalbum-item-info">
+                  <span class="phoalbum-item-name">{{ album.name }}</span>
+                  <span class="phoalbum-item-date">{{ album.created_at }}</span>
+                </div>
+                <div class="phoalbum-item-operation"
+                     :class="{ 'fade-in': isHovered === index, 'fade-out': isHovered !== index }">
+                  <ADropdown trigger="click">
+                    <AButton type="text" shape="circle" size="small">
+                      <template #icon>
+                        <AAvatar shape="circle" size="small" :src="more"/>
+                      </template>
+                    </AButton>
+                    <template #overlay>
+                      <AMenu>
+                        <APopover placement="left" trigger="click">
+                          <AMenuItem key="1">重命名相册</AMenuItem>
+                          <template #content>
+                            <AInput :placeholder="album.name" class="phoalbum-create-input"
+                                    v-model:value="albumRenameValue">
+                              <template #suffix>
+                                <AButton type="text" @click.prevent size="small" style="color: #0e87cc"
+                                         @click="renameAlbum(album.id, albumRenameValue)">
+                                  确认
+                                </AButton>
+                              </template>
+                            </AInput>
+                          </template>
+                        </APopover>
+                        <AMenuItem key="2">分享相册</AMenuItem>
+                        <AMenuItem key="3" @click.prevent="deleteAlbum(album.id)">删除相册</AMenuItem>
+                        <AMenuItem key="4">下载相册</AMenuItem>
+                      </AMenu>
                     </template>
-                  </AButton>
-                  <template #overlay>
-                    <AMenu>
-                      <AMenuItem key="1">重命名相册</AMenuItem>
-                      <AMenuItem key="2">分享相册</AMenuItem>
-                      <AMenuItem key="3">删除相册</AMenuItem>
-                      <AMenuItem key="4">下载相册</AMenuItem>
-                    </AMenu>
-                  </template>
-                </ADropdown>
+                  </ADropdown>
+                </div>
               </div>
             </div>
-          </div>
+          </ASpin>
         </ATabPane>
-        <ATabPane key="2" tab="我的相册">
+        <ATabPane key="1" tab="我的相册">
 
         </ATabPane>
-        <ATabPane key="3" tab="收藏相册">
+        <ATabPane key="2" tab="收藏相册">
+
         </ATabPane>
       </ATabs>
     </div>
@@ -76,11 +114,103 @@
 </template>
 <script setup lang="ts">
 import more from "@/assets/svgs/more.svg";
+import {albumListApi, createAlbumApi, deleteAlbumApi, renameAlbumApi} from "@/api/storage";
+import {message} from "ant-design-vue";
+import default_cover from "@/assets/images/default-cover.png";
 
+const isHovered = ref<number | null>(null);
 
-const isHovered = ref<boolean>(false);
+const albumNameValue = ref<string>("未命名相册");
+const albumRenameValue = ref<string>("");
 
+const selecetedKey = ref<boolean>(true);
 
+const albumList = ref<any[]>([]);
+
+const loading = ref<boolean>(false);
+
+/**
+ * 创建相册
+ */
+async function createAlbumSubmit() {
+  if (albumNameValue.value.trim() === "") {
+    message.error("相册名称不能为空");
+    return;
+  }
+  const res: any = await createAlbumApi(albumNameValue.value);
+  if (res && res.code === 200) {
+    albumNameValue.value = "未命名相册";
+    await getAlbumList("0", selecetedKey.value);
+  } else {
+    message.error("创建相册失败");
+  }
+}
+
+/**
+ * 选择排序方式
+ * @param key
+ */
+async function handleSelect({key}) {
+  selecetedKey.value = key;
+  await getAlbumList("0", key);
+}
+
+/**
+ * 切换相册列表
+ * @param activeKey
+ */
+async function handleTabChange(activeKey: string) {
+  await getAlbumList(activeKey, selecetedKey.value);
+}
+
+/**
+ * 获取相册列表
+ * @param type
+ * @param sort
+ */
+async function getAlbumList(type: string = "0", sort: boolean = true) {
+  albumList.value = [];
+  loading.value = true;
+  const res: any = await albumListApi(type, sort);
+  if (res && res.code === 200) {
+    albumList.value = res.data.albums;
+  }
+  loading.value = false;
+}
+
+/**
+ * 重命名相册
+ * @param id
+ * @param name
+ */
+async function renameAlbum(id: number, name: string) {
+  if (name.trim() === "") {
+    message.warning("相册名称不能为空");
+    return;
+  }
+  const res: any = await renameAlbumApi(id, name);
+  if (res && res.code === 200) {
+    albumRenameValue.value = "";
+    await getAlbumList("0", selecetedKey.value);
+  }
+}
+
+/**
+ * 删除相册
+ * @param id
+ */
+async function deleteAlbum(id: number) {
+  const res: any = await deleteAlbumApi(id);
+  if (res && res.code === 200) {
+    await getAlbumList("0", selecetedKey.value);
+  } else {
+    message.error("删除相册失败");
+  }
+}
+
+onMounted(() => {
+  getAlbumList("0", selecetedKey.value);
+});
 
 </script>
 <style scoped lang="scss">
@@ -120,9 +250,10 @@ const isHovered = ref<boolean>(false);
     .phoalbum-item-container {
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
       align-items: flex-start;
       justify-content: flex-start;
-      gap: 20px;
+      gap: 40px;
       width: 100%;
       height: 100%;
       overflow-y: auto;
@@ -181,4 +312,9 @@ const isHovered = ref<boolean>(false);
 
   }
 }
+
+.phoalbum-create-popover-text {
+  //font-size: 13px;
+  color: rgba(102, 102, 102, 0.87);
+}
 </style>
diff --git a/src/views/Photograph/AllPhoto/AllPhoto.vue b/src/views/Photograph/AllPhoto/AllPhoto.vue
index 3ce99b3..7af7260 100644
--- a/src/views/Photograph/AllPhoto/AllPhoto.vue
+++ b/src/views/Photograph/AllPhoto/AllPhoto.vue
@@ -63,54 +63,44 @@
         <template #rightExtra>
           <ASwitch size="small" v-model:checked="switchValue"/>
         </template>
-        <ATabPane key="1" tab="全部">
-          <div style="width:100%;height:100%;" v-if="images.length !== 0">
-            <span style="margin-left: 10px;font-size: 13px">2024年12月27日 星期日</span>
-            <AImagePreviewGroup>
-              <Waterfall :list="images"
-                         :backgroundColor="`transparent`"
-                         :width="400"
-                         :gutter="15"
-                         align="left"
-                         :lazyload="true"
-                         :animationDelay="300"
-                         :animationDuration="1000"
-                         :animationCancel="false"
-                         :hasAroundGutter="true"
-                         rowKey="id"
-                         :imgSelector="'src'"
-                         :loadProps="loadProps"
-                         :breakpoints="breakpoints">
-                <template #default="{ item, url, index }">
-                  <CheckCard :key="index"
-                             class="photo-item"
-                             margin="0"
-                             border-radius="0"
-                             v-model="selected"
-                             :showHoverCircle="true"
-                             :iconSize="20"
-                             :showSelectedEffect="true"
-                             :value="url">
-                    <AImage :src="url"
-                            :alt="item.title"
-                            :key="index"
-                            :previewMask="false"
-                            loading="lazy"/>
-                  </CheckCard>
-                </template>
-              </Waterfall>
-            </AImagePreviewGroup>
+        <ATabPane key="image" tab="全部">
+          <div style="width:100%;height:100%;">
+            <div v-for="(itemList, index) in images" :key="index">
+              <span style="margin-left: 10px;font-size: 14px">{{ itemList.date }}</span>
+              <AImagePreviewGroup>
+                <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
+                  <template #default="{ item }">
+                    <CheckCard :key="index"
+                               class="photo-item"
+                               margin="0"
+                               border-radius="0"
+                               v-model="selected"
+                               :showHoverCircle="true"
+                               :iconSize="20"
+                               :showSelectedEffect="true"
+                               :value="item.id">
+                      <AImage :src="item.url"
+                              :alt="item.file_name"
+                              :key="index"
+                              style="height: 200px"
+                              :previewMask="false"
+                              loading="lazy"/>
+                    </CheckCard>
+                  </template>
+                </Vue3JustifiedLayout>
+              </AImagePreviewGroup>
+            </div>
           </div>
         </ATabPane>
-        <ATabPane key="2" tab="视频">
+        <ATabPane key="video" tab="视频">
           <div style="width:100%;height:100%;">
 
           </div>
         </ATabPane>
-        <ATabPane key="3" tab="动图">
+        <ATabPane key="gif" tab="动图">
 
         </ATabPane>
-        <ATabPane key="4" tab="截图">
+        <ATabPane key="screenshot" tab="截图">
 
         </ATabPane>
       </ATabs>
@@ -120,64 +110,36 @@
 </template>
 
 <script setup lang="ts">
-import {Waterfall} from 'vue-waterfall-plugin-next';
-import 'vue-waterfall-plugin-next/dist/style.css';
-import loading from '@/assets/gif/loading.gif';
-import error from '@/assets/svgs/no-image.svg';
+
+import Vue3JustifiedLayout from "vue3-justified-layout";
+import 'vue3-justified-layout/dist/style.css';
 import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
 import useStore from "@/store";
+import {queryAllImagesApi} from "@/api/storage";
+
 
 const selected = ref<(string | number)[]>([]);
 const switchValue = ref<boolean>(false);
 const upload = useStore().upload;
-const breakpoints = reactive({
-  breakpoints: {
-    1200: {
-      // 当屏幕宽度小于等于1200
-      rowPerView: 4,
-    },
-    800: {
-      // 当屏幕宽度小于等于800
-      rowPerView: 3,
-    },
-    500: {
-      // 当屏幕宽度小于等于500
-      rowPerView: 2,
-    },
-  },
-});
-const loadProps = reactive({
-  loading,
-  error,
-  ratioCalculator: (_width: number, _height: number) => {
-    // 我设置了最小宽高比
-    const minRatio = 3 / 4;
-    const maxRatio = 4 / 3;
-    return Math.random() > 0.5 ? minRatio : maxRatio;
-  },
+
+const options = reactive({
+  targetRowHeight: 200 // 高度
 });
 
 const images = ref<any[]>([]);
 
-function loadImages() {
-  for (let i = 1; i < 10; i++) {
-    images.value.push({
-      title: `image-${i}`,
-      link: '',
-      src: `https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/${i}.jpg`,
-      tag: '全部',
-      date: '2022-01-01',
-    });
-    images.value.push({
-      title: `image-${i}`,
-      link: '',
-      src: `/test/${i}.png`,
-    });
+
+async function getAllImages() {
+  const res: any = await queryAllImagesApi("image", false, "ali", "schisandra-album");
+  if (res && res.code === 200) {
+    console.log(res);
+    images.value = res.data.records;
   }
 }
 
-onBeforeMount(() => { // 组件已完成响应式状态设置，但未创建DOM节点
-  loadImages();
+
+onMounted(() => {
+  getAllImages();
 });
 </script>
 <style scoped lang="scss">
diff --git a/src/views/Photograph/ImageUpload/ImageUpload.vue b/src/views/Photograph/ImageUpload/ImageUpload.vue
index 7502404..9047e74 100644
--- a/src/views/Photograph/ImageUpload/ImageUpload.vue
+++ b/src/views/Photograph/ImageUpload/ImageUpload.vue
@@ -104,10 +104,12 @@ async function beforeUpload(file: File, fileList: File[]) {
   const compressedFile = await imageCompression(file, options);
   // 创建图片对象
   image.src = URL.createObjectURL(compressedFile);
-
-  image.addEventListener('webglcontextlost', (_event) => {
-    window.location.reload();
-  });
+  // 获取图片宽高
+  image.onload = () => {
+    const {width, height} = image;
+    upload.predictResult.width = width;
+    upload.predictResult.height = height;
+  };
 
   // 更新进度条函数，逐步增加
   const smoothUpdateProgress = async (targetPercent, duration) => {
@@ -145,7 +147,7 @@ async function beforeUpload(file: File, fileList: File[]) {
     // 提取 EXIF 数据
     const exifData = await extractAllExifData(file);
     if (exifData) {
-      upload.predictResult.exif = exifData;
+      upload.predictResult.exif = exifData ? exifData : "";
     }
 
     // 判断是否为截图
@@ -183,7 +185,7 @@ async function beforeUpload(file: File, fileList: File[]) {
       const classSet = new Set(cocoResults.map(result => result.class));
       upload.predictResult.objectArray = Array.from(classSet);
     }
-    upload.predictResult.landscape = landscape as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none';
+    upload.predictResult.landscape = landscape as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | null;
 
     predicting.value = false;
     return true;
@@ -193,8 +195,6 @@ async function beforeUpload(file: File, fileList: File[]) {
     predicting.value = false;
     progressPercent.value = 0; // 重置进度条
     return false;
-  } finally {
-    image.removeEventListener('webglcontextlost', () => void 0);
   }
 }
 
@@ -213,6 +213,8 @@ async function customUploadRequest(file: any) {
   const formData = new FormData();
   formData.append("file", file.file);
   formData.append("data", JSON.stringify({
+    provider: 'ali',
+    bucket: 'schisandra',
     fileType: file.file.type,
     ...upload.predictResult,
   }));
diff --git a/src/views/Photograph/RecentUpload/RecentUpload.vue b/src/views/Photograph/RecentUpload/RecentUpload.vue
index fb1a4c0..90c153b 100644
--- a/src/views/Photograph/RecentUpload/RecentUpload.vue
+++ b/src/views/Photograph/RecentUpload/RecentUpload.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="recent-upload">
     <div class="photo-header">
-      <AButton type="primary" shape="round" size="middle">
+      <AButton type="primary" shape="round" size="middle" @click="upload.openUploadDrawerFn()">
         <template #icon>
           <PlusOutlined/>
         </template>
@@ -51,6 +51,7 @@
         </AImagePreviewGroup>
       </div>
     </div>
+    <ImageUpload/>
   </div>
 </template>
 <script setup lang="ts">
@@ -58,7 +59,10 @@ import {Waterfall} from 'vue-waterfall-plugin-next';
 import 'vue-waterfall-plugin-next/dist/style.css';
 import loading from '@/assets/gif/loading.gif';
 import error from '@/assets/svgs/no-image.svg';
+import useStore from "@/store";
+import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
 
+const upload = useStore().upload;
 const selected = ref<(string | number)[]>([]);
 const breakpoints = reactive({
   breakpoints: {