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

frontend/src/components/cloud/PlatformManager.tsx

@@ -1,33 +1,34 @@
-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 {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Plus,
+  Search,
+  Trash2,
+  Pencil,
   CloudCog,
-  Server,
   CheckCircle2,
   XCircle,
-  ExternalLink
+  ExternalLink,
+  Loader2,
 } from 'lucide-react';
-import { platforms } from '@/mocks/data';
-
-interface Platform {
-  id: string;
-  name: string;
-  code: string;
-  type: 'public' | 'private' | 'hybrid';
-  status: 'active' | 'inactive';
-  accountCount: number;
-  regionCount: number;
-  serverCount: number;
-  website: string;
-  description: string;
-}
+import { platformApi } from '@/services/api';
 
 const typeLabels: Record<string, string> = {
   public: '公有云',
@@ -36,184 +37,282 @@ const typeLabels: Record<string, string> = {
 };
 
 const typeColors: Record<string, string> = {
-  public: 'bg-blue-500/20 text-blue-400',
-  private: 'bg-purple-500/20 text-purple-400',
-  hybrid: 'bg-cyan-500/20 text-cyan-400',
+  public: 'text-blue-400',
+  private: 'text-purple-400',
+  hybrid: 'text-cyan-400',
 };
 
 export function PlatformManager() {
+  const [platforms, setPlatforms] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedType, setSelectedType] = useState<string>('all');
-
-  const filteredPlatforms = platforms.filter(platform => {
-    const matchesSearch = platform.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                         platform.code.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesType = selectedType === 'all' || platform.type === selectedType;
-    return matchesSearch && matchesType;
+  const [selectedType, setSelectedType] = useState('all');
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState<any>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '', code: '', type: 'public', status: 'active',
+    website: '', description: '',
   });
 
-  const stats = {
-    total: platforms.length,
-    public: platforms.filter(p => p.type === 'public').length,
-    private: platforms.filter(p => p.type === 'private').length,
-    totalServers: platforms.reduce((sum, p) => sum + p.serverCount, 0),
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await platformApi.list();
+      const items = (res as any)?.list || [];
+      setPlatforms(items);
+    } catch {
+      setPlatforms([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadData(); }, [loadData]);
+
+  const filtered = platforms.filter(p => {
+    const matchSearch = p.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                       p.code?.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchType = selectedType === 'all' || p.type === selectedType;
+    return matchSearch && matchType;
+  });
+
+  const openCreate = () => {
+    setEditingItem(null);
+    setFormData({ name: '', code: '', type: 'public', status: 'active', website: '', description: '' });
+    setDialogOpen(true);
+  };
+
+  const openEdit = (item: any) => {
+    setEditingItem(item);
+    setFormData({
+      name: item.name || '', code: item.code || '', type: item.type || 'public',
+      status: item.status || 'active', website: item.website || '', description: item.description || '',
+    });
+    setDialogOpen(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!formData.name.trim() || !formData.code.trim()) return;
+    setSubmitting(true);
+    try {
+      if (editingItem) {
+        await platformApi.update(editingItem.id, formData);
+      } else {
+        await platformApi.create(formData);
+      }
+      setDialogOpen(false);
+      loadData();
+    } catch {
+      // error handled by http interceptor
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const handleDelete = (id: number) => setDeleteId(id);
+  const confirmDelete = async () => {
+    if (deleteId === null) return;
+    await platformApi.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={selectedType} onValueChange={setSelectedType}>
+            <SelectTrigger className="w-32 h-9 bg-slate-800/50 border-slate-700">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部类型</SelectItem>
+              <SelectItem value="public">公有云</SelectItem>
+              <SelectItem value="private">私有云</SelectItem>
+              <SelectItem value="hybrid">混合云</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">
-                <CloudCog 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-blue-400 mt-1">{stats.public}</p>
-              </div>
-              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
-                <CloudCog 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-purple-400 mt-1">{stats.private}</p>
-              </div>
-              <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
-                <CloudCog className="h-5 w-5 text-purple-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.totalServers}</p>
-              </div>
-              <div className="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
-                <Server className="h-5 w-5 text-green-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"
-          />
+      {/* List */}
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
         </div>
-        <select
-          value={selectedType}
-          onChange={(e) => setSelectedType(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="public">公有云</option>
-          <option value="private">私有云</option>
-          <option value="hybrid">混合云</option>
-        </select>
-      </div>
-
-      {/* Platform List */}
-      <div className="grid grid-cols-2 gap-4">
-        {filteredPlatforms.map((platform) => (
-          <Card key={platform.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-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white font-bold text-lg">
-                    {platform.name.slice(0, 2)}
+      ) : filtered.length === 0 ? (
+        <div className="text-center py-20 text-slate-500">
+          <CloudCog className="h-12 w-12 mx-auto mb-3 opacity-40" />
+          <p>暂无云平台数据</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filtered.map((p) => (
+            <div
+              key={p.id}
+              className="bg-slate-800/30 rounded-lg p-4 hover:bg-slate-800/50 transition-colors group"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+                    <CloudCog className="h-5 w-5 text-blue-400" />
                   </div>
                   <div>
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-medium text-slate-100">{platform.name}</h3>
-                      <Badge className={typeColors[platform.type]}>
-                        {typeLabels[platform.type]}
-                      </Badge>
-                      {platform.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">{platform.code}</p>
-                    <p className="text-xs text-slate-500 mt-1">{platform.description}</p>
+                    <h3 className="font-medium text-slate-100">{p.name}</h3>
+                    <span className="text-xs text-slate-500 font-mono">{p.code}</span>
                   </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">
-                    <ExternalLink className="h-4 w-4" />
-                  </Button>
-                  <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 className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  {p.website && (
+                    <a href={p.website} target="_blank" rel="noreferrer" className="p-1.5 rounded hover:bg-slate-700 text-slate-400 hover:text-slate-200">
+                      <ExternalLink className="h-3.5 w-3.5" />
+                    </a>
+                  )}
+                  <button onClick={() => openEdit(p)} 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(p.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>
               </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">{platform.accountCount}</p>
-                </div>
-                <div>
-                  <p className="text-xs text-slate-400">区域数</p>
-                  <p className="text-lg font-medium text-slate-100">{platform.regionCount}</p>
-                </div>
-                <div>
-                  <p className="text-xs text-slate-400">服务器数</p>
-                  <p className="text-lg font-medium text-slate-100">{platform.serverCount}</p>
-                </div>
+
+              {p.description && (
+                <p className="text-sm text-slate-400 mb-3 line-clamp-2">{p.description}</p>
+              )}
+
+              <div className="flex items-center gap-2 flex-wrap">
+                <Badge variant="outline" className={typeColors[p.type] || 'text-slate-400'}>
+                  {typeLabels[p.type] || p.type}
+                </Badge>
+                {p.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>
+                )}
               </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+            </div>
+          ))}
+        </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="如：aliyun"
+                  className="bg-slate-800/50 border-slate-700"
+                  disabled={!!editingItem}
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5">
+                <Label>类型</Label>
+                <Select value={formData.type} onValueChange={(v) => setFormData({ ...formData, type: v })}>
+                  <SelectTrigger className="bg-slate-800/50 border-slate-700">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="public">公有云</SelectItem>
+                    <SelectItem value="private">私有云</SelectItem>
+                    <SelectItem value="hybrid">混合云</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.website}
+                onChange={(e) => setFormData({ ...formData, website: e.target.value })}
+                placeholder="https://..."
+                className="bg-slate-800/50 border-slate-700"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label>描述</Label>
+              <Input
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder="平台描述..."
+                className="bg-slate-800/50 border-slate-700"
+              />
+            </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>
   );
 }

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>
   );
 }