feat(frontend): create orchestrated waf rules

2026-10-12 02:06:37 +08:00 · 2026-07-13 12:00:24 +08:00
parent af20e2e838
commit 4000366856
13 changed files with 539 additions and 493 deletions
@@ -127,11 +127,7 @@ export function WafSection({ route, onSavingChange }: WafSectionProps) {
                  <span className="block text-sm font-semibold">{group.name}</span>
                  <span className="mt-1 block text-xs text-muted-foreground">
                    {group.enabled ? '启用中' : '已停用'} ·{' '}
-                    {group.ip_whitelist.length +
+                    {group.graph.nodes.length} 个节点
                      group.ip_blacklist.length +
                      group.country_whitelist.length +
                      group.country_blacklist.length}{' '}
                    条规则
                  </span>
                </span>
              </label>
@@ -145,4 +141,4 @@ export function WafSection({ route, onSavingChange }: WafSectionProps) {
      )}
    </SectionShell>
  );
-}
+}
@@ -0,0 +1,87 @@
 'use client';
 import {useEffect, useState} from 'react';
 import {Button} from '@/components/ui/button';
 import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
 } from '@/components/ui/dialog';
 import {Field, FieldGroup, FieldLabel} from '@/components/ui/field';
 import {Input} from '@/components/ui/input';
 import {Spinner} from '@/components/ui/spinner';
 interface CreateRuleDialogProps {
  open: boolean;
  pending: boolean;
  onOpenChange: (open: boolean) => void;
  onCreate: (name: string) => Promise<void>;
 }
 export function CreateRuleDialog({
  open,
  pending,
  onOpenChange,
  onCreate,
 }: CreateRuleDialogProps) {
  const [name, setName] = useState('');
  useEffect(() => {
    if (!open) setName('');
  }, [open]);
  const trimmedName = name.trim();
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <form
          className="flex flex-col gap-4"
          onSubmit={async (event) => {
            event.preventDefault();
            if (!trimmedName || pending) return;
            await onCreate(trimmedName);
          }}
        >
          <DialogHeader>
            <DialogTitle>新建 WAF 规则</DialogTitle>
            <DialogDescription>
              创建后将进入编排页面，通过处理单元配置规则执行流程。
            </DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="waf-rule-name">规则名称</FieldLabel>
              <Input
                id="waf-rule-name"
                value={name}
                onChange={(event) => setName(event.target.value)}
                placeholder="例如：入口防护"
                autoComplete="off"
                autoFocus
              />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              disabled={pending}
              onClick={() => onOpenChange(false)}
            >
              取消
            </Button>
            <Button type="submit" disabled={!trimmedName || pending}>
              {pending ? <Spinner data-icon="inline-start" /> : null}
              创建并编排
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
 }
@@ -1,375 +0,0 @@
 'use client';
 import {useEffect, useMemo, useState} from 'react';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Plus} from 'lucide-react';
 import {useForm} from 'react-hook-form';
 import {z} from 'zod';
 import {Button} from '@/components/ui/button';
 import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form';
 import {Input} from '@/components/ui/input';
 import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from '@/components/ui/sheet';
 import {Switch} from '@/components/ui/switch';
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
 import {Textarea} from '@/components/ui/textarea';
 import type {WAFIPGroup, WAFRuleGroup, WAFRuleGroupPayload} from '@/lib/services/openflare';
 import {
  buildCountryOptions,
  buildRuleGroupDraft,
  countRuleEntries,
  emptyRuleGroupDraft,
  formatCountryItem,
  getListFieldKey,
  type ListFieldKey,
  normalizeItems,
  textToList,
  updateDraftList,
 } from './helpers';
 import {PowConfigPanel} from './pow-config-panel';
 import {RuleEntryDialog, type RuleEntryFormValues} from './rule-entry-dialog';
 import {RuleListSection} from './rule-list-section';
 const ruleGroupSchema = z.object({
  name: z.string().trim().min(1, '请输入规则组名称').max(255, '名称不能超过 255 个字符'),
  enabled: z.boolean(),
  block_status_code: z.number().int().min(400).max(599),
  block_response_body: z.string(),
  pow_enabled: z.boolean(),
 });
 type RuleGroupFormValues = z.infer<typeof ruleGroupSchema>;
 interface RuleGroupSheetProps {
  open: boolean;
  group: WAFRuleGroup | null;
  ipGroups: WAFIPGroup[];
  submitting: boolean;
  onOpenChange: (open: boolean) => void;
  onSubmit: (payload: WAFRuleGroupPayload) => Promise<void>;
 }
 export function RuleGroupSheet({
  open,
  group,
  ipGroups,
  submitting,
  onOpenChange,
  onSubmit,
 }: RuleGroupSheetProps) {
  const [listsDraft, setListsDraft] = useState<WAFRuleGroupPayload>(emptyRuleGroupDraft);
  const [ruleEntryOpen, setRuleEntryOpen] = useState(false);
  const countryOptions = useMemo(() => buildCountryOptions(), []);
  const countryLabelMap = useMemo(
    () => new Map(countryOptions.map((option) => [option.code, option.label])),
    [countryOptions],
  );
  const form = useForm<RuleGroupFormValues>({
    resolver: zodResolver(ruleGroupSchema),
    defaultValues: {
      name: '',
      enabled: true,
      block_status_code: 418,
      block_response_body: '',
      pow_enabled: false,
    },
  });
  useEffect(() => {
    if (!open) return;
    const draft = buildRuleGroupDraft(group);
    setListsDraft(draft);
    form.reset({
      name: draft.name,
      enabled: draft.enabled,
      block_status_code: draft.block_status_code,
      block_response_body: draft.block_response_body,
      pow_enabled: draft.pow_enabled,
    });
    setRuleEntryOpen(false);
  }, [form, group, open]);
  const ipGroupByID = new Map(ipGroups.map((item) => [item.id, item]));
  const whitelistGroupItems = listsDraft.ip_whitelist_group_ids
    .map((id) => ipGroupByID.get(id))
    .filter((item): item is WAFIPGroup => Boolean(item));
  const blacklistGroupItems = listsDraft.ip_blacklist_group_ids
    .map((id) => ipGroupByID.get(id))
    .filter((item): item is WAFIPGroup => Boolean(item));
  const removeRuleItem = (key: ListFieldKey, value: string) => {
    setListsDraft((current) =>
      updateDraftList(current, key, (items) => items.filter((item) => item !== value)),
    );
  };
  const removeRuleGroup = (key: ListFieldKey, id: number) => {
    setListsDraft((current) =>
      updateDraftList(current, key, (items) =>
        items.filter((item) => item !== String(id)),
      ),
    );
  };
  const applyRuleEntry = (entry: RuleEntryFormValues) => {
    const values =
      entry.dimension === 'ip'
        ? textToList(entry.ipValue)
        : entry.dimension === 'ip_group'
          ? entry.ipGroupIDs.map(String)
          : normalizeItems(entry.countryValues);
    const listKey = getListFieldKey(entry.listType, entry.dimension);
    setListsDraft((current) =>
      updateDraftList(current, listKey, (items) =>
        normalizeItems([...items, ...values]),
      ),
    );
    setRuleEntryOpen(false);
  };
  const handleSubmit = form.handleSubmit(async (values) => {
    const payload: WAFRuleGroupPayload = {
      ...listsDraft,
      name: values.name,
      enabled: values.enabled,
      block_status_code: values.block_status_code,
      block_response_body: values.block_response_body,
      pow_enabled: values.pow_enabled,
    };
    try {
      await onSubmit(payload);
      onOpenChange(false);
    } catch (error) {
      form.setError('root', {
        message: error instanceof Error ? error.message : '保存失败',
      });
    }
  });
  const isGlobal = group?.is_global ?? false;
  return (
    <>
      <Sheet open={open} onOpenChange={onOpenChange}>
        <SheetContent side="right" className="flex h-svh w-full flex-col gap-0 p-0 sm:max-w-4xl">
          <SheetHeader className="border-b px-4 py-4">
            <SheetTitle>{group ? `编辑 ${group.name}` : '新建规则组'}</SheetTitle>
            <SheetDescription>
              白名单命中后直接放行；未命中白名单时继续判断黑名单。当前规则数{' '}
              {countRuleEntries(listsDraft)} 条。
            </SheetDescription>
          </SheetHeader>
          <Form {...form}>
            <form
              id="rule-group-form"
              onSubmit={handleSubmit}
              className="flex min-h-0 flex-1 flex-col"
            >
              <div className="flex-1 space-y-4 overflow-y-auto px-4 py-4">
                <Tabs defaultValue="basic">
                  <TabsList className="grid w-full grid-cols-4">
                    <TabsTrigger value="basic">基本信息</TabsTrigger>
                    <TabsTrigger value="lists">黑白名单</TabsTrigger>
                    <TabsTrigger value="pow">PoW</TabsTrigger>
                    <TabsTrigger value="block">拦截返回</TabsTrigger>
                  </TabsList>
                  <TabsContent value="basic" className="mt-4 space-y-4">
                    <div className="grid gap-4">
                      <FormField
                        control={form.control}
                        name="enabled"
                        render={({ field }) => (
                          <FormItem className="flex items-center justify-between rounded-lg border border-dashed p-4">
                            <div className="space-y-0.5">
                              <FormLabel>启用规则组</FormLabel>
                              <FormDescription>关闭后保留配置，但不会参与匹配。</FormDescription>
                            </div>
                            <FormControl>
                              <Switch checked={field.value} onCheckedChange={field.onChange} />
                            </FormControl>
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="name"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>规则组名称</FormLabel>
                            <FormControl>
                              <Input {...field} disabled={isGlobal} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="lists" className="mt-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <p className="text-sm text-muted-foreground">
                        通过弹窗添加 IP、IP 组或地域规则。
                      </p>
                      <Button type="button" size="sm" onClick={() => setRuleEntryOpen(true)}>
                        <Plus className="mr-1 size-3.5" />
                        添加规则
                      </Button>
                    </div>
                    <div className="grid gap-4 xl:grid-cols-2">
                      <RuleListSection
                        title="IP 白名单"
                        description="命中后直接放行，不再继续判断黑名单。"
                        items={listsDraft.ip_whitelist}
                        groupItems={whitelistGroupItems}
                        tone="whitelist"
                        emptyText="暂无 IP 白名单规则。"
                        onRemove={(item) => removeRuleItem('ip_whitelist', item)}
                        onRemoveGroup={(id) => removeRuleGroup('ip_whitelist_group_ids', id)}
                      />
                      <RuleListSection
                        title="IP 黑名单"
                        description="未命中白名单时，命中这些 IP / IP 段将被拦截。"
                        items={listsDraft.ip_blacklist}
                        groupItems={blacklistGroupItems}
                        tone="blacklist"
                        emptyText="暂无 IP 黑名单规则。"
                        onRemove={(item) => removeRuleItem('ip_blacklist', item)}
                        onRemoveGroup={(id) => removeRuleGroup('ip_blacklist_group_ids', id)}
                      />
                      <RuleListSection
                        title="地域白名单"
                        description="显示格式为国家代码与中文名，命中后直接放行。"
                        items={listsDraft.country_whitelist.map((code) =>
                          formatCountryItem(code, countryLabelMap),
                        )}
                        tone="whitelist"
                        emptyText="暂无地域白名单规则。"
                        onRemove={(item) => {
                          const code = item.split(' ')[0] ?? item;
                          removeRuleItem('country_whitelist', code);
                        }}
                      />
                      <RuleListSection
                        title="地域黑名单"
                        description="当请求未命中白名单时，命中这些地域将被拦截。"
                        items={listsDraft.country_blacklist.map((code) =>
                          formatCountryItem(code, countryLabelMap),
                        )}
                        tone="blacklist"
                        emptyText="暂无地域黑名单规则。"
                        onRemove={(item) => {
                          const code = item.split(' ')[0] ?? item;
                          removeRuleItem('country_blacklist', code);
                        }}
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="pow" className="mt-4">
                    <PowConfigPanel
                      enabled={form.watch('pow_enabled')}
                      config={listsDraft.pow_config}
                      onChange={(enabled, config) => {
                        form.setValue('pow_enabled', enabled);
                        setListsDraft((current) => ({
                          ...current,
                          pow_enabled: enabled,
                          pow_config: config,
                        }));
                      }}
                    />
                  </TabsContent>
                  <TabsContent value="block" className="mt-4 space-y-4">
                    <div className="grid gap-4">
                      <FormField
                        control={form.control}
                        name="block_status_code"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>拦截状态码</FormLabel>
                            <FormControl>
                              <Input
                                type="number"
                                min={400}
                                max={599}
                                value={field.value}
                                onChange={(event) =>
                                  field.onChange(Number(event.target.value))
                                }
                              />
                            </FormControl>
                            <div className="flex flex-wrap gap-2 pt-2">
                              {[403, 418, 451, 503].map((code) => (
                                <Button
                                  key={code}
                                  type="button"
                                  size="sm"
                                  variant={field.value === code ? 'default' : 'outline'}
                                  onClick={() => field.onChange(code)}
                                >
                                  {code}
                                </Button>
                              ))}
                            </div>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="block_response_body"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>拦截页面</FormLabel>
                            <FormControl>
                              <Textarea
                                className="min-h-48"
                                placeholder="<html><body><h1>Request blocked</h1></body></html>"
                                {...field}
                              />
                            </FormControl>
                            <FormDescription>留空时只返回状态码。</FormDescription>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                  </TabsContent>
                </Tabs>
                {form.formState.errors.root ? (
                  <p className="text-sm text-destructive">{form.formState.errors.root.message}</p>
                ) : null}
              </div>
              <SheetFooter className="flex-row justify-end border-t px-4 py-4">
                <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
                  取消
                </Button>
                <Button type="submit" disabled={submitting}>
                  {submitting ? '保存中...' : '保存规则组'}
                </Button>
              </SheetFooter>
            </form>
          </Form>
        </SheetContent>
      </Sheet>
      <RuleEntryDialog
        open={ruleEntryOpen}
        countryOptions={countryOptions}
        ipGroups={ipGroups}
        onOpenChange={setRuleEntryOpen}
        onSubmit={applyRuleEntry}
      />
    </>
  );
 }
@@ -7,21 +7,20 @@ import {Button} from '@/components/ui/button';
 import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
-import type {WAFRuleGroup} from '@/lib/services/openflare';
+import type {WAFRule} from '@/lib/services/openflare';
 import {formatDateTime} from '@/lib/utils';
 import {countRuleEntries} from './helpers';
 interface RuleGroupsTableProps {
-  groups: WAFRuleGroup[];
+  groups: WAFRule[];
-  onEdit: (group: WAFRuleGroup) => void;
+  onEdit: (group: WAFRule) => void;
-  onDelete: (group: WAFRuleGroup) => void;
+  onDelete: (group: WAFRule) => void;
-  onBindSites: (group: WAFRuleGroup) => void;
+  onBindSites: (group: WAFRule) => void;
 }
 export function RuleGroupsTable({
@@ -37,7 +36,7 @@ export function RuleGroupsTable({
          <TableHead>名称</TableHead>
          <TableHead>类型</TableHead>
          <TableHead>状态</TableHead>
-          <TableHead>规则数</TableHead>
+          <TableHead>节点数</TableHead>
          <TableHead>应用范围</TableHead>
          <TableHead>更新时间</TableHead>
          <TableHead className="w-[80px] text-right">操作</TableHead>
@@ -64,7 +63,7 @@ export function RuleGroupsTable({
                {group.enabled ? '启用' : '停用'}
              </Badge>
            </TableCell>
-            <TableCell>{countRuleEntries(group)}</TableCell>
+            <TableCell>{group.graph.nodes.length}</TableCell>
            <TableCell>
              {group.is_global
                ? '全部网站'
@@ -77,30 +76,34 @@ export function RuleGroupsTable({
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="size-8">
-                    <MoreHorizontal className="size-4" />
+                    <MoreHorizontal />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
-                  <DropdownMenuItem onClick={() => onEdit(group)}>
+                  <DropdownMenuGroup>
-                    <Pencil className="size-4 mr-2" />
+                    <DropdownMenuItem onClick={() => onEdit(group)}>
-                    编辑
+                      <Pencil />
-                  </DropdownMenuItem>
+                      编排
                  {!group.is_global ? (
                    <DropdownMenuItem onClick={() => onBindSites(group)}>
                      <Users className="size-4 mr-2" />
                      绑定网站
                    </DropdownMenuItem>
-                  ) : null}
+                    {!group.is_global ? (
                      <DropdownMenuItem onClick={() => onBindSites(group)}>
                        <Users />
                        绑定网站
                      </DropdownMenuItem>
                    ) : null}
                  </DropdownMenuGroup>
                  {!group.is_global ? (
                    <>
                      <DropdownMenuSeparator />
-                      <DropdownMenuItem
+                      <DropdownMenuGroup>
-                        className="text-destructive focus:text-destructive"
+                        <DropdownMenuItem
-                        onClick={() => onDelete(group)}
+                          variant="destructive"
-                      >
+                          onClick={() => onDelete(group)}
-                        <Trash2 className="size-4 mr-2" />
+                        >
-                        删除
+                          <Trash2 />
-                      </DropdownMenuItem>
+                          删除
                        </DropdownMenuItem>
                      </DropdownMenuGroup>
                    </>
                  ) : null}
                </DropdownMenuContent>
@@ -7,10 +7,10 @@ import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,} from '@/components/ui/sheet';
 import {cn} from '@/lib/utils';
-import type {ProxyRouteItem, WAFRuleGroup} from '@/lib/services/openflare';
+import type {ProxyRouteItem, WAFRule} from '@/lib/services/openflare';
 interface SiteBindingSheetProps {
-  group: WAFRuleGroup | null;
+  group: WAFRule | null;
  routes: ProxyRouteItem[];
  open: boolean;
  pending: boolean;
@@ -2,6 +2,7 @@
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
 import {Loader2, Plus, RefreshCw, Shield} from 'lucide-react';
 import {useRouter} from 'next/navigation';
 import {useState} from 'react';
 import {toast} from 'sonner';
@@ -20,35 +21,29 @@ import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/comp
 import {EmptyStateWithBorder} from '@/components/layout/empty';
 import {ErrorInline} from '@/components/layout/error';
 import {LoadingStateWithBorder} from '@/components/layout/loading';
-import type {WAFRuleGroup, WAFRuleGroupPayload} from '@/lib/services/openflare';
+import type {WAFRule} from '@/lib/services/openflare';
 import {ProxyRouteService, WafService} from '@/lib/services/openflare';
 import {CreateRuleDialog} from './components/create-rule-dialog';
 import {getErrorMessage} from './components/helpers';
 import {RuleGroupSheet} from './components/rule-group-sheet';
 import {RuleGroupsTable} from './components/rule-groups-table';
 import {SiteBindingSheet} from './components/site-binding-sheet';
 const ruleGroupsQueryKey = ['openflare', 'waf', 'rule-groups'];
 const ipGroupsQueryKey = ['openflare', 'waf', 'ip-groups'];
 const routesQueryKey = ['openflare', 'proxy-routes'];
 export default function WafPage() {
  const router = useRouter();
  const queryClient = useQueryClient();
-  const [editorOpen, setEditorOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
-  const [editingGroup, setEditingGroup] = useState<WAFRuleGroup | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<WAFRule | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<WAFRuleGroup | null>(null);
+  const [bindingGroup, setBindingGroup] = useState<WAFRule | null>(null);
  const [bindingGroup, setBindingGroup] = useState<WAFRuleGroup | null>(null);
  const groupsQuery = useQuery({
    queryKey: ruleGroupsQueryKey,
    queryFn: () => WafService.listRuleGroups(),
  });
  const ipGroupsQuery = useQuery({
    queryKey: ipGroupsQueryKey,
    queryFn: () => WafService.listIPGroups(),
  });
  const routesQuery = useQuery({
    queryKey: routesQueryKey,
    queryFn: () => ProxyRouteService.list(),
@@ -57,29 +52,16 @@ export default function WafPage() {
  const invalidate = async () => {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ruleGroupsQueryKey }),
      queryClient.invalidateQueries({ queryKey: ipGroupsQueryKey }),
      queryClient.invalidateQueries({ queryKey: ['openflare', 'config-versions', 'diff'] }),
    ]);
  };
-  const saveMutation = useMutation({
+  const createMutation = useMutation({
-    mutationFn: async ({
+    mutationFn: (name: string) => WafService.createRule({name}),
-      group,
+    onSuccess: (rule) => {
-      payload,
+      toast.success('规则已创建');
-    }: {
+      setCreateOpen(false);
-      group: WAFRuleGroup | null;
+      router.push(`/waf/rules/editor?id=${rule.id}`);
      payload: WAFRuleGroupPayload;
    }) => {
      if (group) {
        return WafService.updateRuleGroup(group.id, payload);
      }
      return WafService.createRuleGroup(payload);
    },
    onSuccess: async () => {
      toast.success(editingGroup ? '规则组已更新' : '规则组已创建');
      setEditingGroup(null);
      setEditorOpen(false);
      await invalidate();
    },
    onError: (error) => {
      toast.error(getErrorMessage(error));
@@ -115,32 +97,21 @@ export default function WafPage() {
    void queryClient.invalidateQueries({ queryKey: ruleGroupsQueryKey });
  };
  const handleCreate = () => {
    setEditingGroup(null);
    setEditorOpen(true);
  };
  const handleEdit = (group: WAFRuleGroup) => {
    setEditingGroup(group);
    setEditorOpen(true);
  };
  const groups = groupsQuery.data ?? [];
-  const loading = groupsQuery.isLoading || ipGroupsQuery.isLoading || routesQuery.isLoading;
+  const loading = groupsQuery.isLoading || routesQuery.isLoading;
-  const error =
+  const error = groupsQuery.error ?? routesQuery.error ?? null;
    groupsQuery.error ?? ipGroupsQuery.error ?? routesQuery.error ?? null;
  return (
-    <div className="py-6 px-1 space-y-6">
+    <div className="w-full py-6 px-1 space-y-6">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <Shield className="size-5 text-primary" />
          <h1 className="text-2xl font-semibold tracking-tight">WAF</h1>
        </div>
        <div className="flex items-center gap-2">
-          <Button variant="secondary" size="sm" className="h-7 text-xs" onClick={handleCreate}>
+          <Button variant="secondary" size="sm" onClick={() => setCreateOpen(true)}>
-            <Plus className="size-3.5 mr-1" />
+            <Plus data-icon="inline-start" />
-            新建规则组
+            新建规则
          </Button>
        </div>
      </div>
@@ -151,7 +122,7 @@ export default function WafPage() {
            <div>
              <CardTitle className="text-base font-semibold">规则组</CardTitle>
              <CardDescription>
-                按规则组维护 WAF 与 PoW 防护规则，全局规则组始终应用到所有网站。
+                使用可视化流程编排 WAF 防护规则；全局规则始终应用到所有网站。
              </CardDescription>
            </div>
            <Button
@@ -189,7 +160,7 @@ export default function WafPage() {
          ) : (
            <RuleGroupsTable
              groups={groups}
-              onEdit={handleEdit}
+              onEdit={(rule) => router.push(`/waf/rules/editor?id=${rule.id}`)}
              onDelete={setDeleteTarget}
              onBindSites={setBindingGroup}
            />
@@ -197,17 +168,12 @@ export default function WafPage() {
        </CardContent>
      </Card>
-      <RuleGroupSheet
+      <CreateRuleDialog
-        open={editorOpen}
+        open={createOpen}
-        group={editingGroup}
+        pending={createMutation.isPending}
-        ipGroups={ipGroupsQuery.data ?? []}
+        onOpenChange={setCreateOpen}
-        submitting={saveMutation.isPending}
+        onCreate={async (name) => {
-        onOpenChange={(open) => {
+          await createMutation.mutateAsync(name);
          setEditorOpen(open);
          if (!open) setEditingGroup(null);
        }}
        onSubmit={async (payload) => {
          await saveMutation.mutateAsync({ group: editingGroup, payload });
        }}
      />
@@ -211,6 +211,9 @@ export type {
  ApplyLogList,
  DashboardOverview,
  WAFIPGroup,
  WAFRule,
  WAFRuleGraph,
  WAFRuleNode,
  WAFRuleGroup,
  WAFSiteRuleGroups,
  TlsCertificateItem,
@@ -70,6 +70,12 @@ export type {
  WAFIPGroupSyncResult,
  WAFIPGroupSubscriptionFormat,
  WAFIPGroupType,
  WAFCreateRulePayload,
  WAFRule,
  WAFRuleEdge,
  WAFRuleGraph,
  WAFRuleNode,
  WAFSaveRuleGraphPayload,
  WAFRuleGroup,
  WAFRuleGroupPayload,
  WAFSiteRuleGroups,
@@ -1,3 +1,5 @@
 import type {XYPosition} from '@xyflow/react';
 export type ReleaseChannel = 'stable' | 'preview';
 export type NodeType = 'edge_node' | 'tunnel_relay' | 'tunnel_client';
@@ -689,11 +691,65 @@ export interface OpenFlarePublicStatus {
  system_name: string;
 }
-export interface WAFRuleGroup {
+export interface IPMatchConfig {
  ips: string[];
  cidrs: string[];
  ip_group_ids: number[];
 }
 export interface GeoMatchConfig {
  countries: string[];
  regions: string[];
 }
 export interface PoWNodeConfig {
  algorithm: 'fast' | 'slow';
  difficulty: number;
  session_ttl: number;
  challenge_ttl: number;
 }
 export interface BlockNodeConfig {
  status_code: number;
  response_body: string;
 }
 export type WAFRuleNode =
  | {id: string; type: 'start'; position: XYPosition; config: Record<string, never>}
  | {id: string; type: 'ip_match'; position: XYPosition; config: IPMatchConfig}
  | {id: string; type: 'geo_match'; position: XYPosition; config: GeoMatchConfig}
  | {id: string; type: 'pow'; position: XYPosition; config: PoWNodeConfig}
  | {id: string; type: 'allow'; position: XYPosition; config: Record<string, never>}
  | {id: string; type: 'block'; position: XYPosition; config: BlockNodeConfig};
 export interface WAFRuleEdge {
  id: string;
  source: string;
  source_handle: string;
  target: string;
 }
 export interface WAFRuleGraph {
  schema_version: number;
  nodes: WAFRuleNode[];
  edges: WAFRuleEdge[];
 }
 export interface WAFRule {
  id: number;
  name: string;
  enabled: boolean;
  is_global: boolean;
  graph: WAFRuleGraph;
  revision: number;
  applied_site_ids: number[];
  applied_site_count: number;
  created_at: string;
  updated_at: string;
 }
 /** @deprecated Legacy fixed-chain rule shape retained for untouched binding consumers. */
 export interface WAFRuleGroup extends WAFRule {
  block_status_code: number;
  block_response_body: string;
  ip_whitelist: string[];
@@ -706,10 +762,15 @@ export interface WAFRuleGroup {
  region_blacklist: string[];
  pow_enabled: boolean;
  pow_config: ProxyRoutePoWConfig;
-  applied_site_ids: number[];
+}
-  applied_site_count: number;
+
-  created_at: string;
+export interface WAFCreateRulePayload {
-  updated_at: string;
+  name: string;
 }
 export interface WAFSaveRuleGraphPayload {
  revision: number;
  graph: WAFRuleGraph;
 }
 export interface WAFRuleGroupPayload {
@@ -731,9 +792,9 @@ export interface WAFRuleGroupPayload {
 export interface WAFSiteRuleGroups {
  route_id: number;
-  global_rule_group: WAFRuleGroup | null;
+  global_rule_group: WAFRule | null;
-  rule_groups: WAFRuleGroup[];
+  rule_groups: WAFRule[];
-  applied_rule_groups: WAFRuleGroup[];
+  applied_rule_groups: WAFRule[];
  applied_ids: number[];
 }
@@ -5,39 +5,40 @@ import type {
  WAFIPGroupAutoTestResult,
  WAFIPGroupPayload,
  WAFIPGroupSyncResult,
-  WAFRuleGroup,
+  WAFCreateRulePayload,
-  WAFRuleGroupPayload,
+  WAFRule,
  WAFSaveRuleGraphPayload,
  WAFSiteRuleGroups,
 } from './types';
 export class WafService extends OpenFlareBaseService {
  protected static override readonly basePath: string = '/api/v1/d/waf';
-  static async listRuleGroups(): Promise<WAFRuleGroup[]> {
+  static async listRuleGroups(): Promise<WAFRule[]> {
-    return this.get<WAFRuleGroup[]>('/rule-groups');
+    return this.get<WAFRule[]>('/rule-groups');
  }
-  static async getRuleGroup(id: number): Promise<WAFRuleGroup> {
+  static async getRule(id: number): Promise<WAFRule> {
-    return this.get<WAFRuleGroup>(`/rule-groups/${id}`);
+    return this.get<WAFRule>(`/rule-groups/${id}`);
  }
-  static async createRuleGroup(payload: WAFRuleGroupPayload): Promise<WAFRuleGroup> {
+  static async createRule(payload: WAFCreateRulePayload): Promise<WAFRule> {
-    return this.post<WAFRuleGroup>('/rule-groups', payload);
+    return this.post<WAFRule>('/rule-groups', payload);
  }
-  static async updateRuleGroup(
+  static async saveRuleGraph(
    id: number,
-    payload: WAFRuleGroupPayload,
+    payload: WAFSaveRuleGraphPayload,
-  ): Promise<WAFRuleGroup> {
+  ): Promise<WAFRule> {
-    return this.post<WAFRuleGroup>(`/rule-groups/${id}/update`, payload);
+    return this.post<WAFRule>(`/rule-groups/${id}/graph`, payload);
  }
  static async deleteRuleGroup(id: number): Promise<void> {
    return this.post<void>(`/rule-groups/${id}/delete`);
  }
-  static async updateRuleGroupSites(id: number, ids: number[]): Promise<WAFRuleGroup> {
+  static async updateRuleGroupSites(id: number, ids: number[]): Promise<WAFRule> {
-    return this.post<WAFRuleGroup>(`/rule-groups/${id}/sites`, { ids });
+    return this.post<WAFRule>(`/rule-groups/${id}/sites`, { ids });
  }
  static async listSiteRuleGroups(routeId: number): Promise<WAFSiteRuleGroups> {
@@ -82,4 +83,4 @@ export class WafService extends OpenFlareBaseService {
  static async syncIPGroup(id: number): Promise<WAFIPGroupSyncResult> {
    return this.post<WAFIPGroupSyncResult>(`/ip-groups/${id}/sync`);
  }
-}
+}
@@ -44,6 +44,7 @@
    "@tanstack/react-table": "^8.21.3",
    "@tanstack/react-virtual": "^3.13.16",
    "@uiw/react-codemirror": "^4.25.10",
    "@xyflow/react": "^12.11.2",
    "axios": "^1.15.0",
    "babel-plugin-react-compiler": "^1.0.0",
    "class-variance-authority": "^0.7.1",
@@ -104,6 +104,9 @@ importers:
      '@uiw/react-codemirror':
        specifier: ^4.25.10
        version: 4.25.10(@babel/runtime@7.28.4)(@codemirror/autocomplete@6.20.3)(@codemirror/language@6.12.3)(@codemirror/lint@6.9.6)(@codemirror/search@6.7.0)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.0)(codemirror@6.0.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
      '@xyflow/react':
        specifier: ^12.11.2
        version: 12.11.2(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
      axios:
        specifier: ^1.15.0
        version: 1.15.0
@@ -1849,6 +1852,9 @@ packages:
  '@types/d3-color@3.1.3':
    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
  '@types/d3-drag@3.0.7':
    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
  '@types/d3-ease@3.0.2':
    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
@@ -1861,6 +1867,9 @@ packages:
  '@types/d3-scale@4.0.9':
    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
  '@types/d3-selection@3.0.11':
    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
  '@types/d3-shape@3.1.7':
    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
@@ -1870,6 +1879,12 @@ packages:
  '@types/d3-timer@3.0.2':
    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
  '@types/d3-transition@3.0.9':
    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
  '@types/d3-zoom@3.0.8':
    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
  '@types/debug@4.1.12':
    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
@@ -2143,6 +2158,22 @@ packages:
  '@vitest/utils@4.1.10':
    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
  '@xyflow/react@12.11.2':
    resolution: {integrity: sha512-eLAlDWJfWnQEhJwGMjlWdAXO9eYllKpliUmPQlAmOLxz6mExXuzMVDUKLMquixgkrtmMFFtug3jGKmYYld12cA==}
    peerDependencies:
      '@types/react': '>=17'
      '@types/react-dom': '>=17'
      react: '>=17'
      react-dom: '>=17'
    peerDependenciesMeta:
      '@types/react':
        optional: true
      '@types/react-dom':
        optional: true
  '@xyflow/system@0.0.79':
    resolution: {integrity: sha512-czLyOh91NF0hIzbNzwi8I6GlqG23BHh2435OddfI6uiaLH3xdrdygO93gqgH1Bv9mhy8XPFQJOBn1FTq4LvEWA==}
  acorn-jsx@5.3.2:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@@ -2323,6 +2354,9 @@ packages:
  class-variance-authority@0.7.1:
    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
  classcat@5.0.5:
    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
  client-only@0.0.1:
    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
@@ -2395,6 +2429,14 @@ packages:
    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
    engines: {node: '>=12'}
  d3-dispatch@3.0.1:
    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
    engines: {node: '>=12'}
  d3-drag@3.0.0:
    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
    engines: {node: '>=12'}
  d3-ease@3.0.1:
    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
    engines: {node: '>=12'}
@@ -2415,6 +2457,10 @@ packages:
    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
    engines: {node: '>=12'}
  d3-selection@3.0.0:
    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
    engines: {node: '>=12'}
  d3-shape@3.2.0:
    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
    engines: {node: '>=12'}
@@ -2431,6 +2477,16 @@ packages:
    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
    engines: {node: '>=12'}
  d3-transition@3.0.1:
    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
    engines: {node: '>=12'}
    peerDependencies:
      d3-selection: 2 - 3
  d3-zoom@3.0.0:
    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
    engines: {node: '>=12'}
  damerau-levenshtein@1.0.8:
    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -4486,6 +4542,21 @@ packages:
  zrender@6.1.0:
    resolution: {integrity: sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==}
  zustand@4.5.7:
    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
    engines: {node: '>=12.7.0'}
    peerDependencies:
      '@types/react': '>=16.8'
      immer: '>=9.0.6'
      react: '>=16.8'
    peerDependenciesMeta:
      '@types/react':
        optional: true
      immer:
        optional: true
      react:
        optional: true
  zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
@@ -6002,6 +6073,10 @@ snapshots:
  '@types/d3-color@3.1.3': {}
  '@types/d3-drag@3.0.7':
    dependencies:
      '@types/d3-selection': 3.0.11
  '@types/d3-ease@3.0.2': {}
  '@types/d3-interpolate@3.0.4':
@@ -6014,6 +6089,8 @@ snapshots:
    dependencies:
      '@types/d3-time': 3.0.4
  '@types/d3-selection@3.0.11': {}
  '@types/d3-shape@3.1.7':
    dependencies:
      '@types/d3-path': 3.1.1
@@ -6022,6 +6099,15 @@ snapshots:
  '@types/d3-timer@3.0.2': {}
  '@types/d3-transition@3.0.9':
    dependencies:
      '@types/d3-selection': 3.0.11
  '@types/d3-zoom@3.0.8':
    dependencies:
      '@types/d3-interpolate': 3.0.4
      '@types/d3-selection': 3.0.11
  '@types/debug@4.1.12':
    dependencies:
      '@types/ms': 2.1.0
@@ -6296,6 +6382,31 @@ snapshots:
      convert-source-map: 2.0.0
      tinyrainbow: 3.1.0
  '@xyflow/react@12.11.2(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
    dependencies:
      '@xyflow/system': 0.0.79
      classcat: 5.0.5
      react: 19.2.3
      react-dom: 19.2.3(react@19.2.3)
      zustand: 4.5.7(@types/react@19.2.2)(react@19.2.3)
    optionalDependencies:
      '@types/react': 19.2.2
      '@types/react-dom': 19.2.2(@types/react@19.2.2)
    transitivePeerDependencies:
      - immer
  '@xyflow/system@0.0.79':
    dependencies:
      '@types/d3-drag': 3.0.7
      '@types/d3-interpolate': 3.0.4
      '@types/d3-selection': 3.0.11
      '@types/d3-transition': 3.0.9
      '@types/d3-zoom': 3.0.8
      d3-drag: 3.0.0
      d3-interpolate: 3.0.1
      d3-selection: 3.0.0
      d3-zoom: 3.0.0
  acorn-jsx@5.3.2(acorn@8.15.0):
    dependencies:
      acorn: 8.15.0
@@ -6504,6 +6615,8 @@ snapshots:
    dependencies:
      clsx: 2.1.1
  classcat@5.0.5: {}
  client-only@0.0.1: {}
  clsx@2.1.1: {}
@@ -6579,6 +6692,13 @@ snapshots:
  d3-color@3.1.0: {}
  d3-dispatch@3.0.1: {}
  d3-drag@3.0.0:
    dependencies:
      d3-dispatch: 3.0.1
      d3-selection: 3.0.0
  d3-ease@3.0.1: {}
  d3-format@3.1.0: {}
@@ -6597,6 +6717,8 @@ snapshots:
      d3-time: 3.1.0
      d3-time-format: 4.1.0
  d3-selection@3.0.0: {}
  d3-shape@3.2.0:
    dependencies:
      d3-path: 3.1.0
@@ -6611,6 +6733,23 @@ snapshots:
  d3-timer@3.0.1: {}
  d3-transition@3.0.1(d3-selection@3.0.0):
    dependencies:
      d3-color: 3.1.0
      d3-dispatch: 3.0.1
      d3-ease: 3.0.1
      d3-interpolate: 3.0.1
      d3-selection: 3.0.0
      d3-timer: 3.0.1
  d3-zoom@3.0.0:
    dependencies:
      d3-dispatch: 3.0.1
      d3-drag: 3.0.0
      d3-interpolate: 3.0.1
      d3-selection: 3.0.0
      d3-transition: 3.0.1(d3-selection@3.0.0)
  damerau-levenshtein@1.0.8: {}
  data-urls@7.0.0:
@@ -9213,4 +9352,11 @@ snapshots:
    dependencies:
      tslib: 2.3.0
  zustand@4.5.7(@types/react@19.2.2)(react@19.2.3):
    dependencies:
      use-sync-external-store: 1.6.0(react@19.2.3)
    optionalDependencies:
      '@types/react': 19.2.2
      react: 19.2.3
  zwitch@2.0.4: {}
@@ -0,0 +1,151 @@
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {fireEvent, render, screen, waitFor} from '@testing-library/react';
 import type {AxiosResponse} from 'axios';
 import {createElement} from 'react';
 import {beforeEach, describe, expect, it, vi} from 'vitest';
 import WafPage from '@/app/(main)/waf/page';
 import apiClient from '@/lib/services/core/api-client';
 import {ProxyRouteService, WafService} from '@/lib/services/openflare';
 import type {WAFSiteRuleGroups} from '@/lib/services/openflare';
 import {WafService as DirectWafService} from '@/lib/services/openflare/waf.service';
 const pushMock = vi.fn();
 vi.mock('next/navigation', () => ({
  useRouter: () => ({push: pushMock}),
 }));
 vi.mock('@/lib/services/core/api-client', () => ({
  default: {
    post: vi.fn(),
  },
 }));
 vi.mock('@/lib/services/openflare', async (importOriginal) => {
  const actual = await importOriginal<typeof import('@/lib/services/openflare')>();
  return {
    ...actual,
    WafService: {
      ...actual.WafService,
      listRuleGroups: vi.fn(),
      listIPGroups: vi.fn(),
      createRule: vi.fn(),
      deleteRuleGroup: vi.fn(),
      updateRuleGroupSites: vi.fn(),
    },
    ProxyRouteService: {
      ...actual.ProxyRouteService,
      list: vi.fn(),
    },
  };
 });
 const graph = {
  schema_version: 1,
  nodes: [
    {id: 'start', type: 'start' as const, position: {x: 0, y: 0}, config: {}},
    {id: 'allow', type: 'allow' as const, position: {x: 200, y: 0}, config: {}},
  ],
  edges: [{id: 'edge', source: 'start', source_handle: 'next', target: 'allow'}],
 };
 const ruleSummary = {
  id: 17,
  name: '入口防护',
  enabled: false,
  is_global: false,
  graph,
  revision: 1,
  applied_site_ids: [],
  applied_site_count: 0,
  created_at: '',
  updated_at: '',
 };
 // The binding API returns graph-backed rule summaries, not obsolete fixed-chain fields.
 const siteRuleGroupsFixture: WAFSiteRuleGroups = {
  route_id: 9,
  global_rule_group: null,
  rule_groups: [ruleSummary],
  applied_rule_groups: [ruleSummary],
  applied_ids: [17],
 };
 describe('WafService rule graph API', () => {
  beforeEach(() => {
    vi.mocked(apiClient.post).mockReset();
  });
  it('models site bindings with graph-backed rule summaries', () => {
    expect(siteRuleGroupsFixture.rule_groups[0]?.graph.nodes).toHaveLength(2);
    expect(siteRuleGroupsFixture.applied_ids).toEqual([17]);
  });
  it('creates a rule with a name-only payload', async () => {
    vi.mocked(apiClient.post).mockResolvedValue({
      data: {error_msg: '', data: {id: 17, name: '入口防护', graph}},
    } as AxiosResponse);
    await DirectWafService.createRule({name: '入口防护'});
    expect(apiClient.post).toHaveBeenCalledWith(
      '/api/v1/d/waf/rule-groups',
      {name: '入口防护'},
      undefined,
    );
  });
  it('saves the graph together with its current revision', async () => {
    vi.mocked(apiClient.post).mockResolvedValue({
      data: {error_msg: '', data: {id: 17, revision: 4, graph}},
    } as AxiosResponse);
    await DirectWafService.saveRuleGraph(17, {revision: 3, graph});
    expect(apiClient.post).toHaveBeenCalledWith(
      '/api/v1/d/waf/rule-groups/17/graph',
      {revision: 3, graph},
      undefined,
    );
  });
 });
 describe('WAF rule creation flow', () => {
  beforeEach(() => {
    pushMock.mockReset();
    vi.mocked(WafService.listRuleGroups).mockReset();
    vi.mocked(WafService.listRuleGroups).mockResolvedValue([]);
    vi.mocked(WafService.listIPGroups).mockReset();
    vi.mocked(WafService.listIPGroups).mockResolvedValue([]);
    vi.mocked(ProxyRouteService.list).mockReset();
    vi.mocked(ProxyRouteService.list).mockResolvedValue([]);
    vi.mocked(WafService.createRule).mockReset();
    vi.mocked(WafService.createRule).mockResolvedValue(ruleSummary);
  });
  it('creates by name and navigates directly to the graph editor', async () => {
    const client = new QueryClient({
      defaultOptions: {queries: {retry: false, gcTime: 0}},
    });
    render(
      createElement(
        QueryClientProvider,
        {client},
        createElement(WafPage),
      ),
    );
    fireEvent.click(await screen.findByRole('button', {name: '新建规则'}));
    expect(screen.queryByText('IP 白名单')).not.toBeInTheDocument();
    fireEvent.change(screen.getByRole('textbox', {name: '规则名称'}), {
      target: {value: '入口防护'},
    });
    fireEvent.click(screen.getByRole('button', {name: '创建并编排'}));
    await waitFor(() => {
      expect(WafService.createRule).toHaveBeenCalledWith({name: '入口防护'});
      expect(pushMock).toHaveBeenCalledWith('/waf/rules/editor?id=17');
    });
  });
 });