diff --git a/frontend/app/(main)/access-logs/components/access-log-utils.ts b/frontend/app/(main)/access-logs/components/access-log-utils.ts
index 426a1da8..c60852c7 100644
--- a/frontend/app/(main)/access-logs/components/access-log-utils.ts
+++ b/frontend/app/(main)/access-logs/components/access-log-utils.ts
@@ -1,4 +1,4 @@
-export type AccessLogTab = 'list' | 'folds' | 'ip-summary' | 'ip-trend';
+export type AccessLogTab = 'overview' | 'list';
export type SearchDraft = {
nodeId: string;
@@ -7,8 +7,20 @@ export type SearchDraft = {
path: string;
};
+export type OverviewRangeHours = 24 | 168 | 360 | 720;
+
export const PAGE_SIZE_OPTIONS = [20, 50, 100, 200];
+export const OVERVIEW_RANGE_OPTIONS: {
+ value: OverviewRangeHours;
+ label: string;
+}[] = [
+ { value: 24, label: '24 小时' },
+ { value: 168, label: '7 天' },
+ { value: 360, label: '15 天' },
+ { value: 720, label: '30 天' },
+];
+
export const DETAIL_SORT_OPTIONS = [
{ value: 'logged_at:desc', label: '时间从新到旧' },
{ value: 'logged_at:asc', label: '时间从旧到新' },
@@ -18,20 +30,6 @@ export const DETAIL_SORT_OPTIONS = [
{ value: 'remote_addr:desc', label: 'IP 倒序' },
];
-export const FOLD_SORT_OPTIONS = [
- { value: 'bucket_started_at:desc', label: '时间桶从新到旧' },
- { value: 'bucket_started_at:asc', label: '时间桶从旧到新' },
- { value: 'request_count:desc', label: '访问次数从高到低' },
- { value: 'request_count:asc', label: '访问次数从低到高' },
-];
-
-export const IP_SORT_OPTIONS = [
- { value: 'total_requests:desc', label: '总访问次数从高到低' },
- { value: 'total_requests:asc', label: '总访问次数从低到高' },
- { value: 'recent_requests:desc', label: '3 小时访问次数从高到低' },
- { value: 'last_seen_at:desc', label: '最后访问时间从新到旧' },
-];
-
export function parseSortValue(value: string) {
const [sortBy = 'logged_at', sortOrder = 'desc'] = value.split(':');
return {
@@ -46,3 +44,23 @@ export function formatCompactNumber(value: number) {
maximumFractionDigits: 1,
}).format(value);
}
+
+export function formatOverviewRangeHint(hours: number) {
+ if (hours <= 24) return '近 24 小时';
+ if (hours % 24 === 0) return `近 ${hours / 24} 天`;
+ return `近 ${hours} 小时`;
+}
+
+export function formatOverviewTrendLabel(value: string, hours: number) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) {
+ return '—';
+ }
+ const month = `${date.getMonth() + 1}`.padStart(2, '0');
+ const day = `${date.getDate()}`.padStart(2, '0');
+ const hour = `${date.getHours()}`.padStart(2, '0');
+ if (hours <= 24) {
+ return `${hour}:00`;
+ }
+ return `${month}/${day} ${hour}:00`;
+}
diff --git a/frontend/app/(main)/access-logs/components/detail-tab.tsx b/frontend/app/(main)/access-logs/components/detail-tab.tsx
new file mode 100644
index 00000000..30ddfceb
--- /dev/null
+++ b/frontend/app/(main)/access-logs/components/detail-tab.tsx
@@ -0,0 +1,164 @@
+'use client';
+
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/components/ui/table';
+import type { AccessLogList } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
+
+import { DETAIL_SORT_OPTIONS } from './access-log-utils';
+
+function PaginationBar({
+ page,
+ hasMore,
+ loading,
+ onPrev,
+ onNext,
+}: {
+ page: number;
+ hasMore: boolean;
+ loading: boolean;
+ onPrev: () => void;
+ onNext: () => void;
+}) {
+ return (
+
+
当前第 {page + 1} 页
+
+
+
+
+
+ );
+}
+
+export function DetailTab({
+ data,
+ loading,
+ error,
+ page,
+ detailSort,
+ onDetailSortChange,
+ onRetry,
+ onPrevPage,
+ onNextPage,
+ isFetching,
+}: {
+ data?: AccessLogList;
+ loading: boolean;
+ error: Error | null;
+ page: number;
+ detailSort: string;
+ onDetailSortChange: (value: string) => void;
+ onRetry: () => void;
+ onPrevPage: () => void;
+ onNextPage: () => void;
+ isFetching: boolean;
+}) {
+ return (
+
+
+
日志明细
+
+
+ {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/components/overview-tab.tsx b/frontend/app/(main)/access-logs/components/overview-tab.tsx
new file mode 100644
index 00000000..5c3bd202
--- /dev/null
+++ b/frontend/app/(main)/access-logs/components/overview-tab.tsx
@@ -0,0 +1,348 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { EChartsOption } from 'echarts';
+import ReactECharts from 'echarts-for-react';
+
+import { RankChart } from '@/components/data/rank-chart';
+import { TrendChart } from '@/components/data/trend-chart';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import type { AccessLogOverview } from '@/lib/services/openflare';
+import { formatBytes, formatCompactNumber } from '@/lib/utils/metrics';
+
+import {
+ formatOverviewRangeHint,
+ formatOverviewTrendLabel,
+ OVERVIEW_RANGE_OPTIONS,
+ type OverviewRangeHours,
+} from './access-log-utils';
+
+function SparklineMetricCard({
+ title,
+ value,
+ hint,
+ color,
+ fillColor,
+ labels,
+ values,
+ valueFormatter,
+}: {
+ title: string;
+ value: string;
+ hint: string;
+ color: string;
+ fillColor: string;
+ labels: string[];
+ values: number[];
+ valueFormatter?: (value: number) => string;
+}) {
+ const option = useMemo
(
+ () => ({
+ animationDuration: 400,
+ grid: {
+ left: 0,
+ right: 0,
+ top: 8,
+ bottom: 0,
+ },
+ xAxis: {
+ type: 'category',
+ show: false,
+ boundaryGap: false,
+ data: labels,
+ },
+ yAxis: {
+ type: 'value',
+ show: false,
+ min: 0,
+ },
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'rgba(15, 23, 42, 0.92)',
+ borderWidth: 0,
+ textStyle: {
+ color: '#e2e8f0',
+ fontSize: 12,
+ },
+ formatter: (params: unknown) => {
+ const items = Array.isArray(params) ? params : [];
+ const item = items[0] as
+ { axisValueLabel?: string; value?: number } | undefined;
+ if (!item) return '';
+ const raw = typeof item.value === 'number' ? item.value : 0;
+ const formatted = valueFormatter
+ ? valueFormatter(raw)
+ : formatCompactNumber(raw);
+ return `${item.axisValueLabel ?? ''}
${formatted}`;
+ },
+ },
+ series: [
+ {
+ type: 'line',
+ data: values,
+ smooth: true,
+ showSymbol: false,
+ lineStyle: {
+ color,
+ width: 2,
+ },
+ areaStyle: {
+ color: fillColor,
+ },
+ },
+ ],
+ }),
+ [color, fillColor, labels, valueFormatter, values],
+ );
+
+ return (
+
+
+
+
+
+ {title}
+
+
{value}
+
{hint}
+
+
+ {labels.length > 0 ? (
+
+ ) : null}
+
+
+ {
+ if (!value) return;
+ onHoursChange(Number.parseInt(value, 10) as OverviewRangeHours);
+ }}
+ variant='outline'
+ size='sm'
+ className='justify-end'
+ >
+ {OVERVIEW_RANGE_OPTIONS.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+ );
+}
+
+export function OverviewTab({
+ data,
+ loading,
+ error,
+ hours,
+ onHoursChange,
+ onRetry,
+}: {
+ data?: AccessLogOverview;
+ loading: boolean;
+ error: Error | null;
+ hours: OverviewRangeHours;
+ onHoursChange: (hours: OverviewRangeHours) => void;
+ onRetry: () => void;
+}) {
+ return (
+
+
+
+ {loading ? (
+
+ ) : error ? (
+
+ ) : !data ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
+function OverviewContent({
+ data,
+ hours,
+}: {
+ data: AccessLogOverview;
+ hours: number;
+}) {
+ const requestLabels = data.trends.requests.map((point) =>
+ formatOverviewTrendLabel(point.bucket_started_at, hours),
+ );
+ const requestValues = data.trends.requests.map((point) => point.value);
+ const visitValues = data.trends.visits.map((point) => point.value);
+ const bandwidthValues = data.trends.bandwidth.map((point) => point.value);
+ const hint = formatOverviewRangeHint(hours);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ Requests over time
+
+
+ 观察请求量是否出现异常抬升或回落。
+
+
+
+
+
+
+
+
+ ({
+ label: item.key,
+ value: item.value,
+ }))}
+ />
+ ({
+ label: item.key,
+ value: item.value,
+ }))}
+ />
+ ({
+ label: item.key,
+ value: item.value,
+ }))}
+ />
+
+
+ );
+}
diff --git a/frontend/app/(main)/access-logs/page.tsx b/frontend/app/(main)/access-logs/page.tsx
index 9974c4af..dfb5ae81 100644
--- a/frontend/app/(main)/access-logs/page.tsx
+++ b/frontend/app/(main)/access-logs/page.tsx
@@ -1,56 +1,24 @@
'use client';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
import { RefreshCw, ScrollText, Trash2 } from 'lucide-react';
import { toast } from 'sonner';
-import { EmptyStateWithBorder } from '@/components/layout/empty';
-import { ErrorInline } from '@/components/layout/error';
-import { LoadingStateWithBorder } from '@/components/layout/loading';
-import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
-import {
- ChartConfig,
- ChartContainer,
- ChartTooltip,
- ChartTooltipContent,
-} from '@/components/ui/chart';
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from '@/components/ui/select';
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '@/components/ui/table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { AccessLogService } from '@/lib/services/openflare';
-import { formatDateTime } from '@/lib/utils';
import { AccessLogFilters } from './components/access-log-filters';
import {
type AccessLogTab,
- DETAIL_SORT_OPTIONS,
- FOLD_SORT_OPTIONS,
- formatCompactNumber,
- IP_SORT_OPTIONS,
+ type OverviewRangeHours,
parseSortValue,
type SearchDraft,
} from './components/access-log-utils';
import { CleanupDialog } from './components/cleanup-dialog';
-
-const trendChartConfig = {
- requests: { label: '请求数', color: 'hsl(var(--primary))' },
-} satisfies ChartConfig;
+import { DetailTab } from './components/detail-tab';
+import { OverviewTab } from './components/overview-tab';
const emptyDraft: SearchDraft = {
nodeId: '',
@@ -59,62 +27,27 @@ const emptyDraft: SearchDraft = {
path: '',
};
-function PaginationBar({
- page,
- hasMore,
- loading,
- onPrev,
- onNext,
-}: {
- page: number;
- hasMore: boolean;
- loading: boolean;
- onPrev: () => void;
- onNext: () => void;
-}) {
- return (
-
-
当前第 {page + 1} 页
-
-
-
-
-
@@ -289,7 +123,7 @@ export default function AccessLogsPage() {
访问日志
- 按节点、IP、域名与路径检索，支持时间折叠、IP 汇总与趋势分析。
+ 查看访问概览、排行榜与明细日志。