From ce86fea73d92d2bf099cda20fe6275e3a9402c25 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Wed, 7 Jan 2026 21:15:01 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=A4=E6=98=93?=
 =?UTF-8?q?=E5=AF=B9=E6=A8=A1=E6=80=81=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E4=BA=A4=E6=98=93=E9=A1=B5=E9=9D=A2=E4=BB=A5=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=80=89=E6=8B=A9=E4=BA=A4=E6=98=93=E5=AF=B9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../trade/components/trade-pairs-modal.vue    | 45 +++++++++++++++++++
 src/views/trade/index.vue                     | 31 ++++++++++++-
 2 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/views/trade/components/trade-pairs-modal.vue

diff --git a/src/views/trade/components/trade-pairs-modal.vue b/src/views/trade/components/trade-pairs-modal.vue
new file mode 100644
index 0000000..646fd37
--- /dev/null
+++ b/src/views/trade/components/trade-pairs-modal.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { modalController } from "@ionic/vue";
+import { client, safeClient } from "@/api";
+
+const emit = defineEmits<{
+  select: [symbol: string];
+}>();
+
+const { data } = safeClient(client.api.trading_pairs.get());
+const searchText = ref("");
+
+function handleSelect(symbol: string) {
+  emit("select", symbol);
+  modalController.dismiss(symbol);
+}
+</script>
+
+<template>
+  <ion-header class="ion-no-border">
+    <ion-searchbar v-model="searchText" placeholder="搜索" class="mt-4" />
+  </ion-header>
+
+  <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)">
+        <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>
+        </div>
+      </div>
+    </div>
+  </ion-content>
+</template>
+
+<style lang="css" scoped>
+@reference "tailwindcss";
+
+ion-item.selected {
+  --background: var(--ion-color-light);
+}
+
+ion-searchbar {
+  --border-radius: 8px;
+}
+</style>
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index e2122df..f3bcb05 100644
--- a/src/views/trade/index.vue
+++ b/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>