From fc708f88d7b8dcb22718a88df656703ca67cccf8 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Tue, 13 Jan 2026 20:01:03 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E9=80=BB=E8=BE=91=EF=BC=8C=E7=A1=AE=E4=BF=9D?=
 =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86=E5=85=B3=E9=97=AD=E6=97=B6=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E6=88=90=E5=8A=9F=E7=8A=B6=E6=80=81=EF=BC=9B=E5=9C=A8?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=88=97=E8=A1=A8=E4=B8=AD=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E9=97=B4=E8=B7=9D=EF=BC=9B=E5=9C=A8=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E4=B8=AD=E6=B7=BB=E5=8A=A0=E4=BB=B7?=
 =?UTF-8?q?=E6=A0=BC=E3=80=81=E6=95=B0=E9=87=8F=E5=92=8C=E9=87=91=E9=A2=9D?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E7=9A=84=E8=AE=A1=E7=AE=97=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/trade/components/confirm-order.vue |  2 +-
 src/views/trade/components/order-book.vue    | 40 ++++++++++++++++++++
 src/views/trade/components/order-list.vue    |  2 +-
 src/views/trade/index.vue                    | 30 ++++++++++++---
 4 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/src/views/trade/components/confirm-order.vue b/src/views/trade/components/confirm-order.vue
index aaa763a..8a97717 100644
--- a/src/views/trade/components/confirm-order.vue
+++ b/src/views/trade/components/confirm-order.vue
@@ -31,7 +31,7 @@ async function onConfirm() {
     color: "success",
   });
   await toast.present();
-  modalController.dismiss();
+  modalController.dismiss({ success: true });
 }
 </script>
 
diff --git a/src/views/trade/components/order-book.vue b/src/views/trade/components/order-book.vue
index 918fde9..4e3ec42 100644
--- a/src/views/trade/components/order-book.vue
+++ b/src/views/trade/components/order-book.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Treaty } from "@elysiajs/eden";
 import { client, safeClient } from "@/api";
+import { tradeWebSocket } from "@/tradingview/websocket";
 
 type Item = Treaty.Data<typeof client.api.trading_pairs.orderbook.get>;
 
 const props = defineProps<{
   symbol: string;
 }>();
+const socket = tradeWebSocket.getSocket();
 
 const { data } = await safeClient(client.api.trading_pairs.orderbook.get({ query: { symbol: props.symbol, depth: 5 } }));
 
@@ -33,6 +35,44 @@ function getDepthPercent(items?: Item["asks" | "bids"], index?: number) {
   const itemTotal = totalValues[index];
   return (itemTotal / maxTotal) * 100;
 }
+function subscribe() {
+  socket.send({
+    action: "subscribe",
+    channels: [{
+      name: "depth",
+      symbol: props.symbol,
+    }],
+  });
+}
+function unsubscribe() {
+  socket.send({
+    action: "unsubscribe",
+    channels: [{
+      name: "depth",
+      symbol: props.symbol,
+    }],
+  });
+}
+
+// 监听订单簿更新
+socket.subscribe((message) => {
+  const data = message.data;
+});
+
+watch(() => props.symbol, (newSymbol, oldSymbol) => {
+  if (newSymbol === oldSymbol)
+    return;
+  unsubscribe();
+  subscribe();
+});
+
+onMounted(() => {
+  subscribe();
+});
+
+onUnmounted(() => {
+  unsubscribe();
+});
 </script>
 
 <template>
diff --git a/src/views/trade/components/order-list.vue b/src/views/trade/components/order-list.vue
index e4940d1..a587432 100644
--- a/src/views/trade/components/order-list.vue
+++ b/src/views/trade/components/order-list.vue
@@ -58,7 +58,7 @@ onBeforeMount(() => {
 <template>
   <ui-empty v-if="data.length === 0" title="当前暂无委托" />
   <template v-else>
-    <div v-for="item in data" :key="item.id" class="bg-faint rounded-xl p-3">
+    <div v-for="item in data" :key="item.id" class="bg-faint rounded-xl p-3 mb-3">
       <OrderCard :item="item" :show-cancel="props.showCancel" @refresh="handleRefresh" />
     </div>
     <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index b37d966..e5a204e 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -31,7 +31,7 @@ const confirmModalInst = useTemplateRef<ModalInstance>("confirmModalInst");
 const userStore = useUserStore();
 const router = useRouter();
 
-const [form] = useResetRef<SpotOrderBody & { amount: string }>({
+const [form, reset] = useResetRef<SpotOrderBody & { amount: string }>({
   orderType: TradeWayValueEnum.LIMIT,
   quantity: "",
   side: mode.value,
@@ -52,6 +52,20 @@ async function openTradePairs() {
   const { data: result } = await modal.onWillDismiss<string>();
   result && (symbol.value = result);
 }
+
+// 价格变化时，根据数量计算金额
+function handleChangePrice(event) {
+  const val = (event.target as HTMLInputElement).value;
+  if (val && form.value.quantity) {
+    const amount = Number(form.value.quantity) * Number(val);
+    form.value.amount = amount.toString();
+  }
+  else {
+    form.value.amount = "";
+  }
+}
+
+// 数量变化时，根据价格计算金额
 function handleChangeQuantity(event) {
   const val = (event.target as HTMLInputElement).value;
   if (val && form.value.price) {
@@ -62,6 +76,8 @@ function handleChangeQuantity(event) {
     form.value.amount = "";
   }
 }
+
+// 金额变化时，根据价格计算数量
 function handleChangeAmount(event) {
   const val = (event.target as HTMLInputElement).value;
   if (val && form.value.price) {
@@ -75,7 +91,11 @@ function handleChangeAmount(event) {
 async function handleSubmit() {
   try {
     await confirmOrderSubmitSchema.parseAsync(form.value);
-    confirmModalInst.value?.$el.present();
+    await confirmModalInst.value?.$el.present();
+    const { data: result } = await confirmModalInst.value?.$el.onWillDismiss();
+    if (result?.success) {
+      reset();
+    }
   }
   catch (err) {
     console.error("订单验证失败:", err);
@@ -122,7 +142,7 @@ function signIn() {
           <TradeSwitch v-model:active="mode" @update:active="val => form.side = val" />
           <TradeWay v-model="form" />
           <template v-if="form.orderType === 'limit'">
-            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格" @ion-input="handleChangePrice">
               <span slot="end">USDT</span>
             </ion-input>
             <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
@@ -133,9 +153,9 @@ function signIn() {
             </ion-input>
           </template>
           <template v-else-if="form.orderType === 'market'">
-            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+            <!-- <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
               <span slot="end">USDT</span>
-            </ion-input>
+            </ion-input> -->
             <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
               <span slot="end">{{ symbol }}</span>
             </ion-input>