feat: 视频保存

src/lang/cn.ts

@@ -1744,7 +1744,7 @@ export default {
 		cover: "封面",
 		productImageDesc: '从产品图中选取',
 		cropDesc: '从主产品图或线稿图中裁剪',
-		productImageMainTitle: '产品图 ',
+		productImageMainTitle: '产品图/视频',
 		productImageSubTitle: ' (来自设计集)',
 		apparelSketchTitle: '服装线稿图 ',
 		apparelSketchSubTitle: ' (来自设计集)',
@@ -1855,6 +1855,7 @@ export default {
 		SelectCollection: '选择商品',
 		SelectSketch: '选择线稿图',
 		EditListingDetails: '编辑商品详情',
+		VideoWarning: '首次选中的图片素材会作为产品主图,视频不可作为产品主图'
 	},
 	ApplySeller: {
 		applySellerTitle: '申请成为卖家',

src/lang/en.ts

@@ -1795,7 +1795,7 @@ export default {
 		cover:'Cover',
 		productImageDesc:'Choose from product image',
 		cropDesc:'Crop from main product image or sketch',
-		productImageMainTitle:'Product Image ',
+		productImageMainTitle:'Product Media ',
 		productImageSubTitle:'(from design collection)',
 		apparelSketchTitle:'Apparel Sketch ',
 		apparelSketchSubTitle:'(from design collection)',
@@ -1909,6 +1909,7 @@ export default {
 		SelectCollection: 'Select Collection',
 		SelectSketch: 'Select Sketch',
 		EditListingDetails: 'Edit Listing Details',
+		VideoWarning:'The first selected item is the main product image. Videos cannot be used.'
 	},
 	ApplySeller: {
 		applySellerTitle: 'Apply to Become a Seller',

src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue

@@ -124,8 +124,11 @@
 	const currentOrigin = ref("sketch")
 	const coverOrigin = ref([])
 	const handleChangeOrigin = (type) => {
+		const targetOrigin = coverOrigin.value.find((el) => el.type === type)
+		if (!targetOrigin) return
+
 		currentOrigin.value = type
-		data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
+		data.url = targetOrigin.url
 	}
 
 	const show = ref(false)
@@ -136,7 +139,7 @@
 
 		coverOrigin.value = []
 		data.url = null
-		currentOrigin.value = 'sketch'
+		currentOrigin.value = "sketch"
 
 		data.url = url
 		data.callback = callback
@@ -148,9 +151,11 @@
 			if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
 			data.isProduct = options.isProduct
 		}
-		if (origin?.length && !data.url) {
+		if (origin?.length) {
 			coverOrigin.value = origin
-			data.url = origin[0].url
+			const defaultOrigin = origin.find((el) => el.type === options?.coverFrom) || origin[0]
+			currentOrigin.value = defaultOrigin.type
+			data.url = defaultOrigin.url
 		}
 		show.value = true
 	}
@@ -160,7 +165,7 @@
 	const imageClipRef = ref(null)
 	const onSubmit = () => {
 		imageClipRef.value.getCropBlob().then((blob) => {
-			if (data.callback) data.callback(blobToFile(blob, "image.png"))
+			if (data.callback) data.callback(blobToFile(blob, "image.png"), currentOrigin.value)
 			onCancel()
 		})
 	}

src/views/SellerDashboard/MyListings/EditDetail/api.ts

@@ -1,20 +1,14 @@
 import { Https } from "@/tool/https"
+import type { ListingImageCategory, SketchDetailResponse } from "./types"
 
 // 编辑时根据ID获取信息
 export const fetchListingDetailById = (id) => {
 	return Https.axiosGet("/seller/listing/detail", { params: { id } })
 }
 
-interface SketchIDs {
-	designItemIds: Array
-}
-interface DetailReturns {
-	clothes: string[]
-	designItemId: number
-	toProductImageUrls: string[]
-}
+type SketchIDs = Array<number | string>
 // 获取designItemId对应的产品图
-export const fetchSketchDetail = (data: SketchIDs): Array<DetailReturns> => {
+export const fetchSketchDetail = (data: SketchIDs): Promise<SketchDetailResponse[]> => {
 	let params = "?"
 	data.forEach((id, index) => {
 		if (index === data.length - 1) {
@@ -27,23 +21,26 @@ export const fetchSketchDetail = (data: SketchIDs): Array<DetailReturns> => {
 }
 
 interface ImageObj {
-	id: number // 图片id,有值会更新,没有会自动新增
-	category: "cover" | "main_product" | "product" | "sketch" | "apparel" // 图片类型
+	id?: number // 图片id,有值会更新,没有会自动新增
+	category: ListingImageCategory // 图片类型
+	imageUrl?: string | null
+	isSelected?: number
+	sortOrder?: number
 }
 interface DetailData {
 	id: number | string // 商品Id
 	title: string // 商品名
 	description: string // 商品描述
-	price: number // 价格
+	price: number | string // 价格
 	stock?: number // 库存
 	viewCount?: number // 浏览量
 	status: 0 | 1 | 2 // 0草稿 1发布 2删除
 	images: ImageObj[]
 	designFor: "male" | "female"
-	productCategory: "outwear" | "trousers" | "blouse" | "dress" | "skirt" | "accessories"
+	productCategory: string[] | null
 }
 // 保存/更新表单
-export const fetchUpdateListing = (data: DetailData) => {
+export const fetchUpdateListing = (data: DetailData[]) => {
 	return Https.axiosPost("/seller/listing/batch", data)
 }
 

src/views/SellerDashboard/MyListings/EditDetail/components/ProductImageList.vue

@@ -12,8 +12,10 @@
 				v-for="(item, index) in imageList"
 				:key="index"
 				class="product-image-item flex flex-center"
-				:class="{ selected: item.selected }"
+				:class="{ selected: item.selected, video: item.isVideo }"
 				@click="emit('select', index)"
+				@mouseenter="handleMouseEnter(index, item)"
+				@mouseleave="handleMouseLeave(index, item)"
 			>
 				<img
 					v-if="item.selected"
@@ -21,8 +23,11 @@
 					class="checked"
 					alt=""
 				/>
-				<img class="img-src" :src="item.url" alt="" />
-				<div v-if="item.selected && index === firstSelectedIndex" class="main-pic">
+				<img class="img-src" :src="getDisplayUrl(item, index)" alt="" />
+				<div v-if="item.isVideo && durationMap[index]" class="video-duration">
+					{{ durationMap[index] }}
+				</div>
+				<div v-if="item.selected && index === firstSelectedIndex && !item.isVideo" class="main-pic">
 					main
 				</div>
 			</div>
@@ -30,8 +35,8 @@
 	</div>
 </template>
 <script setup lang="ts">
-	import { computed } from "vue"
-	import type { ListingItem } from "../types"
+	import { computed, ref, watch } from "vue"
+	import type { ListingItem, ProductMediaItem } from "../types"
 
 	const props = defineProps<{
 		imageList: ListingItem["prodImageList"]
@@ -43,6 +48,70 @@
 	}>()
 
 	const selectedCount = computed(() => props.imageList.filter((item) => item.selected).length)
+	const hoveredVideoIndex = ref<number | null>(null)
+	const durationMap = ref<Record<number, string>>({})
+	const videoSourceKey = computed(() =>
+		props.imageList
+			.map((item) => `${item.videoUrl || ""}::${item.url || ""}`)
+			.join("|")
+	)
+
+	const getDisplayUrl = (item: ProductMediaItem, index: number) => {
+		if (item.isVideo && hoveredVideoIndex.value === index && item.gifUrl) {
+			return item.gifUrl
+		}
+
+		return item.url
+	}
+
+	const handleMouseEnter = (index: number, item: ProductMediaItem) => {
+		if (!item.isVideo || !item.gifUrl) return
+		hoveredVideoIndex.value = index
+	}
+
+	const handleMouseLeave = (index: number, item: ProductMediaItem) => {
+		if (!item.isVideo) return
+		if (hoveredVideoIndex.value === index) hoveredVideoIndex.value = null
+	}
+
+	const formatVideoDuration = (duration: number) => {
+		if (!Number.isFinite(duration) || duration <= 0) return ""
+
+		const totalSeconds = Math.round(duration)
+		const minutes = Math.floor(totalSeconds / 60)
+		const seconds = totalSeconds % 60
+
+		return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
+	}
+
+	const loadVideoDurations = () => {
+		durationMap.value = {}
+		props.imageList.forEach((item, index) => {
+			if (!item.isVideo || !item.videoUrl) return
+
+			const video = document.createElement("video")
+			video.preload = "metadata"
+			video.src = item.videoUrl
+			video.onloadedmetadata = () => {
+				durationMap.value = {
+					...durationMap.value,
+					[index]: formatVideoDuration(video.duration)
+				}
+			}
+			video.onerror = () => {
+				video.src = ""
+			}
+		})
+	}
+
+	watch(
+		videoSourceKey,
+		() => {
+			hoveredVideoIndex.value = null
+			loadVideoDurations()
+		},
+		{ immediate: true }
+	)
 </script>
 
 <style lang="less" scoped>
@@ -135,6 +204,20 @@
 					object-fit: contain;
 				}
 
+				.video-duration {
+					position: absolute;
+					right: 0.8rem;
+					bottom: 0.8rem;
+					z-index: 1;
+					padding: 0 0.8rem;
+					height: 2.4rem;
+					line-height: 2.4rem;
+					border-radius: 1.2rem;
+					background: rgba(0, 0, 0, 0.8);
+					color: #fff;
+					font-size: 1.2rem;
+				}
+
 				.main-pic {
 					position: absolute;
 					height: 2.4rem;

src/views/SellerDashboard/MyListings/EditDetail/index.vue

@@ -88,10 +88,16 @@
 		fetchUpdateListing
 	} from "./api"
 	import type {
+		CoverSourceType,
+		CropType,
 		ListingDetailImage,
 		ListingDetailResponse,
+		ListingImageCategory,
 		ListingItem,
+		ProductMediaItem,
 		RadioOption,
+		SketchDetailResponse,
+		SketchDetailVideo,
 		StatusType
 	} from "./types"
 
@@ -121,18 +127,14 @@
 		desc: "",
 		gender: "FEMALE",
 		category: null,
+		coverFrom: "sketch",
 		firstSelectedIndex: null,
 		prodImageList: [],
 		sketchList: []
 	})
 
 	const genderOptions = computed(() => {
-		return (
-			STORE.state.UserHabit?.sex.value.map((el) => ({
-				...el,
-				// name: el.key.toLowerCase()
-			})) || []
-		)
+		return STORE.state.UserHabit?.sex.value
 	})
 
 	const fallbackCategoryOptions: Record<string, RadioOption[]> = {
@@ -172,14 +174,48 @@
 		return [...images].sort((prev, next) => (prev.sortOrder ?? 0) - (next.sortOrder ?? 0))
 	}
 
-	const getImageSelected = (value: ListingDetailImage["isSelected"]) =>
-		value === true || value === 1 || value === "1"
+	const getImageSelected = (value: ListingDetailImage["isSelected"]) => {
+		if (value === true || value === 1 || value === "1") return true
+		if (typeof value === "string") return value.toLowerCase() === "true"
+
+		return false
+	}
+
+	const getDetailImageSelected = (image: ListingDetailImage) =>
+		getImageSelected(image.isSelected) ||
+		getImageSelected(image.isSeleted) ||
+		getImageSelected(image.selected)
+
+	const normalizeCoverSource = (value: unknown): CoverSourceType =>
+		value === "mainProductImage" ? "mainProductImage" : "sketch"
+
+	const isCoverSource = (value: unknown): value is CoverSourceType =>
+		value === "sketch" || value === "mainProductImage"
+
+	const resolveCoverSourceFromImageUrl = (
+		imageUrl: string,
+		listing: ListingItem
+	): CoverSourceType => {
+		if (imageUrl === listing.mainProductImage) return "mainProductImage"
+		if (imageUrl === listing.sketch) return "sketch"
+
+		return normalizeCoverSource(imageUrl)
+	}
+
+	const videoImageCategories = ["firstFrame", "gif", "video"] as const
+	type VideoImageCategory = (typeof videoImageCategories)[number]
+
+	const isVideoImageCategory = (category: ListingDetailImage["category"]): category is VideoImageCategory =>
+		videoImageCategories.includes(category as VideoImageCategory)
 
 	const normalizeDetailGender = (value: ListingDetailResponse["designFor"]) => {
 		const gender = String(value || "").toUpperCase()
 		return gender === "MALE" || gender === "FEMALE" ? gender : "FEMALE"
 	}
 
+	const getListingDesignFor = (gender: ListingItem["gender"]): "male" | "female" =>
+		gender === "MALE" ? "male" : "female"
+
 	const normalizeDetailCategory = (
 		value: ListingDetailResponse["productCategory"]
 	): ListingItem["category"] => {
@@ -193,6 +229,17 @@
 
 	const createListingItemFromDetail = (detail: ListingDetailResponse): ListingItem => {
 		const listing = createListingItem()
+		let coverFromImageUrl = ""
+		const videoGroupMap = new Map<
+			number,
+			{
+				sortOrder: number
+				firstFrameUrl?: string
+				gifUrl?: string
+				videoUrl?: string
+				selected: boolean
+			}
+		>()
 
 		listing.productName = detail.title || ""
 		listing.price =
@@ -202,6 +249,11 @@
 		listing.category = normalizeDetailCategory(detail.productCategory)
 
 		getSortedDetailImages(detail.images || []).forEach((image) => {
+			if (image.category === "cover_from") {
+				coverFromImageUrl = image.imageUrl || ""
+				return
+			}
+
 			const imageUrl = image.imageUrl || ""
 			if (!imageUrl) return
 
@@ -215,7 +267,7 @@
 				return
 			}
 
-			if (image.category === "mainProductImage") {
+			if (image.category === "mainProductImage" || image.category === "main_product") {
 				listing.mainProductImage = imageUrl
 				return
 			}
@@ -223,22 +275,57 @@
 			if (image.category === "product") {
 				listing.prodImageList.push({
 					url: imageUrl,
-					selected: getImageSelected(image.isSelected)
+					selected: getDetailImageSelected(image)
 				})
 				return
 			}
 
+			if (isVideoImageCategory(image.category)) {
+				if (image.sortOrder === null || typeof image.sortOrder === "undefined") return
+
+				const sortOrder = Number(image.sortOrder)
+				if (!Number.isFinite(sortOrder)) return
+
+				const group = videoGroupMap.get(sortOrder) || {
+					sortOrder,
+					selected: false
+				}
+
+				if (image.category === "firstFrame") group.firstFrameUrl = imageUrl
+				if (image.category === "gif") group.gifUrl = imageUrl
+				if (image.category === "video") group.videoUrl = imageUrl
+				group.selected = group.selected || getDetailImageSelected(image)
+				videoGroupMap.set(sortOrder, group)
+				return
+			}
+
 			if (image.category === "apparel") {
 				listing.sketchList.push({ url: imageUrl })
 			}
 		})
 
+		Array.from(videoGroupMap.values())
+			.sort((prev, next) => prev.sortOrder - next.sortOrder)
+			.forEach((video) => {
+				const videoItem = createProductVideoItem(video, video.selected)
+				if (videoItem) listing.prodImageList.push(videoItem)
+			})
+
 		if (!listing.mainProductImage) {
 			listing.mainProductImage =
-				listing.prodImageList.find((item) => item.selected)?.url || ""
+				listing.prodImageList.find((item) => item.selected && !item.isVideo)?.url || ""
+		}
+		if (coverFromImageUrl) {
+			listing.coverFrom = resolveCoverSourceFromImageUrl(coverFromImageUrl, listing)
 		}
 
-		const selectedIndex = listing.prodImageList.findIndex((item) => item.selected)
+		const mainProductIndex = listing.prodImageList.findIndex(
+			(item) => !item.isVideo && item.url === listing.mainProductImage
+		)
+		const selectedIndex =
+			mainProductIndex === -1
+				? listing.prodImageList.findIndex((item) => item.selected && !item.isVideo)
+				: mainProductIndex
 		listing.firstSelectedIndex = selectedIndex === -1 ? null : selectedIndex
 
 		listing.productImage = listing.prodImageList.map((item) => item.url)
@@ -249,6 +336,26 @@
 		return listing
 	}
 
+	const createProductVideoItem = (
+		video: SketchDetailVideo,
+		selected = false
+	): ProductMediaItem | null => {
+		const firstFrameUrl = video?.firstFrameUrl || ""
+		const gifUrl = video?.gifUrl || ""
+		const videoUrl = video?.videoUrl || ""
+
+		if (!firstFrameUrl || !videoUrl) return null
+
+		return {
+			url: firstFrameUrl,
+			firstFrameUrl,
+			gifUrl,
+			videoUrl,
+			isVideo: true,
+			selected
+		}
+	}
+
 	const handleSelectProdImg = (index: number) => {
 		const listing = currentListing.value
 		const target = prodImgList.value[index]
@@ -257,6 +364,10 @@
 		target.selected = willSelect
 
 		if (willSelect && listing.firstSelectedIndex === null) {
+			if (target.isVideo) {
+				message.warning("The first selected item is the main product image. Videos cannot be used.")
+				return
+			}
 			listing.mainProductImage = target.url
 			listing.firstSelectedIndex = index
 			return
@@ -268,25 +379,29 @@
 		}
 	}
 
-	const cropType = ref("")
-	const handleClickCrop = (data: any, type: string, paramThree: any = []) => {
+	const getCoverOriginList = (item: ListingItem) => {
+		const origin: Array<{ type: CoverSourceType; url: string }> = []
+		if (item.sketch) {
+			origin.push({ type: "sketch", url: item.sketch })
+		}
+		if (item.mainProductImage) {
+			origin.push({ type: "mainProductImage", url: item.mainProductImage })
+		}
+
+		return origin
+	}
+
+	const cropType = ref<CropType | "">("")
+	const handleClickCrop = (data: string | null, type: CropType, paramThree: number | unknown[] = []) => {
 		// 处理来自TopImageSection的调用: (data, type, list)
 		// 处理来自ApparelSketchList的调用: (data, type, index)
 		const index = typeof paramThree === "number" ? paramThree : undefined
-		const list = Array.isArray(paramThree) ? paramThree : []
 
 		// console.log(data, type)
 		// console.log(selectList.value[currentIndex.value])
-		let origin = []
 		const currentItem = selectList.value[currentIndex.value]
-		if (currentItem.sketch) {
-			origin.push({ type: "sketch", url: currentItem.sketch })
-		}
-		if (currentItem.mainProductImage) {
-			origin.push({ type: "mainProductImage", url: currentItem.mainProductImage })
-		}
-		if (type !== "cover") origin = []
-		const titleList = {
+		const origin = type === "cover" ? getCoverOriginList(currentItem) : []
+		const titleList: Record<CropType, string> = {
 			sketch: "Crop Sketch",
 			mainProductImage: "Crop Main Product Image",
 			cover: "Crop Cover",
@@ -296,17 +411,28 @@
 		cropType.value = type
 		imageClipDialogRef.value.open(
 			data,
-			(file) => {
+			(file: File, coverFrom?: CoverSourceType) => {
 				// console.log(file)
 				uploadFile(file).then((res) => {
 					if (type === "apparel" && typeof index !== "undefined") {
 						selectList.value[currentIndex.value].sketchList[index].url = res
+					} else if (type === "cover") {
+						selectList.value[currentIndex.value].cover = res
+						if (isCoverSource(coverFrom)) {
+							selectList.value[currentIndex.value].coverFrom = coverFrom
+						}
 					} else {
 						selectList.value[currentIndex.value][type] = res
 					}
 				})
 			},
-			{ ratio, isPreview: true, title: titleList[type], isProduct: true },
+			{
+				ratio,
+				isPreview: true,
+				title: titleList[type],
+				isProduct: true,
+				coverFrom: currentItem.coverFrom
+			},
 			origin
 		)
 	}
@@ -358,49 +484,107 @@
 		return true
 	}
 
+	type SaveListingImage = {
+		category: ListingImageCategory
+		imageUrl: string | null
+		isSelected: number
+		sortOrder: number
+	}
+
+	const isMainProductMedia = (item: ListingItem, media: ProductMediaItem, index: number) =>
+		!media.isVideo &&
+		(item.firstSelectedIndex === index ||
+			(Boolean(item.mainProductImage) && item.mainProductImage === media.url))
+
+	const getSortedProductMedia = (item: ListingItem) => {
+		return item.prodImageList
+			.map((media, index) => ({ media, index }))
+			.filter(({ media }) => !media.isVideo)
+			.sort((prev, next) => {
+				const prevRank = isMainProductMedia(item, prev.media, prev.index)
+					? 0
+					: prev.media.selected
+						? 1
+						: 2
+				const nextRank = isMainProductMedia(item, next.media, next.index)
+					? 0
+					: next.media.selected
+						? 1
+						: 2
+
+				return prevRank - nextRank || prev.index - next.index
+			})
+	}
+
+	const buildListingImages = (item: ListingItem) => {
+		const images: SaveListingImage[] = []
+		const sortOrderMap: Partial<Record<ListingImageCategory, number>> = {}
+		const getNextSortOrder = (category: ListingImageCategory) => {
+			const sortOrder = (sortOrderMap[category] || 0) + 1
+			sortOrderMap[category] = sortOrder
+			return sortOrder
+		}
+		const pushImage = (
+			category: ListingImageCategory,
+			imageUrl: string | null,
+			isSelected = 1,
+			sortOrder = getNextSortOrder(category)
+		) => {
+			images.push({
+				category,
+				imageUrl,
+				isSelected,
+				sortOrder
+			})
+		}
+		const getCoverFromImageUrl = () => {
+			if (item.coverFrom === "mainProductImage") return item.mainProductImage || null
+			return item.sketch
+		}
+
+		pushImage("sketch", item.sketch)
+		pushImage("cover", item.cover)
+		pushImage("cover_from", getCoverFromImageUrl())
+
+		if (item.mainProductImage) {
+			pushImage("main_product", item.mainProductImage)
+		}
+
+		getSortedProductMedia(item).forEach(({ media }) => {
+			pushImage("product", media.url, Number(!!media.selected))
+		})
+
+		item.sketchList.forEach((sketch) => {
+			pushImage("apparel", sketch.url)
+		})
+
+		let videoSortOrder = 0
+		item.prodImageList
+			.filter((media) => media.isVideo)
+			.forEach((media) => {
+				videoSortOrder += 1
+				const isSelected = Number(!!media.selected)
+
+				pushImage("firstFrame", media.firstFrameUrl || media.url, isSelected, videoSortOrder)
+				pushImage("gif", media.gifUrl || "", isSelected, videoSortOrder)
+				pushImage("video", media.videoUrl || "", isSelected, videoSortOrder)
+			})
+
+		return images
+	}
+
 	const handleSaveForm = async (type: StatusType) => {
-		const paramsList = []
-		selectList.value.forEach((item: ListingItem) => {
-			const params = {
+		const paramsList = selectList.value.map((item: ListingItem) => {
+			return {
 				id: itemId.value,
 				title: item.productName,
 				description: item.desc,
 				price: item.price,
 				status: type === "draft" ? 0 : 1,
-				images: [],
-				designFor: (item.gender || "FEMALE").toLowerCase(),
+				images: buildListingImages(item),
+				designFor: getListingDesignFor(item.gender),
 				productCategory: item.category
 			}
-
-			;["sketch", "cover"].forEach((el) => {
-				params.images.push({
-					category: el,
-					imageUrl: item[el],
-					isSelected: 1
-				})
-			})
-			if (item.mainProductImage) {
-				params.images.push({
-					category: "main_product",
-					imageUrl: item.mainProductImage,
-					isSeleted: 1
-				})
-			}
-			item.prodImageList.forEach((item) => {
-				params.images.push({
-					category: "product",
-					imageUrl: item.url,
-					isSelected: Number(!!item.selected)
-				})
-			})
-			item.sketchList.forEach((item) => {
-				params.images.push({
-					category: "apparel",
-					imageUrl: item.url,
-					isSelected: 1
-				})
-			})
-			paramsList.push(params)
 		})
 		await fetchUpdateListing(paramsList)
 	}
@@ -438,13 +622,18 @@
 	}
 
 	const handleFetchItemDetial = (list) => {
-		fetchSketchDetail(list).then((res) => {
+		fetchSketchDetail(list).then((res: SketchDetailResponse[]) => {
 			res.forEach((item, index) => {
 				if (!selectList.value[index]) return
-				selectList.value[index].sketchList = item.clothes.map((el) => ({ url: el }))
-				selectList.value[index].prodImageList = item.toProductImageUrls.map((el) => ({
-					url: el
+				selectList.value[index].sketchList = (item.clothes || []).map((el) => ({ url: el }))
+				const imageItems = (item.toProductImageUrls || []).map((el) => ({
+					url: el,
+					selected: false
 				}))
+				const videoItems = (item.videos || [])
+					.map((video) => createProductVideoItem(video))
+					.filter((video): video is ProductMediaItem => Boolean(video))
+				selectList.value[index].prodImageList = [...imageItems, ...videoItems]
 			})
 		})
 	}

src/views/SellerDashboard/MyListings/EditDetail/types.ts

@@ -7,6 +7,27 @@ export type RadioOption = {
 
 export type TopImageType = "sketch" | "mainProductImage" | "cover"
 export type CropType = TopImageType | "apparel"
+export type CoverSourceType = "sketch" | "mainProductImage"
+export type ListingImageCategory =
+	| "cover"
+	| "cover_from"
+	| "main_product"
+	| "mainProductImage"
+	| "product"
+	| "sketch"
+	| "apparel"
+	| "firstFrame"
+	| "gif"
+	| "video"
+
+export type ProductMediaItem = {
+	url: string
+	selected?: boolean
+	isVideo?: boolean
+	videoUrl?: string
+	gifUrl?: string
+	firstFrameUrl?: string
+}
 
 export type ListingItem = {
 	designItemId: number | string | null
@@ -20,18 +41,18 @@ export type ListingItem = {
 	desc: string
 	gender: string
 	category: string[] | null
+	coverFrom: CoverSourceType
 	firstSelectedIndex: number | null
-	prodImageList: Array<{
-		url: string
-		selected?: boolean
-	}>
+	prodImageList: ProductMediaItem[]
 	sketchList: Array<{ url: string | null }>
 }
 
 export type ListingDetailImage = {
-	category?: string | null
+	category?: ListingImageCategory | string | null
 	imageUrl?: string | null
 	isSelected?: boolean | number | string | null
+	isSeleted?: boolean | number | string | null
+	selected?: boolean | number | string | null
 	sortOrder?: number | null
 }
 
@@ -45,4 +66,17 @@ export type ListingDetailResponse = {
 	images?: ListingDetailImage[] | null
 }
 
+export type SketchDetailVideo = {
+	firstFrameUrl?: string | null
+	gifUrl?: string | null
+	videoUrl?: string | null
+}
+
+export type SketchDetailResponse = {
+	clothes?: string[] | null
+	designItemId?: number | string | null
+	toProductImageUrls?: string[] | null
+	videos?: SketchDetailVideo[] | null
+}
+
 export type StatusType = "draft" | "publish"