+
+
+
+ {statistics.total}
+
+
总计
+
+
+
+
+ 通过
+
+
+
+
+ 警告
+
+
+
+
+ 错误
+
+
+
+
{reviewPoint.humanReviewNote}
+ {reviewPoint.humanReviewBy && reviewPoint.humanReviewTime && (
+
+ 审核人：{reviewPoint.humanReviewBy} | 时间：{reviewPoint.humanReviewTime}
+
+ )}
+
+
+
+ 当前值
+
+ {reviewPoint.status === 'error' ? '不符合规范' : '需优化'}
+
+
+
{reviewPoint.content || '（内容为空）'}
+
+ {reviewPoint.suggestion && (
+
+
+ 建议修改为
+
+ 符合规范
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ // 渲染无匹配结果提示
+ const renderEmptyState = () => {
+ return (
+
+
+
没有找到匹配的评查点
+
请尝试不同的搜索词或清除筛选条件
+ {(searchText || statusFilter) && (
+
+ )}
+
+ );
+ };
+
+ return (
+
+
+
+ 评查结果
+
+
+ {/* 评查统计 */}
+ {renderStatistics()}
+
+ {/* 搜索框 */}
+ {renderSearchBar()}
+
+ {/* 评查点列表 */}
+
+ {filteredReviewPoints.length > 0 ? (
+ filteredReviewPoints.map(reviewPoint => (
+
+ ))
+ ) : (
+ renderEmptyState()
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/app/components/reviews/ReviewTabs.tsx b/app/components/reviews/ReviewTabs.tsx
new file mode 100644
index 0000000..08221e4
--- /dev/null
+++ b/app/components/reviews/ReviewTabs.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+ {children}
+
+
+ );
+}
\ No newline at end of file
diff --git a/app/components/reviews/index.ts b/app/components/reviews/index.ts
new file mode 100644
index 0000000..d6d23c8
--- /dev/null
+++ b/app/components/reviews/index.ts
@@ -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';
\ No newline at end of file
diff --git a/app/routes/reviews.tsx b/app/routes/reviews.tsx
new file mode 100644
index 0000000..67d798e
--- /dev/null
+++ b/app/routes/reviews.tsx
@@ -0,0 +1,458 @@
+/**
+ * 评查详情页面
+ *
+ * 功能概述:
+ * - 显示文档评查结果和详细信息
+ * - 支持查看文档内容及评查点高亮标记
+ * - 提供评查点列表，分为通过、警告和错误三种类型
+ * - 支持评查点处理，如一键替换、人工审核等功能
+ * - 支持导出评查报告和下载原文件
+ *
+ * 组件结构:
+ * - FileInfo: 显示文件基本信息和操作按钮
+ * - ReviewTabs: 页面选项卡，包括评查结果、AI智能分析和文件信息
+ * - FilePreview: 文档预览组件，显示文档内容及高亮问题
+ * - ReviewPointsList: 评查点列表组件，显示所有评查结果
+ * - AIAnalysis: AI智能分析结果，提供综合评价
+ * - FileDetails: 文件详情信息
+ *
+ * 数据流转:
+ * 1. 页面加载时从API获取评查详情数据
+ * 2. 根据评查点ID关联文档中的高亮区域
+ * 3. 点击评查点时在文档中定位对应位置
+ * 4. 处理评查点时更新状态并反馈到UI
+ *
+ * @author 中国烟草AI合同及卷宗审核系统开发团队
+ */
+
+import { type MetaFunction } from "@remix-run/node";
+import { useState, useEffect } from "react";
+import { useNavigate } from "@remix-run/react";
+import reviewsStyles from "~/styles/reviews.css?url";
+
+// 导入评查详情页面组件
+import {
+ FileInfo,
+ ReviewTabs,
+ FilePreview,
+ ReviewPointsList,
+ AIAnalysis,
+ FileDetails
+} from "~/components/reviews";
+
+// 定义评查点类型
+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 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 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 AnalysisItem {
+ title: string;
+ content: string;
+ description: string;
+}
+
+// 定义分析数据类型
+interface AnalysisData {
+ riskAlerts: AnalysisItem[];
+ suggestions: AnalysisItem[];
+ summary: string;
+}
+
+// 定义评查数据类型
+interface ReviewData {
+ fileInfo: FileInfo;
+ contractInfo: ContractInfo;
+ reviewInfo: ReviewInfo;
+ statistics: Statistics;
+ fileContent: FileContent;
+ reviewPoints: ReviewPoint[];
+ aiAnalysis: AnalysisData;
+}
+
+export const meta: MetaFunction = () => {
+ return [
+ { title: "评查详情 - 中国烟草AI合同及卷宗审核系统" },
+ {
+ name: "description",
+ content: "查看文档评查结果，处理问题点，确认评查结果"
+ }
+ ];
+};
+
+export function links() {
+ return [{ rel: "stylesheet", href: reviewsStyles }];
+}
+
+export const handle = {
+ breadcrumb: "评查详情"
+};
+
+export default function ReviewDetails() {
+ const navigate = useNavigate();
+ const [isLoading, setIsLoading] = useState(true);
+ const [activeTab, setActiveTab] = useState
('preview'); // 'preview', 'analysis', 'fileinfo'
+ const [reviewData, setReviewData] = useState(null);
+ const [activeReviewPointId, setActiveReviewPointId] = useState(null);
+
+ // 模拟获取评查数据
+ useEffect(() => {
+ // 模拟API请求延迟
+ const timer = setTimeout(() => {
+ // 模拟评查数据
+ const mockData = getMockReviewData();
+ setReviewData(mockData);
+ setIsLoading(false);
+
+ // 默认选中第一个评查点
+ if (mockData.reviewPoints.length > 0) {
+ setActiveReviewPointId(mockData.reviewPoints[0].id);
+ }
+ }, 800);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+ const handleTabChange = (tabKey: string) => {
+ setActiveTab(tabKey);
+ };
+
+ const handleReviewPointSelect = (reviewPointId: string) => {
+ setActiveReviewPointId(reviewPointId);
+ };
+
+ const handleReviewPointStatusChange = (reviewPointId: string, newStatus: string) => {
+ // 更新评查点状态
+ if (reviewData) {
+ const updatedReviewPoints = reviewData.reviewPoints.map(point =>
+ point.id === reviewPointId ? { ...point, status: newStatus } : point
+ );
+
+ setReviewData({
+ ...reviewData,
+ reviewPoints: updatedReviewPoints,
+ statistics: calculateStatistics(updatedReviewPoints)
+ });
+ }
+ };
+
+ const handleConfirmResults = () => {
+ alert('评查结果已确认');
+ navigate('/reviews'); // 假设评查列表页面路径为 /reviews
+ };
+
+ return (
+
+ {isLoading ? (
+
+ ) : reviewData && (
+ <>
+ {/* 文件信息和操作按钮 */}
+
+
+ {/* 选项卡 */}
+
+ {/* 评查结果选项卡内容 */}
+ {activeTab === 'preview' && (
+
+ {/* 左侧：文件预览 */}
+
+
+
+
+ {/* 右侧：评查结果 */}
+
+
+
+
+
+ )}
+