From 3512d9ae87ac08872fcf312b170757fb3b6f5c9d Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Thu, 23 Apr 2026 15:20:22 +0800
Subject: [PATCH] =?UTF-8?q?=20feat:=20wardrobe=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.css                      |   3 +
 src/assets/icons/download.svg                 |   4 +
 src/assets/images/wardrobe/empty-wardrobe.png | Bin 0 -> 9013 bytes
 src/router/index.ts                           |  15 +-
 src/views/main-header.vue                     |   1 +
 src/views/wardrobe/Assets.vue                 | 486 ++++++++++++++++++
 src/views/wardrobe/Orders.vue                 | 257 +++++++++
 src/views/wardrobe/index.vue                  | 219 ++++++++
 8 files changed, 980 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/download.svg
 create mode 100644 src/assets/images/wardrobe/empty-wardrobe.png
 create mode 100644 src/views/wardrobe/Assets.vue
 create mode 100644 src/views/wardrobe/Orders.vue
 create mode 100644 src/views/wardrobe/index.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index a936de1..311c968 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -166,3 +166,6 @@ button[custom='black'] {
   --button-click-color: #fff;
   --button-font-size: 1.6rem;
 }
+.el-select-dropdown__item {
+  padding: 0 2rem !important;
+}
diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg
new file mode 100644
index 0000000..f8078ae
--- /dev/null
+++ b/src/assets/icons/download.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.32243 7.4255L9.409 10.5121C9.43299 10.5361 9.46897 10.5441 9.50096 10.5321C9.53294 10.5201 9.55293 10.4881 9.55293 10.4561V2.94757C9.55293 2.69968 9.75284 2.49977 10.0007 2.49977C10.2486 2.49977 10.4485 2.69968 10.4485 2.94757V10.4561C10.4485 10.4921 10.4685 10.5201 10.5005 10.5321C10.5325 10.5441 10.5685 10.5401 10.5925 10.5121L13.679 7.4255C13.851 7.25758 14.1468 7.25758 14.3147 7.4255C14.3987 7.50946 14.4467 7.6254 14.4467 7.74535C14.4467 7.86529 14.3987 7.97724 14.3147 8.0652L10.1287 12.2513C10.0607 12.3192 9.93676 12.3192 9.86879 12.2513L5.68272 8.0652C5.59876 7.98124 5.55078 7.86529 5.55078 7.74535C5.55078 7.6254 5.59876 7.51346 5.68272 7.4255C5.85064 7.25758 6.1505 7.25758 6.31843 7.4255H6.32243Z" fill="white"/>
+<path d="M17.1966 12.6064C16.9487 12.6064 16.7488 12.8064 16.7488 13.0542V16.2528C16.7488 16.4447 16.5929 16.6046 16.397 16.6046H3.60289C3.41098 16.6046 3.25106 16.4487 3.25106 16.2528V13.0542C3.25106 12.8064 3.05115 12.6064 2.80326 12.6064C2.55538 12.6064 2.35547 12.8064 2.35547 13.0542V16.2528C2.35547 16.9404 2.91521 17.5002 3.60289 17.5002H16.397C17.0847 17.5002 17.6444 16.9404 17.6444 16.2528V13.0542C17.6444 12.8064 17.4445 12.6064 17.1966 12.6064Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/wardrobe/empty-wardrobe.png b/src/assets/images/wardrobe/empty-wardrobe.png
new file mode 100644
index 0000000000000000000000000000000000000000..f33389f7dccde47dc624c7a89ddd3dcb2e6bdb7d
GIT binary patch
literal 9013
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
CN_a~E

literal 0
HcmV?d00001

diff --git a/src/router/index.ts b/src/router/index.ts
index f675a2d..25c5173 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,11 +23,11 @@ const router = createRouter({
       name: 'brand',
       component: () => import('../views/brand/index.vue')
     },
-	{
-		path: '/digitalItem',
-		name: 'digitalItem',
-		component: () => import('../views/digitalItem/index.vue'),
-	},
+    {
+      path: '/digitalItem',
+      name: 'digitalItem',
+      component: () => import('../views/digitalItem/index.vue')
+    },
     {
       path: '/settings',
       name: 'settings',
@@ -39,6 +39,11 @@ const router = createRouter({
       name: 'notifications',
       component: () => import('@/views/notifications/index.vue')
     },
+    {
+      path: '/wardrobe',
+      name: 'wardrobe',
+      component: () => import('@/views/wardrobe/index.vue')
+    },
     {
       path: '/:pathMatch(.*)',
       name: '404',
diff --git a/src/views/main-header.vue b/src/views/main-header.vue
index 42562c3..08d4e8a 100644
--- a/src/views/main-header.vue
+++ b/src/views/main-header.vue
@@ -117,6 +117,7 @@
 	const onMyWardrobe = () => {
 		hideProfilePopover()
 		console.log('my wardrobe')
+		router.push('/wardrobe')
 	}
 	const onNotifications = () => {
 		hideProfilePopover()
diff --git a/src/views/wardrobe/Assets.vue b/src/views/wardrobe/Assets.vue
new file mode 100644
index 0000000..e6f6707
--- /dev/null
+++ b/src/views/wardrobe/Assets.vue
@@ -0,0 +1,486 @@
+<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">Filters</h2>
+          <button class="filters-card__clear" type="button" @click="clearFilters">Clear</button>
+        </div>
+
+        <section class="filter-group">
+          <h3 class="filter-group__title">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">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>
+
+    <section class="wardrobe-assets__content flex flex-1 flex-col">
+      <div class="assets-toolbar">
+        <div class="assets-toolbar__selection">
+          <span class="assets-toolbar__count">{{ selectedCount }} Selected</span>
+          <div class="assets-toolbar__link">Select All</div>
+          <div class="assets-toolbar__link">Deselect All</div>
+        </div>
+
+        <div class="assets-toolbar__actions">
+          <div
+            class="assets-toolbar__download flex flex-center"
+            :class="{ disabled: selectedCount < 1 }"
+          >
+            <SvgIcon name="download" color="#fff" />
+            <span>Download Selected</span>
+          </div>
+        </div>
+      </div>
+      <div v-if="dataList.length" class="data-list-container">
+        <div class="data-list datalist">
+          <div class="item" v-for="item in dataList" :key="item.url">
+            <CommodityItem :url="item.url" :name="item.title" :price="item.price"></CommodityItem>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="assets-empty flex flex-col flex-center">
+        <img src="@/assets/images/wardrobe/empty-wardrobe.png" class="empty-img" alt="" />
+
+        <h2 class="assets-empty__title">Nothing in Wardrobe yet</h2>
+        <p class="assets-empty__description">
+          Explore the digital item and add pieces to your collection.
+        </p>
+        <div class="assets-empty__button" type="button" @click="goToDigitalItems">
+          Explore Digital Items
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import img from '@/assets/images/collectionStory/Rectangle.png'
+
+interface FilterOption {
+  label: string
+  value: string
+}
+
+const router = useRouter()
+
+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 genders: FilterOption[] = [
+  { label: 'All', value: 'all' },
+  { label: 'Male', value: 'male' },
+  { label: 'Female', value: 'female' }
+]
+
+const categoryValues = categories
+  .filter((option) => option.value !== 'all')
+  .map((option) => option.value)
+
+const filters = reactive({
+  categories: ['skirt'] as string[],
+  gender: 'all'
+})
+
+const dataList = ref([
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  },
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  },
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  },
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  },
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  },
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  },
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  },
+  {
+    url: img,
+    title: 'Windswept Burden',
+    price: '$100.00'
+  }
+])
+
+watch(
+  () => filters,
+  (val) => {
+    console.log(val)
+  },
+  { deep: true }
+)
+
+const selectedCount = computed(() => 0)
+const allCategoriesSelected = computed(() => {
+  return (
+    filters.categories.length === categoryValues.length &&
+    categoryValues.every((value) => filters.categories.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]
+    return
+  }
+
+  if (filters.categories.includes(value)) {
+    filters.categories = filters.categories.filter((item) => item !== value)
+    return
+  }
+
+  filters.categories = [...filters.categories, value]
+}
+
+const setGender = (value: string) => {
+  filters.gender = value
+}
+
+const clearFilters = () => {
+  filters.categories = [...categoryValues]
+  filters.gender = 'all'
+}
+
+const goToDigitalItems = () => {
+  router.push('/digitalItem')
+}
+</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;
+
+  .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__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;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .wardrobe-assets__content {
+    min-width: 0;
+    border-right: 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 {
+        .assets-toolbar__count {
+          position: relative;
+          padding-left: 1.8rem;
+          font-family: 'KaiseiOpti-Regular';
+          font-size: 1.4rem;
+          line-height: 1.2;
+          color: #57524b;
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            width: 1rem;
+            height: 1rem;
+            background: #232323;
+            transform: translateY(-50%);
+          }
+        }
+
+        .assets-toolbar__link {
+          border: 0;
+          padding: 0;
+          background: transparent;
+          cursor: pointer;
+          font-family: 'KaiseiOpti-Regular';
+          font-size: 1.4rem;
+          line-height: 1.2;
+          color: #a0978b;
+          text-decoration: underline;
+        }
+      }
+
+      .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;
+          }
+        }
+      }
+    }
+
+    .data-list-container {
+      overflow-y: auto;
+      .datalist {
+        width: 100%;
+        flex: 1;
+        display: grid;
+        align-content: start;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+        padding: 0.05rem 0 0 0.05rem;
+
+        .item {
+          width: 100%;
+          min-width: 0;
+          padding: 1.2rem;
+          border: 0.05rem solid #585858;
+          margin-left: -0.05rem;
+          margin-top: -0.05rem;
+
+          :deep(.commodity-item) {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .assets-empty {
+      flex: 1;
+
+      color: #979797;
+      .empty-img {
+        width: 14.2rem;
+        height: 18.8rem;
+      }
+
+      .assets-empty__title {
+        font-family: 'KaiseiOpti-Bold';
+        font-size: 1.6rem;
+        margin: 2.4rem 0 0.8rem;
+      }
+
+      .assets-empty__description {
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.4rem;
+      }
+
+      .assets-empty__button {
+        margin-top: 3rem;
+        height: 4.4rem;
+        line-height: 4.4rem;
+        padding: 0 3.8rem;
+        border: 0.1rem solid #c4c4c4;
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.6rem;
+        color: #585858;
+        cursor: pointer;
+        text-transform: uppercase;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/wardrobe/Orders.vue b/src/views/wardrobe/Orders.vue
new file mode 100644
index 0000000..38e51ff
--- /dev/null
+++ b/src/views/wardrobe/Orders.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { useRouter } from 'vue-router'
+
+type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
+
+interface StatusOption {
+	key: OrderStatus
+	label: string
+}
+
+const router = useRouter()
+
+const statusOptions: StatusOption[] = [
+	{ key: 'all', label: 'All' },
+	{ key: 'paid', label: 'Paid' },
+	{ key: 'unpaid', label: 'Unpaid' },
+	{ key: 'cancelled', label: 'Cancelled' }
+]
+
+const activeStatus = shallowRef<OrderStatus>('all')
+
+const goToDigitalItems = () => {
+	router.push('/digitalItem')
+}
+</script>
+
+<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 class="orders-empty">
+			<div class="orders-empty__illustration" aria-hidden="true">
+				<div class="orders-empty__hook"></div>
+				<div class="orders-empty__hanger"></div>
+				<div class="orders-empty__body"></div>
+				<div class="orders-empty__hem"></div>
+			</div>
+
+			<h2 class="orders-empty__title">Nothing in Wardrobe yet</h2>
+			<p class="orders-empty__description">
+				Explore the digital item and add pieces to your collection.
+			</p>
+			<button class="orders-empty__button" type="button" @click="goToDigitalItems">
+				Explore Digital Items
+			</button>
+		</div>
+	</div>
+</template>
+
+<style lang="less" scoped>
+	.wardrobe-orders {
+		--wardrobe-border-color: #d9d4cd;
+		--wardrobe-border-dark: #c8c0b4;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		background: #fffdf8;
+
+		> .orders-toolbar {
+			display: flex;
+			align-items: center;
+			gap: 1rem;
+			padding: 2.2rem 3rem 0;
+			flex-wrap: wrap;
+
+			> .orders-toolbar__chip {
+				height: 3rem;
+				padding: 0 1.4rem;
+				border: 0.1rem solid var(--wardrobe-border-color);
+				border-radius: 999rem;
+				background: #ffffff;
+				font-family: 'KaiseiOpti-Regular';
+				font-size: 1.2rem;
+				line-height: 1;
+				color: #8b8277;
+				cursor: pointer;
+
+				&.is-active {
+					background: #232323;
+					border-color: #232323;
+					color: #ffffff;
+				}
+			}
+		}
+
+		> .orders-empty {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 4rem 2rem 7rem;
+			text-align: center;
+
+			> .orders-empty__illustration {
+				position: relative;
+				width: 8.8rem;
+				height: 10.4rem;
+				margin-bottom: 2.4rem;
+				opacity: 0.55;
+
+				> .orders-empty__hook {
+					position: absolute;
+					left: 50%;
+					top: 0;
+					width: 1.6rem;
+					height: 1.6rem;
+					border: 0.14rem solid #b8b1a5;
+					border-bottom-color: transparent;
+					border-left-color: transparent;
+					border-radius: 50%;
+					transform: translateX(-10%) rotate(-18deg);
+				}
+
+				> .orders-empty__hanger {
+					position: absolute;
+					left: 50%;
+					top: 1.2rem;
+					width: 4rem;
+					height: 2rem;
+					border-top: 0.14rem solid #b8b1a5;
+					border-left: 0.14rem solid #b8b1a5;
+					border-right: 0.14rem solid #b8b1a5;
+					transform: translateX(-50%) skewY(-12deg);
+				}
+
+				> .orders-empty__body {
+					position: absolute;
+					left: 50%;
+					top: 3.2rem;
+					width: 4.8rem;
+					height: 4.8rem;
+					border: 0.14rem solid #b8b1a5;
+					border-top: 0;
+					transform: translateX(-50%);
+
+					&::before,
+					&::after {
+						content: '';
+						position: absolute;
+						top: 0.2rem;
+						width: 1.7rem;
+						height: 2.6rem;
+						border: 0.14rem solid #b8b1a5;
+						border-bottom: 0;
+					}
+
+					&::before {
+						left: -1.2rem;
+						transform: skewY(22deg);
+					}
+
+					&::after {
+						right: -1.2rem;
+						transform: skewY(-22deg);
+					}
+				}
+
+				> .orders-empty__hem {
+					position: absolute;
+					left: 50%;
+					bottom: 0.8rem;
+					width: 4.6rem;
+					height: 2rem;
+					border-left: 0.14rem solid #b8b1a5;
+					border-right: 0.14rem solid #b8b1a5;
+					border-bottom: 0.14rem solid #b8b1a5;
+					transform: translateX(-50%);
+
+					&::before,
+					&::after {
+						content: '';
+						position: absolute;
+						top: 0;
+						width: 1.3rem;
+						height: 100%;
+						border-bottom: 0.14rem solid #b8b1a5;
+					}
+
+					&::before {
+						left: -0.1rem;
+						transform: skewX(24deg);
+						transform-origin: left bottom;
+					}
+
+					&::after {
+						right: -0.1rem;
+						transform: skewX(-24deg);
+						transform-origin: right bottom;
+					}
+				}
+			}
+
+			> .orders-empty__title {
+				margin: 0;
+				font-family: 'KaiseiOpti-Bold';
+				font-size: 1.8rem;
+				line-height: 1.3;
+				color: #8c8479;
+			}
+
+			> .orders-empty__description {
+				max-width: 32rem;
+				margin: 1rem 0 0;
+				font-family: 'KaiseiOpti-Regular';
+				font-size: 1.3rem;
+				line-height: 1.7;
+				color: #b1a99e;
+			}
+
+			> .orders-empty__button {
+				margin-top: 2rem;
+				height: 3.8rem;
+				padding: 0 2.4rem;
+				border: 0.1rem solid var(--wardrobe-border-color);
+				background: #ffffff;
+				font-family: 'KaiseiOpti-Regular';
+				font-size: 1.2rem;
+				line-height: 1;
+				letter-spacing: 0.06rem;
+				text-transform: uppercase;
+				color: #6d655b;
+				cursor: pointer;
+				transition: background-color 0.2s ease, border-color 0.2s ease;
+
+				&:hover {
+					background: #f8f3ea;
+					border-color: var(--wardrobe-border-dark);
+				}
+			}
+		}
+	}
+
+	@media (max-width: 960px) {
+		.wardrobe-orders {
+			> .orders-toolbar {
+				padding: 2rem 2rem 0;
+			}
+
+			> .orders-empty {
+				padding: 5rem 2rem 7rem;
+			}
+		}
+	}
+</style>
diff --git a/src/views/wardrobe/index.vue b/src/views/wardrobe/index.vue
new file mode 100644
index 0000000..287dfa3
--- /dev/null
+++ b/src/views/wardrobe/index.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="wardrobe-page">
+    <section 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>
+    </section>
+
+    <section class="wardrobe-shell">
+      <div class="wardrobe-tabs">
+        <div class="wardrobe-tabs__nav" role="tablist" aria-label="Wardrobe tabs">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            class="wardrobe-tabs__item"
+            :class="{ 'is-active': activeTab === tab.key }"
+            type="button"
+            role="tab"
+            :aria-selected="activeTab === tab.key"
+            @click="activeTab = tab.key"
+          >
+            {{ tab.label }}
+          </button>
+        </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">
+            <el-option
+              v-for="option in sortOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </div>
+      </div>
+
+      <component :is="activePanel" class="wardrobe-shell__panel" />
+    </section>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+import Assets from './Assets.vue'
+import Orders from './Orders.vue'
+
+type WardrobeTab = 'assets' | 'orders'
+
+interface TabItem {
+  key: WardrobeTab
+  label: string
+}
+
+interface SortOption {
+  label: string
+  value: number
+}
+
+const tabs: TabItem[] = [
+  {
+    key: 'assets',
+    label: 'Assets'
+  },
+  {
+    key: 'orders',
+    label: 'Orders'
+  }
+]
+
+const sortOptions: SortOption[] = [
+  {
+    label: 'Default',
+    value: 0
+  },
+  {
+    label: 'Date Added',
+    value: 1
+  },
+  {
+    label: 'Selected First',
+    value: 2
+  }
+]
+
+const activeTab = shallowRef<WardrobeTab>('assets')
+const activeSort = shallowRef(1)
+
+const activePanel = computed(() => {
+  return activeTab.value === 'assets' ? Assets : Orders
+})
+</script>
+
+<style lang="less" scoped>
+.wardrobe-page {
+  --wardrobe-border-color: #d9d4cd;
+  --wardrobe-text-main: #232323;
+  --wardrobe-text-secondary: #7a746d;
+  --wardrobe-surface: #fffdf8;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  overflow: hidden;
+
+  .wardrobe-hero {
+    height: 14.8rem;
+    background-color: #f5f5f5;
+    .wardrobe-hero__title {
+      margin: 0;
+      font-family: 'KaiseiOpti-Bold';
+      font-size: 4rem;
+      color: #232323;
+      line-height: 3.6rem;
+    }
+
+    .wardrobe-hero__subtitle {
+      margin-top: 1rem;
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.4rem;
+      line-height: 2.4rem;
+      color: #585858;
+    }
+  }
+
+  > .wardrobe-shell {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    > .wardrobe-tabs {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 2rem;
+      padding: 0 9rem;
+      border-bottom: 0.1rem solid var(--wardrobe-border-color);
+      background: #ffffff;
+
+      > .wardrobe-tabs__nav {
+        display: flex;
+        align-items: center;
+
+        > .wardrobe-tabs__item {
+          position: relative;
+          height: 6rem;
+          padding: 0 1.8rem;
+          border: 0;
+          background: transparent;
+          font-family: 'KaiseiOpti-Regular';
+          font-size: 1.4rem;
+          line-height: 1;
+          color: #7d766f;
+          cursor: pointer;
+          width: 13.9rem;
+
+          &::after {
+            content: '';
+            position: absolute;
+            left: 1.8rem;
+            right: 1.8rem;
+            bottom: -0.1rem;
+            height: 0.2rem;
+            background: transparent;
+            transition: background-color 0.2s ease;
+          }
+
+          &.is-active {
+            font-family: 'KaiseiOpti-Bold';
+            color: var(--wardrobe-text-main);
+
+            &::after {
+              background: var(--wardrobe-text-main);
+            }
+          }
+        }
+      }
+
+      > .wardrobe-tabs__sort {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        flex-shrink: 0;
+
+        > .wardrobe-tabs__sort-label {
+          font-family: 'KaiseiOpti-Regular';
+          font-size: 1.4rem;
+          line-height: 2.4rem;
+          color: #7d766f;
+          white-space: nowrap;
+        }
+
+        :deep(.el-select) {
+          width: 13rem;
+        }
+
+        :deep(.el-select__wrapper) {
+          min-height: 3.6rem;
+          padding: 0 1.2rem;
+          background: #ffffff;
+          box-shadow: none;
+        }
+
+        :deep(.el-select__selected-item) {
+          font-family: 'KaiseiOpti-Regular';
+          font-size: 1.4rem;
+          color: #232323;
+        }
+      }
+    }
+
+    > .wardrobe-shell__panel {
+      flex: 1;
+      min-height: 0;
+    }
+  }
+}
+</style>