prettier

frontend/app/(main)/waf/page.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-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';
+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';
 
 import {
   AlertDialog,
@@ -16,17 +16,23 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import type {WAFRule} from '@/lib/services/openflare';
-import {WafService} from '@/lib/services/openflare';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import type { WAFRule } from '@/lib/services/openflare';
+import { WafService } from '@/lib/services/openflare';
 
-import {CreateRuleDialog} from './components/create-rule-dialog';
-import {getErrorMessage} from './components/helpers';
-import {RuleGroupsTable} from './components/rule-groups-table';
+import { CreateRuleDialog } from './components/create-rule-dialog';
+import { getErrorMessage } from './components/helpers';
+import { RuleGroupsTable } from './components/rule-groups-table';
 
 const ruleGroupsQueryKey = ['openflare', 'waf', 'rule-groups'];
 
@@ -44,12 +50,14 @@ export default function WafPage() {
   const invalidate = async () => {
     await Promise.all([
       queryClient.invalidateQueries({ queryKey: ruleGroupsQueryKey }),
-      queryClient.invalidateQueries({ queryKey: ['openflare', 'config-versions', 'diff'] }),
+      queryClient.invalidateQueries({
+        queryKey: ['openflare', 'config-versions', 'diff'],
+      }),
     ]);
   };
 
   const createMutation = useMutation({
-    mutationFn: (name: string) => WafService.createRule({name}),
+    mutationFn: (name: string) => WafService.createRule({ name }),
     onSuccess: (rule) => {
       toast.success('规则已创建');
       setCreateOpen(false);
@@ -81,40 +89,44 @@ export default function WafPage() {
   const error = groupsQuery.error ?? null;
 
   return (
-    <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 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" onClick={() => setCreateOpen(true)}>
-            <Plus data-icon="inline-start" />
+        <div className='flex items-center gap-2'>
+          <Button
+            variant='secondary'
+            size='sm'
+            onClick={() => setCreateOpen(true)}
+          >
+            <Plus data-icon='inline-start' />
             新建规则
           </Button>
         </div>
       </div>
 
-      <Card className="border-dashed shadow-none">
-        <CardHeader className="pb-3">
-          <div className="flex items-center justify-between gap-3">
+      <Card className='border-dashed shadow-none'>
+        <CardHeader className='pb-3'>
+          <div className='flex items-center justify-between gap-3'>
             <div>
-              <CardTitle className="text-base font-semibold">规则组</CardTitle>
+              <CardTitle className='text-base font-semibold'>规则组</CardTitle>
               <CardDescription>
                 使用可视化流程编排 WAF 防护规则；全局规则始终应用到所有网站。
               </CardDescription>
             </div>
             <Button
-              variant="outline"
-              size="sm"
-              className="h-7 text-xs"
+              variant='outline'
+              size='sm'
+              className='h-7 text-xs'
               onClick={handleRefresh}
               disabled={groupsQuery.isFetching}
             >
               {groupsQuery.isFetching ? (
-                <Loader2 className="size-3.5 mr-1 animate-spin" />
+                <Loader2 className='size-3.5 mr-1 animate-spin' />
               ) : (
-                <RefreshCw className="size-3.5 mr-1" />
+                <RefreshCw className='size-3.5 mr-1' />
               )}
               刷新
             </Button>
@@ -122,19 +134,22 @@ export default function WafPage() {
         </CardHeader>
         <CardContent>
           {loading ? (
-            <LoadingStateWithBorder icon={Shield} description="加载 WAF 规则组中..." />
+            <LoadingStateWithBorder
+              icon={Shield}
+              description='加载 WAF 规则组中...'
+            />
           ) : error ? (
-            <div className="p-8 border border-dashed rounded-lg">
+            <div className='p-8 border border-dashed rounded-lg'>
               <ErrorInline
                 message={getErrorMessage(error)}
                 onRetry={handleRefresh}
-                className="justify-center"
+                className='justify-center'
               />
             </div>
           ) : groups.length === 0 ? (
             <EmptyStateWithBorder
               icon={Shield}
-              description="暂无规则组，系统通常会自动创建全局规则组。"
+              description='暂无规则组，系统通常会自动创建全局规则组。'
             />
           ) : (
             <RuleGroupsTable
@@ -167,11 +182,15 @@ export default function WafPage() {
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleteMutation.isPending}>取消</AlertDialogCancel>
+            <AlertDialogCancel disabled={deleteMutation.isPending}>
+              取消
+            </AlertDialogCancel>
             <AlertDialogAction
-              className="bg-destructive text-white hover:bg-destructive/90"
+              className='bg-destructive text-white hover:bg-destructive/90'
               disabled={deleteMutation.isPending}
-              onClick={() => deleteTarget && deleteMutation.mutate(deleteTarget.id)}
+              onClick={() =>
+                deleteTarget && deleteMutation.mutate(deleteTarget.id)
+              }
             >
               {deleteMutation.isPending ? '删除中...' : '确认删除'}
             </AlertDialogAction>