diff --git a/frontend/web/app/stocks/[symbol]/page.tsx b/frontend/web/app/stocks/[symbol]/page.tsx
new file mode 100644
index 0000000..6453055
--- /dev/null
+++ b/frontend/web/app/stocks/[symbol]/page.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+/** Stock Research Page（v3 §20.4）：单只股票的统一研究视图。
+ * K 线（chart API，可切换不复权/前复权显示）+ 成交量 + MA +
+ * 该股成交（fills）与未成交信号（signals）标记 + 最近选股/信号历史（点击看原因）。
+ * 全部数据来自 Chart API —— 前端不重算。
+ */
+import { useEffect, useMemo, useState } from "react";
+import { useParams } from "next/navigation";
+import { apiGet } from "@/lib/api";
+import type { ChartMarker, ChartResult, Stock } from "@/lib/types";
+import {
+  PageHeader,
+  Card,
+  Pill,
+  Btn,
+  Banner,
+  Empty,
+  SkeletonLines,
+} from "@/components/ui";
+import { CandleChart, type CandleDatum } from "@/components/StockChart/CandleChart";
+
+export default function StockResearchPage() {
+  const params = useParams<{ symbol: string }>();
+  const symbol = (params.symbol ?? "").toUpperCase();
+  const [stock, setStock] = useState<Stock | null>(null);
+  const [chart, setChart] = useState<ChartResult | null>(null);
+  const [signalMarkers, setSignalMarkers] = useState<ChartMarker[]>([]);
+  const [selectionMarkers, setSelectionMarkers] = useState<ChartMarker[]>([]);
+  const [adjust, setAdjust] = useState<"none" | "qfq" | "hfq">("none");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setError("");
+    Promise.all([
+      apiGet<Stock>(`/stocks/${symbol}`),
+      apiGet<ChartResult>(`/stocks/${symbol}/chart?adjust=${adjust}`),
+      apiGet<ChartMarker[]>(`/stocks/${symbol}/signals`),
+      apiGet<ChartMarker[]>(`/stocks/${symbol}/selections`),
+    ])
+      .then(([st, ch, sig, sel]) => {
+        if (!alive) return;
+        setStock(st);
+        setChart(ch);
+        setSignalMarkers(sig);
+        setSelectionMarkers(sel);
+      })
+      .catch((e: Error) => alive && setError(e.message))
+      .finally(() => alive && setLoading(false));
+    return () => {
+      alive = false;
+    };
+  }, [symbol, adjust]);
+
+  const candles: CandleDatum[] = useMemo(
+    () =>
+      (chart?.bars ?? [])
+        .filter((b) => b.open != null && b.close != null && b.low != null && b.high != null)
+        .map((b) => ({
+          time: b.time,
+          open: b.open as number,
+          close: b.close as number,
+          low: b.low as number,
+          high: b.high as number,
+        })),
+    [chart]
+  );
+
+  return (
+    <>
+      <PageHeader
+        title={stock ? `${stock.name} ${stock.symbol}` : symbol}
+        sub={
+          stock
+            ? `行业 ${stock.industry ?? "-"} · 市场 ${stock.market ?? "-"} · 上市 ${stock.list_date} · 状态 ${stock.status}`
+            : "个股研究视图（K 线 / 信号 / 成交）"
+        }
+        actions={
+          <div className="row" style={{ gap: 6 }}>
+            {(["none", "qfq", "hfq"] as const).map((m) => (
+              <Btn
+                key={m}
+                variant={adjust === m ? "primary" : undefined}
+                onClick={() => setAdjust(m)}
+              >
+                {m === "none" ? "不复权" : m === "qfq" ? "前复权" : "后复权"}
+              </Btn>
+            ))}
+          </div>
+        }
+      />
+
+      {error ? <Banner tone="error">{error}</Banner> : null}
+      {loading && !chart ? (
+        <SkeletonLines n={8} />
+      ) : (
+        <>
+          <Card
+            icon="chartLine"
+            title={`K 线 · ${chart?.metadata.adjust_mode ?? "-"} · ${chart?.metadata.name ?? ""}`}
+            tools={
+              <>
+                <Pill>共 {chart?.metadata.bar_count ?? 0} 根</Pill>
+                {chart?.metadata.execution_price_basis ? (
+                  <Pill tone="violet">回测执行价口径 {chart.metadata.execution_price_basis}</Pill>
+                ) : null}
+              </>
+            }
+          >
+            {candles.length === 0 ? (
+              <Empty icon="chartLine" title="无 K 线数据" hint="该区间/口径没有行情（可能停牌或未同步）。" />
+            ) : (
+              <CandleChart
+                data={candles}
+                volume={chart?.volume ?? []}
+                indicators={chart?.indicators ?? {}}
+                fills={chart?.fills ?? []}
+                signals={chart?.signals ?? []}
+                name={symbol}
+              />
+            )}
+          </Card>
+
+          {chart && (chart.signals.length || chart.fills.length) ? (
+            <Card
+              icon="scale"
+              title={`回测成交与信号 · ${symbol}`}
+              tools={
+                <>
+                  <Pill tone="pos">成交 {chart.fills.length}</Pill>
+                  <Pill>未成交信号 {chart.signals.length}</Pill>
+                </>
+              }
+            >
+              <div className="chips">
+                {[...chart.signals, ...chart.fills].map((m, i) => (
+                  <span className="chip" key={`${m.kind}-${m.time}-${i}`} title={m.text.join("；")}>
+                    <b className="mono">{m.time}</b>
+                    {m.kind}
+                    {m.price ? ` @${m.price}` : ""}
+                  </span>
+                ))}
+              </div>
+            </Card>
+          ) : null}
+
+          <div className="chart-grid">
+            <Card icon="spark" title="该股历史选股命中">
+              {selectionMarkers.length === 0 ? (
+                <Empty icon="spark" title="暂无选股记录" hint="该股尚未进入任何落库选股结果。" />
+              ) : (
+                <div className="chips">
+                  {selectionMarkers.slice(0, 12).map((m, i) => (
+                    <span className="chip" key={`sel-${m.time}-${i}`} title={m.text.join("；")}>
+                      <b className="mono">{m.time}</b>
+                      {m.text[0]}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </Card>
+            <Card icon="alert" title="该股历史信号">
+              {signalMarkers.length === 0 ? (
+                <Empty icon="alert" title="暂无信号记录" />
+              ) : (
+                <div className="chips">
+                  {signalMarkers.slice(0, 12).map((m, i) => (
+                    <span className="chip" key={`sig-${m.time}-${i}`} title={m.text.join("；")}>
+                      <b className="mono">{m.time}</b>
+                      {m.kind}
+                      {m.price ? ` @${m.price}` : ""}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </Card>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/frontend/web/app/stocks/page.tsx b/frontend/web/app/stocks/page.tsx
index a7b2873..24ce5f7 100644
--- a/frontend/web/app/stocks/page.tsx
+++ b/frontend/web/app/stocks/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { apiGet } from "@/lib/api";
 import type { Stock } from "@/lib/types";
@@ -129,7 +130,7 @@ export default function StocksPage() {
             <tbody>
               {stocks.map((s) => (
                 <tr key={s.symbol}>
-                  <td className="cell-mono cell-strong">{s.symbol}</td>
+                  <td className="cell-mono cell-strong"><Link href={`/stocks/${s.symbol}`} style={{ textDecoration: "none" }}>{s.symbol}</Link></td>
                   <td>{s.name}</td>
                   <td>
                     <span className="tag tag--mono">{marketOf(s.symbol)}</span>
diff --git a/frontend/web/lib/types.ts b/frontend/web/lib/types.ts
index 9e5970d..e968981 100644
--- a/frontend/web/lib/types.ts
+++ b/frontend/web/lib/types.ts
@@ -5,6 +5,8 @@ export interface Stock {
   name: string;
   industry?: string | null;
   area?: string | null;
+  market?: string | null;
+  exchange?: string | null;
   list_date: string;
   delist_date?: string | null;
   status: string;