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/app/factors/page.tsx

@@ -5,32 +5,52 @@ import { apiGet } from "@/lib/api";
 import { submitJob, waitJob } from "@/lib/jobs";
 import type { FactorMeta, FactorTestReport, ResearchSpec } from "@/lib/types";
 import { recentRange } from "@/lib/dates";
+import {
+  PageHeader,
+  Card,
+  Metric,
+  Pill,
+  Field,
+  Btn,
+  Banner,
+  Progress,
+  Empty,
+  SkeletonLines,
+} from "@/components/ui";
 
 export default function FactorsPage() {
   const [factors, setFactors] = useState<FactorMeta[]>([]);
+  const [loading, setLoading] = useState(true);
   const [checked, setChecked] = useState<Set<string>>(new Set());
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
   const [start, setStart] = useState("");
   const [end, setEnd] = useState("");
   const [reports, setReports] = useState<Record<string, FactorTestReport>>({});
   const [running, setRunning] = useState(false);
+  const [processed, setProcessed] = useState(0);
   const [current, setCurrent] = useState<{ idx: number; total: number; name: string } | null>(null);
   const [jobId, setJobId] = useState("");
   const [error, setError] = useState("");
 
   useEffect(() => {
+    let alive = true;
     apiGet<FactorMeta[]>("/factors")
       .then((list) => {
+        if (!alive) return;
         setFactors(list);
-        // 默认勾选两个代表性因子
-        const picks = ["momentum_60", "volatility_60"].filter((n) => list.some((f) => f.name === n));
+        const picks = ["momentum_60", "volatility_60"].filter((n) =>
+          list.some((f) => f.name === n),
+        );
         setChecked(new Set(picks));
       })
-      .catch((e: Error) => setError(e.message));
-    // 区间默认：近 6 个月（客户端设置，避免 SSR 日期不一致）
+      .catch((e: Error) => setError(e.message))
+      .finally(() => alive && setLoading(false));
     const { start: s, end: e } = recentRange();
     setStart(s);
     setEnd(e);
+    return () => {
+      alive = false;
+    };
   }, []);
 
   function toggleCheck(name: string) {
@@ -61,6 +81,7 @@ export default function FactorsPage() {
     setError("");
     setJobId("");
     setReports({});
+    setProcessed(0);
     try {
       let index = 0;
       for (const name of names) {
@@ -78,12 +99,12 @@ export default function FactorsPage() {
         setJobId(job_id);
         const out = await waitJob<FactorTestReport>(job_id);
         if (out.status === "success" && out.result) {
-          const report = out.result;
-          setReports((prev) => ({ ...prev, [name]: report }));
+          setReports((prev) => ({ ...prev, [name]: out.result! }));
         } else {
           const msg = `因子 ${name}：${out.status}${out.error ? `：${out.error}` : ""}`;
           setError((prev) => (prev ? `${prev}\n${msg}` : msg));
         }
+        setProcessed(index);
       }
     } catch (e) {
       setError((e as Error).message);
@@ -95,87 +116,138 @@ export default function FactorsPage() {
   }
 
   const selectedCount = checked.size;
-  const doneCount = Object.keys(reports).length;
+  const reportNames = Object.keys(reports);
+  const progressPct = selectedCount === 0 ? 0 : Math.round((processed / selectedCount) * 100);
 
   return (
     <>
-      <h1>因子研究</h1>
-      <div className="card">
-        <h2>因子目录（行情因子 · 无未来函数）</h2>
-        <div className="muted" style={{ marginBottom: 8 }}>
-          勾选因子后可多选；点击行展开详细说明。每个因子运行一次独立的 IC/RankIC 测试并归档。
-          <a href="/factors/compose" style={{ marginLeft: 8, color: "#38bdf8" }}>
-            用这些因子搭建选股组合 → 因子组合
-          </a>
-        </div>
-        <table>
-          <thead>
-            <tr>
-              <th></th>
-              <th>因子</th>
-              <th>回看</th>
-              <th>方向</th>
-              <th>简介（用法 / 何时有效）</th>
-            </tr>
-          </thead>
-          <tbody>
-            {factors.map((f) => (
-              <FactorRow
-                key={f.name}
-                factor={f}
-                checked={checked.has(f.name)}
-                expanded={expanded.has(f.name)}
-                onToggleCheck={() => toggleCheck(f.name)}
-                onToggleExpand={() => toggleExpand(f.name)}
-              />
-            ))}
-          </tbody>
-        </table>
-        <div className="muted" style={{ marginTop: 6 }}>
-          计分规则：每因子在每日横截面上 z-score 标准化（低为好自动取负），组合页可按权重叠加得分选股；
-          本页单个因子测试各自归档为 Experiment，可去「实验」页查看与复跑。
-        </div>
-      </div>
+      <PageHeader
+        title="因子研究"
+        sub="勾选行情因子并运行单因子测试（IC / RankIC / 分层）。每个因子独立异步执行并归档为实验，可在「实验」页查看与复跑。"
+        actions={<Pill tone="accent" icon="flask">{reportNames.length}/{selectedCount} 个已出报告</Pill>}
+      />
 
-      <div className="card">
-        <h2>运行单因子测试（IC / RankIC / 分层）</h2>
-        <div className="row">
-          <label className="muted">
-            开始 <input type="date" value={start} onChange={(e) => setStart(e.target.value)} />
-          </label>
-          <label className="muted">
-            结束 <input type="date" value={end} onChange={(e) => setEnd(e.target.value)} />
-          </label>
-          <button
-            className="primary"
-            onClick={run}
-            disabled={running || selectedCount === 0}
-          >
-            {running ? `运行中 ${doneCount}/${selectedCount}…` : `运行因子测试（已选 ${selectedCount} 个）`}
-          </button>
-        </div>
-        {running && (
-          <div className="muted">
-            正在运行：{current?.name}（{current?.idx}/{current?.total}）—— 后台任务 {jobId}，请稍候…
+      {error && !running ? (
+        <Banner tone="error">
+          <pre style={{ margin: 0, whiteSpace: "pre-line", font: "inherit" }}>{error}</pre>
+        </Banner>
+      ) : null}
+
+      <Card
+        title="因子目录"
+        icon="flask"
+        sub="点击行展开定义 · 勾选后点下方「运行因子测试」"
+        tools={<Pill tone="violet">已选 {selectedCount} 个</Pill>}
+        flush
+      >
+        {loading ? (
+          <div style={{ padding: 18 }}>
+            <SkeletonLines n={7} />
           </div>
+        ) : factors.length === 0 ? (
+          <Empty
+            icon="flask"
+            title="暂无因子目录"
+            hint="请确认后端已启动，且 /api/factors 返回因子元数据。"
+          />
+        ) : (
+          <>
+            <div className="table-wrap">
+              <table className="tbl">
+                <thead>
+                  <tr>
+                    <th style={{ width: 44 }}></th>
+                    <th>因子</th>
+                    <th>回看</th>
+                    <th>方向</th>
+                    <th>简介（用法 / 何时有效）</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {factors.map((f) => (
+                    <FactorRow
+                      key={f.name}
+                      factor={f}
+                      checked={checked.has(f.name)}
+                      expanded={expanded.has(f.name)}
+                      onToggleCheck={() => toggleCheck(f.name)}
+                      onToggleExpand={() => toggleExpand(f.name)}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="hint" style={{ padding: "10px 16px", borderTop: "1px solid var(--line)" }}>
+              计分规则：每个因子在每日横截面做 z-score 标准化（低为好自动取负）；组合页按权重叠加得分选股。
+            </div>
+          </>
         )}
-        {error && <div className="error" style={{ whiteSpace: "pre-line" }}>{error}</div>}
-      </div>
+      </Card>
 
-      {Object.entries(reports).map(([name, report]) => {
+      <Card title="运行单因子测试" icon="play" tools={running ? <Pill tone="accent" icon="spinner">执行中</Pill> : undefined}>
+        <div className="form-grid">
+          <Field label="开始日期">
+            <input type="date" className="input" value={start} onChange={(e) => setStart(e.target.value)} />
+          </Field>
+          <Field label="结束日期">
+            <input type="date" className="input" value={end} onChange={(e) => setEnd(e.target.value)} />
+          </Field>
+          <Btn
+            variant="primary"
+            icon="play"
+            loading={running}
+            disabled={running || selectedCount === 0}
+            onClick={run}
+          >
+            {running
+              ? `运行中 ${processed}/${selectedCount}`
+              : selectedCount === 0
+                ? "请先勾选因子"
+                : `运行因子测试（${selectedCount} 个）`}
+          </Btn>
+        </div>
+
+        {running ? (
+          <div style={{ marginTop: 14 }}>
+            <Progress
+              value={progressPct}
+              label={
+                <>
+                  正在运行：<b>{current?.name}</b>（{current?.idx}/{current?.total}）· 后台任务{" "}
+                  <span className="mono">{jobId || "排队中…"}</span>
+                </>
+              }
+            />
+          </div>
+        ) : null}
+      </Card>
+
+      {reportNames.length === 0 && !running && !error ? (
+        <Card>
+          <Empty
+            icon="chartLine"
+            title="还没有测试报告"
+            hint="勾选一个或多个因子并设置研究区间后运行；完成后报告会按因子逐一出现在这里。"
+          />
+        </Card>
+      ) : null}
+
+      {reportNames.map((name) => {
         const meta = factors.find((f) => f.name === name);
         return (
-          <div className="card" key={name}>
-            <h2>
-              {name} · 测试报告
-              {meta?.brief ? (
-                <span className="muted" style={{ fontWeight: 400, fontSize: 13 }}>
-                  {" "}— {meta.brief}
-                </span>
-              ) : null}
-            </h2>
-            <ReportView report={report} />
-          </div>
+          <Card
+            key={name}
+            icon="chartLine"
+            title={name}
+            sub={meta?.brief}
+            tools={
+              <Pill tone="pos" icon="check">
+                已完成
+              </Pill>
+            }
+          >
+            <ReportView report={reports[name]} />
+          </Card>
         );
       })}
     </>
@@ -193,81 +265,102 @@ function FactorRow(props: {
   return (
     <>
       <tr style={{ cursor: "pointer" }} onClick={props.onToggleExpand}>
-        <td onClick={(e) => { e.stopPropagation(); props.onToggleCheck(); }}>
-          <input type="checkbox" checked={props.checked} onChange={props.onToggleCheck} />
+        <td onClick={(e) => e.stopPropagation()}>
+          <input
+            type="checkbox"
+            checked={props.checked}
+            onChange={props.onToggleCheck}
+            aria-label={`选择因子 ${f.name}`}
+          />
         </td>
-        <td>{f.name}</td>
-        <td>{f.lookback}</td>
-        <td>{f.direction === "higher_is_better" ? "高为好" : "低为好"}</td>
-        <td>{f.brief ?? f.description}</td>
+        <td className="cell-strong">
+          <span className="mono">{f.name}</span>
+        </td>
+        <td>
+          <span className="tag tag--mono">{f.lookback} 日</span>
+        </td>
+        <td>
+          <Pill tone={f.direction === "higher_is_better" ? "accent" : "violet"}>
+            {f.direction === "higher_is_better" ? "高为好" : "低为好"}
+          </Pill>
+        </td>
+        <td className="hint">{f.brief ?? f.description}</td>
       </tr>
-      {props.expanded && (
-        <tr>
+      {props.expanded ? (
+        <tr className="expand-cell">
           <td colSpan={5}>
-            <div style={{ background: "var(--panel-2)", padding: 10, borderRadius: 6 }}>
-              <b>{f.name}</b> · {f.description}
-              <div className="muted" style={{ marginTop: 4 }}>
-                公式：{f.formula}；回看 {f.lookback} 个交易日；频率 {f.frequency}；
-                方向：{f.direction === "higher_is_better" ? "因子值越高得分越高" : "因子值越低得分越高（引擎自动反向）"}
+            <div>
+              <b className="mono">{f.name}</b> · {f.description}
+              <div className="hint" style={{ marginTop: 6 }}>
+                公式：<span className="mono">{f.formula}</span>；回看 {f.lookback} 个交易日；频率 {f.frequency}；
+                方向：
+                {f.direction === "higher_is_better" ? "因子值越高得分越高" : "因子值越低得分越高（引擎自动反向）"}
               </div>
-              <div style={{ marginTop: 6 }}>{f.brief}</div>
+              {f.brief ? <div className="hint" style={{ marginTop: 6 }}>{f.brief}</div> : null}
             </div>
           </td>
         </tr>
-      )}
+      ) : null}
     </>
   );
 }
 
 function ReportView({ report }: { report: FactorTestReport }) {
+  const qs = report.quantile_returns ?? [];
+  const maxAbs = Math.max(0.001, ...qs.map((q) => Math.abs(q.return_pct)));
   return (
-    <>
-      <div className="stat-grid">
-        <div className="stat">
-          <div className="label">IC 均值</div>
-          <div className="value">{report.ic_mean.toFixed(4)}</div>
-        </div>
-        <div className="stat">
-          <div className="label">RankIC 均值</div>
-          <div className="value">{report.rank_ic_mean.toFixed(4)}</div>
-        </div>
-        <div className="stat">
-          <div className="label">ICIR</div>
-          <div className="value">{report.icir.toFixed(3)}</div>
-        </div>
-        <div className="stat">
-          <div className="label">正收益占比</div>
-          <div className="value">{report.positive_ratio_pct.toFixed(1)}%</div>
-        </div>
-        <div className="stat">
-          <div className="label">样本日数</div>
-          <div className="value">{report.sample_days}</div>
-        </div>
+    <div className="stack" style={{ gap: 16 }}>
+      <div className="metric-grid" style={{ marginBottom: 0 }}>
+        <Metric
+          label="IC 均值"
+          icon="chartLine"
+          value={report.ic_mean.toFixed(4)}
+          tone={report.ic_mean >= 0 ? "pos" : "neg"}
+        />
+        <Metric
+          label="RankIC 均值"
+          value={report.rank_ic_mean.toFixed(4)}
+          tone={report.rank_ic_mean >= 0 ? "pos" : "neg"}
+        />
+        <Metric
+          label="ICIR"
+          value={report.icir.toFixed(3)}
+          tone={report.icir >= 1 ? "pos" : "plain"}
+          sub="越大越稳定"
+        />
+        <Metric
+          label="正收益占比"
+          value={`${report.positive_ratio_pct.toFixed(1)}%`}
+          tone={report.positive_ratio_pct >= 50 ? "pos" : "warn"}
+        />
+        <Metric label="样本日数" value={report.sample_days} icon="calendar" />
       </div>
-      {report.quantile_returns.length > 0 && (
-        <table style={{ marginTop: 12 }}>
-          <thead>
-            <tr>
-              <th>分层（1 最低 → 5 最高）</th>
-              {report.quantile_returns.map((q) => (
-                <th key={q.quantile}>Q{q.quantile + 1}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>未来 21 日平均收益</td>
-              {report.quantile_returns.map((q) => (
-                <td key={q.quantile}>{q.return_pct.toFixed(2)}%</td>
-              ))}
-            </tr>
-          </tbody>
-        </table>
-      )}
-      <div className="muted" style={{ marginTop: 6 }}>
-        读数：IC/RankIC 为正表示与未来收益正相关；ICIR 越大越稳定；分层收益若高分层显著高于低分层说明单调性好。
-        单因子测试≠策略有效，需结合样本外与稳健性分析。
+
+      {qs.length > 0 ? (
+        <div>
+          <div className="field__label" style={{ marginBottom: 2 }}>
+            分层表现（Q1 最低因子值 → Q5 最高，未来 21 日平均收益）
+          </div>
+          <div className="vbars" role="img" aria-label="分层收益柱状图">
+            {qs.map((q) => {
+              const v = q.return_pct;
+              const h = Math.max(4, Math.round((Math.abs(v) / maxAbs) * 72));
+              return (
+                <div className="vbars__item" key={q.quantile}>
+                  <span className="vbars__val">{v >= 0 ? "+" : ""}{v.toFixed(2)}%</span>
+                  <div className={`vbars__bar ${v >= 0 ? "is-pos" : "is-neg"}`} style={{ height: h }} />
+                  <span className="vbars__cap">Q{q.quantile + 1}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="hint">
+        读数：IC / RankIC 为正表示与未来收益正相关，ICIR 越大越稳定；分层收益若高分层显著高于低分层说明单调性好。
+        单因子测试 ≠ 策略有效，需结合样本外与稳健性分析。
       </div>
-    </>
+    </div>
   );
 }