feat: 更新环境配置，添加 API 地址，优化数据获取逻辑，支持振动反馈功能

src/views/market/components/category.vue

@@ -7,7 +7,7 @@ const { data: categories } = await safeClient(() => client.api.rwa.issuance.cate
 </script>
 
 <template>
-  <ion-content :scroll-x="true" :scroll-y="false" class="w-full h-10">
+  <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 = ''">
         全部

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

@@ -0,0 +1,71 @@
+<script lang='ts' setup>
+import type { RwaData } from "@/api/types";
+
+defineProps<{
+  data: RwaData["data"];
+}>();
+</script>
+
+<template>
+  <ion-list lines="none" class="space-y-2">
+    <ion-item>
+      <ion-grid>
+        <ion-row class="ion-align-items-center text-xs">
+          <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-col>
+            <div class="text-right">
+              申购单价
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-item>
+    <ion-item v-for="item in data" :key="item.id">
+      <ion-grid>
+        <ion-row class="ion-align-items-center space-y-5">
+          <ion-col size="6">
+            <div>
+              <div class="font-semibold mb-1 truncate">
+                {{ item.product?.name }}
+              </div>
+              <p class="text-xs text-text-500 font-bold">
+                {{ item.product?.code }}
+              </p>
+            </div>
+          </ion-col>
+          <ion-col>
+            <div class="text-xs text-right">
+              {{ item.editionName }}
+            </div>
+          </ion-col>
+          <ion-col>
+            <div class="text-xs text-right">
+              {{ useDateFormat(item.launchDate!, 'MM/DD') }}
+            </div>
+          </ion-col>
+          <ion-col>
+            <div v-if="item.unitPrice" class="text-right">
+              <div class="text-lg font-bold text-primary">
+                ${{ Number(item.unitPrice) }}
+              </div>
+            </div>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-item>
+  </ion-list>
+</template>
+
+<style lang='css' scoped></style>

src/views/market/index.vue

@@ -1,80 +1,86 @@
 <script setup lang="ts">
-import type { AvailableSubscriptionBody } from "@/api/types";
+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";
 
 const [query] = useResetRef<AvailableSubscriptionBody>({
-  pageIndex: 1,
-  pageSize: 20,
+  limit: 20,
+  offset: 0,
   categoryId: "",
 });
-const { data, refresh } = safeClient(() => client.api.rwa.subscription.available_editions.get({
-  query: query.value,
-}));
-const tradingViewContainer = useTemplateRef<HTMLDivElement>("tradingViewContainer");
+const rwaData = ref<RwaData["data"]>([]);
+const isFinished = ref(false);
 
-const tradingViewData = ref<any[]>([{ open: 10, high: 10.63, low: 9.49, close: 9.55, time: 1642427876 }, { open: 9.55, high: 10.30, low: 9.42, close: 9.94, time: 1642514276 }, { open: 9.94, high: 10.17, low: 9.92, close: 9.78, time: 1642600676 }, { open: 9.78, high: 10.59, low: 9.18, close: 9.51, time: 1642687076 }, { open: 9.51, high: 10.46, low: 9.10, close: 10.17, time: 1642773476 }, { open: 10.17, high: 10.96, low: 10.16, close: 10.47, time: 1642859876 }, { open: 10.47, high: 11.39, low: 10.40, close: 10.81, time: 1642946276 }, { open: 10.81, high: 11.60, low: 10.30, close: 10.75, time: 1643032676 }, { open: 10.75, high: 11.60, low: 10.49, close: 10.93, time: 1643119076 }, { open: 10.93, high: 11.53, low: 10.76, close: 10.96, time: 1643205476 }]);
+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();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
 
-setInterval(() => {
-  const lastData = tradingViewData.value[tradingViewData.value.length - 1];
-  const lastClose = lastData.close;
-  const lastTime = lastData.time;
-
-  const changePercent = (Math.random() - 0.5) * 0.04;
-  const open = lastClose;
-  const close = open * (1 + changePercent);
-
-  const volatility = Math.random() * 0.02;
-  const high = Math.max(open, close) * (1 + volatility);
-  const low = Math.min(open, close) * (1 - volatility);
-
-  const newTime = lastTime + 60;
-
-  const newData = {
-    open: Number(open.toFixed(2)),
-    high: Number(high.toFixed(2)),
-    low: Number(low.toFixed(2)),
-    close: Number(close.toFixed(2)),
-    time: newTime,
-  };
-
-  tradingViewData.value.push(newData);
-
-  if (tradingViewData.value.length > 50) {
-    tradingViewData.value.shift();
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
   }
-}, 1000);
+  query.value.offset! += query.value.limit!;
+  await fetchRwaData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
 
-const { resize } = useTradingView(tradingViewContainer, {
-  data: tradingViewData,
+watch(() => query.value.categoryId, async () => {
+  resetRwaData();
+  await fetchRwaData();
 });
 
-watch(query, () => {
-  refresh();
-}, { deep: true });
+onBeforeMount(() => {
+  fetchRwaData();
+});
 </script>
 
 <template>
   <IonPage>
-    <IonHeader>
-      <IonToolbar class="ui-toolbar">
-        <ion-title>Market</ion-title>
-      </IonToolbar>
-      <ion-toolbar class="ui-toolbar">
-        <ion-searchbar />
-      </ion-toolbar>
+    <IonHeader class="ion-padding ui-header">
+      <ion-searchbar placeholder=" Search" />
+      <Category v-model="query!.categoryId" />
     </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" />
-          <div ref="tradingViewContainer" class="w-full h-80" />
-        </ui-tab-pane>
-        <ui-tab-pane name="futures" title="Tokenized Products" class="py-5">
-          <div>Futures Market Content</div>
-        </ui-tab-pane>
-      </ui-tabs>
+      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
+        <ion-refresher-content />
+      </ion-refresher>
+
+      <RwaList :data="rwaData" />
+
+      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="加载更多..."
+        />
+      </ion-infinite-scroll>
     </IonContent>
   </IonPage>
 </template>
+
+<style scoped>
+ion-searchbar {
+  padding: 0;
+}
+</style>