✨ detail list development

2025-02-13 18:19:39 +08:00
parent 76d72182f9
commit d5fd626242
17 changed files with 1048 additions and 317 deletions
--- a/src/views/Photograph/AllPhoto/AllPhoto.vue
+++ b/src/views/Photograph/AllPhoto/AllPhoto.vue
@@ -14,49 +14,7 @@
        创建相册
      </AButton>
    </div>
-    <transition name="slide-fade">
-      <div v-show="selected.length !== 0" class="photo-toolbar-header">
-        <div class="photo-toolbar-left">
-          <AButton type="text" shape="circle" size="large" class="photo-toolbar-btn">
-            <template #icon>
-              <CloseOutlined class="photo-toolbar-icon"/>
-            </template>
-          </AButton>
-          <span style="font-size: 16px;font-weight: bold">
-          已选择 {{ selected.length }} 张照片
-        </span>
-          <AButton type="text" shape="default" class="photo-toolbar-btn" size="middle">
-            全选
-          </AButton>
-        </div>
-        <div class="photo-toolbar-right">
-          <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
-            <template #icon>
-              <PlusSquareOutlined class="photo-toolbar-icon"/>
-            </template>
-            添加到
-          </AButton>
-          <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
-            <template #icon>
-              <DownloadOutlined class="photo-toolbar-icon"/>
-            </template>
-            下载原图
-          </AButton>
-          <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
-            <template #icon>
-              <ShareAltOutlined class="photo-toolbar-icon"/>
-            </template>
-            分享
-          </AButton>
-          <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
-            <template #icon>
-              <DeleteOutlined class="photo-toolbar-icon"/>
-            </template>
-            删除
-          </AButton>
-        </div>
-      </div>
-    </transition>
+    <image-toolbar :selected="selected" />
    <div class="photo-list">
      <ATabs size="small" :tabBarGutter="50" type="line" tabPosition="top" :tabBarStyle="{position:'unset'}"
             style="width: 99%;">
@@ -66,7 +24,7 @@
        <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>
+              <span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
              <AImagePreviewGroup>
                <Vue3JustifiedLayout v-model:list="itemList.list" :options="options">
                  <template #default="{ item }">
@@ -116,6 +74,7 @@ import 'vue3-justified-layout/dist/style.css';
 import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
 import useStore from "@/store";
 import {queryAllImagesApi} from "@/api/storage";
+import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";


 const selected = ref<(string | number)[]>([]);
@@ -132,7 +91,6 @@ const images = ref<any[]>([]);
 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;
  }
 }
@@ -164,60 +122,6 @@ onMounted(() => {

  }

-  .photo-toolbar-header {
-    position: fixed;
-    width: calc(100% - 220px);
-    height: 70px;
-    top: 70px;
-    z-index: 3;
-
-    display: flex;
-    box-sizing: border-box;
-    justify-content: space-between;
-    align-items: center;
-    background-image: linear-gradient(45deg, #5789ff, #5c7bff 100%);
-    color: #fff;
-    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .06);
-    padding: 0 20px;
-
-
-    .photo-toolbar-left {
-      width: 50%;
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      gap: 20px;
-
-    }
-
-    .photo-toolbar-right {
-      height: 100%;
-      width: 50%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 30px;
-    }
-
-    .photo-toolbar-icon {
-      font-size: 20px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .photo-toolbar-btn {
-      font-size: 16px;
-      font-weight: bold;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
  .photo-list {
    display: flex;
    flex-direction: column;
@@ -228,25 +132,6 @@ onMounted(() => {
  }
 }

-.slide-fade-enter-active, .slide-fade-leave-active {
-  transition: all 0.5s ease;
-}
-
-.slide-fade-enter-from, .slide-fade-leave-to { /* .slide-fade-leave-active 在离开之前 */
-  transform: translateY(-20px);
-  opacity: 0;
-}
-
-.slide-fade-enter-from {
-  transform: translateY(-30px);
-  opacity: 0;
-}
-
-.slide-fade-enter-to {
-  transform: translateY(0);
-  opacity: 1;
-}
-
 .photo-item:hover {
  transition: all 0.3s ease-in-out, transform 0.3s ease-in-out;
  //transform: scale(0.99);
--- a/src/views/Photograph/ImageToolbar/ImageToolbar.vue
+++ b/src/views/Photograph/ImageToolbar/ImageToolbar.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  selected: {
+    type: Array,
+    default: () => []
+  }
+});
+</script>
+
+<template>
+  <transition name="slide-fade">
+    <div v-show="props.selected.length > 0" class="photo-toolbar-header">
+      <div class="photo-toolbar-left">
+        <AButton type="text" shape="circle" size="large" class="photo-toolbar-btn">
+          <template #icon>
+            <CloseOutlined class="photo-toolbar-icon"/>
+          </template>
+        </AButton>
+        <span style="font-size: 16px;font-weight: bold">
+          已选择 {{ props.selected.length }} 张照片
+        </span>
+        <AButton type="text" shape="default" class="photo-toolbar-btn" size="middle">
+          全选
+        </AButton>
+      </div>
+      <div class="photo-toolbar-right">
+        <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
+          <template #icon>
+            <PlusSquareOutlined class="photo-toolbar-icon"/>
+          </template>
+          添加到
+        </AButton>
+        <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
+          <template #icon>
+            <DownloadOutlined class="photo-toolbar-icon"/>
+          </template>
+          下载原图
+        </AButton>
+        <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
+          <template #icon>
+            <ShareAltOutlined class="photo-toolbar-icon"/>
+          </template>
+          分享
+        </AButton>
+        <AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
+          <template #icon>
+            <DeleteOutlined class="photo-toolbar-icon"/>
+          </template>
+          删除
+        </AButton>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped lang="scss">
+.photo-toolbar-header {
+  position: fixed;
+  width: calc(100% - 220px);
+  height: 70px;
+  top: 70px;
+  z-index: 3;
+
+  display: flex;
+  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  background-image: linear-gradient(45deg, #5789ff, #5c7bff 100%);
+  color: #fff;
+  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .06);
+  padding: 0 20px;
+
+
+  .photo-toolbar-left {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+
+  }
+
+  .photo-toolbar-right {
+    height: 100%;
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 30px;
+  }
+
+  .photo-toolbar-icon {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+  }
+
+  .photo-toolbar-btn {
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: all 0.5s ease;
+}
+
+.slide-fade-enter-from, .slide-fade-leave-to { /* .slide-fade-leave-active 在离开之前 */
+  transform: translateY(-20px);
+  opacity: 0;
+}
+
+.slide-fade-enter-from {
+  transform: translateY(-30px);
+  opacity: 0;
+}
+
+.slide-fade-enter-to {
+  transform: translateY(0);
+  opacity: 1;
+}
+</style>
--- a/src/views/Photograph/ImageUpload/ImageUpload.vue
+++ b/src/views/Photograph/ImageUpload/ImageUpload.vue
@@ -145,9 +145,10 @@ async function beforeUpload(file: File, fileList: File[]) {
    }

    // 提取 EXIF 数据
-    const exifData = await extractAllExifData(file);
-    if (exifData) {
-      upload.predictResult.exif = exifData ? exifData : "";
+    const gpsData = await extractGPSExifData(file);
+    if (gpsData) {
+      upload.predictResult.longitude = gpsData.longitude;
+      upload.predictResult.latitude = gpsData.latitude;
    }

    // 判断是否为截图
@@ -177,13 +178,13 @@ async function beforeUpload(file: File, fileList: File[]) {
      // 如果只有一个结果，直接取第一个
      if (cocoResults.length === 1) {
        upload.predictResult.topCategory = getCategoryByLabel(cocoResults[0].class);
+        upload.predictResult.tagName = cocoResults[0].class;
      } else {
        // 多个结果时，按 score 排序，取置信度最高的结果
        const sortedResults = cocoResults.sort((a, b) => b.score - a.score);
        upload.predictResult.topCategory = getCategoryByLabel(sortedResults[0].class);
+        upload.predictResult.tagName = sortedResults[0].class;
      }
-      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' | null;

@@ -268,7 +269,7 @@ function removeFile(file: any) {
 * @param {File} file - 图片文件
 * @returns {Promise<Object|null>} - 返回所有 EXIF 数据或 null（如果格式不支持或提取失败）
 */
-async function extractAllExifData(file) {
+async function extractGPSExifData(file) {
  const supportedFormats = ['image/jpeg', 'image/tiff', 'image/iiq', 'image/heif', 'image/heic', 'image/avif', 'image/png'];

  // 判断文件格式是否支持
@@ -276,11 +277,11 @@ async function extractAllExifData(file) {
    return null;
  }

-  try {
-    // 提取所有 EXIF 数据
-    return await exifr.parse(file, {ifd0: false, exif: true} as any);
-  } catch (error) {
-    console.error("提取 EXIF 数据失败:", error);
+  // 提取GPS EXIF 数据
+  let {latitude, longitude} = await exifr.gps(file);
+  if (latitude && longitude) {
+    return {latitude, longitude};
+  } else {
    return null;
  }
 }
--- a/src/views/Photograph/RecentUpload/RecentUpload.vue
+++ b/src/views/Photograph/RecentUpload/RecentUpload.vue
@@ -14,99 +14,65 @@
        创建相册
      </AButton>
    </div>
+    <image-toolbar :selected="selected" />
    <div class="photo-list">
      <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"
-                         margin="0"
-                         border-radius="0"
-                         v-model="selected"
-                         :showHoverCircle="true"
-                         :iconSize="20"
-                         :value="url">
-                <AImage :src="url"
-                        :alt="item.title"
-                        :key="index"
-                        :previewMask="false"
-                        loading="lazy"/>
-              </CheckCard>
-            </template>
-          </Waterfall>
-        </AImagePreviewGroup>
+        <div v-for="(itemList, index) in images" :key="index">
+          <span style="margin-left: 10px;font-size: 13px">{{ 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>
    </div>
    <ImageUpload/>
  </div>
 </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 useStore from "@/store";
 import ImageUpload from "@/views/Photograph/ImageUpload/ImageUpload.vue";
+import {queryRecentImagesApi} from "@/api/storage";
+import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";

-const upload = useStore().upload;
 const selected = ref<(string | number)[]>([]);
-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 upload = useStore().upload;
 const images = ref<any[]>([]);
+const options = reactive({
+  targetRowHeight: 200 // 高度
+});

-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',
-    });
+const getRecentImages = async () => {
+  const res: any = await queryRecentImagesApi();
+  console.log(res);
+  if (res && res.code === 200) {
+    images.value = res.data.records;
  }
-}
+};

-onBeforeMount(() => { // 组件已完成响应式状态设置，但未创建DOM节点
-  loadImages();
+onMounted(() => {
+  getRecentImages();
 });

 </script>