🚧 developing

src/views/Photograph/RecentUpload/RecentUpload.vue

@@ -7,12 +7,27 @@
         </template>
         上传照片
       </AButton>
-      <AButton type="default" shape="round" size="middle">
-        <template #icon>
-          <PlusSquareOutlined/>
+      <APopover placement="right" trigger="click">
+        <AButton type="default" shape="round" size="middle">
+          <template #icon>
+            <PlusSquareOutlined/>
+          </template>
+          创建相册
+        </AButton>
+
+        <template #content>
+          <span style="color: #999; font-size: 15px;">创建相册</span>
+          <AInput placeholder="请填写相册名称" class="phoalbum-create-input"
+                  style="margin-top: 15px"
+                  v-model:value="albumNameValue" size="large">
+            <template #suffix>
+              <AButton type="text" @click.prevent size="middle" style="color: #0e87cc" @click="createAlbumSubmit">
+                确认
+              </AButton>
+            </template>
+          </AInput>
         </template>
-        创建相册
-      </AButton>
+      </APopover>
     </div>
     <image-toolbar :selected="imageStore.selected" :image-list="images"/>
     <div class="photo-list">
@@ -31,20 +46,29 @@
                            :iconSize="20"
                            :showSelectedEffect="true"
                            :value="item.id">
-                  <AImage :src="item.url"
+                  <AImage :src="item.thumbnail"
                           :alt="item.file_name"
                           :key="index"
                           style="height: 200px"
-                          :previewMask="false"
-                          loading="lazy"/>
+                          :preview="{
+                            src: item.url,
+                          }"
+                          loading="lazy">
+                    <template #previewMask>
+
+                    </template>
+                  </AImage>
                 </CheckCard>
               </template>
             </Vue3JustifiedLayout>
           </AImagePreviewGroup>
         </div>
       </div>
-      <div v-else>
-        <AEmpty :image="empty">
+      <div v-else class="empty-content">
+        <AEmpty :image="empty" :image-style="{
+                   height: '100%',
+                   width: '100%',
+                 }">
           <template #description>
                 <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
                   暂无照片，快去上传吧
@@ -62,9 +86,11 @@ import Vue3JustifiedLayout from "vue3-justified-layout";
 import 'vue3-justified-layout/dist/style.css';
 import useStore from "@/store";
 import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
-import {queryRecentImagesApi} from "@/api/storage";
+import {createAlbumApi, queryRecentImagesApi} from "@/api/storage";
 import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
 import empty from "@/assets/svgs/empty.svg";
+import {message} from "ant-design-vue";
+import router from "@/router/router.ts";
 
 const imageStore = useStore().image;
 const upload = useStore().upload;
@@ -74,12 +100,33 @@ const options = reactive({
 });
 
 const getRecentImages = async () => {
-  const res: any = await queryRecentImagesApi();
+  const res: any = await queryRecentImagesApi(upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
     images.value = res.data.records;
   }
 };
 
+const albumNameValue = ref<string>("未命名相册");
+
+/**
+ * 创建相册
+ */
+async function createAlbumSubmit() {
+  if (albumNameValue.value.trim() === "") {
+    message.error("相册名称不能为空");
+    return;
+  }
+  const res: any = await createAlbumApi(albumNameValue.value);
+  if (res && res.code === 200) {
+    router.push({
+      path: "/main/album/albums/" + `${res.data.id}`,
+      query: {name: albumNameValue.value}
+    });
+  } else {
+    message.error("创建相册失败");
+  }
+}
+
 onMounted(() => {
   getRecentImages();
 });