Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

2026-04-17 10:17:05 +08:00
parent ce6522ef90 9758c562c3
commit 7ad29081af
18 changed files with 856 additions and 226 deletions
--- a/src/views/SellerDashboard/BrandProfile/components/EditDetial.vue
+++ b/src/views/SellerDashboard/BrandProfile/components/EditDetial.vue
@@ -0,0 +1,55 @@
+<template>
+	<div class="edit-detail-wrapper">
+		<div class="edit-detail-header flex align-center space-between">
+			<div class="bread-crumb">导航</div>
+			<div class="operate-menu flex">
+				<div class="menu-btn flex align-center save">
+					<span>Save Draft</span>
+					<SvgIcon name="CSave" color="#000000" size="16" />
+				</div>
+				<div class="menu-btn flex align-center publish">
+					<span>Publish</span>
+					<SvgIcon name="CPublish" color="#ffffff" size="16" />
+				</div>
+			</div>
+		</div>
+    <div class="edit-detail-content"></div>
+	</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.c-svg {
+	width: initial;
+}
+.edit-detail-wrapper {
+	.menu-btn {
+		height: 6rem;
+		border: 0.15rem solid #000000;
+		border-radius: 4rem;
+		text-align: center;
+		line-height: 6rem;
+		padding: 0 2rem;
+		font-weight: 400;
+		font-size: 1.6rem;
+		column-gap: 0.8rem;
+    cursor: pointer;
+	}
+	.edit-detail-header {
+		width: 100%;
+		height: 6rem;
+    margin-bottom: 2rem;
+		.operate-menu {
+			column-gap: 2rem;
+			.publish {
+				background-color: #000000;
+				color: #ffffff;
+			}
+		}
+	}
+  .edit-detail-content{
+    padding-right: 6.4rem;
+  }
+}
+</style>
--- a/src/views/SellerDashboard/MyListings/EditDetail/Status.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/Status.vue
@@ -0,0 +1,78 @@
+<template>
+	<div class="status-wrapper flex flex-col flex-1">
+		<seller-header
+			class="edit-detail-header"
+			title="Edit Listing Details"
+			:breadcrumbs="[
+				{ title: 'My Listings', name: 'myListingsIndex' },
+				{ title: 'Select Collection', name: 'myListingsSelect' },
+				{ title: 'Select Sketch', name: 'myListingsSelectItem' },
+				{ title: 'Edit Listing Details', name: 'EditDetail' },
+				{ title: $t(title), name: 'Status' }
+			]"
+		/>
+		<div class="status-container flex flex-col flex-1 flex-center">
+			<img src="@/assets/images/seller/success-0.png" class="icon" alt="" />
+			<div class="title">{{ $t(title) }}</div>
+			<div class="desc">
+				{{ $t(desc) }}
+			</div>
+			<div class="btn">Back to My Listings</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import { useRoute } from "vue-router"
+import SellerHeader from "../../seller-header.vue"
+const ROUTE = useRoute()
+const title = computed(() => {
+	if (ROUTE.params.status === "publish") return "SellerListEdit.listingLive"
+	if (ROUTE.params.status === "draft") return "SellerListEdit.draftSaved"
+})
+
+const desc = computed(() => {
+  if (ROUTE.params.status === "publish") return "SellerListEdit.publishDesc"
+  if (ROUTE.params.status === "draft") return "SellerListEdit.draftDesc"
+})
+
+</script>
+
+<style lang="less" scoped>
+.status-wrapper {
+	.status-container {
+		row-gap: 2.4rem;
+		font-weight: 400;
+		.title {
+			font-size: 2.2rem;
+		}
+		.icon {
+			width: 8.33rem;
+			height: 8.33rem;
+		}
+		.desc {
+			width: 58.2rem;
+			text-align: center;
+			white-space: pre-line;
+      color: #585858;
+      font-size: 1.8rem;
+		}
+
+		.btn {
+			margin-top: 3.6rem;
+			height: 6rem;
+			width: 30rem;
+			border-radius: 4rem;
+			text-align: center;
+			line-height: 6rem;
+			padding: 0 2rem;
+			font-size: 1.6rem;
+			column-gap: 0.8rem;
+			cursor: pointer;
+			background-color: #000;
+			color: #fff;
+		}
+	}
+}
+</style>
--- a/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
@@ -0,0 +1,104 @@
+<template>
+	<div class="radio-button-group">
+		<button
+			v-for="item in options"
+			:key="item.key"
+			type="button"
+			:class="[
+				'radio-button',
+				{
+					'is-active': multiple
+						? selectedValues.includes(item.key)
+						: modelValue === item.key
+				}
+			]"
+			@click="selectOption(item.key)"
+		>
+			{{ item.name }}
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+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]
+	}
+
+	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)
+		}
+		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 {
+	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.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
@@ -12,18 +12,21 @@
 		>
 			<template #right>
 				<div class="operate-menu flex">
-					<div class="menu-btn flex align-center save">
+					<div class="menu-btn flex align-center save" @click="handleClickMenu('draft')">
 						<span>{{ $t("SellerListEdit.saveDraft") }}</span>
-						<SvgIcon name="CSave" color="#000000" size="16" />
+						<SvgIcon name="CSave" size="16" />
 					</div>
-					<div class="menu-btn flex align-center publish">
+					<div
+						class="menu-btn flex align-center publish"
+						@click="handleClickMenu('publish')"
+					>
 						<span>{{ $t("SellerListEdit.publish") }}</span>
-						<SvgIcon name="CPublish" color="#ffffff" size="16" />
+						<SvgIcon name="CPublish" size="16" />
 					</div>
 				</div>
 			</template>
 		</seller-header>
-		<div class="edit-detail-content flex space-between">
+		<div class="edit-detail-content flex">
 			<div class="left">
 				<div class="main-image-container flex">
 					<div
@@ -32,25 +35,20 @@
 						:class="`main-image-item flex flex-col align-center ${type}`"
 					>
 						<div class="title" :class="{ required: type !== 'mainProductImage' }">
-							{{ $t(`SellerListEdit.${type}`) }}
+							{{ topImageTitleMap[type] }}
 						</div>
 						<div class="sketch-item flex flex-center" :class="type">
-							<div
-								v-show="selectList[currentIndex][type]"
-								class="crop-tool flex flex-center"
-							>
+							<div v-if="previewImageMap[type]" class="crop-tool flex flex-center">
 								<SvgIcon name="CCrop" color="#fff" size="12" />
 							</div>
 							<img
-								v-show="selectList[currentIndex][type]"
-								:src="selectList[currentIndex][type]"
+								v-if="previewImageMap[type]"
+								:src="previewImageMap[type]"
 								class="sketch-img"
+								:class="{ cover: type === 'cover' }"
 								alt=""
 							/>
-							<div
-								class="trigger flex flex-col align-center"
-								v-show="!selectList[currentIndex][type]"
-							>
+							<div v-else class="trigger flex flex-col align-center">
 								<template v-if="type === 'cover'">
 									<SvgIcon
 										class="trigger-icon"
@@ -63,10 +61,7 @@
 									</div>
 								</template>
 								<template v-else>
-									<img
-										src="@/assets/images/seller/image-placeholder.png"
-										class="trigger-img"
-									/>
+									<div class="trigger-img placeholder"></div>
 									<div class="trigger-tips">
 										{{ $t("SellerListEdit.productImageDesc") }}
 									</div>
@@ -92,17 +87,18 @@
 					<div class="product-image-list flex">
 						<div
 							v-for="(item, index) in prodImgList"
+							:key="index"
 							class="product-image-item flex flex-center"
 							:class="{ selected: item.selected }"
-							:key="index"
 							@click="handleSelectProdImg(index)"
 						>
 							<img
-								v-show="item.selected"
+								v-if="item.selected"
 								src="@/assets/images/seller/checked.png"
 								class="checked"
+								alt=""
 							/>
-							<img class="img-src" :src="item.url" />
+							<img class="img-src" :src="item.url" alt="" />
 							<div
 								v-if="item.selected && index === firstSelectedIndex"
 								class="main-pic"
@@ -127,7 +123,7 @@
 							:key="index"
 							class="sketch-element flex flex-center"
 						>
-							<img class="img-src" :src="item.url" />
+							<img class="img-src" :src="item.url" alt="" />
 							<div class="crop-tool flex flex-center">
 								<SvgIcon name="CCrop" color="#fff" size="12" />
 							</div>
@@ -138,12 +134,13 @@
 			<div class="right">
 				<div class="form-container flex flex-col">
 					<div class="form-item">
-						<div class="form-item-label required">Product Name</div>
+						<div class="form-item-label required">
+							{{ $t("SellerListEdit.productName") }}
+						</div>
 						<div class="form-item-value product-name">
 							<a-input
-								v-model:value="selectList[currentIndex].productName"
+								v-model:value="currentListing.productName"
 								show-count
-								:rows="2"
 								placeholder="Enter product name"
 								:bordered="false"
 								:maxlength="60"
@@ -151,16 +148,66 @@
 						</div>
 					</div>
 					<div class="form-item">
-						<div class="form-item-label required">Price</div>
+						<div class="form-item-label required">{{ $t("SellerListEdit.price") }}</div>
 						<div class="form-item-value price flex align-center">
 							<span>HK$</span>
 							<a-input
-								v-model:value="selectList[currentIndex].desc"
+								v-model:value="currentListing.price"
 								placeholder="0.00"
 								:bordered="false"
 							/>
 						</div>
 					</div>
+					<div class="form-item">
+						<div class="form-item-label required">
+							{{ $t("SellerListEdit.productDescription") }}
+						</div>
+						<div class="form-item-value desc">
+							<a-textarea
+								v-model:value="currentListing.desc"
+								show-count
+								:rows="4"
+								placeholder="Enter product description"
+								:bordered="false"
+								:maxlength="500"
+							/>
+						</div>
+					</div>
+					<div class="form-item">
+						<div class="form-item-label required">
+							{{ $t("SellerListEdit.designFor") }}
+						</div>
+						<div class="form-item-value no-border">
+							<Radio :options="genderOptions" v-model="currentListing.gender" />
+						</div>
+					</div>
+					<div class="form-item">
+						<div class="form-item-label with-tip">
+							<span class="required">{{ $t("SellerListEdit.productCategory") }}</span>
+							<span class="help-text">{{ $t("SellerListEdit.categoryTips") }}</span>
+						</div>
+						<div class="form-item-value no-border">
+							<Radio :options="categoryOptions" v-model="currentListing.category" />
+						</div>
+					</div>
+					<div class="license-note flex align-center">
+						<img src="@/assets/images/seller/tips.png" class="info-icon" />
+						<div class="note-copy">
+							{{ $t("SellerListEdit.policy") }}
+							<a href="javascript:void(0)">{{ $t("SellerListEdit.learnMore") }}</a>
+						</div>
+					</div>
+				</div>
+				<div class="page-control flex align-center">
+					<a-pagination
+						v-model:current="currentPage"
+						:total="selectList.length"
+						:page-size="1"
+						showQuickJumper
+						showLessItems
+						responsive
+						:showSizeChanger="false"
+					/>
 				</div>
 			</div>
 		</div>
@@ -168,14 +215,62 @@
 </template>

 <script setup lang="ts">
-import { ref, computed } from "vue"
+import { computed, ref, watch, defineOptions } from "vue"
+import { useRouter } from "vue-router"
 import SellerHeader from "../../seller-header.vue"
 import testImg from "@/assets/images/test.png"
-import { ElInput } from "element-plus"
+import Radio from "./components/Radio.vue"
+import { Https } from "@/tool/https"
+import { useStore } from "vuex"

-const topImageList = ["sketch", "mainProductImage", "cover"]
-const currentIndex = ref(0)
-const selectList = ref([
+const ROUTER = useRouter()
+
+defineOptions({
+	name: "EditDetail"
+})
+
+const STORE = useStore()
+
+type CategoryOption = {
+	label: string
+	value: string
+}
+
+type ListingItem = {
+	sketch: string
+	mainProductImage: string
+	cover: string
+	productImage: string[]
+	apparelSketch: string[]
+	productName: string
+	price: string
+	desc: string
+	gender: string
+	category: string
+	prodImageList: Array<{
+		url: string
+		selected: boolean
+	}>
+}
+
+const topImageList = ["sketch", "mainProductImage", "cover"] as const
+const topImageTitleMap: Record<(typeof topImageList)[number], string> = {
+	sketch: "Sketch",
+	mainProductImage: "Main Product Image",
+	cover: "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 selectList = ref<ListingItem[]>([
 	{
 		sketch: testImg,
 		mainProductImage: "",
@@ -183,69 +278,117 @@ const selectList = ref([
 		productImage: [],
 		apparelSketch: [],
 		productName: "",
-		price: "",
+		price: "12",
+		desc: "",
+		gender: "FEMALE",
+		category: "",
+		prodImageList: [
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false }
+		]
+	},
+	{
+		sketch: testImg,
+		mainProductImage: "",
+		cover: "",
+		productImage: [],
+		apparelSketch: [],
+		productName: "",
+		price: "12",
 		desc: "",
 		gender: "",
-		category: ""
-	}
-])
-const prodImgList = ref([
-	{
-		url: testImg,
-		selected: false
+		category: "",
+		prodImageList: [
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false }
+		]
 	},
 	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
-	},
-	{
-		url: testImg,
-		selected: false
+		sketch: testImg,
+		mainProductImage: "",
+		cover: "",
+		productImage: [],
+		apparelSketch: [],
+		productName: "",
+		price: "12",
+		desc: "",
+		gender: "",
+		category: "",
+		prodImageList: [
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false },
+			{ url: testImg, selected: false }
+		]
 	}
 ])

+const prodImgList = computed(() => currentListing.value.prodImageList || [])
+
+const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
+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 ||
+		currentListing.value.mainProductImage ||
+		currentListing.value.sketch
+}))
+
+const firstSelectedIndex = ref(null) //显示main标签的图片索引
 const selectedProdImgs = computed(() => {
 	return prodImgList.value.filter((item) => item.selected).length
 })

-const firstSelectedIndex = ref(-1)
-
 const handleSelectProdImg = (index: number) => {
-	const item = prodImgList.value[index]
-	item.selected = !item.selected
+	const target = prodImgList.value[index]

-	if (item.selected) {
-		if (firstSelectedIndex.value === -1) {
-			firstSelectedIndex.value = index
-			selectList.value[currentIndex.value].mainProductImage = item.url
-		}
-	} else if (firstSelectedIndex.value === index) {
-		selectList.value[currentIndex.value].mainProductImage = null
-		firstSelectedIndex.value = -1
+	const willSelect = !target.selected
+
+	target.selected = willSelect
+
+	if (willSelect && !currentListing.value.mainProductImage) {
+		currentListing.value.mainProductImage = target.url
+		firstSelectedIndex.value = index
+	}
+
+	if (!willSelect && currentListing.value.mainProductImage === target.url) {
+		firstSelectedIndex.value = null
+		currentListing.value.mainProductImage = ""
 	}
 }

-const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
+const handleClickMenu = (status: "draft" | "publish") => {
+	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" } })
+	}
+}
 </script>

 <style lang="less" scoped>
@@ -255,8 +398,13 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 }

 .edit-detail-wrapper {
-	overflow-y: auto;
-	// set the scollbar hidden
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	margin-top: -1rem;
+	overflow: hidden;
+
 	&::-webkit-scrollbar {
 		display: none;
 	}
@@ -268,26 +416,47 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 		text-align: center;
 		line-height: 6rem;
 		padding: 0 2rem;
-		font-weight: 400;
 		font-size: 1.6rem;
 		column-gap: 0.8rem;
 		cursor: pointer;
+		transition: all 0.25s ease;
+
+		&:hover {
+			background: #000;
+			color: #fff;
+		}
+
+		// &.publish:hover {
+		// 	background: #fff;
+		// 	color: #000;
+		// }
 	}

 	.edit-detail-header {
 		margin-bottom: 2rem;
 	}
+
 	.operate-menu {
 		column-gap: 2rem;

-		.publish {
-			background-color: #000000;
-			color: #ffffff;
-		}
+		// .publish {
+		// background-color: #000000;
+		// color: #ffffff;
+		// }
 	}
 }
+
 .edit-detail-content {
-	padding-right: 6.4rem;
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	justify-content: space-between;
+
+	&::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+	}
+
 	.required {
 		&::after {
 			content: "*";
@@ -295,17 +464,23 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 			margin-left: 0.4rem;
 		}
 	}
+
 	.left {
+		// flex: 1;
+		// min-width: 0;
+
 		.main-image-container {
-			column-gap: 3.6rem;
+			// max-width: 80.2rem;
+
 			.main-image-item {
+				flex-shrink: 0;
+
 				.title {
-					font-weight: 400;
-					font-style: bold;
 					font-size: 1.4rem;
 					margin-bottom: 0.8rem;
 					text-align: center;
 				}
+
 				.sketch-item {
 					width: 11.6rem;
 					height: 20.4rem;
@@ -313,62 +488,77 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 					border-radius: 1rem;
 					position: relative;
 					background-color: #f6f6f6;
+					overflow: hidden;
+
 					&.cover {
-						width: 16.17rem;
-						// border-style: dashed;
+						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;
-						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' fill='none' stroke='%23D1D1D1' stroke-width='1.5' stroke-dasharray='13%2c 5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 					}
+
 					.crop-tool {
 						position: absolute;
-						top: 0.4rem;
-						right: 0.4rem;
+						top: 0.8rem;
+						right: 0.8rem;
 						width: 2rem;
 						height: 2rem;
 						border-radius: 50%;
-						cursor: pointer;
 						background-color: #000000;
+						z-index: 1;
+						cursor: pointer;
 					}
+
 					.sketch-img {
-						// width: 100%;
 						height: 100%;
 					}
+
 					.trigger {
 						row-gap: 1.2rem;
 						cursor: pointer;
 						height: 100%;
-						padding-top: 6.8rem;
-						.trigger-img {
+						padding: 6rem 2rem 0;
+
+						.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;
-							width: 9rem;
 							text-align: center;
 							color: #585858;
+							line-height: 1.3;
 						}
 					}
 				}
 			}
 		}
+
 		.product-image-list-container {
 			margin-top: 3rem;
+
 			.title {
-				font-weight: 400;
-				font-style: bold;
 				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;
-					font-weight: 400;
 				}
 			}
+
 			.product-image-list {
 				overflow-x: auto;
 				overflow-y: hidden;
@@ -376,19 +566,18 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 				max-width: 80.2rem;
 				padding-bottom: 1.2rem;

-				//滚动条高度0.8rem，背景色#D9D9D9,滚动条圆角0.4rem，小方块为黑色
 				&::-webkit-scrollbar {
 					height: 0.8rem;
 				}
+
 				&::-webkit-scrollbar-track {
 					background: #d9d9d9;
 					border-radius: 0.8rem;
-					height: 0.8rem;
 				}
+
 				&::-webkit-scrollbar-thumb {
 					background: #000000;
 					border-radius: 0.8rem;
-					height: 0.8rem;
 				}

 				.product-image-item {
@@ -398,6 +587,9 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 					border: 0.15rem solid #c7c7c7;
 					position: relative;
 					cursor: pointer;
+					overflow: hidden;
+					flex-shrink: 0;
+
 					&::after {
 						position: absolute;
 						top: 0;
@@ -409,22 +601,28 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 						opacity: 0.7;
 						border-radius: 1rem;
 					}
+
 					&.selected {
-						// border-color: #000000;
+						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;
@@ -433,8 +631,7 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 						right: 0.8rem;
 						bottom: 0.8rem;
 						z-index: 1;
-						background: #000000cc;
-						font-weight: 400;
+						background: rgba(0, 0, 0, 0.8);
 						color: #fff;
 						font-size: 1.4rem;
 						border-radius: 1.2rem;
@@ -443,34 +640,46 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 				}
 			}
 		}
+
 		.apparel-container {
 			margin-top: 3rem;
+
 			.title {
-				font-weight: 400;
-				font-style: bold;
 				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 {
-						width: 100%;
+						height: 100%;
 					}
+
 					.crop-tool {
 						position: absolute;
 						top: 0.4rem;
@@ -478,24 +687,40 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 						width: 2rem;
 						height: 2rem;
 						border-radius: 50%;
-						cursor: pointer;
 						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;
+						color: #999;
+					}
 				}
+
 				.form-item-value {
 					border: 0.16rem solid #d1d1d1;
 					border-radius: 1.2rem;
@@ -503,32 +728,87 @@ const sketchList = ref([{ url: testImg }, { url: testImg }, { url: testImg }])
 					padding: 1.6rem;
 					box-sizing: border-box;
 					font-size: 1.2rem;
-					font-weight: 400;
 					color: #000;
+
+					&.no-border {
+						border: none;
+						padding: 0;
+					}
+
 					&.price {
 						column-gap: 0.6rem;
 					}

-					:deep(.ant-input) {
+					:deep(.ant-input),
+					:deep(.ant-input-affix-wrapper),
+					:deep(.ant-input-textarea textarea) {
 						border: none;
 						padding: 0;
 						font-size: 1.2rem;
-						font-weight: 400;
+						color: #000;
+						box-shadow: none;
 					}
-					:deep(.ant-input-affix-wrapper) {
-						padding: 0;
-						font-weight: 400;
-						input {
-							font-size: 1.2rem;
-						}
+
+					: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;
+						}
+					}
 				}
 			}
 		}
+
+		.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>
--- a/src/views/SellerDashboard/MyListings/main/content.vue
+++ b/src/views/SellerDashboard/MyListings/main/content.vue
@@ -245,7 +245,7 @@ const { showDrafts } = toRefs(data);
 					v-bind="config"
 					:group="{
 						name: 'sortable',
-						pull: true,
+						pull: false,
 						put: true
 					}"
 				>
--- a/src/views/SellerDashboard/MyListings/main/deleteDrafts.vue
+++ b/src/views/SellerDashboard/MyListings/main/deleteDrafts.vue
@@ -20,8 +20,8 @@ const fun = ref(null)

 let deleteDraftsRef = ref(null)

-const open = (fun)=>{
-	fun.value = fun
+const open = (deleteFun)=>{
+	fun.value = deleteFun
 	emit('update:visible', true)
 }