feat: add order book

src/views/trade/index.vue

@@ -11,6 +11,7 @@ import { client, safeClient } from "@/api";
 import { TradeTypeEnum } from "@/api/enum";
 import { TradingViewChart } from "@/tradingview/index";
 import ConfirmOrder from "./components/confirm-order.vue";
+import OrderBook from "./components/order-book.vue";
 import OrdersPanel from "./components/orders-panel.vue";
 import TradePairsModal from "./components/trade-pairs-modal.vue";
 import TradeSwitch from "./components/trade-switch.vue";
@@ -106,8 +107,8 @@ async function handleSubmit() {
     <ion-content :fullscreen="true">
       <TradingViewChart ref="tradingViewInst" class="mb-5" height="300px" :symbol="symbol" :options="tradingviewOptions" />
 
-      <div class="grid grid-cols-5 px-4">
-        <div class="col-span-3 space-y-2">
+      <div class="grid grid-cols-6 px-4">
+        <div class="col-span-4 space-y-2">
           <TradeSwitch v-model:active="mode" @update:active="val => form.side = val" />
           <TradeWay v-model="form" />
           <template v-if="form.orderType === 'limit'">
@@ -139,7 +140,9 @@ async function handleSubmit() {
             <ConfirmOrder :form="form" />
           </ion-modal>
         </div>
-        <div class="col-span-2" />
+        <div class="col-span-2">
+          <OrderBook :symbol="form.symbol" />
+        </div>
       </div>
 
       <div class="mt-6 px-4 pb-4">