feat: 服装分类

src/views/wardrobe/Orders.vue

@@ -33,17 +33,17 @@
               :style="{ backgroundColor: item.color }"
             ></span>
             <span v-if="getExtraCount(order)" class="order-card__extra">
-              +{{ getExtraCount(order) }} more
+              {{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
             </span>
           </div>
 
           <div class="order-card__status" :class="`is-${order.status}`">
-            {{ order.status.toUpperCase() }}
+            {{ getStatusBadgeLabel(order.status) }}
           </div>
 
           <div class="order-card__amount">
             <span>${{ order.amount }}</span>
-            <small>HKD</small>
+            <small>{{ t('Wardrobe.common.currencyHkd') }}</small>
           </div>
 
           <button
@@ -52,9 +52,7 @@
             :class="{ 'is-primary': order.status === 'unpaid' }"
           >
             <svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
-            <span v-if="order.status === 'paid'">Invoice</span>
-            <span v-else-if="order.status === 'unpaid'">Complete Payment</span>
-            <span v-else>Buy Again</span>
+            <span>{{ getOrderActionLabel(order.status) }}</span>
           </button>
         </div>
 
@@ -77,6 +75,7 @@
 
 <script setup lang="ts">
 import { computed, shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 import ScItem from '@/views/shoppingCart/sc-item.vue'
 
 type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
@@ -109,13 +108,14 @@ interface OrderRecord {
 }
 
 const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
+const { t } = useI18n({ useScope: 'global' })
 
-const statusOptions: StatusOption[] = [
-  { key: 'all', label: 'All' },
-  { key: 'paid', label: 'Paid' },
-  { key: 'unpaid', label: 'Unpaid' },
-  { key: 'cancelled', label: 'Canceled' }
-]
+const statusOptions = computed<StatusOption[]>(() => [
+  { key: 'all', label: t('Wardrobe.orders.statuses.all') },
+  { key: 'paid', label: t('Wardrobe.orders.statuses.paid') },
+  { key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid') },
+  { key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled') }
+])
 
 const createOrderItem = (
   id: number,
@@ -201,6 +201,16 @@ const toggleOrder = (orderId: string) => {
 const getExtraCount = (order: OrderRecord) => {
   return Math.max(order.items.length - 2, 0)
 }
+
+const getStatusBadgeLabel = (status: ActualOrderStatus) => {
+  return t(`Wardrobe.orders.statusBadges.${status}`)
+}
+
+const getOrderActionLabel = (status: ActualOrderStatus) => {
+  if (status === 'paid') return t('Wardrobe.orders.actions.invoice')
+  if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
+  return t('Wardrobe.orders.actions.buyAgain')
+}
 </script>
 
 <style lang="less" scoped>