加入审查详情页面转换
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* 文件详情组件
|
||||
* 显示文件基本信息、合同信息和评查信息
|
||||
*/
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
// 文件基本信息
|
||||
interface FileInfo {
|
||||
fileName: string;
|
||||
contractNumber: string;
|
||||
fileSize: string;
|
||||
fileFormat: string;
|
||||
pageCount: number;
|
||||
uploadTime: string;
|
||||
uploadUser: string;
|
||||
}
|
||||
|
||||
// 合同信息
|
||||
interface ContractInfo {
|
||||
contractType: string;
|
||||
signDate: string;
|
||||
parties: {
|
||||
partyA: string;
|
||||
partyB: string;
|
||||
};
|
||||
amount: string;
|
||||
period: string;
|
||||
}
|
||||
|
||||
// 评查信息
|
||||
interface ReviewInfo {
|
||||
reviewTime: string;
|
||||
reviewModel: string;
|
||||
ruleGroup: string;
|
||||
result: string;
|
||||
issueCount: number;
|
||||
}
|
||||
|
||||
interface FileDetailsProps {
|
||||
fileInfo: FileInfo;
|
||||
contractInfo: ContractInfo;
|
||||
reviewInfo: ReviewInfo;
|
||||
}
|
||||
|
||||
export function FileDetails({ fileInfo, contractInfo, reviewInfo }: FileDetailsProps) {
|
||||
// 情况状态对应的标签
|
||||
const renderResultBadge = (result: string) => {
|
||||
switch (result) {
|
||||
case 'success':
|
||||
return (
|
||||
<span className="status-badge status-success">
|
||||
<i className="ri-checkbox-circle-line mr-1"></i>通过
|
||||
</span>
|
||||
);
|
||||
case 'warning':
|
||||
return (
|
||||
<span className="status-badge status-warning">
|
||||
<i className="ri-alert-line mr-1"></i>警告
|
||||
</span>
|
||||
);
|
||||
case 'error':
|
||||
return (
|
||||
<span className="status-badge status-error">
|
||||
<i className="ri-close-circle-line mr-1"></i>不通过
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="status-badge status-warning">
|
||||
<i className="ri-alert-line mr-1"></i>警告
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染信息区块
|
||||
const renderInfoSection = (title: string, icon: string, color: string, children: ReactNode) => {
|
||||
return (
|
||||
<div className="info-section">
|
||||
<div className={`info-header bg-${color}-50`}>
|
||||
<i className={`${icon} text-${color}-500 text-lg mr-2`}></i>
|
||||
<h3 className={`font-medium text-${color}-700`}>{title}</h3>
|
||||
</div>
|
||||
<div className="info-content">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染信息行
|
||||
const renderInfoRow = (label: string, value: string | ReactNode) => {
|
||||
return (
|
||||
<div className="info-row">
|
||||
<div className="info-label">{label}：</div>
|
||||
<div className="info-value">{value}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
|
||||
{/* 文件基本信息 */}
|
||||
{renderInfoSection('文件基本信息', 'ri-file-info-line', 'blue', (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{renderInfoRow('文件名称', fileInfo.fileName)}
|
||||
{renderInfoRow('合同编号', fileInfo.contractNumber)}
|
||||
{renderInfoRow('文件大小', fileInfo.fileSize)}
|
||||
{renderInfoRow('文件格式', fileInfo.fileFormat)}
|
||||
{renderInfoRow('页数', `${fileInfo.pageCount}页`)}
|
||||
{renderInfoRow('上传时间', fileInfo.uploadTime)}
|
||||
{renderInfoRow('上传用户', fileInfo.uploadUser)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 合同信息 */}
|
||||
{renderInfoSection('合同信息', 'ri-file-paper-2-line', 'green', (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{renderInfoRow('合同类型', contractInfo.contractType)}
|
||||
{renderInfoRow('签约日期', contractInfo.signDate)}
|
||||
{renderInfoRow('合同当事人', (
|
||||
<div>
|
||||
<div>甲方：{contractInfo.parties.partyA}</div>
|
||||
<div>乙方：{contractInfo.parties.partyB}</div>
|
||||
</div>
|
||||
))}
|
||||
{renderInfoRow('合同金额', contractInfo.amount)}
|
||||
{renderInfoRow('履行期限', contractInfo.period)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 评查信息 */}
|
||||
{renderInfoSection('评查信息', 'ri-search-eye-line', 'purple', (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{renderInfoRow('评查时间', reviewInfo.reviewTime)}
|
||||
{renderInfoRow('评查模型', reviewInfo.reviewModel)}
|
||||
{renderInfoRow('评查规则组', reviewInfo.ruleGroup)}
|
||||
{renderInfoRow('评查结果', (
|
||||
<div className="flex items-center">
|
||||
{renderResultBadge(reviewInfo.result)}
|
||||
<span className="text-sm ml-2">（共发现{reviewInfo.issueCount}个问题）</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* 文件信息组件
|
||||
* 显示文件名称、状态信息以及操作按钮（下载原文件、导出评查报告、确认评查结果）
|
||||
*/
|
||||
|
||||
interface FileInfoProps {
|
||||
fileInfo: {
|
||||
fileName: string;
|
||||
contractNumber: string;
|
||||
fileSize?: string;
|
||||
fileFormat?: string;
|
||||
pageCount?: number;
|
||||
uploadTime?: string;
|
||||
uploadUser?: string;
|
||||
};
|
||||
onConfirmResults: () => void;
|
||||
}
|
||||
|
||||
export function FileInfo({ fileInfo, onConfirmResults }: FileInfoProps) {
|
||||
const handleDownloadFile = () => {
|
||||
alert('下载原文件功能');
|
||||
};
|
||||
|
||||
const handleExportReport = () => {
|
||||
alert('导出评查报告功能');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-4 file-info-header">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-xl font-medium">
|
||||
{fileInfo.fileName}
|
||||
<span className="text-sm text-secondary font-normal ml-2">
|
||||
合同编号：{fileInfo.contractNumber}
|
||||
</span>
|
||||
{fileInfo.fileSize && (
|
||||
<span className="text-xs text-gray-500 ml-2">
|
||||
{fileInfo.fileSize} | {fileInfo.fileFormat} | {fileInfo.pageCount}页
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
{fileInfo.uploadTime && (
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
上传时间：{fileInfo.uploadTime} | 上传用户：{fileInfo.uploadUser}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
className="ant-btn ant-btn-default flex items-center"
|
||||
onClick={handleDownloadFile}
|
||||
>
|
||||
<i className="ri-file-download-line mr-1"></i> 下载原文件
|
||||
</button>
|
||||
<button
|
||||
className="ant-btn ant-btn-default flex items-center"
|
||||
onClick={handleExportReport}
|
||||
>
|
||||
<i className="ri-file-copy-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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* 文件预览组件
|
||||
* 显示文档内容和评查点高亮
|
||||
*/
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
|
||||
// 定义评查点类型
|
||||
interface ReviewPoint {
|
||||
id: string;
|
||||
title: string;
|
||||
status: string;
|
||||
content: string;
|
||||
suggestion: string;
|
||||
position?: {
|
||||
section: string;
|
||||
index: number;
|
||||
};
|
||||
}
|
||||
|
||||
// 定义文档内容类型
|
||||
interface FileContent {
|
||||
title: string;
|
||||
contractNumber: string;
|
||||
parties: {
|
||||
partyA: {
|
||||
name: string;
|
||||
address: string;
|
||||
representative: string;
|
||||
phone: string;
|
||||
};
|
||||
partyB: {
|
||||
name: string;
|
||||
address: string;
|
||||
representative: string;
|
||||
phone: string;
|
||||
};
|
||||
};
|
||||
sections: {
|
||||
title: string;
|
||||
content: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface FilePreviewProps {
|
||||
fileContent: FileContent;
|
||||
reviewPoints: ReviewPoint[];
|
||||
activeReviewPointId: string | null;
|
||||
}
|
||||
|
||||
export function FilePreview({ fileContent, reviewPoints, activeReviewPointId }: FilePreviewProps) {
|
||||
const [zoomLevel, setZoomLevel] = useState(100);
|
||||
const [highlightsVisible, setHighlightsVisible] = useState(true);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 放大文档
|
||||
const handleZoomIn = () => {
|
||||
if (zoomLevel < 200) {
|
||||
setZoomLevel(prevZoom => prevZoom + 10);
|
||||
}
|
||||
};
|
||||
|
||||
// 缩小文档
|
||||
const handleZoomOut = () => {
|
||||
if (zoomLevel > 50) {
|
||||
setZoomLevel(prevZoom => prevZoom - 10);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换高亮显示
|
||||
const toggleHighlights = () => {
|
||||
setHighlightsVisible(!highlightsVisible);
|
||||
};
|
||||
|
||||
// 当选中的评查点变化时，滚动到对应位置
|
||||
useEffect(() => {
|
||||
if (activeReviewPointId && contentRef.current) {
|
||||
const highlightElement = contentRef.current.querySelector(`[data-review-id="${activeReviewPointId}"]`);
|
||||
if (highlightElement) {
|
||||
highlightElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
|
||||
// 添加临时突出显示效果
|
||||
highlightElement.classList.add('highlight-focus');
|
||||
setTimeout(() => {
|
||||
highlightElement.classList.remove('highlight-focus');
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
}, [activeReviewPointId]);
|
||||
|
||||
// 获取评查点对应的样式类
|
||||
const getHighlightClass = (status: string) => {
|
||||
switch (status) {
|
||||
case 'warning':
|
||||
return 'warning';
|
||||
case 'error':
|
||||
return 'error';
|
||||
case 'success':
|
||||
return 'success';
|
||||
default:
|
||||
return 'warning';
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染文档内容
|
||||
const renderDocumentContent = () => {
|
||||
return (
|
||||
<div className="word-document" ref={contentRef} style={{transform: `scale(${zoomLevel/100})`, transformOrigin: 'center top'}}>
|
||||
<h1>{fileContent.title}</h1>
|
||||
<p style={{textAlign: 'right'}}>合同编号：{fileContent.contractNumber}</p>
|
||||
|
||||
<div style={{margin: '20px 0'}}>
|
||||
<p><strong>甲方（供方）：</strong>{fileContent.parties.partyA.name}</p>
|
||||
<p>地址：{fileContent.parties.partyA.address}</p>
|
||||
<p>法定代表人：{fileContent.parties.partyA.representative}</p>
|
||||
<p>联系电话：{fileContent.parties.partyA.phone}</p>
|
||||
<p> </p>
|
||||
<p><strong>乙方（需方）：</strong>{fileContent.parties.partyB.name}</p>
|
||||
<p>地址：{fileContent.parties.partyB.address}</p>
|
||||
<p>法定代表人：{fileContent.parties.partyB.representative}</p>
|
||||
<p>联系电话：{fileContent.parties.partyB.phone}</p>
|
||||
</div>
|
||||
|
||||
<p>根据《中华人民共和国合同法》及有关法律法规的规定，经双方协商一致，签订本合同，共同遵守。</p>
|
||||
|
||||
{fileContent.sections.map((section, sectionIndex) => (
|
||||
<div key={sectionIndex}>
|
||||
<h2>{section.title}</h2>
|
||||
{renderSectionContent(section.content, section.title, sectionIndex)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染章节内容，处理高亮
|
||||
const renderSectionContent = (content: string, sectionTitle: string, sectionIndex: number) => {
|
||||
const lines = content.split('\n');
|
||||
|
||||
return lines.map((line, lineIndex) => {
|
||||
// 查找该行对应的评查点
|
||||
const reviewPoint = reviewPoints.find(point =>
|
||||
point.position &&
|
||||
point.position.section === sectionTitle &&
|
||||
point.position.index === lineIndex
|
||||
);
|
||||
|
||||
if (reviewPoint && highlightsVisible) {
|
||||
// 如果有对应的评查点，添加高亮
|
||||
const isActive = reviewPoint.id === activeReviewPointId;
|
||||
return (
|
||||
<div
|
||||
key={`${sectionIndex}-${lineIndex}`}
|
||||
className={`highlight-area ${getHighlightClass(reviewPoint.status)} ${isActive ? 'highlight-focus' : ''}`}
|
||||
data-review-id={reviewPoint.id}
|
||||
style={isActive ? {zIndex: 20, boxShadow: '0 0 0 2px yellow, 0 0 10px rgba(0,0,0,0.3)'} : {}}
|
||||
>
|
||||
<p>{line}</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// 没有评查点，正常显示
|
||||
return <p key={`${sectionIndex}-${lineIndex}`}>{line}</p>;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="file-preview">
|
||||
<div className="file-preview-header py-2 px-4">
|
||||
<div className="flex items-center">
|
||||
<i className="ri-file-text-line text-primary mr-2"></i>
|
||||
<span className="font-medium text-primary">文件预览</span>
|
||||
</div>
|
||||
<div className="file-preview-actions">
|
||||
<button
|
||||
className="ant-btn ant-btn-sm ant-btn-default py-0 px-1 text-xs h-5 leading-5"
|
||||
onClick={handleZoomIn}
|
||||
>
|
||||
<i className="ri-zoom-in-line"></i>
|
||||
</button>
|
||||
<button
|
||||
className="ant-btn ant-btn-sm ant-btn-default py-0 px-1 text-xs h-5 leading-5"
|
||||
onClick={handleZoomOut}
|
||||
>
|
||||
<i className="ri-zoom-out-line"></i>
|
||||
</button>
|
||||
<button
|
||||
className="ant-btn ant-btn-sm ant-btn-default py-0 px-1 text-xs h-5 leading-5"
|
||||
onClick={toggleHighlights}
|
||||
>
|
||||
<i className="ri-mark-pen-line"></i> {highlightsVisible ? '隐藏问题' : '显示问题'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="file-preview-content">
|
||||
{renderDocumentContent()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,441 @@
|
||||
/**
|
||||
* 评查点列表组件
|
||||
* 显示评查结果统计和所有评查点列表
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
|
||||
// 评查点类型定义
|
||||
interface ReviewPoint {
|
||||
id: string;
|
||||
title: string;
|
||||
location: string;
|
||||
status: string;
|
||||
content: string;
|
||||
suggestion: string;
|
||||
needsHumanReview?: boolean;
|
||||
humanReviewNote?: string;
|
||||
humanReviewBy?: string;
|
||||
humanReviewTime?: string;
|
||||
position?: {
|
||||
section: string;
|
||||
index: number;
|
||||
};
|
||||
}
|
||||
|
||||
// 统计数据类型
|
||||
interface Statistics {
|
||||
total: number;
|
||||
success: number;
|
||||
warning: number;
|
||||
error: number;
|
||||
score: number;
|
||||
}
|
||||
|
||||
interface ReviewPointsListProps {
|
||||
reviewPoints: ReviewPoint[];
|
||||
statistics: Statistics;
|
||||
activeReviewPointId: string | null;
|
||||
onReviewPointSelect: (id: string) => void;
|
||||
onStatusChange: (id: string, status: string) => void;
|
||||
}
|
||||
|
||||
export function ReviewPointsList({
|
||||
reviewPoints,
|
||||
statistics,
|
||||
activeReviewPointId,
|
||||
onReviewPointSelect,
|
||||
onStatusChange
|
||||
}: ReviewPointsListProps) {
|
||||
const [editingReviewPoint, setEditingReviewPoint] = useState<string | null>(null);
|
||||
const [userInputText, setUserInputText] = useState('');
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<string | null>(null);
|
||||
|
||||
// 过滤评查点
|
||||
const filteredReviewPoints = reviewPoints.filter(point => {
|
||||
const matchesSearch = searchText === '' ||
|
||||
point.title.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
point.location.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
point.content.toLowerCase().includes(searchText.toLowerCase());
|
||||
|
||||
const matchesStatus = statusFilter === null || point.status === statusFilter;
|
||||
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
|
||||
// 处理点击"一键替换"按钮
|
||||
const handleReplace = (reviewPointId: string) => {
|
||||
// 在实际应用中，这里应该调用API进行内容替换
|
||||
// 模拟替换操作
|
||||
alert(`将为评查点 ${reviewPointId} 执行一键替换操作`);
|
||||
|
||||
// 更新评查点状态为成功
|
||||
onStatusChange(reviewPointId, 'success');
|
||||
};
|
||||
|
||||
// 处理评查点审核操作
|
||||
const handleReviewAction = (reviewPointId: string, action: 'approve' | 'reject') => {
|
||||
// 更新评查点状态
|
||||
onStatusChange(reviewPointId, action === 'approve' ? 'success' : 'error');
|
||||
|
||||
// 清除编辑状态
|
||||
setEditingReviewPoint(null);
|
||||
setUserInputText('');
|
||||
|
||||
alert(`${action === 'approve' ? '通过' : '不通过'}了评查点 ${reviewPointId}`);
|
||||
};
|
||||
|
||||
// 显示评查点详情编辑界面
|
||||
const handleEditReviewPoint = (reviewPointId: string) => {
|
||||
setEditingReviewPoint(reviewPointId);
|
||||
|
||||
// 获取评查点的建议内容作为初始值
|
||||
const reviewPoint = reviewPoints.find(point => point.id === reviewPointId);
|
||||
if (reviewPoint) {
|
||||
setUserInputText(reviewPoint.suggestion || '');
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染评查统计信息
|
||||
const renderStatistics = () => {
|
||||
return (
|
||||
<div className="review-statistics bg-white border-b border-gray-100 py-3 px-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<div className="w-7 h-7 bg-gray-100 rounded-md flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-gray-600">{statistics.total}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 ml-1">总计</span>
|
||||
</div>
|
||||
<div className="h-8 border-r border-gray-200"></div>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className={`w-7 h-7 bg-green-50 rounded-md flex items-center justify-center cursor-pointer ${statusFilter === 'success' ? 'ring-2 ring-success' : ''}`}
|
||||
onClick={() => setStatusFilter(statusFilter === 'success' ? null : 'success')}
|
||||
aria-label={`过滤通过项 ${statusFilter === 'success' ? '(已选中)' : ''}`}
|
||||
type="button"
|
||||
>
|
||||
<span className="text-sm font-semibold text-success">{statistics.success}</span>
|
||||
</button>
|
||||
<span className="text-xs text-gray-500 ml-1">通过</span>
|
||||
</div>
|
||||
<div className="h-8 border-r border-gray-200"></div>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className={`w-7 h-7 bg-yellow-50 rounded-md flex items-center justify-center cursor-pointer ${statusFilter === 'warning' ? 'ring-2 ring-warning' : ''}`}
|
||||
onClick={() => setStatusFilter(statusFilter === 'warning' ? null : 'warning')}
|
||||
aria-label={`过滤警告项 ${statusFilter === 'warning' ? '(已选中)' : ''}`}
|
||||
type="button"
|
||||
>
|
||||
<span className="text-sm font-semibold text-warning">{statistics.warning}</span>
|
||||
</button>
|
||||
<span className="text-xs text-gray-500 ml-1">警告</span>
|
||||
</div>
|
||||
<div className="h-8 border-r border-gray-200"></div>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className={`w-7 h-7 bg-red-50 rounded-md flex items-center justify-center cursor-pointer ${statusFilter === 'error' ? 'ring-2 ring-error' : ''}`}
|
||||
onClick={() => setStatusFilter(statusFilter === 'error' ? null : 'error')}
|
||||
aria-label={`过滤错误项 ${statusFilter === 'error' ? '(已选中)' : ''}`}
|
||||
type="button"
|
||||
>
|
||||
<span className="text-sm font-semibold text-error">{statistics.error}</span>
|
||||
</button>
|
||||
<span className="text-xs text-gray-500 ml-1">错误</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染搜索框
|
||||
const renderSearchBar = () => {
|
||||
return (
|
||||
<div className="py-2 px-3 border-b border-gray-100">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
className="w-full border border-gray-200 rounded-md pl-8 pr-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||||
placeholder="搜索评查点..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
<i className="ri-search-line absolute left-2 top-0.5 text-gray-400"></i>
|
||||
{searchText && (
|
||||
<button
|
||||
className="absolute right-2 top-1.5 text-gray-400 hover:text-gray-600"
|
||||
onClick={() => setSearchText('')}
|
||||
>
|
||||
<i className="ri-close-line"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染评查点状态标签
|
||||
const renderStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'success':
|
||||
return (
|
||||
<span className="status-badge status-success">
|
||||
<i className="ri-checkbox-circle-line mr-1"></i>通过
|
||||
</span>
|
||||
);
|
||||
case 'warning':
|
||||
return (
|
||||
<span className="status-badge status-warning">
|
||||
<i className="ri-alert-line mr-1"></i>警告
|
||||
</span>
|
||||
);
|
||||
case 'error':
|
||||
return (
|
||||
<span className="status-badge status-error">
|
||||
<i className="ri-close-circle-line mr-1"></i>不通过
|
||||
</span>
|
||||
);
|
||||
case 'processing':
|
||||
return (
|
||||
<span className="status-badge status-processing">
|
||||
<i className="ri-time-line mr-1"></i>处理中
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="status-badge status-warning">
|
||||
<i className="ri-alert-line mr-1"></i>警告
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染人工审核标记
|
||||
const renderHumanReviewBadge = (reviewPoint: ReviewPoint) => {
|
||||
if (reviewPoint.needsHumanReview) {
|
||||
return (
|
||||
<span className="status-badge status-waiting ml-2">
|
||||
<i className="ri-user-line mr-1"></i>需人工
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 渲染人工审核注释
|
||||
const renderHumanReviewNote = (reviewPoint: ReviewPoint) => {
|
||||
if (reviewPoint.needsHumanReview && reviewPoint.humanReviewNote) {
|
||||
return (
|
||||
<div className="human-review-note">
|
||||
<i className="ri-information-line mr-1"></i> {reviewPoint.humanReviewNote}
|
||||
{reviewPoint.humanReviewBy && reviewPoint.humanReviewTime && (
|
||||
<div className="text-right text-xs text-gray-500 mt-1">
|
||||
审核人：{reviewPoint.humanReviewBy} | 时间：{reviewPoint.humanReviewTime}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 渲染评查点内容与建议
|
||||
const renderReviewPointContent = (reviewPoint: ReviewPoint) => {
|
||||
// 如果当前评查点不处于编辑状态，只显示简单信息
|
||||
if (editingReviewPoint !== reviewPoint.id) {
|
||||
if (reviewPoint.status === 'success') {
|
||||
// 已通过的评查点只显示基本信息和人工审核注释
|
||||
if (reviewPoint.needsHumanReview && reviewPoint.humanReviewNote) {
|
||||
return (
|
||||
<div className="mt-2">
|
||||
<div className="p-2 bg-green-50 rounded border border-green-200 text-xs">
|
||||
<p className="text-xs text-success"><i className="ri-check-line mr-1"></i>已处理</p>
|
||||
{reviewPoint.suggestion && (
|
||||
<div className="border-t border-green-200 mt-1 pt-1">
|
||||
<p className="text-xs text-gray-600">{reviewPoint.suggestion}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-2">
|
||||
<div className="p-2 bg-white rounded border border-gray-200 text-xs">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs">当前值</span>
|
||||
<span className={`text-xs ${reviewPoint.status === 'error' ? 'text-error' : 'text-warning'}`}>
|
||||
{reviewPoint.status === 'error' ? '不符合规范' : '需优化'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-left">{reviewPoint.content || '（内容为空）'}</p>
|
||||
|
||||
{reviewPoint.suggestion && (
|
||||
<div className="mt-2 pt-2 border-t border-gray-100">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs">建议修改为</span>
|
||||
<span className='text-xs text-green-500'>
|
||||
符合规范
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
className="text-xs w-full border border-gray-200 rounded p-2"
|
||||
rows={4}
|
||||
value={reviewPoint.suggestion}
|
||||
onChange={(e) => setUserInputText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<div className="flex space-x-2 mt-2">
|
||||
{/* 一键替换按钮 - 只有非人工审核的点或未通过的人工审核点才显示 */}
|
||||
{(!reviewPoint.needsHumanReview || reviewPoint.status !== 'success') && (
|
||||
<button
|
||||
className="replace-action flex-1 justify-center"
|
||||
onClick={() => handleReplace(reviewPoint.id)}
|
||||
>
|
||||
<i className="ri-replace-line"></i> 一键替换
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 人工审核按钮 */}
|
||||
{reviewPoint.needsHumanReview && reviewPoint.status !== 'success' && (
|
||||
<button
|
||||
className="replace-action flex-1 justify-center human-review-request"
|
||||
onClick={() => handleEditReviewPoint(reviewPoint.id)}
|
||||
>
|
||||
<i className="ri-edit-line"></i> 人工审核
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 处于编辑状态时显示编辑界面
|
||||
return (
|
||||
<div className="mt-2">
|
||||
<div className="p-2 bg-white rounded border border-gray-200 text-xs mb-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs">当前值</span>
|
||||
<span className={`text-xs ${reviewPoint.status === 'error' ? 'text-error' : 'text-warning'}`}>
|
||||
{reviewPoint.status === 'error' ? '不符合规范' : '需优化'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs">{reviewPoint.content || '（内容为空）'}</p>
|
||||
|
||||
{reviewPoint.suggestion && (
|
||||
<div className="mt-2 pt-2 border-t border-gray-100">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="text-xs text-primary">建议修改为</span>
|
||||
</div>
|
||||
<p className="text-xs">{reviewPoint.suggestion}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded border border-gray-200 p-2">
|
||||
<label htmlFor="reviewNote" className="block text-xs text-gray-700 mb-1">审核意见</label>
|
||||
<textarea
|
||||
id="reviewNote"
|
||||
className="w-full border border-gray-200 rounded-md text-xs p-2 mb-2"
|
||||
placeholder="请输入审核意见（可选）..."
|
||||
rows={2}
|
||||
value={userInputText}
|
||||
onChange={(e) => setUserInputText(e.target.value)}
|
||||
></textarea>
|
||||
<div className="flex justify-end mt-2 space-x-2">
|
||||
<button
|
||||
className="replace-action"
|
||||
onClick={() => handleReviewAction(reviewPoint.id, 'approve')}
|
||||
>
|
||||
<i className="ri-check-line"></i> 通过
|
||||
</button>
|
||||
<button
|
||||
className="replace-action status-error"
|
||||
onClick={() => handleReviewAction(reviewPoint.id, 'reject')}
|
||||
>
|
||||
<i className="ri-close-line"></i> 不通过
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染无匹配结果提示
|
||||
const renderEmptyState = () => {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-8 px-4 text-center text-gray-500">
|
||||
<i className="ri-search-line text-3xl mb-2"></i>
|
||||
<p className="text-sm mb-1">没有找到匹配的评查点</p>
|
||||
<p className="text-xs">请尝试不同的搜索词或清除筛选条件</p>
|
||||
{(searchText || statusFilter) && (
|
||||
<button
|
||||
className="mt-3 text-xs text-primary underline"
|
||||
onClick={() => {
|
||||
setSearchText('');
|
||||
setStatusFilter(null);
|
||||
}}
|
||||
>
|
||||
清除所有筛选
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="review-points-panel">
|
||||
<div className="review-panel-header py-2 px-4 flex items-center">
|
||||
<i className="ri-file-list-check-line text-primary mr-2"></i>
|
||||
<span className="font-medium text-primary">评查结果</span>
|
||||
</div>
|
||||
|
||||
{/* 评查统计 */}
|
||||
{renderStatistics()}
|
||||
|
||||
{/* 搜索框 */}
|
||||
{renderSearchBar()}
|
||||
|
||||
{/* 评查点列表 */}
|
||||
<div className="review-points-list">
|
||||
{filteredReviewPoints.length > 0 ? (
|
||||
filteredReviewPoints.map(reviewPoint => (
|
||||
<button
|
||||
key={reviewPoint.id}
|
||||
className={`review-point-item ${activeReviewPointId === reviewPoint.id ? 'active' : ''}`}
|
||||
onClick={() => onReviewPointSelect(reviewPoint.id)}
|
||||
type="button"
|
||||
>
|
||||
<div className="review-point-header">
|
||||
<div className="review-point-title">{reviewPoint.title}</div>
|
||||
<div className="flex items-center">
|
||||
{renderStatusBadge(reviewPoint.status)}
|
||||
{renderHumanReviewBadge(reviewPoint)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="review-point-location">
|
||||
<i className="ri-file-list-line mr-1"></i>
|
||||
<span>{reviewPoint.location}</span>
|
||||
</div>
|
||||
|
||||
{/* 人工审核注释 */}
|
||||
{renderHumanReviewNote(reviewPoint)}
|
||||
|
||||
{/* 评查点内容和操作 */}
|
||||
{renderReviewPointContent(reviewPoint)}
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
renderEmptyState()
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 评查选项卡组件
|
||||
* 提供三个选项卡：评查结果、AI智能分析、文件信息
|
||||
*/
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface ReviewTabsProps {
|
||||
activeTab: string;
|
||||
onTabChange: (tabKey: string) => void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function ReviewTabs({ activeTab, onTabChange, children }: ReviewTabsProps) {
|
||||
return (
|
||||
<div className="tab-container">
|
||||
<div className="tab-nav">
|
||||
<button
|
||||
className={`tab-nav-item ${activeTab === 'preview' ? 'active' : ''}`}
|
||||
onClick={() => onTabChange('preview')}
|
||||
type="button"
|
||||
aria-pressed={activeTab === 'preview'}
|
||||
>
|
||||
<i className="ri-file-text-line"></i> 评查结果
|
||||
</button>
|
||||
<button
|
||||
className={`tab-nav-item ${activeTab === 'analysis' ? 'active' : ''}`}
|
||||
onClick={() => onTabChange('analysis')}
|
||||
type="button"
|
||||
aria-pressed={activeTab === 'analysis'}
|
||||
>
|
||||
<i className="ri-lightbulb-line"></i> AI智能分析
|
||||
</button>
|
||||
<button
|
||||
className={`tab-nav-item ${activeTab === 'fileinfo' ? 'active' : ''}`}
|
||||
onClick={() => onTabChange('fileinfo')}
|
||||
type="button"
|
||||
aria-pressed={activeTab === 'fileinfo'}
|
||||
>
|
||||
<i className="ri-information-line"></i> 文件信息
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="tab-content">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* 评查详情组件导出文件
|
||||
*/
|
||||
|
||||
export { FileInfo } from './FileInfo';
|
||||
export { ReviewTabs } from './ReviewTabs';
|
||||
export { FilePreview } from './FilePreview';
|
||||
export { ReviewPointsList } from './ReviewPointsList';
|
||||
export { AIAnalysis } from './AIAnalysis';
|
||||
export { FileDetails } from './FileDetails';
|
||||
Reference in New Issue
Block a user