feat(web): 按 ui-ux-pro-max 设计系统重构前端（侧边导航 + 组件库 + 图标 + 可视化）

- 设计令牌与组件体系：语义色/间距/圆角/状态 + Card/Metric/Pill/Btn/Field/Empty/Skeleton/Progress 等
- 桌面左侧导航 + 窄屏抽屉（usePathname 高亮、ESC/遮罩关闭）；修复抽屉/遮罩占据网格把 main 挤到第二行的问题
- 自绘内联 SVG 图标集替代 emoji；图标/表格/按钮等交互态齐全，空态/加载/错误/禁用态补齐
- 因子研究分层柱状、因子组合与回测净值/回撤双图 + 月度收益热力表、实验页任务状态徽标
- LineChart 主题化并按需引入 echarts（回测/组合首载 JS 448k→281k）；next.config 放行局域网 dev 来源

frontend/web/components/LineChart.tsx

@@ -1,49 +1,106 @@
 "use client";
 
+/** 基于 ECharts 的折线图（净值 / 回撤），按需引入模块以压缩 bundle。 */
 import { useEffect, useRef } from "react";
-import * as echarts from "echarts";
+import * as echarts from "echarts/core";
+import { LineChart as EChartsLine } from "echarts/charts";
+import { GridComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([EChartsLine, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);
 
 export interface XY {
   date: string;
   value: number;
 }
 
+const C = {
+  text: "#a8b3c9",
+  faint: "#8b98b2",
+  line: "rgba(150,165,195,0.13)",
+  tooltipBg: "#141d30",
+  tooltipBorder: "rgba(150,165,195,0.28)",
+};
+
 export function LineChart({
   title,
   data,
-  color = "#38bdf8",
+  color = "#3fb6ff",
+  fill = false,
+  height = 320,
+  yFmt,
+  xFmt,
 }: {
-  title: string;
+  title?: string;
   data: XY[];
   color?: string;
+  /** 线下渐变面积（净值类曲线推荐开启） */
+  fill?: boolean;
+  height?: number;
+  yFmt?: (v: number) => string;
+  xFmt?: (v: string) => string;
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!ref.current || data.length === 0) return;
     const chart = echarts.init(ref.current);
+    const areaColor = {
+      type: "linear",
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: color + "3d" },
+        { offset: 1, color: color + "00" },
+      ],
+    };
     chart.setOption({
-      title: { text: title, textStyle: { color: "#e2e8f0", fontSize: 13 } },
-      tooltip: { trigger: "axis" },
-      grid: { left: 60, right: 20, top: 40, bottom: 30 },
+      backgroundColor: "transparent",
+      title: title
+        ? {
+            text: title,
+            textStyle: { color: "#e9eef7", fontSize: 13, fontWeight: 600 },
+          }
+        : undefined,
+      tooltip: {
+        trigger: "axis",
+        backgroundColor: C.tooltipBg,
+        borderColor: C.tooltipBorder,
+        textStyle: { color: "#e9eef7", fontSize: 12 },
+        valueFormatter: (v: unknown) =>
+          typeof v === "number" ? (yFmt ? yFmt(v) : String(v)) : String(v),
+      },
+      grid: { left: 8, right: 14, top: title ? 42 : 18, bottom: 8, containLabel: true },
       xAxis: {
         type: "category",
+        boundaryGap: false,
         data: data.map((p) => p.date),
-        axisLabel: { color: "#94a3b8", fontSize: 10 },
+        axisLine: { lineStyle: { color: C.line } },
+        axisTick: { show: false },
+        axisLabel: {
+          color: C.faint,
+          fontSize: 10,
+          formatter: (v: string) => (xFmt ? xFmt(v) : v),
+        },
       },
       yAxis: {
         type: "value",
         scale: true,
-        axisLabel: { color: "#94a3b8" },
-        splitLine: { lineStyle: { color: "#334155" } },
+        axisLabel: { color: C.faint, fontSize: 10, formatter: yFmt },
+        splitLine: { lineStyle: { color: C.line } },
       },
       series: [
         {
           type: "line",
           showSymbol: false,
+          symbol: "circle",
           data: data.map((p) => p.value),
-          lineStyle: { color, width: 1.6 },
+          lineStyle: { color, width: 1.8 },
           itemStyle: { color },
+          areaStyle: fill ? { color: areaColor } : undefined,
+          emphasis: { focus: "series" },
         },
       ],
     });
@@ -53,8 +110,8 @@ export function LineChart({
       window.removeEventListener("resize", onResize);
       chart.dispose();
     };
-  }, [data, color, title]);
+  }, [data, color, fill, title, height, yFmt, xFmt]);
 
-  if (data.length === 0) return <div className="muted">暂无数据</div>;
-  return <div ref={ref} style={{ height: 360, width: "100%" }} />;
+  if (data.length === 0) return <div className="hint">暂无数据</div>;
+  return <div ref={ref} style={{ height, width: "100%" }} />;
 }