From b1cfb8b7da0e1db032e0c9544017b9dabd845956 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Wed, 14 Jan 2026 20:56:35 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E7=B0=BF=E6=95=B0=E6=8D=AE=E5=A4=84=E7=90=86=EF=BC=8C=E9=99=90?=
 =?UTF-8?q?=E5=88=B6=E6=98=BE=E7=A4=BA=E7=9A=84=E4=B9=B0=E5=8D=95=E5=92=8C?=
 =?UTF-8?q?=E5=8D=96=E5=8D=95=E6=95=B0=E9=87=8F=EF=BC=8C=E5=B9=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../trade-tokenized/components/order-book.vue   | 14 ++++++++++----
 src/views/trade/components/order-book.vue       | 17 ++++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/views/trade-tokenized/components/order-book.vue b/src/views/trade-tokenized/components/order-book.vue
index 492e087..bdf2dd1 100644
--- a/src/views/trade-tokenized/components/order-book.vue
+++ b/src/views/trade-tokenized/components/order-book.vue
@@ -73,15 +73,21 @@ function unsubscribe() {
 tradeWebSocket.subscribe((message) => {
   if ("bids" in message.data) {
     if (!data.value?.bids.length) {
-      data.value!.bids = [];
+      data.value.bids = [];
     }
-    data.value!.bids.splice(0, data.value!.bids.length, ...message.data.bids);
+    const bids = message.data.bids.sort((a, b) => Number(b.price) - Number(a.price));
+
+    data.value.bids.unshift(...bids);
+    data.value.bids = data.value.bids.slice(0, 5);
   }
   if ("asks" in message.data) {
     if (!data.value?.asks.length) {
-      data.value!.asks = [];
+      data.value.asks = [];
     }
-    data.value!.asks.splice(0, data.value!.asks.length, ...message.data.asks);
+    const asks = message.data.asks.sort((a, b) => Number(b.price) - Number(a.price));
+
+    data.value.asks.unshift(...asks);
+    data.value.asks = data.value.asks.slice(0, 5);
   }
 });
 
diff --git a/src/views/trade/components/order-book.vue b/src/views/trade/components/order-book.vue
index 47c2a8d..0c867a8 100644
--- a/src/views/trade/components/order-book.vue
+++ b/src/views/trade/components/order-book.vue
@@ -59,15 +59,21 @@ function unsubscribe() {
 tradeWebSocket.subscribe((message) => {
   if ("bids" in message.data) {
     if (!data.value?.bids.length) {
-      data.value!.bids = [];
+      data.value.bids = [];
     }
-    data.value!.bids.splice(0, data.value!.bids.length, ...message.data.bids);
+    const bids = message.data.bids.sort((a, b) => Number(b.price) - Number(a.price));
+
+    data.value.bids.unshift(...bids);
+    data.value.bids = data.value.bids.slice(0, 5);
   }
   if ("asks" in message.data) {
     if (!data.value?.asks.length) {
-      data.value!.asks = [];
+      data.value.asks = [];
     }
-    data.value!.asks.splice(0, data.value!.asks.length, ...message.data.asks);
+    const asks = message.data.asks.sort((a, b) => Number(b.price) - Number(a.price));
+
+    data.value.asks.unshift(...asks);
+    data.value.asks = data.value.asks.slice(0, 5);
   }
 });
 
@@ -144,6 +150,7 @@ onUnmounted(() => {
   font-size: 12px;
   user-select: none;
   padding-left: 8px;
+  width: 100%;
 }
 
 .asks-section,
@@ -178,7 +185,7 @@ onUnmounted(() => {
   position: relative;
   width: 100%;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   padding: 0 12px;
   z-index: 1;
 }