feat: 服装分类

src/views/wardrobe/Assets.vue

@@ -3,12 +3,14 @@
     <aside class="wardrobe-assets__filters">
       <div class="filters-card">
         <div class="filters-card__heading">
-          <h2 class="filters-card__title">Filters</h2>
-          <button class="filters-card__clear" type="button" @click="clearFilters">Clear</button>
+          <h2 class="filters-card__title">{{ t('Wardrobe.assets.filters') }}</h2>
+          <button class="filters-card__clear" type="button" @click="clearFilters">
+            {{ t('Wardrobe.assets.clear') }}
+          </button>
         </div>
 
         <section class="filter-group">
-          <h3 class="filter-group__title">Categories</h3>
+          <h3 class="filter-group__title">{{ t('Wardrobe.assets.categories') }}</h3>
           <div class="filter-group__line"></div>
           <div class="filter-group__options">
             <button
@@ -28,7 +30,7 @@
         </section>
 
         <section class="filter-group">
-          <h3 class="filter-group__title">Gender</h3>
+          <h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
           <div class="filter-group__line"></div>
           <div class="filter-group__options">
             <button
@@ -57,10 +59,16 @@
         <div class="assets-toolbar__selection">
           <div class="select-count flex align-center">
             <img src="@/assets/images/wardrobe/select.png" />
-            <span class="assets-toolbar__count">{{ selectedCount }} Selected</span>
+            <span class="assets-toolbar__count">
+              {{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }}
+            </span>
+          </div>
+          <div class="assets-toolbar__link" @click="handleSelectAll(true)">
+            {{ t('Wardrobe.assets.selectAll') }}
+          </div>
+          <div class="assets-toolbar__link" @click="handleSelectAll(false)">
+            {{ t('Wardrobe.assets.deselectAll') }}
           </div>
-          <div class="assets-toolbar__link" @click="handleSelectAll(true)">Select All</div>
-          <div class="assets-toolbar__link" @click="handleSelectAll(false)">Deselect All</div>
         </div>
 
         <div class="assets-toolbar__actions">
@@ -70,7 +78,7 @@
             @click="handleDownloadSelected"
           >
             <SvgIcon name="downloadBtn" color="#fff" />
-            <span>Download Selected</span>
+            <span>{{ t('Wardrobe.assets.downloadSelected') }}</span>
           </div>
         </div>
       </div>
@@ -106,7 +114,9 @@
 </template>
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { useClothesCategories } from '@/utils/ClothesCategory'
 import img from '@/assets/images/collectionStory/Rectangle.png'
 import Empty from './Empty.vue'
 
@@ -116,26 +126,26 @@ interface FilterOption {
 }
 
 const router = useRouter()
+const { t } = useI18n({ useScope: 'global' })
+const clothesCategories = useClothesCategories()
 
-const categories: FilterOption[] = [
-  { label: 'All', value: 'all' },
-  { label: 'Outerwear', value: 'outerwear' },
-  { label: 'Dress', value: 'dress' },
-  { label: 'Trousers', value: 'trousers' },
-  { label: 'Blouse', value: 'blouse' },
-  { label: 'Skirt', value: 'skirt' },
-  { label: 'Accessories', value: 'accessories' }
-]
+const categories = computed<FilterOption[]>(() => [
+  { label: t('Wardrobe.common.all'), value: 'all' },
+  ...clothesCategories.value.map((option) => ({
+    label: option.label,
+    value: option.value
+  }))
+])
 
-const genders: FilterOption[] = [
-  { label: 'All', value: 'all' },
-  { label: 'Male', value: 'male' },
-  { label: 'Female', value: 'female' }
-]
+const genders = computed<FilterOption[]>(() => [
+  { label: t('Wardrobe.common.all'), value: 'all' },
+  { label: t('Wardrobe.assets.genders.male'), value: 'male' },
+  { label: t('Wardrobe.assets.genders.female'), value: 'female' }
+])
 
-const categoryValues = categories
-  .filter((option) => option.value !== 'all')
-  .map((option) => option.value)
+const categoryValues = computed(() =>
+  categories.value.filter((option) => option.value !== 'all').map((option) => option.value)
+)
 
 const filters = reactive({
   categories: ['skirt'] as string[],
@@ -209,8 +219,8 @@ const selectedCount = computed(() => {
 })
 const allCategoriesSelected = computed(() => {
   return (
-    filters.categories.length === categoryValues.length &&
-    categoryValues.every((value) => filters.categories.includes(value))
+    filters.categories.length === categoryValues.value.length &&
+    categoryValues.value.every((value) => filters.categories.includes(value))
   )
 })
 
@@ -224,7 +234,7 @@ const isCategoryActive = (value: string) => {
 
 const toggleCategory = (value: string) => {
   if (value === 'all') {
-    filters.categories = allCategoriesSelected.value ? [] : [...categoryValues]
+    filters.categories = allCategoriesSelected.value ? [] : [...categoryValues.value]
     return
   }
 
@@ -241,7 +251,7 @@ const setGender = (value: string) => {
 }
 
 const clearFilters = () => {
-  filters.categories = [...categoryValues]
+  filters.categories = [...categoryValues.value]
   filters.gender = 'all'
 }
 
@@ -456,9 +466,9 @@ onUnmounted(() => {
         font-family: 'KaiseiOpti-Regular';
         .select-count {
           column-gap: 1.2rem;
-          img{
+          img {
             width: 2.4rem;
-            height: 2.4rem    ;
+            height: 2.4rem;
           }
           .assets-toolbar__count {
             position: relative;
@@ -544,7 +554,6 @@ onUnmounted(() => {
         }
       }
     }
-
   }
 }
 </style>