snapshot: AnsibleManager拆分前快照

frontend/src/components/cloud/RegionManager.tsx

@@ -3,6 +3,7 @@ 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,
@@ -36,6 +37,8 @@ import {
   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',
@@ -54,10 +57,12 @@ const providerColors: Record<string, string> = {
 };
 
 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);
@@ -88,6 +93,19 @@ export function RegionManager() {
     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: '' });
@@ -120,13 +138,46 @@ export function RegionManager() {
     }
   };
 
-  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();
+  // 单条删除 // 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 (
@@ -161,6 +212,29 @@ export function RegionManager() {
         </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">
@@ -176,6 +250,13 @@ export function RegionManager() {
           <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>
@@ -188,6 +269,13 @@ export function RegionManager() {
             <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>
@@ -308,20 +396,6 @@ export function RegionManager() {
           </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>
   );
 }