feat: 核心股追踪行点击展开显示所属题材列表
- active 接口返回每只核心股 themes(窗口内按题材去重) - 页面行点击展开题材标签,chevron 指示展开状态 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -59,6 +59,19 @@ async def active_core_stocks():
|
||||
stocks.sort(key=lambda x: x.get("lastAppear") or "", reverse=True)
|
||||
stocks.sort(key=lambda x: -x["appearCount"])
|
||||
|
||||
# 一次性取窗口内全部题材关联,按 stock_code 分组(跨天题材去重)
|
||||
themes_rows = conn.execute(
|
||||
f"""SELECT stock_code, theme_code, theme_name FROM daily_core_stock_themes
|
||||
WHERE trade_date IN ({placeholders})""",
|
||||
dates,
|
||||
).fetchall()
|
||||
themes_by_stock: dict[str, dict[str, dict]] = {}
|
||||
for t in themes_rows:
|
||||
per = themes_by_stock.setdefault(t["stock_code"], {})
|
||||
per.setdefault(t["theme_code"], {"theme_code": t["theme_code"], "theme_name": t["theme_name"]})
|
||||
for s in stocks:
|
||||
s["themes"] = list(themes_by_stock.get(s["stockCode"], {}).values())
|
||||
|
||||
# daysSinceLastAppear:最近上榜距窗口最新交易日的自然日差(简单口径)
|
||||
latest = dates[-1] if dates else None
|
||||
for s in stocks:
|
||||
|
||||
@@ -9,6 +9,7 @@ export interface ActiveCoreStock {
|
||||
appearCount: number;
|
||||
lastAppear: string | null;
|
||||
daysSinceLastAppear: number; // 最近上榜距窗口最新交易日的自然日差
|
||||
themes: { theme_code: string; theme_name: string }[]; // 所属题材列表
|
||||
}
|
||||
|
||||
export interface ActiveCoreStocksResponse {
|
||||
|
||||
+63
-29
@@ -1,7 +1,8 @@
|
||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Fragment, useState } from "react";
|
||||
import { fetchActiveCoreStocks } from "@/lib/core-stock-api";
|
||||
import { ArrowLeft, RefreshCw, Flame } from "lucide-react";
|
||||
import { ArrowLeft, RefreshCw, Flame, ChevronDown, ChevronRight } from "lucide-react";
|
||||
|
||||
export const Route = createFileRoute("/core-stocks")({
|
||||
component: CoreStocksPage,
|
||||
@@ -24,6 +25,7 @@ function CoreStocksPage() {
|
||||
|
||||
const dates = data?.dates ?? [];
|
||||
const stocks = data?.stocks ?? [];
|
||||
const [expanded, setExpanded] = useState<string | null>(null);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
@@ -74,35 +76,67 @@ function CoreStocksPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{stocks.map((s) => (
|
||||
<tr key={s.stockCode} className="border-b last:border-0 hover:bg-muted/30">
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
<span className="font-medium">{s.stockName}</span>
|
||||
<span className="ml-1 text-[10px] text-muted-foreground">{s.stockCode}</span>
|
||||
</td>
|
||||
{dates.map((d) => {
|
||||
const g = s.dailyGains[d];
|
||||
const cls = g == null ? "text-muted-foreground/40" : g >= 0 ? "text-red-500" : "text-green-500";
|
||||
return (
|
||||
<td key={d} className={`px-2 py-1.5 text-right tabular-nums whitespace-nowrap ${cls}`}>
|
||||
{formatGain(g)}
|
||||
{stocks.map((s) => {
|
||||
const isOpen = expanded === s.stockCode;
|
||||
return (
|
||||
<Fragment key={s.stockCode}>
|
||||
<tr
|
||||
onClick={() => setExpanded(isOpen ? null : s.stockCode)}
|
||||
className="border-b last:border-0 hover:bg-muted/30 cursor-pointer"
|
||||
>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{isOpen ? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" /> : <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />}
|
||||
<span className="font-medium">{s.stockName}</span>
|
||||
<span className="ml-1 text-[10px] text-muted-foreground">{s.stockCode}</span>
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<td className="px-2 py-1.5 text-right tabular-nums whitespace-nowrap text-muted-foreground">
|
||||
{s.coverCount ?? "·"}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right tabular-nums whitespace-nowrap text-muted-foreground">
|
||||
{s.lastAppear ? s.lastAppear.slice(5) : "·"}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right tabular-nums whitespace-nowrap">
|
||||
<span className="inline-flex items-center gap-0.5 text-orange-500">
|
||||
<Flame className="h-3 w-3" />
|
||||
{s.appearCount}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{dates.map((d) => {
|
||||
const g = s.dailyGains[d];
|
||||
const cls = g == null ? "text-muted-foreground/40" : g >= 0 ? "text-red-500" : "text-green-500";
|
||||
return (
|
||||
<td key={d} className={`px-2 py-1.5 text-right tabular-nums whitespace-nowrap ${cls}`}>
|
||||
{formatGain(g)}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<td className="px-2 py-1.5 text-right tabular-nums whitespace-nowrap text-muted-foreground">
|
||||
{s.coverCount ?? "·"}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right tabular-nums whitespace-nowrap text-muted-foreground">
|
||||
{s.lastAppear ? s.lastAppear.slice(5) : "·"}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right tabular-nums whitespace-nowrap">
|
||||
<span className="inline-flex items-center gap-0.5 text-orange-500">
|
||||
<Flame className="h-3 w-3" />
|
||||
{s.appearCount}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{isOpen && (
|
||||
<tr className="border-b bg-muted/20">
|
||||
<td colSpan={dates.length + 4} className="px-3 py-2">
|
||||
<div className="text-[11px] text-muted-foreground mb-1">所属题材</div>
|
||||
{s.themes && s.themes.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{s.themes.map((t) => (
|
||||
<span
|
||||
key={t.theme_code}
|
||||
className="px-1.5 py-0.5 rounded bg-primary/10 text-primary text-[11px]"
|
||||
>
|
||||
{t.theme_name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">暂无题材数据</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user