feat: 更新 RWA 数据类型，优化订阅相关字段，添加 RWA 详情组件

src/views/market/components/rwa-list.vue

@@ -4,7 +4,7 @@ import CryptocurrencyColorAppc from "~icons/cryptocurrency-color/appc";
 import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 
 defineProps<{
-  data: RwaData["data"];
+  data: RwaData[];
 }>();
 
 const { t } = useI18n();

src/views/market/index.vue

@@ -12,7 +12,7 @@ const [query] = useResetRef<AvailableSubscriptionBody>({
   offset: 0,
   categoryId: "",
 });
-const rwaData = ref<RwaData["data"]>([]);
+const rwaData = ref<RwaData[]>([]);
 const isFinished = ref(false);
 
 async function fetchRwaData() {

src/views/trade-rwa/components/about.vue

@@ -0,0 +1,23 @@
+<script lang='ts' setup>
+import type { RwaData } from "@/api/types";
+
+const props = defineProps<{
+  data: RwaData | null;
+}>();
+</script>
+
+<template>
+  <div class="mt-2">
+    <!-- document -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        相关文档
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.product.proofDocuments }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>

src/views/trade-rwa/components/base.vue

@@ -0,0 +1,105 @@
+<script lang='ts' setup>
+import type { RwaData } from "@/api/types";
+
+const props = defineProps<{
+  data: RwaData | null;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="mt-2">
+    <!-- Rwa about -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        {{ t('market.tradeRwa.about') }}
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.product.description || t('market.tradeRwa.noDescription') }}
+      </div>
+    </div>
+
+    <!-- Rwa fields -->
+    <ion-grid class="mt-5 text-sm space-y-5">
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.productCode') }}
+          </div>
+          <div>{{ data?.product.code }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.valuation') }}
+          </div>
+          <div>${{ formatAmount(data?.product.estimatedValue) }}</div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.unitPrice') }}
+          </div>
+          <div>${{ formatAmount(data?.unitPrice) }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.totalSupply') }}
+          </div>
+          <div>{{ Number(data?.totalSupply) }}{{ t('market.tradeRwa.units.shares') }}</div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.perUserLimit') }}
+          </div>
+          <div>{{ Number(data?.perUserLimit) }}{{ t('market.tradeRwa.units.shares') }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.launchDate') }}
+          </div>
+          <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD HH:mm') }}</div>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.subscriptionStartDate') }}
+          </div>
+          <div>{{ useDateFormat(data?.subscriptionStartDate || '', 'YYYY/MM/DD HH:mm') }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.subscriptionEndDate') }}
+          </div>
+          <div>{{ useDateFormat(data?.subscriptionEndDate || '', 'YYYY/MM/DD HH:mm') }}</div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+    <!-- Rwa status -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        资产状态
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.status }}
+      </div>
+    </div>
+
+    <!-- Rwa status history -->
+    <div class="mt-5">
+      <div class="font-semibold">
+        状态历史
+      </div>
+      <div class="text-xs mt-2">
+        {{ data?.status }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>

src/views/trade-rwa/index.vue

@@ -1,7 +1,10 @@
 <script lang='ts' setup>
 import { toastController } from "@ionic/vue";
 import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+import IcSharpEditNote from "~icons/ic/sharp-edit-note";
 import { client, safeClient } from "@/api";
+import RwaAbout from "./components/about.vue";
+import RwaBase from "./components/base.vue";
 
 const props = defineProps<{
   id: string;
@@ -31,88 +34,44 @@ async function handleSubscribe(val: number) {
 
 <template>
   <ion-page>
-    <ion-header class="ion-no-border">
+    <ion-header>
       <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="t('market.tradeRwa.tabs.overview')" />
-        <ui-tab-pane name="moment" :title="t('market.tradeRwa.tabs.moment')" />
-      </ui-tabs>
     </ion-header>
     <ion-content :fullscreen="true" class="ion-padding">
-      <div class="mt-5">
+      <div>
         <div class="flex items-center space-x-2">
-          <CryptocurrencyColorNuls class="text-2xl" />
-          <div class="mr-2 text-lg font-semibold">
-            {{ data?.product.name }}
+          <CryptocurrencyColorNuls class="text-3xl" />
+
+          <div class="mr-2">
+            <div class="text-lg font-semibold">
+              {{ data?.product.name }}
+            </div>
+            <div class="text-xs text-gray-500 font-semibold">
+              {{ data?.product.category?.name }}
+            </div>
           </div>
         </div>
-        <ion-grid class="mt-5 text-sm space-y-5">
-          <ion-row>
-            <ion-col>
-              <div class="label">
-                {{ t('market.tradeRwa.fields.productCode') }}
-              </div>
-              <div>{{ data?.product.code }}</div>
-            </ion-col>
-            <ion-col>
-              <div class="label">
-                {{ t('market.tradeRwa.fields.valuation') }}
-              </div>
-              <div>${{ formatAmount(data?.product.estimatedValue) }}</div>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col>
-              <div class="label">
-                {{ t('market.tradeRwa.fields.unitPrice') }}
-              </div>
-              <div>${{ formatAmount(data?.unitPrice) }}</div>
-            </ion-col>
-            <ion-col>
-              <div class="label">
-                {{ t('market.tradeRwa.fields.totalSupply') }}
-              </div>
-              <div>{{ Number(data?.totalSupply) }}{{ t('market.tradeRwa.units.shares') }}</div>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col>
-              <div class="label">
-                {{ t('market.tradeRwa.fields.perUserLimit') }}
-              </div>
-              <div>{{ Number(data?.perUserLimit) }}{{ t('market.tradeRwa.units.shares') }}</div>
-            </ion-col>
-            <ion-col>
-              <div class="label">
-                {{ t('market.tradeRwa.fields.launchDate') }}
-              </div>
-              <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD') }}</div>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col>
-              <div class="label">
-                {{ t('market.tradeRwa.fields.subscriptionDeadline') }}
-              </div>
-              <div>{{ useDateFormat(data?.subscriptionDeadline || '', 'YYYY/MM/DD') }}</div>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <div class="mt-5">
-          <div class="font-semibold">
-            {{ t('market.tradeRwa.about') }}
-          </div>
-          <div class="text-xs mt-2">
-            {{ data?.product.description || t('market.tradeRwa.noDescription') }}
+        <div class="flex items-center my-3">
+          <IcSharpEditNote class="inline-block text-xl mr-1 text-text-500" />
+          <div class="text-xs">
+            编辑资产
           </div>
         </div>
       </div>
+
+      <ui-tabs size="small">
+        <ui-tab-pane name="overview" :title="t('market.tradeRwa.tabs.overview')">
+          <RwaBase :data="data" />
+        </ui-tab-pane>
+        <ui-tab-pane name="about" title="相关文档">
+          <RwaAbout :data="data" />
+        </ui-tab-pane>
+      </ui-tabs>
     </ion-content>
 
     <ion-footer>