feat: 产品主图和封面添加删除按钮

src/assets/icons/CTrash.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2503 2.33333H10.442C10.3066 1.67499 9.94839 1.08345 9.42772 0.658419C8.90706 0.233386 8.25578 0.000848473 7.58366 0L6.41699 0C5.74487 0.000848473 5.0936 0.233386 4.57293 0.658419C4.05226 1.08345 3.69405 1.67499 3.55866 2.33333H1.75033C1.59562 2.33333 1.44724 2.39479 1.33785 2.50419C1.22845 2.61358 1.16699 2.76196 1.16699 2.91667C1.16699 3.07138 1.22845 3.21975 1.33785 3.32915C1.44724 3.43854 1.59562 3.5 1.75033 3.5H2.33366V11.0833C2.33459 11.8566 2.64217 12.5979 3.18895 13.1447C3.73573 13.6915 4.47706 13.9991 5.25033 14H8.75033C9.52359 13.9991 10.2649 13.6915 10.8117 13.1447C11.3585 12.5979 11.6661 11.8566 11.667 11.0833V3.5H12.2503C12.405 3.5 12.5534 3.43854 12.6628 3.32915C12.7722 3.21975 12.8337 3.07138 12.8337 2.91667C12.8337 2.76196 12.7722 2.61358 12.6628 2.50419C12.5534 2.39479 12.405 2.33333 12.2503 2.33333ZM6.41699 1.16667H7.58366C7.94549 1.16711 8.29832 1.27947 8.59377 1.48834C8.88922 1.69721 9.11282 1.99237 9.23391 2.33333H4.76674C4.88783 1.99237 5.11143 1.69721 5.40688 1.48834C5.70234 1.27947 6.05517 1.16711 6.41699 1.16667ZM10.5003 11.0833C10.5003 11.5475 10.316 11.9926 9.98776 12.3208C9.65957 12.649 9.21445 12.8333 8.75033 12.8333H5.25033C4.7862 12.8333 4.34108 12.649 4.01289 12.3208C3.6847 11.9926 3.50033 11.5475 3.50033 11.0833V3.5H10.5003V11.0833Z" fill="currentColor"/>
+<path d="M5.83333 10.5002C5.98804 10.5002 6.13642 10.4387 6.24581 10.3293C6.35521 10.2199 6.41667 10.0715 6.41667 9.91683V6.41683C6.41667 6.26212 6.35521 6.11375 6.24581 6.00435C6.13642 5.89495 5.98804 5.8335 5.83333 5.8335C5.67862 5.8335 5.53025 5.89495 5.42085 6.00435C5.31146 6.11375 5.25 6.26212 5.25 6.41683V9.91683C5.25 10.0715 5.31146 10.2199 5.42085 10.3293C5.53025 10.4387 5.67862 10.5002 5.83333 10.5002Z" fill="currentColor"/>
+<path d="M8.16634 10.5002C8.32105 10.5002 8.46942 10.4387 8.57882 10.3293C8.68822 10.2199 8.74967 10.0715 8.74967 9.91683V6.41683C8.74967 6.26212 8.68822 6.11375 8.57882 6.00435C8.46942 5.89495 8.32105 5.8335 8.16634 5.8335C8.01163 5.8335 7.86326 5.89495 7.75386 6.00435C7.64447 6.11375 7.58301 6.26212 7.58301 6.41683V9.91683C7.58301 10.0715 7.64447 10.2199 7.75386 10.3293C7.86326 10.4387 8.01163 10.5002 8.16634 10.5002Z" fill="currentColor"/>
+</svg>

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

@@ -16,6 +16,13 @@
 				>
 					<SvgIcon name="CCrop" color="#fff" size="12" />
 				</div>
+				<div
+					v-if="images[type] && type !== 'sketch'"
+					class="delete-tool flex flex-center"
+					@click="emit('remove-image', type)"
+				>
+					<SvgIcon name="CTrash" color="#ffffff" size="14" />
+				</div>
 				<img
 					v-if="images[type]"
 					:src="images[type] || ''"
@@ -54,6 +61,7 @@
 
 	const emit = defineEmits<{
 		(e: "crop", data: string | null, type: TopImageType): void
+		(e: "remove-image", type: TopImageType): void
 	}>()
 
 	const topImageList: TopImageType[] = ["sketch", "mainProductImage", "cover"]
@@ -117,6 +125,18 @@
 					cursor: pointer;
 				}
 
+				.delete-tool {
+					position: absolute;
+					top: 3.4rem;
+					right: 0.8rem;
+					width: 2rem;
+					height: 2rem;
+					border-radius: 50%;
+					background-color: #9a9a9a;
+					// z-index: 1;
+					cursor: pointer;
+				}
+
 				.sketch-img {
 					height: 100%;
 					object-fit: contain;
@@ -136,8 +156,6 @@
 						row-gap: 1.2rem;
 					}
 
-					
-
 					.trigger-tips {
 						font-size: 1.2rem;
 						text-align: center;

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

@@ -19,7 +19,7 @@
 		</seller-header>
 		<div class="edit-detail-content flex" ref="editDetailContentRef">
 			<div class="left">
-				<TopImageSection :images="previewImageMap" @crop="handleClickCrop" />
+				<TopImageSection :images="previewImageMap" @crop="handleClickCrop" @remove-image="handleRemoveImage" />
 				<ProductImageList
 					:image-list="prodImgList"
 					:first-selected-index="currentListing.firstSelectedIndex"
@@ -94,6 +94,7 @@
 	import type {
 		CoverSourceType,
 		CropType,
+		TopImageType,
 		ListingDetailImage,
 		ListingDetailResponse,
 		ListingImageCategory,
@@ -391,6 +392,21 @@
 		return origin
 	}
 
+	const handleRemoveImage = (type: TopImageType) => {
+		const listing = currentListing.value
+		if (type === "mainProductImage") {
+			listing.prodImageList.forEach((item) => {
+				if (item.url === listing.mainProductImage && !item.isVideo) {
+					item.selected = false
+				}
+			})
+			listing.mainProductImage = ""
+			listing.firstSelectedIndex = null
+		} else if (type === "cover") {
+			listing.cover = ""
+		}
+	}
+
 	const cropType = ref<CropType | "">("")
 	const handleClickCrop = (
 		data: string | null,