From 006c2e3f9c31fe9d887df7a39a3190255878bab0 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Tue, 5 May 2026 15:10:14 +0800
Subject: [PATCH] =?UTF-8?q?bugfix:=20=E5=89=AA=E5=88=87=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E6=9D=A5=E6=BA=90=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BrandProfile/image-clip-dialog.vue        | 460 +++++++++---------
 1 file changed, 229 insertions(+), 231 deletions(-)

diff --git a/src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue b/src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
index aadf0e37..88ebf2dc 100644
--- a/src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
+++ b/src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
@@ -27,7 +27,7 @@
 							</div>
 							<div
 								class="origin-item product"
-								:class="{ selected: currentOrigin === 'mainProducImage' }"
+								:class="{ selected: currentOrigin === 'mainProductImage' }"
 								@click="handleChangeOrigin('mainProductImage')"
 							>
 								{{ $t("Seller.mainProductImage") }}
@@ -79,258 +79,256 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed } from "vue"
-import ImageClip from "./image-clip.vue"
-import { useI18n } from "vue-i18n"
-const { t } = useI18n()
+	import { ref, reactive, computed } from "vue"
+	import ImageClip from "./image-clip.vue"
+	import { useI18n } from "vue-i18n"
+	const { t } = useI18n()
 
-
-
-const props = defineProps({
-	type: {
-		type: String,
-		default: ""
-	},
-	isProduct: {
-		type: Boolean,
-		default: false
-	}
-})
-
-const tips = computed(() => {
-	if (props.type === "cover") {
-		return t("Seller.imageClipCoverTip")
-	}
-	if (props.type === "mainProductImage") {
-		return t("Seller.imageClipMainProductImageTip")
-	}
-	if (props.type === "sketch") {
-		return t("Seller.imageClipSketchTip")
-	}
-	if (props.type === "apparel") {
-		return t("Seller.imageClipApparelTip")
-	}
-})
-
-const data = reactive({
-	url: "",
-	title: "Crop Image",
-	preview_url: "",
-	ratio: [1, 1],
-	isPreview: true,
-	callback: null,
-	isProduct: false // 是否商品编辑
-})
-
-const currentOrigin = ref("sketch")
-const coverOrigin = ref([])
-const handleChangeOrigin = (type) => {
-	currentOrigin.value = type
-	data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
-}
-
-const show = ref(false)
-const open = (url, callback, options, origin) => {
-	if (!props.isProduct) {
-		if (!url || !callback) return
-	}
-	data.url = url
-	data.callback = callback
-	data.ratio = options.ratio || [1, 1]
-	data.isPreview = true
-	data.preview_url = ""
-	data.title = options.title || "Crop Image"
-	if (options) {
-		if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
-		data.isProduct = options.isProduct
-	}
-	if (origin?.length) {
-		coverOrigin.value = origin
-		data.url = origin[0].url
-	}
-	show.value = true
-}
-const onCancel = () => {
-	show.value = false
-}
-const imageClipRef = ref(null)
-const onSubmit = () => {
-	imageClipRef.value.getCropBlob().then((blob) => {
-		if (data.callback) data.callback(blobToFile(blob, "image.png"))
-		onCancel()
+	const props = defineProps({
+		type: {
+			type: String,
+			default: ""
+		},
+		isProduct: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	const tips = computed(() => {
+		if (props.type === "cover") {
+			return t("Seller.imageClipCoverTip")
+		}
+		if (props.type === "mainProductImage") {
+			return t("Seller.imageClipMainProductImageTip")
+		}
+		if (props.type === "sketch") {
+			return t("Seller.imageClipSketchTip")
+		}
+		if (props.type === "apparel") {
+			return t("Seller.imageClipApparelTip")
+		}
+	})
+
+	const data = reactive({
+		url: "",
+		title: "Crop Image",
+		preview_url: "",
+		ratio: [1, 1],
+		isPreview: true,
+		callback: null,
+		isProduct: false // 是否商品编辑
+	})
+
+	const currentOrigin = ref("sketch")
+	const coverOrigin = ref([])
+	const handleChangeOrigin = (type) => {
+		currentOrigin.value = type
+		data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
+	}
+
+	const show = ref(false)
+	const open = (url, callback, options, origin) => {
+		if (!props.isProduct) {
+			if (!url || !callback) return
+		}
+		data.url = url
+		data.callback = callback
+		data.ratio = options.ratio || [1, 1]
+		data.isPreview = true
+		data.preview_url = ""
+		data.title = options.title || "Crop Image"
+		if (options) {
+			if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
+			data.isProduct = options.isProduct
+		}
+		if (origin?.length) {
+			coverOrigin.value = origin
+			data.url = origin[0].url
+		}
+		show.value = true
+	}
+	const onCancel = () => {
+		show.value = false
+	}
+	const imageClipRef = ref(null)
+	const onSubmit = () => {
+		imageClipRef.value.getCropBlob().then((blob) => {
+			if (data.callback) data.callback(blobToFile(blob, "image.png"))
+			onCancel()
+		})
+	}
+	// 将blob转换为file对象
+	const blobToFile = (blob, fileName) => {
+		return new File([blob], fileName, { type: blob.type })
+	}
+	defineExpose({
+		open
 	})
-}
-// 将blob转换为file对象
-const blobToFile = (blob, fileName) => {
-	return new File([blob], fileName, { type: blob.type })
-}
-defineExpose({
-	open
-})
 </script>
 <style scoped lang="less">
-.image-clip-dialog-box {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	.submit {
-		width: 4rem;
-		height: 4rem;
-		border-radius: 50%;
-		background: #262626;
-		color: #fff;
-		cursor: pointer;
-	}
-	> .header {
+	.image-clip-dialog-box {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
 		display: flex;
-		justify-content: space-between;
-		margin-bottom: 5rem;
-		&.is-product {
-			margin-bottom: 2.4rem;
+		flex-direction: column;
+		.submit {
+			width: 4rem;
+			height: 4rem;
+			border-radius: 50%;
+			background: #262626;
+			color: #fff;
+			cursor: pointer;
 		}
-		> .title {
-			font-family: pingfang_heavy;
-			font-size: 2.4rem;
-			color: #595959;
+		> .header {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 5rem;
+			&.is-product {
+				margin-bottom: 2.4rem;
+			}
+			> .title {
+				font-family: pingfang_heavy;
+				font-size: 2.4rem;
+				color: #595959;
+			}
+			> .right {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 2rem;
+				> button {
+					width: 10rem;
+					height: 4.8rem;
+					border-radius: 4rem;
+					border: none;
+					background: #e4e5eb;
+					font-family: pingfang_heavy;
+					font-size: 1.6rem;
+					color: #000;
+				}
+				.origin-container {
+					font-weight: 400;
+					color: #000;
+					font-size: 1.4rem;
+					.origin-select {
+						margin-left: 1.2rem;
+						height: 4.8rem;
+						border: 1px solid #c7c7c7;
+						border-radius: 3rem;
+						column-gap: 1.2rem;
+						padding: 0.8rem;
+						.origin-item {
+							height: 3.2rem;
+							line-height: 3.2rem;
+							border-radius: 2rem;
+							cursor: pointer;
+							&.selected {
+								background-color: #000;
+								color: #fff;
+							}
+							&.sketch {
+								padding: 0 1.9rem;
+							}
+							&.product {
+								padding: 0 2.5rem;
+							}
+						}
+					}
+				}
+			}
 		}
-		> .right {
+		> .content {
+			flex: 1;
+			overflow: hidden;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			gap: 2rem;
-			> button {
-				width: 10rem;
-				height: 4.8rem;
-				border-radius: 4rem;
-				border: none;
-				background: #e4e5eb;
-				font-family: pingfang_heavy;
-				font-size: 1.6rem;
-				color: #000;
-			}
-			.origin-container {
-				font-weight: 400;
-				color: #000;
-				font-size: 1.4rem;
-				.origin-select {
-					margin-left: 1.2rem;
-					height: 4.8rem;
-					border: 1px solid #c7c7c7;
-					border-radius: 3rem;
-					column-gap: 1.2rem;
-					padding: 0.8rem;
-					.origin-item {
-						height: 3.2rem;
-						line-height: 3.2rem;
-						border-radius: 2rem;
-						cursor: pointer;
-						&.selected {
-							background-color: #000;
-							color: #fff;
-						}
-						&.sketch {
-							padding: 0 1.9rem;
-						}
-						&.product {
-							padding: 0 2.5rem;
-						}
-					}
-				}
-			}
-		}
-	}
-	> .content {
-		flex: 1;
-		overflow: hidden;
-		display: flex;
-		align-items: center;
-		justify-content: center;
 
-		.crop-wrapper {
-			width: 100%;
-			.tips {
-				text-align: center;
-				color: #585858;
-				font-size: 1.4rem;
-				font-weight: 400;
-			}
-		}
-		&.is-product {
-			column-gap: 18.6rem;
 			.crop-wrapper {
-				width: initial;
-			}
-		}
-		> .image-clip {
-			flex: 1;
-			&.is-product {
-				width: initial;
-				flex: none;
-			}
-		}
-		> .preview {
-			margin-left: 6rem;
-			width: 28rem;
-			height: 100%;
-			display: flex;
-			flex-direction: column;
-			justify-content: flex-start;
-			align-items: center;
-			gap: 2.4rem;
-			min-height: 0;
-
-			> .title {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				gap: 1.2rem;
-				> .label {
-					font-family: pingfang_heavy;
-					font-size: 1.6rem;
+				width: 100%;
+				.tips {
+					text-align: center;
+					color: #585858;
+					font-size: 1.4rem;
+					font-weight: 400;
 				}
 			}
-			> .preview-image {
-				width: 100%;
+			&.is-product {
+				column-gap: 18.6rem;
+				.crop-wrapper {
+					width: initial;
+				}
+			}
+			> .image-clip {
 				flex: 1;
-				min-height: 0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-			> .preview-image > img {
-				width: 100%;
-				height: auto;
-				max-height: 100%;
-			}
-			> .submit {
-				margin-top: auto;
-				flex-shrink: 0;
-			}
-			&.is-product {
-				margin-left: 0;
-				> .preview-image > img {
-					width: 20.8rem;
-					height: 36.7rem;
-					box-shadow: 4px 4px 16px 0px #0000000f;
-					border: 1px solid #ededed;
+				&.is-product {
+					width: initial;
+					flex: none;
 				}
-				&.is-cover {
-					> .preview-image > img {
-						width: 29.7rem;
-						height: 37.5rem;
+			}
+			> .preview {
+				margin-left: 6rem;
+				width: 28rem;
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-start;
+				align-items: center;
+				gap: 2.4rem;
+				min-height: 0;
+
+				> .title {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 1.2rem;
+					> .label {
+						font-family: pingfang_heavy;
+						font-size: 1.6rem;
 					}
 				}
-				&.is-apparel {
+				> .preview-image {
+					width: 100%;
+					flex: 1;
+					min-height: 0;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				> .preview-image > img {
+					width: 100%;
+					height: auto;
+					max-height: 100%;
+				}
+				> .submit {
+					margin-top: auto;
+					flex-shrink: 0;
+				}
+				&.is-product {
+					margin-left: 0;
 					> .preview-image > img {
-						width: 100%;
-						height: auto;
-						max-height: 100%;
+						width: 20.8rem;
+						height: 36.7rem;
+						box-shadow: 4px 4px 16px 0px #0000000f;
+						border: 1px solid #ededed;
+					}
+					&.is-cover {
+						> .preview-image > img {
+							width: 29.7rem;
+							height: 37.5rem;
+						}
+					}
+					&.is-apparel {
+						> .preview-image > img {
+							width: 100%;
+							height: auto;
+							max-height: 100%;
+						}
 					}
 				}
 			}
 		}
 	}
-}
 </style>