28 lines
7.7 KiB
TypeScript
28 lines
7.7 KiB
TypeScript
import {StockIdentity} from "./StockIdentity"
|
||
import {useEffect,useRef,useState} from "react"
|
||
import {ArrowUpRight,RefreshCw} from "lucide-react"
|
||
import {request,ApiError} from "@/lib/auth"
|
||
import type {Candidate} from "@/lib/candidates"
|
||
import {Button} from "./ui/button"
|
||
import {Badge} from "./ui/badge"
|
||
import {Card,CardHeader,CardTitle,CardContent} from "./ui/card"
|
||
import {StockHistoryChart} from "./StockHistoryChart"
|
||
import {ScreeningRunControl} from "./ScreeningRunControl"
|
||
type Stock={id:string;name:string;symbol:string;exchange:string;price:string;observed_at:string}
|
||
type Sync={id:string;status:string;instrument_count:number;finished_at:string;message:string}
|
||
type Strategy={id:string;status:string;name:string}
|
||
type Data={stocks:Stock[];candidates:Candidate[];syncs:Sync[];strategies:Strategy[]}
|
||
export function TradingOverview({onSessionExpired,onNavigate}:{onSessionExpired:()=>void;onNavigate:(page:string,symbol?:string,candidate?:string)=>void}){
|
||
const [data,setData]=useState<Data|null>(null),[error,setError]=useState(""),[loading,setLoading]=useState(false),[selected,setSelected]=useState<Stock|null>(null)
|
||
const controller=useRef<AbortController|null>(null)
|
||
async function refresh(){controller.current?.abort();const c=new AbortController();controller.current=c;setLoading(true);try{const [stocks,candidates,syncs,strategies]=await Promise.all([request<Stock[]>("/api/admin/v1/instruments",{signal:c.signal}),request<Candidate[]>("/api/admin/v1/candidates",{signal:c.signal}),request<Sync[]>("/api/admin/v1/market/syncs",{signal:c.signal}),request<Strategy[]>("/api/admin/v1/strategies",{signal:c.signal})]);if(c.signal.aborted)return;setData({stocks,candidates,syncs,strategies});setSelected(current=>current??stocks[0]??null);setError("")}catch(e){if(!c.signal.aborted){if(e instanceof ApiError&&e.status===401)onSessionExpired();else setError(e instanceof Error?e.message:"股票数据读取失败")}}finally{if(!c.signal.aborted)setLoading(false)}}
|
||
useEffect(()=>{void refresh();return()=>controller.current?.abort()},[])
|
||
const success=data?.syncs.find(x=>x.status==="COMPLETED"),pending=data?.candidates.filter(c=>c.status==="PENDING_REVIEW")??[],published=data?.candidates.filter(c=>c.is_active_publication)??[]
|
||
return <div className="space-y-6"><div className="flex items-center justify-between"><div className="flex gap-2"><Badge variant="outline">沪深 A 股</Badge><Badge variant="outline">公开行情 · 开发研究</Badge></div><Button variant="outline" disabled={loading} onClick={()=>void refresh()}><RefreshCw className={loading?"animate-spin":""}/>刷新数据</Button></div>{error&&<p role="alert" className="text-sm text-destructive">{error}</p>}
|
||
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">{[{title:"已同步股票",value:success?.instrument_count??"—",note:success?`最近成功同步 ${new Date(success.finished_at).toLocaleTimeString("zh-CN")}`:"等待行情源同步",page:"股票行情"},{title:"待审核股票候选",value:data?pending.length:"—",note:"最近 100 条候选修订",page:"候选审核"},{title:"有效发布候选",value:data?published.length:"—",note:"最近 100 条候选修订",page:"候选审核"},{title:"已启用研究策略",value:data?data.strategies.filter(s=>s.status==="ACTIVE").length:"—",note:"最近 100 个策略 · 非收益指标",page:"策略中心"}].map(x=><button key={x.title} className="rounded-xl border bg-card p-5 text-left transition hover:border-primary/40" onClick={()=>onNavigate(x.page)}><div className="flex items-center justify-between"><span className="text-sm text-muted-foreground">{x.title}</span><ArrowUpRight size={15} className="text-muted-foreground"/></div><p className="my-3 font-mono text-4xl font-semibold tracking-tight">{x.value}</p><p className="text-xs text-muted-foreground">{x.note}</p></button>)}</div>
|
||
<ScreeningRunControl onSessionExpired={onSessionExpired} onCompleted={()=>void refresh()}/>
|
||
<div className="grid items-start gap-6 xl:grid-cols-[1.35fr_1fr]"><Card><CardHeader><div className="flex items-center justify-between"><CardTitle>股票观察</CardTitle><Button variant="ghost" size="sm" onClick={()=>onNavigate("股票行情")}>查看股票池<ArrowUpRight/></Button></div><p className="mt-2 text-xs text-muted-foreground">按证券代码排序的行情样本 · 非涨幅排名或投资推荐</p></CardHeader><CardContent>{selected&&<div className="mb-5"><div className="mb-4 flex items-end justify-between"><div><button className="text-xl font-semibold hover:text-primary" onClick={()=>onNavigate("股票行情",selected.symbol)}><StockIdentity name={selected.name} symbol={selected.symbol}/></button><p className="mt-1 font-mono text-xs text-muted-foreground">{selected.exchange} · {selected.symbol}</p></div><div className="text-right"><p className="font-mono text-3xl font-semibold">¥{selected.price}</p><p className="mt-1 text-xs text-muted-foreground">报价 {new Date(selected.observed_at).toLocaleString("zh-CN")}</p></div></div><StockHistoryChart symbol={selected.symbol} exchange={selected.exchange} onSessionExpired={onSessionExpired}/></div>}<div className="overflow-auto"><table className="w-full text-left text-sm"><thead className="text-xs text-muted-foreground"><tr><th className="pb-3">股票 / 代码</th><th className="pb-3 text-right">最新报价</th><th className="pb-3 text-right">行情时间</th></tr></thead><tbody>{data?.stocks.slice(0,8).map(stock=><tr key={stock.id} className="border-t"><td className="py-3"><button className="text-left hover:text-primary" onClick={()=>setSelected(stock)}><strong><StockIdentity name={stock.name} symbol={stock.symbol}/></strong><p className="mt-1 font-mono text-xs text-muted-foreground">{stock.exchange}:{stock.symbol}</p></button></td><td className="text-right font-mono">¥{stock.price}</td><td className="text-right text-xs text-muted-foreground">{new Date(stock.observed_at).toLocaleTimeString("zh-CN")}</td></tr>)}</tbody></table>{data?.stocks.length===0&&<p className="py-8 text-sm text-muted-foreground">暂无股票快照，请在行情源设置中检查同步配置。</p>}</div></CardContent></Card>
|
||
<Card><CardHeader><div className="flex items-center justify-between"><CardTitle>待审核信号</CardTitle><Button variant="ghost" size="sm" onClick={()=>onNavigate("候选审核")}>进入审核<ArrowUpRight/></Button></div><p className="mt-2 text-xs text-muted-foreground">从股票、参考区间与信号依据开始审核</p></CardHeader><CardContent className="space-y-3">{pending.length===0&&<div className="rounded-xl border border-dashed p-6 text-sm leading-7 text-muted-foreground">当前没有待审核股票。点击“立即自动筛选”后，真实日线命中结果会自动进入这里；不符合规则的股票不会生成候选。</div>}{pending.slice(0,8).map(c=><button key={c.id} className="w-full rounded-xl border p-4 text-left hover:border-primary/40" onClick={()=>onNavigate("候选审核",undefined,c.id)}><div className="flex items-center justify-between"><strong className="text-lg"><StockIdentity name={c.content.name} symbol={c.content.symbol}/></strong><Badge variant="outline">待审核</Badge></div><p className="mt-1 font-mono text-xs text-muted-foreground">{c.content.exchange} · {c.content.symbol}</p><p className="my-3 font-mono text-xl">¥{c.content.reference_plan.entry_low}–{c.content.reference_plan.entry_high}</p><p className="text-xs leading-6 text-muted-foreground">{c.screening?`${c.screening.strategy_name} · 日线 ${c.screening.bar_date}`:"人工补充研究"}<br/>有效至 {new Date(c.valid_until).toLocaleString("zh-CN")}</p></button>)}</CardContent></Card></div>
|
||
<p className="text-xs leading-6 text-muted-foreground">价格按供应商观察时间展示，收盘后保留收盘快照。曲线来自实际未复权日线；当前未接入指数、涨跌幅、成交额与行业分类，因此不展示相应统计。</p></div>
|
||
}
|