feat: 添加 SubscribeRwa 组件，优化 RWA 申购功能并更新相关类型定义

src/views/trade-rwa/index.vue

@@ -47,26 +47,34 @@ const { data } = safeClient(client.api.rwa.subscription.available_editions({ edi
             </ion-col>
           </ion-row>
           <ion-row>
+            <ion-col>
+              <div class="label">
+                单价
+              </div>
+              <div>${{ formatAmount(data?.unitPrice) }}</div>
+            </ion-col>
             <ion-col>
               <div class="label">
                 总发行量
               </div>
               <div>{{ Number(data?.totalSupply) }}份</div>
             </ion-col>
+          </ion-row>
+          <ion-row>
             <ion-col>
               <div class="label">
                 每人限量
               </div>
               <div>{{ Number(data?.perUserLimit) }}份</div>
             </ion-col>
-          </ion-row>
-          <ion-row>
             <ion-col>
               <div class="label">
                 发行时间
               </div>
               <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD') }}</div>
             </ion-col>
+          </ion-row>
+          <ion-row>
             <ion-col>
               <div class="label">
                 认购截止时间
@@ -90,12 +98,13 @@ const { data } = safeClient(client.api.rwa.subscription.available_editions({ edi
     <ion-footer>
       <ion-toolbar class="ion-padding-horizontal ui-toolbar">
         <div class="flex justify-center my-2 gap-5">
-          <ion-button shape="round" expand="block" color="success">
+          <ion-button id="open-modal" shape="round" expand="block" color="success">
             申购
           </ion-button>
-          <ion-button shape="round" expand="block" color="danger">
-            赎回
-          </ion-button>
+
+          <ion-modal trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
+            <subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" />
+          </ion-modal>
         </div>
       </ion-toolbar>
     </ion-footer>

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

@@ -1,11 +1,36 @@
 <script lang='ts' setup>
+import type { Animation } from "@ionic/vue";
+import { createAnimation } from "@ionic/vue";
 import { cartOutline } from "ionicons/icons";
 
 const model = defineModel<"sale" | "buy" | null>();
+
+const operationInst = useTemplateRef<HTMLDivElement>("operationInst");
+const targetIsVisible = useElementVisibility(operationInst);
+const animation = ref<Animation | null>(null);
+
+watch(targetIsVisible, (visible) => {
+  if (visible) {
+    animation.value?.easing("ease-in")
+      .fromTo("opacity", "0", "1")
+      .play();
+  }
+  else {
+    animation.value?.easing("ease-out")
+      .fromTo("opacity", "1", "0")
+      .play();
+  }
+});
+
+onMounted(() => {
+  animation.value = createAnimation()
+    .addElement(operationInst.value!)
+    .duration(500);
+});
 </script>
 
 <template>
-  <div v-if="model === null" class="operation-container">
+  <div v-if="model === null" ref="operationInst" class="operation-container">
     <div class="wrapper" />
 
     <div class="box">

src/views/trade/index.vue

@@ -3,18 +3,17 @@ import { cartOutline } from "ionicons/icons";
 import OperationWrapper from "./components/operation-wrapper.vue";
 
 const { t } = useI18n();
-const current = ref<"sale" | "buy" | null>(null);
 </script>
 
 <template>
   <IonPage>
-    <IonHeader>
-      <IonToolbar>
+    <IonHeader class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
         <IonTitle>{{ t('tabs.trade') }}</IonTitle>
-      </IonToolbar>
+      </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true">
-      <OperationWrapper v-model="current" />
+      <!-- <OperationWrapper v-model="current" /> -->
     </IonContent>
   </IonPage>
 </template>