feat: 首帧和首尾帧列表不共用

src/component/home/tools/poseTransfer/index.vue

@@ -33,7 +33,7 @@
               <div
                 class="item"
                 :class="{ active: item.id == selectImg.id }"
-                v-for="(item, index) in fileList"
+                v-for="(item, index) in showFirstFrameList"
                 @click="selectImgItem(item)"
               >
                 <div
@@ -65,7 +65,9 @@
               </div>
               <div
                 class="upload_item item"
-                v-show="!isDesignPage && !(videoType === 3 && fileList.length > 0)"
+                v-show="
+                  !isDesignPage && !(videoType === 3 && showFirstFrameList.length > 0)
+                "
               >
                 <div class="upload_file_item">
                   <a-upload
@@ -74,8 +76,7 @@
                     list-type="picture-card"
                     :capture="null"
                     :data="{
-                      ...upload,
-                      type: 'first'
+                      ...upload
                     }"
                     :headers="{ Authorization: token }"
                     :before-upload="beforeUpload"
@@ -121,7 +122,7 @@
                 </div>
                 <div
                   class="item lastframe-list"
-                  :class="{ active: item.id == selectImg.id }"
+                  :class="{ active: item.id == lastSelectImg.id }"
                   v-for="(item, index) in lastFrameList"
                   @click="selectImgItem(item, true)"
                 >
@@ -344,7 +345,7 @@ export default defineComponent({
       token: getCookie('token'),
       upload: {
         projectId: computed(() => store.state.Workspace.probjects.id),
-        type: 'first' // first首帧 last尾帧
+        type: null // first首帧 last尾帧
       },
       waitList: [],
       likeList: computed(() => {
@@ -431,7 +432,7 @@ export default defineComponent({
       }
 
       // 处理首帧选择
-      data.fileList.forEach((listItem: any) => (listItem.isChecked = false))
+      showFirstFrameList.value.forEach((listItem: any) => (listItem.isChecked = false))
       data.currentList.forEach((listItem: any) => (listItem.isChecked = false))
       item.isChecked = true
       data.selectImg = item
@@ -705,26 +706,28 @@ export default defineComponent({
         if (res.errCode == 0) {
           file.imgUrl = res.data.url
           file.id = res.data.id
-          file.frameType = 'first'
           data.currentList.forEach((listItem: any) => (listItem.isChecked = false))
-          // data.fileList.forEach((listItem:any)=>{
-          // 	if(listItem.id == file.id){
-          // 		listItem.isChecked = true
-          // 	}else{
-          // 		listItem.isChecked = false
-          // 	}
-          // })
           file.type = 'ProductElement'
-          // if(props.productimgMenu.value == 'Relight'){
-          // 	file.type = "ToProductImage"
-          // }
-          data.selectImg = res.data
-          // data.fileList.filter((v: any) => v.status === "done");
+          if (videoType.value === 3) {
+            file.frameType = 'first'
+          }
           let storeData = {
             str: 'add',
             list: [file]
           }
           store.commit('setUploadElement', storeData)
+          // 上传成功后，设置选中状态
+          file.isChecked = true
+          // 取消 showFirstFrameList 中其他项的选中状态
+          showFirstFrameList.value.forEach((listItem: any) => {
+            if (listItem.id !== file.id) {
+              listItem.isChecked = false
+            }
+          })
+          data.selectImg = res.data
+          if (res.data.url || res.data.imgUrl) {
+            data.selectImg.minioUrl = getMinioUrl(res.data.url || res.data.imgUrl)
+          }
         } else {
           bor = false
         }
@@ -873,8 +876,16 @@ export default defineComponent({
         { params: value }
       ).then(rv => {
         if (isLastFrame) {
+          // 如果删除的是当前选中的尾帧，清空选中状态
+          if (data.lastSelectImg?.id === item.id) {
+            data.lastSelectImg = {}
+          }
           store.commit('setPoseTransferLastFrameList')
-        }else{
+        } else {
+          // 如果删除的是当前选中的首帧，清空选中状态
+          if (data.selectImg?.id === item.id) {
+            data.selectImg = {}
+          }
           let storeData = {
             str: 'delete',
             index
@@ -883,18 +894,38 @@ export default defineComponent({
         }
       })
     }
+
+    const videoType = ref(2)
+    const showMotion = computed(() => videoType.value === 1)
+    const options = ref([
+      { vlaue: 2, label: t('poseTransfer.FirstFrame') },
+      { value: 3, label: t('poseTransfer.FirstAndLastFrames') },
+      { value: 1, label: t('poseTransfer.FirstFrameAndSkeleton') }
+    ])
+
+    const firstFrameList = ref([])
+    const lastFrameList = ref([])
+    const showFirstFrameList = computed(() => {
+      return videoType.value === 3 ? firstFrameList.value : data.fileList
+    })
     watch(
       () => store.state.HomeStoreModule.uploadElement.length,
       (newVal, oldVal) => {
         if (props.isDesignPage) return
         data.fileList = store.state.HomeStoreModule.uploadElement.filter(
+          item => !item.frameType
+        )
+
+        firstFrameList.value = store.state.HomeStoreModule.uploadElement.filter(
           item => item.frameType === 'first'
         )
+
         lastFrameList.value = store.state.HomeStoreModule.uploadElement.filter(
           item => item.frameType === 'last'
         )
 
-        data.fileList.forEach((listItem: any) => {
+        // 更新 showFirstFrameList 中项的选中状态
+        showFirstFrameList.value.forEach((listItem: any) => {
           if (listItem.id == data.selectImg.id) {
             listItem.isChecked = true
           } else {
@@ -903,8 +934,7 @@ export default defineComponent({
         })
       }
     )
-    // 全局维护尾帧上传列表，保持与主上传一致
-    const lastFrameList = ref([])
+
     watch(
       () => store.state.HomeStoreModule.lastFrameList,
       val => {
@@ -917,6 +947,31 @@ export default defineComponent({
       { immediate: true }
     )
 
+    // 首帧图片的type 切换为首尾帧时type=first,其他情况type为null
+    watch(
+      () => videoType.value,
+      newVal => {
+        if (newVal === 3) {
+          data.upload.type = 'first'
+        } else {
+          delete data.upload.type
+        }
+        // 当 videoType 改变时，检查 selectImg 是否在当前 showFirstFrameList 中
+        // 如果不在，清空选中状态或选择列表中的第一项
+        const currentList = showFirstFrameList.value
+        if (data.selectImg?.id) {
+          const exists = currentList.some((item: any) => item.id === data.selectImg.id)
+          if (!exists) {
+            // 如果当前选中的项不在新列表中，清空选中状态
+            data.selectImg = {}
+            // 取消所有项的选中状态
+            currentList.forEach((item: any) => (item.isChecked = false))
+          }
+        }
+      },
+      { immediate: true }
+    )
+
     watch(
       () => data.noLikeList.length,
       (newVal, oldVal) => {
@@ -933,14 +988,6 @@ export default defineComponent({
       { immediate: true }
     )
 
-    const videoType = ref(2)
-    const showMotion = computed(() => videoType.value === 1)
-    const options = ref([
-      { vlaue: 2, label: t('poseTransfer.FirstFrame') },
-      { value: 3, label: t('poseTransfer.FirstAndLastFrames') },
-      { value: 1, label: t('poseTransfer.FirstFrameAndSkeleton') }
-    ])
-
     onBeforeUnmount(() => {
       clearInterval(data.generateTime)
       clearInterval(data.remGenerateTime)
@@ -953,6 +1000,8 @@ export default defineComponent({
       ...toRefs(dataDom),
       ...toRefs(data),
       lastFrameList,
+      firstFrameList,
+      showFirstFrameList,
       openSetData,
       selectImgItem,
       setSize,