feat: 添加交易对模态组件，更新交易页面以支持选择交易对功能

src/views/trade/index.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import type { ChartingLibraryWidgetOptions } from "#/charting_library";
+import { modalController } from "@ionic/vue";
 import { useRouteQuery } from "@vueuse/router";
 import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
 import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
+import { client, safeClient } from "@/api";
 import { TradeTypeEnum } from "@/api/enum";
 import { TradingViewChart } from "@/tradingview/index";
 import OrdersPanel from "./components/orders-panel.vue";
+import TradePairsModal from "./components/trade-pairs-modal.vue";
 import TradeSwitch from "./components/trade-switch.vue";
 import TradeWay from "./components/trade-way.vue";
 
@@ -17,13 +20,39 @@ const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
     "create_volume_indicator_by_default",
   ],
 };
+
+const { data } = safeClient(client.api.trading_pairs.get());
+
+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,
+  });
+
+  await modal.present();
+
+  const { data: result } = await modal.onWillDismiss<string>();
+
+  if (result) {
+    symbol.value = result;
+  }
+}
 </script>
 
 <template>
   <ion-page>
     <ion-header>
       <ion-toolbar class="ion-toolbar">
-        <div slot="start" class="flex items-center gap-1 px-4">
+        <div slot="start" class="flex items-center gap-1 px-4" @click="openTradePairs">
           <div class="text-md font-bold">
             {{ symbol }}
           </div>