feat: 添加 useRouterBack 组合函数，更新相关组件以支持返回功能，优化 API 类型定义，更新依赖版本

src/api/types.ts

@@ -51,7 +51,7 @@ export type RwaData = Treaty.Data<typeof client.api.rwa.subscription.available_e
 
 export type MyIssueRwaData = Treaty.Data<typeof client.api.rwa.issuance.products.get>["data"][number];
 
-export type MySubscribeRwaData = Treaty.Data<typeof client.api.rwa.subscription.my_subscriptions.get>;
+export type MySubscribeRwaData = Treaty.Data<typeof client.api.rwa.subscription.my_subscriptions.get>["data"][number];
 
 export type MySubscribeRwaBody = TreatyQuery<typeof client.api.rwa.subscription.my_subscriptions.get>;
 

src/composables/useRouterBack.ts

@@ -0,0 +1,10 @@
+import { router } from "@/router";
+
+export function useRouterBack() {
+  if (window.history.state.back) {
+    router.back();
+  }
+  else {
+    router.replace("/");
+  }
+}

src/router/auth.ts

@@ -1,20 +1,6 @@
 import type { RouteRecordRaw } from "vue-router";
 
 const routes: Array<RouteRecordRaw> = [
-  // {
-  //   path: "/auth",
-  //   component: () => import("@/views/auth/index.vue"),
-  //   children: [
-  //     {
-  //       path: "/auth/login",
-  //       component: () => import("@/views/auth/login/index.vue"),
-  //     },
-  //     {
-  //       path: "/auth/signup",
-  //       component: () => import("@/views/auth/signup/index.vue"),
-  //     },
-  //   ],
-  // },
   {
     path: "/auth/login",
     component: () => import("@/views/auth/login/index.vue"),

src/views/auth/login/index.vue

@@ -34,6 +34,9 @@ async function handleSignInPhoneNumber(value: PhoneNumberVerifyClient) {
     useNavigateToRedirect(route.query.redirect as string);
   }
 }
+function onClose() {
+  useRouterBack();
+}
 </script>
 
 <template>
@@ -41,7 +44,7 @@ async function handleSignInPhoneNumber(value: PhoneNumberVerifyClient) {
     <IonHeader class="ion-no-border">
       <IonToolbar class="ui-toolbar">
         <ion-buttons slot="start">
-          <ion-button @click="$router.back()">
+          <ion-button @click="onClose">
             <ion-icon slot="icon-only" :icon="closeOutline" />
           </ion-button>
         </ion-buttons>

src/views/deposit/fiat.vue

@@ -1,7 +1,7 @@
 <script lang='ts' setup>
 import type { DepositFiatBody } from "@/api/types";
-import { toastController } from "@ionic/vue";
-import { client } from "@/api";
+import { loadingController, toastController } from "@ionic/vue";
+import { client, safeClient } from "@/api";
 import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";
 
 const { t } = useI18n();
@@ -12,6 +12,7 @@ const form = ref<DepositFiatBody>({
   paymentChannel: PaymentChannelEnum.FIAT,
 });
 const inputInstance = useTemplateRef<InputInstance>("inputInstance");
+const router = useRouter();
 
 function markTouched() {
   inputInstance.value?.$el.classList.add("ion-touched");
@@ -31,8 +32,11 @@ function validate(value: string) {
 }
 
 async function onSubmit() {
-  const { data, status } = await client.api.deposit.fiat.post(form.value);
-  if (status === 200) {
+  const loading = await loadingController.create({
+    message: "提交中...",
+  });
+  await loading.present();
+  await safeClient(client.api.deposit.fiat.post(form.value)).finally(async () => {
     const toast = await toastController.create({
       message: t("recharge.fiat.submitSuccess"),
       duration: 1500,
@@ -40,7 +44,9 @@ async function onSubmit() {
     });
 
     await toast.present();
-  }
+    loading.dismiss();
+    router.back();
+  });
 }
 </script>
 

src/views/issue/issuing-apply/done.vue

@@ -2,6 +2,11 @@
 import { ribbonOutline } from "ionicons/icons";
 
 const { t } = useI18n();
+const router = useRouter();
+
+function gotoMyIssues() {
+  router.replace("/trade-settings/my-issues");
+}
 </script>
 
 <template>
@@ -12,11 +17,7 @@ const { t } = useI18n();
       :description="t('asset.issue.apply.done.description')"
     >
       <template #extra>
-        <ion-button
-          expand="block"
-          color="primary"
-          router-link="/layout/market"
-        >
+        <ion-button expand="block" color="primary" @click="gotoMyIssues">
           {{ t('asset.issue.apply.done.viewProducts') }}
         </ion-button>
       </template>

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

@@ -0,0 +1,47 @@
+<script lang='ts' setup>
+import { client, safeClient } from "@/api";
+
+const { t } = useI18n();
+const model = defineModel({ type: String, default: "" });
+
+const { data: categories } = await safeClient(() => client.api.rwa.category.categories.get());
+</script>
+
+<template>
+  <ion-content :scroll-x="true" :scroll-y="false" class="w-full h-6">
+    <div class="flex items-center whitespace-nowrap space-x-4">
+      <div class="item" :class="{ active: model === '' }" @click="model = ''">
+        {{ t('market.category.all') }}
+      </div>
+      <div
+        v-for="item in categories?.data"
+        :key="item.id"
+        class="item"
+        :class="{ active: model === item.id }"
+        @click="model = item.id"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </ion-content>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+ion-content::part(scroll) {
+  scrollbar-width: none;
+}
+
+.item {
+  @apply px-3 py-1 rounded-full text-xs transition-all;
+}
+.ion-palette-dark {
+  .item {
+    @apply bg-(--ion-color-step-800);
+  }
+}
+.item.active {
+  @apply bg-(--ion-color-success) text-white;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<script lang='ts' setup>
+import type { MySubscribeRwaData } from "@/api/types";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+
+defineProps<{
+  data: MySubscribeRwaData[];
+}>();
+</script>
+
+<template>
+  <div class="space-y-3 antialiased mt-5">
+    <ion-grid>
+      <ion-row class="ion-align-items-center text-xs text-text-500">
+        <ion-col size="6">
+          <div>名称/编号</div>
+        </ion-col>
+        <ion-col>
+          <div class="text-right">
+            单价
+          </div>
+        </ion-col>
+        <ion-col size="2">
+          <div class="text-right">
+            状态
+          </div>
+        </ion-col>
+        <ion-col size="3">
+          <div class="text-right">
+            总金额
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+    <div v-for="item in data" :key="item.id">
+      <ion-grid>
+        <ion-row class="ion-align-items-center my-5">
+          <ion-col size="6" class="flex items-center">
+            <div class="mr-3">
+              <CryptocurrencyColorNuls class="text-3xl" />
+            </div>
+            <div>
+              <div class="text-sm font-semibold mb-1 truncate">
+                <!-- {{ item.product?.name }} -->
+              </div>
+              <div class="flex items-center space-x-2">
+                <div class="text-xs text-text-500">
+                  <!-- {{ item.product?.code }} -->
+                </div>
+                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
+                  <!-- {{ item.product.category?.name }} -->
+                </div>
+              </div>
+            </div>
+          </ion-col>
+          <ion-col>
+            <div class="text-xs text-right">
+              ${{ Number(item.unitPrice) }}
+            </div>
+          </ion-col>
+          <ion-col size="2">
+            <div class="text-xs text-right">
+              {{ item.status }}
+            </div>
+          </ion-col>
+          <ion-col size="3">
+            <div class="text-lg font-bold text-primary text-right">
+              ${{ Number(item.totalAmount) }}
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>

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

@@ -1,22 +1,55 @@
 <script lang='ts' setup>
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
 import type { MySubscribeRwaBody, MySubscribeRwaData } from "@/api/types";
 import { client, safeClient } from "@/api";
+import Category from "./components/category.vue";
+import MySubscribeList from "./components/my-subscribe-list.vue";
 
 const [query] = useResetRef<MySubscribeRwaBody>({
+  categoryId: "",
   limit: 20,
   offset: 0,
 });
 
-const subscribeData = ref<MySubscribeRwaData>([]);
+const subscribeData = ref<MySubscribeRwaData[]>([]);
 const isFinished = ref(false);
 
 async function fetchRwaData() {
   const { data } = await safeClient(() => client.api.rwa.subscription.my_subscriptions.get({
     query: query.value,
   }));
-  subscribeData.value.push(...(data.value || []));
-  isFinished.value = (data.value?.length || 0) < query.value.limit!;
+  subscribeData.value.push(...(data.value?.data || []));
+  isFinished.value = (data.value?.data?.length || 0) < query.value.limit!;
 }
+function resetData() {
+  query.value.offset = 0;
+  subscribeData.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh(event: RefresherCustomEvent) {
+  resetData();
+  await fetchRwaData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchRwaData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+
+watch(() => query.value.categoryId, async () => {
+  resetData();
+  await fetchRwaData();
+});
 
 onBeforeMount(() => {
   fetchRwaData();
@@ -33,11 +66,19 @@ onBeforeMount(() => {
     </ion-header>
 
     <ion-content :fullscreen="true" class="ion-padding">
-      <ion-refresher slot="fixed">
+      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
         <ion-refresher-content />
       </ion-refresher>
 
-      <div class="space-y-3 antialiased mt-5" />
+      <Category v-model="query!.categoryId" />
+      <MySubscribeList :data="subscribeData" />
+
+      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="加载中..."
+        />
+      </ion-infinite-scroll>
     </ion-content>
   </ion-page>
 </template>

src/views/withdraw/index.vue

@@ -1,7 +1,7 @@
 <script lang='ts' setup>
 import type { GenericObject } from "vee-validate";
 import type { WithdrawBody } from "@/api/types";
-import { toastController } from "@ionic/vue";
+import { loadingController, toastController } from "@ionic/vue";
 import { ErrorMessage, Field, Form } from "vee-validate";
 import { client, safeClient } from "@/api";
 import { AssetCodeEnum, ChainEnum, WithdrawMethodEnum } from "@/api/enum";
@@ -29,16 +29,23 @@ const maxAmount = computed(() => {
 const schema = computed(() => createWithdrawSchema(t, maxAmount.value));
 
 async function onSubmit(values: GenericObject) {
-  await safeClient(() => client.api.withdraw.post(values as WithdrawBody));
-  const toast = await toastController.create({
-    message: t("withdraw.successMessage"),
-    duration: 2000,
-    position: "bottom",
-    color: "success",
+  const loading = await loadingController.create({
+    message: "提交中...",
   });
+  await loading.present();
 
-  await toast.present();
-  router.back();
+  await safeClient(() => client.api.withdraw.post(values as WithdrawBody)).finally(async () => {
+    const toast = await toastController.create({
+      message: t("withdraw.successMessage"),
+      duration: 2000,
+      position: "bottom",
+      color: "success",
+    });
+
+    await toast.present();
+    loading.dismiss();
+    router.back();
+  });
 }
 </script>