feat: 更新 API 地址，添加分类组件，优化市场页面布局和功能

src/views/market/index.vue

@@ -1,21 +1,43 @@
 <script setup lang="ts">
+import type { AvailableSubscriptionBody } from "@/api/types";
+import { client, safeClient } from "@/api";
+import Category from "./components/category.vue";
+
+const [query] = useResetRef<AvailableSubscriptionBody>({
+  status: "open",
+  pageIndex: 1,
+  pageSize: 20,
+  categoryId: "",
+});
+const { data, refresh } = safeClient(() => client.api.rwa.subscription.available_editions.get({
+  query: query.value,
+}));
+
+watch(query, () => {
+  refresh();
+}, { deep: true });
 </script>
 
 <template>
   <IonPage>
     <IonHeader>
-      <IonToolbar>
-        <IonTitle>Trade</IonTitle>
+      <IonToolbar class="ui-toolbar">
+        <ion-title>Market</ion-title>
       </IonToolbar>
+      <ion-toolbar class="ui-toolbar">
+        <ion-searchbar />
+      </ion-toolbar>
     </IonHeader>
-    <IonContent :fullscreen="true">
-      <IonHeader collapse="condense">
-        <IonToolbar>
-          <IonTitle size="large">
-            Trade
-          </IonTitle>
-        </IonToolbar>
-      </IonHeader>
+    <IonContent :fullscreen="true" class="ion-padding">
+      <ui-tabs sticky>
+        <ui-tab-pane name="spot" title="Digital Products" class="py-5">
+          <Category v-model="query!.categoryId" />
+          <ion-content :scroll-y="true" />
+        </ui-tab-pane>
+        <ui-tab-pane name="futures" title="Tokenized Products" class="py-5">
+          <div>Futures Market Content</div>
+        </ui-tab-pane>
+      </ui-tabs>
     </IonContent>
   </IonPage>
 </template>