feat: 服装分类

src/views/wardrobe/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="wardrobe-page">
     <div class="wardrobe-hero flex flex-col flex-center">
-      <div class="wardrobe-hero__title">My Wardrobe</div>
-      <div class="wardrobe-hero__subtitle">Your digital pieces, all in one place</div>
+      <div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
+      <div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
     </div>
 
     <div class="wardrobe-shell">
       <div class="wardrobe-tabs">
-        <div class="wardrobe-tabs__nav" role="tablist" aria-label="Wardrobe tabs">
+        <div class="wardrobe-tabs__nav" role="tablist" :aria-label="t('Wardrobe.tabs.ariaLabel')">
           <button
             v-for="tab in tabs"
             :key="tab.key"
@@ -23,8 +23,8 @@
         </div>
 
         <div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
-          <div class="wardrobe-tabs__sort-label">Sort by</div>
-          <el-select v-model="activeSort" placeholder="Select">
+          <div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
+          <el-select v-model="activeSort" :placeholder="t('Wardrobe.sort.placeholder')">
             <el-option
               v-for="option in sortOptions"
               :key="option.value"
@@ -42,6 +42,7 @@
 </template>
 <script setup lang="ts">
 import { computed, shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 import Assets from './Assets.vue'
 import Orders from './Orders.vue'
 
@@ -57,31 +58,33 @@ interface SortOption {
   value: number
 }
 
-const tabs: TabItem[] = [
+const { t } = useI18n({ useScope: 'global' })
+
+const tabs = computed<TabItem[]>(() => [
   {
     key: 'assets',
-    label: 'Assets'
+    label: t('Wardrobe.tabs.assets')
   },
   {
     key: 'orders',
-    label: 'Orders'
+    label: t('Wardrobe.tabs.orders')
   }
-]
+])
 
-const sortOptions: SortOption[] = [
+const sortOptions = computed<SortOption[]>(() => [
   {
-    label: 'Default',
+    label: t('Wardrobe.sort.default'),
     value: 0
   },
   {
-    label: 'Date Added',
+    label: t('Wardrobe.sort.dateAdded'),
     value: 1
   },
   {
-    label: 'Selected First',
+    label: t('Wardrobe.sort.selectedFirst'),
     value: 2
   }
-]
+])
 
 const activeTab = shallowRef<WardrobeTab>('assets')
 const activeSort = shallowRef(1)