加入审查详情页面转换

app/components/reviews/ReviewPointsList.tsx

@@ -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>
+  );
+}