feat: 新增题材页面（列表 + 详情）

- 主页增加「题材热点」入口，跳转题材列表页
- 题材列表页：展示全部题材，支持按涨幅/强度/热度/成交额排序
- 题材详情页：简介、热点事件、相关新闻、板块涨跌统计、全部相关股票（含入选理由默认展开）
- 后端逆向封装东方财富题材接口 getThemeList/getDetail/getStockList，含交易时段感知缓存

Co-Authored-By: Claude <noreply@anthropic.com>

src/routes/theme.$code.tsx

@@ -0,0 +1,355 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { fetchThemeDetail, fetchThemeStocks, type ThemeStock } from "@/lib/theme-api";
+import { getStockBoard } from "@/lib/stock-api";
+import { formatMoney } from "@/lib/utils";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  ArrowLeft,
+  RefreshCw,
+  TrendingUp,
+  TrendingDown,
+  Flame,
+  Newspaper,
+  ChevronDown,
+  ChevronUp,
+  Info,
+} from "lucide-react";
+
+export const Route = createFileRoute("/theme/$code")({
+  component: ThemeDetailPage,
+});
+
+function ThemeDetailPage() {
+  const { code } = Route.useParams();
+
+  const detailQ = useQuery({
+    queryKey: ["themeDetail", code],
+    queryFn: () => fetchThemeDetail(code),
+    staleTime: 60_000,
+    retry: false,
+  });
+  const stocksQ = useQuery({
+    queryKey: ["themeStocks", code],
+    queryFn: () => fetchThemeStocks(code),
+    staleTime: 30_000,
+    retry: false,
+  });
+
+  const isLoading = detailQ.isLoading || stocksQ.isLoading;
+  const isError = detailQ.isError || stocksQ.isError;
+  const isFetching = detailQ.isFetching || stocksQ.isFetching;
+
+  const detail = detailQ.data;
+  const stocks = stocksQ.data?.data ?? [];
+  const statistic = stocksQ.data?.statistic;
+  const total = stocksQ.data?.total ?? 0;
+
+  const refresh = () => {
+    detailQ.refetch();
+    stocksQ.refetch();
+  };
+
+  const baseInfo = detail?.baseInfo;
+  const hotEvent = detail?.hotEvent;
+  const eventHistory = detail?.eventHistory ?? [];
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* ── 顶栏 ── */}
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b">
+        <div className="max-w-3xl mx-auto px-4 h-12 flex items-center justify-between">
+          <div className="flex items-center gap-3 min-w-0">
+            <Link to="/themes" className="hover:opacity-70 transition-opacity shrink-0">
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+            <h1 className="text-base font-semibold truncate">{baseInfo?.themeName ?? "题材详情"}</h1>
+          </div>
+          <button
+            onClick={refresh}
+            className="text-muted-foreground hover:text-foreground transition-colors shrink-0"
+            title="刷新"
+          >
+            <RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
+          </button>
+        </div>
+      </header>
+
+      <div className="max-w-3xl mx-auto px-4 py-4 pb-10 space-y-4">
+        {isLoading ? (
+          <div className="space-y-4">
+            <div className="animate-pulse rounded-xl bg-muted h-32" />
+            <div className="animate-pulse rounded-xl bg-muted h-24" />
+            <div className="animate-pulse rounded-xl bg-muted h-64" />
+          </div>
+        ) : isError ? (
+          <div className="flex flex-col items-center gap-3 py-20">
+            <p className="text-sm text-muted-foreground">数据加载失败</p>
+            <button onClick={refresh} className="text-xs text-primary hover:underline">
+              点击重试
+            </button>
+          </div>
+        ) : (
+          <>
+            {/* ── 题材简介 ── */}
+            {baseInfo?.introduction && (
+              <Card>
+                <CardContent className="p-4">
+                  <div className="flex items-center gap-1.5 mb-2">
+                    <Info className="h-4 w-4 text-primary" />
+                    <h2 className="text-sm font-semibold">题材简介</h2>
+                  </div>
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    {baseInfo.introduction}
+                  </p>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* ── 热点事件 ── */}
+            {hotEvent?.newsTitle && (
+              <Card className="border-orange-500/30">
+                <CardContent className="p-4">
+                  <div className="flex items-center gap-1.5 mb-2">
+                    <Flame className="h-4 w-4 text-orange-500" />
+                    <h2 className="text-sm font-semibold">热点事件</h2>
+                    {hotEvent.newsMediaName && (
+                      <span className="text-[10px] text-muted-foreground ml-auto shrink-0">
+                        {hotEvent.newsMediaName}
+                        {hotEvent.newsPublishTimeFormat ? ` · ${hotEvent.newsPublishTimeFormat}` : ""}
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-sm font-medium leading-snug">{hotEvent.newsTitle}</p>
+                  {hotEvent.newsSummary && (
+                    <p className="text-xs text-muted-foreground leading-relaxed mt-1.5 line-clamp-3">
+                      {hotEvent.newsSummary}
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+
+            {/* ── 板块统计 ── */}
+            <StatBar
+              f3={statistic?.f3}
+              up={statistic?.f104}
+              down={statistic?.f105}
+              flat={statistic?.f106}
+              fex5={statistic?.fex5}
+              total={total}
+            />
+
+            {/* ── 相关新闻（可折叠） ── */}
+            {eventHistory.length > 0 && <NewsList items={eventHistory} />}
+
+            {/* ── 相关股票 ── */}
+            <div>
+              <div className="flex items-center justify-between mb-2 px-1">
+                <h2 className="text-sm font-semibold">相关股票</h2>
+                <span className="text-[10px] text-muted-foreground">共 {total} 只</span>
+              </div>
+              {stocks.length === 0 ? (
+                <Card>
+                  <CardContent className="p-6 text-center text-sm text-muted-foreground">
+                    暂无相关股票
+                  </CardContent>
+                </Card>
+              ) : (
+                <div className="space-y-2">
+                  {stocks.map((s) => (
+                    <ThemeStockRow key={s.securityCode} stock={s} />
+                  ))}
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ============================================================
+   板块统计条
+   ============================================================ */
+function StatBar({
+  f3,
+  up,
+  down,
+  flat,
+  fex5,
+  total,
+}: {
+  f3: number | null | undefined;
+  up: number | null | undefined;
+  down: number | null | undefined;
+  flat: number | null | undefined;
+  fex5: number | null | undefined;
+  total: number;
+}) {
+  const isPos = (f3 ?? 0) >= 0;
+  return (
+    <Card>
+      <CardContent className="p-3">
+        <div className="grid grid-cols-4 divide-x divide-border/50 text-center">
+          <div>
+            <p className="text-[10px] text-muted-foreground">板块涨幅</p>
+            <p className={`text-sm font-bold tabular-nums ${isPos ? "text-red-500" : "text-green-500"}`}>
+              {f3 != null ? `${isPos ? "+" : ""}${f3.toFixed(2)}%` : "--"}
+            </p>
+          </div>
+          <div>
+            <p className="text-[10px] text-muted-foreground">上涨</p>
+            <p className="text-sm font-bold tabular-nums text-red-500">{up ?? "--"}</p>
+          </div>
+          <div>
+            <p className="text-[10px] text-muted-foreground">下跌</p>
+            <p className="text-sm font-bold tabular-nums text-green-500">{down ?? "--"}</p>
+          </div>
+          <div>
+            <p className="text-[10px] text-muted-foreground">成交额</p>
+            <p className="text-xs font-semibold tabular-nums">{fex5 != null ? formatMoney(fex5) : "--"}</p>
+          </div>
+        </div>
+        {(flat != null && flat > 0) && (
+          <p className="text-[10px] text-muted-foreground text-center mt-1.5">
+            平盘 {flat} 只
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+/* ============================================================
+   相关新闻（可折叠）
+   ============================================================ */
+function NewsList({ items }: { items: { newsTitle: string; newsMediaName: string; newsPublishTime: number | null }[] }) {
+  const [expanded, setExpanded] = useState(false);
+  const shown = expanded ? items : items.slice(0, 2);
+
+  const fmtTime = (ts: number | null) => {
+    if (!ts) return "";
+    const d = new Date(ts);
+    const pad = (n: number) => String(n).padStart(2, "0");
+    return `${d.getMonth() + 1}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  };
+
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex items-center gap-1.5 mb-2">
+          <Newspaper className="h-4 w-4 text-primary" />
+          <h2 className="text-sm font-semibold">相关新闻</h2>
+          <span className="text-[10px] text-muted-foreground ml-auto">{items.length} 条</span>
+        </div>
+        <div className="space-y-2.5">
+          {shown.map((n, idx) => (
+            <div key={idx} className="space-y-0.5">
+              <p className="text-sm leading-snug line-clamp-2">{n.newsTitle}</p>
+              <p className="text-[10px] text-muted-foreground">
+                {n.newsMediaName}
+                {n.newsPublishTime ? ` · ${fmtTime(n.newsPublishTime)}` : ""}
+              </p>
+            </div>
+          ))}
+        </div>
+        {items.length > 2 && (
+          <button
+            onClick={() => setExpanded((v) => !v)}
+            className="mt-2 text-xs text-primary hover:underline inline-flex items-center gap-0.5"
+          >
+            {expanded ? "收起" : `展开全部 ${items.length} 条`}
+            {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+          </button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+/* ============================================================
+   相关股票行
+   ============================================================ */
+function ThemeStockRow({ stock }: { stock: ThemeStock }) {
+  const [showReason, setShowReason] = useState(true); // 入选理由默认展开
+  const board = getStockBoard(stock.securityCode);
+  const isPos = stock.f3 >= 0;
+  const reasons = stock.keywordList ?? [];
+
+  // 换手率：接口返回放大 100 倍的值（如 3733 = 37.33%）
+  const turnoverRate = stock.f8 > 100 ? stock.f8 / 100 : stock.f8;
+
+  return (
+    <Link to="/stock/$code" params={{ code: stock.securityCode }} className="block">
+      <Card className="rounded-xl hover:shadow-md transition-shadow">
+        <CardContent className="p-3 space-y-1.5">
+          {/* 名称 + 现价 + 涨幅 */}
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-1.5 min-w-0">
+              <p className="text-sm font-medium truncate">{stock.securityName}</p>
+              {board.label && (
+                <span
+                  className={`inline-flex items-center justify-center w-3.5 h-3.5 rounded-sm text-[8px] font-bold leading-none shrink-0 ${board.className}`}
+                >
+                  {board.label}
+                </span>
+              )}
+              {stock.label && (
+                <span className="shrink-0 text-[9px] font-medium text-orange-500 bg-orange-500/10 border border-orange-500/30 rounded px-1 py-0.5">
+                  {stock.label}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-3 shrink-0">
+              <div className="text-right">
+                <p className="text-[10px] text-muted-foreground">现价</p>
+                <p className="text-sm font-semibold tabular-nums">{stock.f2.toFixed(2)}</p>
+              </div>
+              <div className="text-right min-w-[56px]">
+                <p className="text-[10px] text-muted-foreground">涨跌</p>
+                <p className={`text-sm font-bold tabular-nums ${isPos ? "text-red-500" : "text-green-500"}`}>
+                  {isPos ? "+" : ""}
+                  {stock.f3.toFixed(2)}%
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* 行业 + 换手 + 主力 + 成交额 */}
+          <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+            {stock.f100 && (
+              <span className="truncate bg-muted rounded px-1.5 py-0.5 text-[10px]">{stock.f100}</span>
+            )}
+            <span className="shrink-0 tabular-nums">换手 {turnoverRate.toFixed(2)}%</span>
+            <span className="shrink-0 tabular-nums">主力 {formatMoney(stock.f62)}</span>
+            <span className="shrink-0 tabular-nums ml-auto">成交 {formatMoney(stock.f6)}</span>
+          </div>
+
+          {/* 入选理由 */}
+          {reasons.length > 0 && (
+            <div className="border-t border-border/40 pt-1.5">
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowReason((v) => !v);
+                }}
+                className="text-[10px] text-primary hover:underline inline-flex items-center gap-0.5"
+              >
+                入选理由
+                {showReason ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+              </button>
+              {showReason && (
+                <p className="text-[11px] text-muted-foreground leading-relaxed mt-1">
+                  {reasons.map((r) => r.introduction).filter(Boolean).join(" ")}
+                </p>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}