refactor: 标准化项目结构 frontend/ + backend/ + SQLite + run.sh
- 目录重构: app/ -> frontend/，与 backend/ 并列 - 数据库: 默认 SQLite（零配置），修复 DSN() bug - run.sh: 一键启动前后端，支持 start/stop/restart/status - Makefile: install/dev/build/lint/clean 快捷命令 - vite.config.ts: 配置 dev server 端口 5173 + API 代理到 8080 - config.yaml: SQLite 默认配置，开箱即用 - docs/: 完整开发文档（项目结构/API/数据库/规范/部署） - 修复: GORM foreign key 关联声明 - 修复: go get gorm.io/driver/sqlite 依赖
This commit is contained in:
attacker committed
1 parent
7d6674bddd
commit
97c4207ff8
132 files changed
+1572
-34
No files matched your search
@@ -0,0 +1,491 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Upload,
|
||||
Download,
|
||||
FileSpreadsheet,
|
||||
CheckCircle,
|
||||
AlertTriangle,
|
||||
X,
|
||||
Server,
|
||||
FileJson,
|
||||
Copy,
|
||||
Trash2,
|
||||
Play,
|
||||
RotateCw,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ImportRecord {
|
||||
id: string;
|
||||
hostname: string;
|
||||
ip: string;
|
||||
os: string;
|
||||
cpu: string;
|
||||
memory: string;
|
||||
disk: string;
|
||||
region: string;
|
||||
tags: string;
|
||||
status: 'pending' | 'valid' | 'invalid' | 'importing' | 'success' | 'error';
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export function BatchImport() {
|
||||
const [records, setRecords] = useState<ImportRecord[]>([]);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [importProgress, setImportProgress] = useState(0);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
// 模拟文件解析
|
||||
generateMockRecords();
|
||||
}, []);
|
||||
|
||||
const generateMockRecords = () => {
|
||||
const mockRecords: ImportRecord[] = [
|
||||
{
|
||||
id: '1',
|
||||
hostname: 'web-server-03',
|
||||
ip: '192.168.1.111',
|
||||
os: 'CentOS 7.9',
|
||||
cpu: '16',
|
||||
memory: '64',
|
||||
disk: '500',
|
||||
region: '华北-北京',
|
||||
tags: 'web,production',
|
||||
status: 'valid',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
hostname: 'app-server-03',
|
||||
ip: '192.168.1.112',
|
||||
os: 'Ubuntu 22.04 LTS',
|
||||
cpu: '32',
|
||||
memory: '128',
|
||||
disk: '1000',
|
||||
region: '华东-上海',
|
||||
tags: 'app,production',
|
||||
status: 'valid',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
hostname: 'cache-server-02',
|
||||
ip: '192.168.1.113',
|
||||
os: 'Ubuntu 20.04 LTS',
|
||||
cpu: '16',
|
||||
memory: '64',
|
||||
disk: '200',
|
||||
region: '华南-广州',
|
||||
tags: 'cache,redis',
|
||||
status: 'valid',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
hostname: '',
|
||||
ip: '192.168.1.114',
|
||||
os: 'CentOS 8.5',
|
||||
cpu: '8',
|
||||
memory: '32',
|
||||
disk: '500',
|
||||
region: '华北-北京',
|
||||
tags: 'test',
|
||||
status: 'invalid',
|
||||
message: '主机名不能为空',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
hostname: 'invalid-server',
|
||||
ip: 'invalid-ip',
|
||||
os: 'Ubuntu 22.04 LTS',
|
||||
cpu: '16',
|
||||
memory: '64',
|
||||
disk: '500',
|
||||
region: '华东-上海',
|
||||
tags: 'dev',
|
||||
status: 'invalid',
|
||||
message: 'IP地址格式不正确',
|
||||
},
|
||||
];
|
||||
setRecords(mockRecords);
|
||||
};
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
generateMockRecords();
|
||||
}
|
||||
};
|
||||
|
||||
const removeRecord = (id: string) => {
|
||||
setRecords(records.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
const clearAll = () => {
|
||||
setRecords([]);
|
||||
setImportProgress(0);
|
||||
};
|
||||
|
||||
const startImport = () => {
|
||||
const validRecords = records.filter((r) => r.status === 'valid');
|
||||
if (validRecords.length === 0) return;
|
||||
|
||||
setIsImporting(true);
|
||||
setImportProgress(0);
|
||||
|
||||
// 模拟导入进度
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += 10;
|
||||
setImportProgress(progress);
|
||||
|
||||
// 更新记录状态
|
||||
if (progress % 20 === 0) {
|
||||
const index = Math.floor(progress / 20) - 1;
|
||||
setRecords((prev) =>
|
||||
prev.map((r, i) =>
|
||||
i === index && r.status === 'valid' ? { ...r, status: 'importing' } : r
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
setRecords((prev) =>
|
||||
prev.map((r) => (r.status === 'importing' ? { ...r, status: 'success' } : r))
|
||||
);
|
||||
setIsImporting(false);
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const validCount = records.filter((r) => r.status === 'valid').length;
|
||||
const invalidCount = records.filter((r) => r.status === 'invalid').length;
|
||||
const successCount = records.filter((r) => r.status === 'success').length;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-100">批量导入</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">批量导入服务器资产</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
下载模板
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upload Area */}
|
||||
<Card
|
||||
className={cn(
|
||||
'border-2 border-dashed bg-slate-900/50',
|
||||
isDragging ? 'border-blue-500 bg-blue-500/5' : 'border-slate-700'
|
||||
)}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<CardContent className="p-8">
|
||||
<div className="flex flex-col items-center justify-center text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center mb-4">
|
||||
<Upload className="h-8 w-8 text-slate-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-slate-200 mb-2">拖拽文件到此处上传</h3>
|
||||
<p className="text-sm text-slate-500 mb-4">支持 Excel (.xlsx, .xls) 和 CSV 格式文件</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="file"
|
||||
accept=".xlsx,.xls,.csv"
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
id="file-upload"
|
||||
/>
|
||||
<label htmlFor="file-upload">
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300" asChild>
|
||||
<span>选择文件</span>
|
||||
</Button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Import Stats */}
|
||||
{records.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">总记录数</p>
|
||||
<p className="text-2xl font-bold text-slate-100">{records.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-slate-800 text-slate-400">
|
||||
<FileSpreadsheet className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">有效记录</p>
|
||||
<p className="text-2xl font-bold text-emerald-400">{validCount}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
||||
<CheckCircle className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">无效记录</p>
|
||||
<p className="text-2xl font-bold text-red-400">{invalidCount}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-red-500/10 text-red-400">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">导入成功</p>
|
||||
<p className="text-2xl font-bold text-blue-400">{successCount}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
|
||||
<Server className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Records Table */}
|
||||
{records.length > 0 && (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">数据预览</CardTitle>
|
||||
<CardDescription className="text-slate-500">
|
||||
请检查数据是否正确，修复无效记录后导入
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-slate-700 text-slate-300 hover:text-slate-100"
|
||||
onClick={clearAll}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
清空
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
||||
onClick={startImport}
|
||||
disabled={isImporting || validCount === 0}
|
||||
>
|
||||
{isImporting ? (
|
||||
<RotateCw className="h-4 w-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
{isImporting ? '导入中...' : '开始导入'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isImporting && (
|
||||
<div className="px-6 py-4 border-b border-slate-800">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-slate-400">导入进度</span>
|
||||
<span className="text-sm text-slate-300">{importProgress}%</span>
|
||||
</div>
|
||||
<Progress value={importProgress} className="h-2 bg-slate-800" />
|
||||
</div>
|
||||
)}
|
||||
<div className="border-t border-slate-800">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
||||
<TableHead className="text-slate-400">状态</TableHead>
|
||||
<TableHead className="text-slate-400">主机名</TableHead>
|
||||
<TableHead className="text-slate-400">IP地址</TableHead>
|
||||
<TableHead className="text-slate-400">操作系统</TableHead>
|
||||
<TableHead className="text-slate-400">配置</TableHead>
|
||||
<TableHead className="text-slate-400">区域</TableHead>
|
||||
<TableHead className="text-slate-400">标签</TableHead>
|
||||
<TableHead className="text-slate-400 text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((record) => (
|
||||
<TableRow
|
||||
key={record.id}
|
||||
className={cn(
|
||||
'border-slate-800',
|
||||
record.status === 'invalid' && 'bg-red-500/5',
|
||||
record.status === 'success' && 'bg-emerald-500/5'
|
||||
)}
|
||||
>
|
||||
<TableCell>
|
||||
{record.status === 'valid' && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10"
|
||||
>
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
有效
|
||||
</Badge>
|
||||
)}
|
||||
{record.status === 'invalid' && (
|
||||
<Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
无效
|
||||
</Badge>
|
||||
)}
|
||||
{record.status === 'importing' && (
|
||||
<Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
|
||||
<RotateCw className="h-3 w-3 mr-1 animate-spin" />
|
||||
导入中
|
||||
</Badge>
|
||||
)}
|
||||
{record.status === 'success' && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10"
|
||||
>
|
||||
<CheckCircle className="h-3 w-3 mr-1" />
|
||||
成功
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={record.hostname}
|
||||
className={cn(
|
||||
'h-8 text-sm bg-transparent border-0 border-b rounded-none px-0 focus-visible:ring-0',
|
||||
record.status === 'invalid' && !record.hostname
|
||||
? 'border-red-500 text-red-400'
|
||||
: 'border-slate-700 text-slate-200'
|
||||
)}
|
||||
placeholder="主机名"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Input
|
||||
value={record.ip}
|
||||
className={cn(
|
||||
'h-8 text-sm bg-transparent border-0 border-b rounded-none px-0 focus-visible:ring-0',
|
||||
record.status === 'invalid' && record.message?.includes('IP')
|
||||
? 'border-red-500 text-red-400'
|
||||
: 'border-slate-700 text-slate-200'
|
||||
)}
|
||||
placeholder="IP地址"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-300">{record.os}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-300">
|
||||
{record.cpu}核 / {record.memory}GB / {record.disk}GB
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-300">{record.region}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-300">{record.tags}</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-slate-400 hover:text-red-400"
|
||||
onClick={() => removeRecord(record.id)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Import Tips */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm text-slate-400">导入说明</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2 text-sm text-slate-500">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-400 mt-0.5">•</span>
|
||||
<span>支持 Excel (.xlsx, .xls) 和 CSV 格式文件</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-400 mt-0.5">•</span>
|
||||
<span>文件大小不超过 10MB，单次导入不超过 1000 条记录</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-400 mt-0.5">•</span>
|
||||
<span>必填字段：主机名、IP地址、操作系统</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-400 mt-0.5">•</span>
|
||||
<span>IP地址必须是有效的IPv4格式</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-400 mt-0.5">•</span>
|
||||
<span>标签使用逗号分隔，如：web,production,frontend</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,534 @@
|
||||
import { useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Server,
|
||||
Plus,
|
||||
Search,
|
||||
MapPin,
|
||||
Zap,
|
||||
Grid3X3,
|
||||
List,
|
||||
HardDrive,
|
||||
Network,
|
||||
Router,
|
||||
Shield,
|
||||
Database,
|
||||
Monitor,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
ArrowUp,
|
||||
ArrowDown,
|
||||
} from 'lucide-react';
|
||||
import { cabinets, devices } from '@/mocks/data';
|
||||
import type { Cabinet, Device } from '@/types';
|
||||
|
||||
export function CabinetView() {
|
||||
const [viewMode, setViewMode] = useState<'room' | 'cabinet' | 'list'>('room');
|
||||
const [selectedRoom, setSelectedRoom] = useState<string>('all');
|
||||
const [selectedCabinet, setSelectedCabinet] = useState<Cabinet | null>(null);
|
||||
const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
const rooms = Array.from(new Set(cabinets.map((c) => c.room)));
|
||||
|
||||
const filteredCabinets = cabinets.filter((cabinet) => {
|
||||
const matchesRoom = selectedRoom === 'all' || cabinet.room === selectedRoom;
|
||||
const matchesSearch = cabinet.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return matchesRoom && matchesSearch;
|
||||
});
|
||||
|
||||
const getCabinetDevices = (cabinetId: string) => {
|
||||
return devices.filter((d) => d.cabinetId === cabinetId).sort((a, b) => b.startU - a.startU);
|
||||
};
|
||||
|
||||
const getDeviceIcon = (type: Device['type']) => {
|
||||
const icons = {
|
||||
server: <Server className="h-4 w-4" />,
|
||||
switch: <Network className="h-4 w-4" />,
|
||||
router: <Router className="h-4 w-4" />,
|
||||
firewall: <Shield className="h-4 w-4" />,
|
||||
storage: <Database className="h-4 w-4" />,
|
||||
other: <Monitor className="h-4 w-4" />,
|
||||
};
|
||||
return icons[type];
|
||||
};
|
||||
|
||||
const getDeviceColor = (type: Device['type']) => {
|
||||
const colors = {
|
||||
server: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||
switch: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||
router: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
|
||||
firewall: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||||
storage: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
|
||||
other: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
|
||||
};
|
||||
return colors[type];
|
||||
};
|
||||
|
||||
const getStatusColor = (status: Cabinet['status']) => {
|
||||
const colors = {
|
||||
active: 'border-emerald-500/50 bg-emerald-500/5',
|
||||
empty: 'border-slate-600 bg-slate-800/30',
|
||||
disabled: 'border-slate-700 bg-slate-800/50 opacity-50',
|
||||
};
|
||||
return colors[status];
|
||||
};
|
||||
|
||||
// 渲染机柜正面视图
|
||||
const renderCabinetFront = (cabinet: Cabinet) => {
|
||||
const cabinetDevices = getCabinetDevices(cabinet.id);
|
||||
const uSlots: (Device | null)[] = new Array(cabinet.totalU).fill(null);
|
||||
|
||||
cabinetDevices.forEach((device) => {
|
||||
for (let i = 0; i < device.sizeU; i++) {
|
||||
const uIndex = cabinet.totalU - device.startU - i;
|
||||
if (uIndex >= 0 && uIndex < cabinet.totalU) {
|
||||
uSlots[uIndex] = device;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
{/* U位编号 */}
|
||||
<div className="flex flex-col text-xs text-slate-500">
|
||||
{Array.from({ length: cabinet.totalU }, (_, i) => (
|
||||
<div key={i} className="h-6 flex items-center justify-end pr-2">
|
||||
{cabinet.totalU - i}U
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 机柜 */}
|
||||
<div className="flex-1 border-2 border-slate-700 rounded-lg overflow-hidden bg-slate-900">
|
||||
{uSlots.map((device, index) => {
|
||||
const uNumber = cabinet.totalU - index;
|
||||
if (device) {
|
||||
const isFirstU = uNumber === device.startU + device.sizeU - 1;
|
||||
if (!isFirstU) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`device-${device.id}`}
|
||||
className={`border-b border-slate-800 flex items-center px-3 cursor-pointer hover:opacity-80 transition-opacity ${getDeviceColor(device.type)}`}
|
||||
style={{ height: `${device.sizeU * 24}px` }}
|
||||
onClick={() => setSelectedDevice(device)}
|
||||
>
|
||||
{getDeviceIcon(device.type)}
|
||||
<span className="ml-2 text-sm font-medium truncate">{device.name}</span>
|
||||
<span className="ml-auto text-xs opacity-70">{device.ip}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`empty-${index}`}
|
||||
className="h-6 border-b border-slate-800/50 hover:bg-slate-800/30 transition-colors"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-100">机房机柜视图</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">数据中心机房与机柜设备管理</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
|
||||
<MapPin className="h-4 w-4 mr-2" />
|
||||
机房管理
|
||||
</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
添加设备
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">机房数</p>
|
||||
<p className="text-2xl font-bold text-slate-100">{rooms.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
|
||||
<MapPin className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">机柜数</p>
|
||||
<p className="text-2xl font-bold text-slate-100">{cabinets.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-purple-500/10 text-purple-400">
|
||||
<Grid3X3 className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">设备数</p>
|
||||
<p className="text-2xl font-bold text-emerald-400">{devices.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
||||
<Server className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">总功率</p>
|
||||
<p className="text-2xl font-bold text-amber-400">
|
||||
{cabinets.reduce((acc, c) => acc + c.powerUsed, 0).toFixed(1)}kW
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
|
||||
<Zap className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters & View Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
||||
<Input
|
||||
placeholder="搜索机柜或设备..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
<Select value={selectedRoom} onValueChange={setSelectedRoom}>
|
||||
<SelectTrigger className="w-40 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
|
||||
<SelectValue placeholder="选择机房" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
<SelectItem value="all">全部机房</SelectItem>
|
||||
{rooms.map((room) => (
|
||||
<SelectItem key={room} value={room}>
|
||||
{room}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 bg-slate-800 rounded-lg p-1">
|
||||
<Button
|
||||
variant={viewMode === 'room' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7"
|
||||
onClick={() => setViewMode('room')}
|
||||
>
|
||||
<MapPin className="h-4 w-4 mr-1" />
|
||||
机房视图
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'cabinet' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7"
|
||||
onClick={() => setViewMode('cabinet')}
|
||||
>
|
||||
<Grid3X3 className="h-4 w-4 mr-1" />
|
||||
机柜视图
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'list' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7"
|
||||
onClick={() => setViewMode('list')}
|
||||
>
|
||||
<List className="h-4 w-4 mr-1" />
|
||||
列表视图
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* View Content */}
|
||||
{viewMode === 'room' && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
{filteredCabinets.map((cabinet) => {
|
||||
const usagePercent = (cabinet.usedU / cabinet.totalU) * 100;
|
||||
const powerPercent = (cabinet.powerUsed / cabinet.powerCapacity) * 100;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={cabinet.id}
|
||||
className={`bg-slate-900 border-2 cursor-pointer hover:shadow-lg transition-all ${getStatusColor(cabinet.status)}`}
|
||||
onClick={() => setSelectedCabinet(cabinet)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-slate-200">{cabinet.name}</span>
|
||||
{cabinet.status === 'active' && (
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<div className="flex justify-between text-xs text-slate-500 mb-1">
|
||||
<span>U位</span>
|
||||
<span>{cabinet.usedU}/{cabinet.totalU}</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
usagePercent > 80 ? 'bg-red-400' : usagePercent > 60 ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
}`}
|
||||
style={{ width: `${usagePercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-xs text-slate-500 mb-1">
|
||||
<span>功率</span>
|
||||
<span>{cabinet.powerUsed}/{cabinet.powerCapacity}kW</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
powerPercent > 80 ? 'bg-red-400' : powerPercent > 60 ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
}`}
|
||||
style={{ width: `${powerPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-1">
|
||||
<Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
|
||||
{getCabinetDevices(cabinet.id).length} 设备
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'cabinet' && selectedCabinet && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">{selectedCabinet.name}</CardTitle>
|
||||
<CardDescription className="text-slate-500">
|
||||
{selectedCabinet.room} · {selectedCabinet.usedU}/{selectedCabinet.totalU}U · {selectedCabinet.powerUsed}/{selectedCabinet.powerCapacity}kW
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => setSelectedCabinet(null)}>
|
||||
返回
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{renderCabinetFront(selectedCabinet)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-slate-100 text-base">机柜信息</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">机柜编号</p>
|
||||
<p className="text-sm text-slate-200">{selectedCabinet.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">所属机房</p>
|
||||
<p className="text-sm text-slate-200">{selectedCabinet.room}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">位置</p>
|
||||
<p className="text-sm text-slate-200">第{selectedCabinet.row}排 第{selectedCabinet.column}列</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">状态</p>
|
||||
<Badge variant="outline" className={
|
||||
selectedCabinet.status === 'active'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: 'border-slate-500/30 text-slate-400 bg-slate-500/10'
|
||||
}>
|
||||
{selectedCabinet.status === 'active' ? '使用中' : selectedCabinet.status === 'empty' ? '空闲' : '停用'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'list' && (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-0">
|
||||
<div className="border-t border-slate-800">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-800">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-slate-400">设备名称</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-slate-400">类型</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-slate-400">机柜</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-slate-400">U位</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-slate-400">IP地址</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-slate-400">状态</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-slate-400">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800">
|
||||
{devices.map((device) => (
|
||||
<tr key={device.id} className="hover:bg-slate-800/50">
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{getDeviceIcon(device.type)}
|
||||
<span className="text-sm font-medium text-slate-200">{device.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">
|
||||
{device.type}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-300">
|
||||
{cabinets.find((c) => c.id === device.cabinetId)?.name}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-300">
|
||||
{device.startU}U - {device.startU + device.sizeU - 1}U ({device.sizeU}U)
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-300">{device.ip || '--'}</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge variant="outline" className={
|
||||
device.status === 'online'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: device.status === 'offline'
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
}>
|
||||
{device.status === 'online' ? '在线' : device.status === 'offline' ? '离线' : '维护中'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Device Detail Dialog */}
|
||||
<Dialog open={!!selectedDevice} onOpenChange={() => setSelectedDevice(null)}>
|
||||
<DialogContent className="bg-slate-900 border-slate-800">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-slate-100 flex items-center gap-2">
|
||||
{selectedDevice && getDeviceIcon(selectedDevice.type)}
|
||||
{selectedDevice?.name}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-slate-500">
|
||||
{selectedDevice?.type} · {selectedDevice?.assetNo}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-slate-800/50">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">序列号</p>
|
||||
<p className="text-sm text-slate-200">{selectedDevice?.sn || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">资产编号</p>
|
||||
<p className="text-sm text-slate-200">{selectedDevice?.assetNo || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">IP地址</p>
|
||||
<p className="text-sm text-slate-200">{selectedDevice?.ip || '--'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 mb-1">状态</p>
|
||||
<Badge variant="outline" className={
|
||||
selectedDevice?.status === 'online'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: selectedDevice?.status === 'offline'
|
||||
? 'border-red-500/30 text-red-400 bg-red-500/10'
|
||||
: 'border-amber-500/30 text-amber-400 bg-amber-500/10'
|
||||
}>
|
||||
{selectedDevice?.status === 'online' ? '在线' : selectedDevice?.status === 'offline' ? '离线' : '维护中'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Server className="h-4 w-4 mr-2" />
|
||||
查看详情
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Cloud,
|
||||
Key,
|
||||
CheckCircle,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
Server,
|
||||
RefreshCw,
|
||||
Check,
|
||||
} from 'lucide-react';
|
||||
import { cloudAccounts } from '@/mocks/data';
|
||||
|
||||
interface CloudServerImportProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const cloudProviders = [
|
||||
{ id: 'aws', name: 'AWS', color: 'bg-orange-500', icon: 'AWS' },
|
||||
{ id: 'aliyun', name: '阿里云', color: 'bg-orange-600', icon: 'AL' },
|
||||
{ id: 'tencent', name: '腾讯云', color: 'bg-blue-500', icon: 'TX' },
|
||||
{ id: 'huawei', name: '华为云', color: 'bg-red-500', icon: 'HW' },
|
||||
{ id: 'azure', name: 'Azure', color: 'bg-blue-600', icon: 'AZ' },
|
||||
];
|
||||
|
||||
// Mock cloud servers data
|
||||
const mockCloudServers = [
|
||||
{ id: 'ecs-001', name: 'i-bp1a2b3c4d5e6f7g8', hostname: 'web-server-01', ip: '47.98.123.45', region: 'cn-hangzhou', status: 'running', os: 'CentOS 7.9', spec: '2核4G' },
|
||||
{ id: 'ecs-002', name: 'i-bp2b3c4d5e6f7g8h9', hostname: 'web-server-02', ip: '47.98.123.46', region: 'cn-hangzhou', status: 'running', os: 'CentOS 7.9', spec: '2核4G' },
|
||||
{ id: 'ecs-003', name: 'i-bp3c4d5e6f7g8h9i0', hostname: 'app-server-01', ip: '47.98.123.47', region: 'cn-shanghai', status: 'stopped', os: 'Ubuntu 20.04', spec: '4核8G' },
|
||||
{ id: 'ecs-004', name: 'i-bp4d5e6f7g8h9i0j1', hostname: 'db-server-01', ip: '47.98.123.48', region: 'cn-beijing', status: 'running', os: 'CentOS 8.2', spec: '8核16G' },
|
||||
{ id: 'ecs-005', name: 'i-bp5e6f7g8h9i0j1k2', hostname: 'cache-server-01', ip: '47.98.123.49', region: 'cn-hangzhou', status: 'running', os: 'CentOS 7.9', spec: '2核8G' },
|
||||
];
|
||||
|
||||
export function CloudServerImport({ open, onClose }: CloudServerImportProps) {
|
||||
const [step, setStep] = useState(1);
|
||||
const [selectedProvider, setSelectedProvider] = useState<string>('');
|
||||
const [selectedAccount, setSelectedAccount] = useState<string>('');
|
||||
const [selectedServers, setSelectedServers] = useState<string[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const filteredAccounts = cloudAccounts.filter(
|
||||
acc => acc.provider === selectedProvider && acc.status === 'active'
|
||||
);
|
||||
|
||||
const handleNext = () => {
|
||||
if (step < 3) {
|
||||
if (step === 2) {
|
||||
setIsLoading(true);
|
||||
setTimeout(() => setIsLoading(false), 1000);
|
||||
}
|
||||
setStep(step + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (step > 1) {
|
||||
setStep(step - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleServerToggle = (serverId: string) => {
|
||||
setSelectedServers(prev =>
|
||||
prev.includes(serverId)
|
||||
? prev.filter(id => id !== serverId)
|
||||
: [...prev, serverId]
|
||||
);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedServers.length === mockCloudServers.length) {
|
||||
setSelectedServers([]);
|
||||
} else {
|
||||
setSelectedServers(mockCloudServers.map(s => s.id));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport = () => {
|
||||
// Mock import action
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
setStep(1);
|
||||
setSelectedProvider('');
|
||||
setSelectedAccount('');
|
||||
setSelectedServers([]);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setStep(1);
|
||||
setSelectedProvider('');
|
||||
setSelectedAccount('');
|
||||
setSelectedServers([]);
|
||||
};
|
||||
|
||||
const steps = [
|
||||
{ id: 1, title: '公有云', icon: Cloud },
|
||||
{ id: 2, title: '访问凭据', icon: Key },
|
||||
{ id: 3, title: '导入确认', icon: CheckCircle },
|
||||
];
|
||||
|
||||
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">导入云主机</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 gap-2 px-4 py-2 rounded-lg ${
|
||||
step === s.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: step > s.id
|
||||
? 'bg-emerald-600/20 text-emerald-400'
|
||||
: 'bg-slate-800 text-slate-500'
|
||||
}`}>
|
||||
<s.icon className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">{s.title}</span>
|
||||
{step > s.id && <Check className="h-4 w-4 ml-1" />}
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<ChevronRight className="h-5 w-5 text-slate-600 mx-2" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Step 1: Select Cloud Provider */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<p className="text-slate-400 text-sm">请选择要导入云主机的云平台</p>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{cloudProviders.map((provider) => (
|
||||
<Card
|
||||
key={provider.id}
|
||||
className={`cursor-pointer transition-all ${
|
||||
selectedProvider === provider.id
|
||||
? 'border-blue-500 ring-2 ring-blue-500/30 bg-slate-800'
|
||||
: 'border-slate-700 hover:border-slate-600 bg-slate-800/50'
|
||||
}`}
|
||||
onClick={() => setSelectedProvider(provider.id)}
|
||||
>
|
||||
<CardContent className="p-4 flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg ${provider.color} flex items-center justify-center text-white font-bold text-sm`}>
|
||||
{provider.icon}
|
||||
</div>
|
||||
<span className="font-medium text-slate-200">{provider.name}</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Select Account */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-slate-400 text-sm">请选择访问凭据（AccessKey）</p>
|
||||
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300">
|
||||
<RefreshCw className="h-3 w-3 mr-1" />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{filteredAccounts.length > 0 ? (
|
||||
<div className="space-y-2 max-h-[300px] overflow-y-auto">
|
||||
{filteredAccounts.map((account) => (
|
||||
<Card
|
||||
key={account.id}
|
||||
className={`cursor-pointer transition-all ${
|
||||
selectedAccount === account.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={() => setSelectedAccount(account.id)}
|
||||
>
|
||||
<CardContent className="p-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Key className="h-5 w-5 text-blue-400" />
|
||||
<div>
|
||||
<p className="font-medium text-slate-200">{account.name}</p>
|
||||
<p className="text-xs text-slate-500">{account.accessKey.slice(0, 20)}...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Badge className="bg-emerald-500/20 text-emerald-400 border-0">
|
||||
{account.regionCount} 区域
|
||||
</Badge>
|
||||
<p className="text-xs text-slate-500 mt-1">{account.serverCount} 服务器</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-slate-500">
|
||||
<Key className="h-12 w-12 mx-auto mb-3 opacity-50" />
|
||||
<p>该云平台暂无有效的访问凭据</p>
|
||||
<Button variant="outline" className="mt-3 border-slate-700 text-slate-300">
|
||||
添加访问凭据
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Import Confirmation */}
|
||||
{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">
|
||||
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300" onClick={handleSelectAll}>
|
||||
{selectedServers.length === mockCloudServers.length ? '取消全选' : '全选'}
|
||||
</Button>
|
||||
<Badge className="bg-blue-500/20 text-blue-400 border-0">
|
||||
已选 {selectedServers.length} 台
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-center py-12">
|
||||
<RefreshCw className="h-8 w-8 mx-auto mb-3 animate-spin text-blue-400" />
|
||||
<p className="text-slate-400">正在获取云主机列表...</p>
|
||||
</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 w-10">
|
||||
<Checkbox
|
||||
checked={selectedServers.length === mockCloudServers.length && mockCloudServers.length > 0}
|
||||
onCheckedChange={handleSelectAll}
|
||||
/>
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-slate-400">实例ID</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">
|
||||
{mockCloudServers.map((server) => (
|
||||
<tr
|
||||
key={server.id}
|
||||
className={`hover:bg-slate-800/50 ${selectedServers.includes(server.id) ? 'bg-blue-500/10' : ''}`}
|
||||
>
|
||||
<td className="px-3 py-2">
|
||||
<Checkbox
|
||||
checked={selectedServers.includes(server.id)}
|
||||
onCheckedChange={() => handleServerToggle(server.id)}
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-sm text-slate-300">{server.name}</td>
|
||||
<td className="px-3 py-2 text-sm text-slate-200">{server.hostname}</td>
|
||||
<td className="px-3 py-2 text-sm text-slate-400">{server.ip}</td>
|
||||
<td className="px-3 py-2 text-sm text-slate-400">{server.region}</td>
|
||||
<td className="px-3 py-2 text-sm text-slate-400">{server.spec}</td>
|
||||
<td className="px-3 py-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={server.status === 'running'
|
||||
? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
|
||||
: 'border-slate-500/30 text-slate-400 bg-slate-500/10'
|
||||
}
|
||||
>
|
||||
{server.status === 'running' ? '运行中' : '已停止'}
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</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 && !selectedProvider) || (step === 2 && !selectedAccount)}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
下一步
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={handleImport}
|
||||
disabled={selectedServers.length === 0}
|
||||
className="bg-emerald-600 hover:bg-emerald-700"
|
||||
>
|
||||
<Check className="h-4 w-4 mr-1" />
|
||||
确认导入 ({selectedServers.length})
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,378 @@
|
||||
import { useState } 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 { regions } from '@/mocks/data';
|
||||
|
||||
interface ExcelServerImportProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const connectionMethods = [
|
||||
{ id: 'password', name: '密码认证', description: '使用用户名密码连接' },
|
||||
{ id: 'key', name: '密钥认证', description: '使用SSH密钥连接' },
|
||||
];
|
||||
|
||||
const mockPreviewData = [
|
||||
{ row: 2, hostname: 'web-server-01', ip: '192.168.1.101', port: 22, username: 'root', status: 'valid', message: '验证通过' },
|
||||
{ row: 3, hostname: 'web-server-02', ip: '192.168.1.102', port: 22, username: 'root', status: 'valid', message: '验证通过' },
|
||||
{ row: 4, hostname: 'db-server-01', ip: '192.168.1.201', port: 22, username: 'admin', status: 'warning', message: 'IP格式正确' },
|
||||
{ row: 5, hostname: '', ip: '192.168.1.999', port: 22, username: 'root', status: 'error', message: '主机名不能为空' },
|
||||
{ row: 6, hostname: 'cache-server-01', ip: '192.168.1.103', port: 22, username: 'root', status: 'valid', message: '验证通过' },
|
||||
];
|
||||
|
||||
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<typeof mockPreviewData>([]);
|
||||
|
||||
const handleNext = () => {
|
||||
if (step === 2 && selectedFile) {
|
||||
setIsUploading(true);
|
||||
setTimeout(() => {
|
||||
setIsUploading(false);
|
||||
setPreviewData(mockPreviewData);
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
import { useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Layers,
|
||||
Plus,
|
||||
Search,
|
||||
Database,
|
||||
Network,
|
||||
Server,
|
||||
HardDrive,
|
||||
Settings,
|
||||
Edit,
|
||||
Trash2,
|
||||
Eye,
|
||||
Link,
|
||||
Copy,
|
||||
ArrowRight,
|
||||
GitBranch,
|
||||
} from 'lucide-react';
|
||||
import { resourceModels, modelInstances } from '@/mocks/data';
|
||||
import type { ResourceModel, ModelInstance } from '@/types';
|
||||
|
||||
export function ResourceModelManager() {
|
||||
const [activeTab, setActiveTab] = useState('models');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedModel, setSelectedModel] = useState<ResourceModel | null>(null);
|
||||
const [selectedInstance, setSelectedInstance] = useState<ModelInstance | null>(null);
|
||||
|
||||
const filteredModels = resourceModels.filter(
|
||||
(model) =>
|
||||
model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
model.code.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
const getModelTypeBadge = (type: ResourceModel['type']) => {
|
||||
const configs = {
|
||||
normal: { label: '普通', className: 'border-blue-500/30 text-blue-400 bg-blue-500/10' },
|
||||
parent: { label: '父模型', className: 'border-purple-500/30 text-purple-400 bg-purple-500/10' },
|
||||
child: { label: '子模型', className: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10' },
|
||||
};
|
||||
const config = configs[type];
|
||||
return (
|
||||
<Badge variant="outline" className={config.className}>
|
||||
{config.label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getAttributeTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'string':
|
||||
return <span className="text-xs text-slate-400">ABC</span>;
|
||||
case 'number':
|
||||
return <span className="text-xs text-slate-400">123</span>;
|
||||
case 'boolean':
|
||||
return <span className="text-xs text-slate-400">T/F</span>;
|
||||
case 'date':
|
||||
return <span className="text-xs text-slate-400">📅</span>;
|
||||
case 'enum':
|
||||
return <span className="text-xs text-slate-400">▼</span>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-100">资源模型管理</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">CMDB资源模型定义与实例管理</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
|
||||
<Link className="h-4 w-4 mr-2" />
|
||||
关系管理
|
||||
</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新建模型
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">模型总数</p>
|
||||
<p className="text-2xl font-bold text-slate-100">{resourceModels.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
|
||||
<Layers className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">实例总数</p>
|
||||
<p className="text-2xl font-bold text-emerald-400">
|
||||
{resourceModels.reduce((acc, m) => acc + m.instanceCount, 0)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
||||
<Database className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">父模型</p>
|
||||
<p className="text-2xl font-bold text-purple-400">
|
||||
{resourceModels.filter((m) => m.type === 'parent').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-purple-500/10 text-purple-400">
|
||||
<GitBranch className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">属性总数</p>
|
||||
<p className="text-2xl font-bold text-blue-400">
|
||||
{resourceModels.reduce((acc, m) => acc + m.attributes.length, 0)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-cyan-500/10 text-cyan-400">
|
||||
<Settings className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
||||
<Input
|
||||
placeholder="搜索模型..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="bg-slate-800 border border-slate-700">
|
||||
<TabsTrigger value="models" className="data-[state=active]:bg-slate-700">
|
||||
<Layers className="h-4 w-4 mr-2" />
|
||||
模型列表
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="instances" className="data-[state=active]:bg-slate-700">
|
||||
<Database className="h-4 w-4 mr-2" />
|
||||
实例管理
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="relations" className="data-[state=active]:bg-slate-700">
|
||||
<Link className="h-4 w-4 mr-2" />
|
||||
关系视图
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="models" className="mt-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{filteredModels.map((model) => (
|
||||
<Card key={model.id} className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
|
||||
<Layers className="h-5 w-5 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base text-slate-100">{model.name}</CardTitle>
|
||||
<CardDescription className="text-slate-500">{model.code}</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{getModelTypeBadge(model.type)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-slate-400 hover:text-slate-100"
|
||||
onClick={() => setSelectedModel(model)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-slate-400 mb-3">{model.description}</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-500">属性数量</span>
|
||||
<span className="text-slate-300">{model.attributes.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-slate-500">实例数量</span>
|
||||
<span className="text-slate-300">{model.instanceCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-slate-800">
|
||||
<p className="text-xs text-slate-500 mb-2">属性预览</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{model.attributes.slice(0, 5).map((attr) => (
|
||||
<Badge key={attr.id} variant="outline" className="border-slate-700 text-slate-400 text-xs">
|
||||
{getAttributeTypeIcon(attr.type)}
|
||||
<span className="ml-1">{attr.name}</span>
|
||||
{attr.required && <span className="text-red-400 ml-0.5">*</span>}
|
||||
</Badge>
|
||||
))}
|
||||
{model.attributes.length > 5 && (
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">
|
||||
+{model.attributes.length - 5}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="instances" className="mt-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-0">
|
||||
<div className="border-t border-slate-800">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
||||
<TableHead className="text-slate-400">实例名称</TableHead>
|
||||
<TableHead className="text-slate-400">所属模型</TableHead>
|
||||
<TableHead className="text-slate-400">关键属性</TableHead>
|
||||
<TableHead className="text-slate-400">关系数</TableHead>
|
||||
<TableHead className="text-slate-400">更新时间</TableHead>
|
||||
<TableHead className="text-slate-400 text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{modelInstances.map((instance) => (
|
||||
<TableRow key={instance.id} className="border-slate-800 hover:bg-slate-800/50">
|
||||
<TableCell>
|
||||
<span className="text-sm font-medium text-slate-200">{instance.name}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400">
|
||||
{resourceModels.find((m) => m.id === instance.modelId)?.name}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{Object.entries(instance.data).slice(0, 3).map(([key, value]) => (
|
||||
<code key={key} className="text-xs text-slate-400 bg-slate-800 px-1.5 py-0.5 rounded">
|
||||
{key}: {String(value).slice(0, 15)}
|
||||
</code>
|
||||
))}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-300">{instance.relations.length}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-400">
|
||||
{new Date(instance.updatedAt).toLocaleString()}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-slate-400 hover:text-slate-100"
|
||||
onClick={() => setSelectedInstance(instance)}
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="relations" className="mt-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-8">
|
||||
<div className="text-center">
|
||||
<Link className="h-12 w-12 mx-auto text-slate-500 mb-4" />
|
||||
<h3 className="text-lg font-medium text-slate-300 mb-2">关系视图</h3>
|
||||
<p className="text-sm text-slate-500 mb-4">可视化展示资源实例之间的关系</p>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
创建关系
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* Model Detail Dialog */}
|
||||
<Dialog open={!!selectedModel} onOpenChange={() => setSelectedModel(null)}>
|
||||
<DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-slate-100 flex items-center gap-2">
|
||||
<Layers className="h-5 w-5 text-blue-400" />
|
||||
{selectedModel?.name}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-slate-500">
|
||||
{selectedModel?.code} · {selectedModel?.description}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-slate-300 mb-2">属性定义</h4>
|
||||
<div className="border rounded-lg border-slate-700 overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-slate-800">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-400">属性名</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-400">字段名</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-400">类型</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-400">必填</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-slate-400">唯一</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800">
|
||||
{selectedModel?.attributes.map((attr) => (
|
||||
<tr key={attr.id} className="hover:bg-slate-800/50">
|
||||
<td className="px-4 py-2 text-sm text-slate-200">{attr.name}</td>
|
||||
<td className="px-4 py-2 text-sm text-slate-400">{attr.code}</td>
|
||||
<td className="px-4 py-2">
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400 text-xs">
|
||||
{attr.type}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-slate-400">{attr.required ? '是' : '否'}</td>
|
||||
<td className="px-4 py-2 text-sm text-slate-400">{attr.unique ? '是' : '否'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300">
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
复制模型
|
||||
</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑模型
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Instance Detail Dialog */}
|
||||
<Dialog open={!!selectedInstance} onOpenChange={() => setSelectedInstance(null)}>
|
||||
<DialogContent className="max-w-2xl bg-slate-900 border-slate-800">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-slate-100 flex items-center gap-2">
|
||||
<Database className="h-5 w-5 text-emerald-400" />
|
||||
{selectedInstance?.name}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-slate-500">
|
||||
模型: {resourceModels.find((m) => m.id === selectedInstance?.modelId)?.name}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-slate-300 mb-2">属性数据</h4>
|
||||
<div className="grid grid-cols-2 gap-3 p-4 rounded-lg bg-slate-800/50">
|
||||
{selectedInstance && Object.entries(selectedInstance.data).map(([key, value]) => (
|
||||
<div key={key}>
|
||||
<p className="text-xs text-slate-500 mb-1">{key}</p>
|
||||
<p className="text-sm text-slate-200">{String(value)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedInstance && selectedInstance.relations.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-slate-300 mb-2">关联关系</h4>
|
||||
<div className="space-y-2">
|
||||
{selectedInstance.relations.map((rel, index) => (
|
||||
<div key={index} className="flex items-center gap-2 p-2 rounded-lg bg-slate-800/50">
|
||||
<span className="text-sm text-slate-300">{rel.relationType}</span>
|
||||
<ArrowRight className="h-4 w-4 text-slate-500" />
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400">
|
||||
{rel.targetInstanceId}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300">
|
||||
<Link className="h-4 w-4 mr-2" />
|
||||
管理关系
|
||||
</Button>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑实例
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,467 @@
|
||||
import { useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Search,
|
||||
Plus,
|
||||
MoreHorizontal,
|
||||
Terminal,
|
||||
Power,
|
||||
RotateCw,
|
||||
Trash2,
|
||||
Edit,
|
||||
Eye,
|
||||
Download,
|
||||
Upload,
|
||||
Filter,
|
||||
Server,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Activity,
|
||||
CheckSquare,
|
||||
Square,
|
||||
Cloud,
|
||||
FileSpreadsheet,
|
||||
} from 'lucide-react';
|
||||
import { servers } from '@/mocks/data';
|
||||
import type { Server as ServerType } from '@/types';
|
||||
import { CloudServerImport } from './CloudServerImport';
|
||||
import { ExcelServerImport } from './ExcelServerImport';
|
||||
|
||||
export function ServerManager() {
|
||||
const [selectedServers, setSelectedServers] = useState<string[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
const [regionFilter, setRegionFilter] = useState<string>('all');
|
||||
const [cloudImportOpen, setCloudImportOpen] = useState(false);
|
||||
const [excelImportOpen, setExcelImportOpen] = useState(false);
|
||||
|
||||
const filteredServers = servers.filter((server) => {
|
||||
const matchesSearch =
|
||||
server.hostname.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
server.ip.includes(searchQuery);
|
||||
const matchesStatus = statusFilter === 'all' || server.status === statusFilter;
|
||||
const matchesRegion = regionFilter === 'all' || server.region === regionFilter;
|
||||
return matchesSearch && matchesStatus && matchesRegion;
|
||||
});
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (selectedServers.length === filteredServers.length) {
|
||||
setSelectedServers([]);
|
||||
} else {
|
||||
setSelectedServers(filteredServers.map((s) => s.id));
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSelect = (id: string) => {
|
||||
if (selectedServers.includes(id)) {
|
||||
setSelectedServers(selectedServers.filter((s) => s !== id));
|
||||
} else {
|
||||
setSelectedServers([...selectedServers, id]);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: ServerType['status']) => {
|
||||
switch (status) {
|
||||
case 'running':
|
||||
return (
|
||||
<Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5 animate-pulse" />
|
||||
运行中
|
||||
</Badge>
|
||||
);
|
||||
case 'stopped':
|
||||
return (
|
||||
<Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
|
||||
已停止
|
||||
</Badge>
|
||||
);
|
||||
case 'maintenance':
|
||||
return (
|
||||
<Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-amber-400 mr-1.5" />
|
||||
维护中
|
||||
</Badge>
|
||||
);
|
||||
case 'offline':
|
||||
return (
|
||||
<Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
|
||||
离线
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const regions = Array.from(new Set(servers.map((s) => s.region)));
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-100">服务器管理</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">管理云平台服务器资产</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
导出
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
批量导入
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="bg-slate-800 border-slate-700 text-slate-100">
|
||||
<DropdownMenuLabel>选择导入方式</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-slate-700" />
|
||||
<DropdownMenuItem
|
||||
className="hover:bg-slate-700 cursor-pointer"
|
||||
onClick={() => setCloudImportOpen(true)}
|
||||
>
|
||||
<Cloud className="h-4 w-4 mr-2 text-blue-400" />
|
||||
云主机导入
|
||||
<span className="ml-2 text-xs text-slate-500">从云平台同步</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="hover:bg-slate-700 cursor-pointer"
|
||||
onClick={() => setExcelImportOpen(true)}
|
||||
>
|
||||
<FileSpreadsheet className="h-4 w-4 mr-2 text-emerald-400" />
|
||||
Excel导入
|
||||
<span className="ml-2 text-xs text-slate-500">批量导入服务器</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
添加服务器
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">服务器总数</p>
|
||||
<p className="text-2xl font-bold text-slate-100">{servers.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
|
||||
<Server className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">运行中</p>
|
||||
<p className="text-2xl font-bold text-emerald-400">
|
||||
{servers.filter((s) => s.status === 'running').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
||||
<Activity className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">维护中</p>
|
||||
<p className="text-2xl font-bold text-amber-400">
|
||||
{servers.filter((s) => s.status === 'maintenance').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
|
||||
<RotateCw className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-slate-500">已停止</p>
|
||||
<p className="text-2xl font-bold text-slate-400">
|
||||
{servers.filter((s) => s.status === 'stopped').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-slate-500/10 text-slate-400">
|
||||
<Power className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters & Table */}
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<div className="relative w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
||||
<Input
|
||||
placeholder="搜索主机名或IP..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||
<SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
|
||||
<SelectValue placeholder="状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="running">运行中</SelectItem>
|
||||
<SelectItem value="stopped">已停止</SelectItem>
|
||||
<SelectItem value="maintenance">维护中</SelectItem>
|
||||
<SelectItem value="offline">离线</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={regionFilter} onValueChange={setRegionFilter}>
|
||||
<SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700 text-slate-200">
|
||||
<SelectValue placeholder="区域" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
<SelectItem value="all">全部区域</SelectItem>
|
||||
{regions.map((region) => (
|
||||
<SelectItem key={region} value={region}>
|
||||
{region}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
{selectedServers.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-slate-400">已选择 {selectedServers.length} 项</span>
|
||||
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300">
|
||||
<Terminal className="h-4 w-4 mr-2" />
|
||||
批量命令
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="border-slate-700 text-slate-300">
|
||||
<RotateCw className="h-4 w-4 mr-2" />
|
||||
重启
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="border-t border-slate-800">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-slate-800 hover:bg-transparent">
|
||||
<TableHead className="w-12">
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedServers.length === filteredServers.length && filteredServers.length > 0
|
||||
}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
className="border-slate-600"
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="text-slate-400">主机名</TableHead>
|
||||
<TableHead className="text-slate-400">IP地址</TableHead>
|
||||
<TableHead className="text-slate-400">状态</TableHead>
|
||||
<TableHead className="text-slate-400">配置</TableHead>
|
||||
<TableHead className="text-slate-400">使用率</TableHead>
|
||||
<TableHead className="text-slate-400">区域</TableHead>
|
||||
<TableHead className="text-slate-400">标签</TableHead>
|
||||
<TableHead className="text-slate-400 text-right">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredServers.map((server) => (
|
||||
<TableRow key={server.id} className="border-slate-800 hover:bg-slate-800/50">
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedServers.includes(server.id)}
|
||||
onCheckedChange={() => toggleSelect(server.id)}
|
||||
className="border-slate-600"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Server className="h-4 w-4 text-slate-500" />
|
||||
<div>
|
||||
<p className="font-medium text-slate-200">{server.hostname}</p>
|
||||
<p className="text-xs text-slate-500">{server.os}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<code className="text-sm text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
|
||||
{server.ip}
|
||||
</code>
|
||||
</TableCell>
|
||||
<TableCell>{getStatusBadge(server.status)}</TableCell>
|
||||
<TableCell>
|
||||
<div className="text-sm text-slate-300">
|
||||
<span className="text-slate-500">{server.cpu}核</span>
|
||||
<span className="mx-1 text-slate-600">/</span>
|
||||
<span className="text-slate-500">{server.memory}GB</span>
|
||||
<span className="mx-1 text-slate-600">/</span>
|
||||
<span className="text-slate-500">{server.disk}GB</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-slate-500 w-8">CPU</span>
|
||||
<div className="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={cn(
|
||||
'h-full rounded-full',
|
||||
server.cpuUsage > 80 ? 'bg-red-400' : server.cpuUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
)}
|
||||
style={{ width: `${server.cpuUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-slate-400">{server.cpuUsage.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-slate-500 w-8">内存</span>
|
||||
<div className="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={cn(
|
||||
'h-full rounded-full',
|
||||
server.memoryUsage > 80 ? 'bg-red-400' : server.memoryUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
)}
|
||||
style={{ width: `${server.memoryUsage}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-slate-400">{server.memoryUsage.toFixed(1)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-slate-300">{server.region}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{server.tags.slice(0, 3).map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="outline"
|
||||
className="text-xs border-slate-700 text-slate-400 bg-slate-800/50"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
{server.tags.length > 3 && (
|
||||
<Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
|
||||
+{server.tags.length - 3}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
|
||||
<Terminal className="h-4 w-4" />
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
|
||||
<DropdownMenuLabel className="text-slate-300">操作</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-slate-700" />
|
||||
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
查看详情
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
||||
<Terminal className="h-4 w-4 mr-2" />
|
||||
WebShell
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="bg-slate-700" />
|
||||
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
||||
<RotateCw className="h-4 w-4 mr-2" />
|
||||
重启
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-red-400 focus:bg-slate-700 focus:text-red-400">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Import Dialogs */}
|
||||
<CloudServerImport
|
||||
open={cloudImportOpen}
|
||||
onClose={() => setCloudImportOpen(false)}
|
||||
/>
|
||||
<ExcelServerImport
|
||||
open={excelImportOpen}
|
||||
onClose={() => setExcelImportOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Terminal,
|
||||
Plus,
|
||||
X,
|
||||
Server,
|
||||
Play,
|
||||
Pause,
|
||||
Square,
|
||||
Download,
|
||||
Upload,
|
||||
Copy,
|
||||
Settings,
|
||||
Monitor,
|
||||
RefreshCw,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
} from 'lucide-react';
|
||||
import { servers } from '@/mocks/data';
|
||||
|
||||
interface TerminalSession {
|
||||
id: string;
|
||||
serverId: string;
|
||||
serverName: string;
|
||||
serverIp: string;
|
||||
connected: boolean;
|
||||
logs: string[];
|
||||
}
|
||||
|
||||
export function WebShell() {
|
||||
const [sessions, setSessions] = useState<TerminalSession[]>([]);
|
||||
const [activeSession, setActiveSession] = useState<string | null>(null);
|
||||
const [selectedServer, setSelectedServer] = useState<string>('');
|
||||
const [command, setCommand] = useState('');
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const terminalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const runningServers = servers.filter((s) => s.status === 'running');
|
||||
|
||||
const createSession = () => {
|
||||
if (!selectedServer) return;
|
||||
const server = servers.find((s) => s.id === selectedServer);
|
||||
if (!server) return;
|
||||
|
||||
const newSession: TerminalSession = {
|
||||
id: `session-${Date.now()}`,
|
||||
serverId: server.id,
|
||||
serverName: server.hostname,
|
||||
serverIp: server.ip,
|
||||
connected: true,
|
||||
logs: [
|
||||
`Connecting to ${server.hostname} (${server.ip})...`,
|
||||
`Connection established.`,
|
||||
`Last login: ${new Date().toLocaleString()} from 192.168.1.100`,
|
||||
`[root@${server.hostname} ~]# `,
|
||||
],
|
||||
};
|
||||
|
||||
setSessions([...sessions, newSession]);
|
||||
setActiveSession(newSession.id);
|
||||
setSelectedServer('');
|
||||
};
|
||||
|
||||
const closeSession = (sessionId: string) => {
|
||||
const newSessions = sessions.filter((s) => s.id !== sessionId);
|
||||
setSessions(newSessions);
|
||||
if (activeSession === sessionId) {
|
||||
setActiveSession(newSessions.length > 0 ? newSessions[0].id : null);
|
||||
}
|
||||
};
|
||||
|
||||
const executeCommand = () => {
|
||||
if (!command.trim() || !activeSession) return;
|
||||
|
||||
const session = sessions.find((s) => s.id === activeSession);
|
||||
if (!session) return;
|
||||
|
||||
const newLogs = [...session.logs, command];
|
||||
|
||||
// 模拟命令执行结果
|
||||
const mockResponses: Record<string, string> = {
|
||||
ls: 'total 32\ndrwxr-xr-x 5 root root 4096 Mar 30 10:00 .\ndrwxr-xr-x 18 root root 4096 Mar 30 09:00 ..\n-rw-r--r-- 1 root root 220 Mar 30 08:00 .bash_logout\n-rw-r--r-- 1 root root 3771 Mar 30 08:00 .bashrc\n-rw-r--r-- 1 root root 807 Mar 30 08:00 .profile\ndrwxr-xr-x 2 root root 4096 Mar 30 09:00 scripts\ndrwxr-xr-x 3 root root 4096 Mar 30 09:00 logs',
|
||||
pwd: '/root',
|
||||
'uname -a': 'Linux web-server-01 5.4.210-1.el7.elrepo.x86_64 #1 SMP x86_64 x86_64 x86_64 GNU/Linux',
|
||||
'df -h': 'Filesystem Size Used Avail Use% Mounted on\n/dev/sda1 500G 180G 320G 36% /\n/dev/sdb1 1.0T 450G 550G 45% /data',
|
||||
'free -m': ' total used free shared buff/cache available\nMem: 65536 42000 8000 1024 15536 21000\nSwap: 8192 0 8192',
|
||||
'ps aux': 'USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND\nroot 1 0.0 0.1 18532 3200 ? Ss Mar30 0:03 /sbin/init\nroot 512 0.1 0.5 45200 12800 ? Ss Mar30 2:15 nginx: master process\nroot 1024 0.5 2.0 256000 51200 ? Sl Mar30 15:30 java -jar app.jar',
|
||||
top: 'top - 10:30:00 up 30 days, 12:00, 1 user, load average: 0.52, 0.58, 0.59\nTasks: 156 total, 1 running, 155 sleeping, 0 stopped, 0 zombie\n%Cpu(s): 25.0 us, 5.0 sy, 0.0 ni, 68.0 id, 0.0 wa, 0.0 hi, 2.0 si, 0.0 st',
|
||||
};
|
||||
|
||||
const cmd = command.trim().split(' ')[0];
|
||||
const response = mockResponses[command.trim()] || mockResponses[cmd] || `${cmd}: command executed successfully`;
|
||||
|
||||
newLogs.push(response);
|
||||
newLogs.push(`[${session.serverName} ~]# `);
|
||||
|
||||
setSessions(
|
||||
sessions.map((s) => (s.id === activeSession ? { ...s, logs: newLogs } : s))
|
||||
);
|
||||
setCommand('');
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
executeCommand();
|
||||
}
|
||||
};
|
||||
|
||||
// 自动滚动到底部
|
||||
useEffect(() => {
|
||||
if (terminalRef.current) {
|
||||
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
|
||||
}
|
||||
}, [sessions, activeSession]);
|
||||
|
||||
const activeSessionData = sessions.find((s) => s.id === activeSession);
|
||||
|
||||
return (
|
||||
<div className={cn('space-y-4', isFullscreen && 'fixed inset-0 z-50 bg-slate-950 p-4')}>
|
||||
{/* Page Header */}
|
||||
{!isFullscreen && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-100">WebShell</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">远程服务器终端管理</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
新建连接
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="bg-slate-900 border-slate-800">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-slate-100">新建终端连接</DialogTitle>
|
||||
<DialogDescription className="text-slate-500">
|
||||
选择要连接的服务器
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-300">选择服务器</label>
|
||||
<Select value={selectedServer} onValueChange={setSelectedServer}>
|
||||
<SelectTrigger className="bg-slate-800 border-slate-700 text-slate-200">
|
||||
<SelectValue placeholder="选择服务器" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-slate-800 border-slate-700">
|
||||
{runningServers.map((server) => (
|
||||
<SelectItem key={server.id} value={server.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Server className="h-4 w-4" />
|
||||
<span>{server.hostname}</span>
|
||||
<span className="text-slate-500">({server.ip})</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={createSession}
|
||||
disabled={!selectedServer}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
<Terminal className="h-4 w-4 mr-2" />
|
||||
连接
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Terminal Container */}
|
||||
<Card className="bg-slate-900 border-slate-800 flex-1">
|
||||
<CardHeader className="pb-2 border-b border-slate-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{sessions.length > 0 ? (
|
||||
<div className="flex items-center gap-1">
|
||||
{sessions.map((session) => (
|
||||
<button
|
||||
key={session.id}
|
||||
onClick={() => setActiveSession(session.id)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 py-1.5 text-sm rounded-md transition-colors',
|
||||
activeSession === session.id
|
||||
? 'bg-slate-800 text-slate-100'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full',
|
||||
session.connected ? 'bg-emerald-400' : 'bg-red-400'
|
||||
)}
|
||||
/>
|
||||
<span className="max-w-[120px] truncate">{session.serverName}</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
closeSession(session.id);
|
||||
}}
|
||||
className="ml-1 p-0.5 rounded hover:bg-slate-700"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-sm text-slate-500">暂无连接</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{activeSessionData && (
|
||||
<>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Upload className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-slate-400 hover:text-slate-100"
|
||||
onClick={() => setIsFullscreen(!isFullscreen)}
|
||||
>
|
||||
{isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{activeSessionData ? (
|
||||
<div className="flex flex-col" style={{ height: isFullscreen ? 'calc(100vh - 140px)' : '500px' }}>
|
||||
{/* Terminal Output */}
|
||||
<div
|
||||
ref={terminalRef}
|
||||
className="flex-1 p-4 font-mono text-sm bg-slate-950 overflow-auto"
|
||||
>
|
||||
{activeSessionData.logs.map((log, index) => (
|
||||
<div key={index} className="whitespace-pre-wrap text-slate-300 leading-relaxed">
|
||||
{log.startsWith('[') && log.endsWith(']# ') ? (
|
||||
<span>
|
||||
<span className="text-emerald-400">{log.split('#')[0]}#</span>
|
||||
<span className="text-slate-100">{log.split('#')[1]}</span>
|
||||
</span>
|
||||
) : log.startsWith('total') || log.startsWith('drwx') || log.startsWith('-rw') ? (
|
||||
<span className="text-slate-400">{log}</span>
|
||||
) : log.startsWith('Filesystem') || log.startsWith('/dev') ? (
|
||||
<span className="text-slate-400">{log}</span>
|
||||
) : log.startsWith('USER') || log.startsWith('root') ? (
|
||||
<span className="text-slate-400">{log}</span>
|
||||
) : log.startsWith('Connecting') || log.startsWith('Connection') || log.startsWith('Last login') ? (
|
||||
<span className="text-slate-500">{log}</span>
|
||||
) : (
|
||||
<span className="text-slate-300">{log}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Command Input */}
|
||||
<div className="flex items-center gap-2 p-3 border-t border-slate-800 bg-slate-900">
|
||||
<span className="text-emerald-400 font-mono text-sm whitespace-nowrap">
|
||||
[{activeSessionData.serverName} ~]#
|
||||
</span>
|
||||
<Input
|
||||
value={command}
|
||||
onChange={(e) => setCommand(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="输入命令..."
|
||||
className="flex-1 bg-transparent border-0 text-slate-200 font-mono text-sm placeholder:text-slate-600 focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={executeCommand}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center text-slate-500"
|
||||
style={{ height: isFullscreen ? 'calc(100vh - 140px)' : '500px' }}
|
||||
>
|
||||
<Terminal className="h-16 w-16 mb-4 opacity-50" />
|
||||
<p className="text-lg font-medium">暂无活动连接</p>
|
||||
<p className="text-sm mt-1">点击"新建连接"开始远程会话</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Quick Commands */}
|
||||
{activeSessionData && (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm text-slate-400">快捷命令</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['ls -la', 'pwd', 'df -h', 'free -m', 'ps aux', 'top', 'netstat -tlnp', 'systemctl status'].map(
|
||||
(cmd) => (
|
||||
<Button
|
||||
key={cmd}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
|
||||
onClick={() => {
|
||||
setCommand(cmd);
|
||||
setTimeout(executeCommand, 100);
|
||||
}}
|
||||
>
|
||||
{cmd}
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user