+ {data.map((v, i) => {
+ const h = Math.max(Math.abs(v) / maxAbs * 100, 8);
+ return (
+
+
= 0 ? "bg-red-500/50" : "bg-emerald-500/50"}`}
+ style={{ height: `${h}%` }}
+ />
+
+ );
+ })}
+
+ );
+}
+
+/** 领涨股标签 */
+function LeadingStockTag({ stock }: { stock: LeadingStock }) {
+ const isLimitUp = stock.pct_chg >= 9.8;
+ return (
+
+ {stock.name}
+ 0 ? "text-red-400/80" : "text-emerald-400/80"}`}>
+ {stock.pct_chg > 0 ? "+" : ""}{stock.pct_chg}%
+
+ {stock.limit_times != null && stock.limit_times > 1 && (
+
+ {stock.limit_times}连板
+
+ )}
+
+ );
+}
+
+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 (
+
+ {dots.map((d) => (
+ = 60 ? "bg-amber-400" : "bg-text-muted/30"}`}
+ title={`${d.label}因子: ${d.score.toFixed(0)}`}
+ />
+ ))}
+
+ );
+}
+
+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 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 (
+
+ {/* Stage color bar at top */}
+
+
+
+ {/* Header row */}
+
+
+
+ {index + 1}
+
+
+
+
+ {sector.sector_name}
+
+ {sector.is_realtime && (
+
+ 实时
+
+ )}
+
+
+ {stage.label !== "—" && (
+ <>
+ {stage.label}
+ ·
+ 连{sector.days_continuous}天
+ ·
+ 0 ? "text-red-400/60" : "text-emerald-400/60"}`}>
+ 累计{cumulativePct > 0 ? "+" : ""}{cumulativePct.toFixed(1)}%
+
+
+ )}
+ {stage.label === "—" && sector.member_count && `${sector.member_count}只成分股`}
+
+
+
+
+
+ {displayPct > 0 ? "+" : ""}{displayPct.toFixed(2)}%
+
+
+
+
+ {/* Opportunity hint */}
+ {hint && (
+
+ {hint}
+
+ )}
+
+ {/* Metrics row - 4 columns */}
+
+
+
资金净流入
+
0 ? "text-red-400" : "text-emerald-400"}`}>
+ {sector.capital_inflow > 0 ? "+" : ""}{formatNumber(sector.capital_inflow)}
+
+
+
+
涨停股
+
+ {displayLimitUp} 只
+
+
+
+
主力占比
+
30 ? "text-amber-400" : mainForceRatio < 0 ? "text-red-400" : "text-text-secondary"
+ }`}>
+ {mainForceRatio.toFixed(1)}%
+
+
+
+
热度评分
+
+ = 70 ? "text-amber-400" : sector.heat_score >= 50 ? "text-text-secondary" : "text-text-muted"
+ }`}>
+ {sector.heat_score.toFixed(0)}
+ /100
+
+ {factorScores && }
+
+
+
+
+ {/* 5日趋势图 */}
+ {sector.pct_trend && sector.pct_trend.length > 1 && (
+
+
+
近5日走势
+
+ {sector.pct_trend.map((v, i) => (
+ = 0 ? "text-red-400/60" : "text-emerald-400/60"}`}>
+ {v > 0 ? "+" : ""}{v.toFixed(1)}
+
+ ))}
+
+
+
+
+ )}
+
+ {/* 领涨股 */}
+ {leaders && leaders.length > 0 && (
+
+
领涨股
+
+ {leaders.map((s) => (
+
+ ))}
+
+
+ )}
+
+
+ );
+}
+
+/** 今日关注 - Top 3 摘要 */
+function FocusSummary({ sectors }: { sectors: SectorData[] }) {
+ const top3 = sectors.slice(0, 3);
+ if (!top3.length) return null;
+
+ return (
+
+
+ 今日关注
+
+
+ {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 (
+
+
+
+
+ {i + 1}
+
+ {sector.sector_name}
+
+
+
+ {stage.label}
+
+
+ {displayPct > 0 ? "+" : ""}{displayPct.toFixed(2)}%
+
+
+
+
+ {hint}
+
+
+ 0 ? "text-red-400/80" : "text-emerald-400/80"}`}>
+ 资金{sector.capital_inflow > 0 ? "+" : ""}{formatNumber(sector.capital_inflow)}
+
+ {mainForceRatio !== 0 && (
+ 30 ? "text-amber-400/80" : "text-text-muted/60"}`}>
+ 主力{mainForceRatio.toFixed(1)}%
+
+ )}
+ {(sector.realtime_limit_up_count ?? sector.limit_up_count) > 0 && (
+
+ 涨停{(sector.realtime_limit_up_count ?? sector.limit_up_count)}只
+
+ )}
+
+
+ );
+ })}
+
+
+ );
+}
+
+export default function SectorsPage() {
+ const [sectors, setSectors] = useState
([]);
+ const [showRotation, setShowRotation] = useState(false);
+ const [rotationData, setRotationData] = useState(null);
+ const [stageFilter, setStageFilter] = useState("all");
+
+ const loadData = useCallback(async () => {
+ try {
+ const data = await fetchAPI("/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 loadRotation = useCallback(async () => {
+ try {
+ const data = await fetchAPI("/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();
+ 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();
+ 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]);
+
+ return (
+
+
+
+
+
板块分析
+
+ 基于资金流向、涨跌表现、龙头股的热度排名
+ {hasRealtime && · 实时数据}
+
+
+
+
+
+ {/* Sector Rotation Heatmap */}
+ {showRotation && (
+
+ {rotationData && rotationData.sectors.length > 0 ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ {/* Today's Focus - Top 3 */}
+ {sectors.length > 0 &&
}
+
+ {/* Stage filter tabs */}
+ {sectors.length > 0 && (
+
+ {[
+ { 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 => (
+
+ ))}
+
+ )}
+
+ {!sectors.length ? (
+
+ ) : !filteredSectors.length ? (
+
+ ) : (
+
+ {filteredSectors.map((sector) => {
+ const originalIndex = sectors.findIndex(s => s.sector_code === sector.sector_code);
+ return (
+
+ );
+ })}
+
+ )}
+
${dates[x]}: ${val > 0 ? "+" : ""}${val.toFixed(2)}%`;
+ },
+ },
+ 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 (
+
+
+ 近{data.dates.length}日板块轮动
+
+
+
+ {/* Ambient glow */}
+
+
+
+ {/* Brand */}
+
+
+
+ Dragon AI Agent
+
+
A 股智能筛选引擎
+
+
+ {/* Login card */}
+
+
登录以继续
+
+
+
+ {/* Error */}
+ {error && (
+
+ {error}
+
+ )}
+
+
+ {/* Footer link */}
+
+ 返回首页
+
+
+
+ {/* Ambient glow */}
+
+
+
+ {/* ── Hero ── */}
+
+
+
+
+ {/* Brand icon */}
+
+
+
+ D
+
+ {/* Radiating rings */}
+
+
+
+
+
+
+ Dragon AI Agent
+
+
+ A 股智能筛选引擎
+
+
+ 从全局扫描到板块定位，从资金追踪到个股精选，
+ 再到 AI 深度诊断 — 四维分析，一步到位。
+
+
+ {/* CTA */}
+
+
+
+ {/* ── Features ── */}
+
+
+
+
+ 四维分析体系
+
+
+ 不只是筛选，而是从宏观到微观的完整决策链路
+
+
+
+
+ {features.map((f, i) => (
+
+
+
+ {f.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+ ))}
+
+
+
+ {/* ── Process flow ── */}
+
+
+
+ 分析流程
+
+
+ {[
+ { step: "01", label: "全局扫描", sub: "市场温度", color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/15" },
+ { step: "02", label: "板块定位", sub: "热度排名", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/15" },
+ { step: "03", label: "个股精选", sub: "多因子评分", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/15" },
+ { step: "04", label: "AI 诊断", sub: "深度解读", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/15" },
+ ].map((item, i) => (
+
+
+ {item.step}
+ {item.label}
+ {item.sub}
+
+ {i < 3 && (
+
+ )}
+
+ ))}
+
+
+
+ {/* ── Final CTA ── */}
+
+
+
+ 开始使用
+
+
+ 登录后即刻获取实时市场分析与智能推荐
+
+
+ 登录进入
+
+
+
+ {/* ── Footer ── */}
+
+
- {/* Desktop sidebar */}
-
-
- {/* Main content area */}
-
- {children}
-
-