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

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/(main)/waf/components/ip-group-view-dialog.tsx
+65 -34
View File
@@ -1,7 +1,7 @@
'use client';
import {Loader2, Trash2} from 'lucide-react';
import {useMemo, useState} from 'react';
import { Loader2, Trash2 } from 'lucide-react';
import { useMemo, useState } from 'react';
import {
AlertDialog,
@@ -13,7 +13,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import {Button} from '@/components/ui/button';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
@@ -22,12 +22,23 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import {EmptyStateWithBorder} from '@/components/layout/empty';
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
import type {WAFIPGroup} from '@/lib/services/openflare';
import {formatDateTime} from '@/lib/utils';
import { EmptyStateWithBorder } from '@/components/layout/empty';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import type { WAFIPGroup } from '@/lib/services/openflare';
import { formatDateTime } from '@/lib/utils';
import {getIPGroupViewEntries, ipGroupTypeLabels, type IPGroupViewEntry} from './helpers';
import {
getIPGroupViewEntries,
ipGroupTypeLabels,
type IPGroupViewEntry,
} from './helpers';
interface IPGroupViewDialogProps {
open: boolean;
@@ -46,7 +57,9 @@ export function IPGroupViewDialog({
onOpenChange,
onRemoveIp,
}: IPGroupViewDialogProps) {
const [deleteTarget, setDeleteTarget] = useState<IPGroupViewEntry | null>(null);
const [deleteTarget, setDeleteTarget] = useState<IPGroupViewEntry | null>(
null,
);
const entries = useMemo(
() => (group ? getIPGroupViewEntries(group) : []),
@@ -66,9 +79,11 @@ export function IPGroupViewDialog({
}
}}
>
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
<DialogContent className='max-w-3xl max-h-[90vh] overflow-y-auto'>
<DialogHeader>
<DialogTitle>{group ? `查看 ${group.name}` : '查看 IP 组'}</DialogTitle>
<DialogTitle>
{group ? `查看 ${group.name}` : '查看 IP 组'}
</DialogTitle>
<DialogDescription>
{group
? `${ipGroupTypeLabels[group.type]} · 共 ${entries.length} 条 IP`
@@ -77,12 +92,14 @@ export function IPGroupViewDialog({
</DialogHeader>
{loading ? (
<div className="flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground">
<Loader2 className="size-4 animate-spin" />
<div className='flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground'>
<Loader2 className='size-4 animate-spin' />
加载 IP 列表...
</div>
) : !group ? (
<p className="py-8 text-center text-sm text-muted-foreground">未选择 IP 组。</p>
<p className='py-8 text-center text-sm text-muted-foreground'>
未选择 IP 组。
</p>
) : entries.length === 0 ? (
<EmptyStateWithBorder
description={
@@ -92,13 +109,13 @@ export function IPGroupViewDialog({
}
/>
) : (
<div className="space-y-3">
<div className='space-y-3'>
{group.type === 'subscription' ? (
<p className="text-xs text-muted-foreground">
<p className='text-xs text-muted-foreground'>
订阅类型在下次同步时可能重新拉取已删除的 IP。
</p>
) : null}
<div className="rounded-lg border border-dashed">
<div className='rounded-lg border border-dashed'>
<Table>
<TableHeader>
<TableRow>
@@ -109,36 +126,44 @@ export function IPGroupViewDialog({
<TableHead>封禁剩余</TableHead>
</>
) : null}
<TableHead className="w-[80px] text-right">操作</TableHead>
<TableHead className='w-[80px] text-right'>
操作
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{entries.map((entry) => (
<TableRow key={entry.ip}>
<TableCell className="font-mono text-sm">{entry.ip}</TableCell>
<TableCell className='font-mono text-sm'>
{entry.ip}
</TableCell>
{showAutomaticMeta ? (
<>
<TableCell className="text-sm text-muted-foreground">
{entry.capturedAt ? formatDateTime(entry.capturedAt) : '—'}
<TableCell className='text-sm text-muted-foreground'>
{entry.capturedAt
? formatDateTime(entry.capturedAt)
: '—'}
</TableCell>
<TableCell className='text-sm'>
{entry.banRemaining ?? '—'}
</TableCell>
<TableCell className="text-sm">{entry.banRemaining ?? '—'}</TableCell>
</>
) : null}
<TableCell className="text-right">
<TableCell className='text-right'>
<Button
type="button"
variant="ghost"
size="icon"
className="size-8 text-destructive hover:text-destructive"
type='button'
variant='ghost'
size='icon'
className='size-8 text-destructive hover:text-destructive'
disabled={removingIp === entry.ip}
onClick={() => setDeleteTarget(entry)}
>
{removingIp === entry.ip ? (
<Loader2 className="size-4 animate-spin" />
<Loader2 className='size-4 animate-spin' />
) : (
<Trash2 className="size-4" />
<Trash2 className='size-4' />
)}
<span className="sr-only">删除 {entry.ip}</span>
<span className='sr-only'>删除 {entry.ip}</span>
</Button>
</TableCell>
</TableRow>
@@ -150,7 +175,11 @@ export function IPGroupViewDialog({
)}
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
<Button
type='button'
variant='outline'
onClick={() => onOpenChange(false)}
>
关闭
</Button>
</DialogFooter>
@@ -169,9 +198,11 @@ export function IPGroupViewDialog({
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={Boolean(removingIp)}>取消</AlertDialogCancel>
<AlertDialogCancel disabled={Boolean(removingIp)}>
取消
</AlertDialogCancel>
<AlertDialogAction
className="bg-destructive text-white hover:bg-destructive/90"
className='bg-destructive text-white hover:bg-destructive/90'
disabled={Boolean(removingIp)}
onClick={async () => {
if (!deleteTarget) return;
@@ -186,4 +217,4 @@ export function IPGroupViewDialog({
</AlertDialog>
</>
);
}
}