feat(frontend): create orchestrated waf rules

2026-10-13 18:36:37 +08:00 · 2026-07-13 12:00:24 +08:00
parent af20e2e838
commit 4000366856
13 changed files with 539 additions and 493 deletions
@@ -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>
+  );
+}