feat: 更新环境变量，修复 TradingView 相关配置；优化 TradingViewChart 组件的使用方式

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<string | number>,
+      required: false,
+    },
+    height: {
+      type: [String, Number] as PropType<string | number>,
+      required: false,
     },
     options: {
       type: Object as PropType<Partial<ChartingLibraryWidgetOptions>>,
@@ -78,22 +89,53 @@ export const TradingViewChart = defineComponent({
     const { isDark } = useTheme();
     const widget = ref<IChartingLibraryWidget | null>(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 () => <div ref={el} class="w-full h-100" />;
+    // 监听主题变化，动态更新图表主题
+    watch(isDark, (newValue) => {
+      if (!widget.value)
+        return;
+      widget.value.changeTheme(newValue ? "dark" : "light");
+      useTimeoutFn(() => {
+        applyThemeOverrides(newValue);
+      }, 0);
+    });
+
+    return () => <div ref={el} class="w-full" style={styles.value} />;
   },
 });