|
|
import { useState, useEffect, useRef } from 'react';
|
|
|
import { motion } from 'framer-motion';
|
|
|
import {
|
|
|
Upload,
|
|
|
FileSpreadsheet,
|
|
|
Database,
|
|
|
History,
|
|
|
CheckCircle,
|
|
|
AlertCircle,
|
|
|
X,
|
|
|
Download,
|
|
|
Calendar,
|
|
|
Settings
|
|
|
} from 'lucide-react';
|
|
|
import { adminApi, createSyncTaskWebSocket } from '@/services/adminApi';
|
|
|
|
|
|
interface ImportTask {
|
|
|
id: string;
|
|
|
type: 'stock' | 'sector' | 'trade' | 'kline';
|
|
|
name: string;
|
|
|
fileName: string;
|
|
|
status: 'pending' | 'processing' | 'completed' | 'error';
|
|
|
progress: number;
|
|
|
totalRecords: number;
|
|
|
importedRecords: number;
|
|
|
errorMessage?: string;
|
|
|
createdAt: string;
|
|
|
}
|
|
|
|
|
|
const importTemplates = [
|
|
|
{ type: 'stock', name: '股票基础数据', format: 'CSV/Excel', fields: ['code', 'name', 'industry', 'market_cap'] },
|
|
|
{ type: 'sector', name: '版块数据', format: 'CSV/Excel', fields: ['code', 'name', 'parent_code'] },
|
|
|
{ type: 'trade', name: '交易数据', format: 'CSV/Excel', fields: ['code', 'date', 'open', 'high', 'low', 'close', 'volume'] },
|
|
|
{ type: 'kline', name: 'K线数据', format: 'CSV/Excel', fields: ['code', 'date', 'open', 'high', 'low', 'close', 'volume'] },
|
|
|
];
|
|
|
|
|
|
export default function DataImport() {
|
|
|
const [tasks, setTasks] = useState<ImportTask[]>([]);
|
|
|
const [loading, setLoading] = useState(true);
|
|
|
const [dragActive, setDragActive] = useState(false);
|
|
|
const [selectedType, setSelectedType] = useState<string>('stock');
|
|
|
const [showTemplateModal, setShowTemplateModal] = useState(false);
|
|
|
const [uploading, setUploading] = useState(false);
|
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
const wsRef = useRef<WebSocket | null>(null);
|
|
|
|
|
|
useEffect(() => {
|
|
|
fetchTasks();
|
|
|
}, []);
|
|
|
|
|
|
useEffect(() => {
|
|
|
return () => {
|
|
|
if (wsRef.current) {
|
|
|
wsRef.current.close();
|
|
|
}
|
|
|
};
|
|
|
}, []);
|
|
|
|
|
|
const fetchTasks = async () => {
|
|
|
setLoading(true);
|
|
|
try {
|
|
|
const data = await adminApi.getImportTasks();
|
|
|
setTasks(data.map(t => ({
|
|
|
id: t.id,
|
|
|
type: 'stock' as const,
|
|
|
name: t.name,
|
|
|
fileName: t.fileName,
|
|
|
status: t.status as ImportTask['status'],
|
|
|
progress: t.progress,
|
|
|
totalRecords: t.totalRecords,
|
|
|
importedRecords: t.importedRecords,
|
|
|
createdAt: t.createdAt,
|
|
|
})));
|
|
|
} catch (error) {
|
|
|
console.error('Failed to fetch tasks:', error);
|
|
|
} finally {
|
|
|
setLoading(false);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleDrag = (e: React.DragEvent) => {
|
|
|
e.preventDefault();
|
|
|
e.stopPropagation();
|
|
|
if (e.type === 'dragenter' || e.type === 'dragover') {
|
|
|
setDragActive(true);
|
|
|
} else if (e.type === 'dragleave') {
|
|
|
setDragActive(false);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
|
e.preventDefault();
|
|
|
e.stopPropagation();
|
|
|
setDragActive(false);
|
|
|
|
|
|
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
|
|
handleFile(e.dataTransfer.files[0]);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleFile = async (file: File) => {
|
|
|
setUploading(true);
|
|
|
|
|
|
try {
|
|
|
const result = await adminApi.uploadImportFile(file, selectedType);
|
|
|
|
|
|
// 添加新任务到列表
|
|
|
const newTask: ImportTask = {
|
|
|
id: result.taskId,
|
|
|
type: selectedType as ImportTask['type'],
|
|
|
name: importTemplates.find(t => t.type === selectedType)?.name || '数据导入',
|
|
|
fileName: file.name,
|
|
|
status: 'pending',
|
|
|
progress: 0,
|
|
|
totalRecords: 0,
|
|
|
importedRecords: 0,
|
|
|
createdAt: new Date().toLocaleString('zh-CN'),
|
|
|
};
|
|
|
|
|
|
setTasks(prev => [newTask, ...prev]);
|
|
|
|
|
|
// 连接 WebSocket 获取进度
|
|
|
connectWebSocket(result.taskId, newTask.id);
|
|
|
} catch (error: any) {
|
|
|
alert('上传失败: ' + error.message);
|
|
|
} finally {
|
|
|
setUploading(false);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const connectWebSocket = (serverTaskId: string, localTaskId: string) => {
|
|
|
if (wsRef.current) {
|
|
|
wsRef.current.close();
|
|
|
}
|
|
|
|
|
|
const ws = createSyncTaskWebSocket(serverTaskId);
|
|
|
|
|
|
ws.onmessage = (event) => {
|
|
|
const data = JSON.parse(event.data);
|
|
|
|
|
|
setTasks(prev => prev.map(t =>
|
|
|
t.id === localTaskId ? {
|
|
|
...t,
|
|
|
status: data.status,
|
|
|
progress: data.progress,
|
|
|
totalRecords: data.totalRecords || t.totalRecords,
|
|
|
importedRecords: data.processedRecords || t.importedRecords,
|
|
|
errorMessage: data.error,
|
|
|
} : t
|
|
|
));
|
|
|
|
|
|
if (data.status === 'completed' || data.status === 'failed') {
|
|
|
ws.close();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
ws.onerror = (error) => {
|
|
|
console.error('WebSocket error:', error);
|
|
|
};
|
|
|
|
|
|
wsRef.current = ws;
|
|
|
};
|
|
|
|
|
|
const handleDeleteTask = (taskId: string) => {
|
|
|
setTasks(prev => prev.filter(t => t.id !== taskId));
|
|
|
};
|
|
|
|
|
|
const getStatusIcon = (status: ImportTask['status']) => {
|
|
|
switch (status) {
|
|
|
case 'completed':
|
|
|
return <CheckCircle className="w-5 h-5 text-green-400" />;
|
|
|
case 'error':
|
|
|
return <AlertCircle className="w-5 h-5 text-red-400" />;
|
|
|
case 'processing':
|
|
|
return <div className="w-5 h-5 border-2 border-[#ff6b35] border-t-transparent rounded-full animate-spin" />;
|
|
|
default:
|
|
|
return <div className="w-5 h-5 rounded-full border-2 border-[#666]" />;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const downloadTemplate = (type: string) => {
|
|
|
const template = importTemplates.find(t => t.type === type);
|
|
|
if (!template) return;
|
|
|
|
|
|
const headers = template.fields.join(',');
|
|
|
const sample = template.fields.map(() => '示例数据').join(',');
|
|
|
const content = `${headers}\n${sample}`;
|
|
|
|
|
|
const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
|
|
|
const link = document.createElement('a');
|
|
|
link.href = URL.createObjectURL(blob);
|
|
|
link.download = `${type}_template.csv`;
|
|
|
link.click();
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="space-y-6">
|
|
|
{/* Header */}
|
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
|
<div>
|
|
|
<h1 className="text-2xl font-bold text-white">数据导入</h1>
|
|
|
<p className="text-[#b0b0b0] mt-1">批量导入股票、交易历史等数据</p>
|
|
|
</div>
|
|
|
<button
|
|
|
onClick={() => setShowTemplateModal(true)}
|
|
|
className="flex items-center gap-2 px-4 py-2 bg-[#2a2a2a] text-white rounded-lg hover:bg-[#333] transition-colors"
|
|
|
>
|
|
|
<Download className="w-4 h-4" />
|
|
|
下载模板
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
{/* Upload Area */}
|
|
|
<motion.div
|
|
|
initial={{ opacity: 0, y: 20 }}
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
className={`bg-[#111111] border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
|
|
|
dragActive ? 'border-[#ff6b35] bg-[#ff6b35]/5' : 'border-[#2a2a2a]'
|
|
|
}`}
|
|
|
onDragEnter={handleDrag}
|
|
|
onDragLeave={handleDrag}
|
|
|
onDragOver={handleDrag}
|
|
|
onDrop={handleDrop}
|
|
|
>
|
|
|
<input
|
|
|
ref={fileInputRef}
|
|
|
type="file"
|
|
|
accept=".csv,.xlsx,.xls"
|
|
|
onChange={(e) => e.target.files?.[0] && handleFile(e.target.files[0])}
|
|
|
className="hidden"
|
|
|
/>
|
|
|
|
|
|
<div className="w-16 h-16 bg-[#ff6b35]/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
|
{uploading ? (
|
|
|
<div className="w-8 h-8 border-2 border-[#ff6b35] border-t-transparent rounded-full animate-spin" />
|
|
|
) : (
|
|
|
<Upload className="w-8 h-8 text-[#ff6b35]" />
|
|
|
)}
|
|
|
</div>
|
|
|
|
|
|
<p className="text-white text-lg mb-2">
|
|
|
{uploading ? '上传中...' : '拖拽文件到此处上传'}
|
|
|
</p>
|
|
|
<p className="text-[#666] text-sm mb-4">支持 CSV、Excel 格式文件</p>
|
|
|
|
|
|
{/* Data Type Selector */}
|
|
|
<div className="flex flex-wrap justify-center gap-2 mb-4">
|
|
|
{importTemplates.map(template => (
|
|
|
<button
|
|
|
key={template.type}
|
|
|
onClick={() => setSelectedType(template.type)}
|
|
|
disabled={uploading}
|
|
|
className={`px-4 py-2 rounded-lg text-sm transition-colors disabled:opacity-50 ${
|
|
|
selectedType === template.type
|
|
|
? 'bg-[#ff6b35] text-white'
|
|
|
: 'bg-[#2a2a2a] text-[#b0b0b0] hover:bg-[#333]'
|
|
|
}`}
|
|
|
>
|
|
|
{template.name}
|
|
|
</button>
|
|
|
))}
|
|
|
</div>
|
|
|
|
|
|
<button
|
|
|
onClick={() => fileInputRef.current?.click()}
|
|
|
disabled={uploading}
|
|
|
className="px-6 py-2 bg-[#ff6b35] text-white rounded-lg hover:bg-[#ff6b35]/90 transition-colors disabled:opacity-50"
|
|
|
>
|
|
|
选择文件
|
|
|
</button>
|
|
|
</motion.div>
|
|
|
|
|
|
{/* Import Tasks */}
|
|
|
<motion.div
|
|
|
initial={{ opacity: 0, y: 20 }}
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
className="bg-[#111111] border border-[#2a2a2a] rounded-xl overflow-hidden"
|
|
|
>
|
|
|
<div className="px-5 py-4 border-b border-[#2a2a2a] flex items-center justify-between">
|
|
|
<div className="flex items-center gap-3">
|
|
|
<History className="w-5 h-5 text-[#ff6b35]" />
|
|
|
<h2 className="text-white font-semibold">导入记录</h2>
|
|
|
</div>
|
|
|
<div className="flex gap-2">
|
|
|
<button
|
|
|
onClick={fetchTasks}
|
|
|
disabled={loading}
|
|
|
className="p-2 hover:bg-[#2a2a2a] rounded-lg transition-colors disabled:opacity-50"
|
|
|
>
|
|
|
<RefreshCw className={`w-4 h-4 text-[#666] ${loading ? 'animate-spin' : ''}`} />
|
|
|
</button>
|
|
|
<button
|
|
|
onClick={() => setTasks([])}
|
|
|
className="text-sm text-[#666] hover:text-white transition-colors"
|
|
|
>
|
|
|
清空记录
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="divide-y divide-[#2a2a2a]">
|
|
|
{loading ? (
|
|
|
<div className="p-8 text-center text-[#b0b0b0]">
|
|
|
<RefreshCw className="w-6 h-6 animate-spin mx-auto mb-2" />
|
|
|
加载中...
|
|
|
</div>
|
|
|
) : tasks.length === 0 ? (
|
|
|
<div className="p-8 text-center text-[#666]">
|
|
|
暂无导入记录
|
|
|
</div>
|
|
|
) : (
|
|
|
tasks.map((task) => (
|
|
|
<div key={task.id} className="p-5 hover:bg-[#1a1a1a] transition-colors">
|
|
|
<div className="flex items-start justify-between">
|
|
|
<div className="flex items-start gap-4">
|
|
|
{getStatusIcon(task.status)}
|
|
|
<div>
|
|
|
<h3 className="text-white font-medium">{task.name}</h3>
|
|
|
<p className="text-sm text-[#666] mt-1">{task.fileName}</p>
|
|
|
<div className="flex items-center gap-4 mt-2 text-xs text-[#666]">
|
|
|
<span>{task.createdAt}</span>
|
|
|
<span>类型: {task.type}</span>
|
|
|
{task.status !== 'pending' && task.totalRecords > 0 && (
|
|
|
<span>
|
|
|
记录: {task.importedRecords.toLocaleString()} / {task.totalRecords.toLocaleString()}
|
|
|
</span>
|
|
|
)}
|
|
|
</div>
|
|
|
{task.errorMessage && (
|
|
|
<p className="text-sm text-red-400 mt-2">{task.errorMessage}</p>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
onClick={() => handleDeleteTask(task.id)}
|
|
|
className="p-2 hover:bg-[#2a2a2a] rounded-lg transition-colors"
|
|
|
>
|
|
|
<X className="w-4 h-4 text-[#666]" />
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
{task.status === 'processing' && (
|
|
|
<div className="mt-4">
|
|
|
<div className="flex items-center justify-between text-sm mb-2">
|
|
|
<span className="text-[#b0b0b0]">导入进度</span>
|
|
|
<span className="text-[#ff6b35]">{task.progress.toFixed(0)}%</span>
|
|
|
</div>
|
|
|
<div className="h-2 bg-[#2a2a2a] rounded-full overflow-hidden">
|
|
|
<motion.div
|
|
|
className="h-full bg-gradient-to-r from-[#ff6b35] to-[#ff9f43]"
|
|
|
initial={{ width: 0 }}
|
|
|
animate={{ width: `${task.progress}%` }}
|
|
|
transition={{ duration: 0.3 }}
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{task.status === 'completed' && (
|
|
|
<div className="mt-4 flex items-center gap-2 text-green-400 text-sm">
|
|
|
<CheckCircle className="w-4 h-4" />
|
|
|
导入成功
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
))
|
|
|
)}
|
|
|
</div>
|
|
|
</motion.div>
|
|
|
|
|
|
{/* Import Guide */}
|
|
|
<motion.div
|
|
|
initial={{ opacity: 0, y: 20 }}
|
|
|
animate={{ opacity: 1, y: 0 }}
|
|
|
transition={{ delay: 0.2 }}
|
|
|
className="bg-[#111111] border border-[#2a2a2a] rounded-xl p-5"
|
|
|
>
|
|
|
<h2 className="text-white font-semibold mb-4">导入说明</h2>
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
|
<div className="flex items-start gap-3">
|
|
|
<div className="w-8 h-8 bg-blue-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
|
<FileSpreadsheet className="w-4 h-4 text-blue-400" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 className="text-white font-medium">文件格式</h3>
|
|
|
<p className="text-sm text-[#666] mt-1">
|
|
|
支持 CSV (.csv) 和 Excel (.xlsx, .xls) 格式，文件大小不超过 100MB
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="flex items-start gap-3">
|
|
|
<div className="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
|
<Database className="w-4 h-4 text-green-400" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 className="text-white font-medium">数据验证</h3>
|
|
|
<p className="text-sm text-[#666] mt-1">
|
|
|
系统会自动验证数据格式，错误数据将被跳过并生成报告
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="flex items-start gap-3">
|
|
|
<div className="w-8 h-8 bg-purple-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
|
<Calendar className="w-4 h-4 text-purple-400" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 className="text-white font-medium">数据去重</h3>
|
|
|
<p className="text-sm text-[#666] mt-1">
|
|
|
已存在的记录将被更新，新记录将被插入，不会重复导入
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="flex items-start gap-3">
|
|
|
<div className="w-8 h-8 bg-orange-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
|
<Settings className="w-4 h-4 text-orange-400" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 className="text-white font-medium">自动计算</h3>
|
|
|
<p className="text-sm text-[#666] mt-1">
|
|
|
导入交易数据后，系统会自动重新计算动量指标和排名
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</motion.div>
|
|
|
|
|
|
{/* Template Modal */}
|
|
|
{showTemplateModal && (
|
|
|
<motion.div
|
|
|
initial={{ opacity: 0 }}
|
|
|
animate={{ opacity: 1 }}
|
|
|
exit={{ opacity: 0 }}
|
|
|
className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
|
|
|
onClick={() => setShowTemplateModal(false)}
|
|
|
>
|
|
|
<motion.div
|
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
|
className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl w-full max-w-lg"
|
|
|
onClick={e => e.stopPropagation()}
|
|
|
>
|
|
|
<div className="p-5 border-b border-[#2a2a2a] flex items-center justify-between">
|
|
|
<h2 className="text-white font-semibold">下载导入模板</h2>
|
|
|
<button
|
|
|
onClick={() => setShowTemplateModal(false)}
|
|
|
className="p-2 hover:bg-[#2a2a2a] rounded-lg transition-colors"
|
|
|
>
|
|
|
<X className="w-5 h-5 text-[#666]" />
|
|
|
</button>
|
|
|
</div>
|
|
|
<div className="p-5 space-y-3">
|
|
|
{importTemplates.map(template => (
|
|
|
<div
|
|
|
key={template.type}
|
|
|
className="flex items-center justify-between p-4 bg-[#0a0a0a] rounded-lg"
|
|
|
>
|
|
|
<div>
|
|
|
<h3 className="text-white font-medium">{template.name}</h3>
|
|
|
<p className="text-sm text-[#666] mt-1">
|
|
|
字段: {template.fields.join(', ')}
|
|
|
</p>
|
|
|
</div>
|
|
|
<button
|
|
|
onClick={() => downloadTemplate(template.type)}
|
|
|
className="px-4 py-2 bg-[#ff6b35] text-white rounded-lg hover:bg-[#ff6b35]/90 transition-colors"
|
|
|
>
|
|
|
下载
|
|
|
</button>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</motion.div>
|
|
|
</motion.div>
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
}
|
