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

This reverts commit eea2ce86d0.

src/lib/stock-api.ts

@@ -460,23 +460,15 @@ 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,
-  opts?: { sort?: "mainNetInflow" | "changePercent"; order?: "asc" | "desc"; signal?: AbortSignal },
-): Promise<SectorItem[]> {
+export async function fetchSectors(type: SectorType, signal?: AbortSignal): Promise<SectorItem[]> {
   const baseUrl = getApiBaseUrl();
-  const sort = opts?.sort ?? "mainNetInflow";
-  const order = opts?.order ?? "desc";
-  const url = `${baseUrl}/api/sectors/${type}?sort=${sort}&order=${order}`;
+  const url = `${baseUrl}/api/sectors?type=${type}`;
 
   try {
-    const resp = await fetch(url, { method: "GET", signal: opts?.signal, cache: "no-store" });
+    const resp = await fetch(url, { method: "GET", signal, cache: "no-store" });
     if (!resp.ok) return [];
     const result: SectorResponse = await resp.json();
     return result.data || [];

src/routes/sectors.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 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";
@@ -8,7 +9,7 @@ export const Route = createFileRoute("/sectors")({
   component: SectorsPage,
 });
 
-/* ── Tabs：行业 / 概念（各自独立 path，互不串数据）── */
+/* ── Tabs：行业 / 概念 ── */
 const TABS: { key: SectorType; label: string }[] = [
   { key: "industry", label: "行业" },
   { key: "concept", label: "概念" },
@@ -21,27 +22,30 @@ 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);
 
-  // 每次 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]);
+  // 行业 / 概念 各自独立的 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();
+  };
 
-  // 后端已按 sort/order 排序；此处再排一次作为兜底，确保 UI 一定响应排序
   const sorted = useMemo(() => {
     const dir = asc ? 1 : -1;
     return [...data].sort((a, b) => {
@@ -59,21 +63,6 @@ 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">
       {/* 顶栏 */}
@@ -86,21 +75,21 @@ function SectorsPage() {
             <h1 className="text-base font-semibold">板块资金流向</h1>
           </div>
           <button
-            onClick={reload}
+            onClick={() => refetch()}
             className="text-muted-foreground hover:text-foreground transition-colors"
           >
-            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+            <RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
           </button>
         </div>
       </header>
 
-      {/* Tab 切换：行业 / 概念（不同 path 请求） */}
+      {/* Tab 切换：行业 / 概念 */}
       <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={() => setTab(t.key)}
+              onClick={() => handleTab(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"
@@ -126,7 +115,7 @@ function SectorsPage() {
 
       {/* 卡片列表 */}
       <div className="max-w-5xl mx-auto px-4 mt-3 pb-8">
-        {loading ? (
+        {isLoading ? (
           <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" />