✨ add apis

src/views/Album/PeopleAlbum/PeopleAlbumDetail.vue

@@ -11,16 +11,16 @@
       </div>
       <div class="people-album-detail-toolbar">
         <AAvatar shape="circle" size="default"></AAvatar>
-        <span style="font-size: 14px;color: #333333">张皓扬</span>
+        <span style="font-size: 14px;color: #333333">{{ route.query.name }}</span>
       </div>
     </div>
-    <ImageToolbar :selected="selected"/>
+    <ImageToolbar :selected="imageStore.selected" :imageList="images"/>
     <div class="people-album-detail-info">
-      <span style="font-size: 14px;color: #999999">共12张照片</span>
+      <span style="font-size: 14px;color: #999999">共{{ imageStore.countTotalImages(images) }}张照片</span>
     </div>
     <div class="people-album-detail-list">
-      <div style="width:100%;height:100%;">
-        <div v-for="(itemList, index) in albumList" :key="index">
+      <div style="width:100%;height:100%;" v-if="images.length !== 0">
+        <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">
@@ -29,7 +29,7 @@
                            class="photo-item"
                            margin="0"
                            border-radius="0"
-                           v-model="selected"
+                           v-model="imageStore.selected"
                            :showHoverCircle="true"
                            :iconSize="20"
                            :showSelectedEffect="true"
@@ -49,6 +49,15 @@
           </AImagePreviewGroup>
         </div>
       </div>
+      <div v-else>
+        <AEmpty :image="empty">
+          <template #description>
+                <span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
+                  暂无照片，快去上传吧
+                </span>
+          </template>
+        </AEmpty>
+      </div>
     </div>
   </div>
 </template>
@@ -58,10 +67,11 @@ import 'vue3-justified-layout/dist/style.css';
 import {getFaceSamplesDetailList} from "@/api/storage";
 import ImageToolbar from "@/views/Photograph/ImageToolbar/ImageToolbar.vue";
 import useStore from "@/store";
+import empty from "@/assets/svgs/empty.svg";
 
 
-const selected = ref<(string | number)[]>([]);
-const albumList = ref<any[]>([]);
+const imageStore = useStore().image;
+const images = ref<any[]>([]);
 
 const route = useRoute();
 const router = useRouter();
@@ -74,7 +84,7 @@ const options = reactive({
 async function getAlbumList(id: number) {
   const res: any = await getFaceSamplesDetailList(id, upload.storageSelected?.[0], upload.storageSelected?.[1]);
   if (res && res.code === 200) {
-    albumList.value = res.data.records;
+    images.value = res.data.records;
   }
 }
 

src/views/Album/PeopleAlbum/PeopleAlbumList.vue

@@ -3,11 +3,11 @@
     <div class="people-album-header">
       <ADropdown trigger="click">
         <AButton type="text" size="large" class="people-album-button">
-          {{ selecetedKey === '0' ? '人 物' : '已隐藏' }}
+          {{ selectedKey === '0' ? '人 物' : '已隐藏' }}
           <DownOutlined class="people-album-icon"/>
         </AButton>
         <template #overlay>
-          <AMenu selectable :selectedKeys="[selecetedKey]" @select="handleSelect">
+          <AMenu selectable :selectedKeys="[selectedKey]" @select="handleSelect">
             <AMenuItem key="0">人 物</AMenuItem>
             <AMenuItem key="1">已隐藏</AMenuItem>
           </AMenu>
@@ -33,7 +33,7 @@
         <div class="people-album-toolbar-right">
 
           <AButton type="text" shape="default" size="middle" class="people-album-toolbar-btn"
-                   :disabled="selected.length !== 2" v-if="selecetedKey === '0'">
+                   :disabled="selected.length !== 2" v-if="selectedKey === '0'">
             <template #icon>
               <BlockOutlined class="people-album-toolbar-icon"/>
             </template>
@@ -44,7 +44,7 @@
             <template #icon>
               <EyeInvisibleOutlined class="people-album-toolbar-icon"/>
             </template>
-            {{ selecetedKey === '0' ? '隐藏人物' : '取消隐藏' }}
+            {{ selectedKey === '0' ? '隐藏人物' : '取消隐藏' }}
           </AButton>
         </div>
       </div>
@@ -55,7 +55,7 @@
           <CheckCard
               v-for="(item, index) in faceList"
               :key="index"
-              @click="handleClick(item.id)"
+              @click="handleClick(item.id, item.face_name)"
               class="photo-item"
               margin="0"
               border-radius="0"
@@ -125,7 +125,7 @@ import {getFaceSamplesList, modifyFaceSampleName, modifyFaceTypeBatch} from "@/a
 
 const faceList = ref<any[]>([]);
 const addNameInputValue = ref<string>('');
-const selecetedKey = ref<string>('0');
+const selectedKey = ref<string>('0');
 const loading = ref<boolean>(false);
 const selected = ref<any[]>([]);
 
@@ -180,7 +180,7 @@ async function modifyFaceName(id: number, index: number) {
  * @param key
  */
 function handleSelect({key}) {
-  selecetedKey.value = key;
+  selectedKey.value = key;
   getFaceList(parseInt(key));
 }
 
@@ -203,7 +203,7 @@ function cancelSelectPeople() {
  */
 async function hiddenFace() {
   if (selected.value.length === 0) return;
-  const res: any = await modifyFaceTypeBatch(selected.value, selecetedKey.value === '0' ? 1 : 0);
+  const res: any = await modifyFaceTypeBatch(selected.value, selectedKey.value === '0' ? 1 : 0);
   if (res && res.code === 200) {
     await getFaceList();
     selected.value = [];
@@ -216,9 +216,10 @@ const router = useRouter();
 /**
  *     点击人物跳转到详情页
  * @param id
+ * @param name
  */
-function handleClick(id: number) {
-  router.push({path: route.path + `/${id}`});
+function handleClick(id: number, name: string | null) {
+  router.push({path: route.path + `/${id}`, query: {name: name}});
 }
 
 onMounted(() => {