feat: wardrobe页面

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>