From a64bd9b4701ad39257b2828bfeb05fdf9378a794 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Wed, 14 Jan 2026 01:58:36 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E7=B0=BF=E7=BB=84=E4=BB=B6=E4=BB=A5=E4=BD=BF=E7=94=A8=20WebSoc?=
 =?UTF-8?q?ket=20=E8=AE=A2=E9=98=85=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../trade-tokenized/components/order-book.vue | 68 +++++++++++++++++--
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/views/trade-tokenized/components/order-book.vue b/src/views/trade-tokenized/components/order-book.vue
index ae9733a..f8331dd 100644
--- a/src/views/trade-tokenized/components/order-book.vue
+++ b/src/views/trade-tokenized/components/order-book.vue
@@ -1,9 +1,23 @@
 <script lang='ts' setup>
-import { client, safeClient } from "@/api";
+import { tradeWebSocket } from "@/tradingview/websocket";
+
+interface Item {
+  asks: Array<{
+    price: string;
+    size: string;
+  }>;
+  bids: Array<{
+    price: string;
+    size: string;
+  }>;
+}
 
 const props = defineProps<{ symbol: string }>();
 
-const { data } = await safeClient(client.api.trading_pairs.orderbook.get({ query: { symbol: props.symbol, depth: 30 } }));
+const data = ref<Item>({
+  asks: [],
+  bids: [],
+});
 
 // 计算买单和卖单的最大数量，用于计算占比
 const maxBidAmount = computed(() => {
@@ -38,6 +52,52 @@ function formatPrice(price: string) {
 function formatAmount(amount: string) {
   return Number(amount).toFixed(4);
 }
+function subscribe() {
+  tradeWebSocket.subscribeChannel([{
+    name: "depth",
+    symbol: props.symbol,
+  }]);
+}
+function unsubscribe() {
+  useTimeoutFn(() => {
+    console.log("unsubscribe order book: ", props.symbol);
+    tradeWebSocket.unsubscribeChannel([{
+      name: "depth",
+      symbol: props.symbol,
+    }]);
+  }, 3000);
+}
+
+// 监听订单簿更新
+tradeWebSocket.subscribe((message) => {
+  if ("bids" in message.data) {
+    if (!data.value?.bids.length) {
+      data.value!.bids = [];
+    }
+    data.value!.bids.splice(0, data.value!.bids.length, ...message.data.bids);
+  }
+  if ("asks" in message.data) {
+    if (!data.value?.asks.length) {
+      data.value!.asks = [];
+    }
+    data.value!.asks.splice(0, data.value!.asks.length, ...message.data.asks);
+  }
+});
+
+watch(() => props.symbol, (newSymbol, oldSymbol) => {
+  if (newSymbol === oldSymbol)
+    return;
+  unsubscribe();
+  subscribe();
+});
+
+onMounted(() => {
+  subscribe();
+});
+
+onUnmounted(() => {
+  unsubscribe();
+});
 </script>
 
 <template>
@@ -75,7 +135,7 @@ function formatAmount(amount: string) {
 
             <!-- 数量 -->
             <div class="relative z-1 text-right text-(--ion-color-step-600)">
-              {{ formatAmount(bid.quantity) }}
+              {{ formatAmount(bid.size) }}
             </div>
           </div>
         </div>
@@ -113,7 +173,7 @@ function formatAmount(amount: string) {
 
             <!-- 数量 -->
             <div class="relative z-1 text-right text-(--ion-color-step-600)">
-              {{ formatAmount(ask.quantity) }}
+              {{ formatAmount(ask.size) }}
             </div>
           </div>
         </div>