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

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>