feat: 题材列表盘中120s缓存共用，题材详情新增全量新闻分页+强度热度行情

- 题材热点与热点穿透共用题材列表缓存：盘中由"不缓存实时拉取"改为120s短缓存，东财全量列表拉取降到每120s一次，图重建时涨幅/热度两榜直接命中缓存 - 详情页相关新闻升级为全量分页(getThemeRelatedNews)：支持翻页+评论数，替换原 getDetail 固定3条 - 详情页统计条新增强度+热度(getSingleThemeQuote)实时指标 Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-11 16:56:44 +08:00
parent f98a9255a5
commit 7fe8074e22
4 changed files with 265 additions and 31 deletions
@@ -159,6 +159,75 @@ export async function fetchThemeStocks(themeCode: string): Promise<ThemeStocksRe
  }
 }

+/* ── 题材相关新闻（分页） ── */
+
+export interface ThemeNewsItem {
+  newsCode: string;
+  newsTitle: string;
+  newsMediaName: string;
+  showDateTime: number | null;
+  showDateTimeFormat: string | null;
+  commentCount: number;
+  themeCode: string;
+  themeName: string;
+}
+
+export interface ThemeNewsResponse {
+  total: number;
+  maxEuTime: string;
+  list: ThemeNewsItem[];
+}
+
+/**
+ * 获取题材相关新闻（分页，maxEuTime 为翻页游标）
+ */
+export async function fetchThemeNews(
+  themeCode: string,
+  pageNum: number = 1,
+  pageSize: number = 10,
+  maxEuTime: string = "",
+): Promise<ThemeNewsResponse | null> {
+  const baseUrl = getApiBaseUrl();
+  const url = `${baseUrl}/api/themes/${themeCode}/news?page_num=${pageNum}&page_size=${pageSize}&max_eu_time=${encodeURIComponent(maxEuTime)}`;
+
+  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 ThemeQuote {
+  strengthValue: number | null;
+  hotValueUpLimit: number;
+  hotValue: number;
+  f3: number | null;
+}
+
+/**
+ * 获取单题材实时行情
+ */
+export async function fetchThemeQuote(themeCode: string): Promise<ThemeQuote | null> {
+  const baseUrl = getApiBaseUrl();
+  const url = `${baseUrl}/api/themes/${themeCode}/quote`;
+
+  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 GraphTheme {
@@ -1,7 +1,14 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { fetchThemeDetail, fetchThemeStocks, type ThemeStock } from "@/lib/theme-api";
+import {
+  fetchThemeDetail,
+  fetchThemeNews,
+  fetchThemeQuote,
+  fetchThemeStocks,
+  type ThemeStock,
+  type ThemeNewsItem,
+} from "@/lib/theme-api";
 import { getStockBoard } from "@/lib/stock-api";
 import { formatMoney } from "@/lib/utils";
 import { Card, CardContent } from "@/components/ui/card";
@@ -36,6 +43,27 @@ function ThemeDetailPage() {
    staleTime: 30_000,
    retry: false,
  });
+  // 相关新闻：pageNum 偏移分页（东财接口 maxEuTime 是增量游标，翻页靠 pageNum 递增）
+  const [newsPage, setNewsPage] = useState(1);
+  const [newsItems, setNewsItems] = useState<ThemeNewsItem[]>([]);
+  const newsQ = useQuery({
+    queryKey: ["themeNews", code, newsPage],
+    queryFn: () => fetchThemeNews(code, newsPage, 10),
+    staleTime: 60_000,
+    retry: false,
+  });
+  const quoteQ = useQuery({
+    queryKey: ["themeQuote", code],
+    queryFn: () => fetchThemeQuote(code),
+    staleTime: 30_000,
+    retry: false,
+  });
+
+  // 分页追加：首页重置列表，翻页拼接
+  useEffect(() => {
+    if (!newsQ.data?.list) return;
+    setNewsItems((prev) => (newsPage === 1 ? newsQ.data!.list : [...prev, ...newsQ.data!.list]));
+  }, [newsQ.data, newsPage]);

  const isLoading = detailQ.isLoading || stocksQ.isLoading;
  const isError = detailQ.isError || stocksQ.isError;
@@ -49,11 +77,13 @@ function ThemeDetailPage() {
  const refresh = () => {
    detailQ.refetch();
    stocksQ.refetch();
+    quoteQ.refetch();
+    setNewsPage(1);
+    newsQ.refetch();
  };

  const baseInfo = detail?.baseInfo;
  const hotEvent = detail?.hotEvent;
-  const eventHistory = detail?.eventHistory ?? [];

  return (
    <div className="min-h-screen bg-background">
@@ -139,10 +169,20 @@ function ThemeDetailPage() {
              flat={statistic?.f106}
              fex5={statistic?.fex5}
              total={total}
+              strength={quoteQ.data?.strengthValue ?? null}
+              hotValue={quoteQ.data?.hotValue ?? 0}
+              hotValueUpLimit={quoteQ.data?.hotValueUpLimit ?? 0}
            />

-            {/* ── 相关新闻（可折叠） ── */}
-            {eventHistory.length > 0 && <NewsList items={eventHistory} />}
+            {/* ── 相关新闻（分页加载） ── */}
+            {newsItems.length > 0 && (
+              <NewsList
+                items={newsItems}
+                total={newsQ.data?.total ?? 0}
+                loadingMore={newsQ.isFetching && newsPage > 1}
+                onLoadMore={() => setNewsPage((p) => p + 1)}
+              />
+            )}

            {/* ── 相关股票 ── */}
            <div>
@@ -181,6 +221,9 @@ function StatBar({
  flat,
  fex5,
  total,
+  strength,
+  hotValue,
+  hotValueUpLimit,
 }: {
  f3: number | null | undefined;
  up: number | null | undefined;
@@ -188,8 +231,13 @@ function StatBar({
  flat: number | null | undefined;
  fex5: number | null | undefined;
  total: number;
+  strength: number | null;
+  hotValue: number;
+  hotValueUpLimit: number;
 }) {
  const isPos = (f3 ?? 0) >= 0;
+  const hotPct = hotValueUpLimit > 0 ? Math.min((hotValue / hotValueUpLimit) * 100, 100) : 0;
+  const showQuote = strength != null || hotValueUpLimit > 0;
  return (
    <Card>
      <CardContent className="p-3">
@@ -218,24 +266,49 @@ function StatBar({
            平盘 {flat} 只
          </p>
        )}
+        {/* 强度 + 热度（来自单题材实时行情接口） */}
+        {showQuote && (
+          <div className="mt-2 pt-2 border-t border-border/40 flex flex-wrap items-center gap-x-4 gap-y-1 text-[10px] text-muted-foreground">
+            {strength != null && (
+              <span className="inline-flex items-center gap-1">
+                强度
+                <b className="font-bold text-foreground tabular-nums">{strength}</b>
+              </span>
+            )}
+            {hotValueUpLimit > 0 && (
+              <span className="inline-flex items-center gap-1.5">
+                <Flame className="h-3 w-3 text-orange-500" />
+                <span className="w-16 h-1 rounded-full bg-muted overflow-hidden">
+                  <span
+                    className="block h-full rounded-full bg-gradient-to-r from-orange-400 to-red-500"
+                    style={{ width: `${Math.max(hotPct, 2)}%` }}
+                  />
+                </span>
+                热度 {hotValue}/{hotValueUpLimit}
+              </span>
+            )}
+          </div>
+        )}
      </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())}`;
-  };
+function NewsList({
+  items,
+  total,
+  loadingMore,
+  onLoadMore,
+}: {
+  items: ThemeNewsItem[];
+  total: number;
+  loadingMore: boolean;
+  onLoadMore: () => void;
+}) {
+  const hasMore = items.length < total;

  return (
    <Card>
@@ -243,26 +316,28 @@ function NewsList({ items }: { items: { newsTitle: string; newsMediaName: string
        <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>
+          <span className="text-[10px] text-muted-foreground ml-auto">共 {total} 条</span>
        </div>
        <div className="space-y-2.5">
-          {shown.map((n, idx) => (
+          {items.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)}` : ""}
+                {n.showDateTimeFormat ? ` · ${n.showDateTimeFormat}` : ""}
+                {n.commentCount > 0 && <span className="ml-1">· {n.commentCount} 评论</span>}
              </p>
            </div>
          ))}
        </div>
-        {items.length > 2 && (
+        {hasMore && (
          <button
-            onClick={() => setExpanded((v) => !v)}
-            className="mt-2 text-xs text-primary hover:underline inline-flex items-center gap-0.5"
+            onClick={onLoadMore}
+            disabled={loadingMore}
+            className="mt-2 text-xs text-primary hover:underline inline-flex items-center gap-0.5 disabled:opacity-50"
          >
-            {expanded ? "收起" : `展开全部 ${items.length} 条`}
-            {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+            {loadingMore ? "加载中…" : "加载更多"}
+            {!loadingMore && <ChevronDown className="h-3 w-3" />}
          </button>
        )}
      </CardContent>