HaHafeng
d4d33528c7
Summary: - Implement DC module Portal page with 3 tool cards - Create ToolCard component with decorative background and hover animations - Implement TaskList component with table layout and progress bars - Implement AssetLibrary component with tab switching and file cards - Complete database verification (4 tables confirmed) - Complete backend API verification (6 endpoints ready) - Optimize UI to match prototype design (V2.html) Frontend Components (~715 lines): - components/ToolCard.tsx - Tool cards with animations - components/TaskList.tsx - Recent tasks table view - components/AssetLibrary.tsx - Data asset library with tabs - hooks/useRecentTasks.ts - Task state management - hooks/useAssets.ts - Asset state management - pages/Portal.tsx - Main portal page - types/portal.ts - TypeScript type definitions Backend Verification: - Backend API: 1495 lines code verified - Database: dc_schema with 4 tables verified - API endpoints: 6 endpoints tested (templates API works) Documentation: - Database verification report - Backend API test report - Phase 1 completion summary - UI optimization report - Development task checklist - Development plan for Tool B Status: Phase 1 completed (100%), ready for browser testing Next: Phase 2 - Tool B Step 1 and 2 development
506 lines
26 KiB
TypeScript
506 lines
26 KiB
TypeScript
import React, { useState } from 'react';
|
||
import {
|
||
Table2,
|
||
Calculator,
|
||
CalendarClock,
|
||
Split,
|
||
Filter,
|
||
Download,
|
||
ArrowRight,
|
||
Trash2,
|
||
AlertCircle,
|
||
BarChart3,
|
||
Hash,
|
||
Type,
|
||
Calendar,
|
||
ChevronDown,
|
||
Undo2,
|
||
Redo2,
|
||
Save,
|
||
Wand2,
|
||
Settings,
|
||
FileUp,
|
||
Search,
|
||
ArrowLeftRight // 新增图标
|
||
} from 'lucide-react';
|
||
|
||
// --- 模拟数据 ---
|
||
const MOCK_DATA = [
|
||
{ id: 'P001', age: 45, gender: 'Male', bmi: 24.5, admission_date: '2023-01-12', lab_val: '4.5' },
|
||
{ id: 'P002', age: 62, gender: 'Female', bmi: 28.1, admission_date: '2023-01-15', lab_val: '5.1' },
|
||
{ id: 'P003', age: 205, gender: 'Male', bmi: null, admission_date: '2023-02-01', lab_val: '<0.1' },
|
||
{ id: 'P004', age: 58, gender: 'F', bmi: 22.4, admission_date: '2023-02-10', lab_val: '4.8' },
|
||
{ id: 'P005', age: 34, gender: 'Male', bmi: 21.0, admission_date: '2023-03-05', lab_val: '5.2' },
|
||
{ id: 'P006', age: 71, gender: 'Female', bmi: 30.5, admission_date: '2023-03-12', lab_val: '6.0' },
|
||
{ id: 'P007', age: null, gender: 'Male', bmi: 25.3, admission_date: '2023-04-01', lab_val: '4.9' },
|
||
{ id: 'P008', age: 49, gender: 'Male', bmi: 26.8, admission_date: '2023-04-05', lab_val: '5.5' },
|
||
{ id: 'P009', age: 55, gender: 'Female', bmi: 23.9, admission_date: '2023-04-10', lab_val: '4.2' },
|
||
{ id: 'P010', age: 66, gender: 'Male', bmi: 29.1, admission_date: '2023-04-12', lab_val: '5.8' },
|
||
];
|
||
|
||
const COLUMNS = [
|
||
{ id: 'id', name: '病人ID', type: 'text', locked: true },
|
||
{ id: 'age', name: '年龄', type: 'number' },
|
||
{ id: 'gender', name: '性别', type: 'category' },
|
||
{ id: 'bmi', name: 'BMI指数', type: 'number' },
|
||
{ id: 'admission_date', name: '入院日期', type: 'date' },
|
||
{ id: 'lab_val', name: '肌酐', type: 'text' },
|
||
];
|
||
|
||
const ToolC_EditorV2 = () => {
|
||
const [selectedColId, setSelectedColId] = useState<string | null>(null);
|
||
const [showSidebar, setShowSidebar] = useState(false);
|
||
const [showModal, setShowModal] = useState<'calc' | 'recode' | 'pivot' | null>(null); // 新增 pivot 状态
|
||
|
||
const selectedCol = COLUMNS.find(c => c.id === selectedColId);
|
||
|
||
const handleColClick = (colId: string) => {
|
||
if (selectedColId === colId) {
|
||
setShowSidebar(!showSidebar);
|
||
} else {
|
||
setSelectedColId(colId);
|
||
setShowSidebar(true);
|
||
}
|
||
};
|
||
|
||
// --- 组件：顶部工具按钮 ---
|
||
const ToolbarButton = ({
|
||
icon: Icon,
|
||
label,
|
||
desc,
|
||
colorClass = "text-slate-600 bg-slate-50 hover:bg-slate-100",
|
||
onClick
|
||
}: { icon: any, label: string, desc: string, colorClass?: string, onClick?: () => void }) => (
|
||
<button
|
||
onClick={onClick}
|
||
className="relative group flex flex-col items-center justify-center w-24 h-16 rounded-lg transition-all hover:shadow-sm"
|
||
>
|
||
<div className={`p-2 rounded-lg mb-1 ${colorClass}`}>
|
||
<Icon className="w-5 h-5" />
|
||
</div>
|
||
<span className="text-[11px] font-medium text-slate-600">{label}</span>
|
||
|
||
{/* Custom Tooltip */}
|
||
<div className="absolute top-full mt-2 px-3 py-2 bg-slate-800 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-50">
|
||
{desc}
|
||
<div className="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-slate-800 rotate-45"></div>
|
||
</div>
|
||
</button>
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-slate-50 font-sans text-slate-800 flex flex-col relative overflow-hidden">
|
||
|
||
{/* 1. Header (基础操作) */}
|
||
<header className="bg-white border-b border-slate-200 h-14 flex items-center justify-between px-4 z-30">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center text-emerald-600">
|
||
<Table2 className="w-5 h-5" />
|
||
</div>
|
||
<span className="font-bold text-slate-900">科研数据编辑器</span>
|
||
<div className="h-4 w-[1px] bg-slate-300 mx-2"></div>
|
||
<span className="text-xs text-slate-500">肺癌数据集_2023.csv (未保存)</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-full" title="撤销"><Undo2 className="w-4 h-4" /></button>
|
||
<button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-full" title="重做"><Redo2 className="w-4 h-4" /></button>
|
||
<div className="h-4 w-[1px] bg-slate-300 mx-2"></div>
|
||
<button className="flex items-center gap-2 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg text-xs font-medium hover:bg-slate-200">
|
||
<Save className="w-3 h-3" /> 保存快照
|
||
</button>
|
||
<button className="flex items-center gap-2 px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-xs font-medium hover:bg-emerald-700 shadow-sm">
|
||
<Download className="w-3 h-3" /> 导出分析
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 2. Top Toolbar (扁平化核心功能) */}
|
||
<div className="bg-white border-b border-slate-200 px-6 py-2 flex items-center gap-2 overflow-x-auto">
|
||
|
||
<ToolbarButton
|
||
icon={Calculator}
|
||
label="生成新变量"
|
||
desc="使用公式计算生成新列 (如 BMI = 体重/身高²)"
|
||
colorClass="bg-emerald-50 text-emerald-600 group-hover:bg-emerald-100"
|
||
onClick={() => setShowModal('calc')}
|
||
/>
|
||
|
||
<ToolbarButton
|
||
icon={CalendarClock}
|
||
label="计算时间差"
|
||
desc="计算两个日期之间的天数/年数 (如 年龄、住院天数)"
|
||
colorClass="bg-blue-50 text-blue-600 group-hover:bg-blue-100"
|
||
/>
|
||
|
||
{/* 新增：长宽转换按钮 */}
|
||
<ToolbarButton
|
||
icon={ArrowLeftRight}
|
||
label="长宽转换"
|
||
desc="将'一人多行'转换为'一人一行' (透视/Pivot)"
|
||
colorClass="bg-blue-50 text-blue-600 group-hover:bg-blue-100"
|
||
onClick={() => setShowModal('pivot')}
|
||
/>
|
||
|
||
<div className="w-[1px] h-10 bg-slate-200 mx-2"></div>
|
||
|
||
<ToolbarButton
|
||
icon={FileUp}
|
||
label="拆分数据集"
|
||
desc="按某一列的值将数据拆分为多个文件或 Sheet"
|
||
colorClass="bg-purple-50 text-purple-600 group-hover:bg-purple-100"
|
||
/>
|
||
|
||
<div className="w-[1px] h-10 bg-slate-200 mx-2"></div>
|
||
|
||
<ToolbarButton
|
||
icon={AlertCircle}
|
||
label="跨列规则检查"
|
||
desc="自定义逻辑规则 (如: 男性不能有孕产史) 并标记错误行"
|
||
colorClass="bg-orange-50 text-orange-600 group-hover:bg-orange-100"
|
||
/>
|
||
|
||
<ToolbarButton
|
||
icon={Filter}
|
||
label="构建入排标准"
|
||
desc="组合多重筛选条件，生成最终分析集 (Cohort Selection)"
|
||
colorClass="bg-indigo-50 text-indigo-600 group-hover:bg-indigo-100"
|
||
/>
|
||
|
||
<div className="w-[1px] h-10 bg-slate-200 mx-2"></div>
|
||
|
||
<div className="flex-1"></div> {/* Spacer */}
|
||
|
||
<div className="relative">
|
||
<Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
|
||
<input type="text" placeholder="搜索值..." className="pl-9 pr-4 py-1.5 text-sm border border-slate-200 rounded-full focus:border-emerald-500 outline-none" />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* 3. Main Grid Area */}
|
||
<div className="flex-1 relative overflow-hidden bg-slate-100 flex">
|
||
|
||
{/* Grid */}
|
||
<div className="flex-1 overflow-auto p-6 transition-all duration-300" style={{ marginRight: showSidebar ? '320px' : '0' }}>
|
||
<div className="bg-white border border-slate-200 shadow-sm rounded-lg overflow-hidden min-w-[800px]">
|
||
<div className="flex bg-slate-50 border-b border-slate-200 sticky top-0 z-10">
|
||
{COLUMNS.map((col) => (
|
||
<div
|
||
key={col.id}
|
||
className={`h-10 px-4 flex items-center justify-between border-r border-slate-200 text-xs font-bold text-slate-600 cursor-pointer hover:bg-slate-100 transition-colors ${selectedColId === col.id ? 'bg-emerald-50 text-emerald-700' : ''}`}
|
||
style={{ width: col.id === 'id' ? '100px' : '150px' }}
|
||
onClick={() => handleColClick(col.id)}
|
||
>
|
||
<div className="flex items-center gap-1.5">
|
||
{col.type === 'number' && <Hash className="w-3 h-3 text-slate-400" />}
|
||
{col.type === 'text' && <Type className="w-3 h-3 text-slate-400" />}
|
||
{col.type === 'category' && <Split className="w-3 h-3 text-slate-400" />}
|
||
{col.type === 'date' && <Calendar className="w-3 h-3 text-slate-400" />}
|
||
{col.name}
|
||
</div>
|
||
<ChevronDown className="w-3 h-3 text-slate-300" />
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="divide-y divide-slate-100 text-sm text-slate-700">
|
||
{MOCK_DATA.map((row, idx) => (
|
||
<div key={idx} className="flex hover:bg-slate-50 transition-colors">
|
||
{COLUMNS.map((col) => {
|
||
const val = row[col.id as keyof typeof row];
|
||
const isNull = val === null || val === '';
|
||
const isOutlier = col.id === 'age' && (val as number) > 120;
|
||
const isDirty = col.id === 'lab_val' && typeof val === 'string' && val.includes('<');
|
||
|
||
return (
|
||
<div
|
||
key={col.id}
|
||
className={`h-10 px-4 flex items-center border-r border-slate-100
|
||
${isNull ? 'bg-red-50' : ''}
|
||
${isOutlier ? 'bg-orange-100 text-orange-700 font-bold' : ''}
|
||
${isDirty ? 'text-purple-600 font-medium' : ''}
|
||
${selectedColId === col.id ? 'bg-emerald-50/30' : ''}
|
||
`}
|
||
style={{ width: col.id === 'id' ? '100px' : '150px' }}
|
||
>
|
||
{isNull ? <span className="text-[10px] text-red-400 italic">NULL</span> : val}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 4. Smart Sidebar (基于列类型的操作聚合) */}
|
||
{showSidebar && selectedCol && (
|
||
<div className="w-80 bg-white border-l border-slate-200 flex flex-col shadow-xl animate-in slide-in-from-right duration-300 absolute right-0 top-0 bottom-0 z-20">
|
||
|
||
{/* Header */}
|
||
<div className="p-4 border-b border-slate-100 bg-slate-50 flex justify-between items-start">
|
||
<div>
|
||
<div className="text-xs text-slate-500 uppercase tracking-wider mb-1">当前选中列</div>
|
||
<h3 className="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||
{selectedCol.name}
|
||
<span className="px-2 py-0.5 bg-slate-200 text-slate-600 text-[10px] rounded-full font-mono">{selectedCol.id}</span>
|
||
</h3>
|
||
</div>
|
||
<button onClick={() => setShowSidebar(false)} className="text-slate-400 hover:text-slate-600">
|
||
<ArrowRight className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-4 space-y-6">
|
||
|
||
{/* A. 数值列操作 */}
|
||
{selectedCol.type === 'number' && (
|
||
<>
|
||
<div className="space-y-3">
|
||
<h4 className="text-sm font-bold text-slate-800 flex items-center gap-2">
|
||
<BarChart3 className="w-4 h-4 text-slate-500" /> 分布直方图
|
||
</h4>
|
||
{/* 图表 */}
|
||
<div className="h-24 flex items-end gap-1 px-2 border-b border-slate-200 pb-1">
|
||
{[10, 25, 45, 80, 50, 30, 15, 5, 2, 1].map((h, i) => (
|
||
<div key={i} className="flex-1 bg-emerald-200 hover:bg-emerald-400 transition-colors rounded-t-sm" style={{ height: `${h}%` }}></div>
|
||
))}
|
||
</div>
|
||
<div className="flex justify-between text-xs text-slate-400 px-1">
|
||
<span>Min: 34</span>
|
||
<span>Max: 205</span>
|
||
</div>
|
||
|
||
{/* 异常值卡片 */}
|
||
<div className="bg-orange-50 border border-orange-100 p-3 rounded-lg flex gap-3 items-start">
|
||
<AlertCircle className="w-4 h-4 text-orange-600 mt-0.5" />
|
||
<div>
|
||
<div className="text-xs font-bold text-orange-700">发现异常值</div>
|
||
<div className="text-[10px] text-orange-600 mt-1">值 <strong>205</strong> 显著偏离分布。</div>
|
||
<button className="mt-2 text-xs bg-white border border-orange-200 text-orange-700 px-2 py-1 rounded hover:bg-orange-100">
|
||
处理异常值
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h4 className="text-sm font-bold text-slate-800">针对此列的操作</h4>
|
||
<button className="w-full text-left px-3 py-3 rounded-lg bg-slate-50 hover:bg-slate-100 text-sm text-slate-700 flex items-center gap-3 border border-slate-200 hover:border-emerald-300 transition-all group">
|
||
<Split className="w-4 h-4 text-emerald-600" />
|
||
<div>
|
||
<div className="font-medium">生成分类变量 (Binning)</div>
|
||
<div className="text-[10px] text-slate-400 group-hover:text-slate-500">例如: 将年龄分为 老年/中年/青年</div>
|
||
</div>
|
||
</button>
|
||
<button className="w-full text-left px-3 py-3 rounded-lg bg-slate-50 hover:bg-slate-100 text-sm text-slate-700 flex items-center gap-3 border border-slate-200 hover:border-emerald-300 transition-all group">
|
||
<Wand2 className="w-4 h-4 text-blue-600" />
|
||
<div>
|
||
<div className="font-medium">填补缺失值</div>
|
||
<div className="text-[10px] text-slate-400 group-hover:text-slate-500">使用均值、中位数或特定值填补</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* B. 分类/文本列操作 */}
|
||
{(selectedCol.type === 'category' || selectedCol.type === 'text') && (
|
||
<>
|
||
<div className="space-y-3">
|
||
<h4 className="text-sm font-bold text-slate-800 flex items-center gap-2">
|
||
<BarChart3 className="w-4 h-4 text-slate-500" /> 频次统计
|
||
</h4>
|
||
<div className="space-y-2">
|
||
{['Male (50%)', 'Female (40%)', 'F (10%)'].map((label, i) => (
|
||
<div key={i} className="relative h-6 bg-slate-50 rounded overflow-hidden">
|
||
<div className="absolute top-0 left-0 h-full bg-emerald-100" style={{ width: label.includes('50') ? '50%' : label.includes('40') ? '40%' : '10%' }}></div>
|
||
<div className="absolute inset-0 flex items-center px-2 text-xs text-slate-700 justify-between">
|
||
<span>{label.split(' ')[0]}</span>
|
||
<span className="text-slate-400">{label.split(' ')[1]}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h4 className="text-sm font-bold text-slate-800">针对此列的操作</h4>
|
||
<button
|
||
className="w-full text-left px-3 py-3 rounded-lg bg-slate-50 hover:bg-slate-100 text-sm text-slate-700 flex items-center gap-3 border border-slate-200 hover:border-emerald-300 transition-all group"
|
||
onClick={() => setShowModal('recode')}
|
||
>
|
||
<Settings className="w-4 h-4 text-blue-600" />
|
||
<div>
|
||
<div className="font-medium">数值映射 (Recode)</div>
|
||
<div className="text-[10px] text-slate-400 group-hover:text-slate-500">例如: 将 Male->1, Female->0</div>
|
||
</div>
|
||
</button>
|
||
<button className="w-full text-left px-3 py-3 rounded-lg bg-slate-50 hover:bg-slate-100 text-sm text-slate-700 flex items-center gap-3 border border-slate-200 hover:border-emerald-300 transition-all group">
|
||
<Wand2 className="w-4 h-4 text-purple-600" />
|
||
<div>
|
||
<div className="font-medium">设为敏感字段 (脱敏)</div>
|
||
<div className="text-[10px] text-slate-400 group-hover:text-slate-500">隐藏或加密该列数据</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
|
||
{/* Modals (Mock) */}
|
||
{showModal === 'calc' && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center animate-in fade-in">
|
||
<div className="bg-white rounded-xl shadow-2xl w-[500px] overflow-hidden">
|
||
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
|
||
<h3 className="font-bold text-slate-900">生成新变量 (Formula)</h3>
|
||
<button onClick={() => setShowModal(null)}><Trash2 className="w-4 h-4 text-slate-400 rotate-45" /></button>
|
||
</div>
|
||
<div className="p-6 space-y-4">
|
||
<div>
|
||
<label className="block text-xs font-bold text-slate-500 mb-1">新变量名称</label>
|
||
<input type="text" className="w-full border p-2 rounded text-sm" placeholder="例如: BMI_Calc" defaultValue="New_Var" />
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-bold text-slate-500 mb-1">计算公式</label>
|
||
<div className="w-full h-24 border p-2 rounded bg-slate-50 font-mono text-sm text-slate-700">
|
||
[体重] / ([身高] / 100) ^ 2
|
||
</div>
|
||
<div className="flex gap-2 mt-2">
|
||
<button className="text-xs px-2 py-1 bg-slate-100 rounded hover:bg-slate-200">+ 加</button>
|
||
<button className="text-xs px-2 py-1 bg-slate-100 rounded hover:bg-slate-200">- 减</button>
|
||
<button className="text-xs px-2 py-1 bg-slate-100 rounded hover:bg-slate-200">* 乘</button>
|
||
<button className="text-xs px-2 py-1 bg-slate-100 rounded hover:bg-slate-200">/ 除</button>
|
||
<button className="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded hover:bg-purple-200">ln()</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="px-6 py-4 bg-slate-50 flex justify-end gap-3">
|
||
<button onClick={() => setShowModal(null)} className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-200 rounded-lg">取消</button>
|
||
<button onClick={() => setShowModal(null)} className="px-4 py-2 text-sm bg-emerald-600 text-white rounded-lg hover:bg-emerald-700">计算并生成</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Recode Modal */}
|
||
{showModal === 'recode' && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center animate-in fade-in">
|
||
<div className="bg-white rounded-xl shadow-2xl w-[400px] overflow-hidden">
|
||
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
|
||
<h3 className="font-bold text-slate-900">数值映射 (Recode)</h3>
|
||
<button onClick={() => setShowModal(null)}><Trash2 className="w-4 h-4 text-slate-400 rotate-45" /></button>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="text-xs text-slate-500 mb-4">将源值映射为新的统计数值：</div>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-4">
|
||
<span className="w-20 text-sm font-medium text-right">Male</span>
|
||
<ArrowRight className="w-4 h-4 text-slate-300" />
|
||
<input type="text" className="w-20 border p-1 rounded text-center" defaultValue="1" />
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<span className="w-20 text-sm font-medium text-right">Female</span>
|
||
<ArrowRight className="w-4 h-4 text-slate-300" />
|
||
<input type="text" className="w-20 border p-1 rounded text-center" defaultValue="0" />
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<span className="w-20 text-sm font-medium text-right">F</span>
|
||
<ArrowRight className="w-4 h-4 text-slate-300" />
|
||
<input type="text" className="w-20 border p-1 rounded text-center" defaultValue="0" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="px-6 py-4 bg-slate-50 flex justify-end gap-3">
|
||
<button onClick={() => setShowModal(null)} className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-200 rounded-lg">取消</button>
|
||
<button onClick={() => setShowModal(null)} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">应用映射</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 新增：Pivot Modal (长宽转换) */}
|
||
{showModal === 'pivot' && (
|
||
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center animate-in fade-in">
|
||
<div className="bg-white rounded-xl shadow-2xl w-[600px] overflow-hidden">
|
||
<div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-blue-50/50">
|
||
<div className="flex items-center gap-2">
|
||
<ArrowLeftRight className="w-5 h-5 text-blue-600" />
|
||
<div>
|
||
<h3 className="font-bold text-slate-900">长宽表转换 (Pivot)</h3>
|
||
<p className="text-xs text-slate-500">将"一人多行"转换为"一人一行"，适用于重复测量分析。</p>
|
||
</div>
|
||
</div>
|
||
<button onClick={() => setShowModal(null)}><Trash2 className="w-4 h-4 text-slate-400 rotate-45" /></button>
|
||
</div>
|
||
|
||
<div className="p-6 grid grid-cols-3 gap-6">
|
||
{/* 列 1: 主键 */}
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-bold text-slate-500 block">1. 谁是唯一ID? (行)</label>
|
||
<select className="w-full p-2 border border-slate-300 rounded text-sm bg-white">
|
||
<option>病人ID</option>
|
||
<option>姓名</option>
|
||
</select>
|
||
<p className="text-[10px] text-slate-400">转换后，每个ID只保留一行。</p>
|
||
</div>
|
||
|
||
{/* 列 2: 区分列 */}
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-bold text-slate-500 block">2. 谁是区分次序? (列后缀)</label>
|
||
<select className="w-full p-2 border border-slate-300 rounded text-sm bg-white">
|
||
<option>入院日期</option>
|
||
<option>就诊次序</option>
|
||
</select>
|
||
<p className="text-[10px] text-slate-400">生成列名如: 白细胞_20230101</p>
|
||
</div>
|
||
|
||
{/* 列 3: 值列 */}
|
||
<div className="space-y-2">
|
||
<label className="text-xs font-bold text-slate-500 block">3. 哪些值要铺平? (内容)</label>
|
||
<div className="border border-slate-300 rounded p-2 h-32 overflow-y-auto bg-slate-50 text-sm space-y-1">
|
||
<label className="flex items-center gap-2"><input type="checkbox" checked className="rounded text-blue-600" /> <span>白细胞</span></label>
|
||
<label className="flex items-center gap-2"><input type="checkbox" checked className="rounded text-blue-600" /> <span>病理报告</span></label>
|
||
<label className="flex items-center gap-2"><input type="checkbox" checked className="rounded text-blue-600" /> <span>B超结果</span></label>
|
||
<label className="flex items-center gap-2"><input type="checkbox" className="rounded text-blue-600" /> <span>年龄 (无需铺平)</span></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 预览图示 */}
|
||
<div className="px-6 pb-6">
|
||
<div className="bg-slate-50 border border-slate-200 rounded p-3">
|
||
<div className="text-xs font-bold text-slate-500 mb-2">转换预览:</div>
|
||
<div className="flex items-center gap-4 text-xs">
|
||
<div className="border p-1 bg-white text-slate-400 rounded">
|
||
ID | 时间 | 值<br/>
|
||
P1 | T1 | A<br/>
|
||
P1 | T2 | B
|
||
</div>
|
||
<ArrowRight className="w-4 h-4 text-blue-500" />
|
||
<div className="border p-1 bg-white text-blue-600 font-medium rounded shadow-sm">
|
||
ID | 值_T1 | 值_T2<br/>
|
||
P1 | A | B
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-6 py-4 bg-slate-50 flex justify-end gap-3">
|
||
<button onClick={() => setShowModal(null)} className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-200 rounded-lg">取消</button>
|
||
<button onClick={() => setShowModal(null)} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-sm">开始转换</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ToolC_EditorV2; |