yuxuanhui
119 lines
3.9 KiB
TypeScript
119 lines
3.9 KiB
TypeScript
import { Database, Search } from "lucide-react"
|
|
|
|
import { Badge } from "@/shared/ui/badge"
|
|
import { Card } from "@/shared/ui/card"
|
|
|
|
import type { SelectionStockResult } from "../api/selection.types"
|
|
import { PatternScoreDetails } from "./pattern-score"
|
|
import { categoryToneClass, getCategoryLabel } from "./selection-presentation"
|
|
import { SignalDetails } from "./signal-details"
|
|
|
|
interface SignalDetailPanelProps {
|
|
stock: SelectionStockResult | undefined
|
|
}
|
|
|
|
export function SignalDetailPanel({ stock }: SignalDetailPanelProps) {
|
|
if (!stock) {
|
|
return (
|
|
<Card
|
|
aria-label="当前股票详情"
|
|
className="hidden min-h-0 overflow-auto rounded-md border-border/80 bg-card p-3 md:flex md:flex-col md:justify-center"
|
|
>
|
|
<div className="space-y-2 text-center">
|
|
<Search
|
|
className="mx-auto size-5 text-muted-foreground"
|
|
aria-hidden="true"
|
|
/>
|
|
<p className="font-medium">暂无选中股票</p>
|
|
<p className="text-xs leading-5 text-muted-foreground">
|
|
从左侧列表选择一只股票查看详情。
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<aside
|
|
aria-label="当前股票详情"
|
|
className="hidden min-h-0 overflow-auto rounded-md border border-border/80 bg-card p-3 md:block"
|
|
>
|
|
<p className="text-[10px] font-bold tracking-[0.08em] text-muted-foreground uppercase">
|
|
Selected stock
|
|
</p>
|
|
<div className="mt-2 flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<h2 className="truncate text-xl font-semibold tracking-tight">
|
|
{stock.name}
|
|
</h2>
|
|
<p className="font-mono text-xs text-muted-foreground">
|
|
{stock.ts_code}
|
|
</p>
|
|
</div>
|
|
<Database
|
|
className="mt-1 size-4 shrink-0 text-muted-foreground"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
|
|
<p className="mt-4 text-3xl font-semibold tabular-nums tracking-tight">
|
|
¥ {stock.close.toFixed(2)}
|
|
</p>
|
|
|
|
<div className="mt-3 flex flex-wrap gap-1">
|
|
{stock.signals.map((signal) => (
|
|
<Badge
|
|
key={signal.category}
|
|
className={categoryToneClass(signal.category)}
|
|
variant="outline"
|
|
>
|
|
{getCategoryLabel(signal.category)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<dl className="mt-4 divide-y divide-border/60 border-y border-border/60 text-xs">
|
|
<div className="flex items-center justify-between gap-3 py-2.5">
|
|
<dt className="text-muted-foreground">目标交易日</dt>
|
|
<dd className="font-medium tabular-nums">
|
|
{stock.target_trade_date}
|
|
</dd>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-3 py-2.5">
|
|
<dt className="text-muted-foreground">策略</dt>
|
|
<dd className="font-medium">知行 B1</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<section className="mt-4" aria-labelledby="pattern-score-details">
|
|
<h3
|
|
className="mb-2 text-xs font-medium text-muted-foreground"
|
|
id="pattern-score-details"
|
|
>
|
|
图形相似度评分
|
|
</h3>
|
|
<PatternScoreDetails score={stock.score} />
|
|
</section>
|
|
|
|
<section className="mt-4" aria-labelledby="signal-detail-metrics">
|
|
<h3
|
|
className="mb-2 text-xs font-medium text-muted-foreground"
|
|
id="signal-detail-metrics"
|
|
>
|
|
关键指标
|
|
</h3>
|
|
<div className="space-y-4">
|
|
{stock.signals.map((signal) => (
|
|
<section key={signal.category} className="space-y-2">
|
|
<h4 className="text-xs font-medium text-foreground">
|
|
{getCategoryLabel(signal.category)}
|
|
</h4>
|
|
<SignalDetails details={signal.details} />
|
|
</section>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
)
|
|
}
|