feat: 更新 API 类型和组件，重命名市场为交易，添加操作包装器组件

src/views/market/index.vue

@@ -5,14 +5,14 @@
   <IonPage>
     <IonHeader>
       <IonToolbar>
-        <IonTitle>Market</IonTitle>
+        <IonTitle>Trade</IonTitle>
       </IonToolbar>
     </IonHeader>
     <IonContent :fullscreen="true">
       <IonHeader collapse="condense">
         <IonToolbar>
           <IonTitle size="large">
-            Market
+            Trade
           </IonTitle>
         </IonToolbar>
       </IonHeader>

src/views/trade/components/operation-wrapper.vue

@@ -0,0 +1,76 @@
+<script lang='ts' setup>
+import { cartOutline } from "ionicons/icons";
+
+const model = defineModel<"sale" | "buy" | null>();
+</script>
+
+<template>
+  <div v-if="model === null" class="operation-container">
+    <div class="wrapper" />
+
+    <div class="box">
+      <div class="card sale" @click="model = 'sale'">
+        <ion-icon :icon="cartOutline" />
+        <text>My Sale</text>
+      </div>
+      <div class="card buy" @click="model = 'buy'">
+        <ion-icon :icon="cartOutline" />
+        <text>My Purchase</text>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped>
+.operation-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--ion-color-dark);
+  opacity: 0.3;
+}
+.box {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateY(-30%) translateX(-50%);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100px;
+}
+.card {
+  width: 94px;
+  height: 97px;
+  border-radius: 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+}
+.card ion-icon {
+  font-size: 1.7rem;
+}
+.card text {
+  margin-top: 10px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+.card.sale {
+  background: linear-gradient(231deg, #8b6bff 6%, #49eeff 104%);
+}
+.card.buy {
+  background: linear-gradient(231deg, #ff6b6b 6%, #ffcc00 104%);
+  margin-left: 20px;
+}
+</style>

src/views/trade/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { cartOutline } from "ionicons/icons";
+import OperationWrapper from "./components/operation-wrapper.vue";
+
+const current = ref<"sale" | "buy" | null>(null);
 </script>
 
 <template>
@@ -9,13 +13,10 @@
       </IonToolbar>
     </IonHeader>
     <IonContent :fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle size="large">
-            Market
-          </IonTitle>
-        </IonToolbar>
-      </IonHeader>
+      <OperationWrapper v-model="current" />
     </IonContent>
   </IonPage>
 </template>
+
+<style scoped>
+</style>

src/views/user/settings.vue

@@ -11,7 +11,7 @@ const userProfile = ref<UserProfileData | null>(null);
 async function getUserProfile() {
   const { data } = await client.api.user.profile.get();
   if (data) {
-    userProfile.value = data;
+    userProfile.value = data.userProfile;
   }
 }
 
@@ -116,19 +116,19 @@ onMounted(() => {
           <ui-avatar class="size-25" />
         </div>
         <div class="mt-4 text-lg font-semibold">
-          {{ userProfile?.fullName || 'User Name' }}
+          {{ userProfile?.nickname || 'User Name' }}
         </div>
       </div>
 
       <!-- User Info List -->
       <ion-list class="mt-5">
-        <ion-item button @click="handleEditField('fullName', 'Full Name')">
+        <ion-item button @click="handleEditField('nickname', 'Nickname')">
           <ion-label>
             <p class="text-xs text-text-400">
               Full Name
             </p>
             <h2 class="mt-1">
-              {{ userProfile?.fullName || 'Not set' }}
+              {{ userProfile?.nickname || 'Not set' }}
             </h2>
           </ion-label>
         </ion-item>

src/views/withdraw/index.vue

@@ -40,7 +40,7 @@ function handleCurrentChange() {
 }
 
 async function onSubmit() {
-  const { data } = await safeClient(client.api.asset.withdraw.post(form.value));
+  const { data } = await safeClient(client.api.withdraw.post(form.value));
 }
 </script>