添加登录内容，尚未完善，先创建分支

2025-07-14 12:31:43 +08:00
parent e3109423d4
commit fff474f46b
25 changed files with 2693 additions and 1102 deletions
@@ -0,0 +1,311 @@
+import { useState, useEffect } from "react";
+
+// 定义字段比对结果类型
+interface FieldComparison {
+  field: string;
+  status: string;
+  details: string;
+  source_page: string;
+  template_page: string;
+}
+
+// 定义比对结果类型
+interface ComparisonResults {
+  [sectionName: string]: FieldComparison[];
+}
+
+// 定义比对文档类型
+interface ComparisonDocument {
+  comparison_results?: ComparisonResults;
+  [key: string]: unknown;
+}
+
+// 定义组件Props类型
+interface ComparisonProps {
+  comparison_document: ComparisonDocument | null;
+  onPageJump?: (sourcePage: number, templatePage: number) => void;
+}
+
+// 筛选类型
+type FilterType = 'all' | 'normal' | 'abnormal';
+
+export function Comparison({ comparison_document, onPageJump }: ComparisonProps) {
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());
+  const [filterType, setFilterType] = useState<FilterType>('all');
+
+  // 默认展开所有章节
+  useEffect(() => {
+    if (comparison_document?.comparison_results) {
+      const allSections = Object.keys(comparison_document.comparison_results);
+      setExpandedSections(new Set(allSections));
+    }
+  }, [comparison_document?.comparison_results]);
+
+  // 如果没有比对文档，显示暂无数据
+  if (!comparison_document || !comparison_document.comparison_results) {
+    return (
+      <div className="bg-white rounded-lg border border-gray-200 h-[calc(100vh-120px)] overflow-y-auto">
+        <div className="review-panel-header py-2 px-4 flex items-center">
+          <i className="ri-file-compare-line text-primary mr-2"></i>
+          <span className="font-medium text-primary">结构比对(0)</span>
+        </div>
+        <div className="text-center py-8 text-gray-500">
+          <i className="ri-file-search-line text-4xl mb-2 block"></i>
+          <p>暂无结构比对数据</p>
+        </div>
+      </div>
+    );
+  }
+
+  const comparisonResults = comparison_document.comparison_results;
+
+  // 确保 comparisonResults 的所有值都是数组，过滤掉非数组项
+  const validComparisonResults: ComparisonResults = {};
+  if (comparisonResults) {
+    Object.entries(comparisonResults).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        validComparisonResults[key] = value;
+      }
+    });
+  }
+
+  // 切换章节展开状态
+  const toggleSection = (sectionName: string) => {
+    const newExpanded = new Set(expandedSections);
+    if (newExpanded.has(sectionName)) {
+      newExpanded.delete(sectionName);
+    } else {
+      newExpanded.add(sectionName);
+    }
+    setExpandedSections(newExpanded);
+  };
+
+  // 处理整个字段框的点击，同时传递两个页码
+  const handleFieldClick = (field: FieldComparison) => {
+    if (onPageJump) {
+      const sourcePage = field.source_page ? parseInt(field.source_page) : 0;
+      const templatePage = field.template_page ? parseInt(field.template_page) : 0;
+      onPageJump(sourcePage, templatePage);
+    }
+  };
+
+  // 处理键盘事件
+  const handleFieldKeyDown = (event: React.KeyboardEvent, field: FieldComparison) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleFieldClick(field);
+    }
+  };
+
+  // 获取状态样式
+  const getStatusStyle = (status: string) => {
+    if (status === 'normal') {
+      return {
+        icon: 'ri-check-circle-line',
+        color: 'text-green-500',
+        bgColor: 'bg-green-50',
+        borderColor: 'border-green-200'
+      };
+    } else {
+      return {
+        icon: 'ri-alert-circle-line',
+        color: 'text-red-500',
+        bgColor: 'bg-red-50',
+        borderColor: 'border-red-200'
+      };
+    }
+  };
+
+  // 统计总体信息
+  const totalFields = Object.values(validComparisonResults).flat().length;
+  const normalFields = Object.values(validComparisonResults).flat().filter(field => field.status === 'normal').length;
+  const abnormalFields = totalFields - normalFields;
+
+  // 根据筛选类型过滤数据
+  const getFilteredResults = () => {
+    if (filterType === 'all') {
+      return validComparisonResults;
+    }
+
+    const filteredResults: ComparisonResults = {};
+    
+    Object.entries(validComparisonResults).forEach(([sectionName, fields]) => {
+      let filteredFields: FieldComparison[] = [];
+      
+      if (filterType === 'normal') {
+        filteredFields = fields.filter(field => field.status === 'normal');
+      } else if (filterType === 'abnormal') {
+        filteredFields = fields.filter(field => field.status !== 'normal');
+      }
+      
+      if (filteredFields.length > 0) {
+        filteredResults[sectionName] = filteredFields;
+      }
+    });
+    
+    return filteredResults;
+  };
+
+  const filteredResults = getFilteredResults();
+
+  return (
+    <div className="bg-white rounded-lg border border-gray-200 h-[calc(100vh-120px)] flex flex-col">
+      {/* 固定头部 */}
+      <div className="flex-shrink-0 text-sm font-medium">
+        <div className="review-panel-header py-2 px-4 flex items-center border-b border-gray-100">
+          <i className="ri-book-read-line text-primary mr-2"></i>
+          <span className="font-medium text-primary">结构比对({totalFields})</span>
+        </div>
+        
+        {/* 固定统计概览和筛选按钮 */}
+        <div className="p-4 border-b border-gray-200">
+          {/* 统计概览 */}
+          <div className="grid grid-cols-2 gap-2 text-sm mb-2">
+            <button
+              onClick={() => setFilterType('normal')}
+              className={`text-center py-2 rounded flex items-center justify-center transition-all duration-200 ${
+                filterType === 'normal' 
+                  ? 'bg-green-100 border-2 border-green-300' 
+                  : 'bg-green-50 border-2 border-transparent hover:bg-green-100'
+              }`}
+            >
+              <div className="text-green-600 mr-2">正常</div>
+              <div className="font-medium text-green-600">{normalFields}</div>
+            </button>
+            
+            <button
+              onClick={() => setFilterType('abnormal')}
+              className={`text-center py-2 rounded flex items-center justify-center transition-all duration-200 ${
+                filterType === 'abnormal' 
+                  ? 'bg-red-100 border-2 border-red-300' 
+                  : 'bg-red-50 border-2 border-transparent hover:bg-red-100'
+              }`}
+            >
+              <div className="text-red-600 mr-2">异常</div>
+              <div className="font-medium text-red-600">{abnormalFields}</div>
+            </button>
+          </div>
+          
+          {/* 筛选重置按钮 */}
+          {filterType !== 'all' && (
+            <button
+              onClick={() => setFilterType('all')}
+              className="w-full text-center py-1 text-xs text-gray-600 hover:text-gray-800 border border-gray-200 rounded hover:bg-gray-50 transition-colors"
+            >
+              显示全部 ({totalFields})
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* 滚动内容区域 */}
+      <div className="flex-1 overflow-y-auto">
+        {Object.keys(filteredResults).length === 0 ? (
+          <div className="text-center py-8 text-gray-500">
+            <i className="ri-filter-off-line text-2xl mb-2 block"></i>
+            <p>没有找到{filterType === 'normal' ? '正常' : '异常'}的字段</p>
+          </div>
+        ) : (
+          Object.entries(filteredResults).map(([sectionName, fields]) => {
+            const isExpanded = expandedSections.has(sectionName);
+            const sectionAbnormalCount = fields.filter(field => field.status !== 'normal').length;
+            
+            return (
+              <div key={sectionName} className="border-b border-gray-100 last:border-b-0">
+                {/* 章节头部 */}
+                <button
+                  onClick={() => toggleSection(sectionName)}
+                  className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center justify-between transition-colors"
+                >
+                  <div className="flex items-center">
+                    <i className={`${isExpanded ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line'} mr-2 text-gray-400 transition-transform`}></i>
+                    <span className="font-medium text-gray-900">{sectionName}</span>
+                    <span className="ml-2 text-sm text-gray-500">({fields.length})</span>
+                    {sectionAbnormalCount > 0 && filterType === 'all' && (
+                      <span className="ml-2 px-2 py-0.5 bg-red-100 text-red-600 text-xs rounded-full">
+                        {sectionAbnormalCount}异常
+                      </span>
+                    )}
+                  </div>
+                </button>
+
+                {/* 章节内容 */}
+                {isExpanded && (
+                  <div className="px-4 pb-3">
+                    {fields.map((field, index) => {
+                      const statusStyle = getStatusStyle(field.status);
+                      
+                      return (
+                        <div
+                          key={index}
+                          role="button"
+                          tabIndex={0}
+                          onClick={() => handleFieldClick(field)}
+                          onKeyDown={(e) => handleFieldKeyDown(e, field)}
+                          className={`text-sm mb-3 last:mb-0 p-2 rounded-lg border cursor-pointer transition-all duration-200 ${statusStyle.bgColor} ${statusStyle.borderColor} hover:shadow-md hover:scale-[1.02] hover:border-opacity-80 
+                          focus:outline-none focus:ring-1 ${field.status === 'normal' ? 'focus:ring-green-700' : 'focus:ring-red-700'}  focus:ring-opacity-50 ${field.status === 'normal' ? 'border-green-200' : 'border-red-200'}`}
+                        >
+                          {/* 字段名和状态 */}
+                          <div className="flex items-center justify-between mb-1">
+                            <div className="flex items-center">
+                              <span className="font-medium text-gray-900">{field.field}</span>
+                            </div>
+                            <span className={`text-xs px-2 py-1 rounded-full ${
+                              field.status === 'normal' 
+                                ? 'bg-green-100 text-green-700' 
+                                : 'bg-red-100 text-red-700'
+                            }`}>
+                              {field.status === 'normal' ? '正常' : '异常'}
+                            </span>
+                          </div>
+
+                          {/* 详细说明 */}
+                          <p className="text-sm text-gray-600 mb-3">{field.details}</p>
+
+                          {/* 页码信息 */}
+                          <div className="flex items-center gap-4 text-xs">
+                            {field.source_page ? (
+                              <div className="flex items-center text-blue-600">
+                                <i className="ri-file-text-line mr-1"></i>
+                                主文件: 第{field.source_page}页
+                              </div>
+                            ) : (
+                              <div className="flex items-center text-gray-400">
+                                <i className="ri-file-text-line mr-1"></i>
+                                主文件: 未找到内容
+                              </div>
+                            )}
+                            
+                            {field.template_page ? (
+                              <div className="flex items-center text-purple-600">
+                                <i className="ri-file-copy-line mr-1"></i>
+                                模板: 第{field.template_page}页
+                              </div>
+                            ) : (
+                              <div className="flex items-center text-gray-400">
+                                <i className="ri-file-copy-line mr-1"></i>
+                                模板: 未找到内容
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* 底部说明 */}
+      {/* <div className="flex-shrink-0 px-4 py-3 bg-gray-50 text-xs text-gray-500 rounded-b-lg border-t border-gray-100">
+        <div className="flex items-center">
+          <i className="ri-information-line mr-1"></i>
+          点击字段框可同时跳转到主文件和模板对应页面
+        </div>
+      </div> */}
+    </div>
+  );
+}