38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import type { AnalysisReport as AnalysisReportData } from '@ftb/shared';
|
|
import { EvidenceList } from './EvidenceList';
|
|
|
|
export function AnalysisReport({ report }: { report: AnalysisReportData }) {
|
|
return (
|
|
<section className="rounded-[28px] border border-white/60 bg-white/75 p-5 shadow-[0_18px_60px_rgba(15,23,42,0.08)] backdrop-blur-xl">
|
|
<h3 className="text-[14px] font-semibold text-[#111827]">分析报告</h3>
|
|
<p className="mt-3 text-[14px] leading-7 text-[#334155]">{report.summary}</p>
|
|
<ReportSection title="关键发现" items={report.keyFindings} />
|
|
<div className="mt-4">
|
|
<p className="mb-2 text-[12px] font-medium text-[#64748b]">数据依据</p>
|
|
<EvidenceList items={report.evidence} />
|
|
</div>
|
|
<ReportSection title="建议动作" items={report.suggestions} />
|
|
<div className="mt-4 rounded-2xl bg-[#f8fafc] p-3 text-[12px] leading-6 text-[#64748b]">
|
|
<p>{report.dataScope.timeDescription}</p>
|
|
<p>{report.dataScope.permissionDescription}</p>
|
|
<p>{report.dataScope.metricFormulaDescription}</p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ReportSection({ title, items }: { title: string; items: string[] }) {
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mt-4">
|
|
<p className="mb-2 text-[12px] font-medium text-[#64748b]">{title}</p>
|
|
<ul className="space-y-1.5 text-[13px] leading-6 text-[#334155]">
|
|
{items.map((item) => (
|
|
<li key={item}>• {item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|