✨ optimized image list interface

src/views/Album/PeopleAlbum/PeopleAlbumDetail.vue

@@ -2,7 +2,7 @@
   <div class="people-album-detail">
     <div class="people-album-detail-header">
       <div class="people-album-detail-nav">
-        <AButton type="text" size="large" class="people-album-detail-nav-button">
+        <AButton type="text" size="large" class="people-album-detail-nav-button" @click="goBack">
           <template #icon>
             <LeftOutlined style="font-size: 13px;font-weight: bolder"/>
           </template>
@@ -14,16 +14,79 @@
         <span style="font-size: 14px;color: #333333">张皓扬</span>
       </div>
     </div>
+    <ImageToolbar :selected="selected"/>
     <div class="people-album-detail-info">
       <span style="font-size: 14px;color: #999999">共12张照片</span>
     </div>
     <div class="people-album-detail-list">
-
+      <div style="width:100%;height:100%;">
+        <div v-for="(itemList, index) in albumList" :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.thumbnail"
+                          :alt="item.file_name"
+                          :key="index"
+                          :height="200"
+                          :previewMask="false"
+                          :preview="{
+                                src: item.url,
+                               }"
+                          loading="lazy"/>
+                </CheckCard>
+              </template>
+            </Vue3JustifiedLayout>
+          </AImagePreviewGroup>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import Vue3JustifiedLayout from "vue3-justified-layout";
+import 'vue3-justified-layout/dist/style.css';
+import {getFaceSamplesDetailList} from "@/api/storage";
+import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
 
+
+const selected = ref<(string | number)[]>([]);
+const albumList = ref<any[]>([]);
+
+const route = useRoute();
+const router = useRouter();
+const options = reactive({
+  targetRowHeight: 200 // 高度
+});
+
+async function getAlbumList(id: number) {
+  const res: any = await getFaceSamplesDetailList(id, "ali", "schisandra-album");
+  if (res && res.code === 200) {
+    albumList.value = res.data.records;
+  }
+}
+
+onMounted(() => {
+  const idParam = route.params.id;
+  const albumId = Array.isArray(idParam) ? idParam[0] : idParam;
+  getAlbumList(parseInt(albumId, 10));
+});
+
+/**
+ * 返回上一页
+ */
+function goBack(): void {
+  router.go(-1);
+}
 </script>
 <style scoped lang="scss">
 .people-album-detail {
@@ -62,6 +125,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        padding: 8px;
       }
     }
 
@@ -89,8 +153,6 @@
   .people-album-detail-list {
     width: 99%;
     height: 100%;
-    margin-left: 10px;
-    background: #e2e2e2;
   }
 }
 

src/views/Album/PeopleAlbum/PeopleAlbumList.vue

@@ -73,7 +73,7 @@
                 <AAvatar :size="86" shape="circle" :src="item.face_image"/>
               </div>
               <div class="people-album-item-name" v-show="!item.face_name">
-                <AButton @click="showAddNameInput(index)" class="people-album-add-name"
+                <AButton @click.stop="showAddNameInput(index)" class="people-album-add-name"
                          v-show="item.showButton && !item.showInput"
                          type="link"
                          size="small">
@@ -82,11 +82,12 @@
                 <AInput ref="addNameInput" v-model:value="addNameInputValue" v-show="item.showInput"
                         @blur="hideAddNameInput(index)" size="small"
                         :maxlength="10"
+                        @click.stop
                         :placeholder="item.face_name"
                         class="people-album-add-input">
                   <template #suffix>
                     <AButton type="link" style="font-size: 12px;" size="small" @mousedown.prevent
-                             @click="modifyFaceName(item.id,index)">完成
+                             @click.stop="modifyFaceName(item.id,index)">完成
                     </AButton>
                   </template>
                 </AInput>