feat: 初步完成评查详情页面的work文档和pdf文档的加载的页面三栏设计的重构。
This commit is contained in:
@@ -1164,6 +1164,7 @@ export default function DocumentsIndex() {
|
||||
{canView && (
|
||||
<Link
|
||||
to={`/reviews?id=${historyDoc.id}&previousRoute=documents`}
|
||||
// to={`/reviews?id=${historyDoc.id}&previousRoute=documents`}
|
||||
className="text-xs px-2 py-1 h-7 mr-1 hover:underline"
|
||||
>
|
||||
<i className="ri-eye-line"></i>
|
||||
|
||||
+316
-297
@@ -26,33 +26,29 @@
|
||||
*/
|
||||
|
||||
import { type MetaFunction, type LoaderFunctionArgs, type ActionFunctionArgs } from "@remix-run/node";
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useNavigate, useLoaderData, useFetcher } from "@remix-run/react";
|
||||
import type { FilePreviewHandle } from "~/components/reviews/FilePreview";
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useNavigate, useLoaderData, useFetcher, useRevalidator } from "@remix-run/react";
|
||||
import reviewsStyles from "~/styles/reviews.css?url";
|
||||
import { getReviewPoints, getReviewPoints_fromApi, getUnifiedEvaluationResults, updateReviewResult, confirmReviewResults } from "~/api/evaluation_points/reviews";
|
||||
import { postgrestGet } from "~/api/postgrest-client";
|
||||
import { toastService } from "~/components/ui/Toast";
|
||||
import { Modal } from "~/components/ui/Modal";
|
||||
import { UploadArea, type UploadAreaRef } from "~/components/ui/UploadArea";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { uploadContractTemplate } from "~/api/files/files-upload";
|
||||
import { Comparison } from "~/components/reviews/Comparison";
|
||||
import axios from "axios";
|
||||
|
||||
// 导入评查详情页面组件
|
||||
import {
|
||||
FileInfo,
|
||||
ReviewTabs,
|
||||
FilePreview,
|
||||
ReviewPointsList,
|
||||
AIAnalysis,
|
||||
FileDetails,
|
||||
Comparison
|
||||
} from "~/components/reviews";
|
||||
|
||||
// 导入文档对比组件
|
||||
// 导入新的三栏组件
|
||||
import { RulesDirectory } from "~/components/reviews/leftColumn/RulesDirectory";
|
||||
import { DetailPanel } from "~/components/reviews/rightColumn/DetailPanel";
|
||||
import { PdfPreviewTest } from "~/components/reviews/previewComponents/PdfPreviewTest";
|
||||
import { DocxPreviewTest } from "~/components/reviews/previewComponents/DocxPreviewTest";
|
||||
import { ComparePreview } from "~/components/reviews/previewComponents/ComparePreview";
|
||||
|
||||
// 从ReviewPointsList组件中导入ReviewPoint类型
|
||||
import { type ReviewPoint } from '~/components/reviews';
|
||||
import { messageService } from "~/components/ui/MessageModal";
|
||||
import { loadingBarService } from "~/components/ui/LoadingBar";
|
||||
import { Breadcrumb } from "~/components/layout/Breadcrumb";
|
||||
|
||||
/**
|
||||
* 文件信息组件
|
||||
@@ -176,7 +172,9 @@ export function links() {
|
||||
}
|
||||
|
||||
export const handle = {
|
||||
hideBreadcrumb: true
|
||||
hideBreadcrumb: true,
|
||||
collapseSidebar: true,
|
||||
noPadding: true
|
||||
};
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
@@ -405,11 +403,10 @@ export default function ReviewDetails() {
|
||||
const { document, reviewPoints, statistics, reviewInfo, comparison_document, frontendJWT } = loaderData;
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false); // 已经通过loader加载了数据，不需要再显示加载状态
|
||||
const [activeTab, setActiveTab] = useState<string>('preview'); // 'preview', 'analysis', 'fileinfo'
|
||||
const [rightActiveTab, setRightActiveTab] = useState<'result' | 'fields' | 'info'>('result');
|
||||
const [reviewData, setReviewData] = useState<ReviewData | null>(null);
|
||||
const [activeReviewPointResultId, setActiveReviewPointResultId] = useState<string | null>(null);
|
||||
const [targetPage, setTargetPage] = useState<number | undefined>(undefined);
|
||||
const [templateTargetPage, setTemplateTargetPage] = useState<number | undefined>(undefined);
|
||||
const [charPositions, setCharPositions] = useState<Array<{ box: number[][], char: string, score: number }> | undefined>(undefined);
|
||||
const [highlightValue, setHighlightValue] = useState<string | undefined>(undefined);
|
||||
const [pendingUpdate, setPendingUpdate] = useState<{
|
||||
@@ -417,69 +414,26 @@ export default function ReviewDetails() {
|
||||
newStatus: string;
|
||||
message: string;
|
||||
} | null>(null);
|
||||
const [showCompareOverlay, setShowCompareOverlay] = useState(false);
|
||||
|
||||
// 一键替换（DOCX Collabora 使用）
|
||||
const [aiSuggestionReplace, setAiSuggestionReplace] = useState<{
|
||||
searchText: string;
|
||||
replaceText: string;
|
||||
pageNumber: number;
|
||||
silentReplace?: boolean;
|
||||
} | undefined>(undefined);
|
||||
|
||||
// FilePreview 组件的 ref，用于在下载前保存文档
|
||||
const filePreviewRef = useRef<FilePreviewHandle>(null);
|
||||
// 模板上传相关状态
|
||||
const [isReuploadModalOpen, setIsReuploadModalOpen] = useState(false);
|
||||
const [selectedTemplateFiles, setSelectedTemplateFiles] = useState<File[]>([]);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [showComparison, setShowComparison] = useState(false);
|
||||
const uploadAreaRef = useRef<UploadAreaRef>(null);
|
||||
const revalidator = useRevalidator();
|
||||
|
||||
// CollaboraViewer 组件的 key，用于强制重新加载触发保存
|
||||
const [collaboraKey, setCollaboraKey] = useState<number>(0);
|
||||
|
||||
// 保存文档的回调函数，传递给 ReviewTabs
|
||||
// 通过改变 key 强制重新加载 CollaboraViewer 组件，触发组件卸载时的保存逻辑
|
||||
const handleSaveBeforeDownload = useCallback(async (): Promise<boolean> => {
|
||||
// 检查文件类型是否为 DOCX（需要 Collabora 保存）
|
||||
const fileExtension = document?.path?.split('.').pop()?.toLowerCase();
|
||||
if (fileExtension !== 'docx') {
|
||||
// 非 DOCX 文件不需要保存
|
||||
return true;
|
||||
}
|
||||
|
||||
const collaboraRef = filePreviewRef.current?.collaboraViewerRef?.current;
|
||||
if (!collaboraRef?.isReady) {
|
||||
console.log('[Reviews] Collabora 未就绪，跳过保存');
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
// console.log('[Reviews] 通过重新加载 CollaboraViewer 保存文档...');
|
||||
|
||||
// 改变 key 触发组件卸载（会执行保存）和重新挂载
|
||||
setCollaboraKey(prev => prev + 1);
|
||||
|
||||
// 等待组件重新加载完成
|
||||
// 先等待组件卸载和重新挂载
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
// 轮询检查组件是否重新加载完成
|
||||
const maxWaitTime = 30000; // 最大等待30秒
|
||||
const checkInterval = 500; // 每500ms检查一次
|
||||
let waitedTime = 0;
|
||||
|
||||
while (waitedTime < maxWaitTime) {
|
||||
const newCollaboraRef = filePreviewRef.current?.collaboraViewerRef?.current;
|
||||
if (newCollaboraRef?.isReady) {
|
||||
// console.log('[Reviews] CollaboraViewer 重新加载完成');
|
||||
// 额外等待一小段时间确保文档完全就绪
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
return true;
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, checkInterval));
|
||||
waitedTime += checkInterval;
|
||||
}
|
||||
|
||||
console.warn('[Reviews] 等待 CollaboraViewer 重新加载超时');
|
||||
return true; // 超时也允许下载
|
||||
} catch (error) {
|
||||
console.error('[Reviews] 保存文档失败:', error);
|
||||
toastService.error('保存文档失败，请重试');
|
||||
return false;
|
||||
}
|
||||
}, [document?.path]);
|
||||
// 结构比对按钮显示条件：fileInfo.type 包含 '1'
|
||||
const showComparisonButton = (document as any)?.type?.toString().includes('1');
|
||||
|
||||
// 🐛 调试：打印 loader 返回的完整数据到浏览器控制台
|
||||
// useEffect(() => {
|
||||
@@ -524,10 +478,8 @@ export default function ReviewDetails() {
|
||||
// 当文档 ID 变化时，清空高亮相关的状态
|
||||
useEffect(() => {
|
||||
if (document?.id) {
|
||||
// console.log('[Reviews] 文档ID变化，清空高亮状态');
|
||||
setActiveReviewPointResultId(null);
|
||||
setTargetPage(undefined);
|
||||
setTemplateTargetPage(undefined);
|
||||
setCharPositions(undefined);
|
||||
setHighlightValue(undefined);
|
||||
}
|
||||
@@ -572,8 +524,63 @@ export default function ReviewDetails() {
|
||||
setIsLoading(false);
|
||||
}, [document, reviewPoints, statistics, reviewInfo]);
|
||||
|
||||
const handleTabChange = (tabKey: string) => {
|
||||
setActiveTab(tabKey);
|
||||
const handleTabChange = (tabKey: 'result' | 'fields' | 'info') => {
|
||||
setRightActiveTab(tabKey);
|
||||
};
|
||||
|
||||
// 从左栏选择评查点
|
||||
const handleRuleSelect = (id: string) => {
|
||||
setActiveReviewPointResultId(id);
|
||||
setRightActiveTab('result');
|
||||
|
||||
// 查找评查点并尝试跳转到其页面
|
||||
const point = reviewData?.reviewPoints.find(p => p.id === id);
|
||||
if (point) {
|
||||
console.log('跳转到评查点页面:', point);
|
||||
const page = getFirstPageFromPoint(point);
|
||||
if (page) setTargetPage(page);
|
||||
else setTargetPage(undefined);
|
||||
setCharPositions(undefined);
|
||||
setHighlightValue(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
// 从评查点中提取第一个有效页码
|
||||
const getFirstPageFromPoint = (point: ReviewPoint): number | undefined => {
|
||||
if (point.content) {
|
||||
for (const data of Object.values(point.content)) {
|
||||
const page = (data as any)?.page;
|
||||
if (page && Number(page) > 0) return Number(page);
|
||||
}
|
||||
}
|
||||
if (point.contentPage) {
|
||||
for (const page of Object.values(point.contentPage)) {
|
||||
if (page && Number(page) > 0) return Number(page);
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
// 下载文件
|
||||
const handleDownloadFile = async () => {
|
||||
try {
|
||||
const downloadUrl = `/api/pdf-proxy?path=${encodeURIComponent(document?.path || '')}`;
|
||||
const response = await axios.get(downloadUrl, { responseType: 'blob' });
|
||||
const blobUrl = URL.createObjectURL(response.data);
|
||||
const a = window.document.createElement('a');
|
||||
a.style.display = 'none';
|
||||
a.href = blobUrl;
|
||||
a.download = decodeURIComponent(document?.path?.split('/').pop() || 'document');
|
||||
window.document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(() => {
|
||||
window.document.body.removeChild(a);
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
}, 100);
|
||||
} catch (error) {
|
||||
console.error('下载文件失败:', error);
|
||||
toastService.error(`下载文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReviewPointSelect = (reviewPointId: string, page?: number, charPos?: Array<{ box: number[][], char: string, score: number }>, value?: string) => {
|
||||
@@ -598,19 +605,9 @@ export default function ReviewDetails() {
|
||||
}
|
||||
};
|
||||
|
||||
// 处理AI建议替换
|
||||
const handleAiSuggestionReplace = (searchText: string, replaceText: string, pageNumber: number) => {
|
||||
// console.log('[Reviews] AI建议替换:', { searchText, replaceText, pageNumber });
|
||||
// 设置替换参数，触发 CollaboraViewer 的搜索替换
|
||||
setAiSuggestionReplace({
|
||||
searchText,
|
||||
replaceText,
|
||||
pageNumber
|
||||
});
|
||||
// 短暂延迟后清除参数，以便下次可以重新触发
|
||||
setTimeout(() => {
|
||||
setAiSuggestionReplace(undefined);
|
||||
}, 500);
|
||||
// 处理AI建议替换（保留空实现，右栏详情卡片中DOCX替换需要）
|
||||
const handleAiSuggestionReplace = (_searchText: string, _replaceText: string, _pageNumber: number) => {
|
||||
// PDF 文件不支持替换，暂不实现
|
||||
};
|
||||
|
||||
// 刷新评审数据
|
||||
@@ -841,220 +838,241 @@ export default function ReviewDetails() {
|
||||
}
|
||||
};
|
||||
|
||||
// 构建自定义面包屑项
|
||||
const getBreadcrumbItems = () => {
|
||||
const items = [
|
||||
{ title: "评查详情", to: `/reviews?id=${document?.id}` }
|
||||
];
|
||||
|
||||
// 添加前置路由
|
||||
if (loaderData.previousRoute) {
|
||||
if (loaderData.previousRoute === 'filesUpload') {
|
||||
items.unshift({ title: "文件上传", to: "/files/upload" });
|
||||
} else if (loaderData.previousRoute === 'documents') {
|
||||
items.unshift({ title: "文档列表", to: "/documents/list" });
|
||||
} else if (loaderData.previousRoute === 'rulesFiles') {
|
||||
items.unshift({ title: "评查文件列表", to: "/rules-files" });
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
// 构建返回路径
|
||||
const getReturnUrl = () => {
|
||||
if (loaderData.previousRoute === 'filesUpload') return '/files/upload';
|
||||
if (loaderData.previousRoute === 'rulesFiles') return '/rules-files';
|
||||
return '/documents/list';
|
||||
};
|
||||
|
||||
|
||||
// 获取当前激活的评查点对象
|
||||
const activeReviewPoint = reviewData?.reviewPoints.find(p => p.id === activeReviewPointResultId) || null;
|
||||
|
||||
// ── 模板上传相关函数 ──
|
||||
const handleOpenReuploadModal = () => {
|
||||
setIsReuploadModalOpen(true);
|
||||
setSelectedTemplateFiles([]);
|
||||
};
|
||||
|
||||
const handleCloseReuploadModal = () => {
|
||||
setIsReuploadModalOpen(false);
|
||||
setSelectedTemplateFiles([]);
|
||||
if (uploadAreaRef.current) uploadAreaRef.current.resetFileInput();
|
||||
};
|
||||
|
||||
const handleTemplateFilesSelected = (files: FileList) => {
|
||||
try {
|
||||
if (files.length > 0) {
|
||||
const validFiles: File[] = [];
|
||||
let hasInvalidFiles = false;
|
||||
Array.from(files).forEach(file => {
|
||||
const fileName = file.name.toLowerCase();
|
||||
const isValidType = file.type === 'application/pdf' || fileName.endsWith('.pdf') ||
|
||||
file.type === 'application/msword' || fileName.endsWith('.doc') || fileName.endsWith('.docx') ||
|
||||
file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
||||
if (isValidType) validFiles.push(file);
|
||||
else hasInvalidFiles = true;
|
||||
});
|
||||
if (hasInvalidFiles) toastService.error('只能上传PDF或Word格式的文件');
|
||||
if (validFiles.length > 0) setSelectedTemplateFiles(validFiles);
|
||||
}
|
||||
} catch { toastService.error('文件选择失败，请重试'); }
|
||||
};
|
||||
|
||||
const handleConfirmUpload = async () => {
|
||||
if (selectedTemplateFiles.length === 0) { toastService.error('请先选择要上传的模板文件'); return; }
|
||||
if (!(document as any)?.id) { toastService.error('文档ID不能为空'); return; }
|
||||
try {
|
||||
setIsUploading(true);
|
||||
const uploadResult = await uploadContractTemplate(
|
||||
selectedTemplateFiles[0],
|
||||
(document as any).id,
|
||||
(comparison_document as any)?.comparisonId,
|
||||
frontendJWT || undefined
|
||||
);
|
||||
if (uploadResult.error) throw new Error(uploadResult.error);
|
||||
toastService.success('模板文件上传成功，即将返回上一页...');
|
||||
await new Promise(r => setTimeout(r, 2000));
|
||||
handleCloseReuploadModal();
|
||||
navigate(getReturnUrl());
|
||||
} catch (error) {
|
||||
toastService.error(`上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
||||
} finally { setIsUploading(false); }
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// ── 结构比对全页面视图 ──
|
||||
if (showComparison) {
|
||||
return (
|
||||
<div className="flex flex-col h-screen overflow-hidden">
|
||||
<header className="shrink-0 h-11 px-4 flex items-center gap-3 border-b border-slate-200 bg-white">
|
||||
<button type="button" className="flex items-center gap-1 text-slate-600 hover:text-slate-900 text-[12.5px]" onClick={() => setShowComparison(false)}>
|
||||
<i className="ri-arrow-left-line" /> 返回
|
||||
</button>
|
||||
<span className="font-medium text-sm text-slate-800 truncate">{reviewData?.fileInfo?.fileName}</span>
|
||||
</header>
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
<Comparison comparison_document={comparison_document} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="review-container">
|
||||
<div className="flex flex-col h-screen overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center items-center p-12">
|
||||
<div className="loading-spinner"></div>
|
||||
<span className="ml-3">加载中...</span>
|
||||
</div>
|
||||
) : reviewData && (
|
||||
<>
|
||||
{/* 自定义面包屑 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
{/* <Breadcrumb
|
||||
items={getBreadcrumbItems()}
|
||||
className="items-center flex !mb-0"
|
||||
/> */}
|
||||
|
||||
{/* 在面包屑右侧显示精简版的FileInfo */}
|
||||
<div className=" ml-5 text-left flex-1 flex flex-row flex-wrap items-center">
|
||||
<span className="mr-2 text-xl font-medium">
|
||||
{reviewData.fileInfo.fileName}
|
||||
</span>
|
||||
<div className="text-xs text-gray-500 flex items-center">
|
||||
{/* 合同编号：{reviewData.fileInfo.contractNumber} */}
|
||||
{ reviewData.fileInfo.fileType != "1" ? "卷宗" : "合同" }
|
||||
编号：{reviewData.fileInfo.contractNumber}
|
||||
{reviewData.fileInfo.fileSize && (
|
||||
<span className="text-xs text-gray-500 ml-2">
|
||||
| {reviewData.fileInfo.fileSize} | {reviewData.fileInfo.fileFormat} | {reviewData.fileInfo.pageCount}页
|
||||
</span>
|
||||
)}
|
||||
{reviewData.fileInfo.uploadTime && (
|
||||
<div className="text-xs text-gray-500">
|
||||
| 上传时间：{reviewData.fileInfo.uploadTime}
|
||||
{/* | 上传用户：{reviewData.fileInfo.uploadUser} */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : reviewData ? (
|
||||
<main className="flex-1 min-h-0 grid grid-cols-[22%,1fr,30%] p-2">
|
||||
{/* 左栏：规则目录 */}
|
||||
<RulesDirectory
|
||||
reviewPoints={reviewData.reviewPoints}
|
||||
statistics={reviewData.statistics}
|
||||
activeReviewPointResultId={activeReviewPointResultId}
|
||||
fileName={reviewData.fileInfo.fileName}
|
||||
onRuleSelect={handleRuleSelect}
|
||||
onBack={() => navigate(getReturnUrl())}
|
||||
/>
|
||||
|
||||
{/* 中栏：PDF 预览 */}
|
||||
{/* 中栏：文件预览（根据文件类型切换） */}
|
||||
<section className="flex flex-col min-h-0 bg-slate-100">
|
||||
{document?.path?.split('.').pop()?.toLowerCase() === 'docx' ? (
|
||||
<DocxPreviewTest
|
||||
filePath={document?.path || ''}
|
||||
targetPage={targetPage}
|
||||
charPositions={charPositions}
|
||||
activeReviewPointResultId={activeReviewPointResultId}
|
||||
reviewPoints={reviewData.reviewPoints}
|
||||
highlightValue={highlightValue}
|
||||
aiSuggestionReplace={aiSuggestionReplace}
|
||||
userInfo={(loaderData as any)?.userInfo}
|
||||
/>
|
||||
) : (
|
||||
<PdfPreviewTest
|
||||
filePath={document?.path || ''}
|
||||
targetPage={targetPage}
|
||||
charPositions={charPositions}
|
||||
activeReviewPointResultId={activeReviewPointResultId}
|
||||
reviewPoints={reviewData.reviewPoints}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* 右栏：详情面板 */}
|
||||
<DetailPanel
|
||||
activeTab={rightActiveTab}
|
||||
onTabChange={handleTabChange}
|
||||
activeReviewPoint={activeReviewPoint}
|
||||
reviewPoints={reviewData.reviewPoints}
|
||||
fileInfo={reviewData.fileInfo}
|
||||
reviewInfo={reviewData.reviewInfo}
|
||||
onReviewPointSelect={handleReviewPointSelect}
|
||||
onStatusChange={handleReviewPointStatusChange}
|
||||
onConfirmResults={handleConfirmResults}
|
||||
onDownload={handleDownloadFile}
|
||||
auditStatus={document?.auditStatus}
|
||||
fileFormat={reviewData.fileInfo.fileFormat}
|
||||
onUploadTemplate={handleOpenReuploadModal}
|
||||
onComparison={() => setShowComparison(true)}
|
||||
showComparisonButton={showComparisonButton}
|
||||
/>
|
||||
</main>
|
||||
) : null}
|
||||
|
||||
{/* 结构比对 overlay */}
|
||||
{showCompareOverlay && comparison_document && (
|
||||
<div className="fixed inset-0 z-50 bg-black/30 flex items-center justify-center">
|
||||
<div className="bg-white rounded-lg w-[95vw] h-[90vh] flex flex-col overflow-hidden">
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-slate-200">
|
||||
<span className="text-sm font-medium">结构比对</span>
|
||||
<button
|
||||
type="button"
|
||||
className="w-8 h-8 grid place-items-center rounded hover:bg-slate-100 text-slate-500"
|
||||
onClick={() => setShowCompareOverlay(false)}
|
||||
>
|
||||
<i className="ri-close-line text-lg" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0">
|
||||
<ComparePreview
|
||||
doc1Path={document?.path || ''}
|
||||
doc2Path={comparison_document?.template_contract_path || ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 文件信息和操作按钮 */}
|
||||
{/* 选项卡 */}
|
||||
<ReviewTabs
|
||||
activeTab={activeTab}
|
||||
onTabChange={handleTabChange}
|
||||
fileInfo={{
|
||||
id: document?.id,
|
||||
previousRoute: loaderData.previousRoute,
|
||||
path: document?.path,
|
||||
auditStatus: document?.auditStatus,
|
||||
type: document?.type || document?.type_id,
|
||||
comparisonId: comparison_document?.id ? Number(comparison_document.id) : undefined
|
||||
}}
|
||||
onConfirmResults={handleConfirmResults}
|
||||
jwtToken={frontendJWT}
|
||||
onSaveBeforeDownload={handleSaveBeforeDownload}
|
||||
>
|
||||
{/* 评查结果选项卡内容 */}
|
||||
{activeTab === 'preview' && (
|
||||
<div className="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
|
||||
{/* {JSON.stringify(document)} */}
|
||||
{/* 左侧：文件预览 */}
|
||||
<div className="w-full lg:w-[65%]">
|
||||
{(() => {
|
||||
// console.log('[Reviews] 准备渲染FilePreview', {
|
||||
// hasDocument: !!document,
|
||||
// documentPath: document?.path,
|
||||
// targetPage,
|
||||
// hasCharPositions: !!charPositions,
|
||||
// charPositionsLength: charPositions?.length
|
||||
// });
|
||||
return (
|
||||
<FilePreview
|
||||
key={`file-preview-${collaboraKey}`}
|
||||
ref={filePreviewRef}
|
||||
fileContent={document}
|
||||
reviewPoints={reviewData.reviewPoints}
|
||||
activeReviewPointResultId={activeReviewPointResultId}
|
||||
targetPage={targetPage}
|
||||
charPositions={charPositions}
|
||||
highlightValue={highlightValue}
|
||||
userInfo={loaderData.userInfo}
|
||||
aiSuggestionReplace={aiSuggestionReplace}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* 右侧：评查结果 */}
|
||||
<div className="w-full lg:w-[35%]">
|
||||
{/* {JSON.stringify(reviewData.fileInfo.fileFormat)} */}
|
||||
<ReviewPointsList
|
||||
reviewPoints={reviewData.reviewPoints}
|
||||
statistics={reviewData.statistics}
|
||||
activeReviewPointResultId={activeReviewPointResultId}
|
||||
onReviewPointSelect={handleReviewPointSelect}
|
||||
onStatusChange={handleReviewPointStatusChange}
|
||||
fileFormat={reviewData.fileInfo.fileFormat}
|
||||
onAiSuggestionReplace={handleAiSuggestionReplace}
|
||||
flowType={reviewData.flowType}
|
||||
scoredResults={reviewData.scoredResults}
|
||||
scoredSummary={reviewData.scoredSummary}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 结构比对选项卡内容 */}
|
||||
{activeTab === 'filecompare' && (
|
||||
<div className="w-full" style={{
|
||||
height: 'calc(100vh - 120px)',
|
||||
minHeight: '600px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
{/* {JSON.stringify(comparison_document?.template_contract_path)} -----{JSON.stringify(document?.path)} */}
|
||||
<ComparePreview
|
||||
doc1Path={document?.path || ''}
|
||||
doc2Path={comparison_document?.template_contract_path || ''}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 原来的结构比对选项卡内容（已注释） */}
|
||||
{/* {activeTab === 'filecompare' && (
|
||||
<div className="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
|
||||
<div className={`w-full ${comparison_document.template_contract_path ? 'lg:w-[38%]' : 'lg:w-[56%]'}`}>
|
||||
<FilePreview
|
||||
fileContent={document}
|
||||
reviewPoints={reviewData.reviewPoints}
|
||||
activeReviewPointResultId={activeReviewPointResultId}
|
||||
targetPage={targetPage}
|
||||
charPositions={charPositions}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`w-full ${comparison_document.template_contract_path ? 'lg:w-[38%]' : 'lg:w-[20%]'}`}>
|
||||
<FilePreview
|
||||
fileContent={comparison_document}
|
||||
reviewPoints={[]}
|
||||
activeReviewPointResultId={activeReviewPointResultId}
|
||||
targetPage={templateTargetPage}
|
||||
isStructuredView={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:w-[24%]">
|
||||
<Comparison
|
||||
comparison_document={comparison_document}
|
||||
onPageJump={(sourcePage, templatePage) => {
|
||||
if (sourcePage > 0) {
|
||||
if (sourcePage === targetPage) {
|
||||
setTargetPage(undefined);
|
||||
setTimeout(() => setTargetPage(sourcePage), 0);
|
||||
} else {
|
||||
setTargetPage(sourcePage);
|
||||
}
|
||||
console.log(`跳转到主文件第${sourcePage}页`);
|
||||
}
|
||||
if (templatePage > 0) {
|
||||
if (templatePage === templateTargetPage) {
|
||||
setTemplateTargetPage(undefined);
|
||||
setTimeout(() => setTemplateTargetPage(templatePage), 0);
|
||||
} else {
|
||||
setTemplateTargetPage(templatePage);
|
||||
}
|
||||
console.log(`跳转到模板文件第${templatePage}页`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
{/* AI智能分析选项卡内容 */}
|
||||
{activeTab === 'analysis' && (
|
||||
<AIAnalysis
|
||||
analysisData={reviewData.aiAnalysis}
|
||||
score={reviewData.statistics.score}
|
||||
onConfirmResults={handleConfirmResults}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 文件信息选项卡内容 */}
|
||||
{activeTab === 'fileinfo' && (
|
||||
<FileDetails
|
||||
fileInfo={reviewData.fileInfo}
|
||||
contractInfo={reviewData.contractInfo}
|
||||
reviewInfo={reviewData.reviewInfo}
|
||||
/>
|
||||
)}
|
||||
</ReviewTabs>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 重新上传模板模态框 */}
|
||||
<Modal
|
||||
isOpen={isReuploadModalOpen}
|
||||
onClose={handleCloseReuploadModal}
|
||||
title="重新上传模板"
|
||||
size="medium"
|
||||
footer={
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button type="default" onClick={handleCloseReuploadModal} disabled={isUploading}>取消</Button>
|
||||
<Button type="primary" onClick={handleConfirmUpload} disabled={selectedTemplateFiles.length === 0 || isUploading} icon={isUploading ? 'ri-loader-4-line animate-spin' : undefined}>
|
||||
{isUploading ? '上传中...' : '确定上传'}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm text-gray-600 mb-4">
|
||||
<p>请选择新的模板文件用于结构比对。</p>
|
||||
<p className="mt-2 text-orange-600"><i className="ri-information-line mr-1" />注意：支持PDF和Word格式的文件，上传后将替换当前的比对模板。</p>
|
||||
</div>
|
||||
<UploadArea
|
||||
ref={uploadAreaRef}
|
||||
onFilesSelected={handleTemplateFilesSelected}
|
||||
accept=".pdf,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
||||
multiple={false}
|
||||
icon="ri-file-text-line"
|
||||
buttonText="选择模板文件"
|
||||
mainText="点击或拖拽文件到此区域"
|
||||
tipText={<span className="text-xs text-gray-500">支持格式：.pdf | .docx</span>}
|
||||
disabled={isUploading}
|
||||
/>
|
||||
{selectedTemplateFiles.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<h4 className="text-sm font-medium text-gray-900 mb-2">已选择的文件：</h4>
|
||||
<div className="space-y-2">
|
||||
{selectedTemplateFiles.map((file, index) => {
|
||||
const fileName = file.name.toLowerCase();
|
||||
const fileIcon = fileName.endsWith('.doc') || fileName.endsWith('.docx') ? 'ri-file-word-2-line' : 'ri-file-pdf-line';
|
||||
const iconColor = fileName.endsWith('.doc') || fileName.endsWith('.docx') ? 'text-blue-600' : 'text-red-500';
|
||||
return (
|
||||
<div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border">
|
||||
<div className="flex items-center">
|
||||
<i className={`${fileIcon} ${iconColor} mr-2`} />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-900">{file.name}</div>
|
||||
<div className="text-xs text-gray-500">{formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-gray-400 hover:text-red-500 transition-colors" onClick={() => { setSelectedTemplateFiles(prev => prev.filter((_, i) => i !== index)); if (uploadAreaRef.current) uploadAreaRef.current.resetFileInput(); }} disabled={isUploading}>
|
||||
<i className="ri-close-line" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1095,6 +1113,7 @@ function getMockReviewData(): ReviewData {
|
||||
success: 6,
|
||||
warning: 7,
|
||||
error: 2,
|
||||
notApplicable: 0,
|
||||
score: 75
|
||||
},
|
||||
fileContent: {
|
||||
|
||||
Reference in New Issue
Block a user