From ec4c3bc81ff0c0b1db58a8d78a313d4c978f72a0 Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Tue, 26 May 2026 15:24:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=88=91=E7=9A=84=E8=A1=A3=E6=9F=9C?= =?UTF-8?q?=E7=AD=9B=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/style.css | 195 ++++++++++++++++++---------------- src/views/wardrobe/Assets.vue | 47 +++++++- src/views/wardrobe/index.vue | 2 +- 3 files changed, 147 insertions(+), 97 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 81beb9e..0a993c7 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -7,145 +7,152 @@ h1, h2, h3, p { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } * { - box-sizing: border-box; + box-sizing: border-box; } html, body, #app { - width: 100%; - height: 100%; - overflow: hidden; - font-family: 'KaiseiOpti-Medium'; - color: #232323; + width: 100%; + height: 100%; + overflow: hidden; + font-family: 'KaiseiOpti-Medium'; + color: #232323; } @keyframes loading { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } @keyframes opacity-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } @keyframes z-index-10to-1 { - 0% { - z-index: 10; - } - 100% { - z-index: -1; - } + 0% { + z-index: 10; + } + 100% { + z-index: -1; + } } .flex { - display: flex; + display: flex; } .flex-center { - justify-content: center; - align-items: center; + justify-content: center; + align-items: center; } .flex-1 { - flex: 1; + flex: 1; } .flex-col { - flex-direction: column; + flex-direction: column; } .align-center { - align-items: center; + align-items: center; } .space-between { - justify-content: space-between; + justify-content: space-between; } .justify-center { - justify-content: center; + justify-content: center; } .relative { - position: relative; + position: relative; } .el-overlay { - --el-color-primary: #ff7a51; - --el-color-primary-light-3: #ffa785; - --el-color-primary-light-5: #ffc2aa; - --el-color-primary-light-7: #ffddcf; - --el-color-primary-light-8: #ffe8df; - --el-color-primary-light-9: #fff2ec; - --el-color-primary-dark-2: #cc6241; + --el-color-primary: #ff7a51; + --el-color-primary-light-3: #ffa785; + --el-color-primary-light-5: #ffc2aa; + --el-color-primary-light-7: #ffddcf; + --el-color-primary-light-8: #ffe8df; + --el-color-primary-light-9: #fff2ec; + --el-color-primary-dark-2: #cc6241; } .el-select, .el-popper { - --el-color-primary: #6c6c6c; - /* 主灰色 */ - --el-color-primary-light-3: #8a8a8a; - /* 较浅的灰色（混合20%白） */ - --el-color-primary-light-5: #a8a8a8; - /* 更浅的灰色（混合33%白） */ - --el-color-primary-light-7: #c6c6c6; - /* 浅灰色（混合47%白） */ - --el-color-primary-light-8: #d4d4d4; - /* 很浅的灰色（混合53%白） */ - --el-color-primary-light-9: #e3e3e3; - /* 极浅的灰色（混合60%白） */ - --el-color-primary-dark-2: #565656; - /* 深灰色（加深20%） */ + --el-color-primary: #6c6c6c; + /* 主灰色 */ + --el-color-primary-light-3: #8a8a8a; + /* 较浅的灰色（混合20%白） */ + --el-color-primary-light-5: #a8a8a8; + /* 更浅的灰色（混合33%白） */ + --el-color-primary-light-7: #c6c6c6; + /* 浅灰色（混合47%白） */ + --el-color-primary-light-8: #d4d4d4; + /* 很浅的灰色（混合53%白） */ + --el-color-primary-light-9: #e3e3e3; + /* 极浅的灰色（混合60%白） */ + --el-color-primary-dark-2: #565656; + /* 深灰色（加深20%） */ } .mini-scrollbar { - --mini-scrollbar-width: 0.4rem; + --mini-scrollbar-width: 0.4rem; } .mini-scrollbar::-webkit-scrollbar { - width: var(--mini-scrollbar-width); + width: var(--mini-scrollbar-width); } .mini-scrollbar::-webkit-scrollbar-thumb { - border-radius: 0.4rem; - background: rgba(0, 0, 0, 0.2); + border-radius: 0.4rem; + background: rgba(0, 0, 0, 0.2); } .mosaic-bg { - --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-repeat: repeat; - background-position: 50% 50%; - background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); + --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-repeat: repeat; + background-position: 50% 50%; + background-size: var(--mosaic-bg-size) var(--mosaic-bg-size); } button[custom], -button[custom="white"] { - min-width: 19.4rem; - height: 5rem; - padding: 0 1rem; - border-radius: 0; - font-family: KaiseiOpti-Bold; - font-size: var(--button-font-size, 2rem); - color: var(--button-color, #232323); - background: var(--button-bgcolor, #fff); - border: var(--button-border, none); - cursor: pointer; +button[custom='white'] { + min-width: 19.4rem; + height: 5rem; + padding: 0 1rem; + border-radius: 0; + font-family: KaiseiOpti-Bold; + font-size: var(--button-font-size, 2rem); + color: var(--button-color, #232323); + background: var(--button-bgcolor, #fff); + border: var(--button-border, none); + cursor: pointer; } button[custom]:active, -button[custom="white"]:active { - background: var(--button-click-bgcolor, #e4e4e4); - color: var(--button-click-color, #232323); +button[custom='white']:active { + background: var(--button-click-bgcolor, #e4e4e4); + color: var(--button-click-color, #232323); } -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'] { + --button-bgcolor: #232323; + --button-color: #fff; + --button-click-bgcolor: #333; + --button-click-color: #fff; + --button-font-size: 1.6rem; } -button[custom="black-box"] { - --button-bgcolor: transparent; - --button-color: #232323; - --button-border: 0.2rem solid #979797; - --button-click-bgcolor: #979797; - --button-click-color: #fff; - --button-font-size: 1.6rem; +button[custom='black-box'] { + --button-bgcolor: transparent; + --button-color: #232323; + --button-border: 0.2rem solid #979797; + --button-click-bgcolor: #979797; + --button-click-color: #fff; + --button-font-size: 1.6rem; +} + +.el-select-dropdown .el-select-dropdown__item { + padding: 0 2rem; } diff --git a/src/views/wardrobe/Assets.vue b/src/views/wardrobe/Assets.vue index c9abf9d..d9c6944 100644 --- a/src/views/wardrobe/Assets.vue +++ b/src/views/wardrobe/Assets.vue @@ -97,6 +97,14 @@ import { debounce } from 'lodash-es' + interface Props { + sortType?: number + } + + const props = withDefaults(defineProps(), { + 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(null) const assetsScrollRef = ref(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 = () => { diff --git a/src/views/wardrobe/index.vue b/src/views/wardrobe/index.vue index 4cecbd0..1c32fec 100644 --- a/src/views/wardrobe/index.vue +++ b/src/views/wardrobe/index.vue @@ -43,7 +43,7 @@ - +