prettier

2026-10-14 02:46:37 +08:00 · 2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
@@ -1,28 +1,40 @@
 'use client';

-import {Suspense, useCallback, useEffect, useMemo, useState} from 'react';
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import {ArrowLeft, GitBranch, Save} from 'lucide-react';
-import {useRouter, useSearchParams} from 'next/navigation';
-import {toast} from 'sonner';
+import { ArrowLeft, GitBranch, Save } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { toast } from 'sonner';

-import {Badge} from '@/components/ui/badge';
-import {Button} from '@/components/ui/button';
-import {Label} from '@/components/ui/label';
-import {Skeleton} from '@/components/ui/skeleton';
-import {Switch} from '@/components/ui/switch';
-import {services, type WAFRule, type WAFRuleGraph, type WAFRuleNode} from '@/lib/services';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Switch } from '@/components/ui/switch';
+import {
+  services,
+  type WAFRule,
+  type WAFRuleGraph,
+  type WAFRuleNode,
+} from '@/lib/services';

-import {getErrorMessage} from '../../components/helpers';
-import {validateGraph} from './components/graph-validation';
-import {NodeProperties} from './components/node-properties';
-import {RuleFlowCanvas} from './components/rule-flow-canvas';
-import {UnsavedChanges} from './components/unsaved-changes';
-import {findGraphErrorTarget, type GraphErrorTarget} from './components/editor-behavior';
+import { getErrorMessage } from '../../components/helpers';
+import { validateGraph } from './components/graph-validation';
+import { NodeProperties } from './components/node-properties';
+import { RuleFlowCanvas } from './components/rule-flow-canvas';
+import { UnsavedChanges } from './components/unsaved-changes';
+import {
+  findGraphErrorTarget,
+  type GraphErrorTarget,
+} from './components/editor-behavior';

 export default function WAFRuleEditorPage() {
-  return <Suspense fallback={<EditorSkeleton/>}><EditorContent/></Suspense>;
+  return (
+    <Suspense fallback={<EditorSkeleton />}>
+      <EditorContent />
+    </Suspense>
+  );
 }

 function EditorContent() {
@@ -39,38 +51,75 @@ function EditorContent() {
  const [conflict, setConflict] = useState(false);
  const ruleQueryKey = ['waf-rule', id] as const;

-  const ruleQuery = useQuery({queryKey: ruleQueryKey, queryFn: () => services.openflareWaf.getRule(id), enabled: Number.isFinite(id) && id > 0});
-  const ipGroupsQuery = useQuery({queryKey: ['waf-ip-groups'], queryFn: () => services.openflareWaf.listIPGroups()});
-  useEffect(() => { if (ruleQuery.data && !dirty) { setGraph(ruleQuery.data.graph); setRevision(ruleQuery.data.revision); } }, [dirty, ruleQuery.data]);
-  const issues = useMemo(() => graph ? validateGraph(graph) : [], [graph]);
+  const ruleQuery = useQuery({
+    queryKey: ruleQueryKey,
+    queryFn: () => services.openflareWaf.getRule(id),
+    enabled: Number.isFinite(id) && id > 0,
+  });
+  const ipGroupsQuery = useQuery({
+    queryKey: ['waf-ip-groups'],
+    queryFn: () => services.openflareWaf.listIPGroups(),
+  });
+  useEffect(() => {
+    if (ruleQuery.data && !dirty) {
+      setGraph(ruleQuery.data.graph);
+      setRevision(ruleQuery.data.revision);
+    }
+  }, [dirty, ruleQuery.data]);
+  const issues = useMemo(() => (graph ? validateGraph(graph) : []), [graph]);
  const selected = graph?.nodes.find((node) => node.id === selectedId);

  const saveMutation = useMutation({
-    mutationFn: () => services.openflareWaf.saveRuleGraph(id, {revision, graph: graph!}),
-    onSuccess: (rule) => { setGraph(rule.graph); setRevision(rule.revision); setDirty(false); setConflict(false); queryClient.setQueryData(['waf-rule', id], rule); toast.success('规则图已保存'); },
+    mutationFn: () =>
+      services.openflareWaf.saveRuleGraph(id, { revision, graph: graph! }),
+    onSuccess: (rule) => {
+      setGraph(rule.graph);
+      setRevision(rule.revision);
+      setDirty(false);
+      setConflict(false);
+      queryClient.setQueryData(['waf-rule', id], rule);
+      toast.success('规则图已保存');
+    },
    onError: (error) => {
-      if (axios.isAxiosError(error) && error.response?.status === 409) { setConflict(true); toast.error('规则已在其他页面更新，请重新加载'); return; }
+      if (axios.isAxiosError(error) && error.response?.status === 409) {
+        setConflict(true);
+        toast.error('规则已在其他页面更新，请重新加载');
+        return;
+      }
      const payload = axios.isAxiosError(error) ? error.response?.data : error;
-      const target = graph ? findGraphErrorTarget(payload, graph.nodes.map((node) => node.id), graph.edges.map((edge) => edge.id)) : undefined;
-      if (target?.kind === 'node') { setSelectedEdgeId(undefined); setSelectedId(target.id); }
-      if (target?.kind === 'edge') { setSelectedId(undefined); setSelectedEdgeId(target.id); }
-      setFocusTarget(target ? {...target} : undefined);
+      const target = graph
+        ? findGraphErrorTarget(
+            payload,
+            graph.nodes.map((node) => node.id),
+            graph.edges.map((edge) => edge.id),
+          )
+        : undefined;
+      if (target?.kind === 'node') {
+        setSelectedEdgeId(undefined);
+        setSelectedId(target.id);
+      }
+      if (target?.kind === 'edge') {
+        setSelectedId(undefined);
+        setSelectedEdgeId(target.id);
+      }
+      setFocusTarget(target ? { ...target } : undefined);
      toast.error('保存失败，请检查标记的节点和连线');
    },
  });

  const metaMutation = useMutation({
-    mutationFn: (enabled: boolean) => services.openflareWaf.updateRuleMeta(id, {
-      name: ruleQuery.data!.name,
-      enabled,
-    }),
+    mutationFn: (enabled: boolean) =>
+      services.openflareWaf.updateRuleMeta(id, {
+        name: ruleQuery.data!.name,
+        enabled,
+      }),
    onMutate: async (enabled) => {
-      await queryClient.cancelQueries({queryKey: ruleQueryKey});
+      await queryClient.cancelQueries({ queryKey: ruleQueryKey });
      const previous = queryClient.getQueryData<WAFRule>(ruleQueryKey);
      queryClient.setQueryData<WAFRule>(ruleQueryKey, (current) =>
-        current ? {...current, enabled} : current,
+        current ? { ...current, enabled } : current,
      );
-      return {previous};
+      return { previous };
    },
    onError: (error, _enabled, context) => {
      if (context?.previous) {
@@ -80,51 +129,148 @@ function EditorContent() {
    },
    onSuccess: (rule) => {
      queryClient.setQueryData(ruleQueryKey, rule);
-      void queryClient.invalidateQueries({queryKey: ruleQueryKey, refetchType: 'none'});
-      void queryClient.invalidateQueries({queryKey: ['openflare', 'waf', 'rule-groups']});
-      void queryClient.invalidateQueries({queryKey: ['openflare', 'config-versions', 'diff']});
+      void queryClient.invalidateQueries({
+        queryKey: ruleQueryKey,
+        refetchType: 'none',
+      });
+      void queryClient.invalidateQueries({
+        queryKey: ['openflare', 'waf', 'rule-groups'],
+      });
+      void queryClient.invalidateQueries({
+        queryKey: ['openflare', 'config-versions', 'diff'],
+      });
      toast.success(rule.enabled ? '规则已启用' : '规则已停用');
    },
  });

-  const changeGraph = useCallback((next: WAFRuleGraph, persistent = true) => { setGraph(next); if (persistent) { setDirty(true); setConflict(false); } }, []);
-  const changeNode = useCallback((next: WAFRuleNode) => { if (!graph) return; changeGraph({...graph, nodes: graph.nodes.map((node) => node.id === next.id ? next : node)}); }, [changeGraph, graph]);
-  const leave = () => { if (!dirty || window.confirm('存在未保存的更改，确定离开吗？')) router.push('/waf'); };
+  const changeGraph = useCallback((next: WAFRuleGraph, persistent = true) => {
+    setGraph(next);
+    if (persistent) {
+      setDirty(true);
+      setConflict(false);
+    }
+  }, []);
+  const changeNode = useCallback(
+    (next: WAFRuleNode) => {
+      if (!graph) return;
+      changeGraph({
+        ...graph,
+        nodes: graph.nodes.map((node) => (node.id === next.id ? next : node)),
+      });
+    },
+    [changeGraph, graph],
+  );
+  const leave = () => {
+    if (!dirty || window.confirm('存在未保存的更改，确定离开吗？'))
+      router.push('/waf');
+  };

-  if (!Number.isFinite(id) || id <= 0) return <div className="w-full px-1 py-6"><p className="text-sm text-destructive">缺少有效的规则 ID。</p></div>;
-  if (ruleQuery.isError) return <div className="flex w-full flex-col items-start gap-3 px-1 py-6"><p className="text-sm text-destructive">规则加载失败，请重试。</p><Button variant="outline" onClick={() => void ruleQuery.refetch()}>重新加载</Button></div>;
-  if (ruleQuery.isLoading || !graph || !ruleQuery.data) return <EditorSkeleton/>;
+  if (!Number.isFinite(id) || id <= 0)
+    return (
+      <div className='w-full px-1 py-6'>
+        <p className='text-sm text-destructive'>缺少有效的规则 ID。</p>
+      </div>
+    );
+  if (ruleQuery.isError)
+    return (
+      <div className='flex w-full flex-col items-start gap-3 px-1 py-6'>
+        <p className='text-sm text-destructive'>规则加载失败，请重试。</p>
+        <Button variant='outline' onClick={() => void ruleQuery.refetch()}>
+          重新加载
+        </Button>
+      </div>
+    );
+  if (ruleQuery.isLoading || !graph || !ruleQuery.data)
+    return <EditorSkeleton />;

  return (
-    <div className="flex h-[calc(100dvh-4rem)] w-full flex-col px-1 py-6">
-      <UnsavedChanges dirty={dirty}/>
-      <header className="mb-4 flex items-center justify-between gap-4">
-        <div className="flex min-w-0 items-center gap-2"><GitBranch className="size-5 text-primary"/>
-          <h1 className="text-2xl font-semibold tracking-tight">{ruleQuery.data.name}</h1>
-          <Badge variant={ruleQuery.data.enabled ? 'default' : 'secondary'}>{ruleQuery.data.enabled ? '已启用' : '已停用'}</Badge>
-          <Badge variant={issues.length === 0 ? 'outline' : 'destructive'}>{issues.length === 0 ? '图校验通过' : `${issues.length} 个问题`}</Badge>
-          {dirty && <Badge variant="secondary">未保存</Badge>}
+    <div className='flex h-[calc(100dvh-4rem)] w-full flex-col px-1 py-6'>
+      <UnsavedChanges dirty={dirty} />
+      <header className='mb-4 flex items-center justify-between gap-4'>
+        <div className='flex min-w-0 items-center gap-2'>
+          <GitBranch className='size-5 text-primary' />
+          <h1 className='text-2xl font-semibold tracking-tight'>
+            {ruleQuery.data.name}
+          </h1>
+          <Badge variant={ruleQuery.data.enabled ? 'default' : 'secondary'}>
+            {ruleQuery.data.enabled ? '已启用' : '已停用'}
+          </Badge>
+          <Badge variant={issues.length === 0 ? 'outline' : 'destructive'}>
+            {issues.length === 0 ? '图校验通过' : `${issues.length} 个问题`}
+          </Badge>
+          {dirty && <Badge variant='secondary'>未保存</Badge>}
        </div>
-        <div className="flex shrink-0 items-center gap-2">
-          <div className="flex items-center gap-2">
+        <div className='flex shrink-0 items-center gap-2'>
+          <div className='flex items-center gap-2'>
            <Switch
-              id="rule-enabled"
+              id='rule-enabled'
              checked={ruleQuery.data.enabled}
-              disabled={dirty || issues.length > 0 || saveMutation.isPending || metaMutation.isPending}
+              disabled={
+                dirty ||
+                issues.length > 0 ||
+                saveMutation.isPending ||
+                metaMutation.isPending
+              }
              onCheckedChange={(enabled) => metaMutation.mutate(enabled)}
            />
-            <Label htmlFor="rule-enabled">启用规则</Label>
+            <Label htmlFor='rule-enabled'>启用规则</Label>
          </div>
-          <Button variant="outline" onClick={leave}><ArrowLeft data-icon="inline-start"/>返回</Button>
-          {conflict && <Button variant="outline" onClick={() => { setDirty(false); setConflict(false); void ruleQuery.refetch(); }}>重新加载</Button>}
-          <Button disabled={!dirty || issues.length > 0 || saveMutation.isPending} onClick={() => saveMutation.mutate()}><Save data-icon="inline-start"/>{saveMutation.isPending ? '保存中...' : '保存'}</Button>
+          <Button variant='outline' onClick={leave}>
+            <ArrowLeft data-icon='inline-start' />
+            返回
+          </Button>
+          {conflict && (
+            <Button
+              variant='outline'
+              onClick={() => {
+                setDirty(false);
+                setConflict(false);
+                void ruleQuery.refetch();
+              }}
+            >
+              重新加载
+            </Button>
+          )}
+          <Button
+            disabled={!dirty || issues.length > 0 || saveMutation.isPending}
+            onClick={() => saveMutation.mutate()}
+          >
+            <Save data-icon='inline-start' />
+            {saveMutation.isPending ? '保存中...' : '保存'}
+          </Button>
        </div>
      </header>
-      <div className="flex min-h-0 flex-1 overflow-hidden rounded-xl border bg-background shadow-sm">
-        <RuleFlowCanvas graph={graph} issues={issues} selectedId={selectedId} selectedEdgeId={selectedEdgeId} focusTarget={focusTarget} onGraphChange={changeGraph} onSelect={setSelectedId} onSelectEdge={setSelectedEdgeId}/>{selected && <NodeProperties node={selected} ipGroups={ipGroupsQuery.data ?? []} onChange={changeNode}/>}
+      <div className='flex min-h-0 flex-1 overflow-hidden rounded-xl border bg-background shadow-sm'>
+        <RuleFlowCanvas
+          graph={graph}
+          issues={issues}
+          selectedId={selectedId}
+          selectedEdgeId={selectedEdgeId}
+          focusTarget={focusTarget}
+          onGraphChange={changeGraph}
+          onSelect={setSelectedId}
+          onSelectEdge={setSelectedEdgeId}
+        />
+        {selected && (
+          <NodeProperties
+            node={selected}
+            ipGroups={ipGroupsQuery.data ?? []}
+            onChange={changeNode}
+          />
+        )}
      </div>
    </div>
  );
 }

-function EditorSkeleton() { return <div className="flex w-full flex-col gap-4 px-1 py-6"><div className="flex items-center gap-2"><Skeleton className="size-5"/><Skeleton className="h-8 w-64"/></div><Skeleton className="h-[70dvh] w-full"/></div>; }
+function EditorSkeleton() {
+  return (
+    <div className='flex w-full flex-col gap-4 px-1 py-6'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='size-5' />
+        <Skeleton className='h-8 w-64' />
+      </div>
+      <Skeleton className='h-[70dvh] w-full' />
+    </div>
+  );
+}