feat: 更新 @riwa/api-types 依赖至 0.0.89，优化交易对和图表组件

src/tradingview/index.ts

@@ -68,6 +68,9 @@ const defaultOptions = {
   },
 } satisfies ChartingLibraryWidgetOptions;
 
+export interface TradingViewChartExpose {
+}
+
 export const TradingViewChart = defineComponent({
   name: "TradingViewChart",
   props: {
@@ -141,6 +144,17 @@ export const TradingViewChart = defineComponent({
       }, 0);
     });
 
+    // 监听交易对变化，动态更新图表数据
+    watch(() => props.symbol, (newSymbol) => {
+      if (!widget.value || !newSymbol)
+        return;
+      widget.value.activeChart().setSymbol(newSymbol, () => {
+        console.log(`[TradingView]: Symbol changed to ${newSymbol}`);
+      });
+    });
+
     return () => h("div", { ref: el, class: "w-full", style: styles.value });
   },
 });
+
+export type TradingViewInst = InstanceType<typeof TradingViewChart> & TradingViewChartExpose;

src/views/trade/components/trade-pairs-modal.vue

@@ -6,7 +6,11 @@ const emit = defineEmits<{
   select: [symbol: string];
 }>();
 
-const { data } = safeClient(client.api.trading_pairs.get());
+const [query] = useResetRef({
+  offset: 0,
+  limit: 200,
+});
+const { data } = safeClient(client.api.trading_pairs.get({ query: query.value }));
 const searchText = ref("");
 
 function handleSelect(symbol: string) {
@@ -22,7 +26,7 @@ function handleSelect(symbol: string) {
 
   <ion-content>
     <div class="mt-2 flex flex-col">
-      <div v-for="item in data" :key="item.symbol" class="flex items-center px-3 my-3 w-full" @click="handleSelect(item.symbol)">
+      <div v-for="item in data?.data" :key="item.symbol" class="flex items-center px-3 my-3 w-full" @click="handleSelect(item.symbol)">
         <Icon icon="cryptocurrency-color:dta" class="text-3xl" />
         <div class="ml-2 inline-flex gap-2 items-baseline">
           <span class="font-medium text-md">{{ item.baseAsset }}</span><span class="text-xs text-text-400">/ {{ item.quoteAsset }}</span>

src/views/trade/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ChartingLibraryWidgetOptions } from "#/charting_library";
+import type { TradingViewInst } from "@/tradingview/index";
 import { modalController } from "@ionic/vue";
 import { useRouteQuery } from "@vueuse/router";
 import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
@@ -20,19 +21,11 @@ const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
     "create_volume_indicator_by_default",
   ],
 };
-
-const { data } = safeClient(client.api.trading_pairs.get());
+const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
 
 async function openTradePairs() {
-  if (!data.value)
-    return;
-
   const modal = await modalController.create({
     component: TradePairsModal,
-    componentProps: {
-      tradingPairs: data.value,
-      currentSymbol: symbol.value,
-    },
     breakpoints: [0, 0.95],
     initialBreakpoint: 0.95,
     handle: true,
@@ -72,7 +65,7 @@ async function openTradePairs() {
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <TradingViewChart class="mb-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />
+      <TradingViewChart ref="tradingViewInst" class="mb-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />
 
       <div class="grid grid-cols-5 px-4">
         <div class="col-span-3 space-y-2">