feat: 更新交易视图，添加成交量数据支持并优化用户界面

2025-12-28 17:59:40 +07:00
parent b6cb514bcd
commit 51feb991b8
8 changed files with 172 additions and 139 deletions
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -358,7 +358,7 @@ declare global {
  export type { ThemeMode } from './src/composables/useTheme'
  import('./src/composables/useTheme')
  // @ts-ignore
-  export type { Series, TData, WeightChartOptions, TradingViewData, TradingViewOptions } from './src/composables/useTradingView'
+  export type { Series, TData, WeightChartOptions, TradingViewData, VolumeData, TradingViewOptions } from './src/composables/useTradingView'
  import('./src/composables/useTradingView')
  // @ts-ignore
  export type { HapticsOptions } from './src/composables/useVibrate'
--- 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, SeriesDataItemTypeMap, SeriesType } from "lightweight-charts";
+import type { ChartOptions, DeepPartial, HistogramData, IChartApi, ISeriesApi, LayoutOptions, SeriesDataItemTypeMap, SeriesType, Time } 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";
@@ -12,12 +12,19 @@ export type WeightChartOptions = DeepPartial<ChartOptions>;

 export type TradingViewData = (() => Awaitable<TData[]>) | MaybeRefOrGetter<TData[]>;

+export interface VolumeData extends HistogramData {
+  value: number;
+  color?: string;
+}
+
 export interface TradingViewOptions<T = Series> {
  theme?: ThemeMode;
  type?: T;
  data?: TradingViewData;
+  volumeData?: MaybeRefOrGetter<VolumeData[]>;
  weightChartOptions?: MaybeRefOrGetter<WeightChartOptions>;
  autosize?: boolean;
+  showVolume?: boolean;
 }

 const lightThemeLayout: Partial<LayoutOptions> = {
@@ -34,11 +41,13 @@ const initializeOptions: Required<TradingViewOptions> = {
  theme: "dark",
  type: "Candlestick",
  data: [],
+  volumeData: [],
  weightChartOptions: {
    width: 400,
    height: 300,
  },
  autosize: true,
+  showVolume: true,
 };

 function getChartSeriesDefinition(type: Series) {
@@ -68,6 +77,7 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
  const chartSeriesDefinition = getChartSeriesDefinition(opts.type);
  const chartEl = ref<HTMLElement | null>(null);
  const series = ref<ISeriesApi<SeriesType> | null>(null);
+  const volumeSeries = ref<ISeriesApi<"Histogram"> | null>(null);

  function fitContent() {
    chart.value?.timeScale().fitContent();
@@ -103,6 +113,13 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
    }
  }

+  function setVolumeData(data: MaybeRefOrGetter<VolumeData[]>) {
+    if (!volumeSeries.value)
+      return;
+    const volumeData = toValue(data);
+    volumeSeries.value.setData(volumeData);
+  }
+
  function changeTheme(theme: ThemeMode) {
    if (!chart.value)
      return;
@@ -115,11 +132,43 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
    if (!el)
      return;
    chartEl.value = el;
-    chart.value = createChart(el, toValue(opts.weightChartOptions));
-    series.value = chart.value.addSeries(chartSeriesDefinition);
+
+    const chartOptions = toValue(opts.weightChartOptions);
+    chart.value = createChart(el, chartOptions);
+    series.value = chart.value.addSeries(chartSeriesDefinition, {
+      priceFormat: {
+        type: "price",
+        precision: 1,
+      },
+    });
+
+    // 添加成交量副图
+    if (opts.showVolume) {
+      volumeSeries.value = chart.value.addSeries(HistogramSeries, {
+        priceFormat: {
+          type: "volume",
+        },
+        priceScaleId: "", // 设置为右侧价格轴
+      });
+
+      // 配置成交量图表在底部
+      chart.value.priceScale("").applyOptions({
+        scaleMargins: {
+          top: 0.8,
+          bottom: 0,
+        },
+      });
+
+      // 设置成交量数据
+      if (opts.volumeData) {
+        setVolumeData(opts.volumeData);
+      }
+    }
+
    watch(isDark, (dark) => {
      changeTheme(dark ? "dark" : "light");
    }, { immediate: true });
+
    setData(opts.data);
    fitContent();

@@ -129,6 +178,12 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
      }, { deep: true });
    }

+    if (isRef(opts.volumeData)) {
+      watch(opts.volumeData, (newData) => {
+        setVolumeData(newData);
+      }, { deep: true });
+    }
+
    if (opts.autosize) {
      useTimeoutFn(() => {
        resize();
@@ -149,5 +204,5 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
    chart.value.applyOptions(newOptions);
  }, { deep: true });

-  return { chart, series, fitContent, resize };
+  return { chart, series, volumeSeries, fitContent, resize, setVolumeData };
 }
--- a/src/ui/tabs/index.vue
+++ b/src/ui/tabs/index.vue
@@ -337,7 +337,7 @@ const stickyStyle = computed(() => {

 /* 导航包装器 */
 .ui-tabs__nav-wrapper {
-  @apply relative;
+  @apply relative w-fit mb-4;
 }

 /* Sticky 布局 */
@@ -374,7 +374,7 @@ const stickyStyle = computed(() => {
 }

 .ui-tabs__nav--segment {
-  @apply gap-1 p-1 rounded-lg;
+  @apply gap-1 p-1 rounded-full;
  background-color: var(--ion-color-light, #f8f9fa);
 }

@@ -427,11 +427,12 @@ const stickyStyle = computed(() => {

 /* Segment 类型 */
 .ui-tab--segment {
-  @apply px-3 py-2 rounded-md;
+  @apply px-3 py-2 rounded-full;
 }

 .ui-tab--segment.ui-tab--active {
  background-color: var(--ui-tabs-background);
+  color: var(--ui-tabs-text, "black");
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -448,7 +449,11 @@ const stickyStyle = computed(() => {
 }

 .ui-tab--small.ui-tab--segment {
-  @apply px-2 py-1;
+  @apply px-5 py-1;
+}
+
+.ui-tab--medium.ui-tab--segment {
+  @apply px-8 py-1;
 }

 .ui-tab--large {
@@ -461,7 +466,7 @@ const stickyStyle = computed(() => {
 }

 .ui-tab--large.ui-tab--segment {
-  @apply px-4 py-3;
+  @apply px-8 py-3;
 }

 /* Tab Label */
--- a/src/views/market/index.vue
+++ b/src/views/market/index.vue
@@ -73,13 +73,13 @@ onBeforeMount(() => {
        <ion-refresher-content />
      </ion-refresher>

-      <!-- <ui-tabs size="small" class="mb-3">
-        <ui-tab-pane name="all" title="数字化产品" />
+      <ui-tabs type="segment" class="tabs">
+        <ui-tab-pane name="all" title="数字化产品">
+          <Category v-model="query!.categoryId" />
+          <RwaList :data="rwaData" />
+        </ui-tab-pane>
        <ui-tab-pane name="stocks" title="代币化产品" />
-      </ui-tabs> -->
-
-      <Category v-model="query!.categoryId" />
-      <RwaList :data="rwaData" />
+      </ui-tabs>

      <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
        <ion-infinite-scroll-content
@@ -91,8 +91,19 @@ onBeforeMount(() => {
  </IonPage>
 </template>

-<style scoped>
+<style lang="css" scoped>
 ion-searchbar {
  padding: 0;
 }
+:deep(.tabs) .ui-tabs__nav-wrapper {
+  margin: 0 auto;
+  margin-bottom: 10px;
+  width: 100%;
+}
+:deep(.tabs) .ui-tab--segment {
+  font-size: 13px;
+  padding: 8px !important;
+  flex: 1;
+  text-align: center;
+}
 </style>
--- a/src/views/system-settings/outlet.vue
+++ b/src/views/system-settings/outlet.vue
@@ -2,15 +2,7 @@

 <template>
  <ion-page>
-    <ion-header>
-      <ion-toolbar class="ui-toolbar">
-        <ui-back-button slot="start" />
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content :fullscreen="true" class="ion-padding">
-      <ion-router-outlet />
-    </ion-content>
+    <ion-router-outlet />
  </ion-page>
 </template>

--- a/src/views/trade-settings/my-issues/outlet.vue
+++ b/src/views/trade-settings/my-issues/outlet.vue
@@ -1,16 +1,9 @@
 <script lang='ts' setup>
-const { t } = useI18n();
 </script>

 <template>
  <ion-page>
-    <ion-header>
-      <ion-toolbar class="ui-toolbar">
-        <ui-back-button slot="start" />
-        <ion-title>{{ t('myIssues.title') }}</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <router-view />
+    <ion-router-outlet />
  </ion-page>
 </template>

--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -1,34 +1,87 @@
 <script setup lang="ts">
+import type { VolumeData } from "@/composables/useTradingView";
 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");
+const tradeAction = ref<"buy" | "sell">("buy");
+// 时间周期选项
+const timeIntervals = [
+  { label: "分时", value: "1m" },
+  { label: "1分", value: "1m" },
+  { label: "5分", value: "5m" },
+  { label: "15分", value: "15m" },
+  { label: "30分", value: "30m" },
+  { label: "1时", value: "1h" },
+  { label: "4时", value: "4h" },
+  { label: "日线", value: "1d" },
+  { label: "周线", value: "1w" },
+];

-// K线图配置
-const { series } = useTradingView(tradingViewContainer, {
-  data: [
-    // 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 selectedInterval = ref("15m");
+
+// 技术指标选项
+const indicators = [
+  { label: "MA", value: "ma" },
+  { label: "EMA", value: "ema" },
+  { label: "BOLL", value: "boll" },
+  { label: "SAR", value: "sar" },
+];
+
+const selectedIndicator = ref("");
+const showIndicatorMenu = ref(false);
+
+// K线数据和成交量数据
+// TODO: 后续从API获取K线数据
+const klineData = ref([
+  { time: "2024-01-01", open: 42000, high: 43100, low: 41800, close: 42500 },
+  { time: "2024-01-02", open: 42500, high: 43500, low: 42200, close: 43000 },
+  { time: "2024-01-03", open: 43000, high: 44200, low: 42800, close: 43800 },
+  { time: "2024-01-04", open: 43800, high: 44500, low: 43500, close: 44200 },
+  { time: "2024-01-05", open: 44200, high: 44800, low: 43900, close: 44500 },
+  { time: "2024-01-06", open: 44500, high: 45000, low: 44200, close: 44800 },
+  { time: "2024-01-07", open: 44800, high: 45500, low: 44500, close: 45250 },
+  { time: "2024-01-08", open: 45250, high: 46000, low: 45100, close: 45800 },
+  { time: "2024-01-09", open: 45800, high: 46200, low: 45500, close: 45600 },
+  { time: "2024-01-10", open: 45600, high: 45900, low: 45200, close: 45400 },
+  { time: "2024-01-11", open: 45400, high: 45800, low: 44900, close: 45100 },
+  { time: "2024-01-12", open: 45100, high: 45500, low: 44700, close: 45200 },
+  { time: "2024-01-13", open: 45200, high: 45800, low: 45000, close: 45600 },
+  { time: "2024-01-14", open: 45600, high: 46500, low: 45500, close: 46300 },
+  { time: "2024-01-15", open: 46300, high: 47000, low: 46200, close: 46800 },
+]);
+
+// 成交量数据（与K线对应）
+const volumeData = computed<VolumeData[]>(() => {
+  return klineData.value.map((item, index) => {
+    const prevClose = index > 0 ? klineData.value[index - 1].close : item.open;
+    const isUp = item.close >= prevClose;
+    return {
+      time: item.time,
+      value: Math.random() * 1000000 + 500000, // 模拟成交量
+      color: isUp ? "rgba(38, 166, 154, 0.5)" : "rgba(239, 83, 80, 0.5)",
+    };
+  });
+});
+
+useTradingView(tradingViewContainer, {
+  data: klineData,
+  volumeData,
+  showVolume: true,
  weightChartOptions: {
-    height: 180,
+    height: 200,
+    layout: {
+      textColor: "#d1d4dc",
+      fontSize: 12,
+    },
    rightPriceScale: {
-      visible: false,
+      borderVisible: false,
    },
  },
 });
-
-// 买卖切换
-const tradeAction = ref<"buy" | "sell">("buy");
+const activeTab = ref("buy");
 </script>

 <template>
@@ -39,95 +92,19 @@ const tradeAction = ref<"buy" | "sell">("buy");
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
-      <!-- 交易对头部信息 -->
-      <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>
+      <ui-tabs v-model="activeTab" type="segment">
+        <ui-tab-pane title="买入" name="buy">
+          <div>
+            分段控件以水平行的形式显示一组相关的按钮（有时也称为分段控件）。它们可以显示在工具栏或主要内容区域内。
+            它们的功能类似于标签页，选择一个标签页会取消选择其他所有标签页。分段功能用于在内容的不同视图之间切换。当点击控件需要在页面之间导航时，应使用标签页而不是分段功能。
+          </div>
+        </ui-tab-pane>
+        <ui-tab-pane title="卖出" name="sell" />
+      </ui-tabs>
    </ion-content>
  </ion-page>
 </template>

-<style scoped>
-.chart-container {
-  height: 180px;
-  width: 100%;
-}
+<style lang="css" scoped>

-.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>
--- a/src/views/user-settings/outlet.vue
+++ b/src/views/user-settings/outlet.vue
@@ -8,7 +8,7 @@
        <ion-title>用户设置</ion-title>
      </ion-toolbar>
    </ion-header>
-    <router-view />
+    <ion-router-outlet />
  </ion-page>
 </template>