AIclinicalresearch/docs/03-业务模块/DC-数据清洗整理/03-UI设计/工具A_超级合并器_原型设计.tsx

import React, { useState, useEffect } from 'react';
import { 
  UploadCloud, 
  FileSpreadsheet, 
  ArrowRight, 
  CheckCircle2, 
  AlertCircle, 
  Settings2, 
  Table2,
  CalendarClock,
  Columns,
  Download,
  Bot,
  ChevronRight,
  ChevronDown,
  Trash2,
  Info
} from 'lucide-react';

// --- 类型定义 ---
type Step = 'upload' | 'anchor' | 'columns' | 'processing' | 'result';

interface FileItem {
  id: string;
  name: string;
  size: string;
  rows: number;
  status: 'ready' | 'error';
  columns: string[];
}

const ToolA_SuperMerger = () => {
  const [currentStep, setCurrentStep] = useState<Step>('upload');
  
  // 模拟已上传的文件
  const [files, setFiles] = useState<FileItem[]>([
    { id: 'f1', name: '2023_住院记录_主表.xlsx', size: '2.4 MB', rows: 3500, status: 'ready', columns: ['住院号', '姓名', '入院日期', '出院日期', '主诊断', '科室'] },
    { id: 'f2', name: '检验科_血常规.xlsx', size: '15.1 MB', rows: 45000, status: 'ready', columns: ['病人ID', '报告时间', '白细胞', '红细胞', '血红蛋白', '审核医生'] },
    { id: 'f3', name: '超声检查报告.xlsx', size: '8.2 MB', rows: 12000, status: 'ready', columns: ['申请号', 'PatientNo', '检查时间', '超声描述', '超声提示'] },
  ]);

  // 配置状态
  const [mainFileId, setMainFileId] = useState<string>('f1');
  const [idColumn, setIdColumn] = useState<string>('住院号');
  const [timeColumn, setTimeColumn] = useState<string>('入院日期');
  const [timeWindow, setTimeWindow] = useState<string>('window'); // 'window' | 'nearest'

  // 模拟列选择状态 (默认全选)
  const [selectedCols, setSelectedCols] = useState<Record<string, string[]>>({
    'f1': ['住院号', '入院日期', '主诊断'],
    'f2': ['白细胞', '红细胞'],
    'f3': ['超声提示']
  });

  // 处理列勾选切换
  const toggleColumn = (fileId: string, col: string) => {
    setSelectedCols(prev => {
      const currentCols = prev[fileId] || [];
      const isSelected = currentCols.includes(col);
      
      let newCols;
      if (isSelected) {
        newCols = currentCols.filter(c => c !== col);
      } else {
        newCols = [...currentCols, col];
      }
      
      return {
        ...prev,
        [fileId]: newCols
      };
    });
  };

  // 处理状态
  const [progress, setProgress] = useState(0);

  // 模拟处理动画
  useEffect(() => {
    if (currentStep === 'processing') {
      const interval = setInterval(() => {
        setProgress(prev => {
          if (prev >= 100) {
            clearInterval(interval);
            setCurrentStep('result');
            return 100;
          }
          return prev + 2;
        });
      }, 50);
      return () => clearInterval(interval);
    }
  }, [currentStep]);

  // --- 渲染函数 ---

  // 步骤导航条
  const renderSteps = () => (
    <div className="flex items-center justify-center mb-8 px-4">
      {[
        { id: 'upload', label: '1. 上传数据' },
        { id: 'anchor', label: '2. 定基准(骨架)' },
        { id: 'columns', label: '3. 选列(血肉)' },
        { id: 'result', label: '4. 结果报告' }
      ].map((step, idx, arr) => (
        <React.Fragment key={step.id}>
          <div className={`flex flex-col items-center z-10 ${['processing'].includes(currentStep) && step.id === 'result' ? 'opacity-50' : ''}`}>
            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold mb-2 transition-colors
              ${currentStep === step.id ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 
                (arr.findIndex(s => s.id === currentStep) > idx || currentStep === 'result') ? 'bg-emerald-500 text-white' : 'bg-slate-200 text-slate-500'}`}>
              {(arr.findIndex(s => s.id === currentStep) > idx || currentStep === 'result') && step.id !== currentStep ? <CheckCircle2 className="w-5 h-5" /> : idx + 1}
            </div>
            <span className={`text-xs font-medium ${currentStep === step.id ? 'text-blue-700' : 'text-slate-500'}`}>{step.label}</span>
          </div>
          {idx < arr.length - 1 && (
            <div className={`h-[2px] w-16 -mt-6 mx-2 ${arr.findIndex(s => s.id === currentStep) > idx ? 'bg-emerald-500' : 'bg-slate-200'}`}></div>
          )}
        </React.Fragment>
      ))}
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 p-8">
      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-sm border border-slate-200 min-h-[600px] flex flex-col">
        
        {/* Header */}
        <div className="px-8 py-6 border-b border-slate-100 flex justify-between items-center">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
              <FileSpreadsheet className="w-6 h-6" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-slate-900">超级合并器</h1>
              <p className="text-xs text-slate-500">基于访视(Visit)的智能对齐引擎</p>
            </div>
          </div>
          <button className="text-slate-400 hover:text-slate-600">
            <Info className="w-5 h-5" />
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 p-8">
          {renderSteps()}

          {/* Step 1: Upload */}
          {currentStep === 'upload' && (
            <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
              <div className="border-2 border-dashed border-blue-200 bg-blue-50/50 rounded-xl p-10 flex flex-col items-center justify-center text-center cursor-pointer hover:bg-blue-50 transition-colors">
                <div className="w-16 h-16 bg-white rounded-full shadow-sm flex items-center justify-center mb-4 text-blue-500">
                  <UploadCloud className="w-8 h-8" />
                </div>
                <h3 className="text-lg font-medium text-slate-900">点击或拖拽上传 Excel 文件</h3>
                <p className="text-sm text-slate-500 mt-2 max-w-md">支持 .xlsx, .csv 格式。建议上传 1 个主表（如住院记录）和多个辅表（如化验、检查单）。</p>
              </div>

              <div className="space-y-3">
                <h4 className="text-sm font-bold text-slate-700 mb-2">已加载文件 ({files.length})</h4>
                {files.map(file => (
                  <div key={file.id} className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-blue-300 transition-colors">
                    <div className="flex items-center gap-3">
                      <FileSpreadsheet className="w-5 h-5 text-emerald-600" />
                      <div>
                        <div className="text-sm font-medium text-slate-900">{file.name}</div>
                        <div className="text-xs text-slate-500">{file.size} • {file.rows.toLocaleString()} 行</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="text-xs px-2 py-1 bg-emerald-50 text-emerald-700 rounded-md border border-emerald-100">表头解析成功</span>
                      <button className="text-slate-400 hover:text-red-500"><Trash2 className="w-4 h-4" /></button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Step 2: Anchor (骨架配置) */}
          {currentStep === 'anchor' && (
            <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-500">
              
              <div className="bg-blue-50 border border-blue-100 p-4 rounded-lg flex items-start gap-3">
                <Info className="w-5 h-5 text-blue-600 mt-0.5" />
                <div className="text-sm text-blue-800">
                  <span className="font-bold">为什么要选主表？</span> 主表决定了最终大表有多少行（即有多少次就诊记录）。辅表的数据将根据 <strong>ID</strong> 和 <strong>时间</strong> 挂载到主表上。
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {/* 2.1 选主表 */}
                <div className="space-y-4">
                  <h3 className="text-base font-bold text-slate-900 flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-slate-900 text-white text-xs flex items-center justify-center">A</span>
                    选择主表 (Visit Base)
                  </h3>
                  <div className="space-y-2">
                    {files.map(file => (
                      <label key={file.id} className={`flex items-center justify-between p-3 border rounded-lg cursor-pointer transition-all ${mainFileId === file.id ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500' : 'border-slate-200 hover:border-slate-300'}`}>
                        <div className="flex items-center gap-3">
                          <input type="radio" name="mainFile" className="text-blue-600" checked={mainFileId === file.id} onChange={() => setMainFileId(file.id)} />
                          <span className="text-sm font-medium text-slate-900">{file.name}</span>
                        </div>
                        {mainFileId === file.id && <span className="text-xs bg-blue-600 text-white px-2 py-0.5 rounded">主表</span>}
                      </label>
                    ))}
                  </div>
                </div>

                {/* 2.2 关键列映射 */}
                <div className="space-y-4">
                  <h3 className="text-base font-bold text-slate-900 flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-slate-900 text-white text-xs flex items-center justify-center">B</span>
                    关键列对齐
                  </h3>
                  
                  <div className="bg-slate-50 p-4 rounded-lg space-y-4 border border-slate-200">
                    <div>
                      <label className="block text-xs font-semibold text-slate-500 mb-1">主键列 (Patient ID)</label>
                      <select className="w-full p-2 border border-slate-300 rounded text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" value={idColumn} onChange={(e) => setIdColumn(e.target.value)}>
                        {files.find(f => f.id === mainFileId)?.columns.map(col => (
                          <option key={col} value={col}>{col}</option>
                        ))}
                      </select>
                      <p className="text-xs text-slate-400 mt-1">系统将自动在其他表中寻找同名或相似列进行对齐。</p>
                    </div>

                    <div>
                      <label className="block text-xs font-semibold text-slate-500 mb-1">时间基准列 (Time Anchor)</label>
                      <select className="w-full p-2 border border-slate-300 rounded text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" value={timeColumn} onChange={(e) => setTimeColumn(e.target.value)}>
                        {files.find(f => f.id === mainFileId)?.columns.map(col => (
                          <option key={col} value={col}>{col}</option>
                        ))}
                      </select>
                    </div>

                    <div className="pt-2 border-t border-slate-200">
                       <label className="block text-xs font-semibold text-slate-500 mb-2">辅表匹配策略</label>
                       <div className="flex gap-4">
                         <label className="flex items-center gap-2 cursor-pointer">
                           <input type="radio" checked={timeWindow === 'window'} onChange={() => setTimeWindow('window')} />
                           <span className="text-sm">时间窗匹配 (±7天)</span>
                         </label>
                         <label className="flex items-center gap-2 cursor-pointer">
                           <input type="radio" checked={timeWindow === 'nearest'} onChange={() => setTimeWindow('nearest')} />
                           <span className="text-sm">仅匹配最近一次</span>
                         </label>
                       </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Step 3: Columns (列选择 - 核心需求) */}
          {currentStep === 'columns' && (
            <div className="h-full flex flex-col animate-in fade-in slide-in-from-right-4 duration-500">
              <div className="mb-4">
                 <h3 className="text-lg font-bold text-slate-900">定义输出结构</h3>
                 <p className="text-sm text-slate-500">勾选您希望保留在最终大表中的列。未勾选的列将被丢弃。</p>
              </div>

              <div className="flex-1 flex border border-slate-200 rounded-xl overflow-hidden min-h-[400px]">
                {/* 左侧：源列树状选择 */}
                <div className="w-1/2 border-r border-slate-200 bg-slate-50 flex flex-col">
                  <div className="p-3 bg-white border-b border-slate-200 font-semibold text-sm text-slate-700 flex justify-between">
                    <span>源文件与列</span>
                    <span className="text-xs text-blue-600 cursor-pointer">全选</span>
                  </div>
                  <div className="flex-1 overflow-y-auto p-2 space-y-2">
                    {files.map(file => (
                      <div key={file.id} className="bg-white border border-slate-200 rounded-lg overflow-hidden">
                        <div className={`px-3 py-2 flex items-center justify-between ${file.id === mainFileId ? 'bg-blue-50' : 'bg-slate-100'}`}>
                           <div className="flex items-center gap-2">
                             <input type="checkbox" checked readOnly className="rounded text-blue-600" />
                             <span className={`text-sm font-medium ${file.id === mainFileId ? 'text-blue-700' : 'text-slate-700'}`}>
                               {file.name} {file.id === mainFileId && '(主表)'}
                             </span>
                           </div>
                           <ChevronDown className="w-4 h-4 text-slate-400" />
                        </div>
                        <div className="p-2 space-y-1">
                          {file.columns.map(col => (
                             <label key={col} className="flex items-center gap-2 px-6 py-1 hover:bg-slate-50 rounded cursor-pointer">
                               <input 
                                 type="checkbox" 
                                 checked={selectedCols[file.id]?.includes(col)} 
                                 onChange={() => toggleColumn(file.id, col)}
                                 className="rounded border-slate-300 text-blue-600 focus:ring-0"
                               />
                               <span className="text-sm text-slate-600">{col}</span>
                             </label>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 右侧：结果预览 (Schema Preview) */}
                <div className="w-1/2 bg-white flex flex-col">
                   <div className="p-3 border-b border-slate-200 font-semibold text-sm text-slate-700">
                    最终大表结构预览 (模拟一行数据)
                  </div>
                  <div className="flex-1 overflow-x-auto p-4">
                    <div className="flex gap-0 border border-slate-300 rounded shadow-sm">
                      {/* 主表列 */}
                      {files.filter(f => f.id === mainFileId).map(f => (
                         f.columns.filter(c => selectedCols[f.id]?.includes(c)).map((col, idx) => (
                           <div key={col} className={`flex-shrink-0 w-32 border-r border-slate-200 last:border-0 ${idx === 0 ? 'bg-blue-50' : 'bg-white'}`}>
                             <div className="h-8 px-2 flex items-center bg-slate-100 border-b border-slate-200 text-xs font-bold text-slate-700 truncate" title={col}>
                               {col}
                             </div>
                             <div className="h-10 px-2 flex items-center text-xs text-slate-400">
                               {col === '住院号' ? 'ZY001' : (col === '姓名' ? '张三' : '...')}
                             </div>
                           </div>
                         ))
                      ))}
                      
                      {/* 辅表列 */}
                      {files.filter(f => f.id !== mainFileId).map(f => (
                         f.columns.filter(c => selectedCols[f.id]?.includes(c)).map(col => (
                           <div key={col} className="flex-shrink-0 w-32 border-r border-slate-200 last:border-0 bg-white">
                             <div className="h-8 px-2 flex items-center bg-purple-50 border-b border-slate-200 text-xs font-bold text-purple-800 truncate" title={`${f.name.split('.')[0]}_${col}`}>
                               {col}
                             </div>
                             <div className="h-10 px-2 flex items-center text-xs text-slate-400">
                               --
                             </div>
                           </div>
                         ))
                      ))}
                    </div>
                    <div className="mt-4 text-xs text-slate-400 text-center">
                       <ArrowRight className="w-4 h-4 inline-block mr-1" />
                       横向扩展：共选中 {Object.values(selectedCols).flat().length} 列
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Step 4: Processing */}
          {currentStep === 'processing' && (
            <div className="flex flex-col items-center justify-center h-full animate-in fade-in duration-500">
               <div className="w-24 h-24 mb-6 relative">
                 <div className="absolute inset-0 border-4 border-slate-100 rounded-full"></div>
                 <div className="absolute inset-0 border-4 border-blue-600 rounded-full border-t-transparent animate-spin"></div>
               </div>
               <h3 className="text-xl font-bold text-slate-900 mb-2">正在智能合并数据...</h3>
               <p className="text-slate-500 mb-8">正在基于时间窗匹配 {files.length} 个文件的 60,500 条记录</p>
               
               <div className="w-96 bg-slate-100 rounded-full h-2 overflow-hidden">
                 <div className="bg-blue-600 h-full transition-all duration-100" style={{ width: `${progress}%` }}></div>
               </div>
               <p className="text-xs text-slate-400 mt-2">{progress}% 完成</p>
            </div>
          )}

          {/* Step 5: Result (报告与出口) */}
          {currentStep === 'result' && (
             <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
                <div className="grid grid-cols-3 gap-4 mb-6">
                  <div className="p-4 bg-emerald-50 rounded-xl border border-emerald-100 text-center">
                    <div className="text-2xl font-bold text-emerald-700">3,450</div>
                    <div className="text-xs text-emerald-600">成功生成就诊记录 (行)</div>
                  </div>
                  <div className="p-4 bg-orange-50 rounded-xl border border-orange-100 text-center">
                    <div className="text-2xl font-bold text-orange-700">12</div>
                    <div className="text-xs text-orange-600">ID 格式错误丢弃</div>
                  </div>
                  <div className="p-4 bg-blue-50 rounded-xl border border-blue-100 text-center">
                    <div className="text-2xl font-bold text-blue-700">42</div>
                    <div className="text-xs text-blue-600">生成总列数</div>
                  </div>
                </div>

                <div className="border border-slate-200 rounded-lg overflow-hidden mb-8">
                  <div className="bg-slate-50 px-4 py-2 text-xs font-bold text-slate-600 border-b border-slate-200">
                    黄金前 5 行预览 (Top 5 Preview)
                  </div>
                  <table className="w-full text-left text-xs">
                    <thead className="bg-white text-slate-500 border-b border-slate-200">
                      <tr>
                        {selectedCols['f1'].slice(0,3).map(c => <th key={c} className="px-4 py-2">{c}</th>)}
                        <th className="px-4 py-2 text-purple-600">白细胞</th>
                        <th className="px-4 py-2 text-purple-600">超声提示</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {[1,2,3,4,5].map(i => (
                        <tr key={i} className="hover:bg-slate-50">
                          <td className="px-4 py-2">ZY00{i}</td>
                          <td className="px-4 py-2">2023-01-0{i}</td>
                          <td className="px-4 py-2">肺癌</td>
                          <td className="px-4 py-2">{4+i}.5</td>
                          <td className="px-4 py-2">{i%2===0 ? '结节' : '无异常'}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                <div className="flex justify-center gap-4">
                  <button className="flex items-center gap-2 px-6 py-3 bg-white border border-slate-300 rounded-lg text-slate-700 hover:bg-slate-50 font-medium">
                    <Download className="w-4 h-4" /> 下载合并结果
                  </button>
                  <button className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-sm">
                    <Bot className="w-4 h-4" /> 发送到 AI 提取
                  </button>
                  <button className="flex items-center gap-2 px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium shadow-sm">
                    <Table2 className="w-4 h-4" /> 去编辑器清洗
                  </button>
                </div>
             </div>
          )}

        </div>

        {/* Footer Navigation */}
        {currentStep !== 'processing' && currentStep !== 'result' && (
          <div className="px-8 py-4 border-t border-slate-100 flex justify-between bg-slate-50 rounded-b-2xl">
            <button 
              className={`px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 ${currentStep === 'upload' ? 'invisible' : ''}`}
              onClick={() => {
                if(currentStep === 'anchor') setCurrentStep('upload');
                if(currentStep === 'columns') setCurrentStep('anchor');
              }}
            >
              上一步
            </button>
            <button 
              className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-sm transition-transform active:scale-95"
              onClick={() => {
                if(currentStep === 'upload') setCurrentStep('anchor');
                else if(currentStep === 'anchor') setCurrentStep('columns');
                else if(currentStep === 'columns') setCurrentStep('processing');
              }}
            >
              {currentStep === 'columns' ? '开始智能合并' : '下一步'} <ArrowRight className="w-4 h-4" />
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default ToolA_SuperMerger;