feat(web): K线图库对比 —— TradingView Lightweight Charts 实现 + 双库切换

- 按确认方案「两套实现并存对比」：
  - npm 依赖 lightweight-charts@4.2.3（v3 §21 推荐库）
  - components/StockChart/chartTypes.ts：共享 props 接口
  - CandleChart.tsx（ECharts 版，重构复用共享类型）+ CandleChartLW.tsx
    （Lightweight 版：蜡烛+成交量副刻度+MA+成交实心箭头/未成交信号圆点 markers）
  - StockChart.tsx wrapper；个股页顶部「ECharts / Lightweight」切换（默认 Lightweight）
- /stocks/600519.SH 冒烟 200；tsc --noEmit 通过

frontend/web/app/stocks/[symbol]/page.tsx

@@ -18,7 +18,8 @@ import {
   Empty,
   SkeletonLines,
 } from "@/components/ui";
-import { CandleChart, type CandleDatum } from "@/components/StockChart/CandleChart";
+import type { CandleDatum } from "@/components/StockChart/chartTypes";
+import { StockChart, type ChartLibrary } from "@/components/StockChart/StockChart";
 
 export default function StockResearchPage() {
   const params = useParams<{ symbol: string }>();
@@ -28,6 +29,7 @@ export default function StockResearchPage() {
   const [signalMarkers, setSignalMarkers] = useState<ChartMarker[]>([]);
   const [selectionMarkers, setSelectionMarkers] = useState<ChartMarker[]>([]);
   const [adjust, setAdjust] = useState<"none" | "qfq" | "hfq">("none");
+  const [chartLib, setChartLib] = useState<ChartLibrary>("lightweight");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
@@ -80,6 +82,11 @@ export default function StockResearchPage() {
         }
         actions={
           <div className="row" style={{ gap: 6 }}>
+            {(["echarts", "lightweight"] as const).map((l) => (
+              <Btn key={l} variant={chartLib === l ? "primary" : undefined} onClick={() => setChartLib(l)}>
+                {l === "echarts" ? "ECharts" : "Lightweight"}
+              </Btn>
+            ))}
             {(["none", "qfq", "hfq"] as const).map((m) => (
               <Btn
                 key={m}
@@ -113,7 +120,8 @@ export default function StockResearchPage() {
             {candles.length === 0 ? (
               <Empty icon="chartLine" title="无 K 线数据" hint="该区间/口径没有行情（可能停牌或未同步）。" />
             ) : (
-              <CandleChart
+              <StockChart
+                library={chartLib}
                 data={candles}
                 volume={chart?.volume ?? []}
                 indicators={chart?.indicators ?? {}}

frontend/web/components/StockChart/CandleChart.tsx

@@ -8,7 +8,8 @@
  * - signals（未成交意图）：空心标记 —— signal_buy 红圈 ▲ / signal_sell 绿圈
  * 组件只做展示，绝不自行计算（数据来自后端 Chart API）。
  *
- * 基于 ECharts candlestick；组件层隔离，便于后续替换 TradingView Lightweight Charts。
+ * 基于 ECharts candlestick（ECharts 实现）；另一套实现见 CandleChartLW.tsx（TradingView
+ * Lightweight Charts），两套共用同一 props 接口（chartTypes.ts）供对比。
  */
 import { useEffect, useRef } from "react";
 import * as echarts from "echarts/core";
@@ -16,6 +17,8 @@ import { BarChart, CandlestickChart, LineChart, ScatterChart } from "echarts/cha
 import { GridComponent, TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import type { ChartMarker } from "@/lib/types";
+import type { CandleChartProps } from "./chartTypes";
+export type { CandleDatum } from "./chartTypes";
 
 echarts.use([
   CandlestickChart,
@@ -38,31 +41,15 @@ const C = {
   ma60: "#d4a72c",
 };
 
-export interface CandleDatum {
-  time: string;
-  open: number;
-  close: number;
-  low: number;
-  high: number;
-}
-
 export function CandleChart({
   data,
-  volume,
+  volume = [],
   indicators = {},
   fills = [],
   signals = [],
   height = 480,
   name = "",
-}: {
+}: CandleChartProps) {
-  data: CandleDatum[];
-  volume?: { time: string; value: number | null }[];
-  indicators?: Record<string, { time: string; value: number | null }[]>;
-  fills?: ChartMarker[];
-  signals?: ChartMarker[];
-  height?: number;
-  name?: string;
-}) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {

frontend/web/components/StockChart/CandleChartLW.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+/**
+ * K 线图 —— TradingView Lightweight Charts 实现（v3 §21 推荐库）。
+ *
+ * 与 ECharts 版（CandleChart.tsx）共用同一 props 接口（chartTypes.ts），
+ * 供「两套实现并存对比」，组件层可整体替换。
+ * 标记语义（v3 §20.3）：成交 fills = 实心箭头；未成交信号 = 空心圆点。
+ * 组件只展示，不重算。
+ */
+import { useEffect, useRef } from "react";
+import {
+  createChart,
+  ColorType,
+  CrosshairMode,
+  type IChartApi,
+  type ISeriesApi,
+  type SeriesMarker,
+  type Time,
+} from "lightweight-charts";
+import type { CandleChartProps } from "./chartTypes";
+
+const C = {
+  faint: "#8b98b2",
+  grid: "rgba(150,165,195,0.09)",
+  up: "#e5484d",
+  down: "#2fb36b",
+  ma20: "#3fb6ff",
+  ma60: "#d4a72c",
+  text: "#e9eef7",
+  markerBuy: "#3ddc97",
+  markerSell: "#ff5a5a",
+  markerSig: "#b98bff",
+};
+
+function toTime(t: string): Time {
+  return t as Time; // 'YYYY-MM-DD'（v4 支持字符串 business day）
+}
+
+export function CandleChartLW({
+  data,
+  volume = [],
+  indicators = {},
+  fills = [],
+  signals = [],
+  height = 480,
+  name = "",
+}: CandleChartProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current || data.length === 0) return;
+    const chart: IChartApi = createChart(ref.current, {
+      autoSize: true,
+      height,
+      layout: {
+        background: { type: ColorType.Solid, color: "transparent" },
+        textColor: C.text,
+        fontSize: 11,
+      },
+      grid: {
+        vertLines: { color: C.grid },
+        horzLines: { color: C.grid },
+      },
+      rightPriceScale: { borderColor: C.grid },
+      timeScale: { borderColor: C.grid, timeVisible: false },
+      crosshair: { mode: CrosshairMode.Normal },
+    });
+
+    const candle: ISeriesApi<"Candlestick"> = chart.addCandlestickSeries({
+      upColor: C.up,
+      downColor: C.down,
+      borderUpColor: C.up,
+      borderDownColor: C.down,
+      wickUpColor: C.up,
+      wickDownColor: C.down,
+    });
+    candle.setData(
+      data.map((d) => ({
+        time: toTime(d.time),
+        open: d.open,
+        high: d.high,
+        low: d.low,
+        close: d.close,
+      }))
+    );
+
+    // 成交量（独立价格刻度，置于底部 20%）
+    const vol: ISeriesApi<"Histogram"> = chart.addHistogramSeries({
+      priceFormat: { type: "volume" },
+      priceScaleId: "vol",
+      lastValueVisible: false,
+      priceLineVisible: false,
+    });
+    chart.priceScale("vol").applyOptions({ scaleMargins: { top: 0.8, bottom: 0 } });
+    vol.setData(
+      volume.map((v) => ({ time: toTime(v.time), value: v.value ?? 0, color: C.grid }))
+    );
+
+    // MA 指标线
+    for (const [name, pts] of Object.entries(indicators)) {
+      const line = chart.addLineSeries({
+        color: name === "ma60" ? C.ma60 : C.ma20,
+        lineWidth: 1,
+        priceLineVisible: false,
+        lastValueVisible: false,
+        crosshairMarkerVisible: false,
+      });
+      line.setData(
+        pts
+          .filter((p) => p.value != null)
+          .map((p) => ({ time: toTime(p.time), value: p.value as number }))
+      );
+    }
+
+    // 事件标记：成交=实心箭头；未成交信号=圆点
+    const markers: SeriesMarker<Time>[] = [];
+    for (const m of fills) {
+      const buy = m.kind.endsWith("buy");
+      markers.push({
+        time: toTime(m.time),
+        position: buy ? "belowBar" : "aboveBar",
+        color: buy ? C.markerBuy : C.markerSell,
+        shape: buy ? "arrowUp" : "arrowDown",
+        size: 1,
+        text: buy ? "B" : "S",
+      });
+    }
+    for (const m of signals) {
+      const buy = m.kind.endsWith("buy");
+      markers.push({
+        time: toTime(m.time),
+        position: buy ? "belowBar" : "aboveBar",
+        color: C.markerSig,
+        shape: "circle",
+        size: 1,
+        text: buy ? "sigB" : "sigS",
+      });
+    }
+    if (markers.length) candle.setMarkers(markers);
+    if (data.length) chart.timeScale().fitContent();
+
+    const onResize = () => chart.applyOptions({ width: ref.current?.clientWidth });
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      chart.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, volume, indicators, fills, signals, height]);
+
+  if (data.length === 0) return <div className="hint">暂无 K 线数据</div>;
+  return <div ref={ref} style={{ height, width: "100%" }} aria-label={`${name} K 线图（Lightweight）`} />;
+}

frontend/web/components/StockChart/StockChart.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+/** K 线图统一入口：可切换 ECharts / TradingView Lightweight Charts 两套实现（对比期）。 */
+import type { CandleChartProps } from "./chartTypes";
+import { CandleChart } from "./CandleChart";
+import { CandleChartLW } from "./CandleChartLW";
+
+export type ChartLibrary = "echarts" | "lightweight";
+
+export function StockChart({ library = "lightweight", ...props }: CandleChartProps & { library?: ChartLibrary }) {
+  return library === "echarts" ? <CandleChart {...props} /> : <CandleChartLW {...props} />;
+}

frontend/web/components/StockChart/chartTypes.ts

@@ -0,0 +1,20 @@
+/** K 线组件共享接口（两套实现共用：ECharts 版与 TradingView Lightweight 版）。 */
+import type { ChartMarker, ChartSeriesPoint, ChartVolumePoint } from "@/lib/types";
+
+export interface CandleDatum {
+  time: string;
+  open: number;
+  close: number;
+  low: number;
+  high: number;
+}
+
+export interface CandleChartProps {
+  data: CandleDatum[];
+  volume?: ChartVolumePoint[];
+  indicators?: Record<string, ChartSeriesPoint[]>;
+  fills?: ChartMarker[];
+  signals?: ChartMarker[];
+  height?: number;
+  name?: string;
+}

frontend/web/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "echarts": "^5.5.1",
+    "lightweight-charts": "^4.2.3",
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

frontend/web/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       echarts:
         specifier: ^5.5.1
         version: 5.6.0
+      lightweight-charts:
+        specifier: ^4.2.3
+        version: 4.2.3
       next:
         specifier: ^15.1.0
         version: 15.5.25(@types/node@22.20.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -286,6 +289,12 @@ packages:
   echarts@5.6.0:
     resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
 
+  fancy-canvas@2.1.0:
+    resolution: {integrity: sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==}
+
+  lightweight-charts@4.2.3:
+    resolution: {integrity: sha512-5kS/2hY3wNYNzhnS8Gb+GAS07DX8GPF2YVDnd2NMC85gJVQ6RLU6YrXNgNJ6eg0AnWPwCnvaGtYmGky3HiLQEw==}
+
   nanoid@3.3.18:
     resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -549,6 +558,12 @@ snapshots:
       tslib: 2.3.0
       zrender: 5.6.1
 
+  fancy-canvas@2.1.0: {}
+
+  lightweight-charts@4.2.3:
+    dependencies:
+      fancy-canvas: 2.1.0
+
   nanoid@3.3.18: {}
 
   next@15.5.25(@types/node@22.20.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):