tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-13 10:26:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(waf): 列表操作改为直接图标按钮

Browse Source 
规则组与 IP 组表格去掉「…」菜单，操作以图标平铺展示。
This commit is contained in:
ryan
2026-07-19 12:47:02 +08:00
parent 1ba05ec0bd
commit 32113eb790
2 changed files with 99 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/waf/components/ip-groups-table.tsx
+61 -54
View File
@@ -1,23 +1,9 @@
'use client'; 'use client';
import { import { Download, Eye, Pencil, Play, Trash2 } from 'lucide-react';
Download,
Eye,
MoreHorizontal,
Pencil,
Play,
Trash2,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { import {
Table, Table,
TableBody, TableBody,
@@ -61,7 +47,7 @@ export function IPGroupsTable({
<TableHead>引用次数</TableHead> <TableHead>引用次数</TableHead>
<TableHead>同步状态</TableHead> <TableHead>同步状态</TableHead>
<TableHead>更新时间</TableHead> <TableHead>更新时间</TableHead>
<TableHead className='w-[80px] text-right'>操作</TableHead> <TableHead className='w-[168px] text-right'>操作</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -78,60 +64,81 @@ export function IPGroupsTable({
</TableCell> </TableCell>
<TableCell>{group.ip_list.length}</TableCell> <TableCell>{group.ip_list.length}</TableCell>
<TableCell>{group.referenced_by_rule_count}</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_status}: ${group.last_sync_message}` ? `${group.last_sync_status}: ${group.last_sync_message}`
: '尚无同步记录'} : '尚无同步记录'}
</TableCell> </TableCell>
<TableCell className='text-muted-foreground text-sm'> <TableCell className='text-sm text-muted-foreground'>
{group.updated_at ? formatDateTime(group.updated_at) : '—'} {group.updated_at ? formatDateTime(group.updated_at) : '—'}
</TableCell> </TableCell>
<TableCell className='text-right'> <TableCell className='text-right'>
<DropdownMenu> <div className='flex items-center justify-end gap-1'>
<DropdownMenuTrigger asChild> <Button
<Button variant='ghost' size='icon' className='size-8'> type='button'
<MoreHorizontal className='size-4' /> 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> </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' ? ( {group.type === 'automatic' ? (
<DropdownMenuItem onClick={() => onTest(group)}> <Button
<Play className='size-4 mr-2' /> type='button'
测试规则 variant='ghost'
</DropdownMenuItem> size='icon'
className='size-8'
title='测试规则'
aria-label='测试规则'
onClick={() => onTest(group)}
>
<Play />
</Button>
) : null} ) : null}
{group.type === 'subscription' || {group.type === 'subscription' || group.type === 'automatic' ? (
group.type === 'automatic' ? ( <Button
<DropdownMenuItem type='button'
variant='ghost'
size='icon'
className='size-8'
title={
group.type === 'automatic' ? '立即执行' : '立即同步'
}
aria-label={
group.type === 'automatic' ? '立即执行' : '立即同步'
}
disabled={syncingId === group.id} disabled={syncingId === group.id}
onClick={() => onSync(group)} onClick={() => onSync(group)}
> >
<Download className='size-4 mr-2' /> <Download />
{syncingId === group.id </Button>
? '同步中...'
: group.type === 'automatic'
? '立即执行'
: '立即同步'}
</DropdownMenuItem>
) : null} ) : null}
<DropdownMenuSeparator /> <Button
<DropdownMenuItem type='button'
className='text-destructive focus:text-destructive' variant='ghost'
size='icon'
className='size-8 text-destructive hover:text-destructive'
title='删除'
aria-label='删除'
onClick={() => onDelete(group)} onClick={() => onDelete(group)}
> >
<Trash2 className='size-4 mr-2' /> <Trash2 />
删除 </Button>
</DropdownMenuItem> </div>
</DropdownMenuContent>
</DropdownMenu>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
frontend/app/(main)/waf/components/rule-groups-table.tsx
+25 -42
View File
@@ -1,23 +1,9 @@
'use client'; 'use client';
import { import { Globe2, Pencil, ShieldCheck, Trash2 } from 'lucide-react';
Globe2,
MoreHorizontal,
Pencil,
ShieldCheck,
Trash2,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { import {
Table, Table,
TableBody, TableBody,
@@ -50,7 +36,7 @@ export function RuleGroupsTable({
<TableHead>节点数</TableHead> <TableHead>节点数</TableHead>
<TableHead>应用范围</TableHead> <TableHead>应用范围</TableHead>
<TableHead>更新时间</TableHead> <TableHead>更新时间</TableHead>
<TableHead className='w-[80px] text-right'>操作</TableHead> <TableHead className='w-[88px] text-right'>操作</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -59,9 +45,9 @@ export function RuleGroupsTable({
<TableCell> <TableCell>
<div className='flex items-center gap-2'> <div className='flex items-center gap-2'>
{group.is_global ? ( {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> <span className='font-medium'>{group.name}</span>
</div> </div>
@@ -82,39 +68,36 @@ export function RuleGroupsTable({
? '全部网站' ? '全部网站'
: `${group.applied_site_count} 个网站`} : `${group.applied_site_count} 个网站`}
</TableCell> </TableCell>
<TableCell className='text-muted-foreground text-sm'> <TableCell className='text-sm text-muted-foreground'>
{group.updated_at ? formatDateTime(group.updated_at) : '—'} {group.updated_at ? formatDateTime(group.updated_at) : '—'}
</TableCell> </TableCell>
<TableCell className='text-right'> <TableCell className='text-right'>
<DropdownMenu> <div className='flex items-center justify-end gap-1'>
<DropdownMenuTrigger asChild> <Button
<Button variant='ghost' size='icon' className='size-8'> type='button'
<MoreHorizontal /> variant='ghost'
</Button> size='icon'
</DropdownMenuTrigger> className='size-8'
<DropdownMenuContent align='end'> title='编排'
<DropdownMenuGroup> aria-label='编排'
<DropdownMenuItem onClick={() => onEdit(group)}> onClick={() => onEdit(group)}
>
<Pencil /> <Pencil />
编排 </Button>
</DropdownMenuItem>
</DropdownMenuGroup>
{!group.is_global ? ( {!group.is_global ? (
<> <Button
<DropdownMenuSeparator /> type='button'
<DropdownMenuGroup> variant='ghost'
<DropdownMenuItem size='icon'
variant='destructive' className='size-8 text-destructive hover:text-destructive'
title='删除'
aria-label='删除'
onClick={() => onDelete(group)} onClick={() => onDelete(group)}
> >
<Trash2 /> <Trash2 />
删除 </Button>
</DropdownMenuItem>
</DropdownMenuGroup>
</>
) : null} ) : null}
</DropdownMenuContent> </div>
</DropdownMenu>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}