From ee8929115e58f0a024d603689b3cf839851436c6 Mon Sep 17 00:00:00 2001
From: luckone <1139448596@qq.com>
Date: Wed, 30 Sep 2026 16:11:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E9=80=9A=E7=9F=A5=E9=A1=B5?=
 =?UTF-8?q?=E6=8B=86=E5=88=86=E4=B8=BA=E7=BB=84=E4=BB=B6=EF=BC=8C1095=20?=
 =?UTF-8?q?=E8=A1=8C=E9=99=8D=E5=88=B0=20605=20=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

页面此前接近 1100 行，超过 CLAUDE.md 的 800 行硬上限。按项目的 _components/
约定拆开，每个文件都能单独读懂：

  _components/channel-fields.ts   渠道字段表与配置值解析（纯数据，无视图）
  _components/channel-form.tsx    按字段定义渲染控件的表单
  _components/delivery-list.tsx   投递记录表与筛选
  _components/stat-tile.tsx       概览统计卡片
  page.tsx                        只负责编排：加载、表单状态、调接口

拆分是纯模块搬移，未改行为；tsc 与 next build 均通过，/system/notify 仍正常
预渲染。

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 .../notify/_components/channel-fields.ts      | 181 ++++++
 .../notify/_components/channel-form.tsx       | 153 +++++
 .../notify/_components/delivery-list.tsx      | 184 ++++++
 .../system/notify/_components/stat-tile.tsx   |  21 +
 web/src/app/(main)/system/notify/page.tsx     | 528 +-----------------
 5 files changed, 558 insertions(+), 509 deletions(-)
 create mode 100644 web/src/app/(main)/system/notify/_components/channel-fields.ts
 create mode 100644 web/src/app/(main)/system/notify/_components/channel-form.tsx
 create mode 100644 web/src/app/(main)/system/notify/_components/delivery-list.tsx
 create mode 100644 web/src/app/(main)/system/notify/_components/stat-tile.tsx

diff --git a/web/src/app/(main)/system/notify/_components/channel-fields.ts b/web/src/app/(main)/system/notify/_components/channel-fields.ts
new file mode 100644
index 0000000..441ee3f
--- /dev/null
+++ b/web/src/app/(main)/system/notify/_components/channel-fields.ts
@@ -0,0 +1,181 @@
+// 渠道字段表与配置值的解析工具。
+//
+// 与页面拆开是因为这一份是**数据**而不是视图：它描述每种渠道有哪些字段、
+// 各自该用什么控件，以及表单文本到配置值（JSON）的双向转换。
+// 单独放一个文件后，新增渠道只需要动这里，页面本身不必改。
+// 渠道类型的展示名与简介。放在前端是因为它只影响文案，后端不需要知道。
+export const KIND_LABEL: Record<string, string> = {
+  dingtalk: "钉钉",
+  feishu: "飞书",
+  wecom: "企业微信",
+  webhook: "通用 Webhook",
+  telegram: "Telegram",
+  email: "邮件",
+};
+
+// 各渠道的配置字段定义。
+//
+// 这里刻意保留一份前端字段表，而不是让后端下发 schema：后端只负责
+// Validate（必填/格式），UI 需要的是布局与控件类型，两者关注的不是同一件事。
+// 唯一的耦合点是 secret_keys —— 哪些字段该渲染成密码框由后端给出，
+// 因为只有渠道实现自己清楚哪些值算凭据（企业微信的整个 Webhook 就是凭据，
+// 而钉钉的只是其中一个 secret）。新增渠道时这里少一个条目只会让表单变空白，
+// 不会静默出错（下面的 hasFields 会提示）。
+export type FieldKind = "text" | "password" | "number" | "select" | "textarea" | "switch" | "kv" | "list";
+export interface FieldDef {
+  key: string;
+  label: string;
+  kind: FieldKind;
+  placeholder?: string;
+  help?: string;
+  options?: { value: string; label: string }[];
+}
+export const CHANNEL_FIELDS: Record<string, FieldDef[]> = {
+  dingtalk: [
+    {
+      key: "webhook",
+      label: "Webhook 地址",
+      kind: "text",
+      placeholder: "https://oapi.dingtalk.com/robot/send?access_token=...",
+    },
+    {
+      key: "secret",
+      label: "加签密钥",
+      kind: "password",
+      help: "机器人安全设置选「加签」时填写；选「自定义关键词」或未开启安全设置则留空",
+    },
+  ],
+  feishu: [
+    {
+      key: "webhook",
+      label: "Webhook 地址",
+      kind: "text",
+      placeholder: "https://open.feishu.cn/open-apis/bot/v2/hook/...",
+    },
+    { key: "secret", label: "签名校验密钥", kind: "password", help: "机器人开启「签名校验」时填写，否则留空" },
+  ],
+  wecom: [
+    {
+      key: "webhook",
+      label: "Webhook 地址",
+      kind: "text",
+      placeholder: "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=...",
+    },
+  ],
+  webhook: [
+    { key: "url", label: "目标 URL", kind: "text", placeholder: "https://your-endpoint.example.com/hook" },
+    {
+      key: "method",
+      label: "请求方法",
+      kind: "select",
+      options: [
+        { value: "POST", label: "POST（带请求体）" },
+        { value: "PUT", label: "PUT（带请求体）" },
+        { value: "PATCH", label: "PATCH（带请求体）" },
+        { value: "GET", label: "GET（不带请求体）" },
+      ],
+    },
+    { key: "headers", label: "自定义请求头", kind: "kv", help: "每行 KEY=VALUE，例如 Authorization=Bearer xxx" },
+    {
+      key: "body_template",
+      label: "请求体模板",
+      kind: "textarea",
+      help:
+        "留空用内置默认模板。变量：{{.Title}} {{.Batch}} {{.Count}} {{.HomeURL}} {{.SentAt}}，" +
+        "以及 range .Items 下的 .Name/.VulnClass/.Severity/.Summary/.Assets/.DetailURL/.StatusLabel。" +
+        "插入字符串请用 {{json .Xxx}} 而不是 {{.Xxx}}，否则标题里的引号会破坏 JSON。",
+    },
+  ],
+  telegram: [
+    { key: "bot_token", label: "Bot Token", kind: "password", placeholder: "123456:ABC-DEF..." },
+    { key: "chat_id", label: "Chat ID", kind: "text", placeholder: "-1001234567890" },
+    {
+      key: "base_url",
+      label: "API 地址",
+      kind: "text",
+      placeholder: "https://api.telegram.org",
+      help: "留空用官方地址；自建 Bot API 反代时填写",
+    },
+  ],
+  email: [
+    { key: "host", label: "SMTP 服务器", kind: "text", placeholder: "smtp.example.com" },
+    {
+      key: "port",
+      label: "端口",
+      kind: "number",
+      placeholder: "587",
+      help: "587 走 STARTTLS；465 请把「隐式 TLS」打开",
+    },
+    { key: "username", label: "账号", kind: "text" },
+    { key: "password", label: "密码 / 授权码", kind: "password" },
+    { key: "from", label: "发件人", kind: "text", placeholder: "artex@example.com" },
+    { key: "to", label: "收件人", kind: "list", help: "多个地址用逗号分隔" },
+    { key: "tls", label: "隐式 TLS", kind: "switch", help: "465 端口打开；587 保持关闭（会自动 STARTTLS）" },
+  ],
+};
+
+export const SEVERITY_OPTIONS = [
+  { value: "", label: "不限" },
+  { value: "low", label: "低危及以上" },
+  { value: "medium", label: "中危及以上" },
+  { value: "high", label: "高危及以上" },
+  { value: "critical", label: "仅严重" },
+];
+
+export type ChannelForm = {
+  name: string;
+  kind: string;
+  mode: "realtime" | "digest";
+  enabled: boolean;
+  ratePerMin: string;
+  config: Record<string, unknown>;
+  minSeverity: string;
+  includeText: string;
+  excludeText: string;
+  taskIDsText: string;
+  assetIDsText: string;
+  onStatusChange: boolean;
+};
+
+export const emptyForm = (kind: string): ChannelForm => ({
+  name: "",
+  kind,
+  mode: "realtime",
+  enabled: true,
+  ratePerMin: "",
+  config: {},
+  minSeverity: "",
+  includeText: "",
+  excludeText: "",
+  taskIDsText: "",
+  assetIDsText: "",
+  onStatusChange: false,
+});
+
+// parseKV 解析「每行 KEY=VALUE」的文本域。
+export function parseKV(text: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const line of text.split("\n")) {
+    const t = line.trim();
+    if (!t) continue;
+    const i = t.indexOf("=");
+    if (i > 0) out[t.slice(0, i).trim()] = t.slice(i + 1).trim();
+  }
+  return out;
+}
+// parseIDs 解析逗号/空白分隔的 id 列表。
+export function parseIDs(text: string): number[] {
+  return text
+    .split(/[\s,，]+/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((s) => Number(s))
+    .filter((n) => Number.isFinite(n) && n > 0);
+}
+// parseKeywords 解析行/逗号分隔的关键词列表（漏洞类型名可能含空格，所以按行或逗号切）。
+export function parseKeywords(text: string): string[] {
+  return text
+    .split(/[\n,，]+/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
diff --git a/web/src/app/(main)/system/notify/_components/channel-form.tsx b/web/src/app/(main)/system/notify/_components/channel-form.tsx
new file mode 100644
index 0000000..bc16292
--- /dev/null
+++ b/web/src/app/(main)/system/notify/_components/channel-form.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { CheckIcon } from "lucide-react";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import type { NotificationFilter } from "@/lib/types";
+
+// asText / inputType 是本文件内的取值辅助（与控件渲染强相关），不放在 channel-fields。
+import { type FieldDef, type FieldKind, SEVERITY_OPTIONS } from "./channel-fields";
+
+// asText 把任意配置值渲染成输入框可用的字符串。
+// config 来自 JSON，值可能是 string / number / boolean / array / null，
+// 这里只关心「能不能塞进文本框」，具体序列化由 buildConfig 负责。
+function asText(v: unknown): string {
+  if (typeof v === "string") return v;
+  if (v === null || v === undefined) return "";
+  return String(v);
+}
+
+// inputType 把字段类型映射到 input 的 type 属性。
+function inputType(kind: FieldKind): "text" | "password" | "number" {
+  if (kind === "password") return "password";
+  if (kind === "number") return "number";
+  return "text";
+}
+
+// ConfigField 按字段定义渲染对应的控件。
+//
+// 掩码字段的处理是这里唯一的讲究：输入框**不显示**掩码值本身，只显示一行
+// 「已保存」提示。这样界面上就只有一个规则——框里有字就是用户填的，
+// 空框就是空值。若把 "__masked__:…abc123" 塞进输入框，用户会以为那是要自己
+// 删掉的占位文本，反而更容易误清凭据。
+export function ConfigField({
+  def,
+  value,
+  isSecret,
+  onChange,
+}: {
+  def: FieldDef;
+  value: unknown;
+  isSecret: boolean;
+  onChange: (v: unknown) => void;
+}) {
+  const id = `n-cfg-${def.key}`;
+  const raw = asText(value);
+  // 后端回显的掩码值：形如 "__masked__:…abc123"，尾部是原值的可辨识片段。
+  const masked = isSecret && raw.startsWith("__masked__");
+  const maskedTail = masked ? (raw.split("…")[1] ?? "") : "";
+
+  if (def.kind === "switch") {
+    return (
+      <div className="flex items-center gap-2 text-sm">
+        <Switch checked={value === true} onCheckedChange={onChange} aria-label={def.label} />
+        {def.label}
+        {def.help && <span className="text-muted-foreground">（{def.help}）</span>}
+      </div>
+    );
+  }
+
+  if (def.kind === "select") {
+    return (
+      <div className="grid gap-2">
+        <Label>{def.label}</Label>
+        <Select value={raw || def.options?.[0]?.value} onValueChange={onChange}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {(def.options ?? []).map((o) => (
+              <SelectItem key={o.value} value={o.value}>
+                {o.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  }
+
+  // 控件按字段类型分派。用 if 链而不是嵌套三元，是因为这里要区分四种控件，
+  // 三层三元读起来已经要停下来数括号了。
+  function control() {
+    if (def.kind === "textarea" || def.kind === "kv") {
+      return (
+        <Textarea
+          id={id}
+          className="font-mono"
+          placeholder={def.placeholder}
+          value={masked ? "" : raw}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+    }
+    if (def.kind === "list") {
+      return (
+        <Input
+          id={id}
+          value={Array.isArray(value) ? (value as string[]).join(", ") : raw}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={def.placeholder}
+        />
+      );
+    }
+    return (
+      <Input
+        id={id}
+        className={def.kind === "text" ? "font-mono" : ""}
+        type={inputType(def.kind)}
+        placeholder={def.placeholder}
+        value={masked ? "" : raw}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    );
+  }
+
+  const hint = masked ? (
+    <p className="text-muted-foreground flex items-center gap-1 text-xs">
+      <CheckIcon className="size-3" />
+      已保存{maskedTail ? `（尾号 ${maskedTail}）` : ""} · 填入新值即覆盖，清空则删除该项
+    </p>
+  ) : (
+    def.help && <p className="text-muted-foreground text-xs">{def.help}</p>
+  );
+
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor={id}>{def.label}</Label>
+      {control()}
+      {hint}
+    </div>
+  );
+}
+
+// FilterSummary 把过滤条件摘要成一行，让卡片不用展开就能看出这个渠道推什么。
+export function FilterSummary({ filter }: { filter: NotificationFilter }) {
+  const parts: string[] = [];
+  if (filter.min_severity) {
+    parts.push(SEVERITY_OPTIONS.find((o) => o.value === filter.min_severity)?.label ?? filter.min_severity);
+  }
+  if (filter.vulnclass_include?.length) parts.push(`类型含 ${filter.vulnclass_include.length} 词`);
+  if (filter.vulnclass_exclude?.length) parts.push(`排除 ${filter.vulnclass_exclude.length} 词`);
+  if (filter.task_ids?.length) parts.push(`${filter.task_ids.length} 个任务`);
+  if (filter.asset_ids?.length) parts.push(`${filter.asset_ids.length} 个资产`);
+  if (filter.on_status_change) parts.push("含状态变更");
+  if (parts.length === 0) {
+    return <p className="text-muted-foreground text-sm">全部漏洞</p>;
+  }
+  return <p className="text-muted-foreground text-sm">{parts.join(" · ")}</p>;
+}
diff --git a/web/src/app/(main)/system/notify/_components/delivery-list.tsx b/web/src/app/(main)/system/notify/_components/delivery-list.tsx
new file mode 100644
index 0000000..3989a7d
--- /dev/null
+++ b/web/src/app/(main)/system/notify/_components/delivery-list.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+
+import { RefreshCwIcon, RotateCcwIcon } from "lucide-react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { api } from "@/lib/api";
+import { statusMeta, toneClasses } from "@/lib/status";
+import type { NotificationChannel, NotificationDelivery } from "@/lib/types";
+
+// DeliveryList 是投递记录表：可按渠道与状态筛选，失败项可手动重发。
+export function DeliveryList({ channels }: { channels: NotificationChannel[] }) {
+  const [rows, setRows] = React.useState<NotificationDelivery[]>([]);
+  const [total, setTotal] = React.useState(0);
+  const [page, setPage] = React.useState(1);
+  const [channelID, setChannelID] = React.useState<number | undefined>(undefined);
+  const [state, setState] = React.useState<string | undefined>(undefined);
+  const [loading, setLoading] = React.useState(false);
+  const pageSize = 50;
+
+  const load = React.useCallback(() => {
+    setLoading(true);
+    api
+      .notifyDeliveries({ channelId: channelID, state, page, pageSize })
+      .then((r) => {
+        setRows(r.deliveries);
+        setTotal(r.total);
+      })
+      .catch((e) => toast.error("读取投递记录失败：" + (e as Error).message))
+      .finally(() => setLoading(false));
+  }, [channelID, state, page]);
+  React.useEffect(() => {
+    load();
+  }, [load]);
+
+  async function retry(id: number) {
+    try {
+      await api.notifyRetryDelivery(id);
+      toast.success("已重新入队");
+      load();
+    } catch (e) {
+      toast.error("重发失败：" + (e as Error).message);
+    }
+  }
+
+  const maxPage = Math.max(1, Math.ceil(total / pageSize));
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Select
+          value={channelID ? String(channelID) : "all"}
+          onValueChange={(v) => {
+            setPage(1);
+            setChannelID(v === "all" ? undefined : Number(v));
+          }}
+        >
+          <SelectTrigger size="sm" className="w-44">
+            <SelectValue placeholder="全部渠道" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部渠道</SelectItem>
+            {channels.map((c) => (
+              <SelectItem key={c.id} value={String(c.id)}>
+                {c.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select
+          value={state ?? "all"}
+          onValueChange={(v) => {
+            setPage(1);
+            setState(v === "all" ? undefined : v);
+          }}
+        >
+          <SelectTrigger size="sm" className="w-32">
+            <SelectValue placeholder="全部状态" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部状态</SelectItem>
+            {["pending", "sending", "sent", "failed", "skipped"].map((s) => (
+              <SelectItem key={s} value={s}>
+                {statusMeta("delivery", s).label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button size="sm" variant="outline" onClick={load} disabled={loading}>
+          <RefreshCwIcon className={loading ? "animate-spin" : ""} /> 刷新
+        </Button>
+        <span className="text-muted-foreground ml-auto text-xs">共 {total} 条</span>
+      </div>
+
+      <Card className="py-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-40">时间</TableHead>
+              <TableHead>漏洞</TableHead>
+              <TableHead className="w-40">渠道</TableHead>
+              <TableHead className="w-24">状态</TableHead>
+              <TableHead className="w-16">尝试</TableHead>
+              <TableHead>错误</TableHead>
+              <TableHead className="w-20" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-muted-foreground py-8 text-center">
+                  {loading ? "加载中…" : "暂无投递记录"}
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((d) => (
+                <TableRow key={d.id}>
+                  <TableCell className="text-muted-foreground text-xs whitespace-nowrap">
+                    {formatTime(d.created_at)}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className={toneClasses[statusMeta("severity", d.severity).tone]}>
+                        {statusMeta("severity", d.severity).label}
+                      </Badge>
+                      <span className="truncate text-sm">{d.title || "（无标题）"}</span>
+                      {d.event_kind === "finding_status_changed" && (
+                        <Badge variant="outline" className="shrink-0">
+                          状态变更
+                        </Badge>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm">{d.channel_name}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className={toneClasses[statusMeta("delivery", d.state).tone]}>
+                      {statusMeta("delivery", d.state).label}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground text-sm">{d.attempts}</TableCell>
+                  <TableCell className="text-muted-foreground max-w-md text-xs break-all">{d.last_error}</TableCell>
+                  <TableCell>
+                    {/* 只有失败/跳过的才给重发入口：已送达的重发会造成重复推送。 */}
+                    {(d.state === "failed" || d.state === "skipped") && (
+                      <Button size="sm" variant="outline" onClick={() => retry(d.id)}>
+                        <RotateCcwIcon /> 重发
+                      </Button>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </Card>
+
+      {maxPage > 1 && (
+        <div className="flex items-center justify-end gap-2">
+          <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+            上一页
+          </Button>
+          <span className="text-muted-foreground text-sm">
+            {page} / {maxPage}
+          </span>
+          <Button size="sm" variant="outline" disabled={page >= maxPage} onClick={() => setPage((p) => p + 1)}>
+            下一页
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString("zh-CN", { hour12: false });
+}
diff --git a/web/src/app/(main)/system/notify/_components/stat-tile.tsx b/web/src/app/(main)/system/notify/_components/stat-tile.tsx
new file mode 100644
index 0000000..69f86f8
--- /dev/null
+++ b/web/src/app/(main)/system/notify/_components/stat-tile.tsx
@@ -0,0 +1,21 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export function StatTile({ label, value, hint, tone }: { label: string; value: string; hint?: string; tone?: string }) {
+  return (
+    <Card size="sm" className="gap-1">
+      <CardContent>
+        <p className="text-muted-foreground text-xs">{label}</p>
+        <p className={`text-lg font-semibold ${tone === "red" ? "text-rose-600" : ""}`}>{value}</p>
+        {hint && <p className={`text-xs ${tone === "red" ? "text-rose-600" : "text-muted-foreground"}`}>{hint}</p>}
+      </CardContent>
+    </Card>
+  );
+}
+
+// formatBacklog 把积压毫秒数渲染成人看得懂的量级。
+export function formatBacklog(ms: number): string {
+  if (!ms) return "—";
+  if (ms < 60_000) return `${Math.round(ms / 1000)} 秒`;
+  if (ms < 3_600_000) return `${Math.round(ms / 60_000)} 分钟`;
+  return `${(ms / 3_600_000).toFixed(1)} 小时`;
+}
diff --git a/web/src/app/(main)/system/notify/page.tsx b/web/src/app/(main)/system/notify/page.tsx
index 24828c3..bd69a95 100644
--- a/web/src/app/(main)/system/notify/page.tsx
+++ b/web/src/app/(main)/system/notify/page.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { BellIcon, CheckIcon, PlusIcon, RefreshCwIcon, RotateCcwIcon, SendIcon, Trash2Icon } from "lucide-react";
+import { BellIcon, PlusIcon, SendIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
@@ -13,190 +13,29 @@ import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Switch } from "@/components/ui/switch";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/lib/api";
-import { statusMeta, toneClasses } from "@/lib/status";
-import type { NotificationChannel, NotificationDelivery, NotificationFilter, NotificationMeta } from "@/lib/types";
+import type { NotificationChannel, NotificationFilter, NotificationMeta } from "@/lib/types";
 
-// 渠道类型的展示名与简介。放在前端是因为它只影响文案，后端不需要知道。
-const KIND_LABEL: Record<string, string> = {
-  dingtalk: "钉钉",
-  feishu: "飞书",
-  wecom: "企业微信",
-  webhook: "通用 Webhook",
-  telegram: "Telegram",
-  email: "邮件",
-};
-
-// 各渠道的配置字段定义。
-//
-// 这里刻意保留一份前端字段表，而不是让后端下发 schema：后端只负责
-// Validate（必填/格式），UI 需要的是布局与控件类型，两者关注的不是同一件事。
-// 唯一的耦合点是 secret_keys —— 哪些字段该渲染成密码框由后端给出，
-// 因为只有渠道实现自己清楚哪些值算凭据（企业微信的整个 Webhook 就是凭据，
-// 而钉钉的只是其中一个 secret）。新增渠道时这里少一个条目只会让表单变空白，
-// 不会静默出错（下面的 hasFields 会提示）。
-type FieldKind = "text" | "password" | "number" | "select" | "textarea" | "switch" | "kv" | "list";
-interface FieldDef {
-  key: string;
-  label: string;
-  kind: FieldKind;
-  placeholder?: string;
-  help?: string;
-  options?: { value: string; label: string }[];
-}
-const CHANNEL_FIELDS: Record<string, FieldDef[]> = {
-  dingtalk: [
-    {
-      key: "webhook",
-      label: "Webhook 地址",
-      kind: "text",
-      placeholder: "https://oapi.dingtalk.com/robot/send?access_token=...",
-    },
-    {
-      key: "secret",
-      label: "加签密钥",
-      kind: "password",
-      help: "机器人安全设置选「加签」时填写；选「自定义关键词」或未开启安全设置则留空",
-    },
-  ],
-  feishu: [
-    {
-      key: "webhook",
-      label: "Webhook 地址",
-      kind: "text",
-      placeholder: "https://open.feishu.cn/open-apis/bot/v2/hook/...",
-    },
-    { key: "secret", label: "签名校验密钥", kind: "password", help: "机器人开启「签名校验」时填写，否则留空" },
-  ],
-  wecom: [
-    {
-      key: "webhook",
-      label: "Webhook 地址",
-      kind: "text",
-      placeholder: "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=...",
-    },
-  ],
-  webhook: [
-    { key: "url", label: "目标 URL", kind: "text", placeholder: "https://your-endpoint.example.com/hook" },
-    {
-      key: "method",
-      label: "请求方法",
-      kind: "select",
-      options: [
-        { value: "POST", label: "POST（带请求体）" },
-        { value: "PUT", label: "PUT（带请求体）" },
-        { value: "PATCH", label: "PATCH（带请求体）" },
-        { value: "GET", label: "GET（不带请求体）" },
-      ],
-    },
-    { key: "headers", label: "自定义请求头", kind: "kv", help: "每行 KEY=VALUE，例如 Authorization=Bearer xxx" },
-    {
-      key: "body_template",
-      label: "请求体模板",
-      kind: "textarea",
-      help:
-        "留空用内置默认模板。变量：{{.Title}} {{.Batch}} {{.Count}} {{.HomeURL}} {{.SentAt}}，" +
-        "以及 range .Items 下的 .Name/.VulnClass/.Severity/.Summary/.Assets/.DetailURL/.StatusLabel。" +
-        "插入字符串请用 {{json .Xxx}} 而不是 {{.Xxx}}，否则标题里的引号会破坏 JSON。",
-    },
-  ],
-  telegram: [
-    { key: "bot_token", label: "Bot Token", kind: "password", placeholder: "123456:ABC-DEF..." },
-    { key: "chat_id", label: "Chat ID", kind: "text", placeholder: "-1001234567890" },
-    {
-      key: "base_url",
-      label: "API 地址",
-      kind: "text",
-      placeholder: "https://api.telegram.org",
-      help: "留空用官方地址；自建 Bot API 反代时填写",
-    },
-  ],
-  email: [
-    { key: "host", label: "SMTP 服务器", kind: "text", placeholder: "smtp.example.com" },
-    {
-      key: "port",
-      label: "端口",
-      kind: "number",
-      placeholder: "587",
-      help: "587 走 STARTTLS；465 请把「隐式 TLS」打开",
-    },
-    { key: "username", label: "账号", kind: "text" },
-    { key: "password", label: "密码 / 授权码", kind: "password" },
-    { key: "from", label: "发件人", kind: "text", placeholder: "artex@example.com" },
-    { key: "to", label: "收件人", kind: "list", help: "多个地址用逗号分隔" },
-    { key: "tls", label: "隐式 TLS", kind: "switch", help: "465 端口打开；587 保持关闭（会自动 STARTTLS）" },
-  ],
-};
-
-const SEVERITY_OPTIONS = [
-  { value: "", label: "不限" },
-  { value: "low", label: "低危及以上" },
-  { value: "medium", label: "中危及以上" },
-  { value: "high", label: "高危及以上" },
-  { value: "critical", label: "仅严重" },
-];
-
-type ChannelForm = {
-  name: string;
-  kind: string;
-  mode: "realtime" | "digest";
-  enabled: boolean;
-  ratePerMin: string;
-  config: Record<string, unknown>;
-  minSeverity: string;
-  includeText: string;
-  excludeText: string;
-  taskIDsText: string;
-  assetIDsText: string;
-  onStatusChange: boolean;
-};
-
-const emptyForm = (kind: string): ChannelForm => ({
-  name: "",
-  kind,
-  mode: "realtime",
-  enabled: true,
-  ratePerMin: "",
-  config: {},
-  minSeverity: "",
-  includeText: "",
-  excludeText: "",
-  taskIDsText: "",
-  assetIDsText: "",
-  onStatusChange: false,
-});
-
-// parseKV 解析「每行 KEY=VALUE」的文本域。
-function parseKV(text: string): Record<string, string> {
-  const out: Record<string, string> = {};
-  for (const line of text.split("\n")) {
-    const t = line.trim();
-    if (!t) continue;
-    const i = t.indexOf("=");
-    if (i > 0) out[t.slice(0, i).trim()] = t.slice(i + 1).trim();
-  }
-  return out;
-}
-// parseIDs 解析逗号/空白分隔的 id 列表。
-function parseIDs(text: string): number[] {
-  return text
-    .split(/[\s,，]+/)
-    .map((s) => s.trim())
-    .filter(Boolean)
-    .map((s) => Number(s))
-    .filter((n) => Number.isFinite(n) && n > 0);
-}
-// parseKeywords 解析行/逗号分隔的关键词列表（漏洞类型名可能含空格，所以按行或逗号切）。
-function parseKeywords(text: string): string[] {
-  return text
-    .split(/[\n,，]+/)
-    .map((s) => s.trim())
-    .filter(Boolean);
-}
+import {
+  CHANNEL_FIELDS,
+  type ChannelForm,
+  emptyForm,
+  KIND_LABEL,
+  parseIDs,
+  parseKeywords,
+  parseKV,
+  SEVERITY_OPTIONS,
+} from "./_components/channel-fields";
+import { ConfigField, FilterSummary } from "./_components/channel-form";
+import { DeliveryList } from "./_components/delivery-list";
+import { formatBacklog, StatTile } from "./_components/stat-tile";
 
+// 本页只负责编排：加载数据、维护表单状态、调用接口。
+// 字段定义与解析在 _components/channel-fields.ts，控件与过滤摘要在
+// _components/channel-form.tsx，投递记录在 _components/delivery-list.tsx——
+// 拆开是因为它们各自能被单独读懂，而挤在一个文件里时这个页面接近 1100 行。
 export default function NotifyPage() {
   const [meta, setMeta] = React.useState<NotificationMeta | null>(null);
   const [channels, setChannels] = React.useState<NotificationChannel[]>([]);
@@ -764,332 +603,3 @@ export default function NotifyPage() {
     </div>
   );
 }
-
-// asText 把任意配置值渲染成输入框可用的字符串。
-// config 来自 JSON，值可能是 string / number / boolean / array / null，
-// 这里只关心「能不能塞进文本框」，具体序列化由 buildConfig 负责。
-function asText(v: unknown): string {
-  if (typeof v === "string") return v;
-  if (v === null || v === undefined) return "";
-  return String(v);
-}
-
-// inputType 把字段类型映射到 input 的 type 属性。
-function inputType(kind: FieldKind): "text" | "password" | "number" {
-  if (kind === "password") return "password";
-  if (kind === "number") return "number";
-  return "text";
-}
-
-// ConfigField 按字段定义渲染对应的控件。
-//
-// 掩码字段的处理是这里唯一的讲究：输入框**不显示**掩码值本身，只显示一行
-// 「已保存」提示。这样界面上就只有一个规则——框里有字就是用户填的，
-// 空框就是空值。若把 "__masked__:…abc123" 塞进输入框，用户会以为那是要自己
-// 删掉的占位文本，反而更容易误清凭据。
-function ConfigField({
-  def,
-  value,
-  isSecret,
-  onChange,
-}: {
-  def: FieldDef;
-  value: unknown;
-  isSecret: boolean;
-  onChange: (v: unknown) => void;
-}) {
-  const id = `n-cfg-${def.key}`;
-  const raw = asText(value);
-  // 后端回显的掩码值：形如 "__masked__:…abc123"，尾部是原值的可辨识片段。
-  const masked = isSecret && raw.startsWith("__masked__");
-  const maskedTail = masked ? (raw.split("…")[1] ?? "") : "";
-
-  if (def.kind === "switch") {
-    return (
-      <div className="flex items-center gap-2 text-sm">
-        <Switch checked={value === true} onCheckedChange={onChange} aria-label={def.label} />
-        {def.label}
-        {def.help && <span className="text-muted-foreground">（{def.help}）</span>}
-      </div>
-    );
-  }
-
-  if (def.kind === "select") {
-    return (
-      <div className="grid gap-2">
-        <Label>{def.label}</Label>
-        <Select value={raw || def.options?.[0]?.value} onValueChange={onChange}>
-          <SelectTrigger>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {(def.options ?? []).map((o) => (
-              <SelectItem key={o.value} value={o.value}>
-                {o.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    );
-  }
-
-  // 控件按字段类型分派。用 if 链而不是嵌套三元，是因为这里要区分四种控件，
-  // 三层三元读起来已经要停下来数括号了。
-  function control() {
-    if (def.kind === "textarea" || def.kind === "kv") {
-      return (
-        <Textarea
-          id={id}
-          className="font-mono"
-          placeholder={def.placeholder}
-          value={masked ? "" : raw}
-          onChange={(e) => onChange(e.target.value)}
-        />
-      );
-    }
-    if (def.kind === "list") {
-      return (
-        <Input
-          id={id}
-          value={Array.isArray(value) ? (value as string[]).join(", ") : raw}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={def.placeholder}
-        />
-      );
-    }
-    return (
-      <Input
-        id={id}
-        className={def.kind === "text" ? "font-mono" : ""}
-        type={inputType(def.kind)}
-        placeholder={def.placeholder}
-        value={masked ? "" : raw}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    );
-  }
-
-  const hint = masked ? (
-    <p className="text-muted-foreground flex items-center gap-1 text-xs">
-      <CheckIcon className="size-3" />
-      已保存{maskedTail ? `（尾号 ${maskedTail}）` : ""} · 填入新值即覆盖，清空则删除该项
-    </p>
-  ) : (
-    def.help && <p className="text-muted-foreground text-xs">{def.help}</p>
-  );
-
-  return (
-    <div className="grid gap-2">
-      <Label htmlFor={id}>{def.label}</Label>
-      {control()}
-      {hint}
-    </div>
-  );
-}
-
-// FilterSummary 把过滤条件摘要成一行，让卡片不用展开就能看出这个渠道推什么。
-function FilterSummary({ filter }: { filter: NotificationFilter }) {
-  const parts: string[] = [];
-  if (filter.min_severity) {
-    parts.push(SEVERITY_OPTIONS.find((o) => o.value === filter.min_severity)?.label ?? filter.min_severity);
-  }
-  if (filter.vulnclass_include?.length) parts.push(`类型含 ${filter.vulnclass_include.length} 词`);
-  if (filter.vulnclass_exclude?.length) parts.push(`排除 ${filter.vulnclass_exclude.length} 词`);
-  if (filter.task_ids?.length) parts.push(`${filter.task_ids.length} 个任务`);
-  if (filter.asset_ids?.length) parts.push(`${filter.asset_ids.length} 个资产`);
-  if (filter.on_status_change) parts.push("含状态变更");
-  if (parts.length === 0) {
-    return <p className="text-muted-foreground text-sm">全部漏洞</p>;
-  }
-  return <p className="text-muted-foreground text-sm">{parts.join(" · ")}</p>;
-}
-
-function StatTile({ label, value, hint, tone }: { label: string; value: string; hint?: string; tone?: string }) {
-  return (
-    <Card size="sm" className="gap-1">
-      <CardContent>
-        <p className="text-muted-foreground text-xs">{label}</p>
-        <p className={`text-lg font-semibold ${tone === "red" ? "text-rose-600" : ""}`}>{value}</p>
-        {hint && <p className={`text-xs ${tone === "red" ? "text-rose-600" : "text-muted-foreground"}`}>{hint}</p>}
-      </CardContent>
-    </Card>
-  );
-}
-
-// formatBacklog 把积压毫秒数渲染成人看得懂的量级。
-function formatBacklog(ms: number): string {
-  if (!ms) return "—";
-  if (ms < 60_000) return `${Math.round(ms / 1000)} 秒`;
-  if (ms < 3_600_000) return `${Math.round(ms / 60_000)} 分钟`;
-  return `${(ms / 3_600_000).toFixed(1)} 小时`;
-}
-
-// DeliveryList 是投递记录表：可按渠道与状态筛选，失败项可手动重发。
-function DeliveryList({ channels }: { channels: NotificationChannel[] }) {
-  const [rows, setRows] = React.useState<NotificationDelivery[]>([]);
-  const [total, setTotal] = React.useState(0);
-  const [page, setPage] = React.useState(1);
-  const [channelID, setChannelID] = React.useState<number | undefined>(undefined);
-  const [state, setState] = React.useState<string | undefined>(undefined);
-  const [loading, setLoading] = React.useState(false);
-  const pageSize = 50;
-
-  const load = React.useCallback(() => {
-    setLoading(true);
-    api
-      .notifyDeliveries({ channelId: channelID, state, page, pageSize })
-      .then((r) => {
-        setRows(r.deliveries);
-        setTotal(r.total);
-      })
-      .catch((e) => toast.error("读取投递记录失败：" + (e as Error).message))
-      .finally(() => setLoading(false));
-  }, [channelID, state, page]);
-  React.useEffect(() => {
-    load();
-  }, [load]);
-
-  async function retry(id: number) {
-    try {
-      await api.notifyRetryDelivery(id);
-      toast.success("已重新入队");
-      load();
-    } catch (e) {
-      toast.error("重发失败：" + (e as Error).message);
-    }
-  }
-
-  const maxPage = Math.max(1, Math.ceil(total / pageSize));
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-wrap items-center gap-2">
-        <Select
-          value={channelID ? String(channelID) : "all"}
-          onValueChange={(v) => {
-            setPage(1);
-            setChannelID(v === "all" ? undefined : Number(v));
-          }}
-        >
-          <SelectTrigger size="sm" className="w-44">
-            <SelectValue placeholder="全部渠道" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">全部渠道</SelectItem>
-            {channels.map((c) => (
-              <SelectItem key={c.id} value={String(c.id)}>
-                {c.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Select
-          value={state ?? "all"}
-          onValueChange={(v) => {
-            setPage(1);
-            setState(v === "all" ? undefined : v);
-          }}
-        >
-          <SelectTrigger size="sm" className="w-32">
-            <SelectValue placeholder="全部状态" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">全部状态</SelectItem>
-            {["pending", "sending", "sent", "failed", "skipped"].map((s) => (
-              <SelectItem key={s} value={s}>
-                {statusMeta("delivery", s).label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Button size="sm" variant="outline" onClick={load} disabled={loading}>
-          <RefreshCwIcon className={loading ? "animate-spin" : ""} /> 刷新
-        </Button>
-        <span className="text-muted-foreground ml-auto text-xs">共 {total} 条</span>
-      </div>
-
-      <Card className="py-0">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-40">时间</TableHead>
-              <TableHead>漏洞</TableHead>
-              <TableHead className="w-40">渠道</TableHead>
-              <TableHead className="w-24">状态</TableHead>
-              <TableHead className="w-16">尝试</TableHead>
-              <TableHead>错误</TableHead>
-              <TableHead className="w-20" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {rows.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={7} className="text-muted-foreground py-8 text-center">
-                  {loading ? "加载中…" : "暂无投递记录"}
-                </TableCell>
-              </TableRow>
-            ) : (
-              rows.map((d) => (
-                <TableRow key={d.id}>
-                  <TableCell className="text-muted-foreground text-xs whitespace-nowrap">
-                    {formatTime(d.created_at)}
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <Badge variant="outline" className={toneClasses[statusMeta("severity", d.severity).tone]}>
-                        {statusMeta("severity", d.severity).label}
-                      </Badge>
-                      <span className="truncate text-sm">{d.title || "（无标题）"}</span>
-                      {d.event_kind === "finding_status_changed" && (
-                        <Badge variant="outline" className="shrink-0">
-                          状态变更
-                        </Badge>
-                      )}
-                    </div>
-                  </TableCell>
-                  <TableCell className="text-sm">{d.channel_name}</TableCell>
-                  <TableCell>
-                    <Badge variant="outline" className={toneClasses[statusMeta("delivery", d.state).tone]}>
-                      {statusMeta("delivery", d.state).label}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-muted-foreground text-sm">{d.attempts}</TableCell>
-                  <TableCell className="text-muted-foreground max-w-md text-xs break-all">{d.last_error}</TableCell>
-                  <TableCell>
-                    {/* 只有失败/跳过的才给重发入口：已送达的重发会造成重复推送。 */}
-                    {(d.state === "failed" || d.state === "skipped") && (
-                      <Button size="sm" variant="outline" onClick={() => retry(d.id)}>
-                        <RotateCcwIcon /> 重发
-                      </Button>
-                    )}
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </Card>
-
-      {maxPage > 1 && (
-        <div className="flex items-center justify-end gap-2">
-          <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
-            上一页
-          </Button>
-          <span className="text-muted-foreground text-sm">
-            {page} / {maxPage}
-          </span>
-          <Button size="sm" variant="outline" disabled={page >= maxPage} onClick={() => setPage((p) => p + 1)}>
-            下一页
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function formatTime(iso: string): string {
-  const d = new Date(iso);
-  if (Number.isNaN(d.getTime())) return iso;
-  return d.toLocaleString("zh-CN", { hour12: false });
-}