feat: 弹窗转视频动图替换为视频

src/component/home/design/editDesignType/index.vue

@@ -31,12 +31,6 @@
 					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
 					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
 				</div>
-				<!-- <div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-					<span>{{$t('ProductImg.SelectionFunction')}}</span>
-				</div>
-				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction generalModel_state_item" style="margin-bottom: 1rem;">
-					<a-select size="large" style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
-				</div> -->
 				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && !speedData.value" class="productImg_content_item_title productImg_content_item_title_similarity">
 					<span>{{$t('ProductImg.Similarity')}}</span>
 				</div>
@@ -95,25 +89,29 @@
 						</div>
 					</div>
 				</div>
-				<!-- <div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && (speedData.value == 'advanced' || speedData.value == 'flux')">
-					<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
-				</div> -->
 				<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
 					<div class="head">
 						<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
 					</div>
 					<div class="imgBox" v-mousewheel>
-						<div class="item" v-for="item,index in poseList" @click="setSelectPose(item,index)">
-							<img :src="item.firstFrame" 
-								alt=""
-								@mouseenter.stop="gifPlay($event,item)"
-								@mouseleave.stop="gifPause($event,item)" 
-							>	
+						<div class="item" v-for="item,index in poseList" :key="item.id" @click="setSelectPose(item,index)">
+							<video :ref="el => setVideoRef(item.id, el)" :src="item.video" />
 							<div class="btnBox">
 								<div :class="{active:item.isChecked}">
 									<i class="fi fi-br-check"></i>
 								</div>
 							</div>
+							<div class="control-container" @click.stop>
+								<div class="icon-list">
+									<SvgIcon
+										class="play-icon"
+										@click.stop="handlePlayMotion(item)"
+										:name="isVideoPlaying(item.id)? 'CPause' : 'CPlay'"
+										size="20"
+										color="#ffffff"
+									/>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -128,12 +126,6 @@
 					<div class="generage_btn started_btn" v-show="productimgIsProductimg">
 						<i class="fi fi-br-loading" ></i>
 					</div>
-					<!-- <div class="generage_btn started_btn" v-show="productimgIsProductimg && !productimgRemProductimg">
-						<i class="fi fi-br-loading" ></i>
-					</div> -->
-					<!-- <div class="generage_btn started_btn" v-show="productimgRemProductimg" @click="removeProductimg">
-						{{$t('Generate.Close')}}
-					</div> -->
 				</div>
 			</div>
 		</div>
@@ -154,25 +146,8 @@
 					>	
 				</div>
 			</div>
-			<!-- <div class="img_operate_block" v-if="isLike">
-				<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
-				<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!scaleImageList[scaleImageIndex]?.like" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
-			</div> -->
 		</div>
 	</div>
-	<!-- <div class="scaleImage_nav">
-		<div class="nav_left">
-			<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
-		</div>
-		<div class="nav_list" v-mousewheel>
-			<div class="nav_centent">
-				<img  v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active:index == scaleImageIndex}" :src="item?.imgUrl || item?.url" :key="item.id">
-			</div>
-		</div>
-		<div class="nav_right">
-			<i class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
-		</div>
-	</div> -->
 	<div class="mark_loading" v-show="loadingShow">
 			<a-spin size="large" />
 		</div>
@@ -687,6 +662,50 @@ setup(props:any,{emit}) {
 	const gifPause = (e:any,item:any)=>{
 		e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
 	}
+	// 存储视频元素的引用
+	const videoRefs = ref<Record<number, HTMLVideoElement | null>>({})
+	// 存储视频播放状态
+	const videoPlayingStates = ref<Record<number, boolean>>({})
+
+	// 设置视频 ref
+	const setVideoRef = (id: number, el: HTMLVideoElement | null) => {
+		if (el) {
+			videoRefs.value[id] = el
+			// 初始化播放状态
+			videoPlayingStates.value[id] = !el.paused
+			// 监听播放事件
+			el.addEventListener('play', () => {
+				videoPlayingStates.value[id] = true
+			})
+			// 监听暂停事件
+			el.addEventListener('pause', () => {
+				videoPlayingStates.value[id] = false
+			})
+			// 监听结束事件
+			el.addEventListener('ended', () => {
+				videoPlayingStates.value[id] = false
+			})
+		}
+	}
+
+	// 检查视频是否正在播放
+	const isVideoPlaying = (id: number) => {
+		return videoPlayingStates.value[id] || false
+	}
+
+	// 播放视频
+	const handlePlayMotion = (item: any) => {
+		const video = videoRefs.value[item.id]
+		if (video) {
+			if (video.paused) {
+				video.play().catch(err => {
+					console.error('播放视频失败:', err)
+				})
+			} else {
+				video.pause()
+			}
+		}
+	}
 	const setSelectPose = (item:any,index:number)=>{
 		productimg.poseList.forEach((poseItem:any)=>{
 			poseItem.isChecked = false
@@ -772,6 +791,9 @@ setup(props:any,{emit}) {
 		gifPlay,
 		gifPause,
 		setSelectPose,
+		setVideoRef,
+		handlePlayMotion,
+		isVideoPlaying,
 		generateProceedList,
 		init,
 		cancelDsign,
@@ -1021,6 +1043,7 @@ overflow: visible !important;
 							flex-direction: column;
 							align-items: center;
 							justify-content: center;
+							z-index: 3;
 							> div{
 								width: 2rem;
 								height: 2rem;
@@ -1051,6 +1074,44 @@ overflow: visible !important;
 							width: 100%;
 							object-fit: contain;
 						}
+						> video{
+							width: 100%;
+							height: 100%;
+							object-fit: cover;
+							position: absolute;
+							top: 0;
+							left: 0;
+							z-index: 1;
+						}
+						.control-container {
+							width: 100%;
+							height: 3.3rem;
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							background: linear-gradient(
+								180deg,
+								rgba(8, 9, 13, 0) 0%,
+								rgba(8, 9, 13, 0.27) 80.37%
+							);
+							display: flex;
+							// align-items: flex-end;
+							// justify-content: center;
+							z-index: 2;
+							.icon-list {
+								// height: 50%;
+								// width: calc(100% - 1.6rem);
+								padding-left: 1rem;
+								display: flex;
+								box-sizing: border-box;
+								justify-content: flex-start;
+								align-items: center;
+								.play-icon {
+									width: 2rem;
+									height: 2rem;
+								}
+							}
+						}
 					}
 					> .upload_item{
 						border: none;

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

@@ -451,7 +451,6 @@ export default defineComponent({
       if (props.isDesignPage) {
         //标识design页面打开的tools
         data.fileList = designList
-        console.log('11111111111111', data.fileList)
       } else {
         data.currentList = store.state.UploadFilesModule.modularData.toProduct
         data.currentList = data.currentList ? data.currentList : []