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

@@ -1,49 +1,148 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Link from "next/link";
 import { apiGet } from "@/lib/api";
 import type { Stock, FactorMeta } from "@/lib/types";
+import { PageHeader, Card, Metric, Banner, Loading } from "@/components/ui";
+import { Icon as Ic } from "@/components/icons";
+
+interface LoadState {
+  stocks: number | null;
+  factors: number | null;
+  loading: boolean;
+  error: string;
+}
+
+const LINKS = [
+  {
+    href: "/factors",
+    title: "因子研究",
+    desc: "查看行情因子目录，勾选运行 IC / RankIC 单因子测试",
+    icon: "flask" as const,
+    tone: "quick-card--violet",
+  },
+  {
+    href: "/factors/compose",
+    title: "因子组合",
+    desc: "多因子 z-score 叠加打分，回测 Top N 等权选股组合",
+    icon: "layers" as const,
+    tone: "quick-card--pos",
+  },
+  {
+    href: "/backtest",
+    title: "选股回测",
+    desc: "单因子完整回测：净值 / 回撤 / 月度收益 / 持仓",
+    icon: "gauge" as const,
+    tone: "quick-card--warn",
+  },
+  {
+    href: "/stocks",
+    title: "股票池",
+    desc: "浏览本地股票基础信息（Tushare 同步，全市场 5556 只）",
+    icon: "candles" as const,
+    tone: "",
+  },
+];
 
 export default function DashboardPage() {
-  const [stockCount, setStockCount] = useState<number | null>(null);
-  const [factorCount, setFactorCount] = useState<number | null>(null);
-  const [error, setError] = useState("");
+  const [st, setSt] = useState<LoadState>({
+    stocks: null,
+    factors: null,
+    loading: true,
+    error: "",
+  });
 
   useEffect(() => {
-    Promise.all([
-      apiGet<Stock[]>("/stocks?limit=500"),
-      apiGet<FactorMeta[]>("/factors"),
-    ])
+    let alive = true;
+    Promise.all([apiGet<Stock[]>("/stocks?limit=500"), apiGet<FactorMeta[]>("/factors")])
       .then(([stocks, factors]) => {
-        setStockCount(stocks.length);
-        setFactorCount(factors.length);
+        if (!alive) return;
+        setSt({
+          stocks: stocks.length,
+          factors: factors.length,
+          loading: false,
+          error: "",
+        });
       })
-      .catch((e: Error) => setError(e.message));
+      .catch((e: Error) => {
+        if (!alive) return;
+        setSt({ stocks: null, factors: null, loading: false, error: e.message });
+      });
+    return () => {
+      alive = false;
+    };
   }, []);
 
   return (
     <>
-      <h1>总览</h1>
-      {error && <div className="error">后端不可达：{error}</div>}
-      <div className="stat-grid">
-        <div className="stat">
-          <div className="label">股票池</div>
-          <div className="value">{stockCount ?? "—"}</div>
+      <PageHeader
+        title="研究总览"
+        sub="个人 A 股量化研究平台：以 Tushare 行情为数据底座、Qlib 为研究引擎，覆盖选股、因子研究、组合回测与实验归档。"
+      />
+
+      {st.error ? (
+        <Banner tone="error">
+          后端不可达：{st.error}。请确认 FastAPI 服务已启动（scripts/dev.sh start）。
+        </Banner>
+      ) : null}
+
+      {st.loading ? (
+        <div className="metric-grid">
+          <div className="metric">
+            <Loading label="正在读取股票池…" />
+          </div>
         </div>
-        <div className="stat">
-          <div className="label">内置因子</div>
-          <div className="value">{factorCount ?? "—"}</div>
+      ) : (
+        <div className="metric-grid">
+          <Metric
+            label="股票池"
+            icon="candles"
+            value={st.stocks?.toLocaleString() ?? "—"}
+            sub="已建档基础信息"
+          />
+          <Metric
+            label="内置因子"
+            icon="flask"
+            value={st.factors?.toLocaleString() ?? "—"}
+            sub="行情因子 · 无未来函数"
+          />
         </div>
-      </div>
-      <div className="card" style={{ marginTop: 16 }}>
-        <h2>说明</h2>
-        <div className="muted">
-          个人 A 股量化研究平台（Phase 3 Web）。
-          顶部导航进入「股票池 / 因子研究 / 回测」；研究基于本地 SQLite 行情
-          （Tushare 同步，20 只权重股 2023–2024 日线），因子测试与回测均由后端
-          Research Specification 驱动并返回标准化结果。
+      )}
+
+      <Card title="快速开始" icon="spark" sub="四个研究入口，从数据到结论" flush={false}>
+        <div className="quick-cards" style={{ marginBottom: 0 }}>
+          {LINKS.map((l) => (
+            <Link key={l.href} href={l.href} className={`quick-card ${l.tone}`}>
+              <span className="quick-ic">
+                <Ic name={l.icon} size={19} />
+              </span>
+              <span>
+                <h3>{l.title}</h3>
+                <p>{l.desc}</p>
+                <span className="go">
+                  进入 <Ic name="arrowUpRight" size={13} />
+                </span>
+              </span>
+            </Link>
+          ))}
         </div>
-      </div>
+      </Card>
+
+      <Card title="研究须知" icon="book">
+        <ul className="steplist">
+          <li>
+            因子/回测请求经 <b>异步 Job</b> 后台执行并自动归档为实验（Experiment），可在「实验」页查看与复跑。
+          </li>
+          <li>
+            数据底座为<b>本地 SQLite + Parquet</b>：行情经 <code>sync daily --resume</code> 增量同步；
+            新浪数据仅在「两边一致」校验通过后兜底入库（<code>source=sina</code>）。
+          </li>
+          <li>
+            研究默认<b>禁止未来函数</b>：财务按公告日可见、因子按已披露数据计算；回测含手续费 / 印花税 / 涨跌停等近似约束（如实标注）。
+          </li>
+        </ul>
+      </Card>
     </>
   );
 }