feat: 添加我的订阅页面及相关组件，优化路由配置

src/router/index.ts

@@ -113,8 +113,21 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/trade-settings/my-subscribe",
-    component: () => import("@/views/trade-settings/my-subscribe/index.vue"),
+    component: () => import("@/views/trade-settings/my-subscribe/outlet.vue"),
     meta: { requiresAuth: true },
+    children: [
+      {
+        path: "",
+        component: () => import("@/views/trade-settings/my-subscribe/index.vue"),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: ":id",
+        props: true,
+        component: () => import("@/views/trade-settings/my-subscribe/detail.vue"),
+        meta: { requiresAuth: true },
+      },
+    ],
   },
   {
     path: "/trade-settings/my-issues",

src/views/trade-settings/my-issues/outlet.vue

@@ -5,7 +5,7 @@ const { t } = useI18n();
 <template>
   <IonPage>
     <IonContent :fullscreen="true" class="ion-padding">
-      <ion-router-outlet />
+      <router-view />
     </IonContent>
   </IonPage>
 </template>

src/views/trade-settings/my-subscribe/components/about.vue

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

src/views/trade-settings/my-subscribe/components/base.vue

@@ -0,0 +1,60 @@
+<script lang='ts' setup>
+import type { MyIssueRwaData } from "@/api/types";
+
+const props = defineProps<{
+  data: MyIssueRwaData | 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?.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?.code }}</div>
+        </ion-col>
+        <ion-col>
+          <div class="label">
+            {{ t('market.tradeRwa.fields.valuation') }}
+          </div>
+          <div>${{ formatAmount(data?.estimatedValue) }}</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>
+  </div>
+</template>
+
+<style lang='css' scoped></style>

src/views/trade-settings/my-subscribe/components/my-subscribe-list.vue

@@ -5,6 +5,12 @@ import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 defineProps<{
   data: MySubscribeRwaData[];
 }>();
+
+const router = useRouter();
+
+function gotoMySubscribe(id: string) {
+  router.push(`/trade-settings/my-subscribe/${id}`);
+}
 </script>
 
 <template>
@@ -31,7 +37,7 @@ defineProps<{
         </ion-col>
       </ion-row>
     </ion-grid>
-    <div v-for="item in data" :key="item.id">
+    <div v-for="item in data" :key="item.id" @click="gotoMySubscribe(item.id)">
       <ion-grid>
         <ion-row class="ion-align-items-center my-5">
           <ion-col size="6" class="flex items-center">

src/views/trade-settings/my-subscribe/detail.vue

@@ -0,0 +1,98 @@
+<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;
+}>();
+
+const { t } = useI18n();
+const router = useRouter();
+
+const model = useTemplateRef<ModalInstance>("model");
+const { data } = safeClient(client.api.rwa.issuance.products({ id: props.id }).get());
+
+async function handleSubscribe(val: number) {
+  await safeClient(client.api.rwa.subscription.apply.post({
+    editionId: props.id,
+    quantity: String(val),
+  }));
+  const toast = await toastController.create({
+    message: t("market.tradeRwa.subscribeSuccess"),
+    duration: 2000,
+    position: "bottom",
+    color: "success",
+  });
+
+  await toast.present();
+  model.value?.$el.dismiss();
+}
+function gotoEdit() {
+  router.push({ name: "trade-rwa-edit" });
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" text="" />
+        <ion-title>
+          {{ data?.code }}
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true" class="ion-padding">
+      <div>
+        <div class="flex items-center space-x-2">
+          <CryptocurrencyColorNuls class="text-3xl" />
+
+          <div class="mr-2">
+            <div class="text-lg font-semibold">
+              {{ data?.name }}
+            </div>
+            <div class="text-xs text-gray-500 font-semibold">
+              {{ data?.category?.name }}
+            </div>
+          </div>
+        </div>
+        <div class="flex items-center my-3" @click="gotoEdit">
+          <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-page>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.label {
+  @apply text-gray-500 mb-1;
+}
+
+ion-button {
+  width: 100%;
+  min-height: 40px;
+}
+
+ion-button::part(native) {
+  min-height: 40px;
+}
+</style>

src/views/trade-settings/my-subscribe/outlet.vue

@@ -0,0 +1,12 @@
+<script lang='ts' setup>
+</script>
+
+<template>
+  <IonPage>
+    <IonContent :fullscreen="true" class="ion-padding">
+      <router-view />
+    </IonContent>
+  </IonPage>
+</template>
+
+<style lang='css' scoped></style>