重构板块资金流向：行业/概念改用独立 path，后端排序，前端不缓存直接请求

2026-07-13 23:22:09 +08:00
parent 94d84a368f
commit eea2ce86d0
3 changed files with 111 additions and 59 deletions
@@ -460,15 +460,23 @@ export interface SectorResponse {
 }

 /**
- * 获取东方财富板块列表（按主力净流入排序）
+ * 获取东方财富板块列表
+ * 行业/概念走不同 path（/industry、/concept），避免上游反代按 path 缓存忽略 query 导致数据串味
 * @param type industry=行业板块, concept=概念板块
+ * @param sort mainNetInflow=资金流入, changePercent=涨幅%
+ * @param order asc=升序, desc=降序
 */
-export async function fetchSectors(type: SectorType, signal?: AbortSignal): Promise<SectorItem[]> {
+export async function fetchSectors(
+  type: SectorType,
+  opts?: { sort?: "mainNetInflow" | "changePercent"; order?: "asc" | "desc"; signal?: AbortSignal },
+): Promise<SectorItem[]> {
  const baseUrl = getApiBaseUrl();
-  const url = `${baseUrl}/api/sectors?type=${type}`;
+  const sort = opts?.sort ?? "mainNetInflow";
+  const order = opts?.order ?? "desc";
+  const url = `${baseUrl}/api/sectors/${type}?sort=${sort}&order=${order}`;

  try {
-    const resp = await fetch(url, { method: "GET", signal, cache: "no-store" });
+    const resp = await fetch(url, { method: "GET", signal: opts?.signal, cache: "no-store" });
    if (!resp.ok) return [];
    const result: SectorResponse = await resp.json();
    return result.data || [];
@@ -1,6 +1,5 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
-import { useMemo, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { fetchSectors, type SectorItem, type SectorType } from "@/lib/stock-api";
 import { Card, CardContent } from "@/components/ui/card";
 import { ArrowLeft, RefreshCw, ArrowDown, ArrowUp, TrendingUp, TrendingDown } from "lucide-react";
@@ -9,7 +8,7 @@ export const Route = createFileRoute("/sectors")({
  component: SectorsPage,
 });

-/* ── Tabs：行业 / 概念 ── */
+/* ── Tabs：行业 / 概念（各自独立 path，互不串数据）── */
 const TABS: { key: SectorType; label: string }[] = [
  { key: "industry", label: "行业" },
  { key: "concept", label: "概念" },
@@ -22,30 +21,27 @@ function SectorsPage() {
  const [tab, setTab] = useState<SectorType>("industry");
  const [sortKey, setSortKey] = useState<SortKey>("mainNetInflow");
  const [asc, setAsc] = useState(true);
+  const [data, setData] = useState<SectorItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const abortRef = useRef<AbortController | null>(null);

-  // 行业 / 概念 各自独立的 Query，数据完全隔离，杜绝来回切换时的合并
-  const industryQ = useQuery({
-    queryKey: ["sectors", "industry"],
-    queryFn: ({ signal }) => fetchSectors("industry", signal),
-    staleTime: 30_000,
-    retry: false,
-  });
-  const conceptQ = useQuery({
-    queryKey: ["sectors", "concept"],
-    queryFn: ({ signal }) => fetchSectors("concept", signal),
-    staleTime: 30_000,
-    retry: false,
-  });
-
-  const { data = [], isLoading, isFetching, refetch } =
-    tab === "industry" ? industryQ : conceptQ;
-
-  // 切换 tab 时强制重新请求，绕过 React Query 缓存和上游反代缓存，确保拿到对应类型的数据
-  const handleTab = (t: SectorType) => {
-    setTab(t);
-    (t === "industry" ? industryQ : conceptQ).refetch();
-  };
+  // 每次 tab / 排序变化都重新发起请求（带 no-store，不缓存）
+  useEffect(() => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    fetchSectors(tab, { sort: sortKey, order: asc ? "asc" : "desc", signal: controller.signal })
+      .then((items) => {
+        if (!controller.signal.aborted) {
+          setData(items);
+          setLoading(false);
+        }
+      });
+    return () => controller.abort();
+  }, [tab, sortKey, asc]);

+  // 后端已按 sort/order 排序；此处再排一次作为兜底，确保 UI 一定响应排序
  const sorted = useMemo(() => {
    const dir = asc ? 1 : -1;
    return [...data].sort((a, b) => {
@@ -63,6 +59,21 @@ function SectorsPage() {
    }
  };

+  const reload = () => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    fetchSectors(tab, { sort: sortKey, order: asc ? "asc" : "desc", signal: controller.signal }).then(
+      (items) => {
+        if (!controller.signal.aborted) {
+          setData(items);
+          setLoading(false);
+        }
+      },
+    );
+  };
+
  return (
    <div className="min-h-screen bg-background">
      {/* 顶栏 */}
@@ -75,21 +86,21 @@ function SectorsPage() {
            <h1 className="text-base font-semibold">板块资金流向</h1>
          </div>
          <button
-            onClick={() => refetch()}
+            onClick={reload}
            className="text-muted-foreground hover:text-foreground transition-colors"
          >
-            <RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
+            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
          </button>
        </div>
      </header>

-      {/* Tab 切换：行业 / 概念 */}
+      {/* Tab 切换：行业 / 概念（不同 path 请求） */}
      <div className="max-w-5xl mx-auto px-4 mt-4">
        <div className="flex gap-1 bg-muted rounded-lg p-1">
          {TABS.map((t) => (
            <button
              key={t.key}
-              onClick={() => handleTab(t.key)}
+              onClick={() => setTab(t.key)}
              className={`flex-1 py-1.5 text-sm font-medium rounded-md transition-colors ${
                tab === t.key
                  ? "bg-background text-foreground shadow-sm"
@@ -115,7 +126,7 @@ function SectorsPage() {

      {/* 卡片列表 */}
      <div className="max-w-5xl mx-auto px-4 mt-3 pb-8">
-        {isLoading ? (
+        {loading ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
            {Array.from({ length: 20 }).map((_, i) => (
              <div key={i} className="animate-pulse rounded-xl bg-muted h-32" />