diff --git a/src/views/wardrobe/Assets.vue b/src/views/wardrobe/Assets.vue
index 73c1072..d5e8dac 100644
--- a/src/views/wardrobe/Assets.vue
+++ b/src/views/wardrobe/Assets.vue
@@ -241,63 +241,6 @@
const selectedCount = computed(() => {
return dataList.value.filter((el) => el.checked === true).length
})
- const allCategoriesSelected = computed(() => {
- return (
- filters.categories.length === categoryValues.value.length &&
- categoryValues.value.every((value) => filters.categories.includes(value))
- )
- })
-
- const allGendersSelected = computed(() => {
- return (
- filters.genders.length === genderValues.value.length &&
- genderValues.value.every((value) => filters.genders.includes(value))
- )
- })
-
- const isCategoryActive = (value: string) => {
- if (value === 'all') {
- return allCategoriesSelected.value
- }
-
- return filters.categories.includes(value)
- }
-
- const toggleCategory = (value: string) => {
- if (value === 'all') {
- filters.categories = allCategoriesSelected.value ? [] : [...categoryValues.value]
- return
- }
-
- if (filters.categories.includes(value)) {
- filters.categories = filters.categories.filter((item) => item !== value)
- return
- }
-
- filters.categories = [...filters.categories, value]
- }
-
- const isGenderActive = (value: string) => {
- if (value === 'all') {
- return allGendersSelected.value
- }
-
- return filters.genders.includes(value)
- }
-
- const toggleGender = (value: string) => {
- if (value === 'all') {
- filters.genders = allGendersSelected.value ? [] : [...genderValues.value]
- return
- }
-
- if (filters.genders.includes(value)) {
- filters.genders = filters.genders.filter((item) => item !== value)
- return
- }
-
- filters.genders = [...filters.genders, value]
- }
const updateFilters = (value: { categories: string[]; genders: string[] }) => {
filters.categories = value.categories
diff --git a/src/views/wardrobe/FilterSidebar.vue b/src/views/wardrobe/FilterSidebar.vue
index bae379c..d0b99a1 100644
--- a/src/views/wardrobe/FilterSidebar.vue
+++ b/src/views/wardrobe/FilterSidebar.vue
@@ -11,41 +11,21 @@
{{ t('Wardrobe.assets.categories') }}
-
-
-
+
{{ t('Wardrobe.assets.gender') }}
-
-
-
+
@@ -55,6 +35,8 @@
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import type { PropType } from 'vue'
+ import Checked from '@/components/checked.vue'
+ import CheckedGender from '@/components/checked-gender.vue'
interface FilterOption {
label: string
@@ -95,90 +77,64 @@
props.genders.filter((option) => option.value !== 'all').map((option) => option.value)
)
- const allCategoriesSelected = computed(() => {
- return (
+ // 为 Checked 组件准备的选项列表（不包含 'all'）
+ const categoryOptions = computed(() =>
+ props.categories.filter((option) => option.value !== 'all')
+ )
+
+ const genderOptions = computed(() => props.genders.filter((option) => option.value !== 'all'))
+
+ // 转换当前选中状态为组件需要的格式
+ const selectedCategories = computed(() => {
+ const allSelected =
props.filters.categories.length === categoryValues.value.length &&
categoryValues.value.every((value) => props.filters.categories.includes(value))
- )
+
+ return allSelected ? ['all'] : props.filters.categories
})
- const allGendersSelected = computed(() => {
- return (
+ const selectedGenders = computed(() => {
+ const allSelected =
props.filters.genders.length === genderValues.value.length &&
genderValues.value.every((value) => props.filters.genders.includes(value))
- )
+
+ return allSelected ? ['all'] : props.filters.genders
})
- const currentFilters = computed(() => ({
- categories: [...props.filters.categories],
- genders: [...props.filters.genders]
- }))
+ const handleCategoryChange = (selected: string[]) => {
+ let categories: string[]
+
+ if (selected.includes('all') || selected.length === 0) {
+ // 如果选择了 'all' 或者没有选择任何项，则选择所有分类
+ categories = [...categoryValues.value]
+ } else {
+ categories = selected
+ }
- const updateFilters = (updated: Partial) => {
emit('update:filters', {
- categories: updated.categories ?? currentFilters.value.categories,
- genders: updated.genders ?? currentFilters.value.genders
+ categories,
+ genders: props.filters.genders
})
}
- const isCategoryActive = (value: string) => {
- if (value === 'all') {
- return allCategoriesSelected.value
+ const handleGenderChange = (selected: string[]) => {
+ let genders: string[]
+
+ if (selected.includes('all') || selected.length === 0) {
+ // 如果选择了 'all' 或者没有选择任何项，则选择所有性别
+ genders = [...genderValues.value]
+ } else {
+ genders = selected
}
- return props.filters.categories.includes(value)
- }
-
- const toggleCategory = (value: string) => {
- if (value === 'all') {
- updateFilters({
- categories: allCategoriesSelected.value ? [] : [...categoryValues.value]
- })
- return
- }
-
- if (props.filters.categories.includes(value)) {
- updateFilters({
- categories: props.filters.categories.filter((item) => item !== value)
- })
- return
- }
-
- updateFilters({
- categories: [...props.filters.categories, value]
- })
- }
-
- const isGenderActive = (value: string) => {
- if (value === 'all') {
- return allGendersSelected.value
- }
-
- return props.filters.genders.includes(value)
- }
-
- const toggleGender = (value: string) => {
- if (value === 'all') {
- updateFilters({
- genders: allGendersSelected.value ? [] : [...genderValues.value]
- })
- return
- }
-
- if (props.filters.genders.includes(value)) {
- updateFilters({
- genders: props.filters.genders.filter((item) => item !== value)
- })
- return
- }
-
- updateFilters({
- genders: [...props.filters.genders, value]
+ emit('update:filters', {
+ categories: props.filters.categories,
+ genders
})
}
const clearFilters = () => {
- updateFilters({
+ emit('update:filters', {
categories: [...categoryValues.value],
genders: [...genderValues.value]
})
@@ -241,60 +197,7 @@
margin-bottom: 2rem;
}
- .filter-group__options {
- display: flex;
- flex-direction: column;
- gap: 1.2rem;
- .filter-option {
- display: inline-flex;
- align-items: center;
- gap: 1.2rem;
- width: fit-content;
- padding: 0;
- border: 0;
- background: transparent;
- font-family: 'KaiseiOpti-Regular';
- font-size: 1.5rem;
- line-height: 1.4;
- color: #6e665d;
- cursor: pointer;
- text-align: left;
-
- > .filter-option__box {
- width: 1.6rem;
- height: 1.6rem;
- border: 0.1rem solid var(--wardrobe-border-dark);
- display: inline-flex;
- align-items: center;
- justify-content: center;
- background: #ffffff;
- flex-shrink: 0;
-
- .filter-option__tick {
- width: 0.9rem;
- height: 0.5rem;
- border-left: 0.18rem solid #ffffff;
- border-bottom: 0.18rem solid #ffffff;
- transform: rotate(-45deg) translateY(-0.05rem);
- opacity: 0;
- }
- }
-
- &.is-active {
- color: var(--wardrobe-text-main);
-
- .filter-option__box {
- border-color: var(--wardrobe-text-main);
- background: var(--wardrobe-text-main);
-
- .filter-option__tick {
- opacity: 1;
- }
- }
- }
- }
- }
}
}
}