-
-
日志明细
-
-
- {error ? (
-
-
+ <>
+
+
+
日志明细
+
- ) : loading ? (
-
- ) : (data?.items ?? []).length === 0 ? (
-
- ) : (
-
-
-
- 时间
- 节点
- IP
- 域名
- 路径
- User-Agent
- 状态码
-
-
-
- {(data?.items ?? []).map((item) => (
-
-
- {formatDateTime(item.logged_at)}
-
-
- {item.node_name || item.node_id}
-
-
- {item.remote_addr}
-
- {item.host}
-
- {item.path}
-
-
- {item.user_agent || '—'}
-
-
-
- {item.status_code}
-
-
+ {error ? (
+
+
+
+ ) : loading ? (
+
+ ) : (data?.items ?? []).length === 0 ? (
+
+ ) : (
+
+
+
+ 时间
+ 节点
+ IP
+ 域名
+ 路径
+ 状态码
+
- ))}
-
-
- )}
-
+
+ {(data?.items ?? []).map((item) => (
+
+
+ {formatDateTime(item.logged_at)}
+
+
+ {item.node_name || item.node_id}
+
+
+ {item.remote_addr}
+
+ {item.host}
+
+ {item.path}
+
+
+
+ {item.status_code}
+
+
+
+
+
+
+
+
+ 查看详情
+
+
+
+
+ ))}
+
+
+ )}
+
+
+
+
-
+
);
}
diff --git a/frontend/app/(main)/access-logs/page.tsx b/frontend/app/(main)/access-logs/page.tsx
index dfb5ae81..58e504a1 100644
--- a/frontend/app/(main)/access-logs/page.tsx
+++ b/frontend/app/(main)/access-logs/page.tsx
@@ -1,10 +1,12 @@
'use client';
-import { useCallback, useEffect, useState } from 'react';
+import { Suspense, useCallback, useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { RefreshCw, ScrollText, Trash2 } from 'lucide-react';
import { toast } from 'sonner';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { AccessLogService } from '@/lib/services/openflare';
@@ -27,9 +29,15 @@ const emptyDraft: SearchDraft = {
path: '',
};
-export default function AccessLogsPage() {
+function resolveTab(value: string | null): AccessLogTab {
+ return value === 'list' ? 'list' : 'overview';
+}
+
+function AccessLogsPageContent() {
+ const router = useRouter();
+ const searchParams = useSearchParams();
const queryClient = useQueryClient();
- const [tab, setTab] = useState
('overview');
+ const tab = resolveTab(searchParams.get('tab'));
const [draft, setDraft] = useState(emptyDraft);
const [filters, setFilters] = useState(emptyDraft);
const [pageSize, setPageSize] = useState(20);
@@ -40,6 +48,13 @@ export default function AccessLogsPage() {
const detailSortState = parseSortValue(detailSort);
+ const handleTabChange = (value: string) => {
+ const next = resolveTab(value);
+ router.replace(
+ next === 'overview' ? '/access-logs' : `/access-logs?tab=${next}`,
+ );
+ };
+
const overviewQuery = useQuery({
queryKey: ['openflare', 'access-logs', 'overview', overviewHours],
queryFn: () =>
@@ -150,10 +165,7 @@ export default function AccessLogsPage() {