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

.env.development

@@ -1,3 +1,3 @@
-VITE_API_URL=http://192.168.1.27:9528
+VITE_API_URL=http://192.168.1.3:9528
-VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.37:6173
+VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.5:6173
 VITE_TRADINGVIEW_DATA_API_URL=https://demo-feed-data.tradingview.com

.env.production

@@ -1,3 +1,3 @@
-VITE_API_URL=http://192.168.1.27:9527
+VITE_API_URL=http://192.168.1.3:9527
-VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.37:6173
+VITE_TRADINGVIEW_LIBRARY_URL=http://192.168.1.5:6173
 VITE_TRADINGVIEW_DATA_API_URL=https://demo-feed-data.tradingview.com

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: {

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: {
+    width: {
-      type: String,
+      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,
+        ...opts,
-        ...props.options,
         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} />;
   },
 });

src/views/trade/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ChartingLibraryWidgetOptions } from "#/charting_library";
 import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
 import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/candlestick-chart-outline";
 import { TradingViewChart } from "@/tradingview/index";
@@ -7,6 +8,12 @@ import TradeSwitch from "./components/trade-switch.vue";
 import TradeWay from "./components/trade-way.vue";
 
 const mode = ref<"buy" | "sell">("buy");
+const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
+  symbol: "BTC/USDT",
+  disabled_features: [
+    "create_volume_indicator_by_default",
+  ],
+};
 </script>
 
 <template>
@@ -33,6 +40,8 @@ const mode = ref<"buy" | "sell">("buy");
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
+      <TradingViewChart class="mb-5" height="300px" :options="tradingviewOptions" />
+
       <div class="grid grid-cols-5 px-4">
         <div class="col-span-3 space-y-2">
           <TradeSwitch v-model:active="mode" />
@@ -47,8 +56,7 @@ const mode = ref<"buy" | "sell">("buy");
         </div>
         <div class="col-span-2" />
       </div>
-      <TradingViewChart class="my-5" />
+      <div class="mt-6 px-4 pb-4">
-      <div class="mt-6 px-4">
         <OrdersPanel />
       </div>
     </ion-content>