root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Seven
2025-12-28 00:19:12 +07:00
parent 0b0e67114c
commit 04bc5ff95d
3 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/composables/useTradingView.ts
View File

@@ -1,5 +1,5 @@
import type { Awaitable } from "@vueuse/core"; 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 type { ThemeMode } from "./useTheme";
import { AreaSeries, BarSeries, BaselineSeries, CandlestickSeries, ColorType, createChart, HistogramSeries, LineSeries } from "lightweight-charts"; import { AreaSeries, BarSeries, BaselineSeries, CandlestickSeries, ColorType, createChart, HistogramSeries, LineSeries } from "lightweight-charts";
import { cloneDeep, mergeWith } from "lodash-es"; import { cloneDeep, mergeWith } from "lodash-es";
@@ -149,5 +149,5 @@ export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, opt
chart.value.applyOptions(newOptions); chart.value.applyOptions(newOptions);
}, { deep: true }); }, { deep: true });
return { chart, fitContent, resize }; return { chart, series, fitContent, resize };
} }

24
src/views/trade/components/orders-panel.vue
View File

@@ -120,20 +120,16 @@ async function cancelOrder(orderId: string) {
<template> <template>
<div class="orders-panel"> <div class="orders-panel">
<!-- Tab切换 --> <!-- Tab切换 -->
<div class="tabs-header"> <ui-tabs v-model="activeTab" size="small" class="px-4">
<button <ui-tab-pane
:class="{ active: activeTab === 'current' }" title="当前委托"
@click="activeTab = 'current'" name="current"
> />
当前委托 ({{ currentOrders.length }}) <ui-tab-pane
</button> title="历史记录"
<button name="history"
:class="{ active: activeTab === 'history' }" />
@click="activeTab = 'history'" </ui-tabs>
>
历史记录
</button>
</div>
<!-- 订单列表 --> <!-- 订单列表 -->
<div class="orders-list"> <div class="orders-list">

7
src/views/trade/index.vue
View File

@@ -7,7 +7,7 @@ import TradingPairHeader from "./components/trading-pair-header.vue";
const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer"); const tradingViewContainer = useTemplateRef<HTMLElement>("tradingViewContainer");
// K线图配置 // K线图配置
useTradingView(tradingViewContainer, { const { series } = useTradingView(tradingViewContainer, {
data: [ data: [
// TODO: 后续从API获取K线数据 // TODO: 后续从API获取K线数据
// const { data } = await client.api.trading.kline.get({ query: { symbol: 'BTC_USDT', interval: '1h' } }) // 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-06", open: 44500, high: 45000, low: 44200, close: 44800 },
{ time: "2023-10-07", open: 44800, high: 45500, low: 44500, close: 43250 }, { time: "2023-10-07", open: 44800, high: 45500, low: 44500, close: 43250 },
], ],
weightChartOptions: {
rightPriceScale: {
visible: false,
},
},
}); });
// 买卖切换 // 买卖切换