tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-13 02:26:36 +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
+69 -62
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'
</Button> size='icon'
</DropdownMenuTrigger> className='size-8'
<DropdownMenuContent align='end'> title='查看'
<DropdownMenuItem onClick={() => onView(group)}> aria-label='查看'
<Eye className='size-4 mr-2' /> onClick={() => onView(group)}
查看 >
</DropdownMenuItem> <Eye />
<DropdownMenuItem onClick={() => onEdit(group)}> </Button>
<Pencil className='size-4 mr-2' /> <Button
编辑 type='button'
</DropdownMenuItem> variant='ghost'
{group.type === 'automatic' ? ( size='icon'
<DropdownMenuItem onClick={() => onTest(group)}> className='size-8'
<Play className='size-4 mr-2' /> title='编辑'
测试规则 aria-label='编辑'
</DropdownMenuItem> onClick={() => onEdit(group)}
) : null} >
{group.type === 'subscription' || <Pencil />
group.type === 'automatic' ? ( </Button>
<DropdownMenuItem {group.type === 'automatic' ? (
disabled={syncingId === group.id} <Button
onClick={() => onSync(group)} type='button'
> variant='ghost'
<Download className='size-4 mr-2' /> size='icon'
{syncingId === group.id className='size-8'
? '同步中...' title='测试规则'
: group.type === 'automatic' aria-label='测试规则'
? '立即执行' onClick={() => onTest(group)}
: '立即同步'}
</DropdownMenuItem>
) : null}
<DropdownMenuSeparator />
<DropdownMenuItem
className='text-destructive focus:text-destructive'
onClick={() => onDelete(group)}
> >
<Trash2 className='size-4 mr-2' /> <Play />
删除 </Button>
</DropdownMenuItem> ) : null}
</DropdownMenuContent> {group.type === 'subscription' || group.type === 'automatic' ? (
</DropdownMenu> <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> </TableCell>
</TableRow> </TableRow>
))} ))}
frontend/app/(main)/waf/components/rule-groups-table.tsx
+30 -47
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'
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> </Button>
</DropdownMenuTrigger> ) : null}
<DropdownMenuContent align='end'> </div>
<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>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}