From 4c22311e082967d7c01fbb0e1694f7ba165cfdd9 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Fri, 22 May 2026 11:39:17 +0800
Subject: [PATCH] feat: wardrobe assets

---
 .prettierrc.json                     |  16 +-
 src/api/user.ts                      |  10 +-
 src/lang/en.ts                       |   3 +-
 src/lang/zh-cn.ts                    |   3 +-
 src/utils/ClothesCategory.ts         |   4 +-
 src/views/shoppingCart/sc-item.vue   |   3 +-
 src/views/wardrobe/Assets.vue        | 975 +++++++++++++--------------
 src/views/wardrobe/FilterSidebar.vue | 301 +++++++++
 src/views/wardrobe/Orders.vue        | 852 ++++++++++++-----------
 9 files changed, 1262 insertions(+), 905 deletions(-)
 create mode 100644 src/views/wardrobe/FilterSidebar.vue

diff --git a/.prettierrc.json b/.prettierrc.json
index 66e2335..e6a82c6 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,8 +1,10 @@
 {
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "none"
-}
\ No newline at end of file
+	"$schema": "https://json.schemastore.org/prettierrc",
+	"semi": false,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"printWidth": 100,
+	"useTabs": true,
+	"trailingComma": "none",
+	"vueIndentScriptAndStyle": true
+}
diff --git a/src/api/user.ts b/src/api/user.ts
index f95e98e..ae2967d 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -16,15 +16,19 @@ export const fetchMyWardrobe = (data: WardrobeItem): Promise<ApiResponse> => {
 }
 
 export interface OrderItem {
-  status: number // 0未支付 1已支付 2已取消 不穿查全部
+  status?: number // 0未支付 1已支付 2已取消 不传查全部
   page: number
   size: number
 }
-export const fetchMyOrders = (data: OrderItem): Promise<ApiResponse> => {
+
+export interface OrdersPageResponse {
+  content: any[]
+}
+
+export const fetchMyOrders = (data: OrderItem): Promise<OrdersPageResponse> => {
   return request({
     url: '/buyer/buyer/order/page',
     method: 'get',
     params: data
   })
 }
-
diff --git a/src/lang/en.ts b/src/lang/en.ts
index ee75b00..f94a3b8 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -133,7 +133,6 @@ export default {
 		subtitle: 'Your digital pieces, all in one place',
 		common: {
 			all: 'All',
-			currencyHkd: 'HKD'
 		},
 		tabs: {
 			ariaLabel: 'Wardrobe tabs',
@@ -187,7 +186,7 @@ export default {
 		}
 	},
 	ClothesCategories: {
-		blouses: 'Blouse',
+		blouse: 'Blouse',
 		dress: 'Dress',
 		trousers: 'Trousers',
 		skirt: 'Skirt',
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 56100c3..10de1ad 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -133,7 +133,6 @@ export default {
 		subtitle: '你的数字单品尽在此处',
 		common: {
 			all: '全部',
-			currencyHkd: 'HKD'
 		},
 		tabs: {
 			ariaLabel: '衣橱标签页',
@@ -187,7 +186,7 @@ export default {
 		}
 	},
 	ClothesCategories: {
-		blouses: '衬衫',
+		blouse: '衬衫',
 		dress: '连衣裙',
 		trousers: '裤子',
 		skirt: '短裙',
diff --git a/src/utils/ClothesCategory.ts b/src/utils/ClothesCategory.ts
index cd8d276..eac9c9f 100644
--- a/src/utils/ClothesCategory.ts
+++ b/src/utils/ClothesCategory.ts
@@ -6,8 +6,8 @@ type Translate = (key: string) => string
 
 const clothesCategoryConfigs = [
   {
-    key: 'blouses',
-    value: 'blouses'
+    key: 'blouse',
+    value: 'blouse'
   },
   {
     key: 'dress',
diff --git a/src/views/shoppingCart/sc-item.vue b/src/views/shoppingCart/sc-item.vue
index 4283378..92ecffa 100644
--- a/src/views/shoppingCart/sc-item.vue
+++ b/src/views/shoppingCart/sc-item.vue
@@ -11,7 +11,7 @@
 		<img :src="info.cover" />
 		<div class="content">
 			<div class="title">{{ info.title }}</div>
-			<div class="brand">
+			<div class="brand" v-if="showBrand">
 				<span class="icon"><svg-icon name="order-shop" size="24" /></span>
 				<span class="text">{{ info.brand }}</span>
 			</div>
@@ -57,6 +57,7 @@
 		showDate: { type: Boolean, default: true },
 		showRemove: { type: Boolean, default: true },
 		orderActionsLayout: { type: Boolean, default: false },
+		showBrand: { type: Boolean, default: true },
 		info: {
 			type: Object as () => {
 				status: number
diff --git a/src/views/wardrobe/Assets.vue b/src/views/wardrobe/Assets.vue
index b114e39..2b7847e 100644
--- a/src/views/wardrobe/Assets.vue
+++ b/src/views/wardrobe/Assets.vue
@@ -1,559 +1,544 @@
 <template>
-  <div class="wardrobe-assets flex">
-    <aside class="wardrobe-assets__filters">
-      <div class="filters-card">
-        <div class="filters-card__heading">
-          <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>
+	<div class="wardrobe-assets flex">
+		<FilterSidebar
+			:categories="categories"
+			:genders="genders"
+			:filters="filters"
+			@update:filters="updateFilters"
+		/>
 
-        <section class="filter-group">
-          <h3 class="filter-group__title">{{ t('Wardrobe.assets.categories') }}</h3>
-          <div class="filter-group__line"></div>
-          <div class="filter-group__options">
-            <button
-              v-for="option in categories"
-              :key="option.value"
-              class="filter-option"
-              type="button"
-              :class="{ 'is-active': isCategoryActive(option.value) }"
-              @click="toggleCategory(option.value)"
-            >
-              <span class="filter-option__box">
-                <span class="filter-option__tick"></span>
-              </span>
-              <span class="filter-option__label">{{ option.label }}</span>
-            </button>
-          </div>
-        </section>
+		<section
+			class="wardrobe-assets__content flex flex-1 flex-col"
+			:class="{ 'has-data': dataList.length }"
+		>
+			<div class="assets-toolbar">
+				<div class="assets-toolbar__selection">
+					<div class="select-count flex align-center">
+						<img src="@/assets/images/wardrobe/select.png" />
+						<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>
 
-        <section class="filter-group">
-          <h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
-          <div class="filter-group__line"></div>
-          <div class="filter-group__options">
-            <button
-              v-for="option in genders"
-              :key="option.value"
-              class="filter-option"
-              type="button"
-              :class="{ 'is-active': filters.gender === option.value }"
-              @click="setGender(option.value)"
-            >
-              <span class="filter-option__box">
-                <span class="filter-option__tick"></span>
-              </span>
-              <span class="filter-option__label">{{ option.label }}</span>
-            </button>
-          </div>
-        </section>
-      </div>
-    </aside>
+				<div class="assets-toolbar__actions">
+					<div
+						class="assets-toolbar__download flex flex-center"
+						:class="{ disabled: selectedCount < 1 }"
+						@click="handleDownloadSelected"
+					>
+						<SvgIcon name="downloadBtn" color="#fff" />
+						<span>{{ t('Wardrobe.assets.downloadSelected') }}</span>
+					</div>
+				</div>
+			</div>
+			<div v-if="dataList.length" class="data-list-container">
+				<div ref="dataListRef" class="data-list">
+					<div
+						v-for="(item, index) in dataList"
+						:key="item.listingId"
+						class="item"
+						:class="{ 'is-last-column': isLastColumn(index) }"
+					>
+						<img
+							v-show="item.checked"
+							src="@/assets/images/wardrobe/checked.png"
+							@click="handleSelectItem(item)"
+							class="checkbox"
+						/>
+						<div
+							v-show="!item.checked"
+							class="checkbox"
+							@click="handleSelectItem(item)"
+						/>
+						<CommodityItem
+							download
+							:url="item.thumbnailUrl"
+							:name="item.listingName"
+							:showPrice="false"
+						></CommodityItem>
+					</div>
+				</div>
+			</div>
 
-    <section
-      class="wardrobe-assets__content flex flex-1 flex-col"
-      :class="{ 'has-data': dataList.length }"
-    >
-      <div class="assets-toolbar">
-        <div class="assets-toolbar__selection">
-          <div class="select-count flex align-center">
-            <img src="@/assets/images/wardrobe/select.png" />
-            <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>
-
-        <div class="assets-toolbar__actions">
-          <div
-            class="assets-toolbar__download flex flex-center"
-            :class="{ disabled: selectedCount < 1 }"
-            @click="handleDownloadSelected"
-          >
-            <SvgIcon name="downloadBtn" color="#fff" />
-            <span>{{ t('Wardrobe.assets.downloadSelected') }}</span>
-          </div>
-        </div>
-      </div>
-      <div v-if="dataList.length" class="data-list-container">
-        <div ref="dataListRef" class="data-list">
-          <div
-            v-for="(item, index) in dataList"
-            :key="item.url"
-            class="item"
-            :class="{ 'is-last-column': isLastColumn(index) }"
-          >
-            <img
-              v-show="item.checked"
-              src="@/assets/images/wardrobe/checked.png"
-              @click="handleSelectItem(item)"
-              class="checkbox"
-            />
-            <div v-show="!item.checked" class="checkbox" @click="handleSelectItem(item)" />
-            <CommodityItem
-              download
-              :url="item.url"
-              :name="item.title"
-              :price="item.price"
-              :showPrice="false"
-            ></CommodityItem>
-          </div>
-        </div>
-      </div>
-
-      <Empty v-else @explore="goToDigitalItems" />
-    </section>
-  </div>
+			<Empty v-else @explore="goToDigitalItems" />
+		</section>
+	</div>
 </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'
+	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'
+	import FilterSidebar from './FilterSidebar.vue'
+	import { fetchMyWardrobe } from '@/api/user'
+	import { useUserInfoStore } from '@/stores'
 
-interface FilterOption {
-  label: string
-  value: string
-}
+	const buyerId = useUserInfoStore().state.userInfo?.userId
 
-const router = useRouter()
-const { t } = useI18n({ useScope: 'global' })
-const clothesCategories = useClothesCategories()
+	interface FilterOption {
+		label: string
+		value: string
+	}
 
-const categories = computed<FilterOption[]>(() => [
-  { label: t('Wardrobe.common.all'), value: 'all' },
-  ...clothesCategories.value.map((option) => ({
-    label: option.label,
-    value: option.value
-  }))
-])
+	const router = useRouter()
+	const { t } = useI18n({ useScope: 'global' })
+	const clothesCategories = useClothesCategories()
 
-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 categories = computed<FilterOption[]>(() => [
+		{ label: t('Wardrobe.common.all'), value: 'all' },
+		...clothesCategories.value.map((option) => ({
+			label: option.label,
+			value: option.value
+		}))
+	])
 
-const categoryValues = computed(() =>
-  categories.value.filter((option) => option.value !== 'all').map((option) => option.value)
-)
+	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 filters = reactive({
-  categories: ['skirt'] as string[],
-  gender: 'all'
-})
+	const categoryValues = computed(() =>
+		categories.value.filter((option) => option.value !== 'all').map((option) => option.value)
+	)
 
-const dataList = ref([
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  }
-])
-const dataListRef = ref<HTMLDivElement | null>(null)
-const gridColumnCount = shallowRef(1)
-let gridResizeObserver: ResizeObserver | null = null
+	const genderValues = computed(() =>
+		genders.value.filter((option) => option.value !== 'all').map((option) => option.value)
+	)
 
-watch(
-  () => filters,
-  (val) => {
-    console.log(val)
-  },
-  { deep: true }
-)
+	const dataList = ref([
+		{
+			url: img,
+			title: 'Windswept Burden',
+			price: '$100.00',
+			checked: false
+		}
+	])
+	const dataListRef = ref<HTMLDivElement | null>(null)
+	const gridColumnCount = shallowRef(1)
+	let gridResizeObserver: ResizeObserver | null = null
 
-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 filters = reactive({
+		categories: [
+			'blouse',
+			'dress',
+			'trousers',
+			'skirt',
+			'tops',
+			'bottoms',
+			'outwear',
+			'others'
+		],
+		genders: ['male', 'female']
+	})
+	const pageParams= reactive({
+		page: 1,
+		size: 10
+	})
+	const handleGetAssets = () => {
+		fetchMyWardrobe({
+			buyerId: buyerId,
+			categories: [],
+			designFor: filters.genders.length > 1 ? 'all' : filters.genders[0],
+			page: pageParams.page,
+			size: pageParams.size
+		}).then(res => {
+			console.log(res)
+			dataList.value = res.content
+		})
+	}
 
-const isCategoryActive = (value: string) => {
-  if (value === 'all') {
-    return allCategoriesSelected.value
-  }
+	watch(
+		() => filters,
+		(val) => {
+			console.log(val)
+		},
+		{ deep: true }
+	)
 
-  return filters.categories.includes(value)
-}
+	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 toggleCategory = (value: string) => {
-  if (value === 'all') {
-    filters.categories = allCategoriesSelected.value ? [] : [...categoryValues.value]
-    return
-  }
+	const allGendersSelected = computed(() => {
+		return (
+			filters.genders.length === genderValues.value.length &&
+			genderValues.value.every((value) => filters.genders.includes(value))
+		)
+	})
 
-  if (filters.categories.includes(value)) {
-    filters.categories = filters.categories.filter((item) => item !== value)
-    return
-  }
+	const isCategoryActive = (value: string) => {
+		if (value === 'all') {
+			return allCategoriesSelected.value
+		}
 
-  filters.categories = [...filters.categories, value]
-}
+		return filters.categories.includes(value)
+	}
 
-const setGender = (value: string) => {
-  filters.gender = value
-}
+	const toggleCategory = (value: string) => {
+		if (value === 'all') {
+			filters.categories = allCategoriesSelected.value ? [] : [...categoryValues.value]
+			return
+		}
 
-const clearFilters = () => {
-  filters.categories = [...categoryValues.value]
-  filters.gender = 'all'
-}
+		if (filters.categories.includes(value)) {
+			filters.categories = filters.categories.filter((item) => item !== value)
+			return
+		}
 
-const handleSelectItem = (item) => {
-  console.log('111', item)
-  item.checked = !item.checked
-}
+		filters.categories = [...filters.categories, value]
+	}
 
-const handleSelectAll = (flag) => {
-  dataList.value.forEach((item) => {
-    item.checked = flag
-  })
-}
+	const isGenderActive = (value: string) => {
+		if (value === 'all') {
+			return allGendersSelected.value
+		}
 
-const handleDownloadSelected = () => {
-  const items = dataList.value.filter((item) => item.checked)
-  console.log(items)
-}
+		return filters.genders.includes(value)
+	}
 
-const updateGridColumnCount = () => {
-  if (!dataListRef.value) {
-    gridColumnCount.value = 1
-    return
-  }
+	const toggleGender = (value: string) => {
+		if (value === 'all') {
+			filters.genders = allGendersSelected.value ? [] : [...genderValues.value]
+			return
+		}
 
-  const templateColumns = window.getComputedStyle(dataListRef.value).gridTemplateColumns
-  const columnCount =
-    templateColumns && templateColumns !== 'none'
-      ? templateColumns.split(' ').filter(Boolean).length
-      : 1
+		if (filters.genders.includes(value)) {
+			filters.genders = filters.genders.filter((item) => item !== value)
+			return
+		}
 
-  gridColumnCount.value = Math.max(columnCount, 1)
-}
+		filters.genders = [...filters.genders, value]
+	}
 
-const isLastColumn = (index: number) => {
-  return (index + 1) % gridColumnCount.value === 0
-}
+	const updateFilters = (value: { categories: string[]; genders: string[] }) => {
+		filters.categories = value.categories
+		filters.genders = value.genders
+	}
 
-const goToDigitalItems = () => {
-  router.push('/digitalItem')
-}
+	const handleSelectItem = (item) => {
+		item.checked = !item.checked
+	}
 
-onMounted(() => {
-  nextTick(() => {
-    updateGridColumnCount()
+	const handleSelectAll = (flag) => {
+		dataList.value.forEach((item) => {
+			item.checked = flag
+		})
+	}
 
-    if (!dataListRef.value || typeof ResizeObserver === 'undefined') {
-      return
-    }
+	const handleDownloadSelected = () => {
+		const items = dataList.value.filter((item) => item.checked)
+		console.log(items)
+	}
 
-    gridResizeObserver = new ResizeObserver(() => {
-      updateGridColumnCount()
-    })
-    gridResizeObserver.observe(dataListRef.value)
-  })
-})
+	const updateGridColumnCount = () => {
+		if (!dataListRef.value) {
+			gridColumnCount.value = 1
+			return
+		}
 
-onUnmounted(() => {
-  gridResizeObserver?.disconnect()
-})
+		const templateColumns = window.getComputedStyle(dataListRef.value).gridTemplateColumns
+		const columnCount =
+			templateColumns && templateColumns !== 'none'
+				? templateColumns.split(' ').filter(Boolean).length
+				: 1
+
+		gridColumnCount.value = Math.max(columnCount, 1)
+	}
+
+	const isLastColumn = (index: number) => {
+		return (index + 1) % gridColumnCount.value === 0
+	}
+
+	const goToDigitalItems = () => {
+		router.push('/digitalItem')
+	}
+
+	onMounted(() => {
+		handleGetAssets()
+		nextTick(() => {
+			updateGridColumnCount()
+
+			if (!dataListRef.value || typeof ResizeObserver === 'undefined') {
+				return
+			}
+
+			gridResizeObserver = new ResizeObserver(() => {
+				updateGridColumnCount()
+			})
+			gridResizeObserver.observe(dataListRef.value)
+		})
+	})
+
+	onUnmounted(() => {
+		gridResizeObserver?.disconnect()
+	})
 </script>
 <style lang="less" scoped>
-.c-svg {
-  width: initial;
-  height: initial;
-}
-.wardrobe-assets {
-  --wardrobe-border-color: #d9d4cd;
-  --wardrobe-border-dark: #c8c0b4;
-  --wardrobe-text-main: #232323;
-  --wardrobe-text-secondary: #7a746d;
-  --wardrobe-text-muted: #a0978b;
-  height: 100%;
-  // overflow: hidden;
-  padding: 0 9rem 0 10rem;
+	.c-svg {
+		width: initial;
+		height: initial;
+	}
+	.wardrobe-assets {
+		--wardrobe-border-color: #d9d4cd;
+		--wardrobe-border-dark: #c8c0b4;
+		--wardrobe-text-main: #232323;
+		--wardrobe-text-secondary: #7a746d;
+		--wardrobe-text-muted: #a0978b;
+		height: 100%;
+		// overflow: hidden;
+		padding: 0 9rem 0 10rem;
 
-  .wardrobe-assets__filters {
-    width: 26.4rem;
-    border-right: 0.1rem solid var(--wardrobe-border-color);
-    // background: #fffcf7;
-    overflow-y: auto;
+		.wardrobe-assets__filters {
+			width: 26.4rem;
+			border-right: 0.1rem solid var(--wardrobe-border-color);
+			// background: #fffcf7;
+			overflow-y: auto;
 
-    .filters-card {
-      padding: 3rem 2.4rem 4rem;
+			.filters-card {
+				padding: 3rem 2.4rem 4rem;
 
-      .filters-card__heading {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 3.2rem;
+				.filters-card__heading {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom: 3.2rem;
 
-        .filters-card__title {
-          margin: 0;
-          font-family: 'KaiseiOpti-Bold';
-          font-size: 2.4rem;
-          line-height: 1.2;
-          color: var(--wardrobe-text-main);
-        }
+					.filters-card__title {
+						margin: 0;
+						font-family: 'KaiseiOpti-Bold';
+						font-size: 2.4rem;
+						line-height: 1.2;
+						color: var(--wardrobe-text-main);
+					}
 
-        .filters-card__clear {
-          border: 0;
-          padding: 0;
-          background: transparent;
-          font-family: 'KaiseiOpti-Regular';
-          font-size: 1.4rem;
-          line-height: 1.3;
-          color: #9a9185;
-          text-decoration: underline;
-          cursor: pointer;
-        }
-      }
+					.filters-card__clear {
+						border: 0;
+						padding: 0;
+						background: transparent;
+						font-family: 'KaiseiOpti-Regular';
+						font-size: 1.4rem;
+						line-height: 1.3;
+						color: #9a9185;
+						text-decoration: underline;
+						cursor: pointer;
+					}
+				}
 
-      .filter-group {
-        & + .filter-group {
-          margin-top: 3.4rem;
-        }
+				.filter-group {
+					& + .filter-group {
+						margin-top: 3.4rem;
+					}
 
-        .filter-group__title {
-          margin: 0 0 1rem;
-          font-family: 'KaiseiOpti-Bold';
-          font-size: 1.8rem;
-          line-height: 1.3;
-          color: #5e5851;
-        }
+					.filter-group__title {
+						margin: 0 0 1rem;
+						font-family: 'KaiseiOpti-Bold';
+						font-size: 1.8rem;
+						line-height: 1.3;
+						color: #5e5851;
+					}
 
-        .filter-group__line {
-          width: 100%;
-          height: 0.1rem;
-          background: var(--wardrobe-border-color);
-          margin-bottom: 2rem;
-        }
+					.filter-group__line {
+						width: 100%;
+						height: 0.1rem;
+						background: var(--wardrobe-border-color);
+						margin-bottom: 2rem;
+					}
 
-        .filter-group__options {
-          display: flex;
-          flex-direction: column;
-          gap: 1.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 {
+							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__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;
-              }
-            }
+								.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);
+							&.is-active {
+								color: var(--wardrobe-text-main);
 
-              .filter-option__box {
-                border-color: var(--wardrobe-text-main);
-                background: var(--wardrobe-text-main);
+								.filter-option__box {
+									border-color: var(--wardrobe-text-main);
+									background: var(--wardrobe-text-main);
 
-                .filter-option__tick {
-                  opacity: 1;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+									.filter-option__tick {
+										opacity: 1;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
 
-  .wardrobe-assets__content {
-    border-right: 0.05rem solid #585858;
-    // &.has-data {
-    //   border: none;
-    // }
+		.wardrobe-assets__content {
+			border-right: 0.05rem solid #585858;
+			// &.has-data {
+			//   border: none;
+			// }
 
-    .assets-toolbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 1.8rem 1.2rem;
-      border-bottom: 0.05rem solid #585858;
+			.assets-toolbar {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 1.8rem 1.2rem;
+				border-bottom: 0.05rem solid #585858;
 
-      .assets-toolbar__selection {
-        display: flex;
-        align-items: center;
-        gap: 1.4rem;
-        flex-wrap: wrap;
-      }
+				.assets-toolbar__selection {
+					display: flex;
+					align-items: center;
+					gap: 1.4rem;
+					flex-wrap: wrap;
+				}
 
-      .assets-toolbar__selection {
-        font-family: 'KaiseiOpti-Regular';
-        .select-count {
-          column-gap: 1.2rem;
-          img {
-            width: 2.4rem;
-            height: 2.4rem;
-          }
-          .assets-toolbar__count {
-            position: relative;
-            font-size: 1.4rem;
-            line-height: 1.2;
-            color: #57524b;
-          }
-        }
+				.assets-toolbar__selection {
+					font-family: 'KaiseiOpti-Regular';
+					.select-count {
+						column-gap: 1.2rem;
+						img {
+							width: 2.4rem;
+							height: 2.4rem;
+						}
+						.assets-toolbar__count {
+							position: relative;
+							font-size: 1.4rem;
+							line-height: 1.2;
+							color: #57524b;
+						}
+					}
 
-        .assets-toolbar__link {
-          border: 0;
-          padding: 0;
-          cursor: pointer;
-          font-size: 1.4rem;
-          color: #a0978b;
-          text-decoration: underline;
-        }
-      }
+					.assets-toolbar__link {
+						border: 0;
+						padding: 0;
+						cursor: pointer;
+						font-size: 1.4rem;
+						color: #a0978b;
+						text-decoration: underline;
+					}
+				}
 
-      .assets-toolbar__actions {
-        display: flex;
-        align-items: center;
+				.assets-toolbar__actions {
+					display: flex;
+					align-items: center;
 
-        .assets-toolbar__download {
-          height: 4.4rem;
-          padding: 0 3rem;
-          border: 0.1rem solid #232323;
-          background: #232323;
-          font-family: 'KaiseiOpti-Regular';
-          font-size: 1.3rem;
-          color: #fff;
-          cursor: pointer;
-          column-gap: 1.2rem;
-          &.disabled {
-            background-color: #979797;
-            border-color: #979797;
-          }
-        }
-      }
-    }
+					.assets-toolbar__download {
+						height: 4.4rem;
+						padding: 0 3rem;
+						border: 0.1rem solid #232323;
+						background: #232323;
+						font-family: 'KaiseiOpti-Regular';
+						font-size: 1.3rem;
+						color: #fff;
+						cursor: pointer;
+						column-gap: 1.2rem;
+						&.disabled {
+							background-color: #979797;
+							border-color: #979797;
+						}
+					}
+				}
+			}
 
-    .data-list-container {
-      overflow-y: auto;
-      padding-bottom: 8rem;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-      .data-list {
-        width: 100%;
-        flex: 1;
-        display: grid;
-        align-content: start;
-        grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
-        border-top: 0.05rem solid #585858;
-        border-left: 0.05rem solid #585858;
+			.data-list-container {
+				overflow-y: auto;
+				padding-bottom: 8rem;
+				&::-webkit-scrollbar {
+					display: none;
+				}
+				.data-list {
+					width: 100%;
+					flex: 1;
+					display: grid;
+					align-content: start;
+					grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
+					border-top: 0.05rem solid #585858;
+					border-left: 0.05rem solid #585858;
 
-        .item {
-          width: 100%;
-          min-width: 0;
-          padding: 1.2rem;
-          background: #ffffff;
-          position: relative;
-          box-sizing: border-box;
-          border-bottom: 0.05rem solid #585858;
+					.item {
+						width: 100%;
+						min-width: 0;
+						padding: 1.2rem;
+						background: #ffffff;
+						position: relative;
+						box-sizing: border-box;
+						border-bottom: 0.05rem solid #585858;
 
-          &:not(.is-last-column) {
-            border-right: 0.05rem solid #585858;
-          }
+						&:not(.is-last-column) {
+							border-right: 0.05rem solid #585858;
+						}
 
-          .checkbox {
-            position: absolute;
-            top: 1.2rem;
-            left: 1.2rem;
-            width: 2.4rem;
-            height: 2.4rem;
-            border: 0.15rem solid #585858;
-            cursor: pointer;
-          }
+						.checkbox {
+							position: absolute;
+							top: 1.2rem;
+							left: 1.2rem;
+							width: 2.4rem;
+							height: 2.4rem;
+							border: 0.15rem solid #585858;
+							cursor: pointer;
+						}
 
-          :deep(.commodity-item) {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-}
+						:deep(.commodity-item) {
+							width: 100%;
+						}
+					}
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/views/wardrobe/FilterSidebar.vue b/src/views/wardrobe/FilterSidebar.vue
new file mode 100644
index 0000000..bae379c
--- /dev/null
+++ b/src/views/wardrobe/FilterSidebar.vue
@@ -0,0 +1,301 @@
+<template>
+	<aside class="wardrobe-assets__filters">
+		<div class="filters-card">
+			<div class="filters-card__heading">
+				<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">{{ t('Wardrobe.assets.categories') }}</h3>
+				<div class="filter-group__line"></div>
+				<div class="filter-group__options">
+					<button
+						v-for="option in categories"
+						:key="option.value"
+						class="filter-option"
+						type="button"
+						:class="{ 'is-active': isCategoryActive(option.value) }"
+						@click="toggleCategory(option.value)"
+					>
+						<span class="filter-option__box">
+							<span class="filter-option__tick"></span>
+						</span>
+						<span class="filter-option__label">{{ option.label }}</span>
+					</button>
+				</div>
+			</section>
+
+			<section class="filter-group">
+				<h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
+				<div class="filter-group__line"></div>
+				<div class="filter-group__options">
+					<button
+						v-for="option in genders"
+						:key="option.value"
+						class="filter-option"
+						type="button"
+						:class="{ 'is-active': isGenderActive(option.value) }"
+						@click="toggleGender(option.value)"
+					>
+						<span class="filter-option__box">
+							<span class="filter-option__tick"></span>
+						</span>
+						<span class="filter-option__label">{{ option.label }}</span>
+					</button>
+				</div>
+			</section>
+		</div>
+	</aside>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import type { PropType } from 'vue'
+
+	interface FilterOption {
+		label: string
+		value: string
+	}
+
+	interface FilterState {
+		categories: string[]
+		genders: string[]
+	}
+
+	const props = defineProps({
+		categories: {
+			type: Array as PropType<FilterOption[]>,
+			required: true
+		},
+		genders: {
+			type: Array as PropType<FilterOption[]>,
+			required: true
+		},
+		filters: {
+			type: Object as PropType<FilterState>,
+			required: true
+		}
+	})
+
+	const emit = defineEmits<{
+		(e: 'update:filters', payload: FilterState): void
+	}>()
+
+	const { t } = useI18n({ useScope: 'global' })
+
+	const categoryValues = computed(() =>
+		props.categories.filter((option) => option.value !== 'all').map((option) => option.value)
+	)
+
+	const genderValues = computed(() =>
+		props.genders.filter((option) => option.value !== 'all').map((option) => option.value)
+	)
+
+	const allCategoriesSelected = computed(() => {
+		return (
+			props.filters.categories.length === categoryValues.value.length &&
+			categoryValues.value.every((value) => props.filters.categories.includes(value))
+		)
+	})
+
+	const allGendersSelected = computed(() => {
+		return (
+			props.filters.genders.length === genderValues.value.length &&
+			genderValues.value.every((value) => props.filters.genders.includes(value))
+		)
+	})
+
+	const currentFilters = computed<FilterState>(() => ({
+		categories: [...props.filters.categories],
+		genders: [...props.filters.genders]
+	}))
+
+	const updateFilters = (updated: Partial<FilterState>) => {
+		emit('update:filters', {
+			categories: updated.categories ?? currentFilters.value.categories,
+			genders: updated.genders ?? currentFilters.value.genders
+		})
+	}
+
+	const isCategoryActive = (value: string) => {
+		if (value === 'all') {
+			return allCategoriesSelected.value
+		}
+
+		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]
+		})
+	}
+
+	const clearFilters = () => {
+		updateFilters({
+			categories: [...categoryValues.value],
+			genders: [...genderValues.value]
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.wardrobe-assets__filters {
+		width: 26.4rem;
+		border-right: 0.1rem solid var(--wardrobe-border-color);
+		overflow-y: auto;
+
+		.filters-card {
+			padding: 3rem 2.4rem 4rem;
+
+			.filters-card__heading {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-bottom: 3.2rem;
+
+				.filters-card__title {
+					margin: 0;
+					font-family: 'KaiseiOpti-Bold';
+					font-size: 2.4rem;
+					line-height: 1.2;
+					color: var(--wardrobe-text-main);
+				}
+
+				.filters-card__clear {
+					border: 0;
+					padding: 0;
+					background: transparent;
+					font-family: 'KaiseiOpti-Regular';
+					font-size: 1.4rem;
+					line-height: 1.3;
+					color: #9a9185;
+					text-decoration: underline;
+					cursor: pointer;
+				}
+			}
+
+			.filter-group {
+				& + .filter-group {
+					margin-top: 3.4rem;
+				}
+
+				.filter-group__title {
+					margin: 0 0 1rem;
+					font-family: 'KaiseiOpti-Bold';
+					font-size: 1.8rem;
+					line-height: 1.3;
+					color: #5e5851;
+				}
+
+				.filter-group__line {
+					width: 100%;
+					height: 0.1rem;
+					background: var(--wardrobe-border-color);
+					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;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/views/wardrobe/Orders.vue b/src/views/wardrobe/Orders.vue
index 373e620..cdec213 100644
--- a/src/views/wardrobe/Orders.vue
+++ b/src/views/wardrobe/Orders.vue
@@ -1,450 +1,516 @@
 <template>
-  <div class="wardrobe-orders">
-    <div class="orders-toolbar">
-      <button
-        v-for="status in statusOptions"
-        :key="status.key"
-        class="orders-toolbar__chip"
-        type="button"
-        :class="{ 'is-active': activeStatus === status.key }"
-        @click="activeStatus = status.key"
-      >
-        {{ status.label }}
-      </button>
-    </div>
+	<div ref="ordersScrollRef" class="wardrobe-orders" @scroll="handleOrdersScroll">
+		<div class="orders-toolbar">
+			<button
+				v-for="status in statusOptions"
+				:key="status.key"
+				class="orders-toolbar__chip"
+				type="button"
+				:class="{ 'is-active': activeStatus === status.key }"
+				@click="setActiveStatus(status.key)"
+			>
+				{{ status.label }}
+			</button>
+		</div>
 
-    <div class="orders-list">
-      <article v-for="order in filteredOrders" :key="order.id" class="order-card">
-        <button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
-          <span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
-        </button>
+		<div class="orders-list">
+			<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
+				<button
+					class="order-card__toggle"
+					type="button"
+					@click="toggleOrder(order.orderId)"
+				>
+					<span :class="{ 'is-expanded': expandedOrderId === order.orderId }"></span>
+				</button>
 
-        <div class="order-card__summary">
-          <div class="order-card__meta">
-            <h3 class="order-card__id">{{ order.id }}</h3>
-            <p class="order-card__date">{{ order.date }}</p>
-          </div>
+				<div class="order-card__summary">
+					<div class="order-card__meta">
+						<h3 class="order-card__id">{{ order.orderId }}</h3>
+						<div class="brand flex align-center">
+							<span class="icon"><svg-icon name="order-shop" size="24" /></span>
+							<span class="text">{{ order.shopName }}</span>
+						</div>
+						<p class="order-card__date">{{ order.formatUpdatetime }}</p>
+					</div>
 
-          <div class="order-card__preview" aria-hidden="true">
-            <span
-              v-for="item in order.items.slice(0, 2)"
-              :key="item.id"
-              class="order-card__thumb"
-              :style="{ backgroundColor: item.color }"
-            ></span>
-            <span v-if="getExtraCount(order)" class="order-card__extra">
-              {{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
-            </span>
-          </div>
+					<div class="order-card__preview" aria-hidden="true">
+						<span
+							v-for="item in order.items.slice(0, 2)"
+							:key="item.id"
+							class="order-card__thumb"
+							:style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
+						></span>
+						<span v-if="getExtraCount(order)" class="order-card__extra">
+							{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
+						</span>
+					</div>
 
-          <div class="order-card__status" :class="`is-${order.status}`">
-            {{ getStatusBadgeLabel(order.status) }}
-          </div>
+					<div class="order-card__status" :class="`is-${getOrderStatus(order)}`">
+						{{ getStatusBadgeLabel(getOrderStatus(order)) }}
+					</div>
 
-          <div class="order-card__amount">
-            <span>${{ order.amount }}</span>
-            <small>{{ t('Wardrobe.common.currencyHkd') }}</small>
-          </div>
+					<div class="order-card__amount">
+						<span>${{ order.totalPrice }}</span>
+						<small>HKD</small>
+					</div>
 
-          <button
-            class="order-card__action"
-            type="button"
-            :class="{ 'is-primary': order.status === 'unpaid' }"
-          >
-            <svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
-            <span>{{ getOrderActionLabel(order.status) }}</span>
-          </button>
-        </div>
+					<button
+						class="order-card__action"
+						type="button"
+						:class="{ 'is-primary': getOrderStatus(order) === 'unpaid' }"
+					>
+						<svg-icon
+							v-if="getOrderStatus(order) === 'paid'"
+							name="Invoice"
+							size="20"
+							color="#232323"
+						/>
+						<span>{{ getOrderActionLabel(getOrderStatus(order)) }}</span>
+					</button>
+				</div>
 
-        <div v-if="expandedOrderId === order.id" class="order-card__details">
-          <ScItem
-            v-for="item in order.items"
-            :key="item.id"
-            class="order-card__item"
-            :style="{ '--order-item-placeholder': item.color }"
-            :info="item"
-            :show-date="false"
-            :show-remove="false"
-            order-actions-layout
-          />
-        </div>
-      </article>
-    </div>
-  </div>
+				<div v-if="expandedOrderId === order.orderId" class="order-card__details">
+					<ScItem
+						v-for="item in order.items"
+						:key="item.id"
+						class="order-card__item"
+						:info="getOrderItemInfo(item, order)"
+						:show-date="false"
+						:show-remove="false"
+						:show-brand="false"
+						order-actions-layout
+					/>
+				</div>
+			</article>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { computed, shallowRef, onMounted,ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { fetchMyOrders } from '@/api/user'
-import ScItem from '@/views/shoppingCart/sc-item.vue'
+	import { computed, onMounted, ref, shallowRef } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import { fetchMyOrders } from '@/api/user'
+	import ScItem from '@/views/shoppingCart/sc-item.vue'
 
-type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
-type ActualOrderStatus = Exclude<OrderStatus, 'all'>
+	type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
+	type ActualOrderStatus = Exclude<OrderStatus, 'all'>
 
-interface StatusOption {
-  key: OrderStatus
-  label: string
-}
+	interface StatusOption {
+		key: OrderStatus
+		label: string
+		value?: number
+	}
 
-interface OrderItem {
-  id: number
-  url: string
-  title: string
-  brand: string
-  fileSize: number
-  date: string
-  amount: number
-  tags: string[]
-  checked: boolean
-  color: string
-}
+	interface OrderItem {
+		id: string
+		listingName: string
+		price: number
+		productCategory: string[]
+		thumbnailUrl: string
+		orderId: string
+		shopName: string
+		status: number
+		totalPrice: number
+		updateTime: string
+	}
 
-interface OrderRecord {
-  id: string
-  date: string
-  status: ActualOrderStatus
-  amount: number
-  items: OrderItem[]
-}
+	interface OrderRecord {
+		orderId: string
+		shopName: string
+		totalPrice: number
+		updateTime: string
+		items: OrderItem[]
+	}
 
-const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
-const { t } = useI18n({ useScope: 'global' })
+	interface DisplayOrderRecord extends OrderRecord {
+		formatUpdatetime: string
+	}
 
-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 { t, locale } = useI18n({ useScope: 'global' })
 
-const createOrderItem = (
-  id: number,
-  title: string,
-  brand: string,
-  amount: number,
-  color: string
-): OrderItem => {
-  return {
-    id,
-    url: placeholderImage,
-    title,
-    brand,
-    fileSize: 1024 * (id + 2),
-    date: '2026-02-16 23:34',
-    amount,
-    color,
-    checked: false,
-    tags: ['female', 'dress', 'blouse', 'outwear']
-  }
-}
-const orders: OrderRecord[] = [
-  {
-    id: 'SP897772698',
-    date: 'Feb 23, 2026, 3:00 PM',
-    status: 'paid',
-    amount: 45,
-    items: [
-      createOrderItem(1, 'North Outfit Set', 'Roaming Clouds', 15, '#e7e1d7'),
-      createOrderItem(2, 'Velvet Night Dress', 'Ivory Muse Studio', 16, '#5d2f5e'),
-      createOrderItem(3, 'Maison Contour Suit', 'Ivory Muse Studio', 14, '#dcd8d1')
-    ]
-  },
-  {
-    id: 'SP893872698',
-    date: 'Feb 21, 2026, 10:20 AM',
-    status: 'unpaid',
-    amount: 15,
-    items: [createOrderItem(4, 'Silver Drape Dress', 'Roaming Clouds', 15, '#d8d3ca')]
-  },
-  {
-    id: 'SP897262698',
-    date: 'Feb 16, 2026, 11:34 PM',
-    status: 'paid',
-    amount: 29,
-    items: [
-      createOrderItem(5, 'North Outfit Set', 'Roaming Clouds', 15, '#ece8df'),
-      createOrderItem(6, 'North Outfit Set', 'Ivory Muse Studio', 5, '#d5ddd7'),
-      createOrderItem(7, 'North Outfit Set', 'Ivory Muse Studio', 9, '#e5e1d9')
-    ]
-  },
-  {
-    id: 'SP892072692',
-    date: 'Feb 2, 2026, 9:34 PM',
-    status: 'paid',
-    amount: 15,
-    items: [
-      createOrderItem(8, 'Cream Jacket Set', 'Roaming Clouds', 7, '#eee3d3'),
-      createOrderItem(9, 'White Linen Dress', 'Ivory Muse Studio', 8, '#d8d8d8')
-    ]
-  },
-  {
-    id: 'SP892972603',
-    date: 'Jan 4, 2026, 8:22 PM',
-    status: 'cancelled',
-    amount: 15,
-    items: [createOrderItem(10, 'Soft Utility Knit', 'Urban Line Edit', 15, '#d8c2a4')]
-  }
-]
+	const statusOptions = computed<StatusOption[]>(() => [
+		{ key: 'all', label: t('Wardrobe.orders.statuses.all') },
+		{ key: 'paid', label: t('Wardrobe.orders.statuses.paid'), value: 1 },
+		{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid'), value: 0 },
+		{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled'), value: 2 }
+	])
 
-const activeStatus = shallowRef<OrderStatus>('all')
-const expandedOrderId = shallowRef('SP897262698')
+	const activeStatus = shallowRef<OrderStatus>('all')
+	const expandedOrderId = shallowRef('')
+	const orders = ref<OrderRecord[]>([])
+	const ordersScrollRef = ref<HTMLElement | null>(null)
+	const isLoadingOrders = shallowRef(false)
+	const hasMoreOrders = shallowRef(true)
+	const ordersRequestId = shallowRef(0)
+	const orderParams = ref({
+		page: 1,
+		size: 10
+	})
 
-const filteredOrders = computed(() => {
-  if (activeStatus.value === 'all') return orders
-  return orders.filter((order) => order.status === activeStatus.value)
-})
+	const filteredOrders = computed<DisplayOrderRecord[]>(() => {
+		return orders.value.map((order) => ({
+			...order,
+			formatUpdatetime: formatOrderUpdateTime(order.updateTime)
+		}))
+	})
 
-const toggleOrder = (orderId: string) => {
-  expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
-}
+	const toggleOrder = (orderId: string) => {
+		expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
+	}
 
-const getExtraCount = (order: OrderRecord) => {
-  return Math.max(order.items.length - 2, 0)
-}
+	const getExtraCount = (order: OrderRecord) => {
+		return Math.max(order.items.length - 2, 0)
+	}
 
-const getStatusBadgeLabel = (status: ActualOrderStatus) => {
-  return t(`Wardrobe.orders.statusBadges.${status}`)
-}
+	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')
-}
+	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')
+	}
 
-const orderParams =ref({
-  page: 1,
-  pageSize: 10,
-  status: ''
-})
-const fetchAllOrders = () => {
-  fetchMyOrders(orderParams.value)
-}
+	const getOrderStatusValue = (status: unknown): ActualOrderStatus => {
+		if (status === 0 || status === '0' || status === 'unpaid') return 'unpaid'
+		if (status === 2 || status === '2' || status === 'cancelled') return 'cancelled'
+		return 'paid'
+	}
 
-onMounted(() => {
-  fetchAllOrders()
-})
+	const getOrderStatus = (order: OrderRecord) => {
+		return getOrderStatusValue(order.items[0]?.status)
+	}
 
+	const formatOrderUpdateTime = (dateStr: string) => {
+		if (!dateStr) return ''
+
+		const date = new Date(dateStr)
+		if (Number.isNaN(date.getTime())) return dateStr
+
+		const isChinese = locale.value === 'CHINESE_SIMPLIFIED' || locale.value.startsWith('zh')
+		const dateLocale = isChinese ? 'zh-CN' : 'en-US'
+		const options: Intl.DateTimeFormatOptions = isChinese
+			? {
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+				hour: '2-digit',
+				minute: '2-digit',
+				hour12: false
+			}
+			: {
+				month: 'short',
+				day: 'numeric',
+				year: 'numeric',
+				hour: 'numeric',
+				minute: '2-digit',
+				hour12: true
+			}
+
+		return new Intl.DateTimeFormat(dateLocale, options).format(date)
+	}
+
+	const getOrderItemInfo = (item: OrderItem, order: OrderRecord) => ({
+		status: item.status,
+		title: item.listingName,
+		brand: order.shopName,
+		tags: item.productCategory,
+		date: item.updateTime,
+		amount: item.price,
+		cover: item.thumbnailUrl
+	})
+
+	const fetchAllOrders = async () => {
+		if (isLoadingOrders.value || !hasMoreOrders.value) return
+
+		const requestId = ordersRequestId.value
+		isLoadingOrders.value = true
+
+		try {
+			const params: { page: number; size: number; status?: number } = {
+				page: orderParams.value.page,
+				size: orderParams.value.size
+			}
+			const currentStatus = statusOptions.value.find((option) => option.key === activeStatus.value)
+
+			if (currentStatus?.value !== undefined) {
+				params.status = currentStatus.value
+			}
+
+			const res = await fetchMyOrders(params)
+			if (requestId !== ordersRequestId.value) return
+
+			const content = res.content ?? []
+
+			orders.value = orderParams.value.page === 1 ? content : [...orders.value, ...content]
+			hasMoreOrders.value = content.length >= orderParams.value.size
+
+			if (hasMoreOrders.value) {
+				orderParams.value.page += 1
+			}
+		} finally {
+			if (requestId === ordersRequestId.value) {
+				isLoadingOrders.value = false
+			}
+		}
+	}
+
+	const resetOrders = () => {
+		ordersRequestId.value += 1
+		orders.value = []
+		expandedOrderId.value = ''
+		isLoadingOrders.value = false
+		hasMoreOrders.value = true
+		orderParams.value.page = 1
+
+		if (ordersScrollRef.value) {
+			ordersScrollRef.value.scrollTop = 0
+		}
+	}
+
+	const setActiveStatus = (status: OrderStatus) => {
+		activeStatus.value = status
+		resetOrders()
+		fetchAllOrders()
+	}
+
+	const handleOrdersScroll = () => {
+		const el = ordersScrollRef.value
+		if (!el) return
+
+		const reachBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 120
+		if (reachBottom) {
+			fetchAllOrders()
+		}
+	}
+
+	onMounted(() => {
+		fetchAllOrders()
+	})
 </script>
 
 <style lang="less" scoped>
-.c-svg {
-  width: initial;
-  height: initial;
-}
-.wardrobe-orders {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  padding: 0 9rem;
-  overflow-y: auto;
+	.c-svg {
+		width: fit-content;
+		height: initial;
+	}
+	.wardrobe-orders {
+		height: 100%;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		padding: 0 9rem;
+		overflow-y: auto;
 
-  .orders-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 1.2rem;
-    padding: 3.6rem 0 2.8rem;
-    flex-wrap: wrap;
+		.orders-toolbar {
+			display: flex;
+			align-items: center;
+			gap: 1.2rem;
+			padding: 3.6rem 0 2.8rem;
+			flex-wrap: wrap;
 
-    .orders-toolbar__chip {
-      height: 4rem;
-      min-width: 8rem;
-      padding: 0 3rem;
-      border: 0.1rem solid #232323;
-      border-radius: 2rem;
-      background: #ffffff;
-      font-family: 'KaiseiOpti-Regular';
-      font-size: 1.6rem;
-      color: #585858;
-      font-weight: 400;
-      cursor: pointer;
+			.orders-toolbar__chip {
+				height: 4rem;
+				min-width: 8rem;
+				padding: 0 3rem;
+				border: 0.1rem solid #232323;
+				border-radius: 2rem;
+				background: #ffffff;
+				font-family: 'KaiseiOpti-Regular';
+				font-size: 1.6rem;
+				color: #585858;
+				font-weight: 400;
+				cursor: pointer;
 
-      &.is-active {
-        background: #232323;
-        border-color: #232323;
-        color: #ffffff;
-      }
-    }
-  }
+				&.is-active {
+					background: #232323;
+					border-color: #232323;
+					color: #ffffff;
+				}
+			}
+		}
 
-  .orders-list {
-    padding-bottom: 8rem;
-  }
-}
+		.orders-list {
+			padding-bottom: 8rem;
+		}
+	}
 
-.order-card {
-  position: relative;
-  border-bottom: 0.1rem solid #c4c4c4;
+	.order-card {
+		position: relative;
+		border-bottom: 0.1rem solid #c4c4c4;
 
-  .order-card__toggle {
-    position: absolute;
-    top: 5.8rem;
-    left: 4.2rem;
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
+		.order-card__toggle {
+			position: absolute;
+			top: 5.8rem;
+			left: 4.2rem;
+			width: 2rem;
+			height: 2rem;
+			padding: 0;
+			border: 0;
+			background: transparent;
+			cursor: pointer;
 
-    span {
-      display: block;
-      width: 0.9rem;
-      height: 0.9rem;
-      border-right: 0.1rem solid #585858;
-      border-bottom: 0.1rem solid #585858;
-      transform: rotate(-45deg);
-      transition: transform 0.2s ease;
+			span {
+				display: block;
+				width: 0.9rem;
+				height: 0.9rem;
+				border-right: 0.1rem solid #585858;
+				border-bottom: 0.1rem solid #585858;
+				transform: rotate(-45deg);
+				transition: transform 0.2s ease;
 
-      &.is-expanded {
-        transform: rotate(45deg);
-      }
-    }
-  }
+				&.is-expanded {
+					transform: rotate(45deg);
+				}
+			}
+		}
 
-  .order-card__summary {
-    min-height: 12.4rem;
-    display: grid;
-    grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
-    align-items: center;
-    column-gap: 2rem;
-    padding-left: 9rem;
+		.order-card__summary {
+			min-height: 12.4rem;
+			display: grid;
+			grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
+			align-items: center;
+			column-gap: 2rem;
+			padding-left: 9rem;
 
-    .order-card__meta {
-      .order-card__id {
-        font-family: 'KaiseiOpti-Bold';
-        font-size: 2rem;
-        line-height: 3rem;
-        color: #232323;
-      }
+			.order-card__meta {
+				.order-card__id {
+					font-family: 'KaiseiOpti-Bold';
+					font-size: 2rem;
+					line-height: 3rem;
+					color: #232323;
+				}
 
-      .order-card__date {
-        margin: 0.8rem 0 0;
-        font-family: 'KaiseiOpti-Regular';
-        font-size: 1.4rem;
-        color: #808080;
-      }
-    }
+				.order-card__date {
+					margin: 0.8rem 0 0;
+					font-family: 'KaiseiOpti-Regular';
+					font-size: 1.4rem;
+					color: #808080;
+				}
+				.brand {
+					column-gap: 1rem;
+				}
+			}
 
-    .order-card__preview {
-      display: flex;
-      align-items: center;
+			.order-card__preview {
+				display: flex;
+				align-items: center;
 
-      .order-card__thumb {
-        width: 8rem;
-        height: 10rem;
-        display: block;
-        margin-right: 1.2rem;
-        img {
-          width: 100%;
-        }
-      }
+				.order-card__thumb {
+					width: 8rem;
+					height: 10rem;
+					display: block;
+					margin-right: 1.2rem;
+					background-color: #f6f6f6;
+					background-position: center;
+					background-repeat: no-repeat;
+					background-size: cover;
+				}
 
-      .order-card__extra {
-        margin-left: 1.2rem;
-        font-family: 'KaiseiOpti-Regular';
-        font-size: 1.4rem;
-        color: #808080;
-      }
-    }
+				.order-card__extra {
+					margin-left: 1.2rem;
+					font-family: 'KaiseiOpti-Regular';
+					font-size: 1.4rem;
+					color: #808080;
+				}
+			}
 
-    .order-card__status {
-      justify-self: start;
-      min-width: 8.8rem;
-      height: 2.4rem;
-      padding: 0 1.6rem;
-      border-radius: 2.4rem;
-      font-family: 'KaiseiOpti-Regular';
-      font-size: 1.4rem;
-      line-height: 2.4rem;
-      text-align: center;
+			.order-card__status {
+				justify-self: start;
+				min-width: 8.8rem;
+				height: 2.4rem;
+				padding: 0 1.6rem;
+				border-radius: 2.4rem;
+				font-family: 'KaiseiOpti-Regular';
+				font-size: 1.4rem;
+				line-height: 2.4rem;
+				text-align: center;
 
-      &.is-paid {
-        background: #e8f2ec;
-        color: #769591;
-      }
+				&.is-paid {
+					background: #e8f2ec;
+					color: #769591;
+				}
 
-      &.is-unpaid {
-        background: #fef3e2;
-        color: #b48230;
-      }
+				&.is-unpaid {
+					background: #fef3e2;
+					color: #b48230;
+				}
 
-      &.is-cancelled {
-        background: #fff2f2;
-        color: #c65f5a;
-      }
-    }
+				&.is-cancelled {
+					background: #fff2f2;
+					color: #c65f5a;
+				}
+			}
 
-    .order-card__amount {
-      white-space: nowrap;
-      color: #232323;
-      font-family: 'KaiseiOpti-Bold';
+			.order-card__amount {
+				white-space: nowrap;
+				color: #232323;
+				font-family: 'KaiseiOpti-Bold';
 
-      span {
-        font-size: 2rem;
-      }
+				span {
+					font-size: 2rem;
+				}
 
-      small {
-        margin-left: 0.4rem;
-        font-size: 1.4rem;
-      }
-    }
+				small {
+					margin-left: 0.4rem;
+					font-size: 1.4rem;
+				}
+			}
 
-    .order-card__action {
-      justify-self: center;
-      width: 14rem;
-      height: 3.8rem;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 1rem;
-      border: 0.1rem solid #c4c4c4;
-      background: #f6f6f6;
-      font-family: 'KaiseiOpti-Bold';
-      font-size: 1.6rem;
-      color: #232323;
-      cursor: pointer;
+			.order-card__action {
+				justify-self: center;
+				width: 14rem;
+				height: 3.8rem;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				gap: 1rem;
+				border: 0.1rem solid #c4c4c4;
+				background: #f6f6f6;
+				font-family: 'KaiseiOpti-Bold';
+				font-size: 1.6rem;
+				color: #232323;
+				cursor: pointer;
 
-      &.is-primary {
-        width: 16rem;
-        border-color: #232323;
-        background: #232323;
-        color: #ffffff;
-        font-size: 1.4rem;
-      }
-    }
-  }
+				&.is-primary {
+					width: 16rem;
+					border-color: #232323;
+					background: #232323;
+					color: #ffffff;
+					font-size: 1.4rem;
+				}
+			}
+		}
 
-  > .order-card__details {
-    margin-left: 9rem;
-    padding: 0 2.4rem;
-    background: #fafafa;
+		> .order-card__details {
+			margin-left: 9rem;
+			padding: 0 2.4rem;
+			background: #fafafa;
 
-    :deep(.sc-item) {
-      --sc-item-img-width: 9.5rem;
-      --sc-item-img-height: 12rem;
-      --sc-item-padding: 1.2rem 2.4rem;
-      --sc-item-content-margin: 0 4rem;
-      --sc-item-title-font-size: 2rem;
-      --sc-item-brand-font-size: 1.4rem;
-      --sc-item-amount-font-size: 2.2rem;
-      --sc-item-currency-font-size: 1.2rem;
-      --sc-item-tag-min-width: 8.8rem;
-      --sc-item-tag-height: 2.4rem;
-      --sc-item-tag-radius: 2.4rem;
-      --sc-item-tag-font-size: 1.4rem;
-      --sc-item-order-amount-width: 12rem;
-      --sc-item-order-action-width: 18rem;
-      --sc-item-order-column-gap: 2rem;
-      --sc-item-order-actions-offset: 4.8rem;
-      border-bottom-color: #e2e2e2;
-    }
+			:deep(.sc-item) {
+				--sc-item-img-width: 9.5rem;
+				--sc-item-img-height: 12rem;
+				--sc-item-padding: 1.2rem 2.4rem;
+				--sc-item-content-margin: 0 4rem;
+				--sc-item-title-font-size: 2rem;
+				--sc-item-brand-font-size: 1.4rem;
+				--sc-item-amount-font-size: 2.2rem;
+				--sc-item-currency-font-size: 1.2rem;
+				--sc-item-tag-min-width: 8.8rem;
+				--sc-item-tag-height: 2.4rem;
+				--sc-item-tag-radius: 2.4rem;
+				--sc-item-tag-font-size: 1.4rem;
+				--sc-item-order-amount-width: 12rem;
+				--sc-item-order-action-width: 18rem;
+				--sc-item-order-column-gap: 2rem;
+				--sc-item-order-actions-offset: 4.8rem;
+				border-bottom-color: #e2e2e2;
+			}
 
-    :deep(.sc-item:last-child) {
-      border-bottom: 0;
-    }
-  }
-}
+			:deep(.sc-item:last-child) {
+				border-bottom: 0;
+			}
+		}
+	}
 </style>