feat: order页面空状态

src/lang/en.ts

@@ -142,7 +142,6 @@ export default {
 		sort: {
 			label: 'Sort by',
 			placeholder: 'Select',
-			default: 'Default',
 			dateAdded: 'Date Added',
 			selectedFirst: 'Selected First'
 		},

src/lang/zh-cn.ts

@@ -142,7 +142,6 @@ export default {
 		sort: {
 			label: '排序',
 			placeholder: '请选择',
-			default: '默认',
 			dateAdded: '添加日期',
 			selectedFirst: '已选优先'
 		},

src/views/wardrobe/Assets.vue

@@ -14,7 +14,7 @@
 			<div class="assets-toolbar">
 				<div class="assets-toolbar__selection">
 					<div class="select-count flex align-center">
-						<img src="@/assets/images/wardrobe/select.png" />
+						<img loading="lazy" src="@/assets/images/wardrobe/select.png" />
 						<span class="assets-toolbar__count">
 							{{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }}
 						</span>
@@ -38,7 +38,12 @@
 					</div>
 				</div>
 			</div>
-			<div ref="assetsScrollRef" v-if="dataList.length" class="data-list-container" @scroll.passive="handleAssetsScroll">
+			<div
+				ref="assetsScrollRef"
+				v-if="dataList.length"
+				class="data-list-container"
+				@scroll.passive="handleAssetsScroll"
+			>
 				<div ref="dataListRef" class="data-list">
 					<div
 						v-for="(item, index) in dataList"
@@ -67,7 +72,7 @@
 				</div>
 			</div>
 
-			<Empty v-else @explore="goToDigitalItems" />
+			<Empty v-else />
 		</section>
 	</div>
 </template>
@@ -306,10 +311,6 @@
 		return (index + 1) % gridColumnCount.value === 0
 	}
 
-	const goToDigitalItems = () => {
-		router.push('/digitalItem')
-	}
-
 	watch(
 		() => dataList.value.length,
 		async (len) => {

src/views/wardrobe/Empty.vue

@@ -1,29 +1,35 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
+	import { useI18n } from 'vue-i18n'
+	import { useRouter } from 'vue-router'
 
-const { t } = useI18n({ useScope: 'global' })
+	const { t } = useI18n({ useScope: 'global' })
+	const router = useRouter()
 
-const emit = defineEmits<{
-  (event: 'explore'): void
-}>()
+	const handleExplore = () => {
+		router.push('/digitalItem')
+	}
 </script>
 
 <template>
 	<div class="wardrobe-empty flex flex-col flex-center">
-    <img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" />
+		<img
+			src="@/assets/images/wardrobe/empty-wardrobe.png"
+			class="wardrobe-empty__image"
+			alt=""
+		/>
 
 		<h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
 		<p class="wardrobe-empty__description">
 			{{ t('Wardrobe.empty.description') }}
 		</p>
-    <button class="wardrobe-empty__button" type="button" @click="emit('explore')">
+		<button class="wardrobe-empty__button" type="button" @click="handleExplore">
 			{{ t('Wardrobe.empty.action') }}
 		</button>
 	</div>
 </template>
 
 <style lang="less" scoped>
-.wardrobe-empty {
+	.wardrobe-empty {
 		flex: 1;
 		color: #979797;
 
@@ -56,5 +62,5 @@ const emit = defineEmits<{
 			color: #585858;
 			cursor: pointer;
 		}
-}
+	}
 </style>

src/views/wardrobe/Orders.vue

@@ -13,7 +13,7 @@
 			</button>
 		</div>
 
-		<div class="orders-list">
+		<div class="orders-list" v-if="filteredOrders.length">
 			<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
 				<button
 					class="order-card__toggle"
@@ -27,7 +27,9 @@
 					<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="icon">
+								<svg-icon name="order-shop" size="24" />
+							</span>
 							<span class="text">{{ order.shopName }}</span>
 						</div>
 						<p class="order-card__date">{{ order.formatUpdatetime }}</p>
@@ -39,7 +41,7 @@
 							: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>
@@ -83,6 +85,7 @@
 				</div>
 			</article>
 		</div>
+		<Empty v-else />
 	</div>
 </template>
 
@@ -91,6 +94,7 @@
 	import { useI18n } from 'vue-i18n'
 	import { fetchMyOrders } from '@/api/user'
 	import ScItem from '@/views/shoppingCart/sc-item.vue'
+	import Empty from './Empty.vue'
 
 	type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
 	type ActualOrderStatus = Exclude<OrderStatus, 'all'>
@@ -232,7 +236,9 @@
 				page: orderParams.value.page,
 				size: orderParams.value.size
 			}
-			const currentStatus = statusOptions.value.find((option) => option.key === activeStatus.value)
+			const currentStatus = statusOptions.value.find(
+				(option) => option.key === activeStatus.value
+			)
 
 			if (currentStatus?.value !== undefined) {
 				params.status = currentStatus.value

src/views/wardrobe/index.vue

@@ -7,7 +7,11 @@
 
 		<div class="wardrobe-shell">
 			<div class="wardrobe-tabs">
-        <div class="wardrobe-tabs__nav" role="tablist" :aria-label="t('Wardrobe.tabs.ariaLabel')">
+				<div
+					class="wardrobe-tabs__nav"
+					role="tablist"
+					:aria-label="t('Wardrobe.tabs.ariaLabel')"
+				>
 					<button
 						v-for="tab in tabs"
 						:key="tab.key"
@@ -24,7 +28,11 @@
 
 				<div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
 					<div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
-          <el-select v-model="activeSort" :placeholder="t('Wardrobe.sort.placeholder')">
+					<el-select
+						v-model="activeSort"
+						popper-class="wardrobe-sort-dropdown"
+						:placeholder="t('Wardrobe.sort.placeholder')"
+					>
 						<el-option
 							v-for="option in sortOptions"
 							:key="option.value"
@@ -41,26 +49,26 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { computed, shallowRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-import Assets from './Assets.vue'
-import Orders from './Orders.vue'
+	import { computed, shallowRef } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import Assets from './Assets.vue'
+	import Orders from './Orders.vue'
 
-type WardrobeTab = 'assets' | 'orders'
+	type WardrobeTab = 'assets' | 'orders'
 
-interface TabItem {
+	interface TabItem {
 		key: WardrobeTab
 		label: string
-}
+	}
 
-interface SortOption {
+	interface SortOption {
 		label: string
 		value: number
-}
+	}
 
-const { t } = useI18n({ useScope: 'global' })
+	const { t } = useI18n({ useScope: 'global' })
 
-const tabs = computed<TabItem[]>(() => [
+	const tabs = computed<TabItem[]>(() => [
 		{
 			key: 'assets',
 			label: t('Wardrobe.tabs.assets')
@@ -69,13 +77,9 @@ const tabs = computed<TabItem[]>(() => [
 			key: 'orders',
 			label: t('Wardrobe.tabs.orders')
 		}
-])
+	])
 
-const sortOptions = computed<SortOption[]>(() => [
-  {
-    label: t('Wardrobe.sort.default'),
-    value: 0
-  },
+	const sortOptions = computed<SortOption[]>(() => [
 		{
 			label: t('Wardrobe.sort.dateAdded'),
 			value: 1
@@ -84,18 +88,18 @@ const sortOptions = computed<SortOption[]>(() => [
 			label: t('Wardrobe.sort.selectedFirst'),
 			value: 2
 		}
-])
+	])
 
-const activeTab = shallowRef<WardrobeTab>('assets')
-const activeSort = shallowRef(1)
+	const activeTab = shallowRef<WardrobeTab>('assets')
+	const activeSort = shallowRef(1)
 
-const activePanel = computed(() => {
+	const activePanel = computed(() => {
 		return activeTab.value === 'assets' ? Assets : Orders
-})
+	})
 </script>
 
 <style lang="less" scoped>
-.wardrobe-page {
+	.wardrobe-page {
 		--wardrobe-border-color: #d9d4cd;
 		--wardrobe-text-main: #232323;
 		--wardrobe-text-secondary: #7a746d;
@@ -230,5 +234,15 @@ const activePanel = computed(() => {
 				min-height: 0;
 			}
 		}
-}
+	}
+</style>
+
+<style lang="less">
+	.wardrobe-sort-dropdown {
+		.el-select-dropdown__list {
+			.el-select-dropdown__item {
+				padding: 0 2rem;
+			}
+		}
+	}
 </style>