402 lines
15 KiB
TypeScript
402 lines
15 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {
|
|
Plus,
|
|
Search,
|
|
Trash2,
|
|
Pencil,
|
|
MapPin,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Loader2,
|
|
} from 'lucide-react';
|
|
import { regionApi } from '@/services/api';
|
|
import { useConfirm } from '@/components/ui/confirm-dialog';
|
|
import { toast } from 'sonner';
|
|
|
|
const providerNames: Record<string, string> = {
|
|
aws: 'AWS',
|
|
aliyun: '阿里云',
|
|
tencent: '腾讯云',
|
|
huawei: '华为云',
|
|
azure: 'Azure',
|
|
};
|
|
|
|
const providerColors: Record<string, string> = {
|
|
aws: 'text-orange-400',
|
|
aliyun: 'text-orange-400',
|
|
tencent: 'text-blue-400',
|
|
huawei: 'text-red-400',
|
|
azure: 'text-blue-400',
|
|
};
|
|
|
|
export function RegionManager() {
|
|
const confirm = useConfirm();
|
|
const [regions, setRegions] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedProvider, setSelectedProvider] = useState('all');
|
|
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [editingItem, setEditingItem] = useState<any>(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
name: '', code: '', provider: 'aliyun', location: '',
|
|
status: 'active', endpoint: '',
|
|
});
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await regionApi.list();
|
|
const items = (res as any)?.list || [];
|
|
setRegions(items);
|
|
} catch {
|
|
setRegions([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => { loadData(); }, [loadData]);
|
|
|
|
const filtered = regions.filter(r => {
|
|
const matchSearch = r.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
r.code?.toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchProvider = selectedProvider === 'all' || r.provider === selectedProvider;
|
|
return matchSearch && matchProvider;
|
|
});
|
|
|
|
// 全选 / 单选 // Logan.Li
|
|
const allSelected = filtered.length > 0 && filtered.every(r => selectedIds.includes(r.id));
|
|
const toggleSelectAll = () => {
|
|
if (allSelected) {
|
|
setSelectedIds([]);
|
|
} else {
|
|
setSelectedIds(filtered.map(r => r.id));
|
|
}
|
|
};
|
|
const toggleSelect = (id: number) => {
|
|
setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
|
|
};
|
|
|
|
const openCreate = () => {
|
|
setEditingItem(null);
|
|
setFormData({ name: '', code: '', provider: 'aliyun', location: '', status: 'active', endpoint: '' });
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const openEdit = (item: any) => {
|
|
setEditingItem(item);
|
|
setFormData({
|
|
name: item.name || '', code: item.code || '', provider: item.provider || 'aliyun',
|
|
location: item.location || '', status: item.status || 'active', endpoint: item.endpoint || '',
|
|
});
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!formData.name.trim() || !formData.code.trim()) return;
|
|
setSubmitting(true);
|
|
try {
|
|
if (editingItem) {
|
|
await regionApi.update(editingItem.id, formData);
|
|
} else {
|
|
await regionApi.create(formData);
|
|
}
|
|
setDialogOpen(false);
|
|
loadData();
|
|
} catch {
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// 单条删除 // Logan.Li
|
|
const handleDelete = async (id: number) => {
|
|
const region = regions.find(r => r.id === id);
|
|
const ok = await confirm({
|
|
title: '删除区域',
|
|
description: `确定删除「${region?.name || id}」吗？此操作不可撤销。`,
|
|
confirmText: '删除',
|
|
variant: 'destructive',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await regionApi.delete(id);
|
|
toast.success('区域已删除');
|
|
setSelectedIds(prev => prev.filter(i => i !== id));
|
|
loadData();
|
|
} catch (e) {
|
|
console.error('删除区域失败:', e);
|
|
toast.error('删除失败');
|
|
}
|
|
};
|
|
|
|
// 批量删除 // Logan.Li
|
|
const handleBatchDelete = async () => {
|
|
if (selectedIds.length === 0) return;
|
|
const ok = await confirm({
|
|
title: '批量删除区域',
|
|
description: `确定删除选中的 ${selectedIds.length} 个区域吗？此操作不可撤销。`,
|
|
confirmText: '批量删除',
|
|
variant: 'destructive',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await regionApi.batchDelete(selectedIds);
|
|
toast.success(`已删除 ${selectedIds.length} 个区域`);
|
|
setSelectedIds([]);
|
|
loadData();
|
|
} catch (e) {
|
|
console.error('批量删除失败:', e);
|
|
toast.error('批量删除失败');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 space-y-4">
|
|
{/* Toolbar */}
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<div className="relative w-72">
|
|
<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"
|
|
/>
|
|
</div>
|
|
<Select value={selectedProvider} onValueChange={setSelectedProvider}>
|
|
<SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部云商</SelectItem>
|
|
{Object.entries(providerNames).map(([k, v]) => (
|
|
<SelectItem key={k} value={k}>{v}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<Button onClick={openCreate} className="gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
添加区域
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 批量操作栏 // Logan.Li */}
|
|
{selectedIds.length > 0 && (
|
|
<div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg bg-slate-800/50 border border-slate-700">
|
|
<span className="text-sm text-slate-300">
|
|
已选择 <span className="font-semibold text-slate-100">{selectedIds.length}</span> 个区域
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm" onClick={() => setSelectedIds([])} className="text-slate-400 hover:text-slate-200">
|
|
取消选择
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-red-500/30 text-red-400 hover:bg-red-500/10"
|
|
onClick={handleBatchDelete}
|
|
>
|
|
<Trash2 className="h-4 w-4 mr-1.5" />
|
|
批量删除
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Table */}
|
|
{loading ? (
|
|
<div className="flex justify-center py-20">
|
|
<Loader2 className="h-6 w-6 animate-spin text-slate-500" />
|
|
</div>
|
|
) : filtered.length === 0 ? (
|
|
<div className="text-center py-20 text-slate-500">
|
|
<MapPin className="h-12 w-12 mx-auto mb-3 opacity-40" />
|
|
<p>暂无区域数据</p>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-800 hover:bg-transparent">
|
|
<TableHead className="w-10">
|
|
<Checkbox
|
|
checked={allSelected}
|
|
onCheckedChange={toggleSelectAll}
|
|
className="border-slate-600"
|
|
/>
|
|
</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">状态</TableHead>
|
|
<TableHead className="text-slate-400 text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filtered.map((r) => (
|
|
<TableRow key={r.id} className="border-slate-800/50 group">
|
|
<TableCell>
|
|
<Checkbox
|
|
checked={selectedIds.includes(r.id)}
|
|
onCheckedChange={() => toggleSelect(r.id)}
|
|
className="border-slate-600"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="font-medium text-slate-200">{r.name}</TableCell>
|
|
<TableCell className="font-mono text-sm text-slate-400">{r.code}</TableCell>
|
|
<TableCell>
|
|
<span className={providerColors[r.provider] || 'text-slate-400'}>
|
|
{providerNames[r.provider] || r.provider}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-slate-400">{r.location || '-'}</TableCell>
|
|
<TableCell className="max-w-[200px] truncate font-mono text-xs text-slate-400" title={r.endpoint}>{r.endpoint || '-'}</TableCell>
|
|
<TableCell>
|
|
{r.status === 'active' ? (
|
|
<Badge className="bg-emerald-500/20 text-emerald-400 gap-1">
|
|
<CheckCircle2 className="h-3 w-3" /> 启用
|
|
</Badge>
|
|
) : (
|
|
<Badge className="bg-slate-500/20 text-slate-400 gap-1">
|
|
<XCircle className="h-3 w-3" /> 禁用
|
|
</Badge>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button onClick={() => openEdit(r)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</button>
|
|
<button onClick={() => handleDelete(r.id)} className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-red-400">
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
|
|
{/* Dialog */}
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{editingItem ? '编辑区域' : '添加区域'}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-2">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label>区域名称 *</Label>
|
|
<Input
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder="如：华北-北京"
|
|
className="bg-slate-800/50 border-slate-700"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>编码 *</Label>
|
|
<Input
|
|
value={formData.code}
|
|
onChange={(e) => setFormData({ ...formData, code: e.target.value })}
|
|
placeholder="如：cn-north-1"
|
|
className="bg-slate-800/50 border-slate-700 font-mono"
|
|
disabled={!!editingItem}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label>云商</Label>
|
|
<Select value={formData.provider} onValueChange={(v) => setFormData({ ...formData, provider: v })}>
|
|
<SelectTrigger className="bg-slate-800/50 border-slate-700">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(providerNames).map(([k, v]) => (
|
|
<SelectItem key={k} value={k}>{v}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>状态</Label>
|
|
<Select value={formData.status} onValueChange={(v) => setFormData({ ...formData, status: v })}>
|
|
<SelectTrigger className="bg-slate-800/50 border-slate-700">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="active">启用</SelectItem>
|
|
<SelectItem value="inactive">禁用</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>地理位置</Label>
|
|
<Input
|
|
value={formData.location}
|
|
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
|
|
placeholder="如：中国北京"
|
|
className="bg-slate-800/50 border-slate-700"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>接入端点</Label>
|
|
<Input
|
|
value={formData.endpoint}
|
|
onChange={(e) => setFormData({ ...formData, endpoint: e.target.value })}
|
|
placeholder="如：ecs.cn-north-1.aliyuncs.com"
|
|
className="bg-slate-800/50 border-slate-700 font-mono text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={() => setDialogOpen(false)}>取消</Button>
|
|
<Button onClick={handleSubmit} disabled={submitting || !formData.name.trim() || !formData.code.trim()}>
|
|
{submitting && <Loader2 className="h-4 w-4 mr-1 animate-spin" />}
|
|
{editingItem ? '保存' : '创建'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|