feat: 添加交易视图功能，集成 lightweight-charts 库，优化数据展示

src/composables/useTradingView.ts

@@ -0,0 +1,134 @@
+import type { Awaitable } from "@vueuse/core";
+import type { ChartOptions, DeepPartial, IChartApi, ISeriesApi, OhlcData, SeriesOptionsMap, SeriesType } from "lightweight-charts";
+import { AreaSeries, BarSeries, BaselineSeries, CandlestickSeries, ColorType, createChart, HistogramSeries, LineSeries } from "lightweight-charts";
+import { mergeWith } from "lodash-es";
+
+export type Series = "Area" | "Bar" | "Baseline" | "Candlestick" | "Histogram" | "Line";
+
+export type TData = OhlcData;
+
+export type WeightChartOptions = DeepPartial<ChartOptions>;
+
+export type TradingViewData = (() => Awaitable<TData[]>) | MaybeRefOrGetter<TData[]>;
+
+export interface TradingViewOptions<T = Series> {
+  theme?: "light" | "dark";
+  type?: T;
+  data?: TradingViewData;
+  weightChartOptions?: MaybeRefOrGetter<WeightChartOptions>;
+  autosize?: boolean;
+}
+
+const initializeOptions: Required<TradingViewOptions> = {
+  theme: "dark",
+  type: "Candlestick",
+  data: [],
+  weightChartOptions: {
+    width: 400,
+    height: 300,
+    layout: {
+      textColor: "white",
+      background: { type: ColorType.Solid, color: "#000000" },
+    },
+  },
+  autosize: true,
+};
+
+function getChartSeriesDefinition(type: Series) {
+  switch (type) {
+    case "Area":
+      return AreaSeries;
+    case "Bar":
+      return BarSeries;
+    case "Baseline":
+      return BaselineSeries;
+    case "Candlestick":
+      return CandlestickSeries;
+    case "Histogram":
+      return HistogramSeries;
+    case "Line":
+      return LineSeries;
+    default:
+      return CandlestickSeries;
+  }
+}
+
+export function useTradingView(target: MaybeRefOrGetter<HTMLElement | null>, options?: TradingViewOptions) {
+  const opts: Required<TradingViewOptions> = mergeWith(initializeOptions, options);
+  const chart = ref<IChartApi | null>(null);
+  const chartSeriesDefinition = getChartSeriesDefinition(opts.type);
+  const chartEl = ref<HTMLElement | null>(null);
+  const series = ref<ISeriesApi<SeriesType> | null>(null);
+
+  function fitContent() {
+    chart.value?.timeScale().fitContent();
+  }
+
+  function resize() {
+    if (!chart.value || !chartEl.value)
+      return;
+    const dimensions = chartEl.value.getBoundingClientRect();
+    chart.value.resize(dimensions.width, dimensions.height);
+  }
+
+  function setData(data: TradingViewData) {
+    if (isRef(data)) {
+      series.value?.setData(toValue(data));
+    }
+    else if (isFunction(data)) {
+      const result = data();
+      if (isPromise(result)) {
+        result.then((data) => {
+          series.value?.setData(data);
+          fitContent();
+        }).catch((err) => {
+          console.error("Failed to load trading view data:", err);
+        });
+      }
+      else {
+        series.value?.setData(result);
+      }
+    }
+    else {
+      series.value?.setData(toValue(data));
+    }
+  }
+
+  tryOnMounted(() => {
+    const el = unrefElement(target);
+    if (!el)
+      return;
+    chartEl.value = el;
+    chart.value = createChart(el, toValue(opts.weightChartOptions));
+    series.value = chart.value.addSeries(chartSeriesDefinition);
+    setData(opts.data);
+    fitContent();
+
+    if (isRef(opts.data)) {
+      watch(opts.data, (newData) => {
+        setData(newData);
+      }, { deep: true });
+    }
+
+    if (opts.autosize) {
+      useTimeoutFn(() => {
+        resize();
+      }, 0);
+      window.addEventListener("resize", resize);
+    }
+  });
+
+  tryOnUnmounted(() => {
+    chart.value?.remove();
+    chart.value = null;
+    window.removeEventListener("resize", resize);
+  });
+
+  watch(() => toValue(opts.weightChartOptions), (newOptions) => {
+    if (!chart.value)
+      return;
+    chart.value.applyOptions(newOptions);
+  }, { deep: true });
+
+  return { chart, fitContent, resize };
+}