705 lines
30 KiB
TypeScript
705 lines
30 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import { fetchAPI, postAPI } from "@/lib/api";
|
||
import type {
|
||
DayGroup,
|
||
LatestResult,
|
||
OpsStatusResponse,
|
||
PerformanceStats,
|
||
RecommendationData,
|
||
TrackedRecommendation,
|
||
} from "@/lib/api";
|
||
import StockCard from "@/components/stock-card";
|
||
import { useAuth } from "@/hooks/use-auth";
|
||
|
||
function formatDate(dateStr: string): string {
|
||
const d = new Date(dateStr);
|
||
const today = new Date();
|
||
const yesterday = new Date(today);
|
||
yesterday.setDate(yesterday.getDate() - 1);
|
||
|
||
if (dateStr === today.toISOString().slice(0, 10)) return "今日";
|
||
if (dateStr === yesterday.toISOString().slice(0, 10)) return "昨日";
|
||
|
||
const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||
return `${d.getMonth() + 1}月${d.getDate()}日 ${weekDays[d.getDay()]}`;
|
||
}
|
||
|
||
function formatScanTime(value?: string): string {
|
||
if (!value) return "暂无扫描";
|
||
const normalized = value.includes("T") ? value : value.replace(" ", "T");
|
||
const d = new Date(normalized);
|
||
if (Number.isNaN(d.getTime())) return value;
|
||
const today = new Date();
|
||
const isToday = d.toDateString() === today.toDateString();
|
||
const time = d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
|
||
if (isToday) return `今日 ${time}`;
|
||
return d.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
|
||
}
|
||
|
||
type RecommendationWithDate = RecommendationData & { groupDate: string };
|
||
|
||
type FocusTab = "actionable" | "watch" | "observe" | "tracking" | "closed";
|
||
|
||
const SIGNAL_FILTERS = [
|
||
{ key: "all", label: "全部" },
|
||
{ key: "breakout", label: "突破" },
|
||
{ key: "pullback", label: "回踩" },
|
||
{ key: "launch", label: "启动" },
|
||
{ key: "buy", label: "买入" },
|
||
];
|
||
|
||
export default function RecommendationsPage() {
|
||
const { user } = useAuth();
|
||
const [dayGroups, setDayGroups] = useState<DayGroup[]>([]);
|
||
const [latest, setLatest] = useState<LatestResult | null>(null);
|
||
const [expandedDays, setExpandedDays] = useState<Set<string>>(new Set());
|
||
const [historyFilter, setHistoryFilter] = useState<string>("all");
|
||
const [focusTab, setFocusTab] = useState<FocusTab>("actionable");
|
||
const [opsStatus, setOpsStatus] = useState<OpsStatusResponse | null>(null);
|
||
const [performance, setPerformance] = useState<PerformanceStats | null>(null);
|
||
const [trackingUpdating, setTrackingUpdating] = useState(false);
|
||
|
||
const loadData = useCallback(async () => {
|
||
try {
|
||
const [history, latestResult, ops, perf] = await Promise.all([
|
||
fetchAPI<DayGroup[]>("/api/recommendations/history?days=14"),
|
||
fetchAPI<LatestResult>("/api/recommendations/latest").catch(() => null),
|
||
user?.role === "admin" ? fetchAPI<OpsStatusResponse>("/api/market/ops-status").catch(() => null) : Promise.resolve(null),
|
||
fetchAPI<PerformanceStats>("/api/recommendations/performance").catch(() => null),
|
||
]);
|
||
|
||
setDayGroups(history);
|
||
setLatest(latestResult);
|
||
setOpsStatus(ops);
|
||
setPerformance(perf);
|
||
|
||
setExpandedDays((prev) => {
|
||
if (prev.size || history.length === 0) return prev;
|
||
return new Set([history[0].date]);
|
||
});
|
||
} catch (error) {
|
||
console.error("加载推荐失败:", error);
|
||
}
|
||
}, [user?.role]);
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
}, [loadData]);
|
||
|
||
const updateTracking = async () => {
|
||
setTrackingUpdating(true);
|
||
try {
|
||
await postAPI("/api/recommendations/update-tracking");
|
||
await loadData();
|
||
} finally {
|
||
setTrackingUpdating(false);
|
||
}
|
||
};
|
||
|
||
const toggleDay = (date: string) => {
|
||
setExpandedDays((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(date)) next.delete(date);
|
||
else next.add(date);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const applyHistoryFilter = useCallback((recs: RecommendationData[]) => {
|
||
if (historyFilter === "all") return recs;
|
||
if (historyFilter === "buy") return recs.filter((r) => r.signal === "BUY");
|
||
return recs.filter((r) => r.entry_signal_type === historyFilter);
|
||
}, [historyFilter]);
|
||
|
||
const allRecommendations: RecommendationWithDate[] = useMemo(
|
||
() => dayGroups.flatMap((group) => group.recommendations.map((rec) => ({ ...rec, groupDate: group.date }))),
|
||
[dayGroups]
|
||
);
|
||
|
||
const latestDate = dayGroups[0]?.date ?? "";
|
||
const latestRecommendations = useMemo(() => {
|
||
if (latest?.recommendations?.length) return latest.recommendations.map((rec) => ({ ...rec, groupDate: latestDate || "latest" }));
|
||
return latestDate ? allRecommendations.filter((rec) => rec.groupDate === latestDate) : [];
|
||
}, [allRecommendations, latest, latestDate]);
|
||
|
||
const actionable = latestRecommendations.filter((rec) => rec.action_plan === "可操作" || rec.lifecycle_status === "actionable");
|
||
const watch = latestRecommendations.filter((rec) => rec.action_plan === "重点关注");
|
||
const observe = latestRecommendations.filter((rec) => (rec.action_plan ?? "观察") === "观察");
|
||
const tracking = allRecommendations.filter((rec) => rec.lifecycle_status === "tracking");
|
||
const closed = allRecommendations.filter((rec) => ["closed_win", "closed_loss", "expired", "invalidated"].includes(rec.lifecycle_status ?? ""));
|
||
|
||
const focusTabs: Array<{ key: FocusTab; label: string; count: number; description: string }> = [
|
||
{ key: "actionable", label: "可操作", count: actionable.length, description: "执行名单" },
|
||
{ key: "watch", label: "重点关注", count: watch.length, description: "等待确认" },
|
||
{ key: "observe", label: "观察池", count: observe.length, description: "不急处理" },
|
||
{ key: "tracking", label: "跟踪中", count: tracking.length, description: "兑现进度" },
|
||
{ key: "closed", label: "已结束", count: closed.length, description: "复盘样本" },
|
||
];
|
||
|
||
const focusItems = useMemo(() => {
|
||
if (focusTab === "actionable") return actionable;
|
||
if (focusTab === "watch") return watch;
|
||
if (focusTab === "observe") return observe.slice(0, 12);
|
||
if (focusTab === "tracking") return tracking.slice(0, 8);
|
||
return closed.slice(0, 8);
|
||
}, [actionable, closed, focusTab, observe, tracking, watch]);
|
||
|
||
const themeFocus = useMemo(() => {
|
||
const source = latestRecommendations.filter((rec) => ["可操作", "重点关注"].includes(rec.action_plan ?? ""));
|
||
const pool = source.length ? source : latestRecommendations;
|
||
const counts = new Map<string, number>();
|
||
pool.forEach((rec) => {
|
||
const key = rec.sector || "未归类";
|
||
counts.set(key, (counts.get(key) ?? 0) + 1);
|
||
});
|
||
return Array.from(counts.entries())
|
||
.sort((a, b) => b[1] - a[1])
|
||
.slice(0, 3);
|
||
}, [latestRecommendations]);
|
||
|
||
const todayCount = applyHistoryFilter(dayGroups[0]?.recommendations ?? []).length;
|
||
const totalCount = dayGroups.reduce((sum, group) => sum + applyHistoryFilter(group.recommendations).length, 0);
|
||
const latestScanLabel = latest?.latest_scan?.created_at || dayGroups[0]?.scanned_at;
|
||
const focusSummary = buildFocusSummary({
|
||
strategyProfile: latest?.strategy_profile ?? null,
|
||
actionable,
|
||
watch,
|
||
observe,
|
||
tracking,
|
||
closed,
|
||
});
|
||
|
||
return (
|
||
<div className="max-w-7xl mx-auto px-4 md:px-8 pt-6 pb-20 md:pb-10 space-y-5">
|
||
<div className="animate-fade-in-up">
|
||
<h1 className="text-base sm:text-lg font-bold tracking-tight">今日决策池</h1>
|
||
</div>
|
||
|
||
<div className="glass-card-static overflow-hidden animate-fade-in-up">
|
||
<div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_340px]">
|
||
<div className="p-4 md:p-5">
|
||
<div className="text-[10px] uppercase tracking-[0.22em] text-amber-400 font-semibold">今日结论</div>
|
||
<h2 className="mt-2 text-2xl md:text-3xl font-bold tracking-tight text-text-primary">{focusSummary.headline}</h2>
|
||
<p className="mt-2 max-w-3xl text-sm leading-6 text-text-secondary">{focusSummary.detail}</p>
|
||
|
||
{latest?.strategy_profile ? (
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
<SummaryChip label="打法" value={latest.strategy_profile.name} />
|
||
<SummaryChip label="立场" value={latest.strategy_profile.market_stance || (latest.strategy_profile.allow_trading ? "谨慎进攻" : "防守观察")} />
|
||
<SummaryChip label="仓位边界" value={`${latest.strategy_profile.max_position_pct ?? 0}%`} />
|
||
</div>
|
||
) : null}
|
||
|
||
{themeFocus.length ? (
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{themeFocus.map(([theme, count]) => (
|
||
<span
|
||
key={theme}
|
||
className="inline-flex items-center gap-2 rounded-xl border border-amber-500/15 bg-amber-500/[0.05] px-3 py-1.5 text-xs text-text-secondary"
|
||
>
|
||
<span className="font-medium text-text-primary">{theme}</span>
|
||
<span className="font-mono tabular-nums text-amber-400">{count}只</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<KeyList title="执行原则" items={focusSummary.now} />
|
||
<KeyList title="回避原则" items={focusSummary.later} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t border-border-subtle bg-surface-1/50 p-4 md:p-5 xl:border-l xl:border-t-0">
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<SummaryMetric label="今日保留" value={latestRecommendations.length} tone="text-text-primary" />
|
||
<SummaryMetric label="可操作" value={actionable.length} tone="text-red-400" />
|
||
<SummaryMetric label="重点关注" value={watch.length} tone="text-amber-400" />
|
||
<SummaryMetric label="观察池" value={observe.length} tone="text-text-secondary" />
|
||
</div>
|
||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||
<SummaryFact label="历史记录" value={`${totalCount} 只`} />
|
||
<SummaryFact label="已复盘" value={`${closed.length} 只`} />
|
||
<SummaryFact label="最近扫描" value={formatScanTime(latestScanLabel)} />
|
||
<SummaryFact label="扫描状态" value={latest?.latest_scan?.status || dayGroups[0]?.scan_status || "暂无"} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{user?.role === "admin" && opsStatus ? (
|
||
<div className="glass-card-static p-3.5 animate-fade-in-up">
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||
<div className="text-xs text-text-secondary">
|
||
{opsStatus.data_freshness.message}
|
||
</div>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-[11px]">
|
||
<FreshnessCell label="市场" value={opsStatus.data_freshness.market_trade_date || "暂无"} />
|
||
<FreshnessCell label="板块" value={opsStatus.data_freshness.sector_trade_date || "暂无"} />
|
||
<FreshnessCell label="跟踪" value={opsStatus.data_freshness.tracking_trade_date || "暂无"} />
|
||
<FreshnessCell label="状态" value={opsStatus.scan_running ? "扫描中" : "空闲"} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
|
||
<PerformanceReviewCard
|
||
performance={performance}
|
||
canUpdate={user?.role === "admin"}
|
||
updating={trackingUpdating}
|
||
onUpdate={updateTracking}
|
||
/>
|
||
|
||
<div className="glass-card-static p-4 md:p-5 animate-fade-in-up">
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-base font-bold tracking-tight text-text-primary">
|
||
{focusTabs.find((tab) => tab.key === focusTab)?.label ?? "焦点标的"}
|
||
</h2>
|
||
<div className="mt-1 text-xs text-text-muted">
|
||
{focusTabs.find((tab) => tab.key === focusTab)?.description ?? "按当前结论处理"}
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||
{focusTabs.map((tab) => (
|
||
<button
|
||
key={tab.key}
|
||
onClick={() => setFocusTab(tab.key)}
|
||
className={`shrink-0 rounded-xl border px-3 py-2 text-left transition-all ${
|
||
focusTab === tab.key
|
||
? "border-amber-500/20 bg-amber-500/[0.06]"
|
||
: "border-border-subtle bg-surface-1 hover:bg-surface-2"
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs font-semibold text-text-primary">{tab.label}</span>
|
||
<span className="font-mono text-xs tabular-nums text-text-muted">{tab.count}</span>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{focusItems.length ? (
|
||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
{focusItems.map((rec) => (
|
||
<StockCard key={`${focusTab}-${rec.groupDate}-${rec.ts_code}`} rec={rec} compact />
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="mt-4 rounded-2xl border border-border-subtle bg-surface-1/70 p-8 text-center text-sm text-text-muted">
|
||
当前分组暂无标的。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="glass-card-static p-4 md:p-5 animate-fade-in-up">
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-sm font-semibold text-text-primary">历史记录</h2>
|
||
</div>
|
||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||
{SIGNAL_FILTERS.map((item) => (
|
||
<button
|
||
key={item.key}
|
||
onClick={() => setHistoryFilter(item.key)}
|
||
className={`rounded-xl border px-3 py-1.5 text-xs whitespace-nowrap transition-all ${
|
||
historyFilter === item.key
|
||
? "border-amber-500/20 bg-amber-500/[0.06] text-amber-400"
|
||
: "border-border-subtle bg-surface-1 text-text-muted hover:text-text-secondary"
|
||
}`}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{dayGroups.length === 0 ? (
|
||
<div className="mt-4 rounded-2xl border border-border-subtle bg-surface-1/70 p-8 text-center text-sm text-text-muted">
|
||
暂无推荐记录。
|
||
</div>
|
||
) : (
|
||
<div className="mt-4 space-y-3">
|
||
{dayGroups.map((group, index) => {
|
||
const filtered = applyHistoryFilter(group.recommendations);
|
||
|
||
const isExpanded = expandedDays.has(group.date);
|
||
const isToday = index === 0;
|
||
const reasons = group.elimination_reasons ? Object.entries(group.elimination_reasons).slice(0, 3) : [];
|
||
|
||
return (
|
||
<div key={group.date} className="rounded-2xl border border-border-subtle bg-surface-1/40">
|
||
<button
|
||
onClick={() => toggleDay(group.date)}
|
||
className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left"
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-2">
|
||
<span className={`text-sm font-semibold ${isToday ? "text-amber-400" : "text-text-primary"}`}>
|
||
{formatDate(group.date)}
|
||
</span>
|
||
<span className="text-[11px] text-text-muted font-mono tabular-nums">{group.date}</span>
|
||
</div>
|
||
<div className="mt-1 text-[11px] text-text-muted">
|
||
扫描 {formatScanTime(group.scanned_at)} · {filtered.length} 只入选
|
||
{group.scan_input_count ? ` / 候选 ${group.scan_input_count}` : ""}
|
||
</div>
|
||
{group.scan_summary ? (
|
||
<div className="mt-1 line-clamp-1 text-[11px] text-text-secondary">{group.scan_summary}</div>
|
||
) : null}
|
||
</div>
|
||
<span className="text-xs text-text-muted">{isExpanded ? "收起" : "展开"}</span>
|
||
</button>
|
||
|
||
{isExpanded ? (
|
||
<div className="border-t border-border-subtle px-4 py-4">
|
||
{filtered.length ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
{filtered.map((rec) => (
|
||
<StockCard key={`${group.date}-${rec.ts_code}`} rec={rec} compact />
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-2xl border border-border-subtle bg-surface-1/60 p-5 text-sm text-text-muted">
|
||
<div className="font-medium text-text-secondary">
|
||
{historyFilter === "all" ? "本日扫描无入选标的" : "本日扫描存在，但当前筛选条件下无标的"}
|
||
</div>
|
||
<div className="mt-2 text-xs leading-5">
|
||
{group.scan_summary || "系统已完成扫描，但没有标的进入历史推荐池。"}
|
||
</div>
|
||
{reasons.length ? (
|
||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||
{reasons.map(([reason, count]) => (
|
||
<span key={reason} className="rounded-lg bg-surface-2/70 px-2 py-1 text-[10px] text-text-muted">
|
||
{reason} {count}
|
||
</span>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function buildFocusSummary({
|
||
strategyProfile,
|
||
actionable,
|
||
watch,
|
||
observe,
|
||
tracking,
|
||
closed,
|
||
}: {
|
||
strategyProfile: LatestResult["strategy_profile"];
|
||
actionable: RecommendationData[];
|
||
watch: RecommendationData[];
|
||
observe: RecommendationData[];
|
||
tracking: RecommendationData[];
|
||
closed: RecommendationData[];
|
||
}) {
|
||
const allowTrading = strategyProfile?.allow_trading ?? actionable.length > 0;
|
||
const headline =
|
||
!allowTrading
|
||
? "防守观察"
|
||
: actionable.length > 0
|
||
? `处理 ${actionable.length} 只可操作标的`
|
||
: watch.length > 0
|
||
? `关注 ${watch.length} 只确认信号`
|
||
: "暂无优势机会";
|
||
|
||
const detail =
|
||
strategyProfile?.decision_note
|
||
?? (!allowTrading
|
||
? "防守观察，等待确认。"
|
||
: actionable.length > 0
|
||
? "执行名单已收敛。"
|
||
: watch.length > 0
|
||
? "等待确认，不扩池。"
|
||
: "观察为主。");
|
||
|
||
const now = [
|
||
!allowTrading
|
||
? "等待主线扩散和回流。"
|
||
: actionable[0]
|
||
? `看 ${actionable[0].name}${actionable[0].trigger_condition ? `：${actionable[0].trigger_condition}` : " 的确认信号"}。`
|
||
: watch[0]
|
||
? `盯住 ${watch[0].name} 是否从观察转成可操作。`
|
||
: "只留主线候选。",
|
||
watch.length > 0
|
||
? `${watch.length} 只重点关注，等待确认。`
|
||
: allowTrading
|
||
? "不从观察池强挑。"
|
||
: "确认前不提级。",
|
||
tracking.length > 0
|
||
? `${tracking.length} 只跟踪兑现。`
|
||
: "关注今日新结论。",
|
||
];
|
||
|
||
const later = [
|
||
observe.length > 0 ? `${observe.length} 只观察池标的。` : "不堆弱标的。",
|
||
closed.length > 0 ? `${closed.length} 只已结束样本。` : "暂无结束样本。",
|
||
"不追无触发标的。",
|
||
];
|
||
|
||
return { headline, detail, now, later };
|
||
}
|
||
|
||
function PerformanceReviewCard({
|
||
performance,
|
||
canUpdate,
|
||
updating,
|
||
onUpdate,
|
||
}: {
|
||
performance: PerformanceStats | null;
|
||
canUpdate: boolean;
|
||
updating: boolean;
|
||
onUpdate: () => void;
|
||
}) {
|
||
const details = performance?.details ?? [];
|
||
const topRoutes = (performance?.route_breakdown ?? []).slice(0, 4);
|
||
const conclusion = buildPerformanceConclusion(performance);
|
||
|
||
return (
|
||
<div className="glass-card-static p-4 md:p-5 animate-fade-in-up">
|
||
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
||
<div>
|
||
<div className="text-[10px] uppercase tracking-[0.22em] text-amber-400 font-semibold">推荐复盘</div>
|
||
<h2 className="mt-2 text-base font-bold tracking-tight text-text-primary">{conclusion.headline}</h2>
|
||
<p className="mt-1 max-w-3xl text-sm leading-6 text-text-secondary">{conclusion.detail}</p>
|
||
</div>
|
||
{canUpdate ? (
|
||
<button
|
||
onClick={onUpdate}
|
||
disabled={updating}
|
||
className="shrink-0 rounded-xl border border-amber-500/20 bg-amber-500/[0.06] px-3 py-2 text-xs font-semibold text-amber-400 transition-colors hover:bg-amber-500/[0.1] disabled:cursor-not-allowed disabled:opacity-50"
|
||
>
|
||
{updating ? "更新中" : "更新跟踪"}
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="mt-4 grid grid-cols-2 lg:grid-cols-5 gap-2">
|
||
<SummaryMetric label="已跟踪" value={performance?.tracked ?? 0} tone="text-text-primary" />
|
||
<SummaryMetric label="胜率" value={performance?.win_rate ?? 0} tone="text-amber-400" suffix="%" />
|
||
<SummaryMetric
|
||
label="平均收益"
|
||
value={performance?.avg_return ?? 0}
|
||
tone={(performance?.avg_return ?? 0) >= 0 ? "text-red-400" : "text-emerald-400"}
|
||
suffix="%"
|
||
signed
|
||
/>
|
||
<SummaryMetric label="平均浮盈" value={performance?.avg_max_return ?? 0} tone="text-red-400" suffix="%" signed />
|
||
<SummaryMetric label="平均回撤" value={performance?.avg_max_drawdown ?? 0} tone="text-amber-400" suffix="%" />
|
||
</div>
|
||
|
||
<div className="mt-4 grid grid-cols-1 xl:grid-cols-[320px_minmax(0,1fr)] gap-3">
|
||
<div className="rounded-2xl border border-border-subtle bg-surface-1/60 p-3">
|
||
<div className="text-[11px] font-semibold text-text-secondary">有效路线</div>
|
||
<div className="mt-3 space-y-2">
|
||
{topRoutes.length ? topRoutes.map((route) => (
|
||
<div key={route.route} className="flex items-center justify-between gap-3 rounded-xl bg-surface-2/70 px-3 py-2">
|
||
<div className="min-w-0">
|
||
<div className="truncate text-xs font-medium text-text-primary">{formatRouteLabel(route.route)}</div>
|
||
<div className="mt-0.5 text-[11px] text-text-muted">{route.count} 个样本</div>
|
||
</div>
|
||
<div className="text-right font-mono text-xs tabular-nums">
|
||
<div className="text-amber-400">{route.win_rate}%</div>
|
||
<div className={route.avg_return >= 0 ? "text-red-400" : "text-emerald-400"}>
|
||
{route.avg_return > 0 ? "+" : ""}{route.avg_return}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)) : (
|
||
<div className="rounded-xl bg-surface-2/70 px-3 py-6 text-center text-xs text-text-muted">暂无路线样本。</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-2xl border border-border-subtle bg-surface-1/60 p-3">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="text-[11px] font-semibold text-text-secondary">最近复盘样本</div>
|
||
<div className="text-[11px] text-text-muted">按推荐时间倒序</div>
|
||
</div>
|
||
<div className="mt-3 overflow-x-auto">
|
||
{details.length ? (
|
||
<table className="w-full min-w-[620px] border-separate border-spacing-y-2 text-left text-xs">
|
||
<thead className="text-[10px] uppercase tracking-wider text-text-muted">
|
||
<tr>
|
||
<th className="px-3 py-2 font-medium">标的</th>
|
||
<th className="px-3 py-2 font-medium">推荐日</th>
|
||
<th className="px-3 py-2 font-medium">现价/入场</th>
|
||
<th className="px-3 py-2 font-medium">涨跌</th>
|
||
<th className="px-3 py-2 font-medium">过程</th>
|
||
<th className="px-3 py-2 font-medium">结论</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{details.slice(0, 8).map((item) => (
|
||
<ReviewRow key={`${item.ts_code}-${item.created_at}-${item.track_date}`} item={item} />
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
) : (
|
||
<div className="rounded-xl bg-surface-2/70 px-3 py-8 text-center text-sm text-text-muted">
|
||
暂无跟踪记录。先执行一次跟踪更新后再看复盘。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ReviewRow({ item }: { item: TrackedRecommendation }) {
|
||
const pct = item.pct_from_entry ?? 0;
|
||
const pctTone = pct >= 0 ? "text-red-400" : "text-emerald-400";
|
||
const cellClass = "bg-surface-2/30 px-3 py-3 transition-colors group-hover:bg-surface-2/55";
|
||
return (
|
||
<tr className="group">
|
||
<td className={`${cellClass} rounded-l-xl`}>
|
||
<div className="font-medium text-text-primary">{item.name}</div>
|
||
<div className="mt-0.5 font-mono text-[11px] text-text-muted">{item.ts_code}</div>
|
||
</td>
|
||
<td className={`${cellClass} font-mono text-text-muted`}>{item.created_at || "-"}</td>
|
||
<td className={`${cellClass} font-mono tabular-nums text-text-secondary`}>
|
||
{formatNumber(item.current_price)} / {formatNumber(item.entry_price)}
|
||
</td>
|
||
<td className={`${cellClass} font-mono tabular-nums ${pctTone}`}>{pct > 0 ? "+" : ""}{pct}%</td>
|
||
<td className={`${cellClass} font-mono tabular-nums text-text-secondary`}>
|
||
<span className="text-red-400">{formatSigned(item.max_return_pct)}</span>
|
||
<span className="mx-1 text-text-muted">/</span>
|
||
<span className="text-amber-400">{formatSigned(item.max_drawdown_pct)}</span>
|
||
</td>
|
||
<td className={`${cellClass} rounded-r-xl text-text-secondary`}>{item.review_note || formatCloseReason(item.close_reason)}</td>
|
||
</tr>
|
||
);
|
||
}
|
||
|
||
function buildPerformanceConclusion(performance: PerformanceStats | null) {
|
||
if (!performance || performance.tracked === 0) {
|
||
return {
|
||
headline: "等待形成有效复盘样本",
|
||
detail: "当前还没有可统计的推荐跟踪记录。更新跟踪后，会按推荐后的价格表现判断是否兑现预期。",
|
||
};
|
||
}
|
||
|
||
const avg = performance.avg_return ?? 0;
|
||
const direction = avg > 0 ? "整体兑现为正" : avg < 0 ? "整体仍在回撤" : "整体接近持平";
|
||
return {
|
||
headline: `${performance.tracked} 个样本，胜率 ${performance.win_rate}%`,
|
||
detail: `${direction}，平均收益 ${avg > 0 ? "+" : ""}${avg.toFixed(2)}%，平均最大浮盈 ${performance.avg_max_return.toFixed(2)}%，平均最大回撤 ${performance.avg_max_drawdown.toFixed(2)}%。`,
|
||
};
|
||
}
|
||
|
||
function formatRouteLabel(route: string) {
|
||
const labels: Record<string, string> = {
|
||
hot_theme_core: "主线核心",
|
||
theme_leader: "板块龙头",
|
||
top_theme_member: "强主题成员",
|
||
sector_recall: "板块召回",
|
||
};
|
||
return labels[route] ?? route;
|
||
}
|
||
|
||
function formatCloseReason(reason?: string) {
|
||
const labels: Record<string, string> = {
|
||
hit_target: "命中目标",
|
||
hit_stop_loss: "触发止损",
|
||
review_expired_profit: "到期盈利",
|
||
review_expired_loss: "到期亏损",
|
||
review_expired_flat: "到期震荡",
|
||
};
|
||
return labels[reason ?? ""] ?? "跟踪中";
|
||
}
|
||
|
||
function formatNumber(value: number | null | undefined) {
|
||
return value == null ? "-" : Number(value).toFixed(2);
|
||
}
|
||
|
||
function formatSigned(value: number | null | undefined) {
|
||
if (value == null) return "-";
|
||
return `${value > 0 ? "+" : ""}${Number(value).toFixed(2)}%`;
|
||
}
|
||
|
||
function KeyList({ title, items }: { title: string; items: string[] }) {
|
||
return (
|
||
<div className="rounded-2xl border border-border-subtle bg-surface-1/70 p-3">
|
||
<div className="text-[11px] font-semibold text-text-secondary">{title}</div>
|
||
<div className="mt-2 space-y-2">
|
||
{items.map((item, index) => (
|
||
<div key={`${title}-${index}`} className="flex items-start gap-2 text-sm leading-6 text-text-secondary">
|
||
<span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400" />
|
||
<span>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SummaryMetric({
|
||
label,
|
||
value,
|
||
tone,
|
||
suffix,
|
||
signed,
|
||
}: {
|
||
label: string;
|
||
value: number;
|
||
tone: string;
|
||
suffix?: string;
|
||
signed?: boolean;
|
||
}) {
|
||
return (
|
||
<div className="rounded-2xl border border-border-subtle bg-surface-1/70 px-3 py-3">
|
||
<div className="text-[10px] uppercase tracking-wider text-text-muted">{label}</div>
|
||
<div className={`mt-1 text-lg font-bold font-mono tabular-nums ${tone}`}>
|
||
{signed && value > 0 ? "+" : ""}
|
||
{value}
|
||
{suffix ?? ""}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SummaryFact({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<div className="rounded-2xl border border-border-subtle bg-surface-1/70 px-3 py-3">
|
||
<div className="text-[10px] uppercase tracking-wider text-text-muted">{label}</div>
|
||
<div className="mt-1 text-xs font-semibold leading-5 text-text-secondary">{value}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FreshnessCell({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<div className="rounded-xl bg-surface-1/70 px-3 py-2">
|
||
<div className="text-[10px] text-text-muted">{label}</div>
|
||
<div className="mt-1 text-xs font-mono tabular-nums text-text-secondary">{value}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SummaryChip({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<span className="inline-flex items-center gap-2 rounded-xl border border-border-subtle bg-surface-1/70 px-3 py-1.5 text-xs text-text-secondary">
|
||
<span className="text-text-muted">{label}</span>
|
||
<span className="font-medium text-text-primary">{value}</span>
|
||
</span>
|
||
);
|
||
}
|