feat: 热点股追踪增加近3/5/10交易日筛选

src/routes/core-stocks.tsx

@@ -1,8 +1,9 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import { fetchActiveCoreStocks } from "@/lib/core-stock-api";
 import { ArrowLeft, RefreshCw, Flame } from "lucide-react";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export const Route = createFileRoute("/core-stocks")({
   component: CoreStocksPage,
@@ -16,9 +17,10 @@ function formatGain(v: number | null | undefined): string {
 }
 
 function CoreStocksPage() {
+  const [days, setDays] = useState(10);
   const { data, isLoading, isFetching, refetch } = useQuery({
-    queryKey: ["core-stocks", "active"],
-    queryFn: fetchActiveCoreStocks,
+    queryKey: ["core-stocks", "active", days],
+    queryFn: () => fetchActiveCoreStocks(days),
     staleTime: 60_000,
     retry: false,
   });
@@ -48,9 +50,18 @@ function CoreStocksPage() {
       </header>
 
       <div className="max-w-5xl mx-auto px-4 mt-3 pb-8">
-        <p className="text-[10px] text-muted-foreground mb-2">
-          活跃热点股（最近 10 个交易日内上榜）· 按上榜次数排序 · 共 {stocks.length} 只
-        </p>
+        <div className="flex items-center justify-between mb-3">
+          <p className="text-[10px] text-muted-foreground">
+            活跃热点股（最近 {days} 个交易日内上榜）· 按上榜次数排序 · 共 {stocks.length} 只
+          </p>
+          <Tabs value={String(days)} onValueChange={(v) => setDays(Number(v))}>
+            <TabsList>
+              <TabsTrigger value="3">近3日</TabsTrigger>
+              <TabsTrigger value="5">近5日</TabsTrigger>
+              <TabsTrigger value="10">近10日</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
 
         {isLoading ? (
           <div className="animate-pulse rounded-xl bg-muted h-32" />