fix: 优化订单簿数据处理,限制显示的买单和卖单数量,并调整样式

This commit is contained in:
2026-01-14 20:56:35 +07:00
parent 9d4df6d3da
commit b1cfb8b7da
2 changed files with 22 additions and 9 deletions

View File

@@ -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);
}
});

View File

@@ -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;
}