fixed

2025-04-15 23:24:32 +08:00
parent b315fc0fea
commit 9a9ce5fa55
19 changed files with 1405 additions and 560 deletions
@@ -1,17 +1,14 @@
-/**
- * 文件信息组件
- * 显示文件名称、状态信息以及操作按钮（下载原文件、导出评查报告、确认评查结果）
- */

 interface FileInfoProps {
  fileInfo: {
    fileName: string;
    contractNumber: string;
-    fileSize?: string;
+    fileSize?: string;  
    fileFormat?: string;
    pageCount?: number;
    uploadTime?: string;
    uploadUser?: string;
+    auditStatus?: number;
  };
  onConfirmResults: () => void;
 }
@@ -1,16 +1,34 @@
 /**
 * 评查点列表组件
- * 显示评查结果统计和所有评查点列表
+ * 
+ * 功能概述:
+ * - 展示评查结果统计信息（总计、通过、警告、错误数量）
+ * - 提供评查点过滤功能（按状态和搜索文本）
+ * - 显示评查点详细信息（标题、状态、内容、建议修改等）
+ * - 支持评查点操作（一键替换、人工审核等）
+ * 
+ * 组件结构:
+ * - 统计区域: 显示评查点数量统计
+ * - 搜索区域: 提供文本搜索功能
+ * - 评查点列表: 展示所有评查点
+ *   - 评查点卡片: 展示单个评查点详情
+ *     - 评查点头部: 显示标题和状态
+ *     - 评查点内容: 显示当前内容和问题
+ *     - 建议修改区域: 显示建议的修改内容
+ *     - 操作按钮: 提供一键替换和人工审核功能
 */
-import { useState } from 'react';
+import { useState, useEffect } from 'react';

-// 评查点类型定义
-interface ReviewPoint {
+/**
+ * 评查点类型定义
+ * 用于展示单个评查结果
+ */
+export interface ReviewPoint {
  id: string;
  title: string;
-  location: string;
+  groupName: string;
  status: string;
-  content: string;
+  content: string | Record<string, string>;
  suggestion: string;
  needsHumanReview?: boolean;
  humanReviewNote?: string;
@@ -20,6 +38,7 @@ interface ReviewPoint {
    section: string;
    index: number;
  };
+  result?: boolean;
 }

 // 统计数据类型
@@ -41,29 +60,75 @@ interface ReviewPointsListProps {

 export function ReviewPointsList({ 
  reviewPoints, 
-  statistics, 
+  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 [editingReviewPoint, setEditingReviewPoint] = useState<string | null>(null); // 当前正在编辑的评查点ID
+  const [userInputText, setUserInputText] = useState(''); // 用户输入的审核意见文本
+  const [searchText, setSearchText] = useState(''); // 搜索文本
+  const [statusFilter, setStatusFilter] = useState<string | null>(null); // 状态过滤
+  const [suggestionTexts, setSuggestionTexts] = useState<Record<string, string>>({}); // 存储每个评查点的建议文本
  
-  // 过滤评查点
+  // 初始化建议文本
+  useEffect(() => {
+    // 将所有评查点的建议文本存储到状态中
+    const suggestions: Record<string, string> = {};
+    reviewPoints.forEach(point => {
+      suggestions[point.id] = point.suggestion || '';
+    });
+    setSuggestionTexts(suggestions);
+  }, [reviewPoints]);
+
+  // 处理建议文本变更
+  const handleSuggestionChange = (reviewPointId: string, text: string) => {
+    setSuggestionTexts(prev => ({
+      ...prev,
+      [reviewPointId]: text
+    }));
+  };
+  
+  /**
+   * 过滤评查点
+   * 根据搜索文本和状态过滤条件筛选评查点
+   */
  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());
+      point.groupName.toLowerCase().includes(searchText.toLowerCase()) ||
+      (typeof point.content === 'string' && point.content.toLowerCase().includes(searchText.toLowerCase())) ||
+      (typeof point.content === 'object' && point.content !== null && 
+        Object.values(point.content).some(value => 
+          typeof value === 'string' && value.toLowerCase().includes(searchText.toLowerCase())
+        ));
    
-    const matchesStatus = statusFilter === null || point.status === statusFilter;
+    // 处理状态过滤
+    let matchesStatus = false;
+    
+    if (statusFilter === null) {
+      // 未选择过滤条件时显示所有
+      matchesStatus = true;
+    } else if (statusFilter === 'success') {
+      // 过滤"通过"状态
+      matchesStatus = point.result === true || (point.result === undefined && point.status === 'success');
+    } else if (statusFilter === 'warning') {
+      // 过滤"警告"状态
+      matchesStatus = point.result === false && point.status === 'warning';
+    } else if (statusFilter === 'error') {
+      // 过滤"错误"状态
+      matchesStatus = point.result === false && point.status === 'error';
+    }
    
    return matchesSearch && matchesStatus;
  });
  
-  // 处理点击"一键替换"按钮
+  /**
+   * 处理一键替换操作
+   * @param reviewPointId 评查点ID
+   */
  const handleReplace = (reviewPointId: string) => {
    // 在实际应用中，这里应该调用API进行内容替换
    // 模拟替换操作
@@ -73,7 +138,11 @@ export function ReviewPointsList({
    onStatusChange(reviewPointId, 'success');
  };
  
-  // 处理评查点审核操作
+  /**
+   * 处理评查点审核操作
+   * @param reviewPointId 评查点ID
+   * @param action 操作类型: 'approve' 通过 / 'reject' 不通过
+   */
  const handleReviewAction = (reviewPointId: string, action: 'approve' | 'reject') => {
    // 更新评查点状态
    onStatusChange(reviewPointId, action === 'approve' ? 'success' : 'error');
@@ -85,7 +154,10 @@ export function ReviewPointsList({
    alert(`${action === 'approve' ? '通过' : '不通过'}了评查点 ${reviewPointId}`);
  };
  
-  // 显示评查点详情编辑界面
+  /**
+   * 显示评查点详情编辑界面
+   * @param reviewPointId 评查点ID
+   */
  const handleEditReviewPoint = (reviewPointId: string) => {
    setEditingReviewPoint(reviewPointId);
    
@@ -96,18 +168,51 @@ export function ReviewPointsList({
    }
  };
  
-  // 渲染评查统计信息
+  /**
+   * 渲染评查统计信息
+   * 显示总计、通过、警告、错误数量
+   */
  const renderStatistics = () => {
+    // 确保传入的statistics存在，否则使用计算值
+    const statsToUse = statistics || { 
+      total: reviewPoints.length,
+      success: 0,
+      warning: 0,
+      error: 0,
+      score: 0
+    };
+    
+    // 计算各个状态的评查点数量
+    const successCount = reviewPoints.filter(
+      point => point.result === true || (point.result === undefined && point.status === 'success')
+    ).length;
+    
+    const warningCount = reviewPoints.filter(
+      point => point.result === false && point.status === 'warning'
+    ).length;
+    
+    const errorCount = reviewPoints.filter(
+      point => point.result === false && point.status === 'error'
+    ).length;
+    
+    // 如果没有计算值，则使用传入的统计值
+    const totalToShow = statsToUse.total === 0 ? reviewPoints.length : statsToUse.total;
+    const successToShow = successCount || statsToUse.success;
+    const warningToShow = warningCount || statsToUse.warning;
+    const errorToShow = errorCount || statsToUse.error;
+    
    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>
+              <span className="text-sm font-semibold text-gray-600">{totalToShow}</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' : ''}`}
@@ -115,11 +220,12 @@ export function ReviewPointsList({
              aria-label={`过滤通过项 ${statusFilter === 'success' ? '(已选中)' : ''}`}
              type="button"
            >
-              <span className="text-sm font-semibold text-success">{statistics.success}</span>
+              <span className="text-sm font-semibold text-success">{successToShow}</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' : ''}`}
@@ -127,11 +233,12 @@ export function ReviewPointsList({
              aria-label={`过滤警告项 ${statusFilter === 'warning' ? '(已选中)' : ''}`}
              type="button"
            >
-              <span className="text-sm font-semibold text-warning">{statistics.warning}</span>
+              <span className="text-sm font-semibold text-warning">{warningToShow}</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' : ''}`}
@@ -139,7 +246,7 @@ export function ReviewPointsList({
              aria-label={`过滤错误项 ${statusFilter === 'error' ? '(已选中)' : ''}`}
              type="button"
            >
-              <span className="text-sm font-semibold text-error">{statistics.error}</span>
+              <span className="text-sm font-semibold text-error">{errorToShow}</span>
            </button>
            <span className="text-xs text-gray-500 ml-1">错误</span>
          </div>
@@ -148,7 +255,10 @@ export function ReviewPointsList({
    );
  };
  
-  // 渲染搜索框
+  /**
+   * 渲染搜索框
+   * 用于按文本搜索评查点
+   */
  const renderSearchBar = () => {
    return (
      <div className="py-2 px-3 border-b border-gray-100">
@@ -174,8 +284,40 @@ export function ReviewPointsList({
    );
  };
  
-  // 渲染评查点状态标签
-  const renderStatusBadge = (status: string) => {
+  /**
+   * 渲染评查点状态标签
+   * @param status 状态文本
+   * @param result 评查结果
+   * @returns 状态标签组件
+   */
+  const renderStatusBadge = (status: string, result?: boolean) => {
+    // 优先根据result判断是否通过
+    if (result === true) {
+      return (
+        <span className="status-badge status-success">
+          <i className="ri-checkbox-circle-line mr-1"></i>通过
+        </span>
+      );
+    }
+    
+    // 当result为false时，根据status决定显示警告还是错误
+    if (result === false) {
+      if (status === 'warning') {
+        return (
+          <span className="status-badge status-warning">
+            <i className="ri-alert-line mr-1"></i>警告
+          </span>
+        );
+      } else if (status === 'error') {
+        return (
+          <span className="status-badge status-error">
+            <i className="ri-close-circle-line mr-1"></i>不通过
+          </span>
+        );
+      }
+    }
+    
+    // 兼容旧版逻辑，当没有result时，仍按status判断
    switch (status) {
      case 'success':
        return (
@@ -210,7 +352,11 @@ export function ReviewPointsList({
    }
  };
  
-  // 渲染人工审核标记
+  /**
+   * 渲染人工审核标记
+   * @param reviewPoint 评查点
+   * @returns 人工审核标记组件
+   */
  const renderHumanReviewBadge = (reviewPoint: ReviewPoint) => {
    if (reviewPoint.needsHumanReview) {
      return (
@@ -222,7 +368,11 @@ export function ReviewPointsList({
    return null;
  };
  
-  // 渲染人工审核注释
+  /**
+   * 渲染人工审核注释
+   * @param reviewPoint 评查点
+   * @returns 人工审核注释组件
+   */
  const renderHumanReviewNote = (reviewPoint: ReviewPoint) => {
    if (reviewPoint.needsHumanReview && reviewPoint.humanReviewNote) {
      return (
@@ -239,11 +389,16 @@ export function ReviewPointsList({
    return null;
  };
  
-  // 渲染评查点内容与建议
+  /**
+   * 渲染评查点内容与建议
+   * @param reviewPoint 评查点
+   * @returns 评查点内容组件
+   */
  const renderReviewPointContent = (reviewPoint: ReviewPoint) => {
    // 如果当前评查点不处于编辑状态，只显示简单信息
    if (editingReviewPoint !== reviewPoint.id) {
-      if (reviewPoint.status === 'success') {
+      // 根据result和status决定渲染哪种样式
+      if (reviewPoint.result === true || (reviewPoint.result === undefined && reviewPoint.status === 'success')) {
        // 已通过的评查点只显示基本信息和人工审核注释
        if (reviewPoint.needsHumanReview && reviewPoint.humanReviewNote) {
          return (
@@ -262,39 +417,62 @@ export function ReviewPointsList({
        return null;
      }
      
+      // 非通过状态，显示内容和修改建议
+      const isErrorStatus = reviewPoint.result === false && reviewPoint.status === 'error';
+      
      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="p-2 bg-white rounded border border-gray-200 text-xs mb-3">
+            {/* 移除顶部的"当前值"标题，在每个内容项中显示 */}
+            {typeof reviewPoint.content === 'object' && reviewPoint.content !== null ? (
+              // 当 content 是对象时的渲染方式
+              <div>
+                {Object.entries(reviewPoint.content).map(([key, value], index) => (
+                  <div key={index} className="mb-2 pb-2 border-b border-gray-100 last:border-b-0 last:mb-0 last:pb-0">
+                    {/* 使用flex布局使key和状态标签左右对齐 */}
+                    <div className="flex justify-between items-center mb-1">
+                      <span className="text-xs">{key}</span>
+                      <span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
+                        {isErrorStatus ? '不符合规范' : '需优化'}
+                      </span>
+                    </div>
+                    <p className="text-xs text-left">{value || '（内容为空）'}</p>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              // 当 content 是字符串时的渲染方式
+              <>
+                {/* 为字符串内容也添加标题和状态 */}
                <div className="flex justify-between items-center mb-1">
-                  <span className="text-xs">建议修改为</span>
-                  <span className='text-xs text-green-500'>
-                    符合规范
+                  <span className="text-xs">当前值</span>
+                  <span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
+                    {isErrorStatus ? '不符合规范' : '需优化'}
                  </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>
+                <p className="text-xs text-left">{reviewPoint.content || '（内容为空）'}</p>
+              </>
            )}
          </div>
          
+          {/* 建议修改区域 */}
+          <div className="mb-2">
+            <div className="flex justify-between items-center mb-2">
+              <span className="text-gray-700">建议修改为：</span>
+              <span className="text-green-500">符合规范</span>
+            </div>
+            <textarea
+              value={suggestionTexts[reviewPoint.id] || ''}
+              onChange={(e) => handleSuggestionChange(reviewPoint.id, e.target.value)}
+              className="w-full p-2 border rounded bg-gray-50 min-h-[100px] focus:outline-none focus:border-[#00684a] focus:shadow-[0_0_0_2px_rgba(0,104,74,0.2)]"
+            />
+          </div>
+          
          {/* 操作按钮区域 */}
          <div className="flex space-x-2 mt-2">
            {/* 一键替换按钮 - 只有非人工审核的点或未通过的人工审核点才显示 */}
-            {(!reviewPoint.needsHumanReview || reviewPoint.status !== 'success') && (
+            {(!reviewPoint.needsHumanReview || (!reviewPoint.result && reviewPoint.status !== 'success')) && (
              <button 
                className="replace-action flex-1 justify-center"
                onClick={() => handleReplace(reviewPoint.id)}
@@ -304,7 +482,7 @@ export function ReviewPointsList({
            )}
            
            {/* 人工审核按钮 */}
-            {reviewPoint.needsHumanReview && reviewPoint.status !== 'success' && (
+            {reviewPoint.needsHumanReview && !reviewPoint.result && reviewPoint.status !== 'success' && (
              <button 
                className="replace-action flex-1 justify-center human-review-request"
                onClick={() => handleEditReviewPoint(reviewPoint.id)}
@@ -318,27 +496,59 @@ export function ReviewPointsList({
    }
    
    // 处于编辑状态时显示编辑界面
+    // 根据result和status决定显示不同的标记
+    const isErrorStatus = reviewPoint.result === false && reviewPoint.status === 'error';
+
    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 className="p-2 bg-white rounded border border-gray-200 text-xs mb-3">
+          {/* 隐藏顶部的"当前值"标题，在每个内容项中显示 */}
+          {typeof reviewPoint.content === 'object' && reviewPoint.content !== null ? (
+            // 当 content 是对象时的渲染方式
+            <div>
+              {Object.entries(reviewPoint.content).map(([key, value], index) => (
+                <div key={index} className="mb-2 pb-2 border-b border-gray-100 last:border-b-0 last:mb-0 last:pb-0">
+                  {/* 使用flex布局使key和状态标签左右对齐 */}
+                  <div className="flex justify-between items-center mb-1">
+                    <span className="text-xs">{key}</span>
+                    <span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
+                      {isErrorStatus ? '不符合规范' : '需优化'}
+                    </span>
+                  </div>
+                  <p className="text-xs text-left">{value || '（内容为空）'}</p>
+                </div>
+              ))}
            </div>
+          ) : (
+            // 当 content 是字符串时的渲染方式
+            <>
+              {/* 为字符串内容也添加标题和状态 */}
+              <div className="flex justify-between items-center mb-1">
+                <span className="text-xs">当前值</span>
+                <span className={`text-xs ${isErrorStatus ? 'text-error' : 'text-warning'}`}>
+                  {isErrorStatus ? '不符合规范' : '需优化'}
+                </span>
+              </div>
+              <p className="text-xs">{reviewPoint.content || '（内容为空）'}</p>
+            </>
          )}
        </div>
        
+        {/* 建议修改区域 */}
+        <div className="mb-2">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-gray-700">建议修改为：</span>
+            <span className="text-green-500">符合规范</span>
+          </div>
+          <textarea
+            value={suggestionTexts[reviewPoint.id] || ''}
+            onChange={(e) => handleSuggestionChange(reviewPoint.id, e.target.value)}
+            className="w-full p-2 border rounded bg-gray-50 min-h-[100px] focus:outline-none focus:border-[#00684a] focus:shadow-[0_0_0_2px_rgba(0,104,74,0.2)]"
+          />
+        </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 
@@ -368,7 +578,10 @@ export function ReviewPointsList({
    );
  };
  
-  // 渲染无匹配结果提示
+  /**
+   * 渲染无匹配结果提示
+   * 当过滤后没有评查点时显示
+   */
  const renderEmptyState = () => {
    return (
      <div className="flex flex-col items-center justify-center py-8 px-4 text-center text-gray-500">
@@ -390,8 +603,10 @@ export function ReviewPointsList({
    );
  };
  
+  // 组件主渲染函数
  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>
@@ -413,16 +628,19 @@ export function ReviewPointsList({
              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)}
+              {/* 评查点标题和状态 */}
+              <div className="review-point-header flex justify-between items-start">
+                <div className="review-point-title flex-1 text-left">{reviewPoint.title}</div>
+                <div className="flex items-center ml-2 flex-shrink-0">
+                  {renderStatusBadge(reviewPoint.status, reviewPoint.result)}
                  {renderHumanReviewBadge(reviewPoint)}
                </div>
              </div>
+              
+              {/* 评查点所属分组 */}
              <div className="review-point-location">
                <i className="ri-file-list-line mr-1"></i>
-                <span>{reviewPoint.location}</span>
+                <span>{reviewPoint.groupName}</span>
              </div>
              
              {/* 人工审核注释 */}
@@ -6,5 +6,6 @@ export { FileInfo } from './FileInfo';
 export { ReviewTabs } from './ReviewTabs';
 export { FilePreview } from './FilePreview';
 export { ReviewPointsList } from './ReviewPointsList';
+export type { ReviewPoint } from './ReviewPointsList';
 export { AIAnalysis } from './AIAnalysis';
 export { FileDetails } from './FileDetails';