feat: 添加交易相关组件，包括订单簿、交易表单和交易对头部信息，优化交易界面

src/views/trade/index.vue

@@ -1,34 +1,127 @@
 <script setup lang="ts">
-const { t } = useI18n();
+import OrderBook from "./components/order-book.vue";
+import OrdersPanel from "./components/orders-panel.vue";
+import TradeForm from "./components/trade-form.vue";
+import TradingPairHeader from "./components/trading-pair-header.vue";
 
 const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer");
 
+// K线图配置
 useTradingView(tradingViewContainer, {
   data: [
-    // 随机k线图数据
-    { time: "2023-10-01", open: 100, high: 110, low: 90, close: 105 },
-    { time: "2023-10-02", open: 105, high: 115, low: 95, close: 100 },
-    { time: "2023-10-03", open: 100, high: 120, low: 80, close: 110 },
-    { time: "2023-10-04", open: 110, high: 130, low: 100, close: 120 },
-    { time: "2023-10-05", open: 120, high: 140, low: 110, close: 130 },
-    { time: "2023-10-06", open: 130, high: 150, low: 120, close: 140 },
-    { time: "2023-10-07", open: 140, high: 160, low: 130, close: 150 },
+    // TODO: 后续从API获取K线数据
+    // const { data } = await client.api.trading.kline.get({ query: { symbol: 'BTC_USDT', interval: '1h' } })
+    { time: "2023-10-01", open: 42000, high: 43100, low: 41800, close: 42500 },
+    { time: "2023-10-02", open: 42500, high: 43500, low: 42200, close: 43000 },
+    { time: "2023-10-03", open: 43000, high: 44200, low: 42800, close: 43800 },
+    { time: "2023-10-04", open: 43800, high: 44500, low: 43500, close: 44200 },
+    { time: "2023-10-05", open: 44200, high: 44800, low: 43900, close: 44500 },
+    { time: "2023-10-06", open: 44500, high: 45000, low: 44200, close: 44800 },
+    { time: "2023-10-07", open: 44800, high: 45500, low: 44500, close: 43250 },
   ],
 });
+
+// 买卖切换
+const tradeAction = ref<"buy" | "sell">("buy");
 </script>
 
 <template>
   <ion-page>
     <ion-header class="ion-no-border">
       <ion-toolbar class="ui-toolbar">
-        <ion-title>{{ t('tabs.trade') }}</ion-title>
+        <ion-title>交易</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <div ref="tradingViewContainer" />
+      <!-- 交易对头部信息 -->
+      <TradingPairHeader />
+
+      <!-- K线图表 -->
+      <div ref="tradingViewContainer" class="chart-container" />
+
+      <!-- 订单簿 -->
+      <div class="order-book-section">
+        <OrderBook />
+      </div>
+
+      <!-- 买卖切换 -->
+      <div class="trade-action-tabs">
+        <button
+          :class="{ active: tradeAction === 'buy' }"
+          class="buy-tab"
+          @click="tradeAction = 'buy'"
+        >
+          买入
+        </button>
+        <button
+          :class="{ active: tradeAction === 'sell' }"
+          class="sell-tab"
+          @click="tradeAction = 'sell'"
+        >
+          卖出
+        </button>
+      </div>
+
+      <!-- 交易表单 -->
+      <TradeForm :action="tradeAction" />
+
+      <!-- 当前委托和历史记录 -->
+      <div class="orders-section">
+        <OrdersPanel />
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
 <style scoped>
+.chart-container {
+  height: 300px;
+  width: 100%;
+}
+
+.order-book-section {
+  margin: 16px 0;
+}
+
+.trade-action-tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  padding: 0 16px;
+  margin-bottom: 8px;
+}
+
+.trade-action-tabs button {
+  padding: 12px 0;
+  border: none;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  background: var(--ion-color-light);
+  color: var(--ion-text-color);
+}
+
+.trade-action-tabs .buy-tab {
+  border-radius: 8px 0 0 8px;
+}
+
+.trade-action-tabs .sell-tab {
+  border-radius: 0 8px 8px 0;
+}
+
+.trade-action-tabs button.active.buy-tab {
+  background: var(--ion-color-success);
+  color: white;
+}
+
+.trade-action-tabs button.active.sell-tab {
+  background: var(--ion-color-danger);
+  color: white;
+}
+
+.orders-section {
+  margin-top: 16px;
+  min-height: 300px;
+}
 </style>