From 5ed7781f36e1d083b0474b2734e3ae0ca4d5e87c Mon Sep 17 00:00:00 2001 From: Seven Date: Tue, 30 Dec 2025 03:00:50 +0700 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E7=8E=AF=E5=A2=83?= =?UTF-8?q?=E5=8F=98=E9=87=8F=EF=BC=8C=E4=BF=AE=E5=A4=8D=20TradingView=20?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=85=8D=E7=BD=AE=EF=BC=9B=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20TradingViewChart=20=E7=BB=84=E4=BB=B6=E7=9A=84=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +-- .env.production | 4 +-- capacitor.config.ts | 2 +- src/tradingview/index.tsx | 58 +++++++++++++++++++++++++++++++++------ src/views/trade/index.vue | 12 ++++++-- 5 files changed, 65 insertions(+), 15 deletions(-) diff --git a/.env.development b/.env.development index e0116d3..a376891 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ -VITE_API_URL=http://192.168.1.27:9528 -VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.37:6173 +VITE_API_URL=http://192.168.1.3:9528 +VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.5:6173 VITE_TRADINGVIEW_DATA_API_URL=https://demo-feed-data.tradingview.com \ No newline at end of file diff --git a/.env.production b/.env.production index 4dcf6cd..28ba411 100644 --- a/.env.production +++ b/.env.production @@ -1,3 +1,3 @@ -VITE_API_URL=http://192.168.1.27:9527 -VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.37:6173 +VITE_API_URL=http://192.168.1.3:9527 +VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.5:6173 VITE_TRADINGVIEW_DATA_API_URL=https://demo-feed-data.tradingview.com \ No newline at end of file diff --git a/capacitor.config.ts b/capacitor.config.ts index cbdd5bd..b41e291 100644 --- a/capacitor.config.ts +++ b/capacitor.config.ts @@ -5,7 +5,7 @@ const config: CapacitorConfig = { appName: "riwa-ionic", webDir: "dist", server: { - url: "http://192.168.1.37:5173", // Vite默认端口 + url: "http://192.168.1.5:5173", // Vite默认端口 cleartext: true, // 允许HTTP连接 }, plugins: { diff --git a/src/tradingview/index.tsx b/src/tradingview/index.tsx index 1d778ea..4d3066e 100644 --- a/src/tradingview/index.tsx +++ b/src/tradingview/index.tsx @@ -1,5 +1,8 @@ +/* eslint-disable new-cap */ import type { ChartingLibraryWidgetOptions, IChartingLibraryWidget } from "#/charting_library"; import type { ResolutionString } from "#/datafeed-api"; +import type { CSSProperties } from "vue"; +import { mergeWith } from "lodash-es"; import { RWADatafeed } from "./datafeed"; const { VITE_TRADINGVIEW_LIBRARY_URL, VITE_TRADINGVIEW_DATA_API_URL } = useEnv(); @@ -49,6 +52,9 @@ const defaultOptions = { ], // 图表样式配置 overrides: { + "paneProperties.backgroundType": "solid", + "paneProperties.background": "#000000", + "paneProperties.vertGridProperties.color": "transparent", // 隐藏垂直网格线 "mainSeriesProperties.candleStyle.upColor": "#0ecb81", // 涨（绿色） "mainSeriesProperties.candleStyle.downColor": "#f6465d", // 跌（红色） "mainSeriesProperties.candleStyle.borderUpColor": "#0ecb81", @@ -65,8 +71,13 @@ const defaultOptions = { export const TradingViewChart = defineComponent({ name: "TradingViewChart", props: { - symbol: { - type: String, + width: { + type: [String, Number] as PropType, + required: false, + }, + height: { + type: [String, Number] as PropType, + required: false, }, options: { type: Object as PropType>, @@ -78,22 +89,53 @@ export const TradingViewChart = defineComponent({ const { isDark } = useTheme(); const widget = ref(null); + function applyThemeOverrides(isDarkTheme: boolean) { + if (!widget.value) + return; + widget.value?.applyOverrides({ + "paneProperties.backgroundType": "solid", + "paneProperties.background": isDarkTheme ? "#000000" : "#FFFFFF", + + "paneProperties.horzGridProperties.color": isDarkTheme ? "#222831" : "#e6e6e6", + "scalesProperties.textColor": isDarkTheme ? "#FFFFFF" : "#131722", + }); + } + + const opts = mergeWith({}, defaultOptions, props.options); + + const styles = computed(() => { + const style: CSSProperties = {}; + if (props.width !== undefined) + style.width = typeof props.width === "number" ? `${props.width}px` : props.width; + if (props.height !== undefined) + style.height = typeof props.height === "number" ? `${props.height}px` : props.height; + style["--themed-color-text-primary"] = isDark.value ? "#FFFFFF" : "#000000"; + return style; + }); + onMounted(() => { - // eslint-disable-next-line new-cap widget.value = new TradingView.widget({ - ...defaultOptions, - ...props.options, + ...opts, theme: isDark.value ? "dark" : "light", container: el.value!, }); widget.value.onChartReady(() => { console.log("[TradingView]: Chart is ready"); + applyThemeOverrides(isDark.value); }); - - console.log("widget", widget.value.activeChart); }); - return () =>
; + // 监听主题变化，动态更新图表主题 + watch(isDark, (newValue) => { + if (!widget.value) + return; + widget.value.changeTheme(newValue ? "dark" : "light"); + useTimeoutFn(() => { + applyThemeOverrides(newValue); + }, 0); + }); + + return () =>
; }, }); diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue index 7ecb695..e5dbf52 100644 --- a/src/views/trade/index.vue +++ b/src/views/trade/index.vue @@ -1,4 +1,5 @@