feat: 添加 TradingView 相关环境变量和初始化逻辑；重构交易视图组件

src/tradingview/index.tsx

@@ -1,22 +1,60 @@
+import type { ChartingLibraryWidgetOptions } from "#/charting_library";
 import type { ResolutionString } from "#/datafeed-api";
 
+const { VITE_TRADINGVIEW_LIBRARY_URL, VITE_TRADINGVIEW_DATA_API_URL } = useEnv();
+
+const defaultOptions = {
+  container: "tradingview_chart_container",
+  locale: "zh",
+  library_path: `${VITE_TRADINGVIEW_LIBRARY_URL}/charting_library/`,
+  datafeed: new Datafeeds.UDFCompatibleDatafeed(VITE_TRADINGVIEW_DATA_API_URL, 60000),
+  symbol: "AAPL",
+  interval: "1D" as ResolutionString,
+  debug: true,
+  autosize: true,
+  // 禁用移动端不友好的功能
+  disabled_features: [
+    "left_toolbar", // 隐藏左侧绘图工具栏
+    "timeframes_toolbar", // 隐藏底部时间框架工具栏
+    "volume_force_overlay", // 禁用成交量覆盖在价格图表上
+    // 禁用顶部工具栏
+    "header_widget",
+    "header_compare",
+    "header_symbol_search",
+    "header_fullscreen_button",
+    "header_settings",
+  ],
+  // 启用移动端友好的功能
+  enabled_features: [
+    "show_zoom_and_move_buttons_on_touch", // 在触摸设备上显示缩放和移动按钮
+    "adaptive_logo", // 在小屏幕设备上隐藏 TradingView logo
+  ],
+} satisfies ChartingLibraryWidgetOptions;
+
 export const TradingViewChart = defineComponent({
   name: "TradingViewChart",
-  setup(props, ctx) {
-    const chartContainer = ref<HTMLDivElement>();
+  props: {
+    options: {
+      type: Object as PropType<Partial<ChartingLibraryWidgetOptions>>,
+      required: false,
+    },
+  },
+  setup(props) {
+    const el = ref<HTMLDivElement | null>(null);
+
     onMounted(() => {
       // eslint-disable-next-line new-cap
-      const tradingView = new TradingView.widget({
-        container: chartContainer.value!,
-        locale: "en",
-        library_path: "http://localhost:6173/charting_library/",
-        datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
-        symbol: "AAPL",
-        interval: "1D" as ResolutionString,
-        debug: true,
+      const widget = new TradingView.widget({
+        ...defaultOptions,
+        ...props.options,
+        container: el.value!,
+      });
+
+      widget.onChartReady(() => {
+        widget.setDebugMode(true);
       });
     });
 
-    return () => <div ref={chartContainer} class="w-full h-150" />;
+    return () => <div ref={el} class="w-full h-70" />;
   },
 });