From 32113eb79091e6a494383d6b930206770a509673 Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Sun, 19 Jul 2026 12:47:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(waf):=20=E5=88=97=E8=A1=A8=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=94=B9=E4=B8=BA=E7=9B=B4=E6=8E=A5=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

规则组与 IP 组表格去掉「…」菜单，操作以图标平铺展示。
---
 .../(main)/waf/components/ip-groups-table.tsx | 131 +++++++++---------
 .../waf/components/rule-groups-table.tsx      |  77 ++++------
 2 files changed, 99 insertions(+), 109 deletions(-)

diff --git a/frontend/app/(main)/waf/components/ip-groups-table.tsx b/frontend/app/(main)/waf/components/ip-groups-table.tsx
index 51149e1e..6e079723 100644
--- a/frontend/app/(main)/waf/components/ip-groups-table.tsx
+++ b/frontend/app/(main)/waf/components/ip-groups-table.tsx
@@ -1,23 +1,9 @@
 'use client';
 
-import {
-  Download,
-  Eye,
-  MoreHorizontal,
-  Pencil,
-  Play,
-  Trash2,
-} from 'lucide-react';
+import { Download, Eye, Pencil, Play, Trash2 } from 'lucide-react';
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Table,
   TableBody,
@@ -61,7 +47,7 @@ export function IPGroupsTable({
           <TableHead>引用次数</TableHead>
           <TableHead>同步状态</TableHead>
           <TableHead>更新时间</TableHead>
-          <TableHead className='w-[80px] text-right'>操作</TableHead>
+          <TableHead className='w-[168px] text-right'>操作</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -78,60 +64,81 @@ export function IPGroupsTable({
             </TableCell>
             <TableCell>{group.ip_list.length}</TableCell>
             <TableCell>{group.referenced_by_rule_count}</TableCell>
-            <TableCell className='text-sm text-muted-foreground max-w-[200px] truncate'>
+            <TableCell className='max-w-[200px] truncate text-sm text-muted-foreground'>
               {group.last_sync_status
                 ? `${group.last_sync_status}: ${group.last_sync_message}`
                 : '尚无同步记录'}
             </TableCell>
-            <TableCell className='text-muted-foreground text-sm'>
+            <TableCell className='text-sm text-muted-foreground'>
               {group.updated_at ? formatDateTime(group.updated_at) : '—'}
             </TableCell>
             <TableCell className='text-right'>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant='ghost' size='icon' className='size-8'>
-                    <MoreHorizontal className='size-4' />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align='end'>
-                  <DropdownMenuItem onClick={() => onView(group)}>
-                    <Eye className='size-4 mr-2' />
-                    查看
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => onEdit(group)}>
-                    <Pencil className='size-4 mr-2' />
-                    编辑
-                  </DropdownMenuItem>
-                  {group.type === 'automatic' ? (
-                    <DropdownMenuItem onClick={() => onTest(group)}>
-                      <Play className='size-4 mr-2' />
-                      测试规则
-                    </DropdownMenuItem>
-                  ) : null}
-                  {group.type === 'subscription' ||
-                  group.type === 'automatic' ? (
-                    <DropdownMenuItem
-                      disabled={syncingId === group.id}
-                      onClick={() => onSync(group)}
-                    >
-                      <Download className='size-4 mr-2' />
-                      {syncingId === group.id
-                        ? '同步中...'
-                        : group.type === 'automatic'
-                          ? '立即执行'
-                          : '立即同步'}
-                    </DropdownMenuItem>
-                  ) : null}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    className='text-destructive focus:text-destructive'
-                    onClick={() => onDelete(group)}
+              <div className='flex items-center justify-end gap-1'>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='icon'
+                  className='size-8'
+                  title='查看'
+                  aria-label='查看'
+                  onClick={() => onView(group)}
+                >
+                  <Eye />
+                </Button>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='icon'
+                  className='size-8'
+                  title='编辑'
+                  aria-label='编辑'
+                  onClick={() => onEdit(group)}
+                >
+                  <Pencil />
+                </Button>
+                {group.type === 'automatic' ? (
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='icon'
+                    className='size-8'
+                    title='测试规则'
+                    aria-label='测试规则'
+                    onClick={() => onTest(group)}
                   >
-                    <Trash2 className='size-4 mr-2' />
-                    删除
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+                    <Play />
+                  </Button>
+                ) : null}
+                {group.type === 'subscription' || group.type === 'automatic' ? (
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='icon'
+                    className='size-8'
+                    title={
+                      group.type === 'automatic' ? '立即执行' : '立即同步'
+                    }
+                    aria-label={
+                      group.type === 'automatic' ? '立即执行' : '立即同步'
+                    }
+                    disabled={syncingId === group.id}
+                    onClick={() => onSync(group)}
+                  >
+                    <Download />
+                  </Button>
+                ) : null}
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='icon'
+                  className='size-8 text-destructive hover:text-destructive'
+                  title='删除'
+                  aria-label='删除'
+                  onClick={() => onDelete(group)}
+                >
+                  <Trash2 />
+                </Button>
+              </div>
             </TableCell>
           </TableRow>
         ))}
diff --git a/frontend/app/(main)/waf/components/rule-groups-table.tsx b/frontend/app/(main)/waf/components/rule-groups-table.tsx
index a96a9a8d..537f1af1 100644
--- a/frontend/app/(main)/waf/components/rule-groups-table.tsx
+++ b/frontend/app/(main)/waf/components/rule-groups-table.tsx
@@ -1,23 +1,9 @@
 'use client';
 
-import {
-  Globe2,
-  MoreHorizontal,
-  Pencil,
-  ShieldCheck,
-  Trash2,
-} from 'lucide-react';
+import { Globe2, Pencil, ShieldCheck, Trash2 } from 'lucide-react';
 
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Table,
   TableBody,
@@ -50,7 +36,7 @@ export function RuleGroupsTable({
           <TableHead>节点数</TableHead>
           <TableHead>应用范围</TableHead>
           <TableHead>更新时间</TableHead>
-          <TableHead className='w-[80px] text-right'>操作</TableHead>
+          <TableHead className='w-[88px] text-right'>操作</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -59,9 +45,9 @@ export function RuleGroupsTable({
             <TableCell>
               <div className='flex items-center gap-2'>
                 {group.is_global ? (
-                  <Globe2 className='size-4 text-primary shrink-0' />
+                  <Globe2 className='size-4 shrink-0 text-primary' />
                 ) : (
-                  <ShieldCheck className='size-4 text-muted-foreground shrink-0' />
+                  <ShieldCheck className='size-4 shrink-0 text-muted-foreground' />
                 )}
                 <span className='font-medium'>{group.name}</span>
               </div>
@@ -82,39 +68,36 @@ export function RuleGroupsTable({
                 ? '全部网站'
                 : `${group.applied_site_count} 个网站`}
             </TableCell>
-            <TableCell className='text-muted-foreground text-sm'>
+            <TableCell className='text-sm text-muted-foreground'>
               {group.updated_at ? formatDateTime(group.updated_at) : '—'}
             </TableCell>
             <TableCell className='text-right'>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant='ghost' size='icon' className='size-8'>
-                    <MoreHorizontal />
+              <div className='flex items-center justify-end gap-1'>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  size='icon'
+                  className='size-8'
+                  title='编排'
+                  aria-label='编排'
+                  onClick={() => onEdit(group)}
+                >
+                  <Pencil />
+                </Button>
+                {!group.is_global ? (
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='icon'
+                    className='size-8 text-destructive hover:text-destructive'
+                    title='删除'
+                    aria-label='删除'
+                    onClick={() => onDelete(group)}
+                  >
+                    <Trash2 />
                   </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align='end'>
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem onClick={() => onEdit(group)}>
-                      <Pencil />
-                      编排
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  {!group.is_global ? (
-                    <>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuGroup>
-                        <DropdownMenuItem
-                          variant='destructive'
-                          onClick={() => onDelete(group)}
-                        >
-                          <Trash2 />
-                          删除
-                        </DropdownMenuItem>
-                      </DropdownMenuGroup>
-                    </>
-                  ) : null}
-                </DropdownMenuContent>
-              </DropdownMenu>
+                ) : null}
+              </div>
             </TableCell>
           </TableRow>
         ))}