feat: K8s集群拓扑图接入真实后端数据 — 分层可视化Cluster→Ingress→Service→Deployment→Node + http.ts类型修复

frontend/src/components/cloud/RegionManager.tsx

@@ -1,40 +1,41 @@
-import { useState } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
-import { 
-  Plus, 
-  Search, 
-  Edit2, 
-  Trash2, 
+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,
-  Server,
-  Cloud,
   CheckCircle2,
-  XCircle
+  XCircle,
+  Loader2,
 } from 'lucide-react';
-import { regions } from '@/mocks/data';
-
-interface Region {
-  id: string;
-  name: string;
-  code: string;
-  provider: string;
-  location: string;
-  status: 'active' | 'inactive';
-  serverCount: number;
-  vpcCount: number;
-  endpoint: string;
-}
-
-const providerColors: Record<string, string> = {
-  aws: 'bg-orange-500',
-  aliyun: 'bg-orange-600',
-  tencent: 'bg-blue-500',
-  huawei: 'bg-red-500',
-  azure: 'bg-blue-600',
-};
+import { regionApi } from '@/services/api';
 
 const providerNames: Record<string, string> = {
   aws: 'AWS',
@@ -44,179 +45,283 @@ const providerNames: Record<string, string> = {
   azure: 'Azure',
 };
 
-export function RegionManager() {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedProvider, setSelectedProvider] = useState<string>('all');
+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',
+};
 
-  const filteredRegions = regions.filter(region => {
-    const matchesSearch = region.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                         region.code.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                         region.location.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesProvider = selectedProvider === 'all' || region.provider === selectedProvider;
-    return matchesSearch && matchesProvider;
+export function RegionManager() {
+  const [regions, setRegions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState('all');
+  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 stats = {
-    total: regions.length,
-    active: regions.filter(r => r.status === 'active').length,
-    inactive: regions.filter(r => r.status === 'inactive').length,
-    totalServers: regions.reduce((sum, r) => sum + r.serverCount, 0),
+  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;
+  });
+
+  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);
+    }
+  };
+
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const handleDelete = (id: number) => setDeleteId(id);
+  const confirmDelete = async () => {
+    if (deleteId === null) return;
+    await regionApi.delete(deleteId);
+    setDeleteId(null);
+    loadData();
   };
 
   return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-100">区域管理</h1>
-          <p className="text-slate-400 mt-1">管理云平台可用区和区域信息</p>
+    <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 className="bg-blue-600 hover:bg-blue-700">
-          <Plus className="h-4 w-4 mr-2" />
+        <Button onClick={openCreate} className="gap-2">
+          <Plus className="h-4 w-4" />
           添加区域
         </Button>
       </div>
 
-      {/* Stats */}
-      <div className="grid grid-cols-4 gap-4">
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-slate-400 text-sm">区域总数</p>
-                <p className="text-2xl font-bold text-slate-100 mt-1">{stats.total}</p>
-              </div>
-              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
-                <MapPin className="h-5 w-5 text-blue-400" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-slate-400 text-sm">可用</p>
-                <p className="text-2xl font-bold text-green-400 mt-1">{stats.active}</p>
-              </div>
-              <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
-                <CheckCircle2 className="h-5 w-5 text-green-400" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-slate-400 text-sm">不可用</p>
-                <p className="text-2xl font-bold text-slate-400 mt-1">{stats.inactive}</p>
-              </div>
-              <div className="w-10 h-10 rounded-lg bg-slate-500/20 flex items-center justify-center">
-                <XCircle className="h-5 w-5 text-slate-400" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-slate-800 border-slate-700">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-slate-400 text-sm">服务器总数</p>
-                <p className="text-2xl font-bold text-cyan-400 mt-1">{stats.totalServers}</p>
-              </div>
-              <div className="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
-                <Server className="h-5 w-5 text-cyan-400" />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-4">
-        <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
-          <Input
-            placeholder="搜索区域名称、代码或位置..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
-          />
+      {/* Table */}
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
         </div>
-        <select
-          value={selectedProvider}
-          onChange={(e) => setSelectedProvider(e.target.value)}
-          className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-md text-slate-100 text-sm"
-        >
-          <option value="all">全部平台</option>
-          <option value="aws">AWS</option>
-          <option value="aliyun">阿里云</option>
-          <option value="tencent">腾讯云</option>
-          <option value="huawei">华为云</option>
-          <option value="azure">Azure</option>
-        </select>
-      </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="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 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="text-slate-400 font-mono text-xs">{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>
+      )}
 
-      {/* Region List */}
-      <div className="grid grid-cols-2 gap-4">
-        {filteredRegions.map((region) => (
-          <Card key={region.id} className="bg-slate-800 border-slate-700">
-            <CardContent className="p-4">
-              <div className="flex items-start justify-between">
-                <div className="flex items-start gap-3">
-                  <div className={`w-10 h-10 rounded-lg ${providerColors[region.provider] || 'bg-blue-500'} flex items-center justify-center text-white font-bold text-xs`}>
-                    {providerNames[region.provider]?.slice(0, 2) || region.provider.slice(0, 2).toUpperCase()}
-                  </div>
-                  <div>
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-medium text-slate-100">{region.name}</h3>
-                      {region.status === 'active' ? (
-                        <Badge className="bg-green-500/20 text-green-400 border-0">
-                          <CheckCircle2 className="h-3 w-3 mr-1" />
-                          可用
-                        </Badge>
-                      ) : (
-                        <Badge className="bg-slate-500/20 text-slate-400 border-0">
-                          <XCircle className="h-3 w-3 mr-1" />
-                          不可用
-                        </Badge>
-                      )}
-                    </div>
-                    <p className="text-sm text-slate-400 mt-0.5">{region.code}</p>
-                    <div className="flex items-center gap-2 mt-1">
-                      <MapPin className="h-3 w-3 text-slate-500" />
-                      <span className="text-xs text-slate-400">{region.location}</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex items-center gap-1">
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
-                    <Edit2 className="h-4 w-4" />
-                  </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400">
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </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="grid grid-cols-3 gap-4 mt-4 pt-4 border-t border-slate-700">
-                <div>
-                  <p className="text-xs text-slate-400">服务器</p>
-                  <p className="text-lg font-medium text-slate-100">{region.serverCount}</p>
-                </div>
-                <div>
-                  <p className="text-xs text-slate-400">VPC</p>
-                  <p className="text-lg font-medium text-slate-100">{region.vpcCount}</p>
-                </div>
-                <div>
-                  <p className="text-xs text-slate-400">Endpoint</p>
-                  <p className="text-xs text-slate-300 truncate">{region.endpoint}</p>
-                </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>
-            </CardContent>
-          </Card>
-        ))}
-      </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>
+
+      {/* 删除确认 */}
+      <Dialog open={deleteId !== null} onOpenChange={(v) => !v && setDeleteId(null)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-slate-400">确定删除此区域？此操作不可撤销。</p>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDeleteId(null)}>取消</Button>
+            <Button variant="destructive" onClick={confirmDelete}>删除</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }