From 04bc5ff95d4ea8c686f946cea7a4260b4b2c648f Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sun, 28 Dec 2025 00:19:12 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=BA=A4=E6=98=93?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E9=85=8D=E7=BD=AE=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=9D=83=E9=87=8D=E5=9B=BE=E9=80=89=E9=A1=B9=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=AE=A2=E5=8D=95=E9=9D=A2=E6=9D=BF=E7=9A=84=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useTradingView.ts           |  4 ++--
 src/views/trade/components/orders-panel.vue | 24 +++++++++------------
 src/views/trade/index.vue                   |  7 +++++-
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/composables/useTradingView.ts b/src/composables/useTradingView.ts
index d70763e..565160f 100644
--- a/src/composables/useTradingView.ts
+++ b/src/composables/useTradingView.ts
@@ -1,5 +1,5 @@
 import type { Awaitable } from "@vueuse/core";
-import type { ChartOptions, DeepPartial, IChartApi, ISeriesApi, LayoutOptions, OhlcData, SeriesDataItemTypeMap, SeriesType } from "lightweight-charts";
+import type { ChartOptions, DeepPartial, IChartApi, ISeriesApi, LayoutOptions, SeriesDataItemTypeMap, SeriesType } from "lightweight-charts";
 import type { ThemeMode } from "./useTheme";
 import { AreaSeries, BarSeries, BaselineSeries, CandlestickSeries, ColorType, createChart, HistogramSeries, LineSeries } from "lightweight-charts";
 import { cloneDeep, mergeWith } from "lodash-es";
@@ -149,5 +149,5 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
     chart.value.applyOptions(newOptions);
   }, { deep: true });
 
-  return { chart, fitContent, resize };
+  return { chart, series, fitContent, resize };
 }
diff --git a/src/views/trade/components/orders-panel.vue b/src/views/trade/components/orders-panel.vue
index 31eaec4..db8865b 100644
--- a/src/views/trade/components/orders-panel.vue
+++ b/src/views/trade/components/orders-panel.vue
@@ -120,20 +120,16 @@ async function cancelOrder(orderId: string) {
 <template>
   <div class="orders-panel">
     <!-- Tab切换 -->
-    <div class="tabs-header">
-      <button
-        :class="{ active: activeTab === 'current' }"
-        @click="activeTab = 'current'"
-      >
-        当前委托 ({{ currentOrders.length }})
-      </button>
-      <button
-        :class="{ active: activeTab === 'history' }"
-        @click="activeTab = 'history'"
-      >
-        历史记录
-      </button>
-    </div>
+    <ui-tabs v-model="activeTab" size="small" class="px-4">
+      <ui-tab-pane
+        title="当前委托"
+        name="current"
+      />
+      <ui-tab-pane
+        title="历史记录"
+        name="history"
+      />
+    </ui-tabs>
 
     <!-- 订单列表 -->
     <div class="orders-list">
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index c62b50d..5cd4110 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -7,7 +7,7 @@ import TradingPairHeader from "./components/trading-pair-header.vue";
 const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer");
 
 // K线图配置
-useTradingView(tradingViewContainer, {
+const { series } = useTradingView(tradingViewContainer, {
   data: [
     // TODO: 后续从API获取K线数据
     // const { data } = await client.api.trading.kline.get({ query: { symbol: 'BTC_USDT', interval: '1h' } })
@@ -19,6 +19,11 @@ useTradingView(tradingViewContainer, {
     { time: "2023-10-06", open: 44500, high: 45000, low: 44200, close: 44800 },
     { time: "2023-10-07", open: 44800, high: 45500, low: 44500, close: 43250 },
   ],
+  weightChartOptions: {
+    rightPriceScale: {
+      visible: false,
+    },
+  },
 });
 
 // 买卖切换