408 lines
15 KiB
TypeScript
408 lines
15 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Download,
|
|
Upload,
|
|
FileSpreadsheet,
|
|
Check,
|
|
X,
|
|
AlertCircle,
|
|
ChevronRight,
|
|
ChevronLeft,
|
|
} from 'lucide-react';
|
|
import { regionApi } from '@/services/api';
|
|
|
|
interface RegionOption {
|
|
id: string;
|
|
name: string;
|
|
code: string;
|
|
}
|
|
|
|
interface ExcelServerImportProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const connectionMethods = [
|
|
{ id: 'password', name: '密码认证', description: '使用用户名密码连接' },
|
|
{ id: 'key', name: '密钥认证', description: '使用SSH密钥连接' },
|
|
];
|
|
|
|
type PreviewRow = {
|
|
row: number; hostname: string; ip: string; port: number;
|
|
username: string; status: string; message: string;
|
|
};
|
|
|
|
export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
|
|
const [step, setStep] = useState(1);
|
|
const [selectedRegion, setSelectedRegion] = useState<string>('');
|
|
const [connectionMethod, setConnectionMethod] = useState<string>('password');
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const [previewData, setPreviewData] = useState<PreviewRow[]>([]);
|
|
const [regions, setRegions] = useState<RegionOption[]>([]);
|
|
|
|
// 对话框打开时拉取区域列表 // Logan.Li
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
const resp = await regionApi.list();
|
|
if (cancelled) return;
|
|
const list = resp?.list ?? [];
|
|
setRegions(
|
|
list.map((r: any) => ({
|
|
id: String(r.id ?? ''),
|
|
name: r.name ?? '',
|
|
code: r.code ?? '',
|
|
}))
|
|
);
|
|
} catch {
|
|
if (!cancelled) setRegions([]);
|
|
}
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [open]);
|
|
|
|
const handleNext = () => {
|
|
if (step === 2 && selectedFile) {
|
|
setIsUploading(true);
|
|
setTimeout(() => {
|
|
setIsUploading(false);
|
|
setPreviewData([]); // 真实解析由后端处理
|
|
setStep(step + 1);
|
|
}, 1500);
|
|
} else {
|
|
setStep(step + 1);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (step > 1) {
|
|
setStep(step - 1);
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.files && e.target.files[0]) {
|
|
setSelectedFile(e.target.files[0]);
|
|
}
|
|
};
|
|
|
|
const handleImport = () => {
|
|
setTimeout(() => {
|
|
onClose();
|
|
setStep(1);
|
|
setSelectedRegion('');
|
|
setConnectionMethod('password');
|
|
setSelectedFile(null);
|
|
setPreviewData([]);
|
|
}, 1500);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
onClose();
|
|
setStep(1);
|
|
setSelectedRegion('');
|
|
setConnectionMethod('password');
|
|
setSelectedFile(null);
|
|
setPreviewData([]);
|
|
};
|
|
|
|
const validCount = previewData.filter(d => d.status === 'valid').length;
|
|
const warningCount = previewData.filter(d => d.status === 'warning').length;
|
|
const errorCount = previewData.filter(d => d.status === 'error').length;
|
|
|
|
const steps = [
|
|
{ id: 1, title: '配置' },
|
|
{ id: 2, title: '上传' },
|
|
{ id: 3, title: '确认' },
|
|
];
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleClose}>
|
|
<DialogContent className="max-w-3xl bg-slate-900 border-slate-700 text-slate-100">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl">Excel导入服务器</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{/* Step Indicator */}
|
|
<div className="flex items-center justify-center mb-6">
|
|
{steps.map((s, index) => (
|
|
<div key={s.id} className="flex items-center">
|
|
<div className={`flex items-center justify-center w-8 h-8 rounded-full ${
|
|
step === s.id
|
|
? 'bg-blue-600 text-white'
|
|
: step > s.id
|
|
? 'bg-emerald-600 text-white'
|
|
: 'bg-slate-800 text-slate-500'
|
|
}`}>
|
|
{step > s.id ? <Check className="h-4 w-4" /> : s.id}
|
|
</div>
|
|
<span className={`ml-2 text-sm ${step === s.id ? 'text-slate-200' : 'text-slate-500'}`}>
|
|
{s.title}
|
|
</span>
|
|
{index < steps.length - 1 && (
|
|
<div className="w-12 h-0.5 bg-slate-700 mx-3" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Step 1: Configuration */}
|
|
{step === 1 && (
|
|
<div className="space-y-6">
|
|
{/* Download Template */}
|
|
<Card className="bg-slate-800 border-slate-700">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
|
|
<FileSpreadsheet className="h-5 w-5 text-emerald-400" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-slate-200">主机导入模板</p>
|
|
<p className="text-xs text-slate-500">下载Excel模板，填写服务器信息后上传</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" className="border-slate-700 text-slate-300">
|
|
<Download className="h-4 w-4 mr-2" />
|
|
下载模板
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Region Selection */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-300 mb-2">选择区域</label>
|
|
<select
|
|
value={selectedRegion}
|
|
onChange={(e) => setSelectedRegion(e.target.value)}
|
|
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
|
|
>
|
|
<option value="">请选择区域</option>
|
|
{regions.map((region) => (
|
|
<option key={region.id} value={region.id}>
|
|
{region.name} ({region.code})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Connection Method */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-300 mb-2">连接方式</label>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{connectionMethods.map((method) => (
|
|
<Card
|
|
key={method.id}
|
|
className={`cursor-pointer transition-all ${
|
|
connectionMethod === method.id
|
|
? 'border-blue-500 ring-1 ring-blue-500/30 bg-slate-800'
|
|
: 'border-slate-700 hover:border-slate-600 bg-slate-800/50'
|
|
}`}
|
|
onClick={() => setConnectionMethod(method.id)}
|
|
>
|
|
<CardContent className="p-3">
|
|
<p className="font-medium text-slate-200">{method.name}</p>
|
|
<p className="text-xs text-slate-500">{method.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Upload */}
|
|
{step === 2 && (
|
|
<div className="space-y-6">
|
|
<div
|
|
className="border-2 border-dashed border-slate-700 rounded-lg p-8 text-center hover:border-blue-500/50 transition-colors"
|
|
>
|
|
<Upload className="h-12 w-12 mx-auto mb-4 text-slate-500" />
|
|
<p className="text-slate-300 mb-2">点击或拖拽文件到此处上传</p>
|
|
<p className="text-xs text-slate-500 mb-4">支持 .xlsx, .xls 格式文件</p>
|
|
<Input
|
|
type="file"
|
|
accept=".xlsx,.xls"
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
id="excel-upload"
|
|
/>
|
|
<label htmlFor="excel-upload">
|
|
<Button variant="outline" className="border-slate-700 text-slate-300" asChild>
|
|
<span>选择文件</span>
|
|
</Button>
|
|
</label>
|
|
</div>
|
|
|
|
{selectedFile && (
|
|
<Card className="bg-slate-800 border-slate-700">
|
|
<CardContent className="p-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<FileSpreadsheet className="h-8 w-8 text-emerald-400" />
|
|
<div>
|
|
<p className="text-sm text-slate-200">{selectedFile.name}</p>
|
|
<p className="text-xs text-slate-500">{(selectedFile.size / 1024).toFixed(2)} KB</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-slate-400 hover:text-red-400"
|
|
onClick={() => setSelectedFile(null)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{isUploading && (
|
|
<div className="text-center py-4">
|
|
<div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2" />
|
|
<p className="text-slate-400 text-sm">正在解析文件...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 3: Preview & Confirm */}
|
|
{step === 3 && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-slate-400 text-sm">数据预览</p>
|
|
<div className="flex items-center gap-2">
|
|
<Badge className="bg-emerald-500/20 text-emerald-400 border-0">
|
|
<Check className="h-3 w-3 mr-1" />
|
|
{validCount} 有效
|
|
</Badge>
|
|
{warningCount > 0 && (
|
|
<Badge className="bg-amber-500/20 text-amber-400 border-0">
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
|
{warningCount} 警告
|
|
</Badge>
|
|
)}
|
|
{errorCount > 0 && (
|
|
<Badge className="bg-red-500/20 text-red-400 border-0">
|
|
<X className="h-3 w-3 mr-1" />
|
|
{errorCount} 错误
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border rounded-lg border-slate-700 overflow-hidden max-h-[350px] overflow-y-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-800 sticky top-0">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-slate-400">行号</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-slate-400">主机名</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-slate-400">IP地址</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-slate-400">端口</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-slate-400">用户名</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-slate-400">状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800">
|
|
{previewData.map((row) => (
|
|
<tr key={row.row} className="hover:bg-slate-800/50">
|
|
<td className="px-3 py-2 text-sm text-slate-500">{row.row}</td>
|
|
<td className="px-3 py-2 text-sm text-slate-200">{row.hostname || '-'}</td>
|
|
<td className="px-3 py-2 text-sm text-slate-300">{row.ip}</td>
|
|
<td className="px-3 py-2 text-sm text-slate-300">{row.port}</td>
|
|
<td className="px-3 py-2 text-sm text-slate-300">{row.username}</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex items-center gap-1">
|
|
{row.status === 'valid' && (
|
|
<Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-xs">
|
|
<Check className="h-3 w-3 mr-1" />
|
|
{row.message}
|
|
</Badge>
|
|
)}
|
|
{row.status === 'warning' && (
|
|
<Badge className="bg-amber-500/20 text-amber-400 border-0 text-xs">
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
|
{row.message}
|
|
</Badge>
|
|
)}
|
|
{row.status === 'error' && (
|
|
<Badge className="bg-red-500/20 text-red-400 border-0 text-xs">
|
|
<X className="h-3 w-3 mr-1" />
|
|
{row.message}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{errorCount > 0 && (
|
|
<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30">
|
|
<div className="flex items-center gap-2 text-red-400">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<span className="text-sm">存在 {errorCount} 条错误数据，请修正后重新上传</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<DialogFooter className="flex justify-between items-center">
|
|
<div>
|
|
{step > 1 && (
|
|
<Button variant="outline" onClick={handleBack} className="border-slate-700 text-slate-300">
|
|
<ChevronLeft className="h-4 w-4 mr-1" />
|
|
上一步
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={handleClose} className="border-slate-700 text-slate-300">
|
|
取消
|
|
</Button>
|
|
{step < 3 ? (
|
|
<Button
|
|
onClick={handleNext}
|
|
disabled={(step === 1 && !selectedRegion) || (step === 2 && !selectedFile)}
|
|
className="bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
下一步
|
|
<ChevronRight className="h-4 w-4 ml-1" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
onClick={handleImport}
|
|
disabled={errorCount > 0 || validCount === 0}
|
|
className="bg-emerald-600 hover:bg-emerald-700"
|
|
>
|
|
<Check className="h-4 w-4 mr-1" />
|
|
确认导入 ({validCount})
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|