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

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

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

backend/main.py

@@ -6,7 +6,7 @@ from contextlib import asynccontextmanager
 from dotenv import load_dotenv
 
 from database import init_db
-from routes import stock, collections, shares, sectors
+from routes import stock, collections, shares, sectors, themes
 
 load_dotenv()
 
@@ -31,6 +31,7 @@ app.include_router(stock.router, prefix="/api/stock")
 app.include_router(collections.router, prefix="/api/collections")
 app.include_router(shares.router, prefix="/api/share")
 app.include_router(sectors.router, prefix="/api/sectors")
+app.include_router(themes.router, prefix="/api/themes")
 
 # 生产模式：后端同时托管前端静态文件
 # catch-all 路由在 API 路由之后注册，所以 API 优先级更高

backend/routes/themes.py

@@ -0,0 +1,53 @@
+"""题材数据路由：题材列表、题材详情、题材相关股票"""
+
+from fastapi import APIRouter, Query, HTTPException
+from fastapi.responses import JSONResponse
+from services import themes
+
+router = APIRouter()
+
+# 上游反代/CDN 可能按 path 缓存，显式禁止缓存
+_NO_CACHE_HEADERS = {"Cache-Control": "no-store, no-cache, must-revalidate, max-age=0"}
+
+
+@router.get("", summary="题材列表")
+async def theme_list(
+    sort_field: int = Query(1, ge=1, le=5, description="排序字段：1=涨幅 3=强度 4=热度排名 5=成交额"),
+    asc: bool = Query(False, description="True=升序, False=降序"),
+):
+    if sort_field not in (1, 3, 4, 5):
+        raise HTTPException(status_code=400, detail="排序字段仅支持 1/3/4/5")
+
+    data = await themes.fetch_theme_list(sort_field, asc)
+    return JSONResponse(
+        {"data": data, "count": len(data), "sort_field": sort_field, "asc": asc},
+        headers=_NO_CACHE_HEADERS,
+    )
+
+
+@router.get("/{theme_code}/detail", summary="题材详情")
+async def theme_detail(theme_code: str):
+    data = await themes.fetch_theme_detail(theme_code)
+    if not data:
+        return JSONResponse(
+            {"data": None, "theme_code": theme_code},
+            headers=_NO_CACHE_HEADERS,
+        )
+    return JSONResponse(
+        {"data": data, "theme_code": theme_code},
+        headers=_NO_CACHE_HEADERS,
+    )
+
+
+@router.get("/{theme_code}/stocks", summary="题材相关股票（全部）")
+async def theme_stocks(theme_code: str):
+    result = await themes.fetch_theme_stocks(theme_code)
+    return JSONResponse(
+        {
+            "data": result.get("stockList", []),
+            "statistic": result.get("statistic", {}),
+            "total": result.get("total", 0),
+            "theme_code": theme_code,
+        },
+        headers=_NO_CACHE_HEADERS,
+    )

backend/services/themes.py

@@ -0,0 +1,223 @@
+"""东方财富题材数据服务：题材列表、题材详情、题材相关股票
+
+逆向自 emrnweb.eastmoney.com/investment 的 H5 接口：
+- 题材列表: POST https://emcfgdata.eastmoney.com/api/themeInvest/getThemeList
+- 题材详情: GET  https://emcfgdata.securities.eastmoney.com/api/themeInvest/getDetail/{themeCode}
+- 相关股票: POST https://emcfgdata.eastmoney.com/api/themeInvest/getStockList
+
+两个 POST 接口需要「移动端包装结构」：
+  {args:{...业务参数}, appKey, client, clientVersion, clientType, randomCode, timestamp}
+"""
+
+import asyncio
+import json
+import random
+import string
+import time
+from datetime import datetime, time as dtime, timedelta, timezone
+from typing import Optional
+
+import httpx
+
+from services.cache import get_cache, set_cache
+
+# ---- 东方财富移动端配置中心域名 ----
+
+_PZ_URL = "https://emcfgdata.eastmoney.com"
+_PZ_CDN_URL = "https://emcfgdata.securities.eastmoney.com"
+
+# appKey 与页面场景对应：题材列表索引页 / 题材详情页
+_APP_KEY_INDEX = "rn-themeIndex"
+_APP_KEY_DETAIL = "rn-themeDetail"
+
+_HEADERS = {
+    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
+    "Origin": "https://emrnweb.eastmoney.com",
+    "Referer": "https://emrnweb.eastmoney.com/",
+    "Accept": "application/json",
+    "Accept-Language": "zh-CN,zh;q=0.9",
+}
+
+# ---- 交易时段感知缓存 ----
+
+_CST = timezone(timedelta(hours=8))  # 北京时间
+_TRADING_MORNING = (dtime(9, 30), dtime(11, 30))
+_TRADING_AFTERNOON = (dtime(13, 0), dtime(15, 0))
+
+
+def _is_trading_time() -> bool:
+    """判断当前是否为 A 股交易时段（周一至周五 9:30-11:30 / 13:00-15:00）"""
+    now = datetime.now(_CST)
+    if now.weekday() >= 5:
+        return False
+    t = now.time()
+    return (_TRADING_MORNING[0] <= t <= _TRADING_MORNING[1]
+            or _TRADING_AFTERNOON[0] <= t <= _TRADING_AFTERNOON[1])
+
+
+def _dynamic_ttl() -> int:
+    """盘中返回 2 分钟缓存 TTL，非交易时段 18 小时（覆盖到下一交易日）"""
+    return 0 if _is_trading_time() else 18
+
+
+# ---- 请求封装 ----
+
+def _build_payload(args: Optional[dict] = None, app_key: str = _APP_KEY_INDEX) -> dict:
+    """构建东方财富移动端请求包装结构"""
+    return {
+        "args": args or {},
+        "appKey": app_key,
+        "client": "iOS",
+        "clientVersion": "8.3",
+        "clientType": "cfw",
+        "randomCode": "".join(random.choices(string.ascii_uppercase + string.ascii_lowercase + string.digits, k=16)),
+        "timestamp": int(time.time() * 1000),
+    }
+
+
+async def _post(path: str, args: dict, app_key: str = _APP_KEY_INDEX) -> Optional[dict]:
+    """POST 到配置中心接口，返回 data 层 JSON"""
+    payload = _build_payload(args, app_key)
+    try:
+        async with httpx.AsyncClient(timeout=15) as client:
+            resp = await client.post(_PZ_URL + path, json=payload, headers=_HEADERS)
+            if resp.status_code != 200:
+                return None
+            body = resp.json()
+    except Exception as e:
+        print(f"[themes] POST {path} 失败: {e}")
+        return None
+    if body.get("code") != 0:
+        print(f"[themes] POST {path} 返回错误: {body.get('message')}")
+        return None
+    return body.get("data")
+
+
+async def _get_cdn(path: str, app_key: str = _APP_KEY_DETAIL) -> Optional[dict]:
+    """GET 到配置中心 CDN 接口（题材详情），data 包装结构放 query 参数"""
+    payload = _build_payload({}, app_key)
+    params = {"data": json.dumps(payload, ensure_ascii=False)}
+    try:
+        async with httpx.AsyncClient(timeout=15) as client:
+            resp = await client.get(_PZ_CDN_URL + path, params=params, headers=_HEADERS)
+            if resp.status_code != 200:
+                return None
+            body = resp.json()
+    except Exception as e:
+        print(f"[themes] GET {path} 失败: {e}")
+        return None
+    if body.get("code") != 0:
+        print(f"[themes] GET {path} 返回错误: {body.get('message')}")
+        return None
+    return body.get("data")
+
+
+# ---- 题材列表 ----
+
+# sortField 映射（题材列表页）：1=涨幅(bf3) 3=强度(strengthValue) 4=热度排名(hotRank) 5=成交额(fex5)
+_LIST_PAGE_SIZE = 500
+
+
+async def fetch_theme_list(sort_field: int = 1, asc: bool = False) -> list[dict]:
+    """获取全部题材列表（内部循环分页拉全，约 623 个，最多 2 页）
+
+    Args:
+        sort_field: 排序字段 1/3/4/5
+        asc: True=升序, False=降序
+    """
+    cache_key = f"theme_list:{sort_field}:{asc}"
+    cached = get_cache(cache_key)
+    if cached is not None:
+        return json.loads(cached)
+
+    sort = 1 if asc else -1
+    # hotRank 数值越小越热，"热度降序(最热在前)" 需反转为接口升序
+    if sort_field == 4:
+        sort = -sort
+    items: list[dict] = []
+    page = 1
+    total = None
+
+    for _ in range(5):  # 安全上限
+        data = await _post(
+            "/api/themeInvest/getThemeList",
+            {"pageSize": _LIST_PAGE_SIZE, "pageNum": page, "sort": sort, "sortField": sort_field},
+        )
+        if not data:
+            break
+        if total is None:
+            total = data.get("total", 0)
+        page_items = data.get("list", [])
+        if not page_items:
+            break
+        items.extend(page_items)
+        if len(items) >= total:
+            break
+        page += 1
+
+    if items:
+        ttl = _dynamic_ttl()
+        if ttl > 0:
+            set_cache(cache_key, json.dumps(items, ensure_ascii=False), ttl_hours=ttl)
+    return items
+
+
+# ---- 题材详情 ----
+
+async def fetch_theme_detail(theme_code: str) -> Optional[dict]:
+    """获取题材详情（简介 + 热点事件 + 相关新闻），缓存 1 小时"""
+    cache_key = f"theme_detail:{theme_code}"
+    cached = get_cache(cache_key)
+    if cached is not None:
+        return json.loads(cached)
+
+    data = await _get_cdn(f"/api/themeInvest/getDetail/{theme_code}", app_key=_APP_KEY_DETAIL)
+    if not data:
+        return None
+
+    set_cache(cache_key, json.dumps(data, ensure_ascii=False), ttl_hours=1)
+    return data
+
+
+# ---- 题材相关股票 ----
+
+_STOCK_PAGE_SIZE = 100
+
+
+async def fetch_theme_stocks(theme_code: str) -> dict:
+    """获取题材下全部相关股票（分页拉全），返回 {stockList, statistic, total}"""
+    cache_key = f"theme_stocks:{theme_code}"
+    cached = get_cache(cache_key)
+    if cached is not None:
+        return json.loads(cached)
+
+    stock_list: list[dict] = []
+    statistic = {}
+    total = 0
+    page = 1
+
+    for _ in range(20):  # 安全上限
+        data = await _post(
+            "/api/themeInvest/getStockList",
+            {"themeCode": theme_code, "pageSize": _STOCK_PAGE_SIZE, "pageNum": page, "sort": -1, "sortField": "f3"},
+            app_key=_APP_KEY_DETAIL,
+        )
+        if not data:
+            break
+        if not statistic and data.get("statistic"):
+            statistic = data["statistic"]
+        page_items = data.get("stockList", [])
+        if not page_items:
+            break
+        stock_list.extend(page_items)
+        total = data.get("total", 0)
+        if len(stock_list) >= total:
+            break
+        page += 1
+
+    result = {"stockList": stock_list, "statistic": statistic, "total": total}
+    if stock_list:
+        ttl = _dynamic_ttl()
+        if ttl > 0:
+            set_cache(cache_key, json.dumps(result, ensure_ascii=False), ttl_hours=ttl)
+    return result

src/lib/theme-api.ts

@@ -0,0 +1,160 @@
+// 题材数据获取工具：通过 Python 后端代理调用东方财富题材接口
+import { getApiBaseUrl } from "@/lib/api-client";
+
+/* ── 题材列表 ── */
+
+export interface ThemeItem {
+  themeCode: string;
+  themeName: string;
+  securityName: string; // 领涨股名称
+  securityCode: string; // 领涨股代码
+  codeWithSuffix: string;
+  hotRank: number; // 热度排名
+  f3: number | null; // 领涨股涨幅
+  bf3: number | null; // 题材涨幅
+  hotValue: number; // 热度值
+  hotValueUpLimit: number; // 热度上限
+  strengthValue: number | null; // 强度值
+  fex5: number | null; // 成交额
+  fex3: number | null;
+  label: string | null; // 标签（如"超级爆点"）
+}
+
+export type ThemeSortField = 1 | 3 | 4 | 5; // 1=涨幅 3=强度 4=热度排名 5=成交额
+
+export interface ThemeListResponse {
+  data: ThemeItem[];
+  count: number;
+  sort_field: number;
+  asc: boolean;
+}
+
+/**
+ * 获取全部题材列表
+ * @param sortField 1=涨幅 3=强度 4=热度排名 5=成交额
+ * @param asc true=升序
+ */
+export async function fetchThemes(sortField: ThemeSortField = 1, asc: boolean = false): Promise<ThemeItem[]> {
+  const baseUrl = getApiBaseUrl();
+  const url = `${baseUrl}/api/themes?sort_field=${sortField}&asc=${asc}`;
+
+  try {
+    const resp = await fetch(url, { method: "GET", cache: "no-store" });
+    if (!resp.ok) return [];
+    const result: ThemeListResponse = await resp.json();
+    return result.data || [];
+  } catch (err) {
+    console.error("[theme-api] 获取题材列表失败:", err);
+    return [];
+  }
+}
+
+/* ── 题材详情 ── */
+
+export interface ThemeHotEvent {
+  newsTitle: string | null;
+  newsSummary: string | null;
+  newsMediaName: string | null;
+  newsPublishTimeFormat: string | null;
+  newsCode: string | null;
+}
+
+export interface ThemeNews {
+  newsCode: string;
+  newsTitle: string;
+  newsMediaName: string;
+  newsPublishTime: number | null;
+}
+
+export interface ThemeBaseInfo {
+  themeCode: string;
+  themeName: string;
+  introduction: string;
+  explainImgUrl: string | null;
+  themeLevel: number;
+  isShowRank: number;
+}
+
+export interface ThemeDetail {
+  baseInfo: ThemeBaseInfo;
+  hotEvent: ThemeHotEvent | null;
+  eventHistory: ThemeNews[];
+  topicId: string | null;
+}
+
+/**
+ * 获取题材详情（简介 + 热点事件 + 相关新闻）
+ */
+export async function fetchThemeDetail(themeCode: string): Promise<ThemeDetail | null> {
+  const baseUrl = getApiBaseUrl();
+  const url = `${baseUrl}/api/themes/${themeCode}/detail`;
+
+  try {
+    const resp = await fetch(url, { method: "GET", cache: "no-store" });
+    if (!resp.ok) return null;
+    const result = await resp.json();
+    return result.data || null;
+  } catch (err) {
+    console.error("[theme-api] 获取题材详情失败:", err);
+    return null;
+  }
+}
+
+/* ── 题材相关股票 ── */
+
+export interface ThemeStockKeyword {
+  keywordCode: string;
+  keyword: string;
+  introduction: string;
+}
+
+export interface ThemeStock {
+  securityName: string;
+  securityCode: string;
+  codeSuffix: string;
+  f2: number; // 现价
+  f3: number; // 涨跌幅%
+  f5: number; // 成交量
+  f6: number; // 成交额
+  f8: number; // 换手率%
+  f20: number; // 总市值
+  f21: number; // 流通市值
+  f62: number; // 主力净流入
+  f100: string; // 所属行业
+  f265: string; // 板块代码
+  label: string | null; // 涨停标签
+  rank: number;
+  dragonStockLabel: number;
+  keywordList: ThemeStockKeyword[]; // 入选理由
+}
+
+export interface ThemeStatistic {
+  f3: number | null; // 板块涨幅
+  f104: number | null; // 上涨家数
+  f105: number | null; // 下跌家数
+  f106: number | null; // 平盘家数
+  fex5: number | null; // 板块成交额
+}
+
+export interface ThemeStocksResponse {
+  data: ThemeStock[];
+  statistic: ThemeStatistic;
+  total: number;
+}
+
+/**
+ * 获取题材下全部相关股票
+ */
+export async function fetchThemeStocks(themeCode: string): Promise<ThemeStocksResponse | null> {
+  const baseUrl = getApiBaseUrl();
+  const url = `${baseUrl}/api/themes/${themeCode}/stocks`;
+
+  try {
+    const resp = await fetch(url, { method: "GET", cache: "no-store" });
+    if (!resp.ok) return null;
+    return await resp.json();
+  } catch (err) {
+    console.error("[theme-api] 获取题材股票失败:", err);
+    return null;
+  }
+}

src/routeTree.gen.ts

@@ -9,11 +9,18 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as ThemesRouteImport } from './routes/themes'
 import { Route as SectorsRouteImport } from './routes/sectors'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ThemeCodeRouteImport } from './routes/theme.$code'
 import { Route as StockCodeRouteImport } from './routes/stock.$code'
 import { Route as ShareCodeRouteImport } from './routes/share.$code'
 
+const ThemesRoute = ThemesRouteImport.update({
+  id: '/themes',
+  path: '/themes',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const SectorsRoute = SectorsRouteImport.update({
   id: '/sectors',
   path: '/sectors',
@@ -24,6 +31,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ThemeCodeRoute = ThemeCodeRouteImport.update({
+  id: '/theme/$code',
+  path: '/theme/$code',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const StockCodeRoute = StockCodeRouteImport.update({
   id: '/stock/$code',
   path: '/stock/$code',
@@ -38,39 +50,73 @@ const ShareCodeRoute = ShareCodeRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/sectors': typeof SectorsRoute
+  '/themes': typeof ThemesRoute
   '/share/$code': typeof ShareCodeRoute
   '/stock/$code': typeof StockCodeRoute
+  '/theme/$code': typeof ThemeCodeRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/sectors': typeof SectorsRoute
+  '/themes': typeof ThemesRoute
   '/share/$code': typeof ShareCodeRoute
   '/stock/$code': typeof StockCodeRoute
+  '/theme/$code': typeof ThemeCodeRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/sectors': typeof SectorsRoute
+  '/themes': typeof ThemesRoute
   '/share/$code': typeof ShareCodeRoute
   '/stock/$code': typeof StockCodeRoute
+  '/theme/$code': typeof ThemeCodeRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/sectors' | '/share/$code' | '/stock/$code'
+  fullPaths:
+    | '/'
+    | '/sectors'
+    | '/themes'
+    | '/share/$code'
+    | '/stock/$code'
+    | '/theme/$code'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/sectors' | '/share/$code' | '/stock/$code'
+  to:
-  id: '__root__' | '/' | '/sectors' | '/share/$code' | '/stock/$code'
+    | '/'
+    | '/sectors'
+    | '/themes'
+    | '/share/$code'
+    | '/stock/$code'
+    | '/theme/$code'
+  id:
+    | '__root__'
+    | '/'
+    | '/sectors'
+    | '/themes'
+    | '/share/$code'
+    | '/stock/$code'
+    | '/theme/$code'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   SectorsRoute: typeof SectorsRoute
+  ThemesRoute: typeof ThemesRoute
   ShareCodeRoute: typeof ShareCodeRoute
   StockCodeRoute: typeof StockCodeRoute
+  ThemeCodeRoute: typeof ThemeCodeRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/themes': {
+      id: '/themes'
+      path: '/themes'
+      fullPath: '/themes'
+      preLoaderRoute: typeof ThemesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/sectors': {
       id: '/sectors'
       path: '/sectors'
@@ -85,6 +131,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/theme/$code': {
+      id: '/theme/$code'
+      path: '/theme/$code'
+      fullPath: '/theme/$code'
+      preLoaderRoute: typeof ThemeCodeRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/stock/$code': {
       id: '/stock/$code'
       path: '/stock/$code'
@@ -105,8 +158,10 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   SectorsRoute: SectorsRoute,
+  ThemesRoute: ThemesRoute,
   ShareCodeRoute: ShareCodeRoute,
   StockCodeRoute: StockCodeRoute,
+  ThemeCodeRoute: ThemeCodeRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/routes/index.tsx

@@ -10,7 +10,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Search, Plus, Share2, Trash2, TrendingUp, Loader2 } from "lucide-react";
+import { Search, Plus, Share2, Trash2, TrendingUp, Loader2, Flame } from "lucide-react";
 import { toast } from "sonner";
 
 export const Route = createFileRoute("/")({
@@ -211,12 +211,20 @@ function Index() {
             A股走势追踪
           </h1>
           <p className="text-sm md:text-base text-muted-foreground">创建股票集合，分享历史走势</p>
-          <Link to="/sectors">
+          <div className="mt-3 flex items-center justify-center gap-2">
-            <Button variant="outline" size="sm" className="mt-3 gap-1.5 text-xs">
+            <Link to="/sectors">
-              <TrendingUp className="h-3.5 w-3.5" />
+              <Button variant="outline" size="sm" className="gap-1.5 text-xs">
-              板块资金流向
+                <TrendingUp className="h-3.5 w-3.5" />
-            </Button>
+                板块资金流向
-          </Link>
+              </Button>
+            </Link>
+            <Link to="/themes">
+              <Button variant="outline" size="sm" className="gap-1.5 text-xs">
+                <Flame className="h-3.5 w-3.5" />
+                题材热点
+              </Button>
+            </Link>
+          </div>
         </div>
 
         <Card className="mb-6 md:mb-8 shadow-lg">

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>
+  );
+}

src/routes/themes.tsx

@@ -0,0 +1,234 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { fetchThemes, type ThemeItem, type ThemeSortField } 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,
+  ArrowDown,
+  ArrowUp,
+  TrendingUp,
+  TrendingDown,
+  Flame,
+} from "lucide-react";
+
+export const Route = createFileRoute("/themes")({
+  component: ThemesPage,
+});
+
+/* ============================================================
+   排序维度（sortField 与后端/东方财富对齐）
+   ============================================================ */
+const SORTS: { key: ThemeSortField; label: string }[] = [
+  { key: 1, label: "涨幅" },
+  { key: 3, label: "强度" },
+  { key: 4, label: "热度" },
+  { key: 5, label: "成交额" },
+];
+
+function ThemesPage() {
+  const [sortField, setSortField] = useState<ThemeSortField>(1);
+  const [asc, setAsc] = useState(false); // 默认降序
+
+  const { data: themes, isLoading, isFetching, isError, refetch } = useQuery({
+    queryKey: ["themes", sortField, asc],
+    queryFn: () => fetchThemes(sortField, asc),
+    staleTime: 30_000,
+    retry: false,
+  });
+
+  const data = themes ?? [];
+
+  const toggleSort = (key: ThemeSortField) => {
+    if (key === sortField) {
+      setAsc((v) => !v);
+    } else {
+      setSortField(key);
+      setAsc(false); // 切新维度默认降序
+    }
+  };
+
+  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-5xl mx-auto px-4 h-12 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Link to="/" className="hover:opacity-70 transition-opacity">
+              <ArrowLeft className="h-5 w-5" />
+            </Link>
+            <h1 className="text-base font-semibold">题材热点</h1>
+          </div>
+          <button
+            onClick={() => refetch()}
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            title="刷新"
+          >
+            <RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
+          </button>
+        </div>
+      </header>
+
+      {/* ── 排序切换 + 统计 ── */}
+      <div className="max-w-5xl mx-auto px-4 mt-3 flex items-center justify-between">
+        <p className="text-[10px] text-muted-foreground">
+          共 {data.length} 个题材
+          {isFetching && (
+            <span className="ml-1 text-[10px] text-muted-foreground/60">· 刷新中…</span>
+          )}
+        </p>
+        <div className="flex gap-0.5 text-xs border rounded-md overflow-hidden">
+          {SORTS.map((s) => (
+            <button
+              key={s.key}
+              onClick={() => toggleSort(s.key)}
+              className={`px-2.5 py-1 flex items-center gap-0.5 transition-colors ${
+                sortField === s.key
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {s.label}
+              {sortField === s.key &&
+                (asc ? <ArrowUp className="h-3 w-3" /> : <ArrowDown className="h-3 w-3" />)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ── 内容区 ── */}
+      <div className="max-w-5xl mx-auto px-4 mt-3 pb-8">
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {Array.from({ length: 18 }).map((_, i) => (
+              <div key={i} className="animate-pulse rounded-xl bg-muted h-32" />
+            ))}
+          </div>
+        ) : isError ? (
+          <div className="flex flex-col items-center gap-3 py-20">
+            <p className="text-sm text-muted-foreground">数据加载失败</p>
+            <button onClick={() => refetch()} className="text-xs text-primary hover:underline">
+              点击重试
+            </button>
+          </div>
+        ) : data.length === 0 ? (
+          <div className="text-center py-20 text-sm text-muted-foreground">暂无题材数据</div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {data.map((item) => (
+              <ThemeCard key={item.themeCode} item={item} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ============================================================
+   数值格式化
+   ============================================================ */
+function fmt(val: number | null | undefined, digits = 2): string {
+  if (val == null) return "--";
+  return val.toFixed(digits);
+}
+
+/* ============================================================
+   题材卡片
+   ============================================================ */
+function ThemeCard({ item }: { item: ThemeItem }) {
+  const change = item.bf3;
+  const hotPct =
+    item.hotValueUpLimit > 0 ? Math.min((item.hotValue / item.hotValueUpLimit) * 100, 100) : 0;
+  const stockBoard = getStockBoard(item.securityCode);
+
+  return (
+    <Link to="/theme/$code" params={{ code: item.themeCode }} className="block">
+      <Card className="rounded-xl hover:shadow-md transition-shadow h-full">
+        <CardContent className="p-3 space-y-2">
+          {/* 题材名 + 领涨标签 */}
+          <div className="flex items-center justify-between gap-1">
+            <p className="text-sm font-medium truncate" title={item.themeName}>
+              {item.themeName}
+            </p>
+            {item.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">
+                {item.label}
+              </span>
+            )}
+          </div>
+
+          {/* 热度进度条 */}
+          <div className="flex items-center gap-1">
+            <Flame className="h-3 w-3 text-orange-500 shrink-0" />
+            <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+              <div
+                className="h-full rounded-full bg-gradient-to-r from-orange-400 to-red-500"
+                style={{ width: `${Math.max(hotPct, 2)}%` }}
+              />
+            </div>
+            <span className="text-[10px] text-muted-foreground tabular-nums shrink-0">
+              {item.hotValue}/{item.hotValueUpLimit}
+            </span>
+          </div>
+
+          {/* 涨幅 + 成交额 */}
+          <div className="flex items-center justify-between">
+            {change != null ? (
+              <span
+                className={`inline-flex items-center gap-0.5 text-xs font-semibold ${
+                  change >= 0 ? "text-red-500" : "text-green-500"
+                }`}
+              >
+                {change >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
+                {change >= 0 ? "+" : ""}
+                {fmt(change)}%
+              </span>
+            ) : (
+              <span className="text-xs text-muted-foreground">--</span>
+            )}
+            <span className="text-[10px] text-muted-foreground">
+              {item.fex5 != null ? formatMoney(item.fex5) : "--"}
+            </span>
+          </div>
+
+          {/* 分割线 */}
+          <hr className="border-border/40" />
+
+          {/* 领涨股 + 强度 */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-1 min-w-0">
+              <span className="text-[10px] text-muted-foreground shrink-0">领涨</span>
+              <span className="text-xs font-medium truncate">{item.securityName || "--"}</span>
+              {stockBoard.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 ${stockBoard.className}`}
+                >
+                  {stockBoard.label}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 shrink-0">
+              {item.f3 != null && (
+                <span
+                  className={`text-[10px] tabular-nums ${
+                    item.f3 >= 0 ? "text-red-500" : "text-green-500"
+                  }`}
+                >
+                  {item.f3 >= 0 ? "+" : ""}
+                  {fmt(item.f3)}%
+                </span>
+              )}
+              <span className="text-[10px] text-muted-foreground tabular-nums">
+                强度 {item.strengthValue ?? "--"}
+              </span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}