feat: 我的衣柜筛选

src/assets/css/style.css

@@ -111,13 +111,16 @@ body,
 	--mosaic-bg-size: 1rem;
 	--mosaic-bg-color1: #efefef;
 	--mosaic-bg-color2: #fff;
-  background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
+	background-image: repeating-conic-gradient(
+		var(--mosaic-bg-color1) 0% 25%,
+		var(--mosaic-bg-color2) 0% 50%
+	);
 	background-repeat: repeat;
 	background-position: 50% 50%;
 	background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
 button[custom],
-button[custom="white"] {
+button[custom='white'] {
 	min-width: 19.4rem;
 	height: 5rem;
 	padding: 0 1rem;
@@ -130,18 +133,18 @@ button[custom="white"] {
 	cursor: pointer;
 }
 button[custom]:active,
-button[custom="white"]:active {
+button[custom='white']:active {
 	background: var(--button-click-bgcolor, #e4e4e4);
 	color: var(--button-click-color, #232323);
 }
-button[custom="black"] {
+button[custom='black'] {
 	--button-bgcolor: #232323;
 	--button-color: #fff;
 	--button-click-bgcolor: #333;
 	--button-click-color: #fff;
 	--button-font-size: 1.6rem;
 }
-button[custom="black-box"] {
+button[custom='black-box'] {
 	--button-bgcolor: transparent;
 	--button-color: #232323;
 	--button-border: 0.2rem solid #979797;
@@ -149,3 +152,7 @@ button[custom="black-box"] {
 	--button-click-color: #fff;
 	--button-font-size: 1.6rem;
 }
+
+.el-select-dropdown .el-select-dropdown__item {
+	padding: 0 2rem;
+}

src/views/wardrobe/Assets.vue

@@ -97,6 +97,14 @@
 
 	import { debounce } from 'lodash-es'
 
+	interface Props {
+		sortType?: number
+	}
+
+	const props = withDefaults(defineProps<Props>(), {
+		sortType: 1
+	})
+
 	const buyerId = useUserInfoStore().state.userInfo?.userId
 
 	interface FilterOption {
@@ -131,6 +139,7 @@
 	)
 
 	const dataList = ref([])
+	const rawDataList = ref([]) // Store the original API data
 	const dataListRef = ref<HTMLDivElement | null>(null)
 	const assetsScrollRef = ref<HTMLDivElement | null>(null)
 	const gridColumnCount = shallowRef(1)
@@ -174,15 +183,18 @@
 
 			const content = res.content ?? []
 			if (pageParams.page === 1) {
-				dataList.value = content
+				rawDataList.value = content
 			} else {
-				dataList.value = [...dataList.value, ...content]
+				rawDataList.value = [...rawDataList.value, ...content]
 			}
 
 			hasMoreAssets.value = content.length >= pageParams.size
 			if (hasMoreAssets.value) {
 				pageParams.page += 1
 			}
+
+			// Apply sorting after fetching data
+			applySorting()
 		} finally {
 			if (requestId === assetsRequestId.value) {
 				isLoadingAssets.value = false
@@ -190,6 +202,29 @@
 		}
 	}
 
+	// Function to apply sorting based on sortType
+	const applySorting = () => {
+		if (props.sortType === 1) {
+			// Date Added - use original API order
+			dataList.value = [...rawDataList.value]
+		} else if (props.sortType === 2) {
+			// Selected First - sort by checked status
+			dataList.value = [...rawDataList.value].sort((a, b) => {
+				if (a.checked && !b.checked) return -1
+				if (!a.checked && b.checked) return 1
+				return 0
+			})
+		}
+	}
+
+	// Watch for sortType changes
+	watch(
+		() => props.sortType,
+		() => {
+			applySorting()
+		}
+	)
+
 	watch(
 		() => filters,
 		debounce(() => {
@@ -269,12 +304,20 @@
 
 	const handleSelectItem = (item) => {
 		item.checked = !item.checked
+		// Re-apply sorting when selection changes and sortType is "Selected First"
+		if (props.sortType === 2) {
+			applySorting()
+		}
 	}
 
 	const handleSelectAll = (flag) => {
 		dataList.value.forEach((item) => {
 			item.checked = flag
 		})
+		// Re-apply sorting when selection changes and sortType is "Selected First"
+		if (props.sortType === 2) {
+			applySorting()
+		}
 	}
 
 	const handleDownloadSelected = () => {

src/views/wardrobe/index.vue

@@ -43,7 +43,7 @@
 				</div>
 			</div>
 
-			<component :is="activePanel" class="wardrobe-shell__panel" />
+			<component :is="activePanel" class="wardrobe-shell__panel" :sort-type="activeSort" />
 		</div>
 		<Footer />
 	</div>