132 lines
4.0 KiB
TypeScript
132 lines
4.0 KiB
TypeScript
/**
|
||
* AI智能分析组件
|
||
* 显示AI对文档的分析结果、风险提示和优化建议
|
||
*/
|
||
|
||
// 分析项类型
|
||
interface AnalysisItem {
|
||
title: string;
|
||
content: string;
|
||
description: string;
|
||
}
|
||
|
||
// 分析数据类型
|
||
interface AnalysisData {
|
||
riskAlerts: AnalysisItem[];
|
||
suggestions: AnalysisItem[];
|
||
summary: string;
|
||
}
|
||
|
||
interface AIAnalysisProps {
|
||
analysisData: AnalysisData;
|
||
score: number;
|
||
onConfirmResults: () => void;
|
||
}
|
||
|
||
export function AIAnalysis({ analysisData, score, onConfirmResults }: AIAnalysisProps) {
|
||
const handleExportReport = () => {
|
||
alert('导出评查报告功能');
|
||
};
|
||
|
||
// 渲染风险提示项
|
||
const renderRiskAlerts = () => {
|
||
return analysisData.riskAlerts.map((item, index) => (
|
||
<div key={`risk-${index}`} className="bg-gray-50 rounded-md p-4 mb-4">
|
||
<div className="flex items-start">
|
||
<i className="ri-lightbulb-line text-warning text-lg mr-2"></i>
|
||
<div>
|
||
<p className="text-sm mb-2">
|
||
<span className="font-medium">{item.title}：</span>
|
||
{item.content}
|
||
</p>
|
||
<p className="text-xs text-secondary">{item.description}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
));
|
||
};
|
||
|
||
// 渲染优化建议项
|
||
const renderSuggestions = () => {
|
||
return analysisData.suggestions.map((item, index) => (
|
||
<div key={`suggestion-${index}`} className="bg-gray-50 rounded-md p-4 mb-4">
|
||
<div className="flex items-start">
|
||
<i className="ri-lightbulb-line text-primary text-lg mr-2"></i>
|
||
<div>
|
||
<p className="text-sm mb-2">
|
||
<span className="font-medium">{item.title}：</span>
|
||
{item.content}
|
||
</p>
|
||
<p className="text-xs text-secondary">{item.description}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
));
|
||
};
|
||
|
||
// 获取评分对应的颜色类
|
||
const getScoreColorClass = (score: number) => {
|
||
if (score >= 90) return 'text-success';
|
||
if (score >= 70) return 'text-warning';
|
||
return 'text-error';
|
||
};
|
||
|
||
// 获取评分条对应的颜色类
|
||
const getScoreBarColorClass = (score: number) => {
|
||
if (score >= 90) return 'bg-success';
|
||
if (score >= 70) return 'bg-warning';
|
||
return 'bg-error';
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div className="analysis-card bg-white rounded-lg shadow-sm p-4">
|
||
<h3 className="text-lg font-medium mb-4">AI智能分析</h3>
|
||
|
||
{/* 风险提示 */}
|
||
{analysisData.riskAlerts.length > 0 && renderRiskAlerts()}
|
||
|
||
{/* 优化建议 */}
|
||
{analysisData.suggestions.length > 0 && renderSuggestions()}
|
||
</div>
|
||
|
||
<div className="mt-8">
|
||
<h3 className="text-lg font-medium mb-4">综合评价</h3>
|
||
<div className="bg-white border border-gray-200 p-4 rounded-md">
|
||
{/* 评价摘要 */}
|
||
<p className="text-sm">{analysisData.summary}</p>
|
||
|
||
{/* 评分 */}
|
||
<div className="mt-4">
|
||
<p className="text-sm font-medium">
|
||
合规性评分：
|
||
<span className={`${getScoreColorClass(score)} font-medium`}>{score}分</span>
|
||
</p>
|
||
<div className="mt-2 bg-gray-200 rounded-full h-2.5 w-full">
|
||
<div
|
||
className={`${getScoreBarColorClass(score)} h-2.5 rounded-full`}
|
||
style={{ width: `${score}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
{/* <div className="mt-4 flex space-x-4">
|
||
<button
|
||
className="ant-btn ant-btn-default flex items-center"
|
||
onClick={handleExportReport}
|
||
>
|
||
<i className="ri-file-download-line mr-1"></i> 导出评查报告
|
||
</button>
|
||
<button
|
||
className="ant-btn ant-btn-primary flex items-center"
|
||
onClick={onConfirmResults}
|
||
>
|
||
<i className="ri-check-double-line mr-1"></i> 确认评查结果
|
||
</button>
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|