783 lines
32 KiB
TypeScript
783 lines
32 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, useCallback, useMemo } from "react";
|
||
import { fetchAPI } from "@/lib/api";
|
||
import type { SectorData, LeadingStock, SectorRotationData } from "@/lib/api";
|
||
import { formatNumber } from "@/lib/utils";
|
||
import { useWebSocket } from "@/hooks/use-websocket";
|
||
import { ErrorBoundary } from "@/components/error-boundary";
|
||
|
||
function getStageInfo(stage: string) {
|
||
switch (stage) {
|
||
case "early":
|
||
return { label: "启动期", color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/15", barColor: "bg-emerald-500/60" };
|
||
case "mid":
|
||
return { label: "发展期", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/15", barColor: "bg-amber-500/60" };
|
||
case "late":
|
||
return { label: "后期", color: "text-orange-400", bg: "bg-orange-500/10 border-orange-500/15", barColor: "bg-orange-500/60" };
|
||
case "end":
|
||
return { label: "尾声", color: "text-red-400", bg: "bg-red-500/10 border-red-500/15", barColor: "bg-red-500/60" };
|
||
default:
|
||
return { label: "—", color: "text-text-muted", bg: "bg-surface-2 border-border-default", barColor: "bg-surface-3" };
|
||
}
|
||
}
|
||
|
||
function getOpportunityHint(stage: string, mainForceRatio?: number): string {
|
||
switch (stage) {
|
||
case "early": return "关注启动强度";
|
||
case "mid": return (mainForceRatio ?? 0) > 30 ? "关注回流确认" : "观察资金动向";
|
||
case "late": return "注意高位分化";
|
||
case "end": return "以观望为主";
|
||
default: return "";
|
||
}
|
||
}
|
||
|
||
function normalizeValues(values: number[]): number[] {
|
||
if (!values.length) return [];
|
||
const min = Math.min(...values);
|
||
const max = Math.max(...values);
|
||
if (max === min) return values.map(() => 50);
|
||
return values.map(v => (v - min) / (max - min) * 100);
|
||
}
|
||
|
||
/** 迷你柱状图：近5日涨跌幅 */
|
||
function MiniBarChart({ data }: { data: number[] }) {
|
||
if (!data.length) return null;
|
||
const maxAbs = Math.max(...data.map(Math.abs), 0.1);
|
||
return (
|
||
<div className="flex items-end gap-1 h-8">
|
||
{data.map((v, i) => {
|
||
const h = Math.max(Math.abs(v) / maxAbs * 100, 8);
|
||
return (
|
||
<div key={i} className="flex-1 flex flex-col justify-end items-center" style={{ height: "100%" }}>
|
||
<div
|
||
className={`w-full rounded-sm transition-all duration-300 ${v >= 0 ? "bg-red-500/50" : "bg-emerald-500/50"}`}
|
||
style={{ height: `${h}%` }}
|
||
/>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 领涨股标签 */
|
||
function LeadingStockTag({ stock }: { stock: LeadingStock }) {
|
||
const isLimitUp = stock.pct_chg >= 9.8;
|
||
return (
|
||
<a
|
||
href={`/stock/${stock.ts_code}`}
|
||
className="inline-flex items-center gap-1 text-[11px] px-2 py-1 rounded-lg bg-surface-2 border border-border-default hover:bg-surface-4 transition-colors"
|
||
>
|
||
<span className="text-text-secondary font-medium">{stock.name}</span>
|
||
<span className={`font-mono tabular-nums ${isLimitUp ? "text-red-400 font-bold" : stock.pct_chg > 0 ? "text-red-400/80" : "text-emerald-400/80"}`}>
|
||
{stock.pct_chg > 0 ? "+" : ""}{stock.pct_chg}%
|
||
</span>
|
||
{stock.limit_times != null && stock.limit_times > 1 && (
|
||
<span className="text-[9px] px-1 py-0.5 rounded bg-red-500/15 text-red-400 font-bold">
|
||
{stock.limit_times}连板
|
||
</span>
|
||
)}
|
||
</a>
|
||
);
|
||
}
|
||
|
||
function HeatScoreDots({ scores: [pct, cap, lim, con] }: { scores: [number, number, number, number] }) {
|
||
const dots = [
|
||
{ score: pct, label: "涨幅" },
|
||
{ score: cap, label: "资金" },
|
||
{ score: lim, label: "涨停" },
|
||
{ score: con, label: "连续" },
|
||
];
|
||
return (
|
||
<div className="flex items-center gap-1">
|
||
{dots.map((d) => (
|
||
<span
|
||
key={d.label}
|
||
className={`w-1.5 h-1.5 rounded-full ${d.score >= 60 ? "bg-amber-400" : "bg-text-muted/30"}`}
|
||
title={`${d.label}因子: ${d.score.toFixed(0)}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SectorDetailCard({ sector, index, factorScores }: {
|
||
sector: SectorData;
|
||
index: number;
|
||
factorScores?: [number, number, number, number];
|
||
}) {
|
||
const displayPct = sector.realtime_pct_change ?? sector.pct_change;
|
||
const isUp = displayPct > 0;
|
||
const displayLimitUp = sector.realtime_limit_up_count ?? sector.limit_up_count;
|
||
const displayAmount = sector.realtime_amount ?? sector.capital_inflow;
|
||
const displayTurnover = sector.realtime_turnover_rate ?? sector.turnover_avg ?? 0;
|
||
const displayUpCount = sector.realtime_up_count;
|
||
const displayDownCount = sector.realtime_down_count;
|
||
const leaders = sector.is_realtime
|
||
? (sector.leading_stocks_realtime?.length ? sector.leading_stocks_realtime : sector.leading_stocks)
|
||
: sector.leading_stocks;
|
||
const stage = getStageInfo(sector.stage ?? "");
|
||
const isTop3 = index < 3;
|
||
const cumulativePct = sector.pct_trend ? sector.pct_trend.reduce((sum, v) => sum + v, 0) : sector.pct_change;
|
||
const hint = getOpportunityHint(sector.stage ?? "", sector.main_force_ratio);
|
||
const mainForceRatio = sector.main_force_ratio ?? 0;
|
||
|
||
return (
|
||
<div
|
||
className="glass-card animate-fade-in-up overflow-hidden"
|
||
style={{ animationDelay: `${index * 60}ms` }}
|
||
>
|
||
{/* Stage color bar at top */}
|
||
<div className={`h-1 ${stage.barColor}`} />
|
||
|
||
<div className="p-5">
|
||
{/* Header row */}
|
||
<div className="flex items-start justify-between mb-2">
|
||
<div className="flex items-center gap-2.5">
|
||
<span className={`w-7 h-7 rounded-lg flex items-center justify-center text-xs font-bold shrink-0 ${
|
||
index === 0
|
||
? "bg-gradient-to-br from-amber-500/30 to-amber-600/20 text-amber-400 border border-amber-500/20"
|
||
: index === 1
|
||
? "bg-gradient-to-br from-slate-400/20 to-slate-500/15 text-slate-300 border border-slate-400/15"
|
||
: index === 2
|
||
? "bg-gradient-to-br from-amber-700/20 to-amber-800/15 text-amber-400 border border-amber-600/15"
|
||
: "bg-surface-2 text-text-muted border border-border-subtle"
|
||
}`}>
|
||
{index + 1}
|
||
</span>
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<span className={`text-sm font-semibold ${isTop3 ? "text-text-primary" : "text-text-secondary"}`}>
|
||
{sector.sector_name}
|
||
</span>
|
||
{sector.is_realtime && (
|
||
<span className="text-[9px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400/80 border border-emerald-500/15">
|
||
实时
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="text-[11px] text-text-muted/60 mt-0.5">
|
||
{stage.label !== "—" && (
|
||
<>
|
||
<span className={stage.color}>{stage.label}</span>
|
||
<span className="text-text-muted/30 mx-1">·</span>
|
||
<span>连{sector.days_continuous}天</span>
|
||
<span className="text-text-muted/30 mx-1">·</span>
|
||
<span className={`font-mono tabular-nums ${cumulativePct > 0 ? "text-red-400/60" : "text-emerald-400/60"}`}>
|
||
累计{cumulativePct > 0 ? "+" : ""}{cumulativePct.toFixed(1)}%
|
||
</span>
|
||
</>
|
||
)}
|
||
{stage.label === "—" && sector.member_count && `${sector.member_count}只成分股`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
<div className={`text-base font-bold font-mono tabular-nums ${isUp ? "text-red-400" : "text-emerald-400"}`}>
|
||
{displayPct > 0 ? "+" : ""}{displayPct.toFixed(2)}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Opportunity hint */}
|
||
{hint && (
|
||
<div className={`text-[11px] mb-3 px-2.5 py-1.5 rounded-lg ${stage.bg} ${stage.color}`}>
|
||
{hint}
|
||
</div>
|
||
)}
|
||
|
||
{/* Metrics row - 4 columns */}
|
||
<div className="grid grid-cols-4 gap-2 mb-3">
|
||
<div className="bg-surface-1 rounded-lg px-2.5 py-2">
|
||
<div className="text-[10px] text-text-muted/50 mb-0.5">{sector.is_realtime ? "实时成交额" : "资金净流入"}</div>
|
||
<div className={`text-xs font-mono tabular-nums font-semibold ${displayAmount > 0 ? "text-red-400" : "text-emerald-400"}`}>
|
||
{displayAmount > 0 ? "+" : ""}{formatNumber(displayAmount)}
|
||
</div>
|
||
</div>
|
||
<div className="bg-surface-1 rounded-lg px-2.5 py-2">
|
||
<div className="text-[10px] text-text-muted/50 mb-0.5">{sector.is_realtime ? "上涨/下跌" : "涨停股"}</div>
|
||
{sector.is_realtime && displayUpCount != null && displayDownCount != null ? (
|
||
<div className="text-xs font-mono tabular-nums font-semibold text-text-secondary">
|
||
{displayUpCount}<span className="text-text-muted/40 text-[10px]"> / </span>{displayDownCount}
|
||
</div>
|
||
) : (
|
||
<div className="text-xs font-mono tabular-nums font-semibold text-text-secondary">
|
||
{displayLimitUp}<span className="text-text-muted/40 text-[10px]"> 只</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="bg-surface-1 rounded-lg px-2.5 py-2">
|
||
<div className="text-[10px] text-text-muted/50 mb-0.5">{sector.is_realtime ? "实时换手" : "主力占比"}</div>
|
||
{sector.is_realtime ? (
|
||
<div className="text-xs font-mono tabular-nums font-semibold text-text-secondary">
|
||
{displayTurnover.toFixed(1)}<span className="text-text-muted/40 text-[10px]">%</span>
|
||
</div>
|
||
) : (
|
||
<div className={`text-xs font-mono tabular-nums font-semibold ${
|
||
mainForceRatio > 30 ? "text-amber-400" : mainForceRatio < 0 ? "text-red-400" : "text-text-secondary"
|
||
}`}>
|
||
{mainForceRatio.toFixed(1)}<span className="text-text-muted/40 text-[10px]">%</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="bg-surface-1 rounded-lg px-2.5 py-2">
|
||
<div className="text-[10px] text-text-muted/50 mb-0.5">热度评分</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className={`text-xs font-mono tabular-nums font-semibold ${
|
||
sector.heat_score >= 70 ? "text-amber-400" : sector.heat_score >= 50 ? "text-text-secondary" : "text-text-muted"
|
||
}`}>
|
||
{sector.heat_score.toFixed(0)}
|
||
<span className="text-text-muted/40 text-[10px]">/100</span>
|
||
</span>
|
||
{factorScores && <HeatScoreDots scores={factorScores} />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 5日趋势图 */}
|
||
{sector.pct_trend && sector.pct_trend.length > 1 && (
|
||
<div className="mb-3">
|
||
<div className="flex items-center justify-between mb-1.5">
|
||
<span className="text-[10px] text-text-muted/50">近5日走势</span>
|
||
<div className="flex gap-2">
|
||
{sector.pct_trend.map((v, i) => (
|
||
<span key={i} className={`text-[9px] font-mono tabular-nums ${v >= 0 ? "text-red-400/60" : "text-emerald-400/60"}`}>
|
||
{v > 0 ? "+" : ""}{v.toFixed(1)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<MiniBarChart data={sector.pct_trend} />
|
||
</div>
|
||
)}
|
||
|
||
{/* 领涨股 */}
|
||
{leaders && leaders.length > 0 && (
|
||
<div>
|
||
<span className="text-[10px] text-text-muted/50 mb-1.5 block">领涨股</span>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{leaders.map((s) => (
|
||
<LeadingStockTag key={s.ts_code} stock={s} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 今日关注 - Top 3 摘要 */
|
||
function FocusSummary({ sectors }: { sectors: SectorData[] }) {
|
||
const top3 = sectors.slice(0, 3);
|
||
if (!top3.length) return null;
|
||
|
||
return (
|
||
<div className="glass-card-static p-4 animate-fade-in-up mb-4">
|
||
<h2 className="text-xs font-semibold text-amber-400 uppercase tracking-wider mb-3">
|
||
今日关注
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-1 gap-3">
|
||
{top3.map((sector, i) => {
|
||
const displayPct = sector.realtime_pct_change ?? sector.pct_change;
|
||
const isUp = displayPct > 0;
|
||
const stage = getStageInfo(sector.stage ?? "");
|
||
const hint = getOpportunityHint(sector.stage ?? "", sector.main_force_ratio);
|
||
const mainForceRatio = sector.main_force_ratio ?? 0;
|
||
|
||
return (
|
||
<div key={sector.sector_code} className={`rounded-xl p-3 border ${stage.bg}`}>
|
||
<div className="flex flex-wrap items-start justify-between gap-2 mb-1.5">
|
||
<div className="flex min-w-0 items-center gap-2">
|
||
<span className={`w-5 h-5 rounded-md flex items-center justify-center text-[10px] font-bold ${
|
||
i === 0 ? "bg-amber-500/20 text-amber-400" : i === 1 ? "bg-slate-400/15 text-slate-300" : "bg-amber-700/15 text-amber-400/80"
|
||
}`}>
|
||
{i + 1}
|
||
</span>
|
||
<span className="min-w-0 break-words text-sm font-semibold text-text-primary">
|
||
{sector.sector_name}
|
||
</span>
|
||
</div>
|
||
<div className="ml-auto flex shrink-0 flex-wrap items-center justify-end gap-1.5">
|
||
<span className={`text-[10px] px-1.5 py-0.5 rounded-md border font-medium ${stage.bg} ${stage.color}`}>
|
||
{stage.label}
|
||
</span>
|
||
<span className={`text-sm font-bold font-mono tabular-nums ${isUp ? "text-red-400" : "text-emerald-400"}`}>
|
||
{displayPct > 0 ? "+" : ""}{displayPct.toFixed(2)}%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className={`text-[11px] ${stage.color} mb-2`}>
|
||
{hint}
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[11px]">
|
||
<span className={`font-mono tabular-nums ${sector.capital_inflow > 0 ? "text-red-400/80" : "text-emerald-400/80"}`}>
|
||
资金{sector.capital_inflow > 0 ? "+" : ""}{formatNumber(sector.capital_inflow)}
|
||
</span>
|
||
{mainForceRatio !== 0 && (
|
||
<span className={`font-mono tabular-nums ${mainForceRatio > 30 ? "text-amber-400/80" : "text-text-muted/60"}`}>
|
||
主力{mainForceRatio.toFixed(1)}%
|
||
</span>
|
||
)}
|
||
{(sector.realtime_limit_up_count ?? sector.limit_up_count) > 0 && (
|
||
<span className="font-mono tabular-nums text-red-400/80">
|
||
涨停{(sector.realtime_limit_up_count ?? sector.limit_up_count)}只
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function SectorsPage() {
|
||
const [sectors, setSectors] = useState<SectorData[]>([]);
|
||
const [showRotation, setShowRotation] = useState(false);
|
||
const [rotationData, setRotationData] = useState<SectorRotationData | null>(null);
|
||
const [stageFilter, setStageFilter] = useState<string>("all");
|
||
|
||
const loadData = useCallback(async () => {
|
||
try {
|
||
const data = await fetchAPI<SectorData[]>("/api/sectors/hot?limit=20");
|
||
setSectors(data);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
}, [loadData]);
|
||
|
||
useWebSocket(
|
||
useCallback(() => {
|
||
loadData();
|
||
}, [loadData])
|
||
);
|
||
|
||
const hasRealtime = sectors.some((s) => s.is_realtime);
|
||
const structureTradeDate = sectors[0]?.structure_trade_date || sectors[0]?.trade_date || "";
|
||
const dataMode = sectors[0]?.data_mode || "daily_snapshot";
|
||
|
||
const loadRotation = useCallback(async () => {
|
||
try {
|
||
const data = await fetchAPI<SectorRotationData>("/api/sectors/rotation?days=5");
|
||
setRotationData(data);
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (showRotation && !rotationData) {
|
||
loadRotation();
|
||
}
|
||
}, [showRotation, rotationData, loadRotation]);
|
||
|
||
// Compute factor scores for heat score visualization
|
||
const factorScoresMap = useMemo(() => {
|
||
if (!sectors.length) return new Map<string, [number, number, number, number]>();
|
||
const pctScores = normalizeValues(sectors.map(s => s.realtime_pct_change ?? s.pct_change));
|
||
const capScores = normalizeValues(sectors.map(s => s.capital_inflow));
|
||
const limScores = normalizeValues(sectors.map(s => s.realtime_limit_up_count ?? s.limit_up_count));
|
||
const conScores = normalizeValues(sectors.map(s => s.days_continuous));
|
||
const map = new Map<string, [number, number, number, number]>();
|
||
sectors.forEach((s, i) => {
|
||
map.set(s.sector_code, [pctScores[i], capScores[i], limScores[i], conScores[i]]);
|
||
});
|
||
return map;
|
||
}, [sectors]);
|
||
|
||
// Stage filter counts
|
||
const stageCounts = useMemo(() => {
|
||
const counts = { all: sectors.length, early: 0, mid: 0, late_end: 0 };
|
||
sectors.forEach(s => {
|
||
if (s.stage === "early") counts.early++;
|
||
else if (s.stage === "mid") counts.mid++;
|
||
else if (s.stage === "late" || s.stage === "end") counts.late_end++;
|
||
});
|
||
return counts;
|
||
}, [sectors]);
|
||
|
||
const filteredSectors = useMemo(() => {
|
||
if (stageFilter === "all") return sectors;
|
||
if (stageFilter === "late_end") return sectors.filter(s => s.stage === "late" || s.stage === "end");
|
||
return sectors.filter(s => s.stage === stageFilter);
|
||
}, [sectors, stageFilter]);
|
||
|
||
const sectorBuckets = useMemo(() => {
|
||
const mainline = sectors.slice(0, 3);
|
||
const secondary = sectors.slice(3, 8);
|
||
const watchlist = sectors.filter((sector) => ["late", "end"].includes(sector.stage ?? "")).slice(0, 4);
|
||
return { mainline, secondary, watchlist };
|
||
}, [sectors]);
|
||
|
||
return (
|
||
<ErrorBoundary>
|
||
<div className="max-w-7xl mx-auto px-4 md:px-8 pt-6 pb-20 md:pb-10">
|
||
<div className="animate-fade-in-up mb-5">
|
||
<h1 className="text-lg font-bold tracking-tight">板块主线</h1>
|
||
<p className="text-xs text-text-muted mt-0.5">
|
||
判断当前主线、板块阶段、资金持续性和领涨股强度
|
||
{hasRealtime && <span className="text-emerald-400/60 ml-1">· 今日实时优先</span>}
|
||
</p>
|
||
{hasRealtime && dataMode === "realtime_today" && (
|
||
<p className="text-[11px] text-text-muted/70 mt-2">
|
||
当前使用东方财富今日板块榜，涨幅、成交额、上涨/下跌家数与领涨股均为今日实时/收盘快照。
|
||
</p>
|
||
)}
|
||
{hasRealtime && dataMode === "realtime_overlay" && (
|
||
<p className="text-[11px] text-text-muted/70 mt-2">
|
||
盘中模式下，涨幅、成交额、上涨/下跌家数与领涨股为实时覆盖；阶段、资金连续性等结构字段仍基于
|
||
<span className="text-text-secondary"> {structureTradeDate || "最近交易日"} </span>
|
||
的板块快照。
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{!sectors.length ? (
|
||
<div className="glass-card-static p-12 text-center animate-fade-in-up">
|
||
<div className="text-text-muted text-sm mb-1">暂无板块数据</div>
|
||
<div className="text-text-muted/50 text-xs">触发扫描后自动更新</div>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1.35fr)_340px] gap-5">
|
||
<section className="space-y-4">
|
||
<MainlineCommandDeck
|
||
mainline={sectorBuckets.mainline}
|
||
secondary={sectorBuckets.secondary}
|
||
watchlist={sectorBuckets.watchlist}
|
||
/>
|
||
|
||
<div className="glass-card-static p-4 animate-fade-in-up">
|
||
<div className="flex flex-wrap items-center justify-between gap-3 mb-3">
|
||
<div>
|
||
<div className="text-[10px] uppercase tracking-[0.22em] text-text-muted font-semibold">板块列表</div>
|
||
<div className="text-sm text-text-secondary mt-1">先按阶段筛，再看每个板块的资金、阶段和领涨股结构。</div>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{[
|
||
{ key: "all", label: "全部", count: stageCounts.all },
|
||
{ key: "early", label: "启动期", count: stageCounts.early },
|
||
{ key: "mid", label: "发展期", count: stageCounts.mid },
|
||
{ key: "late_end", label: "后期/尾声", count: stageCounts.late_end },
|
||
].map(tab => (
|
||
<button
|
||
key={tab.key}
|
||
onClick={() => setStageFilter(tab.key)}
|
||
className={`text-xs px-3 py-1.5 rounded-lg font-medium transition-all ${
|
||
stageFilter === tab.key
|
||
? "bg-gradient-to-r from-amber-500/20 to-amber-600/15 text-amber-400 border border-amber-500/15"
|
||
: "bg-surface-2 text-text-muted hover:text-text-secondary border border-transparent"
|
||
}`}
|
||
>
|
||
{tab.label}
|
||
<span className="ml-1 text-[10px] text-text-muted/50">{tab.count}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{!filteredSectors.length ? (
|
||
<div className="rounded-2xl border border-border-subtle bg-surface-1/70 p-8 text-center text-sm text-text-muted">
|
||
当前筛选下无板块数据
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[1200px] overflow-y-auto pr-1">
|
||
{filteredSectors.map((sector) => {
|
||
const originalIndex = sectors.findIndex(s => s.sector_code === sector.sector_code);
|
||
return (
|
||
<SectorDetailCard
|
||
key={sector.sector_code}
|
||
sector={sector}
|
||
index={originalIndex}
|
||
factorScores={factorScoresMap.get(sector.sector_code)}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<aside className="space-y-4">
|
||
<FocusSummary sectors={sectors} />
|
||
<div className="glass-card-static p-4 animate-fade-in-up">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<div className="text-[10px] uppercase tracking-[0.22em] text-cyan-400 font-semibold">轮动观察</div>
|
||
<div className="text-sm text-text-secondary mt-1">轮动图收纳在侧栏，避免首屏被大图挤占。</div>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowRotation(!showRotation)}
|
||
className={`text-xs px-3 py-2 rounded-xl font-medium transition-all ${
|
||
showRotation
|
||
? "bg-gradient-to-r from-amber-500/25 to-amber-600/20 text-amber-400 border border-amber-500/15"
|
||
: "bg-surface-2 text-text-muted hover:text-text-secondary border border-transparent"
|
||
}`}
|
||
>
|
||
{showRotation ? "收起" : "展开"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{showRotation ? (
|
||
rotationData && rotationData.sectors.length > 0 ? (
|
||
<SectorRotationChart data={rotationData} />
|
||
) : (
|
||
<div className="glass-card-static p-8 text-center">
|
||
<div className="w-6 h-6 border-2 border-amber-400/30 border-t-amber-400 rounded-full animate-spin mx-auto mb-2" />
|
||
<div className="text-xs text-text-muted">加载轮动数据...</div>
|
||
</div>
|
||
)
|
||
) : null}
|
||
</aside>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</ErrorBoundary>
|
||
);
|
||
}
|
||
|
||
function MainlineCommandDeck({
|
||
mainline,
|
||
secondary,
|
||
watchlist,
|
||
}: {
|
||
mainline: SectorData[];
|
||
secondary: SectorData[];
|
||
watchlist: SectorData[];
|
||
}) {
|
||
return (
|
||
<div className="glass-card-static p-5 animate-fade-in-up mb-4 overflow-hidden relative">
|
||
<div className="absolute right-[-120px] top-[-120px] w-72 h-72 rounded-full bg-amber-500/[0.045] blur-3xl pointer-events-none" />
|
||
<div className="relative">
|
||
<div className="text-[10px] uppercase tracking-[0.22em] text-amber-400 font-semibold mb-2">Sector Command</div>
|
||
<h2 className="text-xl font-bold tracking-tight">主线不是排行榜，是今天的方向分层</h2>
|
||
<p className="text-sm text-text-secondary leading-relaxed mt-2">
|
||
主线决定是否值得参与，次主线决定是否做轮动，观察线只保留跟踪，不抢跑。
|
||
</p>
|
||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-3 mt-4">
|
||
<SectorLane title="今日主线" description="可以围绕龙头和回流机会制定计划" tone="red" sectors={mainline} />
|
||
<SectorLane title="次主线" description="可跟踪轮动，不宜当主仓位方向" tone="amber" sectors={secondary} />
|
||
<SectorLane title="观察线" description="只看变化，不在当前阶段主动追击" tone="slate" sectors={watchlist} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SectorLane({
|
||
title,
|
||
description,
|
||
tone,
|
||
sectors,
|
||
}: {
|
||
title: string;
|
||
description: string;
|
||
tone: "red" | "amber" | "slate";
|
||
sectors: SectorData[];
|
||
}) {
|
||
const toneClass = tone === "red"
|
||
? "border-red-500/15 bg-red-500/[0.04] text-red-400"
|
||
: tone === "amber"
|
||
? "border-amber-500/15 bg-amber-500/[0.04] text-amber-400"
|
||
: "border-border-subtle bg-surface-1 text-text-secondary";
|
||
|
||
return (
|
||
<div className="rounded-2xl bg-surface-1/70 border border-border-subtle p-4">
|
||
<div className="flex items-center justify-between gap-3 mb-2">
|
||
<div>
|
||
<h3 className="text-sm font-bold tracking-tight">{title}</h3>
|
||
<p className="text-[11px] text-text-muted mt-0.5">{description}</p>
|
||
</div>
|
||
<span className={`text-xs font-mono tabular-nums rounded-lg border px-2 py-1 ${toneClass}`}>
|
||
{sectors.length}
|
||
</span>
|
||
</div>
|
||
{sectors.length ? (
|
||
<div className="space-y-2.5 mt-3">
|
||
{sectors.map((sector) => (
|
||
<SectorLaneRow key={sector.sector_code} sector={sector} />
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="text-xs text-text-muted mt-3">暂无数据</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SectorLaneRow({ sector }: { sector: SectorData }) {
|
||
const stage = getStageInfo(sector.stage ?? "");
|
||
const leaders = sector.is_realtime
|
||
? (sector.leading_stocks_realtime?.length ? sector.leading_stocks_realtime : sector.leading_stocks)
|
||
: sector.leading_stocks;
|
||
const leadText = leaders?.slice(0, 2).map((stock) => stock.name).join(" / ") || "暂无代表股";
|
||
const action = getSectorAction(sector);
|
||
const displayPct = sector.realtime_pct_change ?? sector.pct_change;
|
||
|
||
return (
|
||
<div className="rounded-xl bg-surface-2/70 border border-border-subtle px-3 py-2.5">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-semibold truncate">{sector.sector_name}</span>
|
||
<span className={`text-[10px] px-1.5 py-0.5 rounded-md border ${stage.bg} ${stage.color}`}>
|
||
{stage.label}
|
||
</span>
|
||
</div>
|
||
<div className="text-[11px] text-text-muted mt-0.5 line-clamp-1">
|
||
代表股：{leadText}
|
||
</div>
|
||
</div>
|
||
<div className="text-right shrink-0">
|
||
<div className={`text-sm font-bold font-mono tabular-nums ${displayPct >= 0 ? "text-red-400" : "text-emerald-400"}`}>
|
||
{displayPct > 0 ? "+" : ""}{displayPct.toFixed(2)}%
|
||
</div>
|
||
<div className="text-[10px] text-text-muted">{action.label}</div>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2 mt-2 text-[11px]">
|
||
<div className="rounded-lg bg-surface-1 px-2 py-1.5 text-text-secondary">
|
||
参与建议：{action.advice}
|
||
</div>
|
||
<div className="rounded-lg bg-surface-1 px-2 py-1.5 text-text-secondary">
|
||
失效观察：{action.risk}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function getSectorAction(sector: SectorData) {
|
||
const stage = sector.stage ?? "";
|
||
const mainForce = sector.main_force_ratio ?? 0;
|
||
const pct = sector.realtime_pct_change ?? sector.pct_change;
|
||
|
||
if (stage === "early") {
|
||
return {
|
||
label: "可进攻",
|
||
advice: "盯龙头和首个分歧回流，优先轻仓试错。",
|
||
risk: "若涨停家数不扩散或龙头走弱，立刻降级观察。",
|
||
};
|
||
}
|
||
if (stage === "mid" && mainForce > 20 && pct > 0) {
|
||
return {
|
||
label: "回流参与",
|
||
advice: "等分歧后的承接确认，不追情绪顶点。",
|
||
risk: "若主力占比回落或板块跟风掉队，停止追击。",
|
||
};
|
||
}
|
||
return {
|
||
label: "只观察",
|
||
advice: "只保留跟踪，不作为当前主仓位方向。",
|
||
risk: "若主线切换或板块退潮，及时移出观察列表。",
|
||
};
|
||
}
|
||
|
||
function SectorRotationChart({ data }: { data: SectorRotationData }) {
|
||
const [el, setEl] = useState<HTMLDivElement | null>(null);
|
||
const { theme } = useNextTheme();
|
||
|
||
useEffect(() => {
|
||
if (!el || !data.sectors.length) return;
|
||
|
||
let chart: ReturnType<typeof import("echarts")["init"]> | null = null;
|
||
|
||
import("echarts").then((ec) => {
|
||
if (!el) return;
|
||
const isDark = theme !== "light";
|
||
chart = ec.init(el, isDark ? "dark" : undefined);
|
||
|
||
const isLight = theme === "light";
|
||
const axisLabelColor = isLight ? "#6b7280" : "#94a3b8";
|
||
const dates = data.dates.map((d) => d.slice(4));
|
||
const sectorNames = data.sectors.map((s) => s.sector_name);
|
||
|
||
const heatData: [number, number, number][] = [];
|
||
let minVal = Infinity;
|
||
let maxVal = -Infinity;
|
||
data.sectors.forEach((sector, yi) => {
|
||
dates.forEach((_, xi) => {
|
||
const dayData = sector.daily_data.find((d) => data.dates[xi] && d.trade_date === data.dates[xi]);
|
||
const val = dayData?.pct_change ?? 0;
|
||
heatData.push([xi, yi, val]);
|
||
if (val < minVal) minVal = val;
|
||
if (val > maxVal) maxVal = val;
|
||
});
|
||
});
|
||
|
||
chart.setOption({
|
||
backgroundColor: "transparent",
|
||
tooltip: {
|
||
formatter: (params: { data: number[] }) => {
|
||
const [x, y, val] = params.data;
|
||
return `${sectorNames[y]}<br/>${dates[x]}: <b>${val > 0 ? "+" : ""}${val.toFixed(2)}%</b>`;
|
||
},
|
||
},
|
||
grid: { left: "15%", right: "5%", top: "5%", bottom: "12%" },
|
||
xAxis: {
|
||
type: "category",
|
||
data: dates,
|
||
splitArea: { show: true },
|
||
axisLabel: { fontSize: 10, color: axisLabelColor },
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: sectorNames,
|
||
axisLabel: { fontSize: 10, color: axisLabelColor, width: 60, overflow: "truncate" },
|
||
},
|
||
visualMap: {
|
||
min: minVal,
|
||
max: maxVal,
|
||
calculable: true,
|
||
orient: "horizontal",
|
||
left: "center",
|
||
bottom: 0,
|
||
inRange: {
|
||
color: ["#22c55e", "#fbbf24", "#ef4444"],
|
||
},
|
||
textStyle: { fontSize: 10, color: axisLabelColor },
|
||
},
|
||
series: [{
|
||
type: "heatmap",
|
||
data: heatData,
|
||
label: {
|
||
show: true,
|
||
fontSize: 9,
|
||
formatter: (params: { data: number[] }) => {
|
||
const val = params.data[2];
|
||
return val > 0 ? `+${val.toFixed(1)}` : val.toFixed(1);
|
||
},
|
||
},
|
||
}],
|
||
});
|
||
|
||
const handleResize = () => chart?.resize();
|
||
window.addEventListener("resize", handleResize);
|
||
});
|
||
|
||
return () => { chart?.dispose(); };
|
||
}, [data, theme, el]);
|
||
|
||
return (
|
||
<div className="glass-card-static p-4">
|
||
<h2 className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-3">
|
||
近{data.dates.length}日板块轮动
|
||
</h2>
|
||
<div ref={setEl} className="w-full" style={{ height: Math.max(data.sectors.length * 28 + 60, 200) }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function useNextTheme() {
|
||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||
const { useTheme } = require("next-themes");
|
||
return useTheme();
|
||
}
|