mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-12 18:26:36 +08:00
fix(waf): 列表操作改为直接图标按钮
规则组与 IP 组表格去掉「…」菜单，操作以图标平铺展示。
This commit is contained in:
ryan
@@ -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>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -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>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user