32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import type { InsightCard as InsightCardData } from '@ftb/shared';
|
||
|
||
export function InsightCard({ insight }: { insight: InsightCardData }) {
|
||
return (
|
||
<section className="rounded-[28px] border border-white/60 bg-white/80 p-5 shadow-[0_18px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl">
|
||
{insight.primaryValue && (
|
||
<div className="mb-3">
|
||
<div className="text-[44px] font-semibold leading-none tracking-normal text-[#0f172a]">
|
||
{insight.primaryValue.value}
|
||
{insight.primaryValue.unit ?? ''}
|
||
</div>
|
||
<div className="mt-2 text-[13px] text-[#64748b]">{insight.primaryValue.label}</div>
|
||
</div>
|
||
)}
|
||
<p className="text-[15px] leading-7 text-[#111827]">{insight.summary}</p>
|
||
{(insight.semanticConfidence !== 'high' || insight.dataConfidence !== 'sufficient') && (
|
||
<p className="mt-3 text-[12px] text-[#64748b]">
|
||
语义置信：{confidenceLabel(insight.semanticConfidence)} · 数据充分性：{dataLabel(insight.dataConfidence)}
|
||
</p>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function confidenceLabel(value: InsightCardData['semanticConfidence']) {
|
||
return value === 'high' ? '高' : value === 'medium' ? '中' : '低';
|
||
}
|
||
|
||
function dataLabel(value: InsightCardData['dataConfidence']) {
|
||
return value === 'sufficient' ? '数据充分' : value === 'partial' ? '部分数据' : '数据不足';
|
||
}
|