feat: opsx-loki 全面升级 — 前端重构/用户与LDAP/部署向导/日志查询

基于 WEB-UI-Development-Guide 标准的整体升级,并更名 LokiDeploy → opsx-loki。前端(Gin+React+shadcn/ui): - 按 02/07 章重构:页面域化拆分(无超 400 行文件)、PageContainer/ListQuery、反馈分级(成功静默/失败 toast/危险确认)、401 单飞刷新+队列重放 - 暗色模式(next-themes)+ 语义 Token(--primary 品牌色/success/warning/info) - 部署向导(状态推导四步:环境→存储→Loki→采集,内嵌表单闭环) - 日志查询页:LogQL 标签构建器/拖拽直方图/日志上下文/Live Tail/查询历史 - 按用户+标签策略的查询授权(服务端强制合并策略) 后端(Go+Gin+JSON DB): - 简单用户管理(仅 admin,无 RBAC)+ TokenVersion 会话吊销 + 登录 IP 限流 - LDAP 接入:配置(AES 加密存储/hasPassword 脱敏)/测试连接/批量导入/登录 - 存储配置测试连接(SigV4 零依赖)+ 桶不存在自动创建 - Loki 三模式部署修复:SSH 密钥认证、3.x 配置模板、ruler 对象存储嵌套块、凭证解密、孤儿 deploying 状态恢复、Grafana 部署(可选默认关)+面板导入 - DaemonSet 采集纯 YAML(去 helm 依赖)+ DNS 自愈回退 ClusterIP + 集群名标签 - 日志查询代理:cluster-svc 经 kube-apiserver proxy/url 直连 + cursor 翻页 - 统一 log 命名空间;部署就绪探活;Grafana 访问地址自动记录修复:run.sh 增量编译检测、Sanitized 脱敏补全、LokiDeployment Update 白名单、健康检查 CreatedAt 零值等 10+ 存量 bug。数据兼容:DB 沿用旧 lokideploy.json(新名优先);localStorage 一次性迁移; HKDF 加密前缀保留(已加密凭证不受影响)。
2026-10-24 13:20:12 +08:00
1 parent 327e282356
commit f9c6c1d826
@@ -0,0 +1,144 @@
+import { memo } from 'react'
+import {
+  RadioTower,
+  Trash2,
+  Upload,
+  Download,
+  Server,
+  Monitor,
+  Cloud,
+  type LucideIcon,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { StatusBadge } from '@/components/StatusBadge'
+import { InfoRow } from '@/components/InfoRow'
+import type { Collector } from '@/types'
+
+// 采集器类型元数据（图标 + 类型徽章配色）
+const COLLECTOR_TYPE_META: Record<string, { label: string; icon: LucideIcon; color: string }> = {
+  'host-promtail': { label: '主机 Promtail', icon: Monitor, color: 'bg-purple-100 text-purple-700' },
+  'k8s-daemonset': { label: 'K8s DaemonSet', icon: Cloud, color: 'bg-info/10 text-info' },
+  'k8s-fluentbit-sidecar': { label: 'K8s Sidecar', icon: Server, color: 'bg-cyan-100 text-cyan-700' },
+}
+
+const FALLBACK_META = { label: '', icon: RadioTower, color: 'bg-muted text-slate-600' }
+
+interface CollectorCardProps {
+  collector: Collector
+  /** 部署/卸载进行中的采集器 ID（按钮 loading 态） */
+  operating: number | null
+  onInstall: (id: number) => void
+  onUninstall: (id: number) => void
+  onDelete: (c: Collector) => void
+}
+
+/** 采集器卡片 — 列表项展示与操作入口（部署/卸载/删除） */
+export const CollectorCard = memo(function CollectorCard({
+  collector,
+  operating,
+  onInstall,
+  onUninstall,
+  onDelete,
+}: CollectorCardProps) {
+  const meta = COLLECTOR_TYPE_META[collector.type] ?? {
+    ...FALLBACK_META,
+    label: collector.type,
+  }
+  const Icon = meta.icon
+  const isBusy = operating === collector.id
+
+  return (
+    <Card className="border-border hover:shadow-md transition-shadow">
+      <CardContent className="p-5">
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <Icon className="w-5 h-5 text-primary flex-shrink-0" />
+            <div className="min-w-0">
+              <h3 className="font-semibold text-foreground truncate">
+                {collector.name}
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                关联 Loki：{collector.lokiDeployment?.name || '未知'}
+              </p>
+            </div>
+          </div>
+          <StatusBadge status={collector.status} />
+        </div>
+
+        <div className="space-y-1.5 text-xs text-muted-foreground mb-3">
+          <div className="flex justify-between">
+            <span>类型</span>
+            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${meta.color}`}>
+              {meta.label}
+            </span>
+          </div>
+          {collector.host && (
+            <InfoRow
+              label="主机"
+              value={`${collector.host.name}（${collector.host.hostIP}）`}
+              valueClass="truncate max-w-[200px]"
+            />
+          )}
+          {collector.cluster && (
+            <InfoRow
+              label="集群"
+              value={collector.cluster.name}
+              valueClass="truncate max-w-[200px]"
+            />
+          )}
+          {collector.targetDeployment && (
+            <InfoRow
+              label="目标 Deployment"
+              value={collector.targetDeployment}
+              valueClass="truncate max-w-[200px]"
+            />
+          )}
+          {collector.namespace && (
+            <InfoRow label="命名空间" value={collector.namespace} valueClass="truncate max-w-[200px]" />
+          )}
+          {collector.logPath && (
+            <InfoRow label="日志路径" value={collector.logPath} valueClass="truncate max-w-[200px]" />
+          )}
+          {collector.statusMessage && (
+            <div className="p-2 bg-muted rounded text-xs mt-1">
+              {collector.statusMessage}
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-2 pt-3 border-t border-border">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onInstall(collector.id)}
+            disabled={isBusy}
+          >
+            <Upload className="w-3 h-3 mr-1" />
+            {isBusy ? '处理中...' : '部署'}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={() => onUninstall(collector.id)}
+            disabled={isBusy}
+          >
+            <Download className="w-3 h-3 mr-1" />
+            卸载
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-label={`删除采集器 ${collector.name}`}
+            className="text-destructive hover:text-destructive hover:bg-destructive/10"
+            onClick={() => onDelete(collector)}
+          >
+            <Trash2 className="w-3 h-3" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+})
@@ -0,0 +1,369 @@
+import { memo, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { collectorApi } from '@/api'
+import { statusLabel } from '@/lib/utils'
+import { toast } from 'sonner'
+import type { Cluster, Host, LokiDeployment } from '@/types'
+
+type CollectorType = 'host-promtail' | 'k8s-daemonset' | 'k8s-fluentbit-sidecar'
+
+const COLLECTOR_TYPES: Array<{ value: CollectorType; label: string }> = [
+  { value: 'host-promtail', label: '主机 Promtail（SSH）' },
+  { value: 'k8s-daemonset', label: 'K8s Promtail DaemonSet' },
+  { value: 'k8s-fluentbit-sidecar', label: 'K8s Fluent Bit Sidecar' },
+]
+
+// 表单 schema：zod 为唯一校验源，消息中文且具体
+const collectorFormSchema = z
+  .object({
+    name: z.string().min(1, '请输入采集器名称'),
+    type: z.enum(['host-promtail', 'k8s-daemonset', 'k8s-fluentbit-sidecar']),
+    lokiDeploymentID: z.string().min(1, '请选择关联的 Loki 部署'),
+    hostID: z.string(),
+    clusterID: z.string(),
+    targetDeployment: z.string(),
+    namespace: z.string(),
+    logPath: z.string(),
+    /** 旧版表单即无录入入口，仅透传（默认空串） */
+    labels: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.type === 'host-promtail' && !data.hostID) {
+      ctx.addIssue({ code: 'custom', path: ['hostID'], message: '请选择目标主机' })
+    }
+    if (data.type !== 'host-promtail' && !data.clusterID) {
+      ctx.addIssue({ code: 'custom', path: ['clusterID'], message: '请选择目标集群' })
+    }
+    if (
+      data.type === 'k8s-fluentbit-sidecar' &&
+      !data.targetDeployment.trim()
+    ) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['targetDeployment'],
+        message: '请填写目标 Deployment 名称',
+      })
+    }
+  })
+
+type CollectorFormValues = z.infer<typeof collectorFormSchema>
+
+const DEFAULT_VALUES: CollectorFormValues = {
+  name: '',
+  type: 'host-promtail',
+  lokiDeploymentID: '',
+  hostID: '',
+  clusterID: '',
+  targetDeployment: '',
+  namespace: '',
+  logPath: '',
+  labels: '',
+}
+
+interface CollectorFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** 创建成功回调（父级刷新列表并回到第 1 页） */
+  onCreated: () => void
+  deployments: LokiDeployment[]
+  clusters: Cluster[]
+  hosts: Host[]
+}
+
+/** 新建采集器弹窗 — react-hook-form + zod；类型切换条件显示主机/集群选择与字段 */
+export const CollectorFormDialog = memo(function CollectorFormDialog({
+  open,
+  onOpenChange,
+  onCreated,
+  deployments,
+  clusters,
+  hosts,
+}: CollectorFormDialogProps) {
+  const [submitting, setSubmitting] = useState(false)
+
+  const form = useForm<CollectorFormValues>({
+    resolver: zodResolver(collectorFormSchema),
+    defaultValues: DEFAULT_VALUES,
+  })
+  const collectorType = form.watch('type')
+
+  // 打开时重置（关闭重置时机明确）
+  useEffect(() => {
+    if (open) {
+      form.reset(DEFAULT_VALUES)
+    }
+  }, [open, form])
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    setSubmitting(true)
+    try {
+      await collectorApi.create({
+        name: values.name,
+        type: values.type,
+        lokiDeploymentID: Number(values.lokiDeploymentID),
+        hostID:
+          values.type === 'host-promtail' && values.hostID
+            ? Number(values.hostID)
+            : undefined,
+        clusterID:
+          values.type !== 'host-promtail' && values.clusterID
+            ? Number(values.clusterID)
+            : undefined,
+        targetDeployment:
+          values.type === 'k8s-fluentbit-sidecar' ? values.targetDeployment : undefined,
+        namespace: values.type !== 'host-promtail' ? values.namespace : undefined,
+        logPath: values.logPath,
+        labels: values.labels,
+      })
+      onOpenChange(false)
+      onCreated()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '创建采集器失败')
+    } finally {
+      setSubmitting(false)
+    }
+  })
+
+  const isHostType = collectorType === 'host-promtail'
+  const isK8sType = collectorType !== 'host-promtail'
+  const isSidecarType = collectorType === 'k8s-fluentbit-sidecar'
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>添加采集策略</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={onSubmit} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>名称 *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="app-logs-collector" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>采集器类型</FormLabel>
+                    <FormControl>
+                      <Select value={field.value} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {COLLECTOR_TYPES.map((t) => (
+                            <SelectItem key={t.value} value={t.value}>
+                              {t.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="lokiDeploymentID"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>关联 Loki 部署 *</FormLabel>
+                  <FormControl>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="选择已部署的 Loki（推送目标）" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {deployments.map((d) => (
+                          <SelectItem key={d.id} value={String(d.id)}>
+                            {d.name}（{statusLabel(d.status)}）
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {isHostType && (
+              <FormField
+                control={form.control}
+                name="hostID"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>目标主机 *</FormLabel>
+                    <FormControl>
+                      <Select value={field.value} onValueChange={field.onChange}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择主机" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {hosts.map((h) => (
+                            <SelectItem key={h.id} value={String(h.id)}>
+                              {h.name}（{h.hostIP}）
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {isK8sType && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="clusterID"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>目标集群 *</FormLabel>
+                      <FormControl>
+                        <Select value={field.value} onValueChange={field.onChange}>
+                          <SelectTrigger>
+                            <SelectValue placeholder="选择集群" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {clusters.map((c) => (
+                              <SelectItem key={c.id} value={String(c.id)}>
+                                {c.name}（{statusLabel(c.status)}）
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <FormField
+                    control={form.control}
+                    name="namespace"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>命名空间</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={collectorType === 'k8s-daemonset' ? 'logging' : 'default'}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {isSidecarType && (
+                    <FormField
+                      control={form.control}
+                      name="targetDeployment"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>目标 Deployment *</FormLabel>
+                          <FormControl>
+                            <Input placeholder="my-app" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+              </>
+            )}
+
+            <FormField
+              control={form.control}
+              name="logPath"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>采集日志路径</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={isHostType ? '/var/log/*.log' : '/var/log/app/*.log'}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                  {isHostType && (
+                    <p className="text-xs text-muted-foreground">
+                      支持 glob 通配(如 /var/log/*.log /var/log/syslog);多个路径用逗号分隔
+                    </p>
+                  )}
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="labels"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>自定义标签（JSON,可选）</FormLabel>
+                  <FormControl>
+                    <Input placeholder='{"env": "prod", "team": "ops"}' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                  <p className="text-xs text-muted-foreground">
+                    合法 JSON 时将附加到每条日志的标签,便于在 Loki/Grafana 中筛选;留空则不加
+                  </p>
+                </FormItem>
+              )}
+            />
+
+            <Button
+              type="submit"
+              className="w-full bg-primary hover:bg-primary/90"
+              disabled={submitting}
+            >
+              {submitting ? '创建中...' : '创建并部署'}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+})
@@ -0,0 +1,179 @@
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { RadioTower, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { clusterApi, collectorApi, deploymentApi, hostApi } from '@/api'
+import { PageContainer } from '@/components/PageContainer'
+import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { EmptyState } from '@/components/EmptyState'
+import { ErrorState } from '@/components/ErrorState'
+import { PaginationBar } from '@/components/PaginationBar'
+import { ConfirmDialog } from '@/components/ConfirmDialog'
+import { toast } from 'sonner'
+import { useListQuery } from '@/hooks/useListQuery'
+import type { Cluster, Collector, Host, LokiDeployment } from '@/types'
+import { CollectorCard } from './components/CollectorCard'
+import { CollectorFormDialog } from './components/CollectorFormDialog'
+
+/**
+ * 日志采集页 — 采集策略编排：列表走 useListQuery（取消+版本号），
+ * Loki 部署/集群/主机下拉数据为页面局部加载（与列表分页解耦）。
+ * 部署(install)/卸载(uninstall)/删除保留；成功操作静默（列表刷新即反馈）。
+ */
+const CollectorsPage = memo(function CollectorsPage() {
+  const query = useListQuery<Collector>((params, signal) =>
+    collectorApi.list(params, { signal })
+  )
+
+  // 表单下拉数据：一次性局部加载
+  const [deployments, setDeployments] = useState<LokiDeployment[]>([])
+  const [clusters, setClusters] = useState<Cluster[]>([])
+  const [hosts, setHosts] = useState<Host[]>([])
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<Collector | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  /** 部署/卸载指令进行中的采集器 ID（按钮 loading + 防重复点击） */
+  const [operating, setOperating] = useState<number | null>(null)
+
+  // 操作后延时刷新列表/清除按钮态的定时器（卸载清理）
+  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((id) => clearTimeout(id))
+      timeoutsRef.current = []
+    }
+  }, [])
+
+  const addTimeout = useCallback((cb: () => void, delay: number) => {
+    timeoutsRef.current.push(setTimeout(cb, delay))
+  }, [])
+
+  // 下拉数据加载（失败仅提示，不阻塞列表）
+  useEffect(() => {
+    let cancelled = false
+    Promise.all([
+      deploymentApi.list({ page: 1, pageSize: 100 }),
+      clusterApi.list({ page: 1, pageSize: 100 }),
+      hostApi.list({ page: 1, pageSize: 100 }),
+    ])
+      .then(([deployRes, clusterRes, hostRes]) => {
+        if (cancelled) return
+        setDeployments(deployRes.list)
+        setClusters(clusterRes.list)
+        setHosts(hostRes.list)
+      })
+      .catch((err) => {
+        toast.error(err instanceof Error ? err.message : '加载 Loki 部署/集群/主机数据失败')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const handleAction = useCallback(
+    async (id: number, action: 'install' | 'uninstall') => {
+      setOperating(id)
+      try {
+        await collectorApi[action](id)
+        addTimeout(query.refresh, 3000)
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : action === 'install' ? '部署采集器失败' : '卸载采集器失败'
+        )
+      } finally {
+        addTimeout(() => setOperating(null), 3000)
+      }
+    },
+    [query, addTimeout]
+  )
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await collectorApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除采集器失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  return (
+    <PageContainer
+      title="日志采集"
+      description="为主机与集群配置日志采集策略，日志将推送到关联的 Loki"
+      action={
+        <Button
+          className="bg-primary hover:bg-primary/90"
+          onClick={() => setFormOpen(true)}
+        >
+          <Plus className="w-4 h-4 mr-1" />
+          添加采集策略
+        </Button>
+      }
+    >
+      {query.loading ? (
+        <LoadingSpinner className="h-64" />
+      ) : query.error ? (
+        <ErrorState message={query.error} onRetry={query.refresh} />
+      ) : query.list.length === 0 ? (
+        <EmptyState
+          icon={RadioTower}
+          title='暂无采集策略'
+          description="新建一个日志采集器，关联已部署的 Loki"
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {query.list.map((collector) => (
+              <CollectorCard
+                key={collector.id}
+                collector={collector}
+                operating={operating}
+                onInstall={(id) => handleAction(id, 'install')}
+                onUninstall={(id) => handleAction(id, 'uninstall')}
+                onDelete={setDeleteTarget}
+              />
+            ))}
+          </div>
+          <PaginationBar
+            page={query.page}
+            pageSize={query.pageSize}
+            total={query.total}
+            onPageChange={query.setPage}
+          />
+        </>
+      )}
+
+      <CollectorFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+        deployments={deployments}
+        clusters={clusters}
+        hosts={hosts}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.name}
+        description={
+          deleteTarget
+            ? `确定要删除「${deleteTarget.name}」吗？删除时将自动卸载采集端，此操作不可恢复。`
+            : undefined
+        }
+        loading={deleting}
+        onConfirm={handleDelete}
+      />
+    </PageContainer>
+  )
+})
+
+export default CollectorsPage