snapshot: AnsibleManager拆分前快照

2026-06-15 10:01:24 +08:00
1 parent 16205fdb2b
commit e6d9f364e5
@@ -17,6 +17,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Checkbox } from '@/components/ui/checkbox';
 import { toast } from 'sonner';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { ansibleApi, taskExecutionApi } from '@/services/api';
@@ -116,6 +117,7 @@ const AnsibleManager: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [categoryFilter, setCategoryFilter] = useState<string>('all');
  const [activeTab, setActiveTab] = useState('playbooks');
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);

  // 弹窗状态
  const [editorOpen, setEditorOpen] = useState(false);     // 新建/编辑
@@ -251,6 +253,41 @@ const AnsibleManager: React.FC = () => {
    }
  };

+  // ---- 批量选择 / 删除 ---- // Logan.Li
+
+  const toggleSelect = (id: number) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
+    );
+  };
+
+  const toggleSelectAll = () => {
+    if (selectedIds.length === filteredPlaybooks.length && filteredPlaybooks.length > 0) {
+      setSelectedIds([]);
+    } else {
+      setSelectedIds(filteredPlaybooks.map((pb) => pb.id));
+    }
+  };
+
+  const handleBatchDelete = async () => {
+    if (selectedIds.length === 0) return;
+    const ok = await _confirm({
+      title: '批量删除 Playbook',
+      description: `确定删除选中的 ${selectedIds.length} 个 Playbook 吗？此操作不可恢复。`,
+      confirmText: '批量删除',
+      variant: 'destructive',
+    });
+    if (!ok) return;
+    try {
+      await ansibleApi.batchDeletePlaybooks(selectedIds);
+      toast.success(`已删除 ${selectedIds.length} 个 Playbook`);
+      setSelectedIds([]);
+      fetchPlaybooks();
+    } catch (error) {
+      toast.error('批量删除失败');
+    }
+  };
+
  // ---- 执行 ----

  const handleExecute = async (pb: Playbook) => {
@@ -419,6 +456,36 @@ const AnsibleManager: React.FC = () => {
            </div>
          </div>

+          {/* 批量操作栏 */}
+          {filteredPlaybooks.length > 0 && (
+            <div className="flex items-center justify-between gap-2 rounded-lg border bg-muted/40 px-4 py-2">
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  checked={
+                    selectedIds.length === filteredPlaybooks.length && filteredPlaybooks.length > 0
+                  }
+                  onCheckedChange={toggleSelectAll}
+                />
+                <span className="text-sm text-muted-foreground">
+                  {selectedIds.length > 0
+                    ? `已选择 ${selectedIds.length} / ${filteredPlaybooks.length} 项`
+                    : `共 ${filteredPlaybooks.length} 项`}
+                </span>
+              </div>
+              {selectedIds.length > 0 && (
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="sm" onClick={() => setSelectedIds([])}>
+                    取消选择
+                  </Button>
+                  <Button variant="destructive" size="sm" onClick={handleBatchDelete}>
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    批量删除
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+
          {/* Playbook 卡片列表 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {loading ? (
@@ -434,6 +501,11 @@ const AnsibleManager: React.FC = () => {
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex items-center gap-2 min-w-0">
+                        <Checkbox
+                          checked={selectedIds.includes(playbook.id)}
+                          onCheckedChange={() => toggleSelect(playbook.id)}
+                          className="shrink-0"
+                        />
                        <FileCode className="w-5 h-5 text-blue-500 shrink-0" />
                        <CardTitle className="text-base truncate">{playbook.name}</CardTitle>
                      </div>
@@ -3,6 +3,7 @@ import { Card, CardContent } 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 {
  Dialog,
  DialogContent,
@@ -59,6 +60,8 @@ export function CronJobManager() {
  const [executionsLoading, setExecutionsLoading] = useState(false);
  const [expandedExec, setExpandedExec] = useState<number | null>(null);
  const [executingId, setExecutingId] = useState<number | null>(null);
+  // 批量选择（批量删除） // Logan.Li
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  // editingId === null 表示新建模式；非 null 表示编辑已有任务 // Logan.Li
  const [editingId, setEditingId] = useState<number | null>(null);
  const [formJob, setFormJob] = useState({
@@ -250,6 +253,42 @@ export function CronJobManager() {
    }
  };

+  // 批量选择相关 // Logan.Li
+  const toggleSelect = (id: number) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
+    );
+  };
+
+  const toggleSelectAll = () => {
+    if (selectedIds.length === filteredJobs.length && filteredJobs.length > 0) {
+      setSelectedIds([]);
+    } else {
+      setSelectedIds(filteredJobs.map((j) => j.id));
+    }
+  };
+
+  // 批量删除任务（带确认框） // 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 cronJobApi.batchDelete(selectedIds);
+      toast.success(`已删除 ${selectedIds.length} 个任务`);
+      setSelectedIds([]);
+      refreshData();
+    } catch (error) {
+      console.error('Failed to batch delete jobs:', error);
+      toast.error('批量删除失败');
+    }
+  };
+
  return (
    <div className="space-y-6">
      {/* Header */}
@@ -318,16 +357,44 @@ export function CronJobManager() {
      </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-[var(--dg-text-secondary)]" />
-          <Input
-            placeholder="搜索任务..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
-          />
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <div className="flex items-center gap-3 flex-wrap">
+          <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-[var(--dg-text-secondary)]" />
+            <Input
+              placeholder="搜索任务..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
+            />
+          </div>
+          {filteredJobs.length > 0 && (
+            <label className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)] cursor-pointer select-none">
+              <Checkbox
+                checked={
+                  selectedIds.length === filteredJobs.length && filteredJobs.length > 0
+                }
+                onCheckedChange={toggleSelectAll}
+                className="border-[var(--dg-border)]"
+              />
+              全选
+            </label>
+          )}
        </div>
+        {selectedIds.length > 0 && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-[var(--dg-text-secondary)]">已选择 {selectedIds.length} 项</span>
+            <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-2" />
+              批量删除
+            </Button>
+          </div>
+        )}
      </div>

      {initialLoading ? (
@@ -346,7 +413,14 @@ export function CronJobManager() {
        {filteredJobs.map((job) => (
          <Card key={job.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
            <CardContent className="p-4">
-              <div className="flex items-start justify-between">
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex items-center pt-1">
+                  <Checkbox
+                    checked={selectedIds.includes(job.id)}
+                    onCheckedChange={() => toggleSelect(job.id)}
+                    className="border-[var(--dg-border)]"
+                  />
+                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 flex-wrap">
                    <h3 className="font-medium text-[var(--dg-text-primary)]">{job.name}</h3>
@@ -14,6 +14,7 @@ import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from '@/components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -100,6 +101,7 @@ export function ScriptManager() {
  const [searchQuery, setSearchQuery] = useState('');
  const [typeFilter, setTypeFilter] = useState<string>('all');
  const [activeTab, setActiveTab] = useState('scripts');
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);

  // 弹窗状态
  const [editorOpen, setEditorOpen] = useState(false);       // 新建/编辑
@@ -306,6 +308,41 @@ export function ScriptManager() {
    return matchSearch && matchType;
  });

+  // ---- 批量选择 / 批量删除 ----
+
+  const toggleSelect = (id: number) => {
+    setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
+  };
+
+  const toggleSelectAll = () => {
+    setSelectedIds(prev =>
+      prev.length === filteredScripts.length && filteredScripts.length > 0
+        ? []
+        : filteredScripts.map(sc => sc.id)
+    );
+  };
+
+  const handleBatchDelete = async () => {
+    if (selectedIds.length === 0) return;
+    const ok = await _confirm({
+      title: '批量删除脚本',
+      description: `确定删除选中的 ${selectedIds.length} 个脚本吗？此操作不可恢复。`,
+      confirmText: '批量删除',
+      variant: 'destructive',
+    });
+    if (!ok) return;
+    try {
+      await scriptApi.batchDelete(selectedIds);
+      toast.success(`已删除 ${selectedIds.length} 个脚本`);
+      setSelectedIds([]);
+      fetchScripts();
+    } catch (error) {
+      toast.error('批量删除失败');
+    }
+  };
+
+  const allSelected = filteredScripts.length > 0 && selectedIds.length === filteredScripts.length;
+
  const runningCount = executions.filter(e => e.status === 'running').length;
  const todaySuccess = executions.filter(e =>
    e.status === 'success' && new Date(e.created_at).toDateString() === new Date().toDateString()
@@ -415,6 +452,36 @@ export function ScriptManager() {
            </div>
          </div>

+          {/* 批量操作栏 */}
+          {selectedIds.length > 0 && (
+            <div className="flex items-center justify-between gap-4 px-4 py-2.5 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]">
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  checked={allSelected}
+                  onCheckedChange={toggleSelectAll}
+                  className="border-[var(--dg-border)]"
+                />
+                <span className="text-sm text-[var(--dg-text-secondary)]">
+                  已选择 {selectedIds.length} 项 / 共 {filteredScripts.length} 项
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" size="sm" onClick={() => setSelectedIds([])}>
+                  取消选择
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="border-red-500/30 text-red-400 hover:bg-red-500/10"
+                  onClick={handleBatchDelete}
+                >
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  批量删除
+                </Button>
+              </div>
+            </div>
+          )}
+
          {/* 脚本卡片列表 */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {loading ? (
@@ -432,6 +499,11 @@ export function ScriptManager() {
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex items-center gap-2 min-w-0">
+                        <Checkbox
+                          checked={selectedIds.includes(sc.id)}
+                          onCheckedChange={() => toggleSelect(sc.id)}
+                          className="border-[var(--dg-border)]"
+                        />
                        <FileCode className="w-5 h-5 text-purple-500 shrink-0" />
                        <CardTitle className="text-base truncate">{sc.name}</CardTitle>
                      </div>
@@ -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>
  );
 }
@@ -1,8 +1,10 @@
+import { useState } from 'react';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
  Table,
  TableBody,
@@ -12,9 +14,12 @@ import {
  TableRow,
 } from '@/components/ui/table';
 import { Settings, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 import { alertApi } from '@/services/api';
 import { renderRuleChannels } from './alertShared';

+const COL_SPAN = 9; // 复选框 + 7 数据列 + 操作列 // Logan.Li
+
 export function AlertRulesTab({
  rules,
  notifyChannels,
@@ -26,15 +31,61 @@ export function AlertRulesTab({
  onReload: () => void;
  onEditRule: (rule: any) => void;
 }) {
-  const _confirm = useConfirm();
+  const confirm = useConfirm();
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+
+  // 全选/取消全选 // Logan.Li
+  const toggleSelectAll = () => {
+    if (rules.length > 0 && selectedIds.length === rules.length) {
+      setSelectedIds([]);
+    } else {
+      setSelectedIds(rules.map((r) => r.id));
+    }
+  };
+
+  // 单行选择切换 // Logan.Li
+  const toggleSelect = (id: number) => {
+    setSelectedIds((prev) =>
+      prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
+    );
+  };

  const handleDeleteRule = async (id: any) => {
-    { const ok = await _confirm({ title: '删除告警规则', description: '确定删除此告警规则？', confirmText: '删除', variant: 'destructive' }); if (!ok) return; }
+    const ok = await confirm({
+      title: '删除告警规则',
+      description: '确定删除此告警规则？',
+      confirmText: '删除',
+      variant: 'destructive',
+    });
+    if (!ok) return;
    try {
      await alertApi.deleteRule(id);
+      toast.success('告警规则已删除');
      onReload();
    } catch (error) {
      console.error('Failed to delete rule:', error);
+      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 alertApi.batchDeleteRules(selectedIds);
+      toast.success(`已删除 ${selectedIds.length} 条告警规则`);
+      setSelectedIds([]);
+      onReload();
+    } catch (error) {
+      console.error('Failed to batch delete rules:', error);
+      toast.error('批量删除失败');
    }
  };

@@ -47,14 +98,39 @@ export function AlertRulesTab({
    }
  };

+  const allSelected = rules.length > 0 && selectedIds.length === rules.length;
+
  return (
    <div className="mt-4">
+      {/* 批量操作栏 // Logan.Li */}
+      {selectedIds.length > 0 && (
+        <div className="flex items-center gap-2 mb-3">
+          <span className="text-sm text-slate-400">已选择 {selectedIds.length} 项</span>
+          <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-2" />
+            批量删除
+          </Button>
+        </div>
+      )}
+
      <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="w-12">
+                    <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>
@@ -66,76 +142,91 @@ export function AlertRulesTab({
                </TableRow>
              </TableHeader>
              <TableBody>
-                {rules.map((rule) => (
-                  <TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
-                    <TableCell>
-                      <div>
-                        <span className="text-sm font-medium text-slate-200">{rule.name}</span>
-                        {rule.description && (
-                          <p className="text-xs text-slate-500">{rule.description}</p>
-                        )}
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
-                        {rule.source || '--'}
-                      </code>
-                    </TableCell>
-                    <TableCell>
-                      <code className="text-xs text-blue-300">
-                        {rule.expression || '--'}
-                      </code>
-                    </TableCell>
-                    <TableCell>
-                      {rule.severity === 'critical' ? (
-                        <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
-                          严重
-                        </Badge>
-                      ) : rule.severity === 'warning' ? (
-                        <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
-                          警告
-                        </Badge>
-                      ) : (
-                        <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
-                          提示
-                        </Badge>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-sm text-slate-300">{(rule.duration || 0) / 60}分钟</span>
-                    </TableCell>
-                    <TableCell>
-                      {renderRuleChannels(rule, notifyChannels)}
-                    </TableCell>
-                    <TableCell>
-                      <Switch
-                        checked={!!rule.enabled}
-                        className="data-[state=checked]:bg-blue-600"
-                        onCheckedChange={() => handleToggleRule(rule.id)}
-                      />
-                    </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={() => onEditRule(rule)}
-                        >
-                          <Settings className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-8 w-8 text-slate-400 hover:text-red-400"
-                          onClick={() => handleDeleteRule(rule.id)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
+                {rules.length === 0 ? (
+                  <TableRow className="border-slate-800">
+                    <TableCell colSpan={COL_SPAN} className="text-center text-slate-500 py-12">
+                      暂无告警规则
                    </TableCell>
                  </TableRow>
-                ))}
+                ) : (
+                  rules.map((rule) => (
+                    <TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedIds.includes(rule.id)}
+                          onCheckedChange={() => toggleSelect(rule.id)}
+                          className="border-slate-600"
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <div>
+                          <span className="text-sm font-medium text-slate-200">{rule.name}</span>
+                          {rule.description && (
+                            <p className="text-xs text-slate-500">{rule.description}</p>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
+                          {rule.source || '--'}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-xs text-blue-300">
+                          {rule.expression || '--'}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        {rule.severity === 'critical' ? (
+                          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+                            严重
+                          </Badge>
+                        ) : rule.severity === 'warning' ? (
+                          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+                            警告
+                          </Badge>
+                        ) : (
+                          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+                            提示
+                          </Badge>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-slate-300">{(rule.duration || 0) / 60}分钟</span>
+                      </TableCell>
+                      <TableCell>
+                        {renderRuleChannels(rule, notifyChannels)}
+                      </TableCell>
+                      <TableCell>
+                        <Switch
+                          checked={!!rule.enabled}
+                          className="data-[state=checked]:bg-blue-600"
+                          onCheckedChange={() => handleToggleRule(rule.id)}
+                        />
+                      </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={() => onEditRule(rule)}
+                          >
+                            <Settings className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 text-slate-400 hover:text-red-400"
+                            onClick={() => handleDeleteRule(rule.id)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
              </TableBody>
            </Table>
          </div>
@@ -191,6 +191,9 @@ export const alertApi = {
  deleteRule: async (id: number | string) => {
    return http.delete(`/alerts/rules/${id}`);
  },
+  batchDeleteRules: async (ids: number[]) => {
+    return http.delete('/alerts/rules/batch-delete', { ids });
+  },
  toggleRule: async (id: number | string) => {
    return http.post(`/alerts/rules/${id}/toggle`);
  },
@@ -285,6 +288,9 @@ export const cronJobApi = {
  executeJob: async (id: number | string) => {
    return http.post(`/cron-jobs/${id}/execute`);
  },
+  batchDelete: async (ids: number[]) => {
+    return http.delete('/cron-jobs/batch-delete', { ids });
+  },
 };

 // ==================== 脚本 API ====================
@@ -304,6 +310,9 @@ export const scriptApi = {
  deleteScript: async (id: number | string) => {
    return http.delete(`/scripts/${id}`);
  },
+  batchDelete: async (ids: number[]) => {
+    return http.post('/scripts/batch-delete', { ids });
+  },
  executeScript: async (id: number | string) => {
    return http.post(`/scripts/${id}/execute`);
  },
@@ -488,6 +497,10 @@ export const regionApi = {
  delete: async (id: number | string) => {
    return http.delete(`/regions/${id}`);
  },
+  // 批量删除 // Logan.Li
+  batchDelete: async (ids: number[]) => {
+    return http.delete('/regions/batch-delete', { ids });
+  },
 };

 // ==================== 资源模型 API ====================
@@ -580,6 +593,10 @@ export const ansibleApi = {
  deletePlaybook: async (id: number | string) => {
    return http.delete(`/ansible/playbooks/${id}`);
  },
+  // 批量删除 Playbook // Logan.Li
+  batchDeletePlaybooks: async (ids: number[]) => {
+    return http.delete('/ansible/playbooks/batch-delete', { ids });
+  },
  executePlaybook: async (id: number | string) => {
    return http.post(`/ansible/playbooks/${id}/execute`);
  },
@@ -75,8 +75,8 @@ export const http = {
    request<T>('POST', url, body),
  put: <T = any>(url: string, body?: any) =>
    request<T>('PUT', url, body),
-  delete: <T = any>(url: string) =>
-    request<T>('DELETE', url),
+  delete: <T = any>(url: string, body?: any) =>
+    request<T>('DELETE', url, body),
 };

 export default http;