feat: 更新交易视图配置，添加权重图选项并优化订单面板的标签切换

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

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">

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,
+    },
+  },
 });
 
 // 买卖切换