Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

2026-04-27 17:18:56 +08:00
parent 05178c4cb0 813918eb39
commit 04ad920590
10 changed files with 1137 additions and 1113 deletions
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -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',
-};
--- a/.prettierrc.json
+++ 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"
+}
--- 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)
 			}
 		},
 	},
--- 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) {
--- 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>
--- 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;
--- 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>
--- a/src/views/SellerDashboard/MyListings/EditDetail/index.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
--- 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;
--- 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)