更改loading样式

1
Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front
2026-05-21 15:13:18 +08:00 · 2026-05-21 14:58:52 +08:00 · 2026-05-21 14:58:08 +08:00 · 2026-05-21 14:58:07 +08:00 · 2026-05-21 14:56:37 +08:00 · 2026-05-21 14:55:31 +08:00
73 changed files with 2536 additions and 1171 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1 @@
-# VITE_APP_URL = http://192.168.31.82:8771
-# VITE_APP_URL = http://18.167.251.121:10095
-VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_APP_URL = http://192.168.31.82:10094
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1 @@
-VITE_APP_URL = https://www.lc-api.aida.com.hk
-# VITE_APP_URL = http://18.167.251.121:10095
+VITE_APP_URL = http://192.168.31.82:10094
--- a/index.html
+++ b/index.html
@@ -7,14 +7,14 @@
 	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> -->
 	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
 	<link rel="stylesheet" href="/fonts/index.css">
-    <title>Lane Crawford</title>
+    <title>Stylish Parade</title>
    <!-- Open Graph / WhatsApp share metadata -->
-    <meta property="og:title" content="Lane Crawford" />
-    <meta property="og:description" content="create and share looks from the Lane Crawford creation gallery." />
+    <meta property="og:title" content="Stylish Parade" />
+    <meta property="og:description" content="create and share looks from the Stylish Parade creation gallery." />
    <meta property="og:image" content="" />
    <meta property="og:url" content="https://www.lc.aida.com.hk" />
    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="Lane Crawford" />
+    <meta property="og:site_name" content="Stylish Parade" />
    <meta name="twitter:card" content="summary_large_image" />
  </head>
  <body>
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,6 +15,7 @@
 	import ShoppingDrawer from '@/views/shopping-drawer.vue'
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
+	globalStore.setLoading(false)
 	const viewRef = ref()
 	const viewStyle = ref({
 		'--app-view-width': '',
@@ -52,10 +53,9 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		// background-color: rgba(0, 0, 0, 0.3);
-		// display: flex;
-		// align-items: center;
-		// justify-content: center;
+		--el-mask-color: rgba(0, 0, 0, 0.3);
+		--el-color-primary: #007bff;
+		--el-loading-spinner-size: 9rem;
 	}
 </style>
 <style lang="less" scoped>
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -0,0 +1,122 @@
+import request from '@/utils/request'
+
+/**
+ * 登录发送验证码
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+*/
+export const AccountSendLoginCode = (data) => {
+	return request({
+		url: '/buyer/account/preLogin',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 登录
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+ * @param data.emailVerifyCode - 验证码
+*/
+export const AccountLogin = (data) => {
+	return request({
+		url: '/buyer/account/login',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+
+/**
+ * 注册
+ * @param data - 包含注册信息的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+ * @param data.username - 用户名
+ * @param data.emailVerifyCode - 验证码
+ */
+export const AccountRegister = (data) => {
+	return request({
+		url: '/buyer/account/register',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 注册||忘记密码：发送邮箱验证码
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.operationType - 操作类型：FORGET_PWD, REGISTER
+*/
+export const AccountSendVerifyCode = (data) => {
+	return request({
+		url: '/buyer/account/sendCode',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 忘记密码：重置密码
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.password - 密码
+ * @param data.emailVerifyCode - 验证码
+*/
+export const AccountResetPassword = (data) => {
+	return request({
+		url: '/buyer/account/resetPassword',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 通用验证码校验
+ * @param data - 包含邮箱的参数
+ * @param data.email - 邮箱
+ * @param data.emailVerifyCode - 验证码
+ * @param data.operationType - 操作类型：FORGET_PWD, BIND_MAILBOX
+*/
+export const AccountVerifyCode = (data) => {
+	return request({
+		url: '/buyer/account/verifyCode',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+
+/**
+ * 变更邮箱：发送新邮箱验证码
+ * @param data - 包含邮箱的参数
+ * @param data.oldEmail - 旧邮箱
+ * @param data.newEmail - 新邮箱
+*/
+export const AccountSendEmailChangeCode = (data) => {
+	return request({
+		url: '/buyer/account/sendEmailChangeCode',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
+/**
+ * 变更邮箱：绑定新邮箱
+ * @param data - 包含邮箱的参数
+ * @param data.oldEmail - 旧邮箱
+ * @param data.newEmail - 新邮箱
+ * @param data.emailVerifyCode - 验证码
+*/
+export const AccountBindEmail = (data) => {
+	return request({
+		url: '/buyer/account/bindEmail',
+		method: 'post',
+		data,
+		loading: true
+	})
+}
--- a/src/api/brand.ts
+++ b/src/api/brand.ts
@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+/**
+ * 获取店铺列表
+ * @param data 获取店铺列表的参数
+ * @param data.keyword 模糊查询店铺
+ * @returns 获取店铺列表
+ */
+export interface designerListData {
+	keyword: string
+}
+export const getDesignerList = (data:designerListData,loading?:boolean) => {
+	return request({
+		url: '/buyer/designer/search',
+		method: 'get',
+		params: data,
+		loading
+	})
+}
+
+/**
+ * 获取店铺详情
+ * @param data 获取店铺详情的参数
+ * @param data.sellerId 店铺 id
+ * @returns 获取店铺详情
+ */
+export interface designerDetailData {
+	sellerId?: string
+}
+export const getDesignerDetail = (data:designerDetailData,loading?:boolean) => {
+	return request({	
+		url: `/buyer/designer/shop/${data.sellerId}`,
+		method: 'get',
+		loading
+	})
+}
--- a/src/api/listing.ts
+++ b/src/api/listing.ts
@@ -0,0 +1,70 @@
+import request from '@/utils/request'
+/**
+ * 获取店铺商品列表
+ * @param data 获取店铺商品列表的参数
+ * @param data.sellerId 店铺id
+ * @param data.designFor 查询类型 female/male/all
+ * @param data.pageNum 页码
+ * @param data.pageSize 页面大小
+ * @returns 获取店铺商品列表
+ */
+export interface listingListData {
+	sellerId?: string
+	designFor?: string
+	pageNum?: number
+	pageSize?: number
+}
+export const getlistingListApi = (data:listingListData,loading?:boolean) => {
+	return request({
+		url: '/buyer/listing/shop/seller',
+		method: 'get',
+		params: data,
+		loading
+	})
+}
+
+/**
+ * 获取商品详情
+ * @param data 获取商品详情的参数
+ * @param data.id 商品 id
+ * @returns 获取商品详情
+ */
+export interface listingDetailData {
+	id?: string
+}
+export const getListingDetailApi = (data:listingDetailData,loading?:boolean) => {
+	return request({	
+		url: `/buyer/listing/mall/detail`,
+		method: 'get',
+		params: data,
+		loading
+	})
+}
+
+/**
+ * 获取资产数字商品列表
+ * @param data 获取资产数字商品列表的参数
+ * @param data.designFor 查询类型 female/male/all
+ * @param data.categories 商品分类
+ * @param data.sortField 排序字段 price/salesVolume/updateTime/viewCount/createTime，默认 updateTime
+ * @param data.sortOrder 排序顺序：asc/desc，默认 desc
+ * @param data.pageNum 页码
+ * @param data.pageSize 页面大小
+ * @returns 获取资产数字商品列表
+ */
+export interface listingMallData {
+	designFor: string,
+	categories: string[],
+	sortField: string,
+	sortOrder: string,
+	pageNum: number,
+	pageSize: number
+}
+export const getListingMallListApi = (data:listingMallData,loading?:boolean) => {
+	return request({	
+		url: `/buyer/listing/mall`,
+		method: 'post',
+		data,
+		loading
+	})
+}
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -1,77 +0,0 @@
-import request from '@/utils/request'
-
-interface LoginParamsType {
-  name?: string // 姓名
-  email: string // 邮箱
-  password?: string // 密码
-  operationType: 'REGISTER' | 'LOGIN' | 'FORGET_PWD'
-  verifyCode?: string // 验证码
-}
-
-// 发送验证码
-export const precheckEmail = (params: { email: string }): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/precheckEmail',
-    method: 'get',
-    params
-  })
-}
-
-export const fetchRegisterOrLogin = (data: LoginParamsType): Promise<LoginResponse> => {
-  return request({
-    url: '/api/auth/registerOrLogin',
-    method: 'post',
-    data
-  })
-}
-
-export const resetPassword = (data: LoginParamsType): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/forgotPwd',
-    method: 'post',
-    data
-  })
-}
-
-export const checkLoginStatus = (): Promise<ApiResponse<LoginResponse>> => {
-  return request({
-    url: '/api/auth/checkLoginStatus',
-    method: 'get',
-    meta: { responseAll: true }
-  })
-}
-
-export const LogOut = (): Promise<ApiResponse> => {
-  return request({
-    url: '/api/auth/logout',
-    method: 'get'
-  })
-}
-
-// Google登录/注册参数类型
-interface GoogleAuthParamsType {
-  accessToken?: string // Google ID Token (用于One Tap登录)
-}
-export const googleAuth = (data: GoogleAuthParamsType): Promise<LoginResponse> => {
-  return request({
-    url: '/api/auth/parseGoogleAccessToken',
-    method: 'get',
-    params: data
-  })
-}
-
-
-/** 更改用户信息
- * @param data 包含用户信息的对象
- * @param data.username 用户名
- * @param data.email 邮箱
- * @param data.password 密码
- * @returns 包含更新后的用户信息的对象
-*/
-export const updateUserInfo = (data: any) => {
-  return request({
-    url: '/api/auth/updateUserInfo',
-    method: 'post',
-    data
-  })
-}
--- a/src/api/shoppingCart.ts
+++ b/src/api/shoppingCart.ts
@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+/**
+ * 加入购物车
+ * @param data - 包含邮箱的参数
+ * @param data.listingId - 商品ID
+ * @param data.listingIds - 商品ID列表
+ */
+export const AddShoppingCart = (data, loading?: boolean) => {
+  return request({
+    url: '/buyer/buyer/cart/add',
+    method: 'post',
+    data,
+    loading
+  })
+}
+
+/**
+ * 清空购物车
+ */
+export const ClearShoppingCart = (loading?: boolean) => {
+  return request({
+    url: '/buyer/buyer/cart/clear',
+    method: 'delete',
+    loading
+  })
+}
+
+/**
+ * 获取购物车列表
+ * @param loading - 是否显示loading
+ * @returns 购物车列表数据
+ */
+export const GetShoppingCartList = (loading?: boolean) => {
+  return request({
+    url: '/buyer/buyer/cart/list',
+    method: 'get',
+    loading
+  })
+}
+
+/**
+ * 从购物车移除商品
+ * @param params - 包含邮箱的参数
+ * @param params.listingId - 商品ID
+ */
+export const RemoveShoppingCartItem = (params, loading?: boolean) => {
+  return request({
+    url: '/buyer/buyer/cart/remove',
+    method: 'delete',
+    params,
+    loading
+  })
+}
+
+/**
+ * 创建订单
+ * @param { Array } data - 商品id数组
+ * @param loading - 是否显示loading
+ * @returns 
+ */
+export const CreateOrder = (data, loading?: boolean) => {
+  return request({
+    url: '/buyer/buyer/order/create',
+    method: 'post',
+    data,
+	loading
+  })
+}
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export interface WardrobeItem {
+  buyerId: number
+  categories: string[]
+  designFor: 'female' | 'male' | 'all'
+  page: number
+  size: number
+}
+export const fetchMyWardrobe = (data: WardrobeItem): Promise<ApiResponse> => {
+  return request({
+    url: '/buyer/buyer/order/assets/page',
+    method: 'post',
+    data
+  })
+}
+
+export interface OrderItem {
+  status: number // 0未支付 1已支付 2已取消 不穿查全部
+  page: number
+  size: number
+}
+export const fetchMyOrders = (data: OrderItem): Promise<ApiResponse> => {
+  return request({
+    url: '/buyer/buyer/order/page',
+    method: 'get',
+    params: data
+  })
+}
+
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -122,11 +122,11 @@ button[custom="white"] {
  height: 5rem;
  padding: 0 1rem;
  border-radius: 0;
-  border: none;
  font-family: KaiseiOpti-Bold;
  font-size: var(--button-font-size, 2rem);
  color: var(--button-color, #232323);
  background: var(--button-bgcolor, #fff);
+  border: var(--button-border, none);
  cursor: pointer;
 }
 button[custom]:active,
@@ -141,6 +141,11 @@ button[custom="black"] {
  --button-click-color: #fff;
  --button-font-size: 1.6rem;
 }
-.el-select-dropdown__item {
-  padding: 0 2rem !important;
+button[custom="black-box"] {
+  --button-bgcolor: transparent;
+  --button-color: #232323;
+  --button-border: 0.2rem solid #979797;
+  --button-click-bgcolor: #979797;
+  --button-click-color: #fff;
+  --button-font-size: 1.6rem;
 }
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -149,11 +149,11 @@ button[custom="white"] {
 	height: 5rem;
 	padding: 0 1rem;
 	border-radius: 0;
-	border: none;
 	font-family: KaiseiOpti-Bold;
 	font-size: var(--button-font-size, 2rem);
 	color: var(--button-color, #232323);
 	background: var(--button-bgcolor, #fff);
+	border: var(--button-border, none);
 	cursor: pointer;

 	&:active {
@@ -169,3 +169,12 @@ button[custom="black"] {
 	--button-click-color: #fff;
 	--button-font-size: 1.6rem;
 }
+
+button[custom="black-box"] {
+	--button-bgcolor: transparent;
+	--button-color: #232323;
+	--button-border: 0.2rem solid #979797;
+	--button-click-bgcolor: #979797;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
+}
--- a/src/assets/icons/brand/delete.svg
+++ b/src/assets/icons/brand/delete.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1113 5.26938H12.1387V3.63221C12.1387 2.87065 11.518 2.25 10.7565 2.25H6.73062C5.96906 2.25 5.34841 2.87065 5.34841 3.63221V5.26938H3.37575C3.16774 5.26938 3 5.43713 3 5.64513C3 5.85313 3.16774 6.02087 3.37575 6.02087H4.00646V14.3678C4.00646 15.1293 4.62711 15.75 5.38867 15.75H12.0984C12.86 15.75 13.4806 15.1293 13.4806 14.3678V6.02423H14.1113C14.3193 6.02423 14.4871 5.85649 14.4871 5.64848C14.4871 5.44048 14.3193 5.27274 14.1113 5.27274V5.26938ZM6.73062 3.00485H10.7565C11.102 3.00485 11.3872 3.28666 11.3872 3.63556V5.12848C11.3872 5.209 11.3234 5.27274 11.2429 5.27274H6.24751C6.167 5.27274 6.10325 5.209 6.10325 5.12848V3.63556C6.10325 3.29001 6.38506 3.00485 6.73397 3.00485H6.73062ZM12.0984 15.0019H5.38867C5.04312 15.0019 4.75795 14.7201 4.75795 14.3711V6.02423H12.7258V14.3711C12.7258 14.7167 12.444 15.0019 12.0951 15.0019H12.0984Z" fill="#979797"/>
+<path d="M7.40098 7.95319C7.15943 7.95319 6.96484 8.14777 6.96484 8.38932V12.2977C6.96484 12.5393 7.15943 12.7339 7.40098 12.7339C7.64253 12.7339 7.83711 12.5393 7.83711 12.2977V8.38932C7.83711 8.14777 7.64253 7.95319 7.40098 7.95319Z" fill="#979797"/>
+<path d="M10.0846 7.95319C9.84302 7.95319 9.64844 8.14777 9.64844 8.38932V12.2977C9.64844 12.5393 9.84302 12.7339 10.0846 12.7339C10.3261 12.7339 10.5207 12.5393 10.5207 12.2977V8.38932C10.5207 8.14777 10.3261 7.95319 10.0846 7.95319Z" fill="#979797"/>
+</svg>
--- a/src/assets/icons/brand/more.svg
+++ b/src/assets/icons/brand/more.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 12.5C9.5 13.8805 10.6195 15 12 15C13.3805 15 14.5 13.8805 14.5 12.5C14.5 11.1195 13.3805 10 12 10C10.6195 10 9.5 11.1195 9.5 12.5ZM13.5 12.5C13.5 13.327 12.827 14 12 14C11.173 14 10.5 13.327 10.5 12.5C10.5 11.673 11.173 11 12 11C12.827 11 13.5 11.673 13.5 12.5Z" fill="#7B7B7B"/>
+<path d="M3 12.5C3 13.8805 4.1195 15 5.5 15C6.8805 15 8 13.8805 8 12.5C8 11.1195 6.8805 10 5.5 10C4.1195 10 3 11.1195 3 12.5ZM7 12.5C7 13.327 6.327 14 5.5 14C4.673 14 4 13.327 4 12.5C4 11.673 4.673 11 5.5 11C6.327 11 7 11.673 7 12.5Z" fill="#7B7B7B"/>
+<path d="M16 12.5C16 13.8805 17.1195 15 18.5 15C19.8805 15 21 13.8805 21 12.5C21 11.1195 19.8805 10 18.5 10C17.1195 10 16 11.1195 16 12.5ZM20 12.5C20 13.327 19.327 14 18.5 14C17.673 14 17 13.327 17 12.5C17 11.673 17.673 11 18.5 11C19.327 11 20 11.673 20 12.5Z" fill="#7B7B7B"/>
+</svg>
--- a/src/assets/icons/brand/search.svg
+++ b/src/assets/icons/brand/search.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13.8654" cy="13.8665" r="7.86667" stroke="#232323" stroke-width="1.33333"/>
+<path d="M19.5586 19.5552L26.6697 26.6663" stroke="#232323" stroke-width="1.33333" stroke-linecap="round"/>
+</svg>
--- a/src/assets/icons/brand/time.svg
+++ b/src/assets/icons/brand/time.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C4.48583 20 0 15.5142 0 10C0 4.48583 4.48583 0 10 0C15.5142 0 20 4.48583 20 10C20 15.5142 15.5142 20 10 20ZM10 0.833333C4.94583 0.833333 0.833333 4.94583 0.833333 10C0.833333 15.0542 4.94583 19.1667 10 19.1667C15.0542 19.1667 19.1667 15.0542 19.1667 10C19.1667 4.94583 15.0542 0.833333 10 0.833333ZM12.3333 14.0833C12.5175 13.945 12.555 13.6842 12.4175 13.5L10.0008 10.2775V4.58333C10.0008 4.35333 9.81417 4.16667 9.58417 4.16667C9.35417 4.16667 9.1675 4.35333 9.1675 4.58333V10.4167C9.1675 10.5067 9.19667 10.5942 9.25083 10.6667L11.7508 14C11.8333 14.1092 11.9583 14.1667 12.0842 14.1667C12.1708 14.1667 12.2583 14.1392 12.3333 14.0833Z" fill="black"/>
+</svg>
--- a/src/assets/icons/digital/pullIcon.svg
+++ b/src/assets/icons/digital/pullIcon.svg
@@ -0,0 +1,5 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.82684 8.7465L7.13386 6.43947L9.44089 8.7465C9.67278 8.97839 10.0474 8.97839 10.2793 8.7465C10.5112 8.51461 10.5112 8.14001 10.2793 7.90812L7.55008 5.17893C7.31819 4.94704 6.94359 4.94704 6.7117 5.17893L3.98251 7.90812C3.75062 8.14001 3.75062 8.51461 3.98251 8.7465C4.2144 8.97244 4.59495 8.97839 4.82684 8.7465Z" fill="black"/>
+</g>
+</svg>
--- a/src/assets/icons/order/warning.svg
+++ b/src/assets/icons/order/warning.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 20C8.02219 20 6.08879 19.4135 4.4443 18.3147C2.79981 17.2159 1.51809 15.6541 0.761209 13.8268C0.00433286 11.9996 -0.193701 9.98891 0.192152 8.0491C0.578004 6.10929 1.53041 4.32746 2.92894 2.92894C4.32746 1.53041 6.10929 0.578004 8.0491 0.192152C9.98891 -0.193701 11.9996 0.00433286 13.8268 0.761209C15.6541 1.51809 17.2159 2.79981 18.3147 4.4443C19.4135 6.08879 20 8.02219 20 10C19.9971 12.6513 18.9426 15.1932 17.0679 17.0679C15.1932 18.9426 12.6513 19.9971 10 20ZM10 1.66667C8.35183 1.66667 6.74066 2.15541 5.37025 3.07109C3.99984 3.98677 2.93174 5.28826 2.30101 6.81098C1.67028 8.33369 1.50525 10.0092 1.82679 11.6258C2.14834 13.2423 2.94201 14.7271 4.10745 15.8926C5.27289 17.058 6.75774 17.8517 8.37425 18.1732C9.99076 18.4948 11.6663 18.3297 13.189 17.699C14.7118 17.0683 16.0132 16.0002 16.9289 14.6298C17.8446 13.2593 18.3333 11.6482 18.3333 10C18.3309 7.79061 17.4522 5.67241 15.8899 4.11013C14.3276 2.54785 12.2094 1.6691 10 1.66667Z" fill="#232323"/>
+<path d="M11.6654 15.8333H9.9987V9.99998H8.33203V8.33331H9.9987C10.4407 8.33331 10.8646 8.50891 11.1772 8.82147C11.4898 9.13403 11.6654 9.55795 11.6654 9.99998V15.8333Z" fill="#232323"/>
+<path d="M10 6.66666C10.6904 6.66666 11.25 6.10701 11.25 5.41666C11.25 4.7263 10.6904 4.16666 10 4.16666C9.30964 4.16666 8.75 4.7263 8.75 5.41666C8.75 6.10701 9.30964 6.66666 10 6.66666Z" fill="#232323"/>
+</svg>
--- a/src/assets/icons/shop.svg
+++ b/src/assets/icons/shop.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6.4C20 5.3 19.1 4 18 4H7.5C7.4 4 7.2 4 7.1 4C5.9 4.2 5 5.2 5 6.4L4 9C4 10.4 5.1 11.5 6.5 11.5C7.9 11.5 8.1 11.1 8.5 10.5C8.9 11.1 9.7 11.5 10.5 11.5C11.3 11.5 12.1 11.1 12.5 10.5C12.9 11.1 13.7 11.5 14.5 11.5C15.3 11.5 16.1 11.1 16.5 10.5C16.9 11.1 17.7 11.5 18.5 11.5C19.9 11.5 21 10.4 21 9M5.9 6.4C5.9 5.6 6.5 5 7.2 4.9C7.2 4.9 7.3 4.9 7.4 4.9H17.9C18.5 4.9 19 5.8 19 6.4C19 7 20 9.1 20 9.1C20 10 19.3 10.7 18.4 10.7C17.5 10.7 16.8 10 16.8 9.1V7.6H15.9V9.1C15.9 10 15.2 10.7 14.3 10.7C13.4 10.7 12.7 10 12.7 9.1V7.6H11.8V9.1C11.8 10 11.1 10.7 10.2 10.7C9.3 10.7 8.6 10 8.6 9.1V7.6H7.7V9.1C7.7 10 7.50938 10.7 6.60938 10.7C5.48438 10.7 4.9 9.9 4.9 9L5.9 6.4Z" fill="#232323"/>
+<path d="M6 11.2V19.3C6 19.9 6.4 20.3 7 20.3H18C18.6 20.3 19 19.9 19 19.3V13.5" stroke="#232323" stroke-width="0.75" stroke-linecap="round"/>
+<path d="M17 15.5V13.5C17 13.2239 16.7761 13 16.5 13C16.2239 13 16 13.2239 16 13.5V15.5C16 15.7761 16.2239 16 16.5 16C16.7761 16 17 15.7761 17 15.5Z" fill="#232323"/>
+</svg>
--- a/src/assets/icons/statement.svg
+++ b/src/assets/icons/statement.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.32919 0C3.73406 0 0 3.7382 0 8.33333C0 12.9285 3.7382 16.6667 8.32919 16.6667C12.9202 16.6667 16.6584 12.9285 16.6584 8.33333C16.6584 3.7382 12.9243 0 8.32919 0ZM8.32919 15.7352C4.24739 15.7352 0.927306 12.4151 0.927306 8.33333C0.927306 4.25153 4.24739 0.931445 8.32919 0.931445C12.411 0.931445 15.7311 4.25153 15.7311 8.33333C15.7311 12.4151 12.411 15.7352 8.32919 15.7352Z" fill="#979797"/>
+<path d="M8.84744 7.50551C8.84744 7.21972 8.61576 6.98804 8.32997 6.98804C8.04418 6.98804 7.8125 7.21972 7.8125 7.50551V12.4732C7.8125 12.759 8.04418 12.9907 8.32997 12.9907C8.61576 12.9907 8.84744 12.759 8.84744 12.4732V7.50551Z" fill="#979797"/>
+</svg>
--- a/src/assets/images/brand-null.png
+++ b/src/assets/images/brand-null.png
--- a/src/assets/images/brand/brandBg.png
+++ b/src/assets/images/brand/brandBg.png
--- a/src/assets/images/brand/brandDetailBg.png
+++ b/src/assets/images/brand/brandDetailBg.png
--- a/src/assets/images/brand/brandLoading.gif
+++ b/src/assets/images/brand/brandLoading.gif
--- a/src/assets/images/collectionStory/code-create.png
+++ b/src/assets/images/collectionStory/code-create.png
--- a/src/assets/images/collectionStory/collection_story_banner.png
+++ b/src/assets/images/collectionStory/collection_story_banner.png
--- a/src/assets/images/home/bg.jpg
+++ b/src/assets/images/home/bg.jpg
--- a/src/assets/images/home/bg.png
+++ b/src/assets/images/home/bg.png
--- a/src/assets/images/home/designer-bg.png
+++ b/src/assets/images/home/designer-bg.png
--- a/src/assets/images/home/designers-left.jpg
+++ b/src/assets/images/home/designers-left.jpg
--- a/src/assets/images/home/designers-right.jpg
+++ b/src/assets/images/home/designers-right.jpg
--- a/src/assets/images/logos/stylish-parade-black.png
+++ b/src/assets/images/logos/stylish-parade-black.png
--- a/src/components/CommodityItem.vue
+++ b/src/components/CommodityItem.vue
@@ -47,7 +47,7 @@ const {} = toRefs(data)
        <div class="name">
          {{ props.name }}
        </div>
-        <div class="price" :class="{ 'is-download': download }" v-if="props.showPrice">
+        <div class="price" :class="{ 'is-download': download }" v-if="props.showPrice && props.price">
          {{ props.price }}
        </div>
      </div>
--- a/src/components/checked.vue
+++ b/src/components/checked.vue
@@ -11,15 +11,29 @@ const props = defineProps({
 	}
 })
 const emit = defineEmits([
-	'update:selected'
+	'update:selected','change'
 ])
 const checkList = computed(()=>{
-	return [props.selected]
+	if(props.selected[0] === ''){
+		return props.list.map(item => item.value)
+	}else{
+		return [...props.selected]
+	}
 })
 const handleChange = (val) => {
-	if (val.length > 1) {
-		emit('update:selected', val[val.length - 1])
+	emit('update:selected', val)
+	emit('change', val)
 }
+const checkAll = computed(()=>{
+	return checkList.value.length === props.list.length
+})
+const handleCheckAllChange = (val) => {
+	let data = []
+	if(val){
+		data = props.list.map(item => item.value)
+	}
+	emit('update:selected', data)
+	emit('change', data)
 }
 let data = reactive({
 })
@@ -31,6 +45,14 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
+	<div class="all">
+		<el-checkbox
+			v-model="checkAll"
+			@change="handleCheckAllChange"
+		>
+			All
+		</el-checkbox>
+	</div>
 	<el-checkbox-group v-model="checkList" @change="handleChange">
 		<el-checkbox 
 			v-for="item in props.list" 
@@ -42,6 +64,9 @@ const {} = toRefs(data);
 	</el-checkbox-group>
 </template>
 <style lang="less" scoped>
+	.all{
+		margin-bottom: 1.2rem;
+	}
 	.el-checkbox-group{
 		display: flex;
 		flex-direction: column;
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -2,8 +2,7 @@ export default {
 	Login: {
 		login: 'Log in',
 		register: 'Register',
-		loginTo: 'Log on to <span>FiDA</span>',
-		loginTitle: 'A multi-agent canvas for rapid, trend driven design iteration.',
+		loginTip: 'Platform integrated with AiDA.<br />AiDA account login required.',
 		name: 'Name',
 		email: 'Email',
 		password: 'Password',
@@ -128,5 +127,73 @@ export default {
 			singapore: 'Singapore',
 			unitedKingdom: 'United Kingdom'
 		}
+	},
+	Wardrobe: {
+		title: 'My Wardrobe',
+		subtitle: 'Your digital pieces, all in one place',
+		common: {
+			all: 'All',
+			currencyHkd: 'HKD'
+		},
+		tabs: {
+			ariaLabel: 'Wardrobe tabs',
+			assets: 'Assets',
+			orders: 'Orders'
+		},
+		sort: {
+			label: 'Sort by',
+			placeholder: 'Select',
+			default: 'Default',
+			dateAdded: 'Date Added',
+			selectedFirst: 'Selected First'
+		},
+		assets: {
+			filters: 'Filters',
+			clear: 'Clear',
+			categories: 'Categories',
+			gender: 'Gender',
+			selectedCount: '{count} Selected',
+			selectAll: 'Select All',
+			deselectAll: 'Deselect All',
+			downloadSelected: 'Download Selected',
+			genders: {
+				male: 'Male',
+				female: 'Female'
+			}
+		},
+		orders: {
+			moreItems: '+{count} more',
+			statuses: {
+				all: 'All',
+				paid: 'Paid',
+				unpaid: 'Unpaid',
+				cancelled: 'Canceled'
+			},
+			statusBadges: {
+				paid: 'PAID',
+				unpaid: 'UNPAID',
+				cancelled: 'CANCELED'
+			},
+			actions: {
+				invoice: 'Invoice',
+				completePayment: 'Complete Payment',
+				buyAgain: 'Buy Again'
+			}
+		},
+		empty: {
+			title: 'Nothing in Wardrobe yet',
+			description: 'Explore the digital item and add pieces to your collection.',
+			action: 'Explore Digital Items'
+		}
+	},
+	ClothesCategories: {
+		blouses: 'Blouse',
+		dress: 'Dress',
+		trousers: 'Trousers',
+		skirt: 'Skirt',
+		tops: 'Tops',
+		bottoms: 'Bottoms',
+		outwear: 'Outwear',
+		others: 'Others'
 	}
 }
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -2,9 +2,7 @@ export default {
 	Login: {
 		login: '登录',
 		register: '注册',
-		signUp: '注册',
-		loginTo: '登录到 <span>FiDA</span',
-		loginTitle: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
+		loginTip: '与 AiDA 集成的平台。<br />需要登录 AiDA 账户。',
 		name: '姓名',
 		email: '邮箱',
 		password: '密码',
@@ -129,5 +127,73 @@ export default {
 			singapore: '新加坡',
 			unitedKingdom: '英国'
 		}
+	},
+	Wardrobe: {
+		title: '我的衣橱',
+		subtitle: '你的数字单品尽在此处',
+		common: {
+			all: '全部',
+			currencyHkd: 'HKD'
+		},
+		tabs: {
+			ariaLabel: '衣橱标签页',
+			assets: '资产',
+			orders: '订单'
+		},
+		sort: {
+			label: '排序',
+			placeholder: '请选择',
+			default: '默认',
+			dateAdded: '添加日期',
+			selectedFirst: '已选优先'
+		},
+		assets: {
+			filters: '筛选',
+			clear: '清除',
+			categories: '类别',
+			gender: '性别',
+			selectedCount: '已选择 {count} 件',
+			selectAll: '全选',
+			deselectAll: '取消全选',
+			downloadSelected: '下载已选',
+			genders: {
+				male: '男',
+				female: '女'
+			}
+		},
+		orders: {
+			moreItems: '还有 {count} 件',
+			statuses: {
+				all: '全部',
+				paid: '已支付',
+				unpaid: '待支付',
+				cancelled: '已取消'
+			},
+			statusBadges: {
+				paid: '已支付',
+				unpaid: '待支付',
+				cancelled: '已取消'
+			},
+			actions: {
+				invoice: '发票',
+				completePayment: '完成付款',
+				buyAgain: '再次购买'
+			}
+		},
+		empty: {
+			title: '衣橱暂无内容',
+			description: '探索数字单品，并添加到你的收藏。',
+			action: '探索数字单品'
+		}
+	},
+	ClothesCategories: {
+		blouses: '衬衫',
+		dress: '连衣裙',
+		trousers: '裤子',
+		skirt: '短裙',
+		tops: '上装',
+		bottoms: '下装',
+		outwear: '外套',
+		others: '其他'
 	}
 }
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,6 +23,11 @@ const router = createRouter({
      name: 'brand',
      component: () => import('../views/brand/index.vue')
    },
+	{
+		path: '/brand/:id',
+		name: 'brandDetail',
+		component: () => import('../views/brandDetail/index.vue')
+	},
    {
      path: '/digitalItem',
      name: 'digitalItem',
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -5,21 +5,20 @@ import { removeLocal, setLocal } from '@/utils/local'
 import MyEvent from '@/utils/myEvent'
 export const useUserInfoStore = defineStore('userInfo', () => {
 	const state = ref({
-    userInfo: {},
-    token: '',
-    generateParams: {
-      stylist: '',
-      sex: '',
-      stylistImage: ''
-    }
+		userInfo: {
+			userId: "",
+			email: "",
+			username: "",
+			accessToken: "",
+			expiresIn: "",
+		},
+		token: ''
 	})

-  // getters
-  const getUserInfo = computed(() => state.value.userInfo)
-
 	// actions
 	const setUserInfo = (data: any) => {
 		state.value.userInfo = data
+		setToken(data.accessToken)
 	}

 	const setToken = (data: string) => {
@@ -27,44 +26,26 @@ export const useUserInfoStore = defineStore('userInfo', () => {
 		setLocal(data, 'token')
 	}

-  const getGenerateParams = () => {
-    return state.value.generateParams
-  }
-
-  const setGenerateParams = (data: any) => {
-    state.value.generateParams = data
-  }
-
-  const resetGenerateParams = () => {
-    state.value.generateParams = {
-      stylist: '',
-      sex: '',
-      stylistImage: ''
-    }
-  }
-
-  const logOut = () => {
+	const logout = () => {
 		// 处理退出登录的一些逻辑
 		return new Promise((resolve) => {
+			state.value.userInfo = {
+				userId: "",
+				email: "",
+				username: "",
+				accessToken: "",
+				expiresIn: "",
+			}
 			state.value.token = ''
-      state.value.userInfo = {}
 			removeLocal('token')
-      resetGenerateParams()
-      MyEvent.emit('clear-generate-state')
-      MyEvent.emit('clear-client-state')
-      MyEvent.emit('clearAllCache')
 			resolve('')
 		})
 	}

 	return {
 		state,
-    getUserInfo,
 		setToken,
 		setUserInfo,
-    setGenerateParams,
-    getGenerateParams,
-    resetGenerateParams,
-    logOut
+		logout
 	}
 })
--- a/src/utils/ClothesCategory.ts
+++ b/src/utils/ClothesCategory.ts
@@ -0,0 +1,71 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import i18n from '@/lang'
+
+type Translate = (key: string) => string
+
+const clothesCategoryConfigs = [
+  {
+    key: 'blouses',
+    value: 'blouses'
+  },
+  {
+    key: 'dress',
+    value: 'dress'
+  },
+  {
+    key: 'trousers',
+    value: 'trousers'
+  },
+  {
+    key: 'skirt',
+    value: 'skirt'
+  },
+  {
+    key: 'tops',
+    value: 'tops'
+  },
+  {
+    key: 'bottoms',
+    value: 'bottoms'
+  },
+  {
+    key: 'outwear',
+    value: 'outwear'
+  },
+  {
+    key: 'others',
+    value: 'others'
+  }
+] as const
+
+export type ClothesCategoryValue = (typeof clothesCategoryConfigs)[number]['value']
+
+export interface ClothesCategory {
+  name: string
+  label: string
+  value: ClothesCategoryValue
+}
+
+export const createClothesCategories = (t: Translate = i18n.global.t): ClothesCategory[] =>
+  clothesCategoryConfigs.map(({ key, value }) => ({
+    name: t(`ClothesCategories.${key}`),
+    label: t(`ClothesCategories.${key}`),
+    value
+  }))
+
+export const ClothesCategories: ClothesCategory[] = clothesCategoryConfigs.map(({ key, value }) => ({
+  get name() {
+    return i18n.global.t(`ClothesCategories.${key}`)
+  },
+  get label() {
+    return i18n.global.t(`ClothesCategories.${key}`)
+  },
+  value
+}))
+
+export const useClothesCategories = () => {
+  const { t } = useI18n({ useScope: 'global' })
+
+  return computed(() => createClothesCategories(t))
+}
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -41,7 +41,7 @@ service.interceptors.request.use(
 		// Do something before request is sent
 		const token = useUserInfoStore().state.token
 		if (token) {
-			config.headers.Authorization = 'Bearer ' + token // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
+			config.headers.Authorization = token // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
 			//   config.headers['X-Token'] = getLocal('token') // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
 		}
 		return config
@@ -75,9 +75,10 @@ service.interceptors.response.use(
 		const res = response.data
 		// 处理异常的情况
 		// console.log(res)
-		if (res.code != 200) {
-			ElMessage.error(res.message)
-			return Promise.reject(new Error(res.errMsg || res.message || 'error'))
+		if (res.errCode != 0) {
+			let msg = res.errMsg || res.message || 'error'
+			ElMessage.error(msg)
+			return Promise.reject(new Error(msg))
 		} else {
 			// 默认只返回data，不返回状态码和message
 			// 通过 meta 中的 responseAll 配置来取决后台是否返回所有数据(包括状态码，message和data)
@@ -109,8 +110,7 @@ service.interceptors.response.use(
 					message: 'Please log in and try again.',
 					duration: 5000
 				})
-				router.push('/login')
-				useUserInfoStore().logOut(false)
+				useUserInfoStore().logout()
 				return Promise.reject(false)
 			}
 			error.config && removePending(error.config)
--- a/src/views/brand/brand-item.vue
+++ b/src/views/brand/brand-item.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	item:{
+		type:Object,
+		default:()=>{},
+	},
+})
+const emit = defineEmits([
+	'viewProfile',
+])
+const viewProfile = (item) => {
+	emit('viewProfile', item)
+}
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="item">
+		<div class="left">
+			<div class="portrait">
+				<img :src="item.avatar" alt="">
+			</div>
+			<div class="info">
+				<div class="name">{{ item.shopName }}</div>
+				<div class="collection">
+					{{ item.ownerName }} | 
+					{{ item?.listingTotal || 0 }} Collections
+				</div>
+				<div class="view-profile" @click="viewProfile(item)">View Profile</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="img-list">
+				<div class="img-item" v-for="itemImg in item?.covers" :key="itemImg">
+					<img :src="itemImg" alt="">
+				</div>
+			</div>
+			<div class="more">
+				<div class="icon" v-show="item?.covers?.length == 5">
+					<svgIcon name="brand-more" size="24" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.item{
+		display: flex;
+		width: 100%;
+		height: 14rem;
+		justify-content: space-between;
+		border-bottom: 0.5px solid #C4C4C4;
+		> .left{
+			display: flex;
+			.portrait{
+				width: 8rem;
+				height: 8rem;
+				margin-right: 2.4rem;
+				> img{
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+			}
+			.info{
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				> .name{
+					font-family: "KaiseiOpti-Bold";
+					font-weight: 700;
+					font-size: 2rem;
+					line-height: 100%;
+				}
+				> .collection{
+					color: #7B7B7B;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.2rem;
+					line-height: 2.3rem;
+					margin-top: .4rem;
+				}
+				> .view-profile{
+					margin-top: 2.4rem;
+					border-bottom: 2px solid #585858;
+					background: #F9F9F9;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					letter-spacing: -0.4px;
+					line-height: 3.4rem;
+					padding: 0 2.55rem;
+					cursor: pointer;
+				}
+			}
+		}
+		> .right{
+			display: flex;
+			> .img-list{
+				display: flex;
+				gap: 3.2rem;
+				> .img-item{
+					width: 9.2rem;
+					height: 12rem;
+					img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .more{
+				width: 8rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+</style>
--- a/src/views/brand/commodity-list.vue
+++ b/src/views/brand/commodity-list.vue
@@ -1,169 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import img from "@/assets/images/collectionStory/Rectangle.png";
-//const props = defineProps({
-//})
-const emit = defineEmits([
-	'addShopping'
-])
-let data = reactive({
-})
-const list = 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",
-	},
-])
-const type = ref('All')
-const addShopping = (item) => {
-	emit('addShopping', item)
-}
-onMounted(()=>{
-})
-onUnmounted(()=>{
-})
-defineExpose({})
-const {} = toRefs(data);
-</script>
-<template>
-	<div class="commodityList">
-		<div class="header">
-			<div class="title">
-				Items
-			</div>
-			<div class="menu">
-				<div :class="{'active': type === 'All'}" @click="type = 'All'">All</div>
-				<div :class="{'active': type === 'Male'}" @click="type = 'Male'">Male</div>
-				<div :class="{'active': type === 'Female'}" @click="type = 'Female'">Female</div>	
-			</div>
-		</div>
-		<div class="list">
-			<div class="item" v-for="item in list" :key="item.url">
-				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
-			</div>
-		</div>
-	</div>
-</template>
-<style lang="less" scoped>
-	.commodityList{
-		width: 100%;
-		height: 100%;
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		.header{
-			position: sticky;
-			top: 0;
-			z-index: 2;
-			background-color: #fff;
-			.title{
-				font-family: "KaiseiOpti-Bold";
-				font-weight: 700;
-				font-size: 3.6rem;
-				line-height: 6rem;
-				color: #121212;
-				padding: 4rem 0 3.6rem 1.2rem;
-			}
-			.menu{
-				padding: 0 1.2rem;
-				display: flex;
-				gap: 2rem;
-				margin-bottom: 6rem;
-				> div{
-					min-width: 6rem;
-					text-align: center;
-					font-family: "KaiseiOpti-Bold";
-					font-weight: 700;
-					font-size: 1.98rem;
-					line-height: 100%;
-					position: relative;
-					color: #7B7B7B;
-					cursor: pointer;
-					&::after{
-						content: '';
-						position: absolute;
-						bottom: -5px;
-						left: 0;
-						display: block;
-						width: 100%;
-						border-bottom: 1px solid #232323;
-						display: none;
-					}
-					&.active{
-						color: #232323;
-						&::after{
-							display: block;
-						}
-					}
-				}
-			}
-		}
-		.list{
-			border-top: 0.5px solid #585858;
-			width: 100%;
-			flex: 1;
-			display: grid;
-			align-content: start;
-			grid-template-columns: repeat(3, 1fr);
-			overflow-y: auto;
-			/* 垂直线（右边框） */
-			.item{
-				position: relative;
-				padding: 1.2rem;
-			}
-			.item::before {
-				content: '';
-				position: absolute;
-				right: 0;
-				top: 0;
-				height: 100%;
-				border-right: 0.5px solid #585858;
-				z-index: 1;
-			}
-
-				/* 水平线（下边框） */
-			.item::after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				border-bottom: 0.5px solid #585858;
-				z-index: 1;
-			}
-				/* 移除最后一列的右边框 */
-			.item:nth-child(3n)::before {
-				display: none;
-			}
-		}
-	}
-</style>
--- a/src/views/brand/index.vue
+++ b/src/views/brand/index.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import CommodityList from "./commodity-list.vue";
-import MerchantInfo from "./merchant-info.vue";
 import { useRouter } from "vue-router";
 import myEvent from '@/utils/myEvent'
+import scListNull from '@/views/shoppingCart/sc-list-null.vue'
+import brandItem from '@/views/brand/brand-item.vue'
+import { getDesignerList } from '@/api/brand'
+
+
+import img from '@/assets/images/collectionStory/Rectangle.png'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -11,13 +15,99 @@ import myEvent from '@/utils/myEvent'
 const router = useRouter()
 let data = reactive({
 })
-const addShopping = (item) => {
-	myEvent.emit('addShopping', item)
+
+const searchBrand = ref('')
+const merchantList = ref([
+])
+const getMerchantData = reactive({
+	pageSize: 10,
+	pageNum: 1,
+	isShowMark:false,
+	isNoData:false,
+})
+const searchHistory = ref([
+	
+])
+
+let changeSearchBrandTime = null
+const changeSearchBrand = () => {
+	clearTimeout(changeSearchBrandTime)
+	getDesignerList({
+		keyword: searchBrand.value,
+	}).then((res)=>{
+		merchantList.value = []
+		merchantList.value.push(...res)
+	})
+	// changeSearchBrandTime = setTimeout(()=>{
+	// 	getMerchantData.pageNum = 1
+	// 	getMerchantData.isShowMark = false
+	// 	getMerchantData.isNoData = false
+	// },300)
 }
-const openDetail = (item) => {	
-	router.push({name: 'digitalDetail', params: {id: item.id}})
+
+// const getBrandList = async () => {
+// 	if(getMerchantData.isShowMark && !getMerchantData.isNoData)return
+// 	getMerchantData.isShowMark = true
+// 	let value = {
+// 		pageSize: getMerchantData.pageSize,
+// 		pageNum: getMerchantData.pageNum,
+// 		status: 1,
+// 	}
+// 	setTimeout(()=>{
+// 			if(merchantList.value.length >= 5){
+// 				getMerchantData.isNoData = true
+// 				merchantList.value = []
+// 				return
+// 			}
+// 			getMerchantData.pageNum += 1
+// 			merchantList.value.push({
+// 				name:'Roaming Clouds',
+// 				portrait: img,
+// 				collectionsName:'by Lian Su ',
+// 				collections:[
+// 					img,img,img,
+// 				],
+// 			})
+// 			getMerchantData.isShowMark = false
+// 	},1000)
+// 	// await getPublishList(value).then((res)=>{
+// 	// 	if(res.content.length == 0)getMerchantData.isNoData = true
+// 	// 	getMerchantData.pageNum += 1
+// 	// 	list.value.push(...res.content)
+// 	// })
+// }
+// const vObserve  = {
+// 	mounted (el,binding) {
+// 		getMerchantData.isShowMark = false
+// 		getMerchantData.isNoData = false
+// 		new IntersectionObserver(
+// 		(entries, observer) => {
+// 				// 如果不是相交，则直接返回
+// 				// console.log(entries[0]);
+// 				if (!entries[0].intersectionRatio) return;
+// 				getMerchantData.pageNum += 1
+// 				binding.value()
+// 			},
+// 			// { root:worksPage }
+// 		).observe(el);
+// 	}
+// }
+
+const deleteHistory = (item) => {
+	searchHistory.value = searchHistory.value.filter((i) => i != item)
+	localStorage.setItem('brandSearchHistory', JSON.stringify(searchHistory.value));
 }
+const viewProfile = (item) => {
+	if(!searchHistory.value.includes(searchBrand.value))searchHistory.value.push(searchBrand.value)
+	localStorage.setItem('brandSearchHistory', JSON.stringify(searchHistory.value));
+	router.push({
+		path:'/brand/'+item.sellerId,
+	})
+}
+
 onMounted(()=>{
+	const value = localStorage.getItem('brandSearchHistory');
+	if(value)searchHistory.value = JSON.parse(value)
 })
 onUnmounted(()=>{
 })
@@ -26,15 +116,52 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="brand">
-		<div class="header-img">
+		<div class="header-img" :class="{'active': searchBrand.length > 0}">
 			<img src="@/assets/images/brand/brandBg.png" alt="">
+			<div class="text-box">
+				<div class="title">Brand</div>
+				<span>Every brand, every story — discover who's behind the collections.</span>
+			</div>
 		</div>
 		<div class="content">
-			<div class="merchant-info">
-				<MerchantInfo></MerchantInfo>
+			<div class="input">
+				<input type="text" v-model="searchBrand" @input="changeSearchBrand" placeholder="Search brand">
+				<div class="icon">
+					<SvgIcon name="brand-search" size="32" />
+				</div>
+			</div>
+			<div class="merchantList" v-if="searchBrand.length > 0">
+				<brand-item v-for="item in merchantList" :key="item.name" :item="item" @viewProfile="viewProfile"></brand-item>
+				<div class="end" v-show="!getMerchantData.isNoData && !getMerchantData.isShowMark">- The End-</div>
+				<!-- <div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
+					<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getBrandList"></span>
+					<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
+				</div> -->
+
+				<div class="merchantListNull" v-if="getMerchantData.isNoData && searchBrand.length > 0">
+					<sc-list-null 
+						nullImage="brand"
+						:showButton="false" 
+						title="Brand No Found"
+						tip="Try using another keywords."
+					/>
+				</div>
+			</div>
+			<div class="null-input" v-if="searchBrand.length == 0">
+				<div class="title">
+					<div class="icon">
+						<SvgIcon name="brand-time" size="20" />
+					</div>
+					<span>Searching History</span>
+				</div>
+				<div class="history">
+					<div v-for="item in searchHistory" :key="item" @click.stop="searchBrand = item" class="item">
+						<span>{{item}}</span>
+						<div class="icon" @click.stop="deleteHistory(item)">
+							<SvgIcon name="brand-delete" size="18" />
+						</div>
+					</div>
 				</div>
-			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
 			</div>
 		</div>
 		<Footer></Footer>
@@ -46,34 +173,151 @@ const {} = toRefs(data);
 		height: 100%;
 		position: relative;
 		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
 		.header-img{
 			width: 100%;
+			position: relative;
+			height: 34.4rem;
+			transition: all .3s;
+			&.active{
+				height: 14.7rem;
+			}
 			>img{
 				width: 100%;
+				position: absolute;
+				bottom: 0;
+			}
+			> .text-box{
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				text-align: center;
+				> .title{
+					font-family: 'KaiseiOpti-Bold';
+					font-weight: 700;
+					font-size: 4rem;
+					line-height: 2.3rem;
+					letter-spacing: 0%;
+					color: #000;
+				}
+				> span{
+					display: block;
+					margin-top: 2.4rem;
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 1.6rem;
+					line-height: 140%;
 				}
 			}
-		.content{
+		}
+		>.content{
 			display: flex;
 			height: auto;
 			align-items: flex-start;
-			.merchant-info{
-				width: 40rem;
-				padding-left: 12.7rem;
-				padding-right: 2.7rem;
-				height: var(--app-view-height);
-				overflow-y: auto;
-				position: sticky;
-				top: 0;
-				&::-webkit-scrollbar{
-					width: 0;
-					height: 0;
-				}
-			}
-			.commodity-list{
+			flex-direction: column;
+			align-items: center;
 			flex: 1;
-				border-left: 0.5px solid #585858;
-				border-right: 0.5px solid #585858;
-				margin-right: 9rem;
+			overflow: hidden;
+			> .input{
+				width: 66.6rem;
+				display: flex;
+				border-bottom: 2px solid #232323;
+				padding: 1.4rem 1.4rem 1.4rem 2.4rem;
+				background-color: #f9f9f9;
+				display: flex;
+				margin-top: 8rem;
+				> input{
+					width: 57.2rem;
+					line-height: 3.2rem;
+					padding: 0;
+					border: none;
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 1.6rem;
+					line-height: 100%;
+					margin-right: 2.4rem;
+					background-color: transparent;
+					outline: none;
+				}
+				> .icon{
+					cursor: pointer;
+				}
+			}
+			> .null-input{
+				margin-top: 8rem;
+				.title{
+					display: flex;
+					justify-content: center;
+					.icon{
+						margin-right: 2rem;
+					}
+				}
+				.history{
+					margin-top: 4rem;
+					width: 59rem;
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: center;
+					column-gap: 3.2rem;
+					row-gap: 1.2rem;
+					.item{
+						cursor: pointer;
+						display: flex;
+						> span{
+							font-family: 'KaiseiOpti-Regular';
+							font-weight: 400;
+							font-size: 1.4rem;
+							line-height: 100%;
+							margin-right: .4rem;
+						}
+					}
+				}
+			}
+			> .merchantList{
+				width: 121.8rem;
+				margin-top: 6rem;
+				flex: 1;
+				overflow-y: auto;
+				gap: 3.2rem;
+				display: flex;
+				flex-direction: column;
+				::-webkit-scrollbar{
+					display: none;
+				}
+				.end{
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 12px;
+					line-height: 140%;
+					height: 7rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				> .material_content_list_loding{
+					width: 100%;
+					height: 5rem;
+					aspect-ratio: 1/1;
+					overflow: hidden;
+					display: flex;
+					flex-shrink: 0;
+					justify-content: center;
+					> .page_loading{
+						width: 5rem;
+						height: 5rem;
+					}
+					> img{
+						width: 5rem;
+						height: 5rem;
+						object-fit: contain;
+					}
+				}
+				> .merchantListNull{
+					flex: 1;
+					width: 100%;
+				}
 			}
 		}
 	}
--- a/src/views/brandDetail/commodity-list.vue
+++ b/src/views/brandDetail/commodity-list.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+import { getlistingListApi } from "@/api/listing";
+
+const props = defineProps({
+	id: {
+		type: String,
+		default: ''
+	}
+})
+const emit = defineEmits([
+	'addShopping','openDetail'
+])
+const getMerchantData = reactive({
+	pageSize: 10,
+	pageNum: 1,
+	isShowMark:false,
+	isNoData:false,
+})
+const listingList = ref([
+])
+const type = ref('all')
+const addShopping = (item) => {
+	emit('addShopping', item)
+}
+const setType = (val) => {
+	type.value = val
+	getMerchantData.pageNum = 1
+	getMerchantData.isShowMark = false
+	getMerchantData.isNoData = false
+}
+const vObserve  = {
+	mounted (el,binding) {
+		getMerchantData.isShowMark = false
+		getMerchantData.isNoData = false
+		new IntersectionObserver(
+		(entries, observer) => {
+				// 如果不是相交，则直接返回
+				// console.log(entries[0]);
+				if (!entries[0].intersectionRatio) return;
+				binding.value()
+				getMerchantData.pageNum += 1
+			},
+			// { root:worksPage }
+		).observe(el);
+	}
+}
+const getListingList = () => {
+	getMerchantData.isShowMark = true
+	getMerchantData.isNoData = false
+	getlistingListApi({
+		sellerId: props.id,
+		designFor: type.value,
+		pageNum: getMerchantData.pageNum,
+		pageSize: getMerchantData.pageSize,
+	}).then((res)=>{
+		if(res.content.length == 0)getMerchantData.isNoData = true
+		listingList.value.push(...res.content)
+		getMerchantData.isShowMark = false
+	})
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+</script>
+<template>
+	<div class="commodityList">
+		<div class="header">
+			<div class="title">
+				Items
+			</div>
+			<div class="menu">
+				<div :class="{'active': type === 'all'}" @click="setType('all')">All</div>
+				<div :class="{'active': type === 'male'}" @click="setType('male')">Male</div>
+				<div :class="{'active': type === 'female'}" @click="setType('female')">Female</div>	
+			</div>
+		</div>
+		<div class="list">
+			<div class="item" v-for="item in listingList" :key="item.url">
+				<CommodityItem :url="item.cover" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="$emit('openDetail', item)"></CommodityItem>
+			</div>
+			<div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
+				<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getListingList"></span>
+				<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.commodityList{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.header{
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			background-color: #fff;
+			.title{
+				font-family: "KaiseiOpti-Bold";
+				font-weight: 700;
+				font-size: 3.6rem;
+				line-height: 6rem;
+				color: #121212;
+				padding: 4rem 0 3.6rem 1.2rem;
+			}
+			.menu{
+				padding: 0 1.2rem;
+				display: flex;
+				gap: 2rem;
+				margin-bottom: 6rem;
+				> div{
+					min-width: 6rem;
+					text-align: center;
+					font-family: "KaiseiOpti-Bold";
+					font-weight: 700;
+					font-size: 1.98rem;
+					line-height: 100%;
+					position: relative;
+					color: #7B7B7B;
+					cursor: pointer;
+					&::after{
+						content: '';
+						position: absolute;
+						bottom: -5px;
+						left: 0;
+						display: block;
+						width: 100%;
+						border-bottom: 1px solid #232323;
+						display: none;
+					}
+					&.active{
+						color: #232323;
+						&::after{
+							display: block;
+						}
+					}
+				}
+			}
+		}
+		.list{
+			width: 100%;
+			flex: 1;
+			// display: grid;
+			// align-content: start;
+			// grid-template-columns: repeat(3, 1fr);
+			overflow: hidden;
+
+			display: grid;
+			align-content: start;
+			grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+			border-top: 0.5px solid #585858;
+			padding: .5px 0 0 .5px;
+			/* 垂直线（右边框） */
+			.item{
+				position: relative;
+				padding: 1.2rem;
+				border-bottom: 0.5px solid #585858;
+				border-right: 0.5px solid #585858;
+				margin-right: -1px;
+				margin-bottom: -1px;
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: 5rem;
+				aspect-ratio: 1/1;
+				grid-column: 1 / -1;
+				overflow: hidden;
+				display: flex;
+				flex-shrink: 0;
+				justify-content: center;
+				> .page_loading{
+					width: 5rem;
+					height: 5rem;
+				}
+				> img{
+					width: 5rem;
+					height: 5rem;
+					object-fit: contain;
+				}
+			}
+		}
+	}
+</style>
--- a/src/views/brandDetail/index.vue
+++ b/src/views/brandDetail/index.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import CommodityList from "./commodity-list.vue";
+import MerchantInfo from "./merchant-info.vue";
+import { useRouter, useRoute } from "vue-router";
+import myEvent from '@/utils/myEvent'
+import { ElMessage } from 'element-plus'
+import { getDesignerDetail } from '@/api/brand'
+import { AddShoppingCart } from '@/api/shoppingCart'
+
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+const router = useRouter()
+const route = useRoute()
+
+const designerDetail = ref({
+	avatar: '',
+	brandBanner: '',
+	description: '',
+	email: '',
+	mobile: '',
+	ownerName: '',
+	shopName: '',
+	socialLinks: '[]',
+})
+
+const addShopping = (item) => {
+	if(!item.price) return ElMessage.warning('Please log in first.')
+	AddShoppingCart({listingIds:[item.id]}).then((res)=>{
+		item.shopName = designerDetail.value.shopName
+		myEvent.emit('addShopping', item)
+	})
+}
+const openDetail = (item) => {	
+	router.push({name: 'digitalItemDetail', params: {id: item.id}})
+}
+const getDetail = ()=>{
+	let data = {
+		sellerId: route.params.id,
+	}
+	getDesignerDetail(data,true).then((res)=>{
+		designerDetail.value = res
+	})
+}
+onMounted(()=>{
+	getDetail()
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+</script>
+<template>
+	<div class="brand">
+		<div class="header-img">
+			<img :src="designerDetail.brandBanner || '@/assets/images/brand/brandDetailBg.png'" alt="">
+		</div>
+		<div class="content">
+			<div class="merchant-info">
+				<MerchantInfo :designerDetail="designerDetail"></MerchantInfo>
+			</div>
+			<div class="commodity-list">
+				<CommodityList :id="route.params.id" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+			</div>
+		</div>
+		<Footer></Footer>
+	</div>
+</template>
+<style lang="less" scoped>
+	.brand{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow-y: auto;
+		.header-img{
+			width: 100%;
+			>img{
+				width: 100%;
+			}
+		}
+		.content{
+			display: flex;
+			height: auto;
+			// align-items: flex-start;
+			.merchant-info{
+				width: 40rem;
+				padding-left: 12.7rem;
+				padding-right: 2.7rem;
+				height: var(--app-view-height);
+				overflow-y: auto;
+				position: sticky;
+				top: 0;
+				&::-webkit-scrollbar{
+					width: 0;
+					height: 0;
+				}
+			}
+			.commodity-list{
+				flex: 1;
+				border-left: 0.5px solid #585858;
+				border-right: 0.5px solid #585858;
+				margin-right: 9rem;
+			}
+		}
+	}
+</style>
--- a/src/views/brandDetail/merchant-info.vue
+++ b/src/views/brandDetail/merchant-info.vue
@@ -1,7 +1,22 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-//const props = defineProps({
-//})
+const props = defineProps({
+	designerDetail: {
+		type: Object,
+		default: () => {
+			return {
+				avatar: '',
+				brandBanner: '',
+				description: '',
+				email: '',
+				mobile: '',
+				ownerName: '',
+				shopName: '',
+				socialLinks: '[]',
+			}
+		},
+	},
+})
 //const emit = defineEmits([
 //])
 let data = reactive({
@@ -16,12 +31,12 @@ const {} = toRefs(data);
 <template>
 	<div class="merchantInfo">
 		<div class="profile">
-			<img src="@/assets/images/collectionStory/Rectangle.png" alt="">
+			<img :src="designerDetail.avatar || '@/assets/images/collectionStory/Rectangle.png'" alt="">
 		</div>
 		<div class="info">
 			<div class="detail">
-				<div class="name">Lian Su</div>
-				<div class="title">Roaming Clouds</div>
+				<div class="name">{{ designerDetail.ownerName }}</div>
+				<div class="title">{{ designerDetail.shopName }}</div>
 			</div>
 			<div class="contact">
 				<div class="title">Contact</div>
@@ -29,30 +44,26 @@ const {} = toRefs(data);
 					<div class="icon">
 						<svg-icon name="brand-email" size="24" />
 					</div>
-					<div>lian.su@urieworweoo.com</div>
+					<div>{{ designerDetail.email }}</div>
 				</div>
 				<div class="phone label">
 					<div class="icon">
 						<svg-icon name="brand-call" size="24" />
 					</div>
-					<div>+86 139 4829 7710</div>
+					<div>{{ designerDetail.mobile }}</div>
 				</div>
-				<div class="address label">
+				<div class="address label" v-for="value in JSON.parse(designerDetail.socialLinks)">
 					<div class="icon">
 						<svg-icon name="brand-link" size="24" />
 					</div>
-					<div>746312432</div>
-				</div>
-				<div class="website label">
-					<div class="icon">
-						<svg-icon name="brand-link" size="24" />
-					</div>
-					<div>https://urieworweoo.com</div>
+					<div>{{value}}</div>
 				</div>
 			</div>
 			<div class="about">
 				<div class="title">About</div>
-				<div class="content">Lian Su’s work weaves understated ethnic influences into contemporary minimalism. She explores materials and silhouettes that bridge heritage and modern sensibilities. Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.</div>
+				<div class="content">
+					{{ designerDetail.description }}
+				</div>
 			</div>
 		</div>
 	</div>
--- a/src/views/collectionStory/detail/index.vue
+++ b/src/views/collectionStory/detail/index.vue
@@ -4,6 +4,7 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 import coreConcept from "./coreConcept.vue";
 import inspiration from "./inspiration.vue";
 import feelingWithAiDA from "./feelingWithAiDA.vue";
+import joinUs from "./join-us.vue";
 import CommodityItem from "@/components/CommodityItem.vue";
 //const props = defineProps({
 //})
@@ -30,6 +31,10 @@ const list = ref([
 const addShopping = (item) => {
 	emit('addShopping', item)
 }
+const openCodeCreate = () => {
+	window.open('https://code-create.com.hk/', '_blank')
+}
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -41,21 +46,22 @@ const {} = toRefs(data);
 	<div class="detail">
 		<div class="left">
 			<div class="personal">
-				<img :src="img" alt="">
+				<img src="@/assets/images/collectionStory/code-create.png" alt="">
 				<div class="name">
-					<span>Lian Su</span>
-					<div class="icon">
+					<span>Code-Create</span>
+					<div class="icon" @click="openCodeCreate">
 						<SvgIcon name="share" size="24" />
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="center">
-			<coreConcept ></coreConcept>
+			<joinUs></joinUs>
+			<!-- <coreConcept ></coreConcept>
 			<div class="line"></div>
 			<inspiration ></inspiration>
 			<div class="line"></div>
-			<feelingWithAiDA ></feelingWithAiDA>
+			<feelingWithAiDA ></feelingWithAiDA> -->
 		</div>
 		<div class="right">
 			<div class="item" v-for="item in list" :key="item.url">
@@ -67,10 +73,11 @@ const {} = toRefs(data);
 <style lang="less" scoped>
 	.detail{
 		width: 100%;
-		height: auto;
 		position: relative;
 		display: flex;
+		height: calc(100vh - var(--header-height) - var(--footer-height));
 		align-items: flex-start;
+		overflow: hidden;
 		> div{
 			// height: 100%;
 		}
@@ -93,6 +100,9 @@ const {} = toRefs(data);
 					display: flex;
 					gap: .4rem;
 					align-items: center;
+					> .icon{
+						cursor: pointer;
+					}
 					> span{
 						font-family: 'KaiseiOpti-Bold';
 						font-weight: 700;
@@ -110,8 +120,9 @@ const {} = toRefs(data);
 			border-right: 0.5px solid #585858;
 			// overflow-y: auto;
 			overflow: hidden;
-			// height: 100%;
-			height: auto;
+			height: 100%;
+			// height: auto;
+			position: relative;
 			.line{
 				border: 0.5px solid #58585899;
 				width: 100%;
@@ -123,14 +134,15 @@ const {} = toRefs(data);
 		> .right{
 			width: 25.4rem;
 			padding-top: 6rem;
-			position: sticky;
+			// position: sticky;
 			top: 0;
-			height: calc(100vh - var(--header-height));
+			// height: calc(100vh - var(--header-height));
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			gap: 4rem;
 			overflow-y: auto;
+			height: 100%;
 			&::-webkit-scrollbar{
 				display: none;
 			}
--- a/src/views/collectionStory/detail/join-us.vue
+++ b/src/views/collectionStory/detail/join-us.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="joinUs">
+		<div class="title">Join Our Designer Community</div>
+		<div class="info">
+			<div>
+				Join our community of visionaries and publish your collection story.
+			</div>
+			<div>
+				We are currently seeking collections that deeply integrate the AiDA creative workflow, specifically those that resonate through powerful core concepts and evocative inspiration. 
+			</div>
+			<br />
+			<div>
+				This architecture is designed to elevate your exposure through profound "propositional expression," ensuring that soulful, story-driven designs achieve higher market premiums and superior sales conversion.
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.joinUs{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding: 6rem 0;
+		> .title{
+			padding: 0 2.4rem;
+			font-family: "KaiseiOpti-Bold";
+			font-weight: 700;
+			font-size: 3rem;
+			line-height: 100%;
+			margin-bottom: 6rem;
+		}
+		> .info{
+			width: 70.7rem;
+			margin: 0 auto;
+			margin-bottom: 4rem;
+			> div{
+				font-family: "KaiseiOpti-Regular";
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 2.3rem;
+			}
+		}
+	}
+</style>
--- a/src/views/collectionStory/index.vue
+++ b/src/views/collectionStory/index.vue
@@ -28,24 +28,15 @@ const {} = toRefs(data);
 			</div>
 			<div class="title-content">
 				<div class="title-box">
-					<div class="left">
 					<div class="title">
-							Windswept Burden
+						We’re Seeking 
 					</div>
 					<div class="info">
-							Publish Date: 24th Nov 2025
+						Fashion Voice Worth Featuring.
 					</div>
 				</div>
-					<div class="right">
-						<div class="info">
-							“We are spiritual nomads carrying what wind cannot take. <br />
-							Inspired by those who knew home is not a place, but what you wear.”
-						</div>
-					</div>
-				</div>
-				<div class="scrolling-learn-more">
-					<div>Scrolling Learn More</div>
-					<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
+				<div class="button">
+					<a href="mailto:info@code-create.com.hk">Contact Us if Interested</a>
 				</div>
 			</div>
 		</div>
@@ -73,7 +64,7 @@ const {} = toRefs(data);
 				display: flex;
 				align-items: center;
 				gap: .8rem;
-				color: #fff;
+				color: #000;
 				cursor: pointer;
 				> .text{
 					font-size: 2rem;
@@ -83,73 +74,46 @@ const {} = toRefs(data);
 			}
 			> .title-content{
 				width: 100%;
-				height: 63.2rem;
-				margin-top: 24.8rem;
-				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
-				padding: 0 4rem;
-				> .title-box{
-					margin-top: 36.7rem;
-					color: #fff;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					> .left{
-						font-family: 'KaiseiOpti-Bold';
-						font-weight: 700;
-						> .title{
-							font-size: 6rem;
-							line-height: 6rem;
-						}
-						> .info{
-							margin-top: 1.7rem;
-							font-size: 1.8rem;
-							line-height: 100%;
-							vertical-align: bottom;
-						}
-					}
-					> .right{
-						> .info{
-							font-weight: 500;
-							font-size: 1.8rem;
-							line-height: 100%;
-							text-align: right;
-						}
-					}
-				}	
-			}
-			.scrolling-learn-more{
 				position: absolute;
-				bottom: 2.1rem;
-				left: 50%;
-				transform: translateX(-50%);
+				padding: 0 6.7rem;
+				margin-top: 11.5rem;
 				display: flex;
 				flex-direction: column;
-				color: #fff;
-				animation: scroll 3s linear infinite;
-				@keyframes scroll {
-					0% {
-						transform: translateY(0);
-					}
-					50% {
-						transform: translateY(-20%);
-					}
-					100% {
-						transform: translateY(0%);
-					}
-				}
-				> div{
-					font-family: 'KaiseiOpti-Regular';
-					font-weight: 400;
-					font-size: 1.4rem;	
+				align-items: flex-start;
+				> .title-box{
+					display: flex;
+					flex-direction: column;
+					> .title{
+						font-size: 6.5rem;
 						line-height: 100%;
-					text-align: center;
-					margin-bottom: 1.5rem;
-					white-space: nowrap;
+						font-weight: 500;
+						color: #585858;
+					}
+					> .info{
+						font-size: 3rem;
+						font-weight: 500;
+						line-height: 100%;
+						color: #585858;
+					}
+				}	
+				> .button{
+					padding: 0 4.5rem;
+					line-height: 5.1rem;
+					background-color: #1B1B1B;
+					color: #fff;
+					margin-top: 4rem;
+					font-weight: 700;
+					font-size: 2rem;
+					letter-spacing: -0.4px;
+					cursor: pointer;
+					> a{
+						color: #fff;
+						text-decoration: none;
+					}
 				}
 			}
 			.banner{
 				width: 100%;
-				position: absolute;
 				z-index: -1;
 			}
 		}
--- a/src/views/digitalDetail/index.vue
+++ b/src/views/digitalDetail/index.vue
@@ -3,24 +3,41 @@ import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { useRouter } from "vue-router";
 import img from "@/assets/images/collectionStory/Rectangle.png";
 import myEvent from '@/utils/myEvent'
-
+import { getListingDetailApi } from '@/api/listing'
+import { useRoute } from 'vue-router'

 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const route = useRoute()
+
 const router = useRouter()
-let data = reactive({
+let detail:any = ref({
+	description: '',
+	title: '',
+	price: '',
+	shopName: '',
+	updateTime: '',
+	gender: '',
 })
 const addShopping = (item) => {
 	myEvent.emit('addShopping', item)
 }
+const getListingDetail = ()=>{
+	getListingDetailApi({
+		id:route.params.id + '',
+	}).then((res)=>{
+		console.log(res)
+		if(res)detail.value = res
+	})
+}
 onMounted(()=>{
+	getListingDetail()
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="digitalItemDetail">
@@ -52,25 +69,22 @@ const {} = toRefs(data);
 					<span>Back</span>
 				</div>
 				<div class="img-info">
-					<div class="img-type">FEMALE / skirt, blouse, Outwear</div>
-					<div class="img-name">Heritage Layered Set</div>
-					<div class="img-price">$100 <span class="mini-scrollbar">HKD</span></div>
+					<div class="img-type">{{ detail.gender.toUpperCase() }} / skirt, blouse, Outwear</div>
+					<div class="img-name">{{ detail.title }}</div>
+					<div class="img-price" v-if="detail.price">¥{{ detail.price }} <span class="mini-scrollbar">HKD</span></div>
 				</div>
 				<div class="commodity">
 					<div class="info">
 						<img class="profile" :src="img" alt="">
 						<div class="detail">
-							<div class="name">Roaming Clouds</div>
+							<div class="name">{{ detail.shopName }}</div>
 							<div class="release-time">
-								<div class="icon">
-									<svg-icon name="digital-document" size="24"></svg-icon>
-								</div>
-								<span>12mb  |  Release in Feb 26, 2026</span>
+								<span>Release in {{ detail.updateTime }}</span>
 							</div>
 						</div>
 					</div>
 					<div class="introduce">
-						This ensemble artfully merges traditional folk heritage with contemporary tailoring, creating a timeless silhouette that honors ancestral craftsmanship while embracing modern sophistication.
+						{{ detail.description }}
 					</div>
 				</div>
 				<div class="notice">
@@ -235,9 +249,7 @@ const {} = toRefs(data);
 								color: #585858;
 								display: flex;
 								align-items: center;
-								> span{
-									margin-left: 1rem;
-								}
+								
 							}
 						}
 					}
--- a/src/views/digitalItem/commodity-list.vue
+++ b/src/views/digitalItem/commodity-list.vue
@@ -77,42 +77,24 @@ const {} = toRefs(data);
 		.list{
 			width: 100%;
 			flex: 1;
+			// display: grid;
+			// align-content: start;
+			// grid-template-columns: repeat(3, 1fr);
+			overflow: hidden;
+
 			display: grid;
 			align-content: start;
-			grid-template-columns: repeat(3, 1fr);
-			overflow-y: auto;
+			grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+			border-top: 0.5px solid #585858;
+			padding: .5px 0 0 .5px;
 			/* 垂直线（右边框） */
 			.item{
 				position: relative;
 				padding: 1.2rem;
-				--commodity-marginBottom: 2rem;
-				--commodity-name-fontSize: 2rem;
-				--commodity-name-marginBottom: .8rem;
-				--commodity-price-fontSize: 1.6rem;
-			}
-			.item::before {
-				content: '';
-				position: absolute;
-				right: 0;
-				top: 0;
-				height: 100%;
-				border-right: 0.5px solid #585858;
-				z-index: 1;
-			}
-
-				/* 水平线（下边框） */
-			.item::after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
 				border-bottom: 0.5px solid #585858;
-				z-index: 1;
-			}
-				/* 移除最后一列的右边框 */
-			.item:nth-child(3n)::before {
-				display: none;
+				border-right: 0.5px solid #585858;
+				margin-right: -1px;
+				margin-bottom: -1px;
 			}
 		}
 	}
--- a/src/views/digitalItem/index.vue
+++ b/src/views/digitalItem/index.vue
@@ -3,10 +3,16 @@ import { ref, onMounted, onUnmounted, reactive, toRefs, onActivated } from "vue"
 import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
 import { useRouter } from "vue-router";
+import scListNull from '@/views/shoppingCart/sc-list-null.vue'
+import { getListingMallListApi } from '@/api/listing'
+
 // 定义组件名称
 defineOptions({
  name: 'digitalItem'
 })
+
+const categories = ref([''])
+const gender = ref([''])
 //const props = defineProps({
 //})
 //const emit = defineEmits([
@@ -14,8 +20,20 @@ defineOptions({
 const digitalItemRef = ref(null)
 const scrollTop = ref(0)
 const router = useRouter()
-let data = reactive({
-})
+
+const searechTypeList = ref([
+	{
+		value:'Best Selling',
+		label:'Best Selling'
+	},{
+		value:'Price: Low to High',
+		label:'Price: Low to High'
+	},{
+		value:'Newest First',
+		label:'Newest First'
+	},
+])
+const searechType = ref('Newest First')
 const addShopping = (item) => {}
 const openDetail = (item) => {
 	scrollTop.value = digitalItemRef.value.scrollTop
@@ -23,6 +41,17 @@ const openDetail = (item) => {
 		path: '/digitalItem/' + 123,
 	})
 }
+const handleChange = (val) => {
+	
+}
+const getListingMallList = ()=>{
+	let data = {
+		// designFor
+	}
+	// getListingMallListApi().then(res => {
+
+	// })
+}
 onActivated(()=>{
 	digitalItemRef.value.scrollTop = scrollTop.value
 })
@@ -31,7 +60,6 @@ onMounted(()=>{
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="digitalItem" ref="digitalItemRef">
@@ -42,12 +70,36 @@ const {} = toRefs(data);
 				<p class="info">Virtual fashion creations collected in your personal archive</p>
 			</div>
 		</div>
+		<div class="filters">
+			<div class="filter-item">
+				<el-select v-model="categories" placeholder="Sort By" :teleported="false">
+					<template #label="{ label }">
+						<span class="header-label">Sort By</span>
+						<span class="header-value">{{ label }}</span>
+					</template>
+					<el-option
+						v-for="item in categoriesList"
+						:key="item.label"
+						:value="item.value"
+						:label="item.label"
+					/>
+				</el-select>
+			</div>
+		</div>
 		<div class="content">
 			<div class="merchant-info">
-				<MerchantInfo></MerchantInfo>
+				<MerchantInfo @change="handleChange"></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+				<CommodityList v-if="true" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+				<div v-else class="null">
+					<sc-list-null 
+						nullImage="shopping-cart"
+						:showButton="false" 
+						title="Nothing in Digital Item"
+						tip="Try adjusting your filters or refreshing the page."
+					/>
+				</div>
 			</div>
 		</div>
 		<Footer></Footer>
@@ -89,12 +141,67 @@ const {} = toRefs(data);
 				}
 			}
 		}
-		.content{
+		> .filters{
+			width: 100%;
+			height: 6rem;
+			display: flex;
+			align-items: center;
+			padding: 0 9rem;
+			justify-content: flex-end;
+			> .filter-item{	
+				:deep(.el-select) {
+					width: 15rem;
+					--el-border-radius-base: 0;
+					--el-select-input-color: rgba(0, 0, 0, 0.5);
+					--el-select-input-font-size: 1rem;
+					.el-select__wrapper {
+						font-size: 1.07rem;
+						padding: 0 0.7rem;
+						line-height: 1;
+						min-height: 0;
+						height: 2.2rem;
+
+						.header-label {
+							font-family: KaiseiOpti-Regular;
+							color: rgba(0, 0, 0, 0.5);
+							margin-right: 0.6rem;
+						}
+						.header-value {
+							font-family: KaiseiOpti-Bold;
+							color: #232323;
+						}
+					}
+					.el-select__popper {
+						--el-popper-border-radius: 0;
+						border: 0.1rem solid #d0d0d0;
+						.el-select-dropdown__list {
+							padding: 0;
+							> .el-select-dropdown__item {
+								margin-bottom: 0.89rem;
+								color: #232323;
+								font-size: 1.069rem;
+								height: 2.68rem;
+								line-height: 2.68rem;
+								padding: 0 1.4rem;
+								&:last-child {
+									margin-bottom: 0;
+								}
+								&.is-selected {
+									font-family: KaiseiOpti-Bold;
+									background-color: #f4f4f4;
+								}
+							}
+						}
+					}
+				}
+
+			}
+		}
+		> .content{
 			display: flex;
 			height: auto;
-			align-items: flex-start;
+			// align-items: flex-start;
 			border-top: 0.5px solid #585858;
-			margin-top: 6rem;
 			.merchant-info{
 				width: 38.5rem;
 				padding-left: 10.2rem;
@@ -112,6 +219,10 @@ const {} = toRefs(data);
 				border-left: 0.5px solid #585858;
 				border-right: 0.5px solid #585858;
 				margin-right: 9rem;
+				display: flex;
+				.null{
+					flex: 1;
+				}
 			}
 		}
 	}
--- a/src/views/digitalItem/merchant-info.vue
+++ b/src/views/digitalItem/merchant-info.vue
@@ -1,68 +1,37 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, computed, toRefs } from "vue";
+import { useI18n } from 'vue-i18n'
+import { useClothesCategories } from '@/utils/ClothesCategory'
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
-let data = reactive({
-})
-const categoriesList = ref([
-	{
-		label: 'All',
-		value: 'All'
-	},
-	{
-		label: 'Outwear',
-		value: 'Outwear'
-	},
-	{
-		label: 'Dress',
-		value: 'Dress'
-	},
-	{
-		label: 'Trousers',
-		value: 'Trousers'
-	},
-	{
-		label: 'Blouse',
-		value: 'Blouse'
-	},
-	{
-		label: 'Skirt',
-		value: 'Skirt'
-	},
-	{
-		label: 'Accessories',
-		value: 'Accessories'
-	},
-]);
-const genderList = ref([
-	{
-		label: 'All',
-		value: 'All'
-	},
-	{
-		label: 'Male',
-		value: 'Male'
-	},
-	{
-		label: 'Female',
-		value: 'Female'
-	},
+const emit = defineEmits([
+	'change'
 ])
-const categories = ref('All')
-const gender = ref('All')
+
+const { t } = useI18n()
+
+const categoriesList = useClothesCategories();
+
+const genderList = computed(() => [
+  { label: t('Wardrobe.assets.genders.male'), value: 'male' },
+  { label: t('Wardrobe.assets.genders.female'), value: 'female' }
+])
+const categories = ref([''])
+const gender = ref([''])

 const clearFilters = () => {
-	categories.value = 'All'
-	gender.value = 'All'
+	categories.value = ['']
+	gender.value = ['']
+	handleChange()
+}
+const handleChange = () => {	
+	emit('change', {categories:categories.value, gender:gender.value})
 }
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="filters">
@@ -73,12 +42,12 @@ const {} = toRefs(data);
 		<div class="categories">Categories</div>
 		<div class="line"></div>
 		<div class="multiple">
-			<checked :list="categoriesList" v-model:selected="categories" />
+			<checked :list="categoriesList" @change="handleChange" v-model:selected="categories" />
 		</div>
 		<div class="categories">Gender</div>
 		<div class="line"></div>
 		<div class="multiple">
-			<checked :list="genderList" v-model:selected="gender" />
+			<checked :list="genderList" @change="handleChange" v-model:selected="gender" />
 		</div>
 	</div>
 </template>
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="home-index">
 		<section-index />
-		<section-designers />
+		<section-designer />
 		<section-design />
 		<section-digital-items1 />
 		<section-digital-items2 />
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 	import { computed } from 'vue'
 	import SectionIndex from './section-index.vue'
-	import SectionDesigners from './section-designers.vue'
+	import SectionDesigner from './section-designer.vue'
 	import SectionDesign from './section-design.vue'
 	import SectionDigitalItems1 from './section-digital-items1.vue'
 	import SectionDigitalItems2 from './section-digital-items2.vue'
--- a/src/views/home/section-designer.vue
+++ b/src/views/home/section-designer.vue
@@ -0,0 +1,51 @@
+<template>
+	<section class="section-designer">
+		<div class="title">Designer Community</div>
+		<div class="tip">
+			Discover the designers shaping AiDA’s creative landscape. <br />
+			Each month, we will showcase a curated selection of their most distinguished works.
+		</div>
+		<button custom="black" @click="onSearchBrand">Search Brands</button>
+		<img src="@/assets/images/home/designer-bg.png" />
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const onSearchBrand = () => {
+		router.push({ name: 'brand' })
+	}
+</script>
+
+<style lang="less">
+	.section-designer {
+		padding: 9rem 8rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .title {
+			font-family: KaiseiOpti-Bold;
+			font-size: 5.6rem;
+			line-height: 6.2rem;
+			text-align: center;
+			margin-bottom: 2rem;
+		}
+		> .tip {
+			font-family: KaiseiOpti-Regular;
+			font-size: 2rem;
+			line-height: 2.8rem;
+			text-align: center;
+			color: #979797;
+			margin-bottom: 2rem;
+		}
+		> button {
+			margin-bottom: 4.6rem;
+		}
+		> img {
+			width: 73%;
+			height: auto;
+		}
+	}
+</style>
--- a/src/views/home/section-designers.vue
+++ b/src/views/home/section-designers.vue
@@ -1,130 +0,0 @@
-<template>
-	<section class="section-designers">
-		<div class="title">Popular Designers</div>
-		<div class="tip">
-			Discover the designers shaping AiDA’s creative landscape,<br />as we present their most
-			distinguished works each month.
-		</div>
-		<div class="content">
-			<img src="@/assets/images/home/designers-left.jpg" />
-			<div class="box">
-				<div class="intro">
-					<span>{{ list[index]?.intro || '' }}</span>
-					<img src="@/assets/images/home/designers-right.jpg" />
-				</div>
-				<div
-					class="name-item"
-					v-for="(v, i) in list"
-					:key="i"
-					:class="{ active: i === index }"
-					@click="index = i"
-				>
-					<span class="name">{{ v.name }}</span>
-					<span class="icon">
-						<svg-icon name="arrow_right" size="20" />
-					</span>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
-
-<script setup lang="ts">
-	import { computed, ref } from 'vue'
-	const index = ref(0)
-	const list = ref([
-		{
-			name: 'Ji-Yeon Park',
-			intro:
-				'Through its fragile tulle layers over a grounded silhouette, the garment reflects the tension between vulnerability and strength within one’s journey.'
-		},
-		{
-			name: 'Lian Su',
-			intro: '阿巴阿巴~'
-		},
-		{
-			name: 'Céline Moreau',
-			intro: '这是Céline Moreau的设计~'
-		}
-	])
-</script>
-
-<style lang="less">
-	.section-designers {
-		padding: 9rem 8rem;
-		> .title {
-			font-family: KaiseiOpti-Bold;
-			font-size: 5.6rem;
-			line-height: 6.2rem;
-			text-align: center;
-			margin-bottom: 1rem;
-		}
-		> .tip {
-			font-family: KaiseiOpti-Regular;
-			font-size: 2rem;
-			line-height: 2.8rem;
-			text-align: center;
-			color: #979797;
-		}
-		> .content {
-			margin-top: 5rem;
-			border: 0.1rem solid #979797;
-			border-left: none;
-			border-left: none;
-			border-right: none;
-			box-sizing: content-box;
-			--height: 45rem;
-			min-height: var(--height);
-			display: flex;
-			> img {
-				width: var(--height);
-				height: var(--height);
-				margin: 2.4rem 2.4rem 2.4rem 0;
-			}
-			> .box {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				> .intro {
-					display: flex;
-					margin: 2rem 2rem 2rem 0;
-					> span {
-						flex: 1;
-						font-family: KaiseiOpti-Regular;
-						font-size: 2rem;
-						line-height: 3rem;
-						color: #232323;
-						margin-right: 9rem;
-					}
-					> img {
-						width: 25rem;
-						height: 25rem;
-					}
-				}
-				> .name-item {
-					flex: 1;
-					min-height: 5rem;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					border-top: 0.1rem solid #7b7b7b;
-					padding: 0 2.1rem;
-					font-family: KaiseiOpti-Regular;
-					font-size: 2.4rem;
-					color: #7b7b7b;
-					> .icon {
-						transform: rotate(-45deg);
-					}
-					&.active {
-						font-family: KaiseiOpti-Bold;
-						color: #232323;
-						background: #f6f6f6;
-						> .icon {
-							transform: rotate(0);
-						}
-					}
-				}
-			}
-		}
-	}
-</style>
--- a/src/views/home/section-footer.vue
+++ b/src/views/home/section-footer.vue
@@ -4,7 +4,7 @@
 			<div class="mate">
 				<div class="logos">
 					<img src="@/assets/images/logos/code-create-black.png" />
-					<img src="@/assets/images/logos/stylish-arade-black.png" />
+					<img src="@/assets/images/logos/stylish-parade-black.png" />
 					<img src="@/assets/images/logos/aida-black.png" />
 				</div>
 				<div class="tip">
--- a/src/views/home/section-index.vue
+++ b/src/views/home/section-index.vue
@@ -1,74 +1,58 @@
 <template>
 	<section class="section-index bgw">
-		<img src="@/assets/images/home/bg.jpg" class="bg" />
-		<div class="shade-1"></div>
-		<div class="shade-2"></div>
+		<img src="@/assets/images/home/bg.png" class="bg" />
 		<div class="content">
-			<div class="title">Windswept Burden</div>
-			<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div>
-			<button custom>View More</button>
-			<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div>
-			<p class="tip">
-				What you wear is how you present yourself to the world, especially today, when human
-				contacts are so quick. Fashion is instant language
-			</p>
-			<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
+			<div class="title" v-html="title"></div>
+			<div class="tip">
+				Discover collections through the stories behind their creation. A curated space connecting
+				designers, narratives, and fashion commerce.
+			</div>
+			<button custom="black-box" @click="handleClickArrow">
+				<svg-icon name="arrow_right" size="34" />
+			</button>
 		</div>
 	</section>
 </template>

 <script setup lang="ts">
 	import { computed } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const title =
+		'We’re Seeking<br /><span>Fashion Voice</span><br /><span class="small">Worth Featuring.</span>'
+	const handleClickArrow = () => {
+		router.push({ name: 'collectionStory' })
+	}
 </script>

 <style lang="less">
 	.section-index {
-		> .shade-1 {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 96rem;
-			height: 100%;
-			background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
-		}
-		> .shade-2 {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 30rem;
-			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
-		}
 		> .content {
-			top: 16rem;
+			top: 13.7rem;
 			left: 9rem;
-			color: #fff;
+			color: #232323;
 			> .title {
 				font-family: KaiseiOpti-Bold;
-				font-size: 6rem;
+				font-size: 7rem;
 				margin-bottom: 3rem;
+				span {
+					font-family: KaiseiOpti-Medium;
+					&.small {
+						font-size: 6rem;
 					}
-			> div.tip {
-				font-family: KaiseiOpti-Regular;
-				font-size: 3.2rem;
-				line-height: 4.3rem;
+				}
+			}
+			> .tip {
+				width: 50rem;
+				font-size: 1.8rem;
+				line-height: 2.6rem;
+				color: #585858;
 			}
 			> button {
-				margin-top: 11.6rem;
-				margin-bottom: 13.9rem;
-			}
-			> .aida-logo {
-				margin-bottom: 3rem;
-				> img {
-					width: auto;
-					height: 5rem;
-				}
-			}
-			> p.tip {
-				font-family: KaiseiOpti-Regular;
-				font-size: 1.2rem;
-				line-height: 2rem;
-				color: #ededed;
+				margin-top: 12rem;
+				min-width: 0;
+				width: 8rem;
+				height: 8rem;
 			}
 		}
 	}
--- a/src/views/login/email-verify.vue
+++ b/src/views/login/email-verify.vue
@@ -26,7 +26,7 @@
 	const props = defineProps({
 		email: { type: String, required: true },
 		type: {
-			type: String as () => 'LOGIN' | 'REGISTER' | 'FORGOT_PWD',
+			type: String as () => 'LOGIN' | 'REGISTER' | 'FORGET_PWD',
 			required: true
 		},
 		password: { type: String, default: '' },
--- a/src/views/login/login-dialog.vue
+++ b/src/views/login/login-dialog.vue
@@ -47,7 +47,7 @@
 					:name="data.name"
 					:email="data.email"
 					:password="data.password"
-					type="FORGOT_PWD"
+					type="FORGET_PWD"
 				/>
 			</div>
 		</div>
@@ -55,6 +55,12 @@
 </template>

 <script setup lang="ts">
+	import {
+		AccountSendLoginCode,
+		AccountLogin,
+		AccountRegister,
+		AccountSendVerifyCode
+	} from '@/api/account'
 	import { computed, ref, markRaw, watch, onBeforeUnmount } from 'vue'
 	import md5 from 'md5'
 	import login from './login.vue'
@@ -63,6 +69,8 @@
 	import registerSuccess from './register-success.vue'
 	import retrievePassword from './retrieve-password.vue'
 	import myEvent from '@/utils/myEvent'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const userStore = useUserInfoStore()
 	const data = ref({
 		name: '',
 		email: '',
@@ -121,22 +129,42 @@
 	})

 	const onLogin = (res: any) => {
+		AccountSendLoginCode({
+			email: res.email,
+			password: md5(res.password)
+		}).then((v) => {
 			data.value = res
 			data.value.type = TabNames.login
 			currentTab.value = TabNames.email_verify
+		})
 	}
 	const onRegister = (res: any) => {
+		const value = {
+			email: res.email,
+			operationType: 'REGISTER'
+		}
+		AccountSendVerifyCode(value).then((v) => {
 			data.value = res
 			data.value.type = TabNames.register
 			currentTab.value = TabNames.email_verify
+		})
 	}
 	const onSubmitEmailCode = (code: string) => {
+		const value = {
+			email: data.value.email,
+			password: md5(data.value.password),
+			emailVerifyCode: code
+		}
 		if (data.value.type === TabNames.login) {
-			console.log('登录', code)
+			AccountLogin(value).then((v) => {
+				userStore.setUserInfo(v)
 				show.value = false
+			})
 		} else {
-			console.log('注册', code)
+			value['username'] = data.value.name
+			AccountRegister(value).then((v) => {
 				currentTab.value = TabNames.register_success
+			})
 		}
 	}
 </script>
--- a/src/views/login/retrieve-password.vue
+++ b/src/views/login/retrieve-password.vue
@@ -71,6 +71,7 @@
 </template>

 <script setup lang="ts">
+	import { AccountSendVerifyCode, AccountVerifyCode, AccountResetPassword } from '@/api/account'
 	import md5 from 'md5'
 	import { computed, reactive, ref } from 'vue'
 	import { validateEmail, validatePass } from './tools'
@@ -103,22 +104,12 @@
 	const onSubmit1 = () => {
 		form1Ref.value?.validate?.((valid) => {
 			if (valid) {
-				index.value = 1
-			} else {
-				console.warn('error submit!')
-			}
-		})
-	}
-	const onSubmit2 = () => {
-		form2Ref.value?.validate?.((valid) => {
-			if (valid) {
-				const data = {
+				AccountSendVerifyCode({
 					email: formData.email,
-					code: formData.code,
-					password: md5(formData.password)
-				}
-				console.log(data)
-				emit('back')
+					operationType: 'FORGOT_PWD'
+				}).then(() => {
+					index.value = 1
+				})
 			} else {
 				console.warn('error submit!')
 			}
@@ -126,8 +117,30 @@
 	}
 	const onVerifyCode = (code: string) => {
 		if (!code) return
+		AccountVerifyCode({
+			email: formData.email,
+			emailVerifyCode: code,
+			operationType: 'FORGOT_PWD'
+		}).then(() => {
 			formData.code = code
 			index.value = 2
+		})
+	}
+	const onSubmit2 = () => {
+		form2Ref.value?.validate?.((valid) => {
+			if (valid) {
+				const data = {
+					email: formData.email,
+					password: md5(formData.password),
+					emailVerifyCode: formData.code
+				}
+				AccountResetPassword(data).then(() => {
+					emit('back')
+				})
+			} else {
+				console.warn('error submit!')
+			}
+		})
 	}
 </script>

--- a/src/views/main-header.vue
+++ b/src/views/main-header.vue
@@ -8,7 +8,9 @@
 				v-for="v in navList1"
 				:key="v.path"
 				class="nav-item"
-				:class="{ active: activePath === v.path }"
+				:class="{
+					active: v.path === '/' ? activePath === v.path : new RegExp(`^${v.path}`).test(activePath)
+				}"
 				@click="onNavItemClick(v.path)"
 			>
 				<span>{{ v.name }}</span>
@@ -19,27 +21,29 @@
 				class="icon"
 				v-for="v in navList2"
 				:key="v.path"
-				:class="{ active: activePath === v.path }"
+				:class="{ active: new RegExp(`^${v.path}`).test(activePath) }"
 				@click="onNavItemClick(v.path)"
 			>
 				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
 			</div>
-			<div class="login" @click="onLogin">Login</div>
 			<el-popover
 				ref="profilePopover"
 				placement="bottom-end"
 				trigger="click"
 				:show-arrow="false"
 				popper-style="width: 24rem; padding: 0; border-radius: 0; right: 2rem; top: 10rem;"
+				v-if="userInfo.userId"
 			>
-				<template #reference><div class="profile"></div></template>
+				<template #reference>
+					<div class="icon"><svg-icon name="user_0" size="22" /></div>
+				</template>
 				<template #default>
 					<div class="profile-content">
 						<div class="info">
 							<img src="@/assets/images/profile-content-bg.jpg" alt="" />
 							<div class="content">
 								<div class="profile"></div>
-								<div class="name">Hi, Alexandra_chen</div>
+								<div class="name">Hi, {{ userInfo.username }}</div>
 							</div>
 						</div>
 						<div class="nav-item" @click="onMyWardrobe">
@@ -62,16 +66,27 @@
 					</div>
 				</template>
 			</el-popover>
+			<div class="login" @click="onLogin" v-else>Login</div>
+			<div class="language" @click="onLanguageClick">
+				<span :class="{ active: locale === 'CHINESE_SIMPLIFIED' }">中</span> /
+				<span :class="{ active: locale === 'ENGLISH' }">ENG</span>
+			</div>
 		</div>
 	</div>
 </template>

 <script setup lang="ts">
+	import { ElMessageBox } from 'element-plus'
 	import { computed, ref } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 	import myEvent from '@/utils/myEvent'
+	import { useI18n } from 'vue-i18n'
+	import { useUserInfoStore } from '@/stores/userInfo'
+	const { t, locale } = useI18n()
+	const userInfoStore = useUserInfoStore()
 	const router = useRouter()
 	const route = useRoute()
+	const userInfo = computed(() => userInfoStore.state.userInfo)
 	const activePath = computed(() => route.path)
 	const navList1 = ref([
 		{
@@ -96,11 +111,6 @@
 			icon: 'cart_0',
 			active_icon: 'cart_1',
 			path: '/shoppingCart'
-		},
-		{
-			icon: 'user_0',
-			active_icon: 'user_1',
-			path: '/account'
 		}
 	])
 	const onNavItemClick = (path: string) => {
@@ -129,7 +139,16 @@
 	}
 	const onLogout = () => {
 		hideProfilePopover()
-		console.log('logout')
+		ElMessageBox.confirm('Are you sure to log off?')
+			.then(() => {
+				userInfoStore.logout()
+				router.go(0)
+			})
+			.catch(() => {})
+	}
+	const onLanguageClick = () => {
+		locale.value = locale.value === 'ENGLISH' ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'
+		localStorage.setItem('language', locale.value)
 	}
 </script>

@@ -159,7 +178,6 @@
 				height: 2.4rem;
 			}
 			> .login {
-				font-family: Kaisei Opti;
 				font-size: 1.6rem;
 			}
 			> .profile {
@@ -168,6 +186,15 @@
 				border-radius: 50%;
 				background: #f5f5f5;
 			}
+			> .language {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.6rem;
+				color: #c2c2c2;
+				> .active {
+					color: #232323;
+					font-family: KaiseiOpti-Medium;
+				}
+			}
 		}
 		> .center,
 		> .right {
@@ -195,7 +222,6 @@
 					font-size: 1.6rem;
 					color: #232323;
 					border-bottom: 0.1rem solid transparent;
-					font-family: Kaisei Opti;
 				}
 				&.active {
 					> span {
--- a/src/views/shopping-drawer.vue
+++ b/src/views/shopping-drawer.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import myEvent from '@/utils/myEvent'
-import scList from '@/views/shoppingCart/sc-list.vue'
+// import scList from '@/views/shoppingCart/sc-list.vue'
+import { useRouter } from "vue-router";
+import img from '@/assets/images/brand-null.png'

 //const props = defineProps({
 //})
@@ -9,15 +11,28 @@ import scList from '@/views/shoppingCart/sc-list.vue'
 //])
 let data = reactive({
 })
+const cover = ref('')
+const price = ref('')	
+const shopName = ref('')
+const commodityName = ref('')
+const router = useRouter()
 const isShoppingShow = ref(false)
 const shoppingClose = () => {
 	isShoppingShow.value = false
 }

+const goShopping = () => {
+	router.push({path: '/shoppingCart'})
+	isShoppingShow.value = false
+}
+
 onMounted(()=>{
 	myEvent.add('addShopping', (item) => {
 		isShoppingShow.value = true
-		console.log(item)
+		cover.value = item.cover || ''
+		price.value = item.price || ''
+		shopName.value = item.shopName || ''
+		commodityName.value = item.title || ''
 	})
 })
 onUnmounted(()=>{
@@ -27,14 +42,182 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
-		<sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/>
+	<el-drawer v-model="isShoppingShow" width="50rem" class="addShoppingDrawer"  :close-on-click-modal="false" title="I am the title" :with-header="false">
+		<div class="addShoppingInfo">
+			<div class="header">
+				<div class="title">Added to your Shopping Cart</div>
+				<span class="close" @click="shoppingClose"
+					><svg-icon name="close" size="13"
+				/></span>
+			</div>
+			<div class="content">
+				<div class="img-list">
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+					<div class="img-box">
+						<img :src="img" alt="">
+					</div>
+					<div class="img-box">
+						<img :src="cover" alt="">
+					</div>
+				</div>
+				<div class="inf-box">
+					<div class="name">{{ commodityName }}</div>
+					<div class="shopping-name">
+						<div class="icon">
+							<SvgIcon name="shop" size="24" />
+						</div>
+						{{ shopName }}
+					</div>
+					<div class="price">${{ price }} <span class="currency">HKD</span></div>
+				</div>
+				<div class="statement">
+					<div class="icon">
+						<SvgIcon name="statement" size="16.6" />
+					</div>
+					Digital Assets Only. No physical product included.
+				</div>
+			</div>
+			<div class="button" @click="goShopping">
+				SeE Shopping Cart
+			</div>
+		</div>
+		<!-- <sc-list is-mini style="flex: 0.6;" @close="shoppingClose"/> -->
 	</el-drawer>
 </template>
+<style lang="less">
+	.el-drawer.addShoppingDrawer{
+		--el-drawer-padding-primary: 2.4rem 3.4rem;
+	}
+</style>
 <style lang="less" scoped>
-	.homeNavBox{
+	
+	.addShoppingInfo{
 		width: 100%;
 		height: 100%;
 		position: relative;
+		display: flex;
+		flex-direction: column;
+		> .header{
+			border-bottom: 0.1rem solid #c4c4c4;
+			display: flex;
+			padding-bottom: 2.4rem;
+			align-items: center;
+			justify-content: space-between;
+			> .title{
+				font-family: KaiseiOpti-Bold;
+				font-size: 2rem;
+				line-height: 120%;
+				color: #121212;
+				font-weight: 400;
+			}
+			> .close{
+				cursor: pointer;
+			}
+		}
+		> .content{
+			flex: 1;
+			padding-top: 9.6rem;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			> .img-list{
+				height: 37.5rem;
+				width: 33.7rem;
+				position: relative;
+				> .img-box{
+					position: absolute;
+					overflow: hidden;
+					width: 26.9rem;
+					height: 34.1rem;
+					border: 1px solid #EFEFEF;
+					top: 1.7rem;
+					right: 0;
+					left: auto;
+					transform-origin: bottom;
+					box-shadow: 1rem .8rem 2.4rem 0px #4D4D4D0A;
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+					&:nth-child(1){
+						transform: rotate(-8deg);
+						background-color: #eaeaea;
+						right: 2rem;
+					}
+					&:nth-child(2){
+						transform: rotate(-4deg);
+						background-color: #eeeeee;
+						right: 1rem;
+					}
+					&:nth-child(3){
+						transform: rotate(0);
+						background-color: #fafafa;
+					}
+				}
+			}
+			> .inf-box{
+				margin-top: 5.18rem;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				> .name{
+					font-family: KaiseiOpti-Bold;
+					font-weight: 700;
+					font-size: 2.4rem;
+					line-height: 140%;
+				}
+				> .shopping-name{
+					margin-top: 1.3rem;
+					font-weight: 500;
+					font-size: 1.6rem;
+					line-height: 140%;
+					display: flex;
+					align-items: center;
+					> .icon{
+						margin-right: 0.8rem;
+					}
+				}
+				> .price{
+					margin-top: 1.2rem;
+					font-family: KaiseiOpti-Bold;
+					font-weight: 700;
+					font-style: Bold;
+					font-size: 1.8rem;
+					line-height: 140%;
+					> .currency{
+						font-size: 1.2rem;
+						font-weight: 500;
+						line-height: 140%;
+					}
+				}
+			}
+			> .statement{
+				margin-top: 5rem;
+				font-family: KaiseiOpti-Regular;
+				color: #979797;
+				display: flex;
+				font-weight: 400;
+				font-size: 1.2rem;
+				line-height: 140%;
+				> .icon{
+					margin-right: 0.8rem;
+				}
+			}
+		}
+		> .button{
+			font-family: KaiseiOpti-Regular;
+			font-weight: 400;
+			font-size: 14px;
+			line-height: 4.6rem;
+			letter-spacing: 3%;
+			text-align: center;
+			width: 100%;
+			border: 1px solid #232323;
+			margin-bottom: calc(6rem - 2.4rem);
+			cursor: pointer;
+		}
 	}
 </style>
--- a/src/views/shoppingCart/index.d.js
+++ b/src/views/shoppingCart/index.d.js
@@ -0,0 +1,5 @@
+/** 商品状态 */
+export const SCART_STATUS = {
+	/** 正常 */
+	NORMAL: 1,
+}
--- a/src/views/shoppingCart/order-summary.vue
+++ b/src/views/shoppingCart/order-summary.vue
@@ -18,16 +18,6 @@
 			>
 		</div>
 		<br />
-		<div class="total-file-size">
-			<span class="label">
-				<span class="icon"><svg-icon name="order-file" size="18" /></span>
-				<span class="text">Total File Size</span>
-			</span>
-			<span class="value"
-				>{{ totalSize.size }} <span>{{ totalSize.unit }}</span></span
-			>
-		</div>
-		<div class="hr"></div>
 		<br />
 		<div class="total">
 			<span class="label">Total</span>
@@ -44,6 +34,9 @@
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
+	import { useRouter } from 'vue-router'
+	import { CreateOrder } from '@/api/shoppingCart'
+	const router = useRouter()
 	const props = defineProps({
 		list: {
 			type: Array,
@@ -65,17 +58,14 @@
 		})
 		return arr
 	})
-	const totalSize = computed(() => {
-		const total = props.list.reduce((pre, cur) => pre + cur.fileSize, 0)
-		const str = FormatBytes(total)
-		return {
-			size: str.split(' ')[0],
-			unit: str.split(' ')[1]
-		}
-	})
 	const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const handleCheckout = () => {
-		console.log('购买：', props.list)
+		const ids = props.list.map((v: any) => v.listingId)
+		if (ids.length === 0) return
+		console.log('购买：', ids)
+		CreateOrder(ids, true).then((res) => {
+			router.go(0)
+		})
 	}
 </script>

--- a/src/views/shoppingCart/sc-item.vue
+++ b/src/views/shoppingCart/sc-item.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
+	<div
+		class="sc-item"
+		:class="{
+			'is-order-actions-layout': orderActionsLayout,
+			disabled
+		}"
+	>
 		<slot name="checkbox" />
-    <img :src="info.url" />
+		<img :src="info.cover" />
 		<div class="content">
 			<div class="title">{{ info.title }}</div>
 			<div class="brand">
@@ -11,21 +17,28 @@
 			<div class="tags" v-if="showTags">
 				<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
 			</div>
-      <div class="size" v-if="showSize">
-        <div class="icon"><svg-icon name="order-file" size="18" /></div>
+			<div class="date" v-if="showDate">
 				<div class="text">
-          <span>{{ FormatBytes(info.fileSize) }}</span>
-          <span v-if="showSizeDate"
-            >&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
-              FormatDate(info.date, 'SM D, YYYY, h:mm A')
-            }}</span
-          >
+					{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
 				</div>
 			</div>
 		</div>
 		<div class="right">
-      <div class="amount">${{ info.amount }}<span> HKD</span></div>
-      <SvgIcon v-if="orderActionsLayout" class="download" name="download" size="32" color="#232323" />
+			<div class="unshelve" v-show="disabled">
+				<div class="title">
+					<span><svg-icon name="order-warning" size="20" /></span>
+					No Longer Available
+				</div>
+				<div class="tip">Delisted from marketplace</div>
+			</div>
+			<div class="amount" v-show="!disabled">${{ info.amount }}<span> HKD</span></div>
+			<SvgIcon
+				v-if="orderActionsLayout"
+				class="download"
+				name="download"
+				size="32"
+				color="#232323"
+			/>
 			<div class="remove" v-if="showRemove" @click="onRemove">
 				<span class="icon"><svg-icon name="order-delete" size="18" /></span>
 				<span class="text">Remove</span>
@@ -40,14 +53,25 @@ import { FormatBytes, FormatDate } from '@/utils/tools'
 	const emit = defineEmits(['remove'])
 	const props = defineProps({
 		showTags: { type: Boolean, default: true },
-  showSize: { type: Boolean, default: true },
-  showSizeDate: { type: Boolean, default: true },
+		showDate: { type: Boolean, default: true },
 		showRemove: { type: Boolean, default: true },
 		orderActionsLayout: { type: Boolean, default: false },
-  info: { type: Object, default: () => {} }
+		info: {
+			type: Object as () => {
+				status: number
+				title: string
+				brand: string
+				tags: string[]
+				date: string
+				amount: number
+				cover: string
+			},
+			default: () => {}
+		},
+		disabled: { type: Boolean, default: false }
 	})
 	const onRemove = () => {
-  emit('remove', props.info.id)
+		emit('remove', props.info)
 	}
 </script>

@@ -76,7 +100,7 @@ const onRemove = () => {
 			> .title {
 				font-family: KaiseiOpti-Bold;
 				font-size: var(--sc-item-title-font-size, 2.4rem);
-      color: #232323;
+				color: var(--sc-item-title-color, #232323);
 			}
 			> .brand {
 				display: flex;
@@ -85,11 +109,12 @@ const onRemove = () => {
 					width: 2.4rem;
 					height: 2.4rem;
 					margin-right: 1rem;
+					color: var(--sc-item-brand-color, #232323);
 				}
 				> .text {
 					font-size: var(--sc-item-brand-font-size, 1.6rem);
 					text-decoration: underline;
-        color: #232323;
+					color: var(--sc-item-brand-color, #232323);
 				}
 			}
 			> .tags {
@@ -104,24 +129,17 @@ const onRemove = () => {
 					font-size: var(--sc-item-tag-font-size, 1.4rem);
 					padding: var(--sc-item-tag-padding, 0 1rem);
 					text-align: center;
-        color: #8f8f8f;
-        background-color: #eee;
+					color: var(--sc-item-tag-color, #8f8f8f);
+					background-color: var(--sc-item-tag-bg-color, #eee);
 				}
 			}
-    > .size {
+			> .date {
 				display: flex;
 				align-items: center;
-      > .icon {
-        width: 2.4rem;
-        height: 2.4rem;
-        margin-right: 1rem;
-        color: #808080;
-      }
-
+				color: var(--sc-item-date-color, #808080);
 				> .text {
 					font-family: KaiseiOpti-Regular;
 					font-size: 1.4rem;
-        color: #808080;
 				}
 			}
 		}
@@ -133,6 +151,26 @@ const onRemove = () => {
 			align-items: var(--sc-item-right-align-items);
 			height: var(--sc-item-right-height);
 			margin-top: var(--sc-item-right-margin-top);
+			> .unshelve {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				> .title {
+					margin-bottom: 0.8rem;
+					font-family: KaiseiOpti-Bold;
+					font-size: 1.6rem;
+					color: #000;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 0.8rem;
+				}
+				> .tip {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					color: #585858;
+				}
+			}
 			> .amount {
 				font-family: KaiseiOpti-Bold;
 				font-size: var(--sc-item-amount-font-size, 2.2rem);
@@ -147,7 +185,7 @@ const onRemove = () => {
 				margin-top: var(--sc-item-remove-margin-top, 9rem);
 				display: flex;
 				align-items: center;
-      justify-content: center;
+				justify-content: flex-end;
 				user-select: none;
 				cursor: pointer;
 				> .icon {
@@ -196,5 +234,14 @@ const onRemove = () => {
 				}
 			}
 		}
+		&.disabled {
+			--sc-item-title-color: #cbcbcb;
+			--sc-item-brand-color: #cbcbcb;
+			--sc-item-date-color: #cbcbcb;
+			--sc-item-tag-color: #cbcbcb;
+			> img {
+				opacity: 0.5;
+			}
+		}
 	}
 </style>
--- a/src/views/shoppingCart/sc-list-null.vue
+++ b/src/views/shoppingCart/sc-list-null.vue
@@ -1,19 +1,26 @@
 <template>
 	<div class="sc-list-null">
-		<img src="@/assets/images/shopping-cart-null.png" alt="" />
-		<div class="title">Your Cart is empty</div>
-		<div class="tip">Discover new fashion assets and add them to your cart.</div>
-		<button custom v-show="showButton" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
+		<img v-if="nullImage === 'shopping-cart'" src="@/assets/images/shopping-cart-null.png" />
+		<img v-else-if="nullImage === 'brand'" src="@/assets/images/brand-null.png" />
+		<div class="title">{{ title }}</div>
+		<div class="tip">{{ tip }}</div>
+		<button custom v-show="showButton" @click="handleClick">{{ buttonText }}</button>
 	</div>
 </template>

 <script setup lang="ts">
 	import { computed, ref, onMounted } from 'vue'
 	const props = defineProps({
-		showButton: { type: Boolean, default: true }
+		nullImage: { type: String as () => 'shopping-cart' | 'brand', default: 'shopping-cart' },
+		title: { type: String, default: '' },
+		tip: { type: String, default: '' },
+		showButton: { type: Boolean, default: true },
+		buttonText: { type: String, default: 'EXPLORE DIGITAL ITEMS' }
 	})
-	const handleExploreClick = () => {
-		console.log('探索')
+	const emit = defineEmits(['explore'])
+	const handleClick = () => {
+		console.log('emit("explore")')
+		emit('explore')
 	}
 </script>

@@ -33,6 +40,7 @@
 		> .title {
 			font-family: KaiseiOpti-Bold;
 			font-size: 1.6rem;
+			line-height: 2.4rem;
 			color: #979797;
 			margin-bottom: 0.8rem;
 		}
@@ -40,6 +48,7 @@
 			width: 50%;
 			font-family: KaiseiOpti-Regular;
 			font-size: 1.4rem;
+			line-height: 2.4rem;
 			color: #979797;
 		}
 		> button {
@@ -49,7 +58,7 @@
 			font-family: KaiseiOpti-Medium;
 			font-size: 1.6rem;
 			color: #979797;
-			margin-top: 4.2rem;
+			margin-top: 3rem;
 		}
 	}
 </style>
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -12,7 +12,7 @@
 				<div class="left">
 					<el-checkbox
 						:model-value="allSelected"
-						:indeterminate="selectedCount === 0 ? false : selectedCount < list.length"
+						:indeterminate="selectedCount === 0 ? false : selectedCount < maxLength"
 						@click="handleAllAllClick"
 					/>
 					<span class="count">{{ selectedCount }}&nbsp;&nbsp;Selected</span>
@@ -37,29 +37,33 @@
 			</div>
 		</div>
 		<div class="list">
-			<sc-list-null v-show="list.length === 0" :show-button="!isMini" />
+			<sc-list-null
+				v-show="list.length === 0"
+				:show-button="!isMini"
+				title="Your Cart is empty"
+				tip="Discover new fashion assets and add them to your cart."
+			/>
 			<sc-item
 				v-for="v in list"
-				:key="v.id"
+				:key="v.cartId"
 				:info="v"
 				:show-tags="!isMini || isView"
-				:show-size="!isMini"
-				:show-size-date="!isMini"
+				:show-date="!isMini"
 				:show-remove="!isView"
 				@remove="handleRemoveClick"
+				:disabled="v.status !== SCART_STATUS.NORMAL"
 			>
-				<template #checkbox>
-					<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
+				<template #checkbox v-if="!isMini">
+					<el-checkbox
+						disabled
+						v-if="v.status !== SCART_STATUS.NORMAL"
+						style="opacity: 0; pointer-events: none"
+					/>
+					<el-checkbox v-else v-model="v.checked" @change="handleSelectedChange" />
 				</template>
 			</sc-item>
 		</div>
 		<div class="footer" v-if="isMini">
-			<div class="total size" v-show="isView">
-				<span class="label">Total File Size</span>
-				<span class="value"
-					>{{ allTotalSize.size }}<span>&nbsp;{{ allTotalSize.unit }}</span></span
-				>
-			</div>
 			<div class="total" v-show="list.length > 0 || isView">
 				<span class="label">Total</span>
 				<span class="value">${{ allAmount }}<span> HKD</span></span>
@@ -72,6 +76,9 @@
 </template>

 <script setup lang="ts">
+	import { ElMessageBox } from 'element-plus'
+	import { SCART_STATUS } from './index.d'
+	import { GetShoppingCartList, RemoveShoppingCartItem } from '@/api/shoppingCart'
 	import { computed, ref, onMounted } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
 	import scItem from './sc-item.vue'
@@ -82,24 +89,23 @@
 		isMini: { type: Boolean, default: false },
 		isView: { type: Boolean, default: false }
 	})
-	const allTotalSize = computed(() => {
-		const total = list.value.reduce((pre, cur) => pre + cur.fileSize, 0)
-		const str = FormatBytes(total, { unitBig: true })
-		return {
-			size: str.split(' ')[0],
-			unit: str.split(' ')[1]
-		}
-	})
 	const allAmount = computed(() => list.value.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
 	const selectedCount = computed(() => list.value.filter((v) => v.checked).length)
+	const maxLength = computed(() => list.value.filter((v) => v.status === SCART_STATUS.NORMAL).length)
 	const allSelected = computed(() =>
-		list.value.length === 0 ? false : list.value.every((v) => v.checked)
+		list.value.length === 0
+			? false
+			: list.value.filter((v) => v.status === SCART_STATUS.NORMAL).every((v) => v.checked)
 	)
-	const sortBy = ref('')
+	const sortBy = ref('DateAdded')
 	const sortByOptions = ref([
 		{
-			label: 'Default',
-			value: 'Default'
+			label: 'Best Selling',
+			value: 'BestSelling'
+		},
+		{
+			label: 'Price: Low to High',
+			value: 'PriceLowToHigh'
 		},
 		{
 			label: 'Selected First',
@@ -111,66 +117,46 @@
 		}
 	])

-	const list = ref([
-		{
-			id: 1,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
-			title: 'North Outfit Set',
-			brand: 'Roaming Clouds',
-			fileSize: 1024, // kb
-			date: '2026-5-20 5:20',
-			amount: 49.99,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: true
-		},
-		{
-			id: 2,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
-			title: 'Weekend Drift Co-ord',
-			brand: 'Urban Line Edit',
-			fileSize: 1225, // kb
-			date: '2026-5-21 13:14',
-			amount: 9.99,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: false
-		},
-		{
-			id: 3,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png',
-			title: 'Static Street Suit',
-			brand: 'Off Grid Apparel',
-			fileSize: 1024 * 18, // kb
-			date: '2026-5-21 13:14',
-			amount: 12,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: true
-		},
-		{
-			id: 4,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png',
-			title: 'Maison Contour Suit',
-			brand: 'Ivory Muse Studio',
-			fileSize: 100, // kb
-			date: '2026-5-21 13:14',
-			amount: 18,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
-			checked: true
-		},
-		{
-			id: 5,
-			url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png',
-			title: 'Prime Atelier Set',
-			brand: 'Ivory Muse Studio',
-			fileSize: 1024 * 24, // kb
-			date: '2026-5-21 13:14',
-			amount: 20,
-			tags: ['female', 'skirt', 'blouse', 'outwear'],
+	const list_ = ref([])
+	const list = computed(() => {
+		// if(sortBy.value === 'BestSelling') {
+		// 	return list_.value.sort((a, b) => b.sales - a.sales)
+		// }
+		if (sortBy.value === 'PriceLowToHigh') {
+			return list_.value.filter(() => true).sort((a, b) => a.amount - b.amount)
+		}
+		if (sortBy.value === 'SelectedFirst') {
+			return list_.value.filter(() => true).sort((a, b) => (b.checked ? 1 : 0) - (a.checked ? 1 : 0))
+		}
+		if (sortBy.value === 'DateAdded') {
+			return list_.value.filter(() => true).sort((a, b) => b.date - a.date)
+		}
+		return list_.value.filter(() => true)
+	})
+	const GetList = () => {
+		GetShoppingCartList(true).then((res: any) => {
+			const arr = []
+			res?.forEach((v, i) => {
+				const obj = {
+					cartId: v.cartId, //购物车ID
+					listingId: v.listingId, //资产ID
+					title: v.title, //标题
+					cover: v.cover, //封面
+					amount: v.price, //价格
+					status: v.status, //状态
+					date: v.addTime, //添加时间
 					checked: false
 				}
-	])
+				arr.push(obj)
+			})
+			list_.value = arr
+			handleSelectedChange()
+		})
+	}
+	GetList()
 	const handleAllAllClick = (checked?: boolean) => {
 		const checked_ = typeof checked === 'boolean' ? checked : !allSelected.value
-		list.value.forEach((v) => (v.checked = checked_))
+		list.value.forEach((v) => (v.checked = v.status === SCART_STATUS.NORMAL ? checked_ : false))
 		handleSelectedChange()
 	}
 	const handleSelectedChange = () => {
@@ -183,9 +169,14 @@
 	onMounted(() => {
 		handleSelectedChange()
 	})
-	const handleRemoveClick = (id: number) => {
-		list.value = list.value.filter((v) => v.id !== id)
-		handleSelectedChange()
+	const handleRemoveClick = (value: any) => {
+		ElMessageBox.confirm('Are you sure to remove this item?')
+			.then(() => {
+				RemoveShoppingCartItem({ listingId: value.listingId }).then(() => {
+					GetList()
+				})
+			})
+			.catch(() => {})
 	}
 	const handleExploreClick = () => {
 		console.log('探索')
--- a/src/views/wardrobe/Assets.vue
+++ b/src/views/wardrobe/Assets.vue
@@ -3,12 +3,14 @@
    <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>
+          <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">Categories</h3>
+          <h3 class="filter-group__title">{{ t('Wardrobe.assets.categories') }}</h3>
          <div class="filter-group__line"></div>
          <div class="filter-group__options">
            <button
@@ -28,7 +30,7 @@
        </section>

        <section class="filter-group">
-          <h3 class="filter-group__title">Gender</h3>
+          <h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
          <div class="filter-group__line"></div>
          <div class="filter-group__options">
            <button
@@ -57,10 +59,16 @@
        <div class="assets-toolbar__selection">
          <div class="select-count flex align-center">
            <img src="@/assets/images/wardrobe/select.png" />
-            <span class="assets-toolbar__count">{{ selectedCount }} Selected</span>
+            <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 class="assets-toolbar__link" @click="handleSelectAll(true)">Select All</div>
-          <div class="assets-toolbar__link" @click="handleSelectAll(false)">Deselect All</div>
        </div>

        <div class="assets-toolbar__actions">
@@ -70,7 +78,7 @@
            @click="handleDownloadSelected"
          >
            <SvgIcon name="downloadBtn" color="#fff" />
-            <span>Download Selected</span>
+            <span>{{ t('Wardrobe.assets.downloadSelected') }}</span>
          </div>
        </div>
      </div>
@@ -106,7 +114,9 @@
 </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'

@@ -116,26 +126,26 @@ interface FilterOption {
 }

 const router = useRouter()
+const { t } = useI18n({ useScope: 'global' })
+const clothesCategories = useClothesCategories()

-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 categories = computed<FilterOption[]>(() => [
+  { label: t('Wardrobe.common.all'), value: 'all' },
+  ...clothesCategories.value.map((option) => ({
+    label: option.label,
+    value: option.value
+  }))
+])

-const genders: FilterOption[] = [
-  { label: 'All', value: 'all' },
-  { label: 'Male', value: 'male' },
-  { label: 'Female', value: 'female' }
-]
+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 categoryValues = categories
-  .filter((option) => option.value !== 'all')
-  .map((option) => option.value)
+const categoryValues = computed(() =>
+  categories.value.filter((option) => option.value !== 'all').map((option) => option.value)
+)

 const filters = reactive({
  categories: ['skirt'] as string[],
@@ -209,8 +219,8 @@ const selectedCount = computed(() => {
 })
 const allCategoriesSelected = computed(() => {
  return (
-    filters.categories.length === categoryValues.length &&
-    categoryValues.every((value) => filters.categories.includes(value))
+    filters.categories.length === categoryValues.value.length &&
+    categoryValues.value.every((value) => filters.categories.includes(value))
  )
 })

@@ -224,7 +234,7 @@ const isCategoryActive = (value: string) => {

 const toggleCategory = (value: string) => {
  if (value === 'all') {
-    filters.categories = allCategoriesSelected.value ? [] : [...categoryValues]
+    filters.categories = allCategoriesSelected.value ? [] : [...categoryValues.value]
    return
  }

@@ -241,7 +251,7 @@ const setGender = (value: string) => {
 }

 const clearFilters = () => {
-  filters.categories = [...categoryValues]
+  filters.categories = [...categoryValues.value]
  filters.gender = 'all'
 }

@@ -544,7 +554,6 @@ onUnmounted(() => {
        }
      }
    }
-
  }
 }
 </style>
--- a/src/views/wardrobe/Empty.vue
+++ b/src/views/wardrobe/Empty.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n({ useScope: 'global' })
+
 const emit = defineEmits<{
  (event: 'explore'): void
 }>()
@@ -8,12 +12,12 @@ const emit = defineEmits<{
  <div class="wardrobe-empty flex flex-col flex-center">
    <img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" />

-    <h2 class="wardrobe-empty__title">Nothing in Wardrobe yet</h2>
+    <h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
    <p class="wardrobe-empty__description">
-      Explore the digital item and add pieces to your collection.
+      {{ t('Wardrobe.empty.description') }}
    </p>
    <button class="wardrobe-empty__button" type="button" @click="emit('explore')">
-      Explore Digital Items
+      {{ t('Wardrobe.empty.action') }}
    </button>
  </div>
 </template>
--- a/src/views/wardrobe/Orders.vue
+++ b/src/views/wardrobe/Orders.vue
@@ -33,17 +33,17 @@
              :style="{ backgroundColor: item.color }"
            ></span>
            <span v-if="getExtraCount(order)" class="order-card__extra">
-              +{{ getExtraCount(order) }} more
+              {{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
            </span>
          </div>

          <div class="order-card__status" :class="`is-${order.status}`">
-            {{ order.status.toUpperCase() }}
+            {{ getStatusBadgeLabel(order.status) }}
          </div>

          <div class="order-card__amount">
            <span>${{ order.amount }}</span>
-            <small>HKD</small>
+            <small>{{ t('Wardrobe.common.currencyHkd') }}</small>
          </div>

          <button
@@ -52,9 +52,7 @@
            :class="{ 'is-primary': order.status === 'unpaid' }"
          >
            <svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
-            <span v-if="order.status === 'paid'">Invoice</span>
-            <span v-else-if="order.status === 'unpaid'">Complete Payment</span>
-            <span v-else>Buy Again</span>
+            <span>{{ getOrderActionLabel(order.status) }}</span>
          </button>
        </div>

@@ -65,8 +63,7 @@
            class="order-card__item"
            :style="{ '--order-item-placeholder': item.color }"
            :info="item"
-            :show-size="false"
-            :show-size-date="false"
+            :show-date="false"
            :show-remove="false"
            order-actions-layout
          />
@@ -77,7 +74,9 @@
 </template>

 <script setup lang="ts">
-import { computed, shallowRef } from 'vue'
+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'

 type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
@@ -110,13 +109,14 @@ interface OrderRecord {
 }

 const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
+const { t } = useI18n({ useScope: 'global' })

-const statusOptions: StatusOption[] = [
-  { key: 'all', label: 'All' },
-  { key: 'paid', label: 'Paid' },
-  { key: 'unpaid', label: 'Unpaid' },
-  { key: 'cancelled', label: 'Canceled' }
-]
+const statusOptions = computed<StatusOption[]>(() => [
+  { key: 'all', label: t('Wardrobe.orders.statuses.all') },
+  { key: 'paid', label: t('Wardrobe.orders.statuses.paid') },
+  { key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid') },
+  { key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled') }
+])

 const createOrderItem = (
  id: number,
@@ -202,6 +202,30 @@ const toggleOrder = (orderId: string) => {
 const getExtraCount = (order: OrderRecord) => {
  return Math.max(order.items.length - 2, 0)
 }
+
+const getStatusBadgeLabel = (status: ActualOrderStatus) => {
+  return t(`Wardrobe.orders.statusBadges.${status}`)
+}
+
+const getOrderActionLabel = (status: ActualOrderStatus) => {
+  if (status === 'paid') return t('Wardrobe.orders.actions.invoice')
+  if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
+  return t('Wardrobe.orders.actions.buyAgain')
+}
+
+const orderParams =ref({
+  page: 1,
+  pageSize: 10,
+  status: ''
+})
+const fetchAllOrders = () => {
+  fetchMyOrders(orderParams.value)
+}
+
+onMounted(() => {
+  fetchAllOrders()
+})
+
 </script>

 <style lang="less" scoped>
--- a/src/views/wardrobe/index.vue
+++ b/src/views/wardrobe/index.vue
@@ -1,13 +1,13 @@
 <template>
  <div class="wardrobe-page">
    <div 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>
+      <div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
+      <div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
    </div>

    <div class="wardrobe-shell">
      <div class="wardrobe-tabs">
-        <div class="wardrobe-tabs__nav" role="tablist" aria-label="Wardrobe tabs">
+        <div class="wardrobe-tabs__nav" role="tablist" :aria-label="t('Wardrobe.tabs.ariaLabel')">
          <button
            v-for="tab in tabs"
            :key="tab.key"
@@ -23,8 +23,8 @@
        </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">
+          <div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
+          <el-select v-model="activeSort" :placeholder="t('Wardrobe.sort.placeholder')">
            <el-option
              v-for="option in sortOptions"
              :key="option.value"
@@ -42,6 +42,7 @@
 </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'

@@ -57,31 +58,33 @@ interface SortOption {
  value: number
 }

-const tabs: TabItem[] = [
+const { t } = useI18n({ useScope: 'global' })
+
+const tabs = computed<TabItem[]>(() => [
  {
    key: 'assets',
-    label: 'Assets'
+    label: t('Wardrobe.tabs.assets')
  },
  {
    key: 'orders',
-    label: 'Orders'
+    label: t('Wardrobe.tabs.orders')
  }
-]
+])

-const sortOptions: SortOption[] = [
+const sortOptions = computed<SortOption[]>(() => [
  {
-    label: 'Default',
+    label: t('Wardrobe.sort.default'),
    value: 0
  },
  {
-    label: 'Date Added',
+    label: t('Wardrobe.sort.dateAdded'),
    value: 1
  },
  {
-    label: 'Selected First',
+    label: t('Wardrobe.sort.selectedFirst'),
    value: 2
  }
-]
+])

 const activeTab = shallowRef<WardrobeTab>('assets')
 const activeSort = shallowRef(1)
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -66,11 +66,10 @@ export default defineConfig(({ mode }) => {
 				overlay: true
 			},
 			proxy: {
-				'/api': {
-					//'/api'是自行设置的请求前缀
+				'/buyer': {
 					target: env.VITE_APP_URL,
 					changeOrigin: true, //用于控制请求头中的host值
-					rewrite: (path) => path.replace(/^\/api/, '/api') //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
+					rewrite: (path) => path.replace(/^\/buyer/, '/buyer') //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
 				}
 			}
 		}
Author	SHA1	Message	Date
李志鹏	3de38d2856	更改loading样式	2026-05-21 15:13:18 +08:00
李志鹏	2f1cc8d55d	1	2026-05-21 14:58:52 +08:00
李志鹏	5d0de56c1a	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front	2026-05-21 14:58:08 +08:00
李志鹏	1b32002af5	创建订单	2026-05-21 14:58:07 +08:00
X1627315083@163.com	59803cf2ea	fix	2026-05-21 14:56:37 +08:00
zhangyahui	d772cae6bc	feat: 创建订单接口	2026-05-21 14:55:31 +08:00
X1627315083@163.com	8c080d3e22	Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Aida_Purchaser_Front	2026-05-21 14:36:33 +08:00
李志鹏	4be692bb29	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front	2026-05-21 14:36:30 +08:00
X1627315083@163.com	7bfae7d024	fix	2026-05-21 14:36:29 +08:00
李志鹏	e7957532e8	购物车	2026-05-21 14:36:29 +08:00
zhangyahui	338ee24da2	Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Aida_Purchaser_Front	2026-05-21 13:44:58 +08:00
zhangyahui	81b907562e	feat: 服装分类	2026-05-21 13:44:57 +08:00
李志鹏	31de24cc2b	购物车	2026-05-21 11:46:04 +08:00
李志鹏	c18b424f99	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front	2026-05-21 11:36:15 +08:00
李志鹏	b9be27ab85	aaa	2026-05-21 11:36:14 +08:00
zhangyahui	5476a1f69d	Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Aida_Purchaser_Front	2026-05-21 11:33:32 +08:00
zhangyahui	9f620ab9d5	feat: 我的衣柜接口	2026-05-21 11:32:52 +08:00
X1627315083@163.com	e418bf80ad	brand对接接口	2026-05-21 11:25:11 +08:00
李志鹏	2346e079a1	登录、退出登录	2026-05-21 11:04:12 +08:00
李志鹏	6772bf0e90	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front	2026-05-21 10:48:55 +08:00
李志鹏	26dfbd9bb5	接口配置	2026-05-21 10:48:53 +08:00
X1627315083@163.com	8c8ec7846d	调整添加购物车逻辑	2026-05-12 17:02:49 +08:00
X1627315083@163.com	8d441766c5	fix	2026-05-12 14:13:56 +08:00
X1627315083@163.com	bf907a1378	digital空状态	2026-05-12 13:35:53 +08:00
李志鹏	de6295f2af	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front	2026-05-12 13:32:48 +08:00
李志鹏	3e0a7b8928	导航栏激活	2026-05-12 13:32:47 +08:00
X1627315083@163.com	09909552bc	digital 过滤调整	2026-05-12 13:27:30 +08:00
李志鹏	baf57515c0	登录还原	2026-05-12 11:10:42 +08:00
X1627315083@163.com	b8c844363c	brand页面交互调整	2026-05-11 16:16:59 +08:00
李志鹏	87b071c319	22	2026-05-11 14:34:37 +08:00
李志鹏	bdc824e1f6	11	2026-05-11 14:22:52 +08:00
李志鹏	1c7b2d32a6	空列表	2026-05-11 14:21:42 +08:00
李志鹏	cffd554365	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front	2026-05-11 13:56:12 +08:00
李志鹏	33043eedf1	home修改	2026-05-11 13:56:10 +08:00