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

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>