feat: 更新环境配置，修改 API 地址，添加格式化金额功能，优化 RWA 交易视图

src/views/trade-rwa/index.vue

@@ -1,26 +1,98 @@
 <script lang='ts' setup>
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 import { client, safeClient } from "@/api";
 
 const props = defineProps<{
   id: string;
 }>();
 
-const { data } = safeClient(client.api.rwa.subscription({ orderId: props.id }).get());
+const { data } = safeClient(client.api.rwa.subscription.available_editions({ editionId: props.id }).get());
 </script>
 
 <template>
   <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>RWA Trade</ion-title>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" text="" />
+        <ion-title>
+          {{ data?.product.code }}
+        </ion-title>
       </ion-toolbar>
+      <ui-tabs size="small" class="px-4">
+        <ui-tab-pane name="overview" title="Overview" />
+        <ui-tab-pane name="moment" title="Moment" />
+      </ui-tabs>
     </ion-header>
-    <ion-content :fullscreen="true">
-      <ion-padding>
-        RWA Trade Page
-      </ion-padding>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div class="mt-5">
+        <div class="flex items-center space-x-2">
+          <CryptocurrencyColorNuls class="text-2xl" />
+          <div class="mr-2 text-lg font-semibold">
+            {{ data?.product.name }}
+          </div>
+        </div>
+        <ion-grid class="mt-5 text-sm space-y-5">
+          <ion-row>
+            <ion-col>
+              <div class="label">
+                产品编号
+              </div>
+              <div>{{ data?.product.code }}</div>
+            </ion-col>
+            <ion-col>
+              <div class="label">
+                估值
+              </div>
+              <div>${{ formatAmount(data?.product.estimatedValue) }}</div>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              <div class="label">
+                总发行量
+              </div>
+              <div>{{ Number(data?.totalSupply) }}份</div>
+            </ion-col>
+            <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-col>
+              <div class="label">
+                认购截止时间
+              </div>
+              <div>{{ useDateFormat(data?.subscriptionDeadline || '', 'YYYY/MM/DD') }}</div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <div class="mt-5">
+          <div class="font-semibold">
+            About
+          </div>
+          <div class="text-xs mt-2">
+            {{ data?.product.description || 'No description available.' }}
+          </div>
+        </div>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
-<style lang='css' scoped></style>
+<style scoped>
+@reference "tailwindcss";
+
+.label {
+  @apply text-gray-500 mb-1;
+}
+</style>