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

2026-04-28 17:25:01 +08:00
parent 55481c6d51 ca39910f4c
commit 8abcdb151d
19 changed files with 2993 additions and 2231 deletions
--- a/src/assets/images/seller/selectCollectionNullStatus.png
+++ b/src/assets/images/seller/selectCollectionNullStatus.png
--- a/src/component/Administrator/allUser.vue
+++ b/src/component/Administrator/allUser.vue
@@ -8,16 +8,11 @@
 						style="width: 250px"
 						class="range_picker"
 						v-model:value="rangePickerValue"
-                        :placeholder="[
-                            $t('HistoryPage.StartDate'),
-                            $t('HistoryPage.EndDate'),
-                        ]"
+						:placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
 						valueFormat="YYYY-MM-DD"
 					>
 						<template #suffixIcon>
-                            <span
-                                class="icon iconfont range_picker_icon icon-rili"
-                            ></span>
+							<span class="icon iconfont range_picker_icon icon-rili"></span>
 						</template>
 					</a-range-picker>
 				</div>
@@ -63,38 +58,50 @@
 						show-search
 					></a-select>
 				</div>
+				<div class="admin_state_item">
+					<span>Orgnization:</span>
+					<a-select
+						v-model:value="organizationId"
+						placeholder="Select the organization"
+						allow-clear
+						style="width: 250px"
+						@popupScroll="handleOrganizationScroll"
+					>
+						<a-select-option
+							v-for="item in organizationOptions"
+							:key="item.id"
+							:value="item.id"
+						>
+							{{ item.name }}
+						</a-select-option>
+					</a-select>
+				</div>
 			</div>
 			<div class="admin_search">
-                <div class="admin_search_item" @click="searchHistoryList" :style="{height:isAwayOrUnfold?'4rem':''}">
+				<div
+					class="admin_search_item"
+					@click="searchHistoryList"
+					:style="{ height: isAwayOrUnfold ? '4rem' : '' }"
+				>
 					Search
 				</div>
-                <div class="admin_search_item" @click="addhHistoryList">
-                    Add
-                </div>
+				<div class="admin_search_item" @click="addhHistoryList">Add</div>
 			</div>
 			<div class="admin_state_list">
-                <div
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('year')"
-                >
+				<div class="admin_state_list_item" @click="lastGeTrialList('year')">
 					Nearly a year
 				</div>
-                <div
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('month')"
-                >
+				<div class="admin_state_list_item" @click="lastGeTrialList('month')">
 					Last month
 				</div>
-                <div
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('week')"
-                >
-                    Last week
-                </div>
+				<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
 			</div>
 		</div>
 		<div class="awayOrUnfold" :class="{ active: isAwayOrUnfold }">
-			<span class="icon iconfont menu_icon icon-xiala" @click="()=>isAwayOrUnfold = !isAwayOrUnfold"></span>
+			<span
+				class="icon iconfont menu_icon icon-xiala"
+				@click="() => (isAwayOrUnfold = !isAwayOrUnfold)"
+			></span>
 		</div>
 		<div class="admin_table_content" ref="historyTable">
 			<a-table
@@ -104,24 +111,19 @@
 				:data-source="dataList"
 				:scroll="{ y: historyTableHeight }"
 				@change="changePage"
-				:showSorterTooltip='false'
+				:showSorterTooltip="false"
 				:pagination="{
 					showSizeChanger: true,
 					current: currentPage,
 					pageSize: pageSize,
 					total: total,
 					showQuickJumper: true,
-                    bordered: false,
+					bordered: false
 				}"
 			>
 				<template #bodyCell="{ column, text, record, index }">
 					<div class="operate_list" v-if="column?.Operations">
-                        <div
-                            class="operate_item"
-                            @click="setAagree(record)"
-                        >
-                            Edit
-                        </div>
+						<div class="operate_item" @click="setAagree(record)">Edit</div>
 						<!-- <div
 							class="operate_item"
 							@click="deleteGroup(record, index)"
@@ -132,24 +134,19 @@
 				</template>
 			</a-table>
 		</div>
-		<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
+		<allUserPoerationsVue
+			ref="allUserPoerationsVue"
+			@searchHistoryList="searchHistoryList"
+		/>
 	</div>
 </template>
 <script lang="ts">
-import {
-    defineComponent,
-    ref,
-    createVNode,
-    computed,
-    reactive,
-    toRefs,
-    onMounted,
-} from "vue";
-import { formatTime } from "@/tool/util";
-import { useStore } from "vuex";
-import { Https } from "@/tool/https";
-import allUserPoerationsVue from "./allUserPoerations.vue";
-import SelectUser from '@/component/common/SelectUser.vue'
+import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue"
+import { formatTime } from "@/tool/util"
+import { useStore } from "vuex"
+import { Https } from "@/tool/https"
+import allUserPoerationsVue from "./allUserPoerations.vue"
+import SelectUser from "@/component/common/SelectUser.vue"
 export default defineComponent({
 	components: { allUserPoerationsVue, SelectUser },
 	setup() {
@@ -159,7 +156,7 @@ export default defineComponent({
 			tableLoading: false,
 			allCountry: [],
 			isAwayOrUnfold: false
-        });
+		})
 		let filterData: any = reactive({
 			rangePickerValue: [],
 			currentPage: 1,
@@ -172,40 +169,41 @@ export default defineComponent({
 			occupation: "",
 			systemUser: "",
 			order: "", //'Ascending  升序 Descending 降序'
-			orderBy:'',
+			orderBy: "",
 			userName: "",
-        });
+			organizationId: null
+		})
 		let state: any = ref([
 			{
 				label: "all",
-                value: "",
+				value: ""
 			},
 			{
-				label:'visitor',
-				value:'0',
+				label: "visitor",
+				value: "0"
 			},
 			{
-				label:'yearly',
-				value:'1',
+				label: "yearly",
+				value: "1"
 			},
 			{
-				label:'monthly',
-				value:'2',
+				label: "monthly",
+				value: "2"
 			},
 			{
-				label:'trial',
-				value:'3',
+				label: "trial",
+				value: "3"
 			},
 			{
 				label: "userInEvent",
-                value: "4",
+				value: "4"
 			},
 			{
 				label: "Edu Admin",
-                value: "7",
-            },
-        ]);
-        let renameData: any = ref({}); //修改名字选中的数据
+				value: "7"
+			}
+		])
+		let renameData: any = ref({}) //修改名字选中的数据
 		const columns: any = computed(() => {
 			return [
 				{
@@ -215,7 +213,7 @@ export default defineComponent({
 					key: "id",
 					width: 100,
 					fixed: "left",
-					sorter: true,
+					sorter: true
 				},
 				{
 					title: "Email",
@@ -246,7 +244,7 @@ export default defineComponent({
 					dataIndex: "language",
 					key: "language",
 					width: 100,
-					ellipsis:true,
+					ellipsis: true
 				},
 				{
 					title: "Valid Start Time",
@@ -256,12 +254,12 @@ export default defineComponent({
 					width: 200,
 					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
+						let time = ""
 						if (record.text) {
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Valid End Time",
@@ -271,19 +269,19 @@ export default defineComponent({
 					width: 200,
 					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
+						let time = ""
 						if (record.text) {
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Country or Region",
 					align: "center",
 					dataIndex: "country",
 					key: "country",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Create Date",
@@ -291,7 +289,7 @@ export default defineComponent({
 					dataIndex: "createDate",
 					key: "createDate",
 					width: 200,
-					sorter: true,
+					sorter: true
 				},
 				{
 					title: "Is Beginner",
@@ -301,21 +299,21 @@ export default defineComponent({
 					width: 80,
 					ellipsis: true,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 1) {
-                            str = "Yes";
+							str = "Yes"
 						} else {
-                            str = "No";
+							str = "No"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
-                    title: 'Machine Room Ip',
+					title: "Machine Room Ip",
 					align: "center",
 					dataIndex: "browserIdentifiers",
 					key: "browserIdentifiers",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Credits",
@@ -327,10 +325,10 @@ export default defineComponent({
 					dataIndex: "credits",
 					key: "credits",
 					width: 100,
-					sorter: true,
+					sorter: true
 				},
 				{
-                    title: 'User Type',
+					title: "User Type",
 					align: "center",
 					// width: 150,
 					// minWidth: 100,
@@ -340,22 +338,22 @@ export default defineComponent({
 					key: "systemUser",
 					width: 100,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 0) {
-                            str = "visitor";
+							str = "visitor"
 						} else if (record.value == 1) {
-                            str = "yearly";
+							str = "yearly"
 						} else if (record.value == 2) {
-                            str = "monthly";
+							str = "monthly"
 						} else if (record.value == 3) {
-                            str = "trial";
+							str = "trial"
 						} else if (record.value == 4) {
-                            str = "userInEvent";
+							str = "userInEvent"
 						} else if (record.value == 7) {
-                            str = "Edu Admin";
+							str = "Edu Admin"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
 					title: "Operations",
@@ -364,58 +362,58 @@ export default defineComponent({
 					align: "center",
 					fixed: "right",
 					// slots:{customRender:'action'}
-                    Operations: true,
-                },
-            ];
-        });
+					Operations: true
+				}
+			]
+		})
 		//改变页码
 		let changePage = (e: any, filters: any, sorter: any) => {
-            filterData.currentPage = e.current;
-            filterData.pageSize = e.pageSize;
+			filterData.currentPage = e.current
+			filterData.pageSize = e.pageSize
 			if (sorter.order) {
-				if(sorter.columnKey == 'id'){
-					filterData.orderBy = 'id'
+				if (sorter.columnKey == "id") {
+					filterData.orderBy = "id"
 				} else if (sorter.columnKey == "createDate") {
-					filterData.orderBy = 'time'
+					filterData.orderBy = "time"
 				} else if (sorter.columnKey == "credits") {
-					filterData.orderBy = 'credits'
+					filterData.orderBy = "credits"
 				}
 			}
 			if (sorter.order) {
-				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
+				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending"
 			} else {
-				filterData.order = ''
+				filterData.order = ""
+			}
+			gettrialList()
 		}
-            gettrialList();
-        };

 		//查询列表
 		let searchHistoryList = () => {
-            filterData.currentPage = 1;
-            gettrialList();
-        };
+			filterData.currentPage = 1
+			gettrialList()
+		}
 		let clearHistoryList = () => {
-            filterData.rangePickerValue = [],
-			filterData.currentPage = 1,
-			filterData.pageSize = 10,
-			filterData.total = 0,
-			filterData.country = "",
-			filterData.email = "",
-			filterData.userType = "",
-			filterData.ids = [],
-			filterData.occupation = "",
-			filterData.order = "", //'Ascending  升序 Descending 降序'
-			filterData.orderBy = "", //'Ascending  升序 Descending 降序'
-			filterData.systemUser = "",
-			filterData.userName = "";
-        };
+			;((filterData.rangePickerValue = []),
+				(filterData.currentPage = 1),
+				(filterData.pageSize = 10),
+				(filterData.total = 0),
+				(filterData.country = ""),
+				(filterData.email = ""),
+				(filterData.userType = ""),
+				(filterData.ids = []),
+				(filterData.occupation = ""),
+				(filterData.order = ""), //'Ascending  升序 Descending 降序'
+				(filterData.orderBy = ""), //'Ascending  升序 Descending 降序'
+				(filterData.systemUser = ""),
+				(filterData.userName = ""))
+		}
 		let setHistoryListData = () => {
 			let startDate: any = filterData.rangePickerValue?.[0]
 				? filterData.rangePickerValue[0] + " " + "00:00:00"
-                : "";
+				: ""
 			let endDate: any = filterData.rangePickerValue?.[1]
 				? filterData.rangePickerValue[1] + " " + "23:59:59"
-                : "";
+				: ""
 			let data = {
 				endTime: endDate,
 				startTime: startDate,
@@ -430,63 +428,118 @@ export default defineComponent({
 				order: filterData.order,
 				orderBy: filterData.orderBy,
 				userName: filterData.userName,
-            };
-            return data;
-        };
+				organizationId: filterData.organizationId
+			}
+			return data
+		}
 		//获取列表
 		let gettrialList = () => {
-            filter.tableLoading = true;
-            let data = setHistoryListData();
-            Https.axiosPost(Https.httpUrls.getUserInfo, data).then(
-                (rv: any) => {
+			filter.tableLoading = true
+			let data = setHistoryListData()
+			Https.axiosPost(Https.httpUrls.getUserInfo, data).then((rv: any) => {
 				if (rv) {
 					// this.dataList = rv
-                        filter.dataList = rv.records;
-                        filterData.total = rv.total;
-                        filter.tableLoading = false;
+					filter.dataList = rv.records
+					filterData.total = rv.total
+					filter.tableLoading = false

 					// this.workspaceItem.position = this.singleTypeList[0].label
 				}
+			})
 		}
-            );
-        };
 		let lastGeTrialList = (str: string) => {
-            clearHistoryList();
-            let currentDate = new Date();
-            let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
+			clearHistoryList()
+			let currentDate = new Date()
+			let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
 			// 计算30天前的时间戳
-            let thirtyDaysAgoTimestamp;
+			let thirtyDaysAgoTimestamp
 			if (str == "year") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
 			} else if (str == "month") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
 			} else if (str == "week") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
+			}
+			filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, "YYYY-MM-DD")
+			gettrialList()
 		}
-            filterData.rangePickerValue[0] = formatTime(
-                thirtyDaysAgoTimestamp,
-                "YYYY-MM-DD"
-            );
-            gettrialList();
-        };
 		let filterOption = (input: any, option: any) => {
 			// 使用 option.label 进行搜索
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-        };
+			return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+		}
 		let addhHistoryList = () => {
-			allUserPoerationsVue.value.init('Add','')
-		};
+			allUserPoerationsVue.value.init("Add", "")
+		}
 		let allUserPoerationsVue = ref()
 		let setAagree = (data: any) => {
-			allUserPoerationsVue.value.init('Edit',data)
+			allUserPoerationsVue.value.init("Edit", data)
 		}
+
+		const organizationOptions = ref([])
+		const organizationParams = reactive({
+			page: 1,
+			size: 10,
+			total: 0
+		})
+		const organizationLoading = ref(false)
+		const getOrganizationList = async (isLoadMore = false) => {
+			console.log("111111")
+			if (organizationLoading.value) return
+			if (isLoadMore) {
+				const loaded = organizationParams.page * organizationParams.size
+				if (organizationParams.total && loaded >= organizationParams.total) return
+				organizationParams.page += 1
+			} else {
+				organizationParams.page = 1
+				organizationOptions.value = []
+			}
+			organizationLoading.value = true
+			try {
+				const { total, ...requestParams } = organizationParams
+				const rv: any = await Https.axiosPost(
+					Https.httpUrls.queryOrganization,
+					requestParams
+				)
+				if (rv) {
+					const newRecords = rv.records || []
+					// 遍历新数据，如果已存在则覆盖，不存在则追加
+					newRecords.forEach((newOrg: any) => {
+						const newOrgId = String(newOrg.id)
+						const existingIndex = organizationOptions.value.findIndex(
+							(org: any) => String(org.id) === newOrgId
+						)
+						if (existingIndex !== -1) {
+							// 如果已存在，用新数据覆盖旧项
+							organizationOptions.value[existingIndex] = newOrg
+						} else {
+							// 如果不存在，追加到末尾
+							organizationOptions.value.push(newOrg)
+						}
+					})
+					organizationParams.total = rv.total || 0
+				}
+			} finally {
+				organizationLoading.value = false
+			}
+		}
+
+		const handleOrganizationScroll = (e: any) => {
+			const target = e?.target
+			if (!target) return
+			const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
+			if (nearBottom) {
+				getOrganizationList(true)
+			}
+		}
+
 		onMounted(() => {
-			let allCountry: any = sessionStorage.getItem("allCountry");
+			let allCountry: any = sessionStorage.getItem("allCountry")
 			if (allCountry) {
-                filter.allCountry = JSON.parse(allCountry);
+				filter.allCountry = JSON.parse(allCountry)
 			}
-            gettrialList();
-        });
+			gettrialList()
+			getOrganizationList()
+		})
 		return {
 			...toRefs(filter),
 			...toRefs(filterData),
@@ -501,22 +554,26 @@ export default defineComponent({
 			filterOption,
 			allUserPoerationsVue,
 			setAagree,
-        };
+			handleOrganizationScroll,
+			getOrganizationList,
+			organizationOptions,
+			organizationParams
+		}
 	},
 	data() {
 		return {
 			historyTableHeight: 0,
 			handleResizeColumn: (w: any, col: any) => {
-                col.width = w;
-            },
-        };
+				col.width = w
+			}
+		}
 	},
 	mounted() {
-        let historyTable: any = this.$refs.historyTable;
-        this.historyTableHeight = historyTable.clientHeight - 200;
+		let historyTable: any = this.$refs.historyTable
+		this.historyTableHeight = historyTable.clientHeight - 200
 	},
-    methods: {},
-});
+	methods: {}
+})
 </script>
 <style lang="less" scoped>
 .admin_page .admin_table_search .admin_state {
@@ -524,6 +581,5 @@ export default defineComponent({
 	flex-wrap: wrap;
 }
 .admin_page {
-	
 }
 </style>
--- a/src/component/Administrator/subscriptionPlan.vue
+++ b/src/component/Administrator/subscriptionPlan.vue
@@ -5,8 +5,8 @@
 				class="search-form"
 				layout="inline"
 				:model="searchForm"
-        :label-col="{ style: { width: '12rem' } }"
-        :wrapper-col="{ style: { width: '22rem' } }"
+				:label-col="{ style: { width: '14rem' } }"
+				:wrapper-col="{ style: { width: '20rem' } }"
 			>
 				<a-form-item label="ID">
 					<a-input v-model:value="searchForm.id" allow-clear placeholder="Input the id" />
@@ -72,7 +72,7 @@
 						:options="countryList"
 					/>
 				</a-form-item>
-        <a-form-item>
+				<a-form-item class="search-form__actions">
 					<a-space>
 						<a-button type="primary" @click="handleSearch">Search</a-button>
 						<a-button @click="handleReset">Reset</a-button>
@@ -92,6 +92,7 @@
 					:loading="tableLoading"
 					:bordered="false"
 					row-key="id"
+					:customRow="customPlanRow"
 					@change="changePage"
 					@resizeColumn="handleResizeColumn"
 					:scroll="{ y: historyTableHeight }"
@@ -107,10 +108,11 @@
 					<template #bodyCell="{ column, record }">
 						<template
 							v-if="
-                column.key === 'currentPeriodStart' || column.key === 'currentPeriodEnd'
+								column.key === 'currentPeriodStart' ||
+								column.key === 'currentPeriodEnd'
 							"
 						>
-              {{ formatTime(record[column.key], 'YYYY-MM-DD hh:mm:ss') }}
+							{{ formatTime(record[column.key], "YYYY-MM-DD hh:mm:ss") }}
 						</template>

 						<template v-if="column.key === 'status'">
@@ -120,15 +122,15 @@
 						</template>

 						<template v-else-if="column.key === 'actions'">
-              <a-space>
-                <a @click="openEdit(record)">Edit</a>
+							<a-space class="plan-row-actions" @click.stop>
+								<a @click.stop="openEdit(record)">Edit</a>
 								<a-popconfirm
 									title="Confirm to delete this subscription plan?"
 									ok-text="Confirm"
 									cancel-text="Cancel"
 									@confirm="removePlan(record.id)"
 								>
-                  <a class="danger-text">Delete</a>
+									<a class="danger-text" @click.stop>Delete</a>
 								</a-popconfirm>
 							</a-space>
 						</template>
@@ -137,6 +139,50 @@
 			</div>
 		</a-card>

+		<a-modal
+			v-model:visible="userInfoModalVisible"
+			title="User Info"
+			width="80%"
+			:footer="null"
+			:destroy-on-close="true"
+			class="user-info-modal"
+		>
+			<a-table
+				:columns="userInfoColumns"
+				:data-source="userInfoList"
+				:loading="userInfoLoading"
+				:pagination="{
+					showSizeChanger: true,
+					current: userInfoPage.current,
+					pageSize: userInfoPage.size,
+					total: userInfoPage.total,
+					showQuickJumper: true,
+					bordered: false
+				}"
+				row-key="id"
+				:scroll="{ x: 1280, y: 420 }"
+				@change="changeUserInfoPage"
+			>
+				<template #bodyCell="{ column, record }">
+					<template
+						v-if="
+							column.key === 'validStartTime' ||
+							column.key === 'validEndTime' ||
+							column.key === 'createDate'
+						"
+					>
+						{{ formatUserTime(record[column.key]) }}
+					</template>
+					<template v-else-if="column.key === 'systemUser'">
+						{{ getSystemUserLabel(record.systemUser) }}
+					</template>
+					<template v-else-if="column.key === 'isBeginner'">
+						{{ record.isBeginner == 1 ? "Yes" : "No" }}
+					</template>
+				</template>
+			</a-table>
+		</a-modal>
+
 		<div class="subscriptionPlanModal" ref="subscriptionPlanModal"></div>
 		<a-modal
 			class="subscriptionPlan_modal generalModel"
@@ -213,7 +259,10 @@
 							@select="handleOrganizationSelect"
 							@change="handleOrganizationChange"
 						>
-              <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
+							<a-select-option
+								value="ADD_ORGANIZATION"
+								class="add-organization-option"
+							>
 								+ Create Organization
 							</a-select-option>
 							<a-select-option
@@ -393,27 +442,30 @@ import {
 		ref,
 		onMounted,
 		onBeforeUnmount,
+		onActivated,
 		computed,
 		nextTick,
 		useTemplateRef
-} from 'vue'
-import SelectUser from '@/component/common/SelectUser.vue'
-import { message } from 'ant-design-vue'
-import { Https } from '@/tool/https'
-import { formatTime } from '@/tool/util'
-import store from '@/store'
-import type { FormInstance, Rule } from 'ant-design-vue/es/form'
-import { debounce } from 'lodash-es'
-import dayjs, { Dayjs } from 'dayjs'
+	} from "vue"
+	import SelectUser from "@/component/common/SelectUser.vue"
+	import { message } from "ant-design-vue"
+	import { Https } from "@/tool/https"
+	import { formatTime } from "@/tool/util"
+	import store from "@/store"
+	import type { FormInstance, Rule } from "ant-design-vue/es/form"
+	import { debounce } from "lodash-es"
+	import dayjs, { Dayjs } from "dayjs"

-type PlanStatus = 'PENDING' | 'ACTIVE' | 'EXPIRED'
+	type PlanStatus = "PENDING" | "ACTIVE" | "EXPIRED"
 	interface SubscriptionPlan {
 		id: number
+		userId?: string | number
 		name: string
 		currentPeriodStart: string
 		currentPeriodEnd: string
 		organizationId: string
 		adminAccId: string
+		adminAccEmail?: string
 		status: PlanStatus
 		creditLimit: number
 		accountNum?: number
@@ -421,17 +473,32 @@ interface SubscriptionPlan {
 		endStamp: number
 	}

+	interface UserInfoRecord {
+		id: number
+		userEmail?: string
+		userName?: string
+		language?: string
+		validStartTime?: number | string
+		validEndTime?: number | string
+		country?: string
+		createDate?: number | string
+		isBeginner?: number
+		browserIdentifiers?: string
+		credits?: number
+		systemUser?: number | string
+	}
+
 	const countryList = ref([])
 	const userRef = ref(null)

 	const searchForm = reactive({
-  name: '',
-  startTime: '',
-  endTime: '',
+		name: "",
+		startTime: "",
+		endTime: "",
 		organizationId: undefined as string | undefined,
 		adminAccId: undefined as string | undefined,
 		status: [] as PlanStatus[] | [],
-  id: '',
+		id: "",
 		countryOrRegion: null,
 		page: 1,
 		size: 10,
@@ -442,15 +509,24 @@ const toSeconds = (dateStr: string) => Math.floor(new Date(dateStr).getTime() /

 	const tableData = ref<SubscriptionPlan[]>([])
 	const tableLoading = ref(false)
+	const userInfoModalVisible = ref(false)
+	const userInfoLoading = ref(false)
+	const userInfoList = ref<UserInfoRecord[]>([])
+	const currentUserInfoPlanId = ref<string | number | null>(null)
+	const userInfoPage = reactive({
+		current: 1,
+		size: 10,
+		total: 0
+	})

 	const modalVisible = ref(false)
 	const confirmLoading = ref(false)
-const modalTitle = ref('New Subscription Plan')
+	const modalTitle = ref("New Subscription Plan")
 	const isEditMode = ref(false)
 	const formState = reactive({
-  name: '',
-  currentPeriodStart: '',
-  currentPeriodEnd: '',
+		name: "",
+		currentPeriodStart: "",
+		currentPeriodEnd: "",
 		organizationId: undefined as string | undefined,
 		adminAccId: undefined as string | undefined,
 		creditLimit: null as number | null,
@@ -461,44 +537,44 @@ const formState = reactive({

 	const organizationModalVisible = ref(false)
 	const organizationForm = reactive({
-  name: '',
+		name: "",
 		type: undefined as string | undefined
 	})

 	const statusLabelMap: Record<PlanStatus, string> = {
-  PENDING: 'Pending',
-  ACTIVE: 'Active',
-  EXPIRED: 'Expired'
+		PENDING: "Pending",
+		ACTIVE: "Active",
+		EXPIRED: "Expired"
 	}
 	const statusColorMap: Record<PlanStatus, string> = {
-  PENDING: 'blue',
-  ACTIVE: 'green',
-  EXPIRED: 'red'
+		PENDING: "blue",
+		ACTIVE: "green",
+		EXPIRED: "red"
 	}

 	const statusOption = ref([
 		{
-    label: 'Pending',
-    value: 'PENDING'
+			label: "Pending",
+			value: "PENDING"
 		},
 		{
-    label: 'Active',
-    value: 'ACTIVE'
+			label: "Active",
+			value: "ACTIVE"
 		},
 		{
-    label: 'Expired',
-    value: 'EXPIRED'
+			label: "Expired",
+			value: "EXPIRED"
 		}
 	])

 	const disabledDate = (current: Dayjs) => {
-  return current && current < dayjs().subtract(1, 'days').endOf('day')
+		return current && current < dayjs().subtract(1, "days").endOf("day")
 	}

 	const disableEndDate = (current: Dayjs) => {
 		if (isEditMode.value) {
 			const specificTime = dayjs(formState.currentPeriodEnd)
-    return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf('day')
+			return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf("day")
 		}
 		return disabledDate(current)
 	}
@@ -509,7 +585,7 @@ const range = (start: number, end: number) => {
 		}
 		return result
 	}
-const disableEndTime = date => {
+	const disableEndTime = (date) => {
 		if (!formState.currentPeriodEnd || !isEditMode.value)
 			return {
 				disabledHours: () => [],
@@ -519,7 +595,7 @@ const disableEndTime = date => {

 		const specificTime = dayjs.unix(formState.currentPeriodEnd)

-  if (date && date.isSame(specificTime, 'day')) {
+		if (date && date.isSame(specificTime, "day")) {
 			// 如果是指定日期当天，禁用时间戳之前的时间
 			const hour = specificTime.hour()
 			const minute = specificTime.minute()
@@ -527,7 +603,7 @@ const disableEndTime = date => {

 			return {
 				disabledHours: () => Array.from({ length: hour }, (_, i) => i), // 禁用小时之前
-      disabledMinutes: selectedHour => {
+				disabledMinutes: (selectedHour) => {
 					if (selectedHour === hour) {
 						return Array.from({ length: minute }, (_, i) => i) // 同小时，禁用分钟之前
 					}
@@ -555,114 +631,328 @@ const normalizeStatus = (status?: string): PlanStatus | undefined => {
 		return upper
 	}
 	const getStatusColor = (status?: string) =>
-  statusColorMap[normalizeStatus(status) as PlanStatus] || 'default'
+		statusColorMap[normalizeStatus(status) as PlanStatus] || "default"

 	const columns = [
-  { title: 'Name', dataIndex: 'name', key: 'name', align: 'center', width: 180 },
-  { title: 'ID', dataIndex: 'id', key: 'id', align: 'center', width: 80 },
+		{ title: "Name", dataIndex: "name", key: "name", align: "center", width: 180 },
+		{ title: "ID", dataIndex: "id", key: "id", align: "center", width: 80 },
 		{
-    title: 'Organization',
-    dataIndex: 'organizationName',
-    key: 'organizationName',
-    align: 'center',
+			title: "Organization",
+			dataIndex: "organizationName",
+			key: "organizationName",
+			align: "center",
 			width: 180
 		},
 		{
-    title: 'Admin Account',
-    dataIndex: 'adminAccEmail',
-    key: 'adminAccEmail',
-    align: 'center',
+			title: "Admin Account",
+			dataIndex: "adminAccEmail",
+			key: "adminAccEmail",
+			align: "center",
 			width: 180,
 			ellipsis: true
 		},
 		{
-    title: 'Sub-Account Num',
-    dataIndex: 'accountNum',
-    key: 'accountNum',
-    align: 'center',
+			title: "Sub-Account Num",
+			dataIndex: "accountNum",
+			key: "accountNum",
+			align: "center",
 			width: 120,
 			ellipsis: true
 		},
 		{
-    title: 'Country or Region',
-    dataIndex: 'countryOrRegion',
-    key: 'countryOrRegion',
-    align: 'center',
+			title: "Country or Region",
+			dataIndex: "countryOrRegion",
+			key: "countryOrRegion",
+			align: "center",
 			width: 120,
 			ellipsis: true
 		},
 		{
-    title: 'Start Time',
-    dataIndex: 'currentPeriodStart',
-    key: 'currentPeriodStart',
-    align: 'center',
+			title: "Start Time",
+			dataIndex: "currentPeriodStart",
+			key: "currentPeriodStart",
+			align: "center",
 			width: 200
 		},
 		{
-    title: 'End Time',
-    dataIndex: 'currentPeriodEnd',
-    key: 'currentPeriodEnd',
-    align: 'center',
+			title: "End Time",
+			dataIndex: "currentPeriodEnd",
+			key: "currentPeriodEnd",
+			align: "center",
 			width: 200
 		},
-  { title: 'Status', dataIndex: 'status', key: 'status', align: 'center', width: 100 },
+		{ title: "Status", dataIndex: "status", key: "status", align: "center", width: 100 },
 		{
-    title: 'Credit Limit',
-    dataIndex: 'creditLimit',
-    key: 'creditLimit',
-    align: 'center',
+			title: "Credit Limit",
+			dataIndex: "creditLimit",
+			key: "creditLimit",
+			align: "center",
 			width: 120
 		},
-  { title: 'Operations', key: 'actions', width: 160, align: 'center', fixed: 'right' }
+		{ title: "Operations", key: "actions", width: 160, align: "center", fixed: "right" }
 	]

-const historyTable = ref()
+	const userInfoColumns = [
+		{ title: "User Id", dataIndex: "id", key: "id", align: "center", width: 100 },
+		{
+			title: "Email",
+			dataIndex: "userEmail",
+			key: "userEmail",
+			align: "center",
+			width: 200,
+			ellipsis: true
+		},
+		{
+			title: "User Name",
+			dataIndex: "userName",
+			key: "userName",
+			align: "center",
+			width: 150,
+			ellipsis: true
+		},
+
+		{
+			title: "Valid Start Time",
+			dataIndex: "validStartTime",
+			key: "validStartTime",
+			align: "center",
+			width: 200
+		},
+		{
+			title: "Valid End Time",
+			dataIndex: "validEndTime",
+			key: "validEndTime",
+			align: "center",
+			width: 200
+		},
+		{
+			title: "Country or Region",
+			dataIndex: "country",
+			key: "country",
+			align: "center",
+			width: 180,
+			ellipsis: true
+		},
+		{
+			title: "Credits",
+			dataIndex: "credits",
+			key: "credits",
+			align: "center",
+			width: 100
+		},
+		{
+			title: "User Type",
+			dataIndex: "systemUser",
+			key: "systemUser",
+			align: "center",
+			width: 120
+		}
+	]
+
+	const systemUserLabelMap: Record<string, string> = {
+		"0": "visitor",
+		"1": "yearly",
+		"2": "monthly",
+		"3": "trial",
+		"4": "userInEvent",
+		"7": "Edu Admin"
+	}
+
+	const getSystemUserLabel = (systemUser?: number | string) => {
+		if (systemUser === undefined || systemUser === null) return ""
+		return systemUserLabelMap[String(systemUser)] || String(systemUser)
+	}
+
+	const formatUserTime = (value?: number | string) => {
+		if (!value) return ""
+		if (typeof value === "number") {
+			return formatTime(value / 1000, "YYYY-MM-DD hh:mm:ss")
+		}
+		if (/^\d+$/.test(value)) {
+			return formatTime(Number(value) / 1000, "YYYY-MM-DD hh:mm:ss")
+		}
+		return value
+	}
+
+	const normalizeUserInfoList = (res: any): UserInfoRecord[] => {
+		if (Array.isArray(res)) return res
+		if (Array.isArray(res?.records)) return res.records
+		if (res) return [res]
+		return []
+	}
+
+	const buildUserInfoParams = (id: string | number) => ({
+		endTime: "",
+		startTime: "",
+		size: userInfoPage.size,
+		page: userInfoPage.current,
+		systemUser: "",
+		country: "",
+		email: "",
+		userType: "",
+		ids: [],
+		occupation: "",
+		order: "",
+		orderBy: "",
+		userName: "",
+		subscriptionPlanId: id
+	})
+
+	const fetchUserInfo = async () => {
+		if (currentUserInfoPlanId.value === null) return
+		userInfoLoading.value = true
+		userInfoList.value = []
+
+		try {
+			const res = await Https.axiosPost(
+				Https.httpUrls.getUserInfo,
+				buildUserInfoParams(currentUserInfoPlanId.value)
+			)
+			const records = normalizeUserInfoList(res)
+			userInfoList.value = records
+			userInfoPage.total = Number(res?.total ?? records.length)
+		} catch (error: any) {
+			message.error(error.message || "Failed to load user info")
+			console.error(error)
+		} finally {
+			userInfoLoading.value = false
+		}
+	}
+
+	const openUserInfo = async (record: SubscriptionPlan) => {
+		console.log(record)
+		// debugger
+
+		currentUserInfoPlanId.value = record.id
+		userInfoPage.current = 1
+		userInfoModalVisible.value = true
+		await fetchUserInfo()
+	}
+
+	const changeUserInfoPage = (pagination: any) => {
+		userInfoPage.current = pagination.current
+		userInfoPage.size = pagination.pageSize
+		fetchUserInfo()
+	}
+
+	const customPlanRow = (record: SubscriptionPlan) => {
+		return {
+			onClick: (event: MouseEvent) => {
+				const target = event.target as HTMLElement | null
+				if (target?.closest(".plan-row-actions")) return
+				openUserInfo(record)
+			}
+		}
+	}
+
+	const historyTable = ref<HTMLElement | null>(null)
 	const historyTableHeight = ref(0)
+	const minTableBodyHeight = 120
+	let tableResizeObserver: ResizeObserver | null = null
+	let tableResizeTimer: ReturnType<typeof window.setTimeout> | null = null
+
 	const handleResizeColumn = (w: any, col: any) => {
 		col.width = w
 	}

-const calculateTableHeight = () => {
-  nextTick(() => {
-    if (historyTable.value) {
-      historyTableHeight.value = historyTable.value.clientHeight - 200
+	const getElementOuterHeight = (element: Element | null) => {
+		if (!element) return 0
+		const htmlElement = element as HTMLElement
+		const style = window.getComputedStyle(htmlElement)
+		return (
+			htmlElement.offsetHeight +
+			Number.parseFloat(style.marginTop || "0") +
+			Number.parseFloat(style.marginBottom || "0")
+		)
 	}
+
+	const calculateTableHeight = () => {
+		if (tableResizeTimer) {
+			window.clearTimeout(tableResizeTimer)
+		}
+		tableResizeTimer = window.setTimeout(() => {
+			nextTick(() => {
+				const tableWrapper = historyTable.value
+				if (!tableWrapper) {
+					tableResizeTimer = null
+					return
+				}
+
+				const tableHead = tableWrapper.querySelector(".ant-table-thead") ?? null
+				const pagination = tableWrapper.querySelector(".ant-pagination") ?? null
+				const tableHeadHeight = getElementOuterHeight(tableHead) || 55
+				const paginationHeight = getElementOuterHeight(pagination) || 48
+				const reservedHeight = tableHeadHeight + paginationHeight + 8
+
+				historyTableHeight.value = Math.max(
+					minTableBodyHeight,
+					tableWrapper.clientHeight - reservedHeight
+				)
+				tableResizeTimer = null
 			})
+		}, 50)
 	}

 	const handleResize = () => {
 		calculateTableHeight()
 	}

+	const setupTableResizeObserver = () => {
+		if (!historyTable.value || typeof ResizeObserver === "undefined") return
+		tableResizeObserver?.disconnect()
+		tableResizeObserver = new ResizeObserver(() => {
+			calculateTableHeight()
+		})
+		tableResizeObserver.observe(historyTable.value)
+
+		const searchCard = historyTable.value
+			.closest(".subscription-plan")
+			?.querySelector(".search-card")
+		if (searchCard) {
+			tableResizeObserver.observe(searchCard)
+		}
+	}
+
 	onMounted(async () => {
 		await getOrganizationList()
 		await handleSearch()
 		calculateTableHeight()
-  window.addEventListener('resize', handleResize)
-  const list = sessionStorage.getItem('allCountry')
+		setupTableResizeObserver()
+		window.addEventListener("resize", handleResize)
+		const list = sessionStorage.getItem("allCountry")
 		countryList.value = list ? JSON.parse(list) : []
 	})

+	onActivated(() => {
+		calculateTableHeight()
+	})
+
 	onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
+		window.removeEventListener("resize", handleResize)
+		tableResizeObserver?.disconnect()
+		if (tableResizeTimer) {
+			window.clearTimeout(tableResizeTimer)
+			tableResizeTimer = null
+		}
 	})

 	const handleFetchTableData = async () => {
 		tableLoading.value = true
 		return Https.axiosPost(Https.httpUrls.searchAllSubscribePlan, searchForm)
-    .then(res => {
+			.then((res) => {
 				tableData.value = res.records
 				searchForm.total = res.total
 			})
 			.finally(() => {
 				tableLoading.value = false
+				calculateTableHeight()
 			})
 	}

 	const resetFormState = () => {
-  formState.name = ''
-  formState.currentPeriodStart = ''
-  formState.currentPeriodEnd = ''
+		formState.name = ""
+		formState.currentPeriodStart = ""
+		formState.currentPeriodEnd = ""
 		formState.organizationId = undefined
 		formState.adminAccId = undefined
 		formState.creditLimit = null
@@ -683,26 +973,26 @@ const handleSearch = () => {
 	}

 	const handleReset = () => {
-  searchForm.name = ''
-  searchForm.startTime = ''
-  searchForm.endTime = ''
+		searchForm.name = ""
+		searchForm.startTime = ""
+		searchForm.endTime = ""
 		searchForm.organizationId = undefined
 		searchForm.adminAccId = undefined
 		searchForm.status = []
-  searchForm.id = ''
+		searchForm.id = ""
 		searchForm.countryOrRegion = null
 		handleSearch()
 	}

 	const openCreate = () => {
-  modalTitle.value = 'New Subscription Plan'
+		modalTitle.value = "New Subscription Plan"
 		isEditMode.value = false
 		resetFormState()
 		modalVisible.value = true
 	}

 	const openEdit = (record: SubscriptionPlan) => {
-  modalTitle.value = 'Edit Subscription Plan'
+		modalTitle.value = "Edit Subscription Plan"
 		isEditMode.value = true
 		formState.name = record.name
 		formState.currentPeriodStart = String(record.currentPeriodStart)
@@ -755,25 +1045,25 @@ const validateForm = (): boolean => {
 		}

 		const requiredFields: FieldRule[] = [
-    { value: formState.currentPeriodStart, message: 'Please select the start time' },
-    { value: formState.currentPeriodEnd, message: 'Please select the end time' },
-    { value: formState.adminAccId, message: 'Please select the admin account' },
+			{ value: formState.currentPeriodStart, message: "Please select the start time" },
+			{ value: formState.currentPeriodEnd, message: "Please select the end time" },
+			{ value: formState.adminAccId, message: "Please select the admin account" },
 			{
 				value: formState.creditLimit,
-      message: 'Please input credit limit',
+				message: "Please input credit limit",
 				checkNull: true
 			},
 			{
 				value: formState.accountNum,
-      message: 'Please input account number',
+				message: "Please input account number",
 				checkNull: true
 			}
 		]

 		if (!isEditMode.value) {
 			requiredFields.push(
-      { value: formState.name, message: 'Please input the name' },
-      { value: formState.organizationId, message: 'Please select organization' }
+				{ value: formState.name, message: "Please input the name" },
+				{ value: formState.organizationId, message: "Please select organization" }
 			)
 		}

@@ -806,7 +1096,7 @@ const handleSubmit = async () => {
 				res = await Https.axiosPost(Https.httpUrls.createSubscribePlan, params)
 			}
 			message.success(
-      `${isEditMode.value ? 'Subscription plan updated' : 'Subscription plan created'}`
+				`${isEditMode.value ? "Subscription plan updated" : "Subscription plan created"}`
 			)
 		} catch (error: any) {
 			message.error(error.message)
@@ -835,8 +1125,8 @@ const cancelModal = () => {
 	const removePlan = (id: number) => {
 		tableLoading.value = true
 		Https.axiosGet(Https.httpUrls.deleteSubscribePlan, { params: { id } })
-    .then(res => {
-      message.success('Subscription plan deleted')
+			.then((res) => {
+				message.success("Subscription plan deleted")
 				handleReset()
 			})
 			.catch((error: any) => {
@@ -901,15 +1191,15 @@ const handleOrganizationScroll = (e: any) => {
 	}

 	const handleOrganizationSelect = (value: string) => {
-  if (value === 'ADD_ORGANIZATION') {
+		if (value === "ADD_ORGANIZATION") {
 			// 打开添加组织弹窗
 			organizationModalVisible.value = true
 			// 使用nextTick确保值被重置，使其不被选中
 			nextTick(() => {
-      if (searchForm.organizationId === 'ADD_ORGANIZATION') {
+				if (searchForm.organizationId === "ADD_ORGANIZATION") {
 					searchForm.organizationId = undefined
 				}
-      if (formState.organizationId === 'ADD_ORGANIZATION') {
+				if (formState.organizationId === "ADD_ORGANIZATION") {
 					formState.organizationId = undefined
 				}
 			})
@@ -918,12 +1208,12 @@ const handleOrganizationSelect = (value: string) => {

 	const handleOrganizationChange = (value: string) => {
 		// 如果change事件触发时值是"添加组织"，立即重置
-  if (value === 'ADD_ORGANIZATION') {
+		if (value === "ADD_ORGANIZATION") {
 			nextTick(() => {
-      if (searchForm.organizationId === 'ADD_ORGANIZATION') {
+				if (searchForm.organizationId === "ADD_ORGANIZATION") {
 					searchForm.organizationId = undefined
 				}
-      if (formState.organizationId === 'ADD_ORGANIZATION') {
+				if (formState.organizationId === "ADD_ORGANIZATION") {
 					formState.organizationId = undefined
 				}
 			})
@@ -932,13 +1222,13 @@ const handleOrganizationChange = (value: string) => {

 	const cancelOrganizationModal = () => {
 		organizationModalVisible.value = false
-  organizationForm.name = ''
+		organizationForm.name = ""
 		organizationForm.type = undefined
 	}

 	const handleCreateOrganization = async () => {
 		if (!organizationForm.name || !organizationForm.type) {
-    message.warning('Please fill in name and type')
+			message.warning("Please fill in name and type")
 			return
 		}
 		try {
@@ -948,7 +1238,7 @@ const handleCreateOrganization = async () => {
 					type: organizationForm.type
 				}
 			})
-    message.success('Organization created successfully')
+			message.success("Organization created successfully")
 			cancelOrganizationModal()
 			// 刷新组织列表
 			await getOrganizationList()
@@ -960,26 +1250,28 @@ const handleCreateOrganization = async () => {
 				}
 			}
 		} catch (error: any) {
-    message.error(error.message || 'Failed to create organization')
+			message.error(error.message || "Failed to create organization")
 			console.error(error)
 		}
 	}

 	const filterOption = (input: string, option: any) => {
-  const label = option?.label ?? option?.children ?? option?.key?.label ?? ''
+		const label = option?.label ?? option?.children ?? option?.key?.label ?? ""
 		return String(label).toLowerCase().includes(input.toLowerCase())
 	}
 </script>

 <style lang="less" scoped>
 	.subscription-plan {
-  padding: 2rem 2.4rem 3.2rem 0;
+		padding: 2rem 2.4rem 0 0;
 		display: flex;
 		height: 100%;
+		min-height: 0;
 		flex-direction: column;

 		.search-card {
 			margin-bottom: 1.6rem;
+			flex-shrink: 0;
 		}

 		.table-card {
@@ -987,13 +1279,15 @@ const filterOption = (input: string, option: any) => {
 			display: flex;
 			flex-direction: column;
 			overflow: hidden;
+			min-height: 0;

 			:deep(.ant-card-body) {
 				flex: 1;
 				display: flex;
 				flex-direction: column;
 				overflow: hidden;
-      padding: 2.4rem;
+				padding: 2.4rem 2.4rem 0;
+				min-height: 0;
 			}

 			.table-card__header {
@@ -1007,6 +1301,42 @@ const filterOption = (input: string, option: any) => {
 				flex: 1;
 				overflow: hidden;
 				min-height: 0;
+
+				:deep(.ant-table-wrapper),
+				:deep(.ant-spin-nested-loading),
+				:deep(.ant-spin-container) {
+					height: 100%;
+				}
+
+				:deep(.ant-spin-container) {
+					display: flex;
+					flex-direction: column;
+					overflow: hidden;
+				}
+
+				:deep(.ant-table) {
+					flex: 1;
+					min-height: 0;
+					overflow: hidden;
+				}
+
+				:deep(.ant-table-container) {
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+				}
+
+				:deep(.ant-table-content) {
+					height: 100%;
+				}
+
+				:deep(.ant-table-body) {
+					overflow-y: auto !important;
+				}
+
+				:deep(.ant-pagination) {
+					flex-shrink: 0;
+				}
 			}

 			.danger-text {
@@ -1026,8 +1356,23 @@ const filterOption = (input: string, option: any) => {
 			:deep(.ant-table-tbody > tr:hover > td) {
 				background: rgb(202, 202, 202);
 			}
+
+			:deep(.ant-table-tbody > tr) {
+				cursor: pointer;
+			}
+
+			:deep(.plan-row-actions) {
+				cursor: default;
 			}
 		}
+	}
+
+	.user-info-modal {
+		:deep(.ant-modal-body) {
+			padding: 2.4rem;
+		}
+	}
+
 	:deep(.subscriptionPlan_modal) {
 		.ant-modal-body {
 			// height: calc(65rem * 1.2);
@@ -1079,11 +1424,69 @@ const filterOption = (input: string, option: any) => {
 	}

 	:deep(.search-form) {
-  column-gap: 2rem;
-  row-gap: 2rem;
+		--search-label-width: 14rem;
+		--search-control-width: 20rem;
+		align-items: flex-start;
+		column-gap: 1.8rem;
+		row-gap: 1.8rem;
+
+		.ant-form-item {
+			min-width: calc(var(--search-label-width) + var(--search-control-width));
+			margin-right: 0;
+			margin-bottom: 0;
+		}
+
+		.ant-form-item-label {
+			flex: 0 0 var(--search-label-width);
+			max-width: var(--search-label-width);
+			overflow: visible;
+			white-space: nowrap;
+
+			> label {
+				white-space: nowrap;
+			}
+		}
+
+		.ant-form-item-control {
+			flex: 0 0 var(--search-control-width);
+			max-width: var(--search-control-width);
+		}
+
+		.ant-input,
+		.ant-input-affix-wrapper,
+		.ant-picker,
 		.ant-select {
 			width: 100% !important;
 		}
+
+		.search-form__actions {
+			min-width: auto;
+
+			.ant-form-item-control {
+				flex: 0 0 auto;
+				max-width: none;
+			}
+		}
+	}
+
+	@media (min-width: 1600px) {
+		:deep(.search-form) {
+			--search-control-width: 22rem;
+		}
+	}
+
+	@media (max-width: 760px) {
+		:deep(.search-form) {
+			.ant-form-item {
+				flex: 1 1 100%;
+				min-width: 100%;
+			}
+
+			.ant-form-item-control {
+				flex: 1 1 auto;
+				max-width: calc(100% - var(--search-label-width));
+			}
+		}
 	}

 	:deep(.ant-select-dropdown) {
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -1737,7 +1737,7 @@ export default {
 		GetStarted: '开始体验',
 	},
  SellerListEdit:{
-		saveDraft: "保存草稿",
+		saveDraft: "全部保存",
 		publish: "发布",
 		sketch: "线稿图",
 		mainProductImage: "产品主图",
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1788,7 +1788,7 @@ export default {
 		GetStarted: 'Get Started',
 	},
 	SellerListEdit:{
-		saveDraft:'Save Draft',
+		saveDraft:'Save All New',
 		publish:'Publish',
 		sketch:'Sketch',
 		mainProductImage:'Main Product Image',
--- a/src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
+++ b/src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
@@ -144,7 +144,6 @@ const open = (url, callback, options, origin) => {
 		coverOrigin.value = origin
 		data.url = origin[0].url
 	}
-	console.log("-------", origin)
 	show.value = true
 }
 const onCancel = () => {
--- a/src/views/SellerDashboard/BrandProfile/image-clip.vue
+++ b/src/views/SellerDashboard/BrandProfile/image-clip.vue
@@ -204,23 +204,23 @@
 				.cropper-box-canvas {
 					background-color: #ffffff;

-					img {
-						height: 100%;
-					}
+					// 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;
-					}
-				}
+				// :deep(.cropper-box-canvas) {
+				// 	width: 31.1rem !important;
+				// 	left: 50% !important;
+				// 	transform: translateX(-50%) !important;
+				// 	img {
+				// 		display: none;
+				// 	}
+				// }
 			}
 		}

--- a/src/views/SellerDashboard/MyListings/EditDetail/components/ApparelSketchList.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/ApparelSketchList.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ListingItem } from "../types"
+
+defineProps<{
+	sketchList: ListingItem["sketchList"]
+}>()
+
+const emit = defineEmits<{
+	(e: "crop", data: string | null, type: "apparel", index?: number): void
+}>()
+</script>
+
+<template>
+	<div class="apparel-container">
+		<div class="title">
+			<span class="main-title">{{ $t("SellerListEdit.apparelSketchTitle") }}</span>
+			<span class="sub-title">{{ $t("SellerListEdit.apparelSketchSubTitle") }}</span>
+		</div>
+		<div class="sketch-list-container flex">
+			<div
+				v-for="(item, index) in sketchList"
+				:key="index"
+				class="sketch-element flex flex-center"
+			>
+				<img class="img-src" :src="item.url || ''" alt="" />
+				<div class="crop-tool flex flex-center" @click="emit('crop', item.url, 'apparel', index)">
+					<SvgIcon name="CCrop" color="#fff" size="12" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.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 {
+				width: 100%;
+			}
+
+			.crop-tool {
+				position: absolute;
+				top: 0.4rem;
+				right: 0.4rem;
+				width: 2rem;
+				height: 2rem;
+				border-radius: 50%;
+				background-color: #000000;
+			}
+		}
+	}
+}
+</style>
--- a/src/views/SellerDashboard/MyListings/EditDetail/components/ListingForm.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/ListingForm.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import Radio from "./Radio.vue"
+import type { RadioOption } from "../types"
+
+defineProps<{
+	productName: string
+	price: string
+	desc: string
+	gender: string
+	category: string[] | null
+	genderOptions: RadioOption[]
+	categoryOptions: RadioOption[]
+}>()
+
+const emit = defineEmits<{
+	(e: "update:productName", value: string): void
+	(e: "update:price", value: string): void
+	(e: "update:desc", value: string): void
+	(e: "update:gender", value: string): void
+	(e: "update:category", value: string[] | null): void
+}>()
+</script>
+
+<template>
+	<div class="form-container flex flex-col">
+		<div class="form-item">
+			<div class="form-item-label required">
+				{{ $t("SellerListEdit.productName") }}
+			</div>
+			<div class="form-item-value product-name">
+				<a-input
+					:value="productName"
+					show-count
+					placeholder="Enter product name"
+					:bordered="false"
+					:maxlength="60"
+					@update:value="emit('update:productName', $event)"
+				/>
+			</div>
+		</div>
+		<div class="form-item">
+			<div class="form-item-label required">{{ $t("SellerListEdit.price") }}</div>
+			<div class="form-item-value price flex align-center">
+				<span>HK$</span>
+				<a-input
+					:value="price"
+					placeholder="0.00"
+					:bordered="false"
+					@update:value="emit('update:price', $event)"
+				/>
+			</div>
+		</div>
+		<div class="form-item">
+			<div class="form-item-label required">
+				{{ $t("SellerListEdit.productDescription") }}
+			</div>
+			<div class="form-item-value desc">
+				<a-textarea
+					:value="desc"
+					show-count
+					:rows="4"
+					placeholder="Enter product description"
+					:bordered="false"
+					:maxlength="500"
+					@update:value="emit('update:desc', $event)"
+				/>
+			</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"
+					:model-value="gender"
+					@update:model-value="emit('update:gender', $event)"
+				/>
+			</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
+					multiple
+					:options="categoryOptions"
+					:model-value="category"
+					@update:model-value="emit('update:category', $event)"
+				/>
+			</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>
+</template>
+
+<style lang="less" scoped>
+.required {
+	&::after {
+		content: "*";
+		color: #df2b2c;
+		margin-left: 0.4rem;
+	}
+}
+
+.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;
+			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;
+				}
+			}
+		}
+	}
+}
+
+.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;
+		}
+	}
+}
+</style>
--- a/src/views/SellerDashboard/MyListings/EditDetail/components/ProductImageList.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/ProductImageList.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { ListingItem } from "../types"
+
+const props = defineProps<{
+	imageList: ListingItem["prodImageList"]
+	firstSelectedIndex: number | null
+}>()
+
+const emit = defineEmits<{
+	(e: "select", index: number): void
+}>()
+
+const selectedCount = computed(() => props.imageList.filter((item) => item.selected).length)
+</script>
+
+<template>
+	<div class="product-image-list-container">
+		<div class="title flex align-center space-between">
+			<div class="title-left">
+				<span class="main-title">{{ $t("SellerListEdit.productImageMainTitle") }}</span>
+				<span class="sub-title">{{ $t("SellerListEdit.productImageSubTitle") }}</span>
+			</div>
+			<div class="title-right">{{ selectedCount }}/{{ imageList.length }} selected</div>
+		</div>
+		<div class="product-image-list flex">
+			<div
+				v-for="(item, index) in imageList"
+				:key="index"
+				class="product-image-item flex flex-center"
+				:class="{ selected: item.selected }"
+				@click="emit('select', index)"
+			>
+				<img
+					v-if="item.selected"
+					src="@/assets/images/seller/checked.png"
+					class="checked"
+					alt=""
+				/>
+				<img class="img-src" :src="item.url" alt="" />
+				<div v-if="item.selected && index === firstSelectedIndex" class="main-pic">
+					main
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.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;
+			}
+		}
+	}
+}
+</style>
--- a/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue
@@ -8,7 +8,7 @@
 				'radio-button',
 				{
 					'is-active': multiple
-						? selectedValues.includes(item.key)
+						? selectedValues.includes(normalizeValue(item.key))
 						: modelValue === item.key
 				}
 			]"
@@ -30,7 +30,12 @@
 }

 const props = defineProps<{
-		modelValue: string | number | boolean | Array<string | number | boolean> | null
+	modelValue:
+		| string
+		| number
+		| boolean
+		| Array<string | number | boolean | null | undefined>
+		| null
 	options: Option[] // 按钮选项数组
 	multiple?: boolean // 是否支持多选，默认为 false
 }>()
@@ -41,6 +46,9 @@

 const multiple = props.multiple === true

+const normalizeValue = (value: any) =>
+	typeof value === "string" ? value.toLocaleLowerCase() : value
+
 const selectedValues = computed(() => {
 	if (!multiple) {
 		return typeof props.modelValue === "undefined" || props.modelValue === null
@@ -48,19 +56,30 @@
 			: [props.modelValue]
 	}

-		return Array.isArray(props.modelValue) ? props.modelValue : []
+	return Array.isArray(props.modelValue)
+		? props.modelValue
+				.filter((value) => value !== null && typeof value !== "undefined")
+				.map(normalizeValue)
+		: []
 })

 const selectOption = (value: any) => {
 	if (multiple) {
-			const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-			const index = current.indexOf(value)
+		const selectedValue = normalizeValue(value)
+		const current = Array.isArray(props.modelValue)
+			? props.modelValue
+					.filter((item) => item !== null && typeof item !== "undefined")
+					.map(normalizeValue)
+			: []
+		const index = current.indexOf(selectedValue)
+
 		if (index >= 0) {
 			current.splice(index, 1)
 		} else {
-				current.push(value.toLocaleLowerCase)
+			current.push(selectedValue)
 		}
-			emit("update:modelValue", current)
+
+		emit("update:modelValue", current.length ? current : null)
 		return
 	}

--- a/src/views/SellerDashboard/MyListings/EditDetail/components/TopImageSection.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/components/TopImageSection.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { TopImageType } from "../types"
+
+defineProps<{
+	images: Record<TopImageType, string | null>
+}>()
+
+const emit = defineEmits<{
+	(e: "crop", data: string | null, type: TopImageType): void
+}>()
+
+const topImageList: TopImageType[] = ["sketch", "mainProductImage", "cover"]
+const topImageTitleMap: Record<TopImageType, string> = {
+	sketch: "SellerListEdit.sketch",
+	mainProductImage: "SellerListEdit.mainProductImage",
+	cover: "SellerListEdit.cover"
+}
+</script>
+
+<template>
+	<div class="main-image-container flex">
+		<div
+			v-for="type in topImageList"
+			:key="type"
+			:class="`main-image-item flex flex-col align-center ${type}`"
+		>
+			<div class="title" :class="{ required: type !== 'mainProductImage' }">
+				{{ $t(topImageTitleMap[type]) }}
+			</div>
+			<div class="sketch-item flex flex-center" :class="type">
+				<div
+					v-if="images[type]"
+					class="crop-tool flex flex-center"
+					@click="emit('crop', images[type], type)"
+				>
+					<SvgIcon name="CCrop" color="#fff" size="12" />
+				</div>
+				<img
+					v-if="images[type]"
+					:src="images[type] || ''"
+					class="sketch-img"
+					:class="type"
+					alt=""
+				/>
+				<div v-else class="trigger flex flex-col align-center">
+					<div
+						v-if="type === 'cover'"
+						class="cover-trigger flex flex-col align-center"
+						@click="emit('crop', null, 'cover')"
+					>
+						<SvgIcon class="trigger-icon" name="CCrop" color="#585858" size="24" />
+						<div class="trigger-tips">
+							{{ $t("SellerListEdit.cropDesc") }}
+						</div>
+					</div>
+					<template v-else>
+						<div class="trigger-img placeholder"></div>
+						<div class="trigger-tips">
+							{{ $t("SellerListEdit.productImageDesc") }}
+						</div>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+.c-svg {
+	width: initial;
+	height: initial;
+}
+
+.required {
+	&::after {
+		content: "*";
+		color: #df2b2c;
+		margin-left: 0.4rem;
+	}
+}
+
+.main-image-container {
+	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;
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/views/SellerDashboard/MyListings/EditDetail/index.vue
+++ b/src/views/SellerDashboard/MyListings/EditDetail/index.vue
@@ -28,191 +28,32 @@
 		</seller-header>
 		<div class="edit-detail-content flex">
 			<div class="left">
-				<div class="main-image-container flex">
-					<div
-						v-for="type in topImageList"
-						:key="type"
-						:class="`main-image-item flex flex-col align-center ${type}`"
-					>
-						<div class="title" :class="{ required: type !== 'mainProductImage' }">
-							{{ $t(topImageTitleMap[type]) }}
-						</div>
-						<div class="sketch-item flex flex-center" :class="type">
-							<div
-								v-if="previewImageMap[type]"
-								class="crop-tool flex flex-center"
-								@click="handleClickCrop(previewImageMap[type], type)"
-							>
-								<SvgIcon name="CCrop" color="#fff" size="12" />
-							</div>
-							<img
-								v-if="previewImageMap[type]"
-								:src="previewImageMap[type]"
-								class="sketch-img"
-								:class="type"
-								alt=""
+				<TopImageSection :images="previewImageMap" @crop="handleClickCrop" />
+				<ProductImageList
+					:image-list="prodImgList"
+					:first-selected-index="firstSelectedIndex"
+					@select="handleSelectProdImg"
 				/>
-							<div v-else class="trigger flex flex-col align-center">
-								<div
-									v-if="type === 'cover'"
-									class="cover-trigger flex flex-col align-center"
-									@click="handleClickCrop(null, 'cover')"
-								>
-									<SvgIcon
-										class="trigger-icon"
-										name="CCrop"
-										color="#585858"
-										size="24"
+				<ApparelSketchList
+					:sketch-list="currentListing.sketchList"
+					@crop="handleClickCrop"
 				/>
-									<div class="trigger-tips">
-										{{ $t("SellerListEdit.cropDesc") }}
-									</div>
-								</div>
-								<template v-else>
-									<div class="trigger-img placeholder"></div>
-									<div class="trigger-tips">
-										{{ $t("SellerListEdit.productImageDesc") }}
-									</div>
-								</template>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="product-image-list-container">
-					<div class="title flex align-center space-between">
-						<div class="title-left">
-							<span class="main-title">{{
-								$t("SellerListEdit.productImageMainTitle")
-							}}</span>
-							<span class="sub-title">{{
-								$t("SellerListEdit.productImageSubTitle")
-							}}</span>
-						</div>
-						<div class="title-right">
-							{{ selectedProdImgs }}/{{ prodImgList.length }} selected
-						</div>
-					</div>
-					<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 }"
-							@click="handleSelectProdImg(index)"
-						>
-							<img
-								v-if="item.selected"
-								src="@/assets/images/seller/checked.png"
-								class="checked"
-								alt=""
-							/>
-							<img class="img-src" :src="item.url" alt="" />
-							<div
-								v-if="item.selected && index === firstSelectedIndex"
-								class="main-pic"
-							>
-								main
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="apparel-container">
-					<div class="title">
-						<span class="main-title">{{
-							$t("SellerListEdit.apparelSketchTitle")
-						}}</span>
-						<span class="sub-title">
-							{{ $t("SellerListEdit.apparelSketchSubTitle") }}</span
-						>
-					</div>
-					<div class="sketch-list-container flex">
-						<div
-							v-for="(item, index) in selectList[currentIndex].sketchList"
-							:key="index"
-							class="sketch-element flex flex-center"
-						>
-							<img class="img-src" :src="item.url" alt="" />
-							<div
-								class="crop-tool flex flex-center"
-								@click="handleClickCrop(item.url, 'apparel')"
-							>
-								<SvgIcon name="CCrop" color="#fff" size="12" />
-							</div>
-						</div>
-					</div>
-				</div>
 			</div>
 			<div class="right">
-				<div class="form-container flex flex-col">
-					<div class="form-item">
-						<div class="form-item-label required">
-							{{ $t("SellerListEdit.productName") }}
-						</div>
-						<div class="form-item-value product-name">
-							<a-input
-								v-model:value="currentListing.productName"
-								show-count
-								placeholder="Enter product name"
-								:bordered="false"
-								:maxlength="60"
+				<ListingForm
+					:product-name="currentListing.productName"
+					:price="currentListing.price"
+					:desc="currentListing.desc"
+					:gender="currentListing.gender"
+					:category="currentListing.category"
+					:gender-options="genderOptions"
+					:category-options="categoryOptions"
+					@update:product-name="currentListing.productName = $event"
+					@update:price="currentListing.price = $event"
+					@update:desc="currentListing.desc = $event"
+					@update:gender="currentListing.gender = $event"
+					@update:category="currentListing.category = $event"
 				/>
-						</div>
-					</div>
-					<div class="form-item">
-						<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="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
-								multiple
-								: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" v-if="selectList.length > 1">
 					<a-pagination
 						v-model:current="currentPage"
@@ -238,13 +79,16 @@
 </template>

 <script setup lang="ts">
-	import { computed, ref, watch, onMounted } from "vue"
+	import { computed, ref, 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 ApparelSketchList from "./components/ApparelSketchList.vue"
+	import ListingForm from "./components/ListingForm.vue"
+	import ProductImageList from "./components/ProductImageList.vue"
+	import TopImageSection from "./components/TopImageSection.vue"
 	import { useStore } from "vuex"
 	import {
 		fetchSketchDetail,
@@ -252,6 +96,13 @@
 		fetchListingDetailById,
 		fetchUpdateListing
 	} from "./api"
+	import type {
+		ListingDetailImage,
+		ListingDetailResponse,
+		ListingItem,
+		RadioOption,
+		StatusType
+	} from "./types"

 	const ROUTER = useRouter()
 	const { t } = useI18n()
@@ -264,31 +115,6 @@

 	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
@@ -308,16 +134,9 @@
 		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[]> = {
+	const fallbackCategoryOptions: Record<string, RadioOption[]> = {
 		MALE: STORE.state.UserHabit?.MalePosition || [],
 		FEMALE: STORE.state.UserHabit?.FemalePosition || []
 	}
@@ -343,21 +162,96 @@
 		cover: currentListing.value.cover
 	}))

-	const firstSelectedIndex = ref(null) //显示main标签的图片索引
-	const selectedProdImgs = computed(() => {
-		return prodImgList.value.filter((item) => item.selected).length
+	const firstSelectedIndex = ref<number | null>(null) //显示main标签的图片索引
+
+	const getSortedDetailImages = (images: ListingDetailImage[] = []) => {
+		return [...images].sort((prev, next) => (prev.sortOrder ?? 0) - (next.sortOrder ?? 0))
+	}
+
+	const getImageSelected = (value: ListingDetailImage["isSelected"]) =>
+		value === true || value === 1 || value === "1"
+
+	const normalizeDetailGender = (value: ListingDetailResponse["designFor"]) => {
+		const gender = String(value || "").toUpperCase()
+		return gender === "MALE" || gender === "FEMALE" ? gender : "FEMALE"
+	}
+
+	const normalizeDetailCategory = (
+		value: ListingDetailResponse["productCategory"]
+	): ListingItem["category"] => {
+		const categories = Array.isArray(value) ? value : value ? [value] : []
+		const normalized = categories
+			.filter((category) => category !== null && typeof category !== "undefined")
+			.map((category) => String(category).toLowerCase())
+
+		return normalized.length ? normalized : null
+	}
+
+	const createListingItemFromDetail = (detail: ListingDetailResponse): ListingItem => {
+		const listing = createListingItem()
+
+		listing.productName = detail.title || ""
+		listing.price =
+			detail.price === null || typeof detail.price === "undefined" ? "" : String(detail.price)
+		listing.desc = detail.description || ""
+		listing.gender = normalizeDetailGender(detail.designFor)
+		listing.category = normalizeDetailCategory(detail.productCategory)
+
+		getSortedDetailImages(detail.images || []).forEach((image) => {
+			const imageUrl = image.imageUrl || ""
+			if (!imageUrl) return
+
+			if (image.category === "cover") {
+				listing.cover = imageUrl
+				return
+			}
+
+			if (image.category === "sketch") {
+				listing.sketch = imageUrl
+				return
+			}
+
+			if (image.category === "mainProductImage") {
+				listing.mainProductImage = imageUrl
+				return
+			}
+
+			if (image.category === "main_product" || image.category === "product") {
+				listing.prodImageList.push({
+					url: imageUrl,
+					selected: getImageSelected(image.isSelected)
 				})
+				return
+			}
+
+			if (image.category === "apparel") {
+				listing.sketchList.push({ url: imageUrl })
+			}
+		})
+
+		if (!listing.mainProductImage) {
+			listing.mainProductImage =
+				listing.prodImageList.find((item) => item.selected)?.url || ""
+		}
+
+		listing.productImage = listing.prodImageList.map((item) => item.url)
+		listing.apparelSketch = listing.sketchList
+			.map((item) => item.url)
+			.filter((url): url is string => Boolean(url))
+
+		return listing
+	}

 	const handleSelectProdImg = (index: number) => {
 		const target = prodImgList.value[index]
-
 		const willSelect = !target.selected

 		target.selected = willSelect

-		if (willSelect && !currentListing.value.mainProductImage) {
+		if (willSelect && firstSelectedIndex.value === null) {
 			currentListing.value.mainProductImage = target.url
 			firstSelectedIndex.value = index
+			return
 		}

 		if (!willSelect && currentListing.value.mainProductImage === target.url) {
@@ -367,7 +261,12 @@
 	}

 	const cropType = ref("")
-	const handleClickCrop = (data, type, list = []) => {
+	const handleClickCrop = (data: any, type: string, paramThree: any = []) => {
+		// 处理来自TopImageSection的调用: (data, type, list)
+		// 处理来自ApparelSketchList的调用: (data, type, index)
+		const index = typeof paramThree === 'number' ? paramThree : undefined
+		const list = Array.isArray(paramThree) ? paramThree : []
+
 		// console.log(data, type)
 		// console.log(selectList.value[currentIndex.value])
 		let origin = []
@@ -392,8 +291,11 @@
 			(file) => {
 				// console.log(file)
 				uploadFile(file).then((res) => {
-					console.log(res)
+					if (type === "apparel" && typeof index !== "undefined") {
+						selectList.value[currentIndex.value].sketchList[index].url = res
+					} else {
 						selectList.value[currentIndex.value][type] = res
+					}
 				})
 			},
 			{ ratio, isPreview: true, title: titleList[type], isProduct: true },
@@ -450,35 +352,40 @@

 	const handleSaveForm = async (type: StatusType) => {
 		const paramsList = []
-		selectList.value.forEach((item) => {
+		selectList.value.forEach((item: ListingItem) => {
 			const params = {
 				id: null,
-				title: selectList.value[currentIndex.value].productName,
-				description: selectList.value[currentIndex.value].desc,
-				price: selectList.value[currentIndex.value].price,
+				title: item.productName,
+				description: item.desc,
+				price: item.price,
 				status: type === "draft" ? 0 : 1,
 				images: [],
-				designFor: selectList.value[currentIndex.value].gender.toLowerCase,
-				productCategory: selectList.value[currentIndex.value].category
+				designFor: item.gender.toLowerCase,
+				productCategory: item.category
 			}
-			//
-			topImageList.forEach((el) => {
+
+			;["sketch", "cover"].forEach((el) => {
 				params.images.push({
 					category: el,
-					imageUrl: selectList.value[currentIndex.value][el],
+					imageUrl: item[el],
 					isSelected: 1
 				})
 			})
-			selectList.value[currentIndex.value].prodImageList.forEach((item) => {
-				if (item.selected) {
+			if (item.mainProductImage) {
 				params.images.push({
-						category: "main_product",
-						imageUrl: item.url,
-						isSelected: Number(item.selected)
+					category: 'main_product',
+					imageUrl: item.mainProductImage,
+					isSeleted:1
 				})
 			}
+			item.prodImageList.forEach((item) => {
+				params.images.push({
+					category: "product",
+					imageUrl: item.url,
+					isSelected: Number(!!item.selected)
 				})
-			selectList.value[currentIndex.value].sketchList.forEach((item) => {
+			})
+			item.sketchList.forEach((item) => {
 				params.images.push({
 					category: "apparel",
 					imageUrl: item.url,
@@ -488,9 +395,14 @@
 			paramsList.push(params)
 		})
 		console.log(paramsList)
-		fetchUpdateListing(paramsList)
+		debugger
+		await fetchUpdateListing(paramsList)
 	}
 	const handleClickMenu = async (status: StatusType) => {
+		if (status === "draft" && !selectList.value[currentIndex.value].cover) {
+			message.error("请先完成封面制作")
+			return
+		}
 		if (status === "publish" && !validatePublishRequired()) return

 		await handleSaveForm(status)
@@ -516,14 +428,27 @@
 				}))
 			})
 		})
-		// fetchListingDetailById(itemId.value).then(res => {
-		// 	console.log('iddetail',res)
-		// })
+	}
+
+	const handleGetDetailById = () => {
+		fetchListingDetailById(itemId.value).then((res: ListingDetailResponse) => {
+			const listing = createListingItemFromDetail(res)
+			const selectedIndex = listing.prodImageList.findIndex((item) => item.selected)
+
+			currentPage.value = 1
+			selectList.value = [listing]
+			firstSelectedIndex.value = selectedIndex === -1 ? null : selectedIndex
+		})
 	}

 	onMounted(() => {
-		const designItemIds = history.state?.designItemIds || []
+		const data = history.state
+		if (data?.type === "edit") {
 			itemId.value = history.state?.id || ""
+			handleGetDetailById()
+		} else {
+			const designItemIds = history.state?.designItemIds || []
+
 			if (!designItemIds.length) return

 			currentPage.value = 1
@@ -531,8 +456,9 @@
 				createListingItem(item.designOutfitUrl, item.designItemId)
 			)
 			const list = designItemIds.map((el) => el.designItemId)
-		console.log("list", list.length, list)
+			// console.log("list", list.length, list)
 			handleFetchItemDetial(list)
+		}
 	})
 </script>

@@ -602,362 +528,10 @@
 			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;
-
-					.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;
-							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;
-							}
-						}
-					}
-				}
-			}
-
-			.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;
--- a/src/views/SellerDashboard/MyListings/EditDetail/types.ts
+++ b/src/views/SellerDashboard/MyListings/EditDetail/types.ts
@@ -0,0 +1,47 @@
+export type RadioOption = {
+	name: string | number
+	value: string | number | boolean
+	key: string
+	optype: boolean
+}
+
+export type TopImageType = "sketch" | "mainProductImage" | "cover"
+export type CropType = TopImageType | "apparel"
+
+export 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[] | null
+	prodImageList: Array<{
+		url: string
+		selected?: boolean
+	}>
+	sketchList: Array<{ url: string | null }>
+}
+
+export type ListingDetailImage = {
+	category?: string | null
+	imageUrl?: string | null
+	isSelected?: boolean | number | string | null
+	sortOrder?: number | null
+}
+
+export type ListingDetailResponse = {
+	id?: number | string | null
+	title?: string | null
+	description?: string | null
+	price?: number | string | null
+	designFor?: string | null
+	productCategory?: string | string[] | null
+	images?: ListingDetailImage[] | null
+}
+
+export type StatusType = "draft" | "publish"
--- a/src/views/SellerDashboard/MyListings/createSelect/historyList.vue
+++ b/src/views/SellerDashboard/MyListings/createSelect/historyList.vue
@@ -41,8 +41,11 @@ const getCreateList = ()=>{
 	})
 }
 const selectCollectionItem = (item:any)=>{
+	console.log(item)
+	if(item.userLikeGroupVO?.groupDetails?.length > 0){
 		emit('selectCollectionItem',item)
 	}
+}
 onMounted(()=>{
 	getCreateList()
 })
@@ -55,9 +58,12 @@ defineExpose({getCreateList})
 		<div class="list">
 			<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
 				<div class="imgList">
-					<div v-for="(img,index) in item.userLikeGroupVO?.groupDetails" :key="index" class="img">
+					<div v-if="item.userLikeGroupVO?.groupDetails?.length > 0" v-for="(img,index) in item.userLikeGroupVO?.groupDetails" :key="index" class="img">
 						<img :src="img.url" alt="">
 					</div>
+					<div v-else class="img null">
+						<img src="@/assets/images/seller/selectCollectionNullStatus.png" alt="">
+					</div>
 				</div>
 				<div class="detail">
 					<div class="name">{{item.name}}</div>
@@ -123,6 +129,12 @@ defineExpose({getCreateList})
 						border-radius: 1rem;
 						overflow: hidden;
 						background-color: #fff;
+						&.null{
+							background-color: transparent;
+							> img{
+								object-fit: contain;
+							}
+						}
 						> img{
 							object-fit: cover;
 							height: 100%;
--- a/src/views/SellerDashboard/MyListings/createSelectItem/index.vue
+++ b/src/views/SellerDashboard/MyListings/createSelectItem/index.vue
@@ -45,8 +45,8 @@ const next = ()=>{
 	router.push({	
 		path:'/home/seller/myListings/edit',
 		state: {
-			id:route.params.collectionId,
 			designItemIds,
+			type:'create'
 		}
 	})
 }
@@ -83,7 +83,7 @@ const setDomSize = (width: number)=>{
 	if(!listingsBoxRef.value)return
 	let listDom = listingsBoxRef.value.querySelector('.list')
 	let listItemDom = listDom.querySelector('.item')
-	let offsetWidth = listItemDom.getBoundingClientRect().width
+	let offsetWidth = listItemDom?.getBoundingClientRect?.()?.width 
 	let lineNum = Math.floor(width / offsetWidth)
 	let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
 	listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
--- a/src/views/SellerDashboard/MyListings/main/content.vue
+++ b/src/views/SellerDashboard/MyListings/main/content.vue
@@ -5,6 +5,8 @@ import contentItem from "./contentItem.vue"
 import selectMenu from '@/component/modules/selectMenu.vue'
 import deleteDrafts from './deleteDrafts.vue'
 import { Https } from '@/tool/https'
+import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'

 //const props = defineProps({
 //})
@@ -63,11 +65,14 @@ const domSizeList = ref([

 const visible = ref(false)
 const deleteDraftsRef = ref(null)
+const router = useRouter()

 const deleteDraft = (item: any)=>{
-	deleteDraftsRef.value.open(()=>{
+	deleteDraftsRef.value.open(item,()=>{
+		putListingStatus(item,2).then(()=>{
 			list2.value = list2.value.filter((v: any)=>v.id != item.id)
 		})
+	})
 }

 const vObserve  = {
@@ -99,6 +104,7 @@ const getPublishedData = async ()=>{
 	}
 	await getPublishList(value).then((res)=>{
 		if(res.content.length == 0)publishData.isNoData = true
+		publishData.pageNum += 1
 		list.value.push(...res.content)
 	})
 	publishData.isShowMark = false
@@ -113,6 +119,7 @@ const getNoPublishedData = async ()=>{
 	}
 	await getPublishList(value).then((res)=>{
 		if(res.content.length == 0)noPublishData.isNoData = true
+		noPublishData.pageNum += 1
 		list2.value.push(...res.content)
 	})
 	noPublishData.isShowMark = false
@@ -127,28 +134,46 @@ const getPublishList = (data:any)=>{
 	})
 }

-const putListingStatus = ()=>{
+const putListingStatus = async (item,status:number)=>{
+	return new Promise<void>((resolve, reject) => {
 		let data = {
-		id:'',
-		status:'',
+			id:item.id,
+			status:status,
 		}
 		Https.axiosPut(Https.httpUrls.putListingStatus,data).then((res:any)=>{
+			resolve(res)
+		}).catch((err:any)=>{
+			reject(err)
+		})
 	})
 }


-const draftListing = (item: any)=>{
+const draftListing = async (item: any)=>{
 	//数组前面添加item
+	await putListingStatus(item,0).then(()=>{
 		list2.value.unshift(item)
 		list.value = list.value.filter((v: any)=>v.id != item.id)
+	})
+	message.success('Product moved to drafts and stats reset.')
 }

-const publishListing = (item: any)=>{
+const publishListing = async (item: any)=>{
+	await putListingStatus(item,1).then(()=>{
 		list.value.unshift(item)
 		list2.value = list2.value.filter((v: any)=>v.id != item.id)
+	})
+	message.success('Item is now live on the Marketplace.')
 }

 const editListing = (item: any)=>{
+	router.push({	
+		path:'/home/seller/myListings/edit',
+		state: {
+			id:item.id,
+			type:'edit'
+		}
+	})
 }


@@ -167,7 +192,7 @@ const setDomSize = (width: number)=>{
 	if(!listingsBoxRef.value)return
 	let listDom = listingsBoxRef.value.querySelector('.list')
 	let listItemDom = listDom.querySelector('.item')
-	let offsetWidth = listItemDom.getBoundingClientRect().width
+	let offsetWidth = listItemDom?.getBoundingClientRect?.()?.width
 	let lineNum = Math.floor(width / offsetWidth)
 	let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
 	listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
--- a/src/views/SellerDashboard/MyListings/main/contentItem.vue
+++ b/src/views/SellerDashboard/MyListings/main/contentItem.vue
@@ -32,7 +32,7 @@ const {} = toRefs(data);
 <template>
 	<div class="item" :draging="true" :class="domSize">
 		<div class="imgBox">
-			<img src="" alt="">
+			<img :src="item.cover" alt="">
 			<div class="maskBtn">
 				<div @click="$emit('editListing',item)">
 					<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
@@ -50,21 +50,21 @@ const {} = toRefs(data);
 		</div>
 		<div class="detail">
 			<div class="left">
-				<div class="name">item name</div>
-				<div class="price">$1123</div>
+				<div class="name">{{item.title}}</div>
+				<div class="price">${{item.price}}</div>
 			</div>
 			<div class="right">
 				<div class="detailItem" v-if="type == 'listings'">
 					<div class="shopping1">
 						<i class="fi fi-rr-shopping-bag-add"></i>
 					</div>
-					<span>123</span>
+					<span>{{ item.salesVolume || 0 }}</span>
 				</div>
 				<div class="detailItem" v-if="type == 'listings'">
 					<div class="eye1">
 						<i class="fi fi-rs-eye"></i>
 					</div>
-					<span>123</span>
+					<span>{{ item.viewCount }}</span>
 				</div>
 				<div class="detailItem drafts" v-if="type == 'drafts'" @click="$emit('deleteDraft',item)">
 					<div class="">
@@ -128,6 +128,11 @@ const {} = toRefs(data);
 			position: relative;
 			height: var(--itemImgHeight);
 			width: 100%;
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
 			> .maskBtn{
 				position: absolute;
 				width: 100%;
@@ -182,6 +187,7 @@ const {} = toRefs(data);
 					gap: var(--detailRightItemGap);
 					flex-direction: column;
 					justify-content: space-between;
+					align-items: center;
 					> div{
 						color: var(--rightColor);
 						display: flex;
--- a/src/views/SellerDashboard/MyListings/main/deleteDrafts.vue
+++ b/src/views/SellerDashboard/MyListings/main/deleteDrafts.vue
@@ -15,12 +15,13 @@ const router = useRouter()
 const {t} = useI18n()
 let data = reactive({
 })
-
+const item = ref<any>()
 const fun = ref(null)

 let deleteDraftsRef = ref(null)

-const open = (deleteFun)=>{
+const open = (data:any,deleteFun)=>{
+	item.value = data
 	fun.value = deleteFun
 	emit('update:visible', true)
 }
@@ -35,6 +36,7 @@ const deleteDrafts = ()=>{


 const cleardata = ()=>{
+	item.value = null
 	emit('update:visible', false)
 }

@@ -78,11 +80,11 @@ const { showAgain } = toRefs(data);
 			</div>
 			<div class="deleteContent">
 				<div class="img">
-					<img src="" alt="">
+					<img :src="item?.value?.cover" alt="">
 				</div>
 				<div class="detail">
-					<div class="name">Item Name</div>
-					<div class="price">HK$392.00 · Draft</div>
+					<div class="name">{{ item?.value?.title }}</div>
+					<div class="price">HK${{ item?.value?.price }} · Draft</div>
 				</div>
 			</div>
 			<div class="btnBox">