feat: 更新 API 依赖版本，添加代币化产品相关组件和路由

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

@@ -1,6 +1,5 @@
 <script lang='ts' setup>
 import type { RwaData } from "@/api/types";
-import CryptocurrencyColorAppc from "~icons/cryptocurrency-color/appc";
 import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
 
 defineProps<{

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

@@ -0,0 +1,74 @@
+<script lang='ts' setup>
+import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
+import type { AvailableSubscriptionBody, RwaData } from "@/api/types";
+import { client, safeClient } from "@/api";
+import Category from "./category.vue";
+import RwaList from "./rwa-list.vue";
+
+const { t } = useI18n();
+
+const [query] = useResetRef<AvailableSubscriptionBody>({
+  limit: 20,
+  offset: 0,
+  categoryId: "",
+});
+const rwaData = ref<RwaData[]>([]);
+const isFinished = ref(false);
+
+async function fetchRwaData() {
+  const { data } = await safeClient(() => client.api.rwa.subscription.available_editions.get({
+    query: query.value,
+  }));
+  rwaData.value.push(...(data.value?.data || []));
+  isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
+}
+function resetRwaData() {
+  query.value.offset = 0;
+  rwaData.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh() {
+  resetRwaData();
+  await fetchRwaData();
+}
+
+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 () => {
+  resetRwaData();
+  await fetchRwaData();
+});
+
+onBeforeMount(() => {
+  fetchRwaData();
+});
+
+defineExpose({
+  handleRefresh,
+});
+</script>
+
+<template>
+  <Category v-model="query!.categoryId" />
+  <RwaList :data="rwaData" />
+
+  <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+    <ion-infinite-scroll-content
+      loading-spinner="bubbles"
+      :loading-text="t('market.loading.loadingMore')"
+    />
+  </ion-infinite-scroll>
+</template>
+
+<style lang='css' scoped></style>

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

@@ -0,0 +1,73 @@
+<script lang='ts' setup>
+import type { TradableData } from "@/api/types";
+import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
+
+defineProps<{
+  data: TradableData[];
+}>();
+
+const router = useRouter();
+
+function gotoTokenized(id: string) {
+  router.push(`/trade-tokenized/${id}`);
+}
+</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>
+          <div class="text-right">
+            交易价估算
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+    <div v-for="item in data" :key="item.id" @click="gotoTokenized(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">
+              +12.6%
+            </div>
+          </ion-col>
+          <ion-col>
+            <div class="text-xs text-right">
+              连涨3天
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped></style>

src/views/market/components/tokenized-tab.vue

@@ -0,0 +1,72 @@
+<script lang='ts' setup>
+import type { InfiniteScrollCustomEvent } from "@ionic/vue";
+import type { TradableBody, TradableData } from "@/api/types";
+import { client, safeClient } from "@/api";
+import Category from "./category.vue";
+import TokenizedList from "./tokenized-list.vue";
+
+const { t } = useI18n();
+
+const [query] = useResetRef<TradableBody>({
+  limit: 20,
+  offset: 0,
+  categoryId: "",
+});
+const data = ref<TradableData[]>([]);
+const isFinished = ref(false);
+
+async function fetchData() {
+  const { data: responseData } = await safeClient(() => client.api.rwa.tokenization.tradable_products.get({
+    query: query.value,
+  }));
+  data.value.push(...(responseData.value?.data || []));
+  isFinished.value = (responseData.value?.data.length || 0) < query.value.limit!;
+}
+function resetData() {
+  query.value.offset = 0;
+  data.value = [];
+  isFinished.value = false;
+}
+async function handleRefresh() {
+}
+
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
+
+watch(() => query.value.categoryId, async () => {
+  resetData();
+  await fetchData();
+});
+
+onBeforeMount(() => {
+  fetchData();
+});
+
+defineExpose({
+  handleRefresh,
+});
+</script>
+
+<template>
+  <Category v-model="query!.categoryId" />
+  <TokenizedList :data="data" />
+
+  <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+    <ion-infinite-scroll-content
+      loading-spinner="bubbles"
+      :loading-text="t('market.loading.loadingMore')"
+    />
+  </ion-infinite-scroll>
+</template>
+
+<style lang='css' scoped></style>

src/views/market/index.vue

@@ -1,61 +1,19 @@
 <script setup lang="ts">
-import type { InfiniteScrollCustomEvent, RefresherCustomEvent } from "@ionic/vue";
-import type { AvailableSubscriptionBody, RwaData } from "@/api/types";
-import { client, safeClient } from "@/api";
-import Category from "./components/category.vue";
-import RwaList from "./components/rwa-list.vue";
+import type { RefresherCustomEvent } from "@ionic/vue";
+import RwaTab from "./components/rwa-tab.vue";
+import TokenizedTab from "./components/tokenized-tab.vue";
 
 const { t } = useI18n();
+const rwaInst = useTemplateRef<InstanceType<typeof RwaTab>>("rwaInst");
+const tokenizedInst = useTemplateRef<InstanceType<typeof TokenizedTab>>("tokenizedInst");
 
-const [query] = useResetRef<AvailableSubscriptionBody>({
-  limit: 20,
-  offset: 0,
-  categoryId: "",
-});
-const rwaData = ref<RwaData[]>([]);
-const isFinished = ref(false);
-
-async function fetchRwaData() {
-  const { data } = await safeClient(() => client.api.rwa.subscription.available_editions.get({
-    query: query.value,
-  }));
-  rwaData.value.push(...(data.value?.data || []));
-  isFinished.value = (data.value?.data.length || 0) < query.value.limit!;
-}
-function resetRwaData() {
-  query.value.offset = 0;
-  rwaData.value = [];
-  isFinished.value = false;
-}
 async function handleRefresh(event: RefresherCustomEvent) {
-  resetRwaData();
-  await fetchRwaData();
+  await rwaInst.value?.handleRefresh();
+  await tokenizedInst.value?.handleRefresh();
   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 () => {
-  resetRwaData();
-  await fetchRwaData();
-});
-
-onBeforeMount(() => {
-  fetchRwaData();
-});
 </script>
 
 <template>
@@ -74,19 +32,13 @@ onBeforeMount(() => {
       </ion-refresher>
 
       <ui-tabs type="segment" class="tabs" size="small">
-        <ui-tab-pane name="all" title="数字化产品">
-          <Category v-model="query!.categoryId" />
-          <RwaList :data="rwaData" />
+        <ui-tab-pane name="rwa" title="数字化产品">
+          <RwaTab ref="rwaInst" />
+        </ui-tab-pane>
+        <ui-tab-pane name="tokenized" title="代币化产品">
+          <TokenizedTab ref="tokenizedInst" />
         </ui-tab-pane>
-        <ui-tab-pane name="stocks" title="代币化产品" />
       </ui-tabs>
-
-      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
-        <ion-infinite-scroll-content
-          loading-spinner="bubbles"
-          :loading-text="t('market.loading.loadingMore')"
-        />
-      </ion-infinite-scroll>
     </IonContent>
   </IonPage>
 </template>