⬆️ upgrade dependencies and optimize the image display list

2025-02-10 01:08:28 +08:00
parent b4ef5a4b51
commit 76d72182f9
12 changed files with 379 additions and 158 deletions
--- 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">
--- 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,
  }));
--- 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: {