diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index cf9b8f56..00000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/** @type {import('prettier').Config} */
-module.exports = {
-  // 打印宽度
-  printWidth: 100,
-  // 使用 4 空格缩进
-  tabWidth: 4,
-  // 使用 4 空格缩进，不使用制表符
-  useTabs: true,
-  // 行尾使用 LF (Unix 风格)
-  endOfLine: 'lf',
-  // 语句末尾使用分号
-  semi: false,
-  // 使用单引号
-  singleQuote: false,
-  // 对象和数组末尾不添加尾随逗号
-  trailingComma: 'none',
-  // JSX 引号使用单引号
-  jsxSingleQuote: false,
-  // 括号内侧空格
-  bracketSpacing: true,
-  // JSX 标签不换行
-  bracketSameLine: false,
-  // 箭头函数参数始终使用括号
-  arrowParens: 'always',
-  // HTML、Vue、Angular 和 Markdown 使用 LF
-  htmlWhitespaceSensitivity: 'css',
-  // Vue 文件脚本和样式缩进
-  vueIndentScriptAndStyle: false,
-  // 行注释位置在注释上方，不加空格
-  proseWrap: 'preserve',
-  // 根据文件类型自动推断
-  embeddedLanguageFormatting: 'auto',
-};
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..71409922
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,17 @@
+{
+	"printWidth": 100,
+	"tabWidth": 4,
+	"useTabs": true,
+	"endOfLine": "lf",
+	"semi": false,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"jsxSingleQuote": false,
+	"bracketSpacing": true,
+	"bracketSameLine": false,
+	"arrowParens": "always",
+	"htmlWhitespaceSensitivity": "css",
+	"vueIndentScriptAndStyle": true,
+	"proseWrap": "preserve",
+	"embeddedLanguageFormatting": "auto"
+}
diff --git a/src/store/seller/index.ts b/src/store/seller/index.ts
index 3ca93278..a72b3227 100644
--- a/src/store/seller/index.ts
+++ b/src/store/seller/index.ts
@@ -49,8 +49,11 @@ const seller: Module<Seller, RootState> = {
 		},
 		set_designerInfo(state: Seller, value: DesignerInfo) {
 			state.designerInfo = {
+				...state.designerInfo,
 				...value,
-				socialLinks: JSON.parse(value.socialLinks)
+			}
+			if (value.socialLinks) {
+				state.designerInfo.socialLinks = JSON.parse(value.socialLinks)
 			}
 		},
 	},
diff --git a/src/tool/https.js b/src/tool/https.js
index 3c734e5a..f88c16ca 100644
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -474,6 +474,7 @@ export const Https = {
 
 
 		// 卖家端接口
+		sellerUploadFile: '/seller/file/upload', // 卖家上传文件
 		checkSellerDesigner: '/seller/designer/check', // 检查卖家是否为设计师
 		getSellerApplyStatus: '/seller/designer/apply/status', // 获取卖家申请状态
 		submitSellerApply: '/seller/designer/apply', // 提交卖家申请
@@ -483,7 +484,8 @@ export const Https = {
 		getSellerOrderList: '/seller/order/page', // 获取卖家订单列表
 		getListingPopup: '/seller/listing/popup/check', // 获取是否勾选发布作品提示
 		setListingPopup: '/seller/listing/popup/set', // 设置是否勾选发布作品提示
-
+		getListingList: '/seller/listing/page', // 获取商品列表,发布和未发布
+		putListingStatus: '/seller/listing/status', // 更新商品状态
 	},
 
 	axiosGet(url, config, pathParams) {
diff --git a/src/views/SellerDashboard/BrandProfile/image-clip.vue b/src/views/SellerDashboard/BrandProfile/image-clip.vue
index 14ce35b3..ffeb2f9f 100644
--- a/src/views/SellerDashboard/BrandProfile/image-clip.vue
+++ b/src/views/SellerDashboard/BrandProfile/image-clip.vue
@@ -12,7 +12,6 @@
 				centerBox
 				@realTime="onChange"
 				outputType="png"
-				v-bind="bindProps"
 			></VueCropper>
 		</div>
 		<div class="clip_opterate">
@@ -35,357 +34,351 @@
 	</div>
 </template>
 <script setup>
-import { ref, useAttrs, onMounted, onBeforeUnmount, computed, nextTick, watch } from "vue"
-import "vue-cropper/dist/index.css"
-import { VueCropper } from "vue-cropper"
-const props = defineProps({
-	url: {
-		type: String,
-		default: ""
-	},
-	ratio: {
-		type: Array,
-		default: () => [1, 1]
-	},
-	isProduct: {
-		type: Boolean,
-		default: false
-	},
-	type: {
-		type: String,
-		default: () => ""
-	}
-})
-const attrs = useAttrs()
-
-const autoCropHeight = computed(() => {
-	let height = 426
-	if (props.type === "cover") height = 375
-	else if (props.type === "apparel") height = 320
-	return height
-})
-
-const bindProps = computed(() => {
-	// :autoCropWidth="isProduct ? undefined : type === 'cover' ? 297 : 242"
-	// 		:autoCropHeight="isProduct ? undefined : autoCropHeight"
-	// if (props.isProduct) {
-	// 	return {
-	// 		autoCropHeight: autoCropHeight.value,
-	// 		autoCropWidth: props.type === "cover" ? 297 : 242
-	// 	}
-	// }
-})
-
-const onChange = (data) => {
-	if (attrs.onChange) {
-		getCropUrl().then((url) => attrs.onChange(url))
-	}
-}
-const cropper = ref(null)
-const imageClipBody = ref(null)
-let injectLabelFrame = 0
-const observer = new ResizeObserver((entries) => {
-	refreshCrop()
-})
-
-const clearCropLabels = (cropperBox) => {
-	if (!cropperBox) return
-	cropperBox.querySelectorAll(".cropper-line-label").forEach((node) => node.remove())
-}
-
-const createCropLabel = ({ text, top, className }) => {
-	const label = document.createElement("div")
-	label.className = `cropper-line-label ${className}`
-	label.textContent = text
-	label.style.top = top
-	label.style.left = className === "label-v" ? "50%" : "0"
-	label.style.transform = className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
-	return label
-}
-
-const cropLabelMap = {
-	cover: [
-		{ text: "crown", top: "2.67%", className: "label-h" },
-		{ text: "hip line", top: "63.47%", className: "label-h" },
-		{ text: "mid-thigh", top: "92.8%", className: "label-h" },
-		{ text: "center", top: "0", className: "label-v" }
-	],
-	mainProductImage: [
-		{ text: "crown", top: "2.67%", className: "label-h" },
-		{ text: "footbase", top: "97.6%", className: "label-h" },
-		{ text: "center", top: "0", className: "label-v" }
-	],
-	sketch: [
-		{ text: "crown", top: "2.67%", className: "label-h" },
-		{ text: "footbase", top: "97.6%", className: "label-h" },
-		{ text: "center", top: "0", className: "label-v" }
-	],
-	apparel: [{ text: "center", top: "0", className: "label-v" }]
-}
-
-const injectCropLabel = () => {
-	const cropperBox = imageClipBody.value?.querySelector(".cropper-view-box")
-
-	if (!cropperBox) return false
-
-	clearCropLabels(cropperBox)
-	;(cropLabelMap[props.type] || []).forEach((config) => {
-		cropperBox.appendChild(createCropLabel(config))
-	})
-
-	return true
-}
-
-const scheduleInjectCropLabel = (retry = 0) => {
-	cancelAnimationFrame(injectLabelFrame)
-	injectLabelFrame = requestAnimationFrame(() => {
-		if (!injectCropLabel() && retry < 10) {
-			scheduleInjectCropLabel(retry + 1)
+	import { ref, useAttrs, onMounted, onBeforeUnmount, computed, nextTick, watch } from "vue"
+	import "vue-cropper/dist/index.css"
+	import { VueCropper } from "vue-cropper"
+	const props = defineProps({
+		url: {
+			type: String,
+			default: ""
+		},
+		ratio: {
+			type: Array,
+			default: () => [1, 1]
+		},
+		isProduct: {
+			type: Boolean,
+			default: false
+		},
+		fixedBox: {
+			type: Boolean,
+			default: true
+		},
+		type: {
+			type: String,
+			default: () => ""
 		}
 	})
-}
+	const attrs = useAttrs()
 
-onMounted(() => {
-	observer.observe(imageClipBody.value)
-	scheduleInjectCropLabel()
-})
-onBeforeUnmount(() => {
-	observer.disconnect()
-	cancelAnimationFrame(injectLabelFrame)
-})
-const rotateLeft = () => {
-	cropper.value.rotateLeft()
-}
-const rotateRight = () => {
-	cropper.value.rotateRight()
-}
-const refreshCrop = () => {
-	cropper.value.refresh()
-}
-const changeScale = (num = 1) => {
-	cropper.value.changeScale(num)
-}
-const getCropUrl = () => {
-	return new Promise((resolve, reject) => {
-		cropper.value.getCropData(resolve)
+	const autoCropHeight = computed(() => {
+		let height = 426
+		if (props.type === "cover") height = 375
+		else if (props.type === "apparel") height = 320
+		return height
 	})
-}
-const getCropBlob = () => {
-	return new Promise((resolve, reject) => {
-		cropper.value.getCropBlob(resolve)
-	})
-}
 
-watch(
-	[() => props.type, () => props.url],
-	async () => {
-		await nextTick()
+	const onChange = (data) => {
+		if (attrs.onChange) {
+			getCropUrl().then((url) => attrs.onChange(url))
+		}
+	}
+	const cropper = ref(null)
+	const imageClipBody = ref(null)
+	let injectLabelFrame = 0
+	const observer = new ResizeObserver((entries) => {
+		refreshCrop()
+	})
+
+	const clearCropLabels = (cropperBox) => {
+		if (!cropperBox) return
+		cropperBox.querySelectorAll(".cropper-line-label").forEach((node) => node.remove())
+	}
+
+	const createCropLabel = ({ text, top, className }) => {
+		const label = document.createElement("div")
+		label.className = `cropper-line-label ${className}`
+		label.textContent = text
+		label.style.top = top
+		label.style.left = className === "label-v" ? "50%" : "0"
+		label.style.transform =
+			className === "label-v" ? "translate(-50%, -50%)" : "translateY(-50%)"
+		return label
+	}
+
+	const cropLabelMap = {
+		cover: [
+			{ text: "crown", top: "2.67%", className: "label-h" },
+			{ text: "hip line", top: "63.47%", className: "label-h" },
+			{ text: "mid-thigh", top: "92.8%", className: "label-h" },
+			{ text: "center", top: "0", className: "label-v" }
+		],
+		mainProductImage: [
+			{ text: "crown", top: "2.67%", className: "label-h" },
+			{ text: "footbase", top: "97.6%", className: "label-h" },
+			{ text: "center", top: "0", className: "label-v" }
+		],
+		sketch: [
+			{ text: "crown", top: "2.67%", className: "label-h" },
+			{ text: "footbase", top: "97.6%", className: "label-h" },
+			{ text: "center", top: "0", className: "label-v" }
+		],
+		apparel: [{ text: "center", top: "0", className: "label-v" }]
+	}
+
+	const injectCropLabel = () => {
+		const cropperBox = imageClipBody.value?.querySelector(".cropper-view-box")
+
+		if (!cropperBox) return false
+
+		clearCropLabels(cropperBox)
+		;(cropLabelMap[props.type] || []).forEach((config) => {
+			cropperBox.appendChild(createCropLabel(config))
+		})
+
+		return true
+	}
+
+	const scheduleInjectCropLabel = (retry = 0) => {
+		cancelAnimationFrame(injectLabelFrame)
+		injectLabelFrame = requestAnimationFrame(() => {
+			if (!injectCropLabel() && retry < 10) {
+				scheduleInjectCropLabel(retry + 1)
+			}
+		})
+	}
+
+	onMounted(() => {
+		observer.observe(imageClipBody.value)
 		scheduleInjectCropLabel()
-	},
-	{ flush: "post" }
-)
+	})
+	onBeforeUnmount(() => {
+		observer.disconnect()
+		cancelAnimationFrame(injectLabelFrame)
+	})
+	const rotateLeft = () => {
+		cropper.value.rotateLeft()
+	}
+	const rotateRight = () => {
+		cropper.value.rotateRight()
+	}
+	const refreshCrop = () => {
+		cropper.value.refresh()
+	}
+	const changeScale = (num = 1) => {
+		cropper.value.changeScale(num)
+	}
+	const getCropUrl = () => {
+		return new Promise((resolve, reject) => {
+			cropper.value.getCropData(resolve)
+		})
+	}
+	const getCropBlob = () => {
+		return new Promise((resolve, reject) => {
+			cropper.value.getCropBlob(resolve)
+		})
+	}
 
-defineExpose({
-	getCropUrl,
-	getCropBlob
-})
+	watch(
+		[() => props.type, () => props.url],
+		async () => {
+			await nextTick()
+			scheduleInjectCropLabel()
+		},
+		{ flush: "post" }
+	)
+
+	defineExpose({
+		getCropUrl,
+		getCropBlob
+	})
 </script>
 <style lang="less" scoped>
-.image-clip {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	// height: 100%;
-	background: #fff;
-	border-radius: calc(2rem * 1.2);
-	padding: calc(1.3rem * 1.2) calc(1.3rem * 1.2) calc(2rem * 1.2);
-	box-sizing: border-box;
-
-	.image-clip-body {
+	.image-clip {
 		width: 100%;
-		height: calc(40rem * 1.2);
-		// height: 53rem;
-		background: yellow;
-		:deep(.cropper-box) {
-			.cropper-box-canvas {
-				background-color: #ffffff;
-
-				img {
-					height: 100%;
-				}
-			}
-		}
-		&.is-cover {
-			:deep(.vue-cropper) {
-				overflow: hidden;
-			}
-			:deep(.cropper-box-canvas) {
-				width: 31.1rem !important;
-				left: 50% !important;
-				transform: translateX(-50%) !important;
-				img {
-					display: none;
-				}
-			}
-		}
-	}
-
-	.clip_opterate {
-		margin: calc(2.7rem * 1.2) auto 0;
-		border-radius: calc(1.6rem * 1.2);
+		height: 100%;
 		display: flex;
-		overflow: hidden;
-		border: 1px solid #e2e2e4;
-		width: calc(24rem * 1.2);
+		flex-direction: column;
+		// height: 100%;
+		background: #fff;
+		border-radius: calc(2rem * 1.2);
+		padding: calc(1.3rem * 1.2) calc(1.3rem * 1.2) calc(2rem * 1.2);
+		box-sizing: border-box;
 
-		.item {
-			width: calc(4.7rem * 1.2);
-			height: calc(4rem * 1.2);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-right: 0.1rem solid #e6e8ea;
-			cursor: pointer;
-
-			.icon_chexiao_sec {
-				transform: rotateY(180deg); /* 垂直镜像翻转 */
-			}
-
-			.operate_icon {
-				font-size: calc(1.8rem * 1.2);
-				color: rgba(102, 102, 102, 1);
-				font-weight: bold;
-			}
-
-			.icon_font {
-				font-size: calc(2.5rem * 1.2);
-				position: relative;
-				top: calc(-0.3rem * 1.2);
-				user-select: none;
-			}
-
-			.icon-shuaxin {
-				font-size: calc(1.4rem * 1.2);
-			}
-
-			&:last-child {
-				border: none;
-			}
-		}
-	}
-
-	&.is-product {
 		.image-clip-body {
-			width: 45.7rem;
-			height: 45.7rem;
-			:deep(.cropper-modal) {
-				background: transparent;
-			}
-			:deep(.vue-cropper .cropper-view-box) {
-				position: relative;
-				overflow: visible !important;
-				/* 原有的蓝色边框（outline）由组件控制，这里不干涉 */
-			}
+			width: 100%;
+			height: calc(40rem * 1.2);
+			// height: 53rem;
+			background: yellow;
+			:deep(.cropper-box) {
+				.cropper-box-canvas {
+					background-color: #ffffff;
 
-			:deep(.vue-cropper .cropper-view-box::after) {
-				content: "";
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				pointer-events: none;
-				z-index: 9; /* 位于图片之上，但在控制点之下 */
-				background-image: none;
-				background-repeat: no-repeat;
+					img {
+						height: 100%;
+					}
+				}
 			}
-		}
-
-		&[data-crop-type="cover"] {
-			.image-clip-body {
-				:deep(.vue-cropper .cropper-view-box::after) {
-					background-image:
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
-						linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
-					background-repeat: repeat-x, repeat-x, repeat-x, repeat-y;
-					background-size:
-						8px 1px,
-						8px 1px,
-						8px 1px,
-						1px 8px;
-					background-position:
-						0 2.67%,
-						0 63.47%,
-						0 92.8%,
-						50% 0;
+			&.is-cover {
+				:deep(.vue-cropper) {
+					overflow: hidden;
+				}
+				:deep(.cropper-box-canvas) {
+					width: 31.1rem !important;
+					left: 50% !important;
+					transform: translateX(-50%) !important;
+					img {
+						display: none;
+					}
 				}
 			}
 		}
 
-		&[data-crop-type="mainProductImage"],
-		&[data-crop-type="sketch"] {
-			.image-clip-body {
-				:deep(.vue-cropper .cropper-view-box::after) {
-					background-image:
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
-						linear-gradient(to right, #4ba5ff 50%, transparent 50%),
-						linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
-					background-repeat: repeat-x, repeat-x, repeat-y;
-					background-size:
-						8px 1px,
-						8px 1px,
-						1px 8px;
-					background-position:
-						0 2.67%,
-						0 97.6%,
-						50% 0;
+		.clip_opterate {
+			margin: calc(2.7rem * 1.2) auto 0;
+			border-radius: calc(1.6rem * 1.2);
+			display: flex;
+			overflow: hidden;
+			border: 1px solid #e2e2e4;
+			width: calc(24rem * 1.2);
+
+			.item {
+				width: calc(4.7rem * 1.2);
+				height: calc(4rem * 1.2);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-right: 0.1rem solid #e6e8ea;
+				cursor: pointer;
+
+				.icon_chexiao_sec {
+					transform: rotateY(180deg); /* 垂直镜像翻转 */
+				}
+
+				.operate_icon {
+					font-size: calc(1.8rem * 1.2);
+					color: rgba(102, 102, 102, 1);
+					font-weight: bold;
+				}
+
+				.icon_font {
+					font-size: calc(2.5rem * 1.2);
+					position: relative;
+					top: calc(-0.3rem * 1.2);
+					user-select: none;
+				}
+
+				.icon-shuaxin {
+					font-size: calc(1.4rem * 1.2);
+				}
+
+				&:last-child {
+					border: none;
 				}
 			}
 		}
 
-		&[data-crop-type="apparel"] {
+		&.is-product {
 			.image-clip-body {
+				width: 45.7rem;
+				height: 45.7rem;
+				:deep(.cropper-modal) {
+					background: transparent;
+				}
+				:deep(.vue-cropper .cropper-view-box) {
+					position: relative;
+					overflow: visible !important;
+					/* 原有的蓝色边框（outline）由组件控制，这里不干涉 */
+				}
+
 				:deep(.vue-cropper .cropper-view-box::after) {
-					background-image: linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
-					background-repeat: repeat-y;
-					background-size: 1px 8px;
-					background-position: 50% 0;
+					content: "";
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					pointer-events: none;
+					z-index: 9; /* 位于图片之上，但在控制点之下 */
+					background-image: none;
+					background-repeat: no-repeat;
+				}
+			}
+
+			&[data-crop-type="cover"] {
+				.image-clip-body {
+					:deep(.vue-cropper .cropper-view-box::after) {
+						background-image:
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+						background-repeat: repeat-x, repeat-x, repeat-x, repeat-y;
+						background-size:
+							8px 1px,
+							8px 1px,
+							8px 1px,
+							1px 8px;
+						background-position:
+							0 2.67%,
+							0 63.47%,
+							0 92.8%,
+							50% 0;
+					}
+				}
+			}
+
+			&[data-crop-type="mainProductImage"],
+			&[data-crop-type="sketch"] {
+				.image-clip-body {
+					:deep(.vue-cropper .cropper-view-box::after) {
+						background-image:
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to right, #4ba5ff 50%, transparent 50%),
+							linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+						background-repeat: repeat-x, repeat-x, repeat-y;
+						background-size:
+							8px 1px,
+							8px 1px,
+							1px 8px;
+						background-position:
+							0 2.67%,
+							0 97.6%,
+							50% 0;
+					}
+				}
+			}
+
+			&[data-crop-type="apparel"] {
+				.image-clip-body {
+					:deep(.vue-cropper .cropper-view-box::after) {
+						background-image: linear-gradient(to bottom, #4ba5ff 50%, transparent 50%);
+						background-repeat: repeat-y;
+						background-size: 1px 8px;
+						background-position: 50% 0;
+					}
 				}
 			}
 		}
 	}
-}
 </style>
 
 <style lang="less">
-.cropper-line-label {
-	position: absolute;
-	color: #4ba5ff; /* 统一颜色 */
-	font-size: 11px;
-	font-weight: bold;
-	background: rgba(255, 255, 255); /* 浅色背景确保在深色图片上可见 */
-	// padding: 0 4px;
-	border-radius: 2px;
-	white-space: nowrap;
-	pointer-events: none;
-	z-index: 10;
-	line-height: 1.2;
-}
+	.cropper-line-label {
+		position: absolute;
+		color: #4ba5ff; /* 统一颜色 */
+		font-size: 11px;
+		font-weight: bold;
+		background: rgba(255, 255, 255); /* 浅色背景确保在深色图片上可见 */
+		// padding: 0 4px;
+		border-radius: 2px;
+		white-space: nowrap;
+		pointer-events: none;
+		z-index: 10;
+		line-height: 1.2;
+	}
 
-/* 水平线名称：放在线段上方 2px */
-.label-h {
-	transform: translateY(-100%);
-	margin-top: -2px;
-	left: 4px;
-}
+	/* 水平线名称：放在线段上方 2px */
+	.label-h {
+		transform: translateY(-100%);
+		margin-top: -2px;
+		left: 4px;
+	}
 
-/* 垂直线名称：放在裁剪框顶部边缘上方 */
-.label-v {
-	transform: translateX(-50%);
-	top: -20px;
-	left: 50%;
-}
+	/* 垂直线名称：放在裁剪框顶部边缘上方 */
+	.label-v {
+		transform: translateX(-50%);
+		top: -20px;
+		left: 50%;
+	}
 </style>
diff --git a/src/views/SellerDashboard/BrandProfile/index.vue b/src/views/SellerDashboard/BrandProfile/index.vue
index aed75777..cfc73960 100644
--- a/src/views/SellerDashboard/BrandProfile/index.vue
+++ b/src/views/SellerDashboard/BrandProfile/index.vue
@@ -25,8 +25,8 @@
 	<div class="and-profile-footer">
 		<template v-if="isEdit">
 			<div class="btns">
-				<button class="cancel" @click="onCancel">Cancel</button>
-				<button class="submit" @click="onSubmit">Save Change</button>
+				<button class="cancel" @click="onCancel()">Cancel</button>
+				<button class="submit" @click="onSubmit()">Save Change</button>
 			</div>
 			<p class="tip">Changes will be reflected on your Stylish Parade brand page.</p>
 		</template>
@@ -47,6 +47,7 @@
 	import ImageClipDialog from "./image-clip-dialog.vue"
 	import { useStore } from "vuex"
 	const store = useStore()
+	store.dispatch("seller/get_designerInfo")
 	const designerInfo = computed(() => store.state.seller.designerInfo)
 	const avatar = computed(() => designerInfo.value.avatar)
 	const banner = computed(() => designerInfo.value.brandBanner)
@@ -69,13 +70,25 @@
 		input.click()
 	}
 
+	const uploadFile = async (file) => {
+		const formData = new FormData()
+		formData.append("file", file)
+		return Https.axiosPost(Https.httpUrls.sellerUploadFile, formData, {
+			headers: {
+				"Content-Type": "multipart/form-data"
+			}
+		})
+	}
+
 	const onChangeBanner = () => {
 		uploadImg(({ url }) => {
 			imageClipDialogRef.value.open(
 				url,
-				(file) => {
-					// banner.value = URL.createObjectURL(file)
-					console.log(URL.createObjectURL(file))
+				async (file) => {
+					store.commit("set_loading", true)
+					const res = await uploadFile(file)
+					onSubmit({ brandBanner: res })
+					store.commit("set_loading", false)
 				},
 				{ ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" }
 			)
@@ -85,9 +98,11 @@
 		uploadImg(({ url }) => {
 			imageClipDialogRef.value.open(
 				url,
-				(file) => {
-					// avatar.value = URL.createObjectURL(file)
-					console.log(URL.createObjectURL(file))
+				async (file) => {
+					store.commit("set_loading", true)
+					const res = await uploadFile(file)
+					onSubmit({ avatar: res })
+					store.commit("set_loading", false)
 				},
 				{ ratio: [1, 1], isPreview: true, title: "Crop Avatar" }
 			)
@@ -99,12 +114,16 @@
 	const onCancel = () => {
 		isEdit.value = false
 	}
-	const onSubmit = async () => {
-		const res = await brandInfoRef.value.submit()
+	const onSubmit = async (value = null) => {
+		const res = value ? value : await brandInfoRef.value.submit()
 		const data = {
 			...designerInfo.value,
-			...res,
-			socialLinks: JSON.stringify(res.socialLinks)
+			...res
+		}
+		try {
+			data.socialLinks = JSON.stringify(data.socialLinks)
+		} catch (error) {
+			data.socialLinks = JSON.stringify([])
 		}
 		Https.axiosPut(Https.httpUrls.updateDesignerInfo, data).then((res) => {
 			isEdit.value = false
@@ -123,6 +142,7 @@
 			margin-bottom: 6rem;
 			> .bg {
 				position: relative;
+				min-height: 15rem;
 				> img {
 					width: 100%;
 					height: auto;
diff --git a/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue b/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
index 1273fd1e..c746dbe7 100644
--- a/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
@@ -20,85 +20,85 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue"
+	import { computed } from "vue"
 
-interface Option {
-	name: string | number
-	value: string | number | boolean
-	key: string
-	optype: boolean
-}
-
-const props = defineProps<{
-	modelValue: string | number | boolean | Array<string | number | boolean> | null
-	options: Option[] // 按钮选项数组
-	multiple?: boolean // 是否支持多选，默认为 false
-}>()
-
-const emit = defineEmits<{
-	(e: "update:modelValue", value: any): void
-}>()
-
-const multiple = props.multiple === true
-
-const selectedValues = computed(() => {
-	if (!multiple) {
-		return typeof props.modelValue === 'undefined' || props.modelValue === null
-			? []
-			: [props.modelValue]
+	interface Option {
+		name: string | number
+		value: string | number | boolean
+		key: string
+		optype: boolean
 	}
 
-	return Array.isArray(props.modelValue) ? props.modelValue : []
-})
+	const props = defineProps<{
+		modelValue: string | number | boolean | Array<string | number | boolean> | null
+		options: Option[] // 按钮选项数组
+		multiple?: boolean // 是否支持多选，默认为 false
+	}>()
 
-const selectOption = (value: any) => {
-	if (multiple) {
-		const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-		const index = current.indexOf(value)
-		if (index >= 0) {
-			current.splice(index, 1)
-		} else {
-			current.push(value.toLocaleLowerCase)
+	const emit = defineEmits<{
+		(e: "update:modelValue", value: any): void
+	}>()
+
+	const multiple = props.multiple === true
+
+	const selectedValues = computed(() => {
+		if (!multiple) {
+			return typeof props.modelValue === "undefined" || props.modelValue === null
+				? []
+				: [props.modelValue]
 		}
-		emit("update:modelValue", current)
-		return
-	}
 
-	if (props.modelValue !== value) {
-		emit("update:modelValue", value)
+		return Array.isArray(props.modelValue) ? props.modelValue : []
+	})
+
+	const selectOption = (value: any) => {
+		if (multiple) {
+			const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+			const index = current.indexOf(value)
+			if (index >= 0) {
+				current.splice(index, 1)
+			} else {
+				current.push(value.toLocaleLowerCase)
+			}
+			emit("update:modelValue", current)
+			return
+		}
+
+		if (props.modelValue !== value) {
+			emit("update:modelValue", value)
+		}
 	}
-}
 </script>
 
 <style lang="less" scoped>
-.radio-button-group {
-	display: flex;
-	gap: 8px;
-	flex-wrap: wrap;
-}
+	.radio-button-group {
+		display: flex;
+		gap: 8px;
+		flex-wrap: wrap;
+	}
 
-.radio-button {
-	border: 1px solid #d9d9d9;
-	height: 3.2rem;
-	min-width: 8rem;
-	padding: 0 1.7rem;
-	color: #000;
-	cursor: pointer;
-	border-radius: 2rem;
-	outline: none;
-	background-color: #fff;
-	font-size: 1.2rem;
-	transition: all 0.2s ease;
-}
+	.radio-button {
+		border: 1px solid #d9d9d9;
+		height: 3.2rem;
+		min-width: 8rem;
+		padding: 0 1.7rem;
+		color: #000;
+		cursor: pointer;
+		border-radius: 2rem;
+		outline: none;
+		background-color: #fff;
+		font-size: 1.2rem;
+		transition: all 0.2s ease;
+	}
 
-.radio-button:hover {
-	border-color: #000;
-}
+	.radio-button:hover {
+		border-color: #000;
+	}
 
-.radio-button.is-active {
-	color: #fff;
-	background-color: #000;
-	border-color: #000;
-	font-family: pingfang_medium;
-}
+	.radio-button.is-active {
+		color: #fff;
+		background-color: #000;
+		border-color: #000;
+		font-family: pingfang_medium;
+	}
 </style>
diff --git a/src/views/SellerDashboard/MyListings/EditDetail/index.vue b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
index 8baf9caa..5fc83dda 100644
--- a/src/views/SellerDashboard/MyListings/EditDetail/index.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
@@ -198,7 +198,11 @@
 							<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
 						</div>
 						<div class="form-item-value no-border">
-							<Radio multiple :options="categoryOptions" v-model="currentListing.category" />
+							<Radio
+								multiple
+								:options="categoryOptions"
+								v-model="currentListing.category"
+							/>
 						</div>
 					</div>
 					<div class="license-note flex align-center">
@@ -234,725 +238,730 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from "vue"
-import { useRouter } from "vue-router"
-import { useI18n } from "vue-i18n"
-import { message } from "ant-design-vue"
-import SellerHeader from "../../seller-header.vue"
-import Radio from "./components/Radio.vue"
-import ImageClipDialog from "../../BrandProfile/image-clip-dialog.vue"
-import { useStore } from "vuex"
-import { fetchSketchDetail, uploadFile, fetchListingDetailById, fetchUpdateListing } from "./api"
+	import { computed, ref, watch, onMounted } from "vue"
+	import { useRouter } from "vue-router"
+	import { useI18n } from "vue-i18n"
+	import { message } from "ant-design-vue"
+	import SellerHeader from "../../seller-header.vue"
+	import Radio from "./components/Radio.vue"
+	import ImageClipDialog from "../../BrandProfile/image-clip-dialog.vue"
+	import { useStore } from "vuex"
+	import {
+		fetchSketchDetail,
+		uploadFile,
+		fetchListingDetailById,
+		fetchUpdateListing
+	} from "./api"
 
-const ROUTER = useRouter()
-const { t } = useI18n()
+	const ROUTER = useRouter()
+	const { t } = useI18n()
 
-const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)
+	const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)
 
-defineOptions({
-	name: "EditDetail"
-})
+	defineOptions({
+		name: "EditDetail"
+	})
 
-const STORE = useStore()
+	const STORE = useStore()
 
-type CategoryOption = {
-	label: string
-	value: string
-}
-
-type ListingItem = {
-	designItemId: number | string | null
-	sketch: string | null
-	mainProductImage: string
-	cover: string
-	productImage: string[]
-	apparelSketch: string[]
-	productName: string
-	price: string
-	desc: string
-	gender: string
-	category: string[]
-	prodImageList: Array<{
-		url: string
-		selected?: boolean
-	}>
-	sketchList: Array<{ url: string | null }>
-}
-type StatusType = "draft" | "publish"
-
-const createListingItem = (
-	sketch: string | null = null,
-	designItemId: number | string | null = null
-): ListingItem => ({
-	designItemId,
-	sketch,
-	mainProductImage: "",
-	cover: "",
-	productImage: [],
-	apparelSketch: [],
-	productName: "",
-	price: "",
-	desc: "",
-	gender: "FEMALE",
-	category: null,
-	prodImageList: [],
-	sketchList: []
-})
-
-const topImageList = ["sketch", "mainProductImage", "cover"] as const
-const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
-	sketch: "SellerListEdit.sketch",
-	mainProductImage: "SellerListEdit.mainProductImage",
-	cover: "SellerListEdit.cover"
-}
-
-const genderOptions = STORE.state.UserHabit?.sex.value || []
-
-const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
-	MALE: STORE.state.UserHabit?.MalePosition || [],
-	FEMALE: STORE.state.UserHabit?.FemalePosition || []
-}
-
-const currentPage = ref(1)
-const currentIndex = computed(() => currentPage.value - 1)
-
-const itemId = ref("")
-const selectList = ref<ListingItem[]>([createListingItem()])
-
-const prodImgList = computed(() => currentListing.value.prodImageList || [])
-
-const categoryOptions = computed(() => {
-	const gender = selectList.value[currentIndex.value].gender
-	return fallbackCategoryOptions[gender] || []
-})
-
-const currentListing = computed(() => selectList.value[currentIndex.value])
-
-const previewImageMap = computed(() => ({
-	sketch: currentListing.value.sketch,
-	mainProductImage: currentListing.value.mainProductImage,
-	cover: currentListing.value.cover
-}))
-
-const firstSelectedIndex = ref(null) //显示main标签的图片索引
-const selectedProdImgs = computed(() => {
-	return prodImgList.value.filter((item) => item.selected).length
-})
-
-const handleSelectProdImg = (index: number) => {
-	const target = prodImgList.value[index]
-
-	const willSelect = !target.selected
-
-	target.selected = willSelect
-
-	if (willSelect && !currentListing.value.mainProductImage) {
-		currentListing.value.mainProductImage = target.url
-		firstSelectedIndex.value = index
+	type CategoryOption = {
+		label: string
+		value: string
 	}
 
-	if (!willSelect && currentListing.value.mainProductImage === target.url) {
-		firstSelectedIndex.value = null
-		currentListing.value.mainProductImage = ""
+	type ListingItem = {
+		designItemId: number | string | null
+		sketch: string | null
+		mainProductImage: string
+		cover: string
+		productImage: string[]
+		apparelSketch: string[]
+		productName: string
+		price: string
+		desc: string
+		gender: string
+		category: string[]
+		prodImageList: Array<{
+			url: string
+			selected?: boolean
+		}>
+		sketchList: Array<{ url: string | null }>
 	}
-}
+	type StatusType = "draft" | "publish"
 
-const cropType = ref("")
-const handleClickCrop = (data, type, list = []) => {
-	// 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 = {
-		sketch: "Crop Sketch",
-		mainProductImage: "Crop Main Product Image",
-		cover: "Crop Cover",
-		apparel: "Crop Apparel Sketch"
-	}
-	const ratio = type === "cover" ? [4, 5] : [9, 16]
-	cropType.value = type
-	imageClipDialogRef.value.open(
-		data,
-		(file) => {
-			// console.log(file)
-			uploadFile(file).then((res) => {
-				console.log(res)
-				selectList.value[currentIndex.value][type] = res
-			})
-		},
-		{ ratio, isPreview: true, title: titleList[type], isProduct: true },
-		origin
-	)
-}
+	const createListingItem = (
+		sketch: string | null = null,
+		designItemId: number | string | null = null
+	): ListingItem => ({
+		designItemId,
+		sketch,
+		mainProductImage: "",
+		cover: "",
+		productImage: [],
+		apparelSketch: [],
+		productName: "",
+		price: "",
+		desc: "",
+		gender: "FEMALE",
+		category: null,
+		prodImageList: [],
+		sketchList: []
+	})
 
-const hasValue = (value: unknown) =>
-	value !== null && value !== undefined && String(value).trim() !== ""
-
-const getMissingRequiredField = (item: ListingItem) => {
-	const cover = item.cover || item.mainProductImage || item.sketch
-	const requiredFields = [
-		{ value: item.sketch, label: t("SellerListEdit.sketch") },
-		{ value: cover, label: t("SellerListEdit.cover") },
-		{ value: item.productName, label: t("SellerListEdit.productName") },
-		{ value: item.price, label: t("SellerListEdit.price") },
-		{ value: item.desc, label: t("SellerListEdit.productDescription") },
-		{ value: item.gender, label: t("SellerListEdit.designFor") },
-		{ value: item.category, label: t("SellerListEdit.productCategory") }
-	]
-	const missingField = requiredFields.find((field) => !hasValue(field.value))
-	if (missingField) return missingField.label
-
-	const missingSketchIndex = item.sketchList.findIndex((sketch) => !hasValue(sketch.url))
-	if (item.sketchList.length === 0 || missingSketchIndex !== -1) {
-		return `${t("SellerListEdit.apparelSketchTitle").trim()} ${
-			missingSketchIndex === -1 ? 1 : missingSketchIndex + 1
-		}`
+	const topImageList = ["sketch", "mainProductImage", "cover"] as const
+	const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
+		sketch: "SellerListEdit.sketch",
+		mainProductImage: "SellerListEdit.mainProductImage",
+		cover: "SellerListEdit.cover"
 	}
 
-	return ""
-}
+	const genderOptions = STORE.state.UserHabit?.sex.value || []
 
-const validatePublishRequired = () => {
-	for (let index = 0; index < selectList.value.length; index += 1) {
-		const field = getMissingRequiredField(selectList.value[index])
-		if (!field) continue
-
-		currentPage.value = index + 1
-		message.warning(
-			t(
-				selectList.value.length > 1
-					? "SellerListEdit.requiredFieldTipsWithPage"
-					: "SellerListEdit.requiredFieldTips",
-				{ index: index + 1, field }
-			)
-		)
-		return false
+	const fallbackCategoryOptions: Record<string, CategoryOption[]> = {
+		MALE: STORE.state.UserHabit?.MalePosition || [],
+		FEMALE: STORE.state.UserHabit?.FemalePosition || []
 	}
 
-	return true
-}
+	const currentPage = ref(1)
+	const currentIndex = computed(() => currentPage.value - 1)
 
-const handleSaveForm = async (type: StatusType) => {
-	const paramsList = []
-	selectList.value.forEach((item) => {
-		const params = {
-			id: null,
-			title: selectList.value[currentIndex.value].productName,
-			description: selectList.value[currentIndex.value].desc,
-			price: selectList.value[currentIndex.value].price,
-			status: type === "draft" ? 0 : 1,
-			images: [],
-			designFor: selectList.value[currentIndex.value].gender.toLowerCase,
-			productCategory: selectList.value[currentIndex.value].category
+	const itemId = ref("")
+	const selectList = ref<ListingItem[]>([createListingItem()])
+
+	const prodImgList = computed(() => currentListing.value.prodImageList || [])
+
+	const categoryOptions = computed(() => {
+		const gender = selectList.value[currentIndex.value].gender
+		return fallbackCategoryOptions[gender] || []
+	})
+
+	const currentListing = computed(() => selectList.value[currentIndex.value])
+
+	const previewImageMap = computed(() => ({
+		sketch: currentListing.value.sketch,
+		mainProductImage: currentListing.value.mainProductImage,
+		cover: currentListing.value.cover
+	}))
+
+	const firstSelectedIndex = ref(null) //显示main标签的图片索引
+	const selectedProdImgs = computed(() => {
+		return prodImgList.value.filter((item) => item.selected).length
+	})
+
+	const handleSelectProdImg = (index: number) => {
+		const target = prodImgList.value[index]
+
+		const willSelect = !target.selected
+
+		target.selected = willSelect
+
+		if (willSelect && !currentListing.value.mainProductImage) {
+			currentListing.value.mainProductImage = target.url
+			firstSelectedIndex.value = index
 		}
-		//
-		topImageList.forEach((el) => {
-			params.images.push({
-				category: el,
-				imageUrl: selectList.value[currentIndex.value][el],
-				isSelected: 1
-			})
-		})
-		selectList.value[currentIndex.value].prodImageList.forEach((item) => {
-			if (item.selected) {
-				params.images.push({
-					category: "main_product",
-					imageUrl: item.url,
-					isSelected: Number(item.selected)
-				})
-			}
-		})
-		selectList.value[currentIndex.value].sketchList.forEach((item) => {
-			params.images.push({
-				category: "apparel",
-				imageUrl: item.url,
-				isSelected: 1
-			})
-		})
-		paramsList.push(params)
-	})
-	console.log(paramsList)
-	fetchUpdateListing(paramsList)
-}
-const handleClickMenu = async (status: StatusType) => {
-	if (status === "publish" && !validatePublishRequired()) return
 
-	await handleSaveForm(status)
-	if (status === "draft") {
-		// save draft logic
-		// console.log("Saving draft...", currentListing.value)
-		ROUTER.push({ name: "Status", params: { status: "draft" } })
-	} else if (status === "publish") {
-		// publish logic
-		// console.log("Publishing...", currentListing.value)
-		ROUTER.push({ name: "Status", params: { status: "publish" } })
+		if (!willSelect && currentListing.value.mainProductImage === target.url) {
+			firstSelectedIndex.value = null
+			currentListing.value.mainProductImage = ""
+		}
 	}
-}
 
-const handleFetchItemDetial = (list) => {
-	fetchSketchDetail(list).then((res) => {
-		console.log(res)
-		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
-			}))
+	const cropType = ref("")
+	const handleClickCrop = (data, type, list = []) => {
+		// 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 = {
+			sketch: "Crop Sketch",
+			mainProductImage: "Crop Main Product Image",
+			cover: "Crop Cover",
+			apparel: "Crop Apparel Sketch"
+		}
+		const ratio = type === "cover" ? [4, 5] : [9, 16]
+		cropType.value = type
+		imageClipDialogRef.value.open(
+			data,
+			(file) => {
+				// console.log(file)
+				uploadFile(file).then((res) => {
+					console.log(res)
+					selectList.value[currentIndex.value][type] = res
+				})
+			},
+			{ ratio, isPreview: true, title: titleList[type], isProduct: true },
+			origin
+		)
+	}
+
+	const hasValue = (value: unknown) =>
+		value !== null && value !== undefined && String(value).trim() !== ""
+
+	const getMissingRequiredField = (item: ListingItem) => {
+		const cover = item.cover || item.mainProductImage || item.sketch
+		const requiredFields = [
+			{ value: item.sketch, label: t("SellerListEdit.sketch") },
+			{ value: cover, label: t("SellerListEdit.cover") },
+			{ value: item.productName, label: t("SellerListEdit.productName") },
+			{ value: item.price, label: t("SellerListEdit.price") },
+			{ value: item.desc, label: t("SellerListEdit.productDescription") },
+			{ value: item.gender, label: t("SellerListEdit.designFor") },
+			{ value: item.category, label: t("SellerListEdit.productCategory") }
+		]
+		const missingField = requiredFields.find((field) => !hasValue(field.value))
+		if (missingField) return missingField.label
+
+		const missingSketchIndex = item.sketchList.findIndex((sketch) => !hasValue(sketch.url))
+		if (item.sketchList.length === 0 || missingSketchIndex !== -1) {
+			return `${t("SellerListEdit.apparelSketchTitle").trim()} ${
+				missingSketchIndex === -1 ? 1 : missingSketchIndex + 1
+			}`
+		}
+
+		return ""
+	}
+
+	const validatePublishRequired = () => {
+		for (let index = 0; index < selectList.value.length; index += 1) {
+			const field = getMissingRequiredField(selectList.value[index])
+			if (!field) continue
+
+			currentPage.value = index + 1
+			message.warning(
+				t(
+					selectList.value.length > 1
+						? "SellerListEdit.requiredFieldTipsWithPage"
+						: "SellerListEdit.requiredFieldTips",
+					{ index: index + 1, field }
+				)
+			)
+			return false
+		}
+
+		return true
+	}
+
+	const handleSaveForm = async (type: StatusType) => {
+		const paramsList = []
+		selectList.value.forEach((item) => {
+			const params = {
+				id: null,
+				title: selectList.value[currentIndex.value].productName,
+				description: selectList.value[currentIndex.value].desc,
+				price: selectList.value[currentIndex.value].price,
+				status: type === "draft" ? 0 : 1,
+				images: [],
+				designFor: selectList.value[currentIndex.value].gender.toLowerCase,
+				productCategory: selectList.value[currentIndex.value].category
+			}
+			//
+			topImageList.forEach((el) => {
+				params.images.push({
+					category: el,
+					imageUrl: selectList.value[currentIndex.value][el],
+					isSelected: 1
+				})
+			})
+			selectList.value[currentIndex.value].prodImageList.forEach((item) => {
+				if (item.selected) {
+					params.images.push({
+						category: "main_product",
+						imageUrl: item.url,
+						isSelected: Number(item.selected)
+					})
+				}
+			})
+			selectList.value[currentIndex.value].sketchList.forEach((item) => {
+				params.images.push({
+					category: "apparel",
+					imageUrl: item.url,
+					isSelected: 1
+				})
+			})
+			paramsList.push(params)
 		})
+		console.log(paramsList)
+		fetchUpdateListing(paramsList)
+	}
+	const handleClickMenu = async (status: StatusType) => {
+		if (status === "publish" && !validatePublishRequired()) return
+
+		await handleSaveForm(status)
+		if (status === "draft") {
+			// save draft logic
+			// console.log("Saving draft...", currentListing.value)
+			ROUTER.push({ name: "Status", params: { status: "draft" } })
+		} else if (status === "publish") {
+			// publish logic
+			// console.log("Publishing...", currentListing.value)
+			ROUTER.push({ name: "Status", params: { status: "publish" } })
+		}
+	}
+
+	const handleFetchItemDetial = (list) => {
+		fetchSketchDetail(list).then((res) => {
+			console.log(res)
+			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
+				}))
+			})
+		})
+		// fetchListingDetailById(itemId.value).then(res => {
+		// 	console.log('iddetail',res)
+		// })
+	}
+
+	onMounted(() => {
+		const designItemIds = history.state?.designItemIds || []
+		itemId.value = history.state?.id || ""
+		if (!designItemIds.length) return
+
+		currentPage.value = 1
+		selectList.value = designItemIds.map((item) =>
+			createListingItem(item.designOutfitUrl, item.designItemId)
+		)
+		const list = designItemIds.map((el) => el.designItemId)
+		console.log("list", list.length, list)
+		handleFetchItemDetial(list)
 	})
-	// fetchListingDetailById(itemId.value).then(res => {
-	// 	console.log('iddetail',res)
-	// })
-}
-
-onMounted(() => {
-	const designItemIds = history.state?.designItemIds || []
-	itemId.value = history.state?.id || ""
-	if (!designItemIds.length) return
-
-	currentPage.value = 1
-	selectList.value = designItemIds.map((item) =>
-		createListingItem(item.designOutfitUrl, item.designItemId)
-	)
-	const list = designItemIds.map((el) => el.designItemId)
-	console.log("list", list.length, list)
-	handleFetchItemDetial(list)
-})
 </script>
 
 <style lang="less" scoped>
-.c-svg {
-	width: initial;
-	height: initial;
-}
-
-.edit-detail-wrapper {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	min-height: 0;
-	margin-top: -1rem;
-	overflow: hidden;
-
-	&::-webkit-scrollbar {
-		display: none;
+	.c-svg {
+		width: initial;
+		height: initial;
 	}
 
-	.menu-btn {
-		height: 6rem;
-		border: 0.15rem solid #000000;
-		border-radius: 4rem;
-		text-align: center;
-		line-height: 6rem;
-		padding: 0 2rem;
-		font-size: 1.6rem;
-		column-gap: 0.8rem;
-		cursor: pointer;
-		transition: all 0.25s ease;
+	.edit-detail-wrapper {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
+		margin-top: -1rem;
+		overflow: hidden;
 
-		&:hover {
-			background: #000;
-			color: #fff;
+		&::-webkit-scrollbar {
+			display: none;
 		}
 
-		// &.publish:hover {
-		// 	background: #fff;
-		// 	color: #000;
-		// }
-	}
+		.menu-btn {
+			height: 6rem;
+			border: 0.15rem solid #000000;
+			border-radius: 4rem;
+			text-align: center;
+			line-height: 6rem;
+			padding: 0 2rem;
+			font-size: 1.6rem;
+			column-gap: 0.8rem;
+			cursor: pointer;
+			transition: all 0.25s ease;
 
-	.edit-detail-header {
-		margin-bottom: 2rem;
-	}
+			&:hover {
+				background: #000;
+				color: #fff;
+			}
 
-	.operate-menu {
-		column-gap: 2rem;
+			// &.publish:hover {
+			// 	background: #fff;
+			// 	color: #000;
+			// }
+		}
 
-		// .publish {
-		// background-color: #000000;
-		// color: #ffffff;
-		// }
-	}
-}
+		.edit-detail-header {
+			margin-bottom: 2rem;
+		}
 
-.edit-detail-content {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	justify-content: space-between;
+		.operate-menu {
+			column-gap: 2rem;
 
-	&::-webkit-scrollbar {
-		width: 0;
-		height: 0;
-	}
-
-	.required {
-		&::after {
-			content: "*";
-			color: #df2b2c;
-			margin-left: 0.4rem;
+			// .publish {
+			// background-color: #000000;
+			// color: #ffffff;
+			// }
 		}
 	}
 
-	.left {
-		// flex: 1;
-		// min-width: 0;
+	.edit-detail-content {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		justify-content: space-between;
 
-		.main-image-container {
-			// max-width: 80.2rem;
-			column-gap: 3.5rem;
-			.main-image-item {
-				flex-shrink: 0;
+		&::-webkit-scrollbar {
+			width: 0;
+			height: 0;
+		}
+
+		.required {
+			&::after {
+				content: "*";
+				color: #df2b2c;
+				margin-left: 0.4rem;
+			}
+		}
+
+		.left {
+			// flex: 1;
+			// min-width: 0;
+
+			.main-image-container {
+				// max-width: 80.2rem;
+				column-gap: 3.5rem;
+				.main-image-item {
+					flex-shrink: 0;
+
+					.title {
+						font-size: 1.4rem;
+						margin-bottom: 0.8rem;
+						text-align: center;
+					}
+
+					.sketch-item {
+						width: 11.6rem;
+						height: 20.4rem;
+						border: 0.15rem solid #d1d1d1;
+						border-radius: 1rem;
+						position: relative;
+						background-color: #f6f6f6;
+						overflow: hidden;
+
+						&.cover {
+							width: 16.2rem;
+							background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='11' ry='11' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='8%2c 5' stroke-linecap='square'/%3e%3c/svg%3e");
+							border: none;
+						}
+
+						.crop-tool {
+							position: absolute;
+							top: 0.8rem;
+							right: 0.8rem;
+							width: 2rem;
+							height: 2rem;
+							border-radius: 50%;
+							background-color: #000000;
+							z-index: 1;
+							cursor: pointer;
+						}
+
+						.sketch-img {
+							height: 100%;
+							&.sketch {
+								height: initial;
+								width: 100%;
+							}
+						}
+
+						.trigger {
+							cursor: pointer;
+							height: 100%;
+							padding: 6rem 2rem 0;
+							&,
+							.cover-trigger {
+								row-gap: 1.2rem;
+							}
+
+							.placeholder {
+								width: 2.4rem;
+								height: 2.4rem;
+								border-radius: 0.6rem;
+								background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
+							}
+
+							.trigger-tips {
+								font-size: 1.2rem;
+								text-align: center;
+								color: #585858;
+								line-height: 1.3;
+							}
+						}
+					}
+				}
+			}
+
+			.product-image-list-container {
+				margin-top: 3rem;
+
+				.title {
+					font-size: 1.4rem;
+					margin-bottom: 1.2rem;
+
+					.main-title {
+						font-weight: 400;
+						font-style: bold;
+					}
+
+					.sub-title {
+						font-size: 1.2rem;
+						color: #999;
+					}
+
+					.title-right {
+						color: #585858;
+						font-size: 1.4rem;
+					}
+				}
+
+				.product-image-list {
+					overflow-x: auto;
+					overflow-y: hidden;
+					column-gap: 0.8rem;
+					max-width: 80.2rem;
+					padding-bottom: 1.2rem;
+
+					&::-webkit-scrollbar {
+						height: 0.8rem;
+					}
+
+					&::-webkit-scrollbar-track {
+						background: #d9d9d9;
+						border-radius: 0.8rem;
+					}
+
+					&::-webkit-scrollbar-thumb {
+						background: #000000;
+						border-radius: 0.8rem;
+					}
+
+					.product-image-item {
+						width: 11.6rem;
+						height: 20.6rem;
+						border-radius: 1rem;
+						border: 0.15rem solid #c7c7c7;
+						position: relative;
+						cursor: pointer;
+						overflow: hidden;
+						flex-shrink: 0;
+
+						&::after {
+							position: absolute;
+							top: 0;
+							left: 0;
+							width: 100%;
+							height: 100%;
+							content: "";
+							background-color: #fcfcfc;
+							opacity: 0.7;
+							border-radius: 1rem;
+						}
+
+						&.selected {
+							border-color: #000;
+
+							&::after {
+								display: none;
+							}
+						}
+
+						.checked {
+							width: 2rem;
+							height: 2rem;
+							position: absolute;
+							top: 0.8rem;
+							right: 0.8rem;
+							z-index: 1;
+						}
+
+						.img-src {
+							height: 100%;
+						}
+
+						.main-pic {
+							position: absolute;
+							height: 2.4rem;
+							line-height: 2.4rem;
+							left: 0.8rem;
+							right: 0.8rem;
+							bottom: 0.8rem;
+							z-index: 1;
+							background: rgba(0, 0, 0, 0.8);
+							color: #fff;
+							font-size: 1.4rem;
+							border-radius: 1.2rem;
+							text-align: center;
+						}
+					}
+				}
+			}
+
+			.apparel-container {
+				margin-top: 3rem;
 
 				.title {
 					font-size: 1.4rem;
 					margin-bottom: 0.8rem;
-					text-align: center;
-				}
 
-				.sketch-item {
-					width: 11.6rem;
-					height: 20.4rem;
-					border: 0.15rem solid #d1d1d1;
-					border-radius: 1rem;
-					position: relative;
-					background-color: #f6f6f6;
-					overflow: hidden;
-
-					&.cover {
-						width: 16.2rem;
-						background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' rx='11' ry='11' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='8%2c 5' stroke-linecap='square'/%3e%3c/svg%3e");
-						border: none;
-					}
-
-					.crop-tool {
-						position: absolute;
-						top: 0.8rem;
-						right: 0.8rem;
-						width: 2rem;
-						height: 2rem;
-						border-radius: 50%;
-						background-color: #000000;
-						z-index: 1;
-						cursor: pointer;
-					}
-
-					.sketch-img {
-						height: 100%;
-						&.sketch {
-							height: initial;
-							width: 100%;
-						}
-					}
-
-					.trigger {
-						cursor: pointer;
-						height: 100%;
-						padding: 6rem 2rem 0;
-						&,
-						.cover-trigger {
-							row-gap: 1.2rem;
-						}
-
-						.placeholder {
-							width: 2.4rem;
-							height: 2.4rem;
-							border-radius: 0.6rem;
-							background: linear-gradient(135deg, #efefef 0%, #cdcdcd 100%);
-						}
-
-						.trigger-tips {
-							font-size: 1.2rem;
-							text-align: center;
-							color: #585858;
-							line-height: 1.3;
-						}
-					}
-				}
-			}
-		}
-
-		.product-image-list-container {
-			margin-top: 3rem;
-
-			.title {
-				font-size: 1.4rem;
-				margin-bottom: 1.2rem;
-
-				.main-title {
-					font-weight: 400;
-					font-style: bold;
-				}
-
-				.sub-title {
-					font-size: 1.2rem;
-					color: #999;
-				}
-
-				.title-right {
-					color: #585858;
-					font-size: 1.4rem;
-				}
-			}
-
-			.product-image-list {
-				overflow-x: auto;
-				overflow-y: hidden;
-				column-gap: 0.8rem;
-				max-width: 80.2rem;
-				padding-bottom: 1.2rem;
-
-				&::-webkit-scrollbar {
-					height: 0.8rem;
-				}
-
-				&::-webkit-scrollbar-track {
-					background: #d9d9d9;
-					border-radius: 0.8rem;
-				}
-
-				&::-webkit-scrollbar-thumb {
-					background: #000000;
-					border-radius: 0.8rem;
-				}
-
-				.product-image-item {
-					width: 11.6rem;
-					height: 20.6rem;
-					border-radius: 1rem;
-					border: 0.15rem solid #c7c7c7;
-					position: relative;
-					cursor: pointer;
-					overflow: hidden;
-					flex-shrink: 0;
-
-					&::after {
-						position: absolute;
-						top: 0;
-						left: 0;
-						width: 100%;
-						height: 100%;
-						content: "";
-						background-color: #fcfcfc;
-						opacity: 0.7;
-						border-radius: 1rem;
-					}
-
-					&.selected {
-						border-color: #000;
+					.main-title {
+						font-weight: 400;
+						font-style: bold;
 
 						&::after {
-							display: none;
+							content: "*";
+							color: #df2b2c;
 						}
 					}
 
-					.checked {
-						width: 2rem;
-						height: 2rem;
-						position: absolute;
-						top: 0.8rem;
-						right: 0.8rem;
-						z-index: 1;
-					}
-
-					.img-src {
-						height: 100%;
-					}
-
-					.main-pic {
-						position: absolute;
-						height: 2.4rem;
-						line-height: 2.4rem;
-						left: 0.8rem;
-						right: 0.8rem;
-						bottom: 0.8rem;
-						z-index: 1;
-						background: rgba(0, 0, 0, 0.8);
-						color: #fff;
-						font-size: 1.4rem;
-						border-radius: 1.2rem;
-						text-align: center;
-					}
-				}
-			}
-		}
-
-		.apparel-container {
-			margin-top: 3rem;
-
-			.title {
-				font-size: 1.4rem;
-				margin-bottom: 0.8rem;
-
-				.main-title {
-					font-weight: 400;
-					font-style: bold;
-
-					&::after {
-						content: "*";
-						color: #df2b2c;
-					}
-				}
-
-				.sub-title {
-					font-size: 1.2rem;
-					color: #999;
-				}
-			}
-
-			.sketch-list-container {
-				column-gap: 1rem;
-				flex-wrap: wrap;
-
-				.sketch-element {
-					width: 10rem;
-					height: 14.6rem;
-					border: 0.15rem solid #c7c7c7;
-					border-radius: 1.2rem;
-					position: relative;
-					overflow: hidden;
-
-					.img-src {
-						// height: 100%;
-						width: 100%;
-					}
-
-					.crop-tool {
-						position: absolute;
-						top: 0.4rem;
-						right: 0.4rem;
-						width: 2rem;
-						height: 2rem;
-						border-radius: 50%;
-						background-color: #000000;
-					}
-				}
-			}
-		}
-	}
-
-	.right {
-		width: 55.2rem;
-		flex-shrink: 0;
-
-		.form-container {
-			row-gap: 3rem;
-
-			.form-item {
-				.form-item-label {
-					font-size: 1.4rem;
-					font-weight: 400;
-					font-style: bold;
-					margin-bottom: 0.6rem;
-					line-height: 1.5;
-
-					&.with-tip {
-						display: flex;
-						align-items: center;
-						column-gap: 0.8rem;
-					}
-
-					.help-text {
-						font-size: 1rem;
+					.sub-title {
+						font-size: 1.2rem;
 						color: #999;
 					}
 				}
 
-				.form-item-value {
-					border: 0.16rem solid #d1d1d1;
-					border-radius: 1.2rem;
-					position: relative;
-					padding: 1.6rem;
-					box-sizing: border-box;
-					font-size: 1.2rem;
-					color: #000;
+				.sketch-list-container {
+					column-gap: 1rem;
+					flex-wrap: wrap;
 
-					&.no-border {
-						border: none;
-						padding: 0;
-					}
-
-					&.price {
-						column-gap: 0.6rem;
-					}
-
-					:deep(.ant-input),
-					:deep(.ant-input-affix-wrapper),
-					:deep(.ant-input-textarea textarea) {
-						border: none;
-						padding: 0;
-						font-size: 1.2rem;
-						color: #000;
-						box-shadow: none;
-					}
-
-					:deep(.ant-input) {
-						line-height: 1.5;
-					}
-
-					:deep(.ant-input-show-count-suffix) {
-						color: #df2c2c;
-						font-size: 1rem;
-					}
-
-					:deep(textarea.ant-input) {
-						resize: none;
-						min-height: 5.4rem;
-						padding-bottom: 1.8rem;
-						line-height: 1.5;
-					}
-
-					:deep(.ant-input-textarea-show-count) {
+					.sketch-element {
+						width: 10rem;
+						height: 14.6rem;
+						border: 0.15rem solid #c7c7c7;
+						border-radius: 1.2rem;
 						position: relative;
-						&::after {
-							float: none;
+						overflow: hidden;
+
+						.img-src {
+							// height: 100%;
+							width: 100%;
+						}
+
+						.crop-tool {
 							position: absolute;
-							color: #df2c2c;
-							bottom: 0;
-							right: 1.6rem;
+							top: 0.4rem;
+							right: 0.4rem;
+							width: 2rem;
+							height: 2rem;
+							border-radius: 50%;
+							background-color: #000000;
 						}
 					}
 				}
 			}
 		}
 
-		.license-note {
-			padding: 1.6rem;
-			column-gap: 1.6rem;
-			background: #f7f7f7;
-			border-radius: 0.8rem;
+		.right {
+			width: 55.2rem;
+			flex-shrink: 0;
 
-			.info-icon {
-				width: 2.4rem;
-				height: 2.4rem;
-				flex-shrink: 0;
-			}
+			.form-container {
+				row-gap: 3rem;
 
-			.note-copy {
-				font-size: 1.2rem;
-				line-height: 1.5;
-				color: #000;
-				font-weight: 400;
-				font-style: medium;
+				.form-item {
+					.form-item-label {
+						font-size: 1.4rem;
+						font-weight: 400;
+						font-style: bold;
+						margin-bottom: 0.6rem;
+						line-height: 1.5;
 
-				a {
-					color: #0080ed;
-					text-decoration: underline;
-					margin-left: 0.4rem;
+						&.with-tip {
+							display: flex;
+							align-items: center;
+							column-gap: 0.8rem;
+						}
+
+						.help-text {
+							font-size: 1rem;
+							color: #999;
+						}
+					}
+
+					.form-item-value {
+						border: 0.16rem solid #d1d1d1;
+						border-radius: 1.2rem;
+						position: relative;
+						padding: 1.6rem;
+						box-sizing: border-box;
+						font-size: 1.2rem;
+						color: #000;
+
+						&.no-border {
+							border: none;
+							padding: 0;
+						}
+
+						&.price {
+							column-gap: 0.6rem;
+						}
+
+						:deep(.ant-input),
+						:deep(.ant-input-affix-wrapper),
+						:deep(.ant-input-textarea textarea) {
+							border: none;
+							padding: 0;
+							font-size: 1.2rem;
+							color: #000;
+							box-shadow: none;
+						}
+
+						:deep(.ant-input) {
+							line-height: 1.5;
+						}
+
+						:deep(.ant-input-show-count-suffix) {
+							color: #df2c2c;
+							font-size: 1rem;
+						}
+
+						:deep(textarea.ant-input) {
+							resize: none;
+							min-height: 5.4rem;
+							padding-bottom: 1.8rem;
+							line-height: 1.5;
+						}
+
+						:deep(.ant-input-textarea-show-count) {
+							position: relative;
+							&::after {
+								float: none;
+								position: absolute;
+								color: #df2c2c;
+								bottom: 0;
+								right: 1.6rem;
+							}
+						}
+					}
 				}
 			}
-		}
-		.page-control {
-			justify-content: flex-end;
-			margin-top: 4rem;
+
+			.license-note {
+				padding: 1.6rem;
+				column-gap: 1.6rem;
+				background: #f7f7f7;
+				border-radius: 0.8rem;
+
+				.info-icon {
+					width: 2.4rem;
+					height: 2.4rem;
+					flex-shrink: 0;
+				}
+
+				.note-copy {
+					font-size: 1.2rem;
+					line-height: 1.5;
+					color: #000;
+					font-weight: 400;
+					font-style: medium;
+
+					a {
+						color: #0080ed;
+						text-decoration: underline;
+						margin-left: 0.4rem;
+					}
+				}
+			}
+			.page-control {
+				justify-content: flex-end;
+				margin-top: 4rem;
+			}
 		}
 	}
-}
 </style>
diff --git a/src/views/SellerDashboard/MyOrders/index.vue b/src/views/SellerDashboard/MyOrders/index.vue
index 53e5f93b..23293aea 100644
--- a/src/views/SellerDashboard/MyOrders/index.vue
+++ b/src/views/SellerDashboard/MyOrders/index.vue
@@ -65,7 +65,9 @@
 					</div>
 				</div>
 			</div>
-			<div class="null" v-show="list.length === 0 && !loading && finish">no data</div>
+			<div class="null" v-show="list.length === 0 && !loading && finish">
+				<img src="@/assets/images/homePage/null_img.png" alt="" />
+			</div>
 			<div class="placeholder" ref="placeholderRef" v-show="!loading"></div>
 			<div class="footer" :class="{ null: list.length === 0 }" v-if="!finish">
 				<a-spin :delay="0.5" v-show="loading" />
@@ -120,28 +122,33 @@
 			size: size.value
 		}
 		if (nameOrId.value) data.keyword = nameOrId.value
-		Https.axiosGet(Https.httpUrls.getSellerOrderList, { params: data }).then((res) => {
-			res.content?.forEach((v) => {
-				const obj = {
-					orderId: v.orderId,
-					items: v.items.map((item) => ({
-						id: item.productId,
-						url: item.thumbnailUrl,
-						title: item.productName
-					})),
-					price: "HK$ " + v.price,
-					username: v.buyerUsername,
-					date: v.date,
-					time: v.date
-				}
-				list.value.push(obj)
-			})
+		Https.axiosGet(Https.httpUrls.getSellerOrderList, { params: data })
+			.then((res) => {
+				res.content?.forEach((v) => {
+					const obj = {
+						orderId: v.orderId,
+						items: v.items.map((item) => ({
+							id: item.productId,
+							url: item.thumbnailUrl,
+							title: item.productName
+						})),
+						price: "HK$ " + v.price,
+						username: v.buyerUsername,
+						date: v.date,
+						time: v.date
+					}
+					list.value.push(obj)
+				})
 
-			total.value = res.total
-			page.value++
-			finish.value = page.value > total.value / size.value
-			loading.value = false
-		})
+				total.value = res.total
+				page.value++
+				finish.value = page.value > total.value / size.value
+				loading.value = false
+			})
+			.catch(() => {
+				finish.value = true
+				loading.value = false
+			})
 	}
 	const getSummary = () => {
 		Https.axiosGet(Https.httpUrls.getSellerOrderSummary).then((res) => {
@@ -360,8 +367,14 @@
 			}
 			> .null {
 				margin-top: 10rem;
-				text-align: center;
-				color: #999;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				> img {
+					width: 30rem;
+					height: auto;
+				}
 			}
 			> .footer {
 				min-height: 10rem;
diff --git a/src/views/SellerDashboard/index.vue b/src/views/SellerDashboard/index.vue
index 90874077..faa66352 100644
--- a/src/views/SellerDashboard/index.vue
+++ b/src/views/SellerDashboard/index.vue
@@ -25,7 +25,7 @@
 	import myEvent from "@/tool/myEvents.js"
 	import { useStore } from "vuex"
 	const store = useStore()
-	store.dispatch("seller/get_designerInfo")
+	// store.dispatch("seller/get_designerInfo")
 	const route = useRoute()
 	const router = useRouter()
 	const visible = ref(false)