feat(selection): integrate yet-another-react-lightbox for enhanced image viewing in PatternCaseImage component

This commit is contained in:
yuxuanhui
2026-09-02 18:50:13 +08:00
parent 6b8c5bd33f
commit 9163590070
6 changed files with 234 additions and 61 deletions
@@ -86,51 +86,52 @@ export function SignalDetailPanel({ stock }: SignalDetailPanelProps) {
<p className="text-xs text-muted-foreground">暂无可用行情数据。</p>
)}
</div>
<div className="shrink-0">
<PatternCaseImage score={stock.score} />
</div>
</section>
<section
aria-labelledby="selected-stock-heading"
className="flex w-50 shrink-0 flex-col overflow-auto border-l border-border/60 p-3"
className="flex w-65 shrink-0 flex-col overflow-hidden border-l border-border/60 p-3"
>
<h2
className="truncate text-base font-semibold tracking-tight"
id="selected-stock-heading"
>
{stock.name}
</h2>
<p className="font-mono text-xs text-muted-foreground">
{stock.ts_code}
</p>
<p className="mt-3 text-2xl font-semibold tabular-nums tracking-tight">
¥ {stock.close.toFixed(2)}
</p>
<dl className="mt-3 divide-y divide-border/60 border-y border-border/60 text-xs">
{metricRows.map((row) => (
<div
key={row.key}
className="flex items-center justify-between gap-2 py-2"
>
<dt className="shrink-0 text-muted-foreground">{row.label}</dt>
<dd className="min-w-0 truncate text-right font-medium tabular-nums">
{row.value}
</dd>
</div>
))}
</dl>
<section className="mt-3" aria-labelledby="pattern-score-details">
<h3
className="mb-2 text-xs font-medium text-muted-foreground"
id="pattern-score-details"
<div className="min-h-0 flex-1 overflow-auto">
<h2
className="truncate text-base font-semibold tracking-tight"
id="selected-stock-heading"
>
图形相似度评分
</h3>
<PatternScoreDetails score={stock.score} />
</section>
{stock.name}
</h2>
<p className="font-mono text-xs text-muted-foreground">
{stock.ts_code}
</p>
<p className="mt-3 text-2xl font-semibold tabular-nums tracking-tight">
¥ {stock.close.toFixed(2)}
</p>
<dl className="mt-3 divide-y divide-border/60 border-y border-border/60 text-xs">
{metricRows.map((row) => (
<div
key={row.key}
className="flex items-center justify-between gap-2 py-2"
>
<dt className="shrink-0 text-muted-foreground">{row.label}</dt>
<dd className="min-w-0 truncate text-right font-medium tabular-nums">
{row.value}
</dd>
</div>
))}
</dl>
<section className="mt-3" 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>
</div>
<PatternCaseImage key={stock.ts_code} score={stock.score} />
</section>
</aside>
)