fix(access-logs): 修复状态码自定义

docs/changelog/index.md

@@ -19,7 +19,7 @@ sidebar: false
 ## [Unreleased]
 
 ### 新增
-- 访问日志「日志明细」支持按 HTTP 状态码筛选：状态码下拉含常用 2xx/3xx/4xx/5xx 快捷选项，也可手动输入任意状态码，筛选条件贯穿 ClickHouse 与 PostgreSQL/SQLite 日志库。
+- 访问日志「日志明细」支持按 HTTP 状态码筛选：直接输入任意状态码（100-599），筛选条件贯穿 ClickHouse 与 PostgreSQL/SQLite 日志库。
 - 访问日志「日志明细」支持自定义时间范围筛选：内置 shadcn 日期+时间选择器，可指定起止时间（RFC3339，需成对提供）。
 - 首页看板改版：24 小时请求趋势拆分展示请求总量与 2xx/4xx/5xx 状态码类请求量并独占一行；移除宿主机磁盘指标，24 小时容量趋势（CPU/内存）并入业务流量卡片展示。
 

frontend/app/(main)/access-logs/components/access-log-filters.tsx

@@ -25,7 +25,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import type { SearchDraft } from './access-log-utils';
-import { PAGE_SIZE_OPTIONS, STATUS_CODE_OPTIONS } from './access-log-utils';
+import { PAGE_SIZE_OPTIONS } from './access-log-utils';
 
 interface AccessLogFiltersProps {
   draft: SearchDraft;
@@ -36,7 +36,6 @@ interface AccessLogFiltersProps {
   onReset: () => void;
 }
 
-const CUSTOM_STATUS_CODE = '__custom__';
 const HOUR_OPTIONS = Array.from({ length: 24 }, (_, i) =>
   String(i).padStart(2, '0'),
 );
@@ -127,11 +126,7 @@ function DateTimePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent className='w-auto p-0' align='start'>
-        <Calendar
+        <Calendar mode='single' selected={current} onSelect={applyDate} />
-          mode='single'
-          selected={current}
-          onSelect={applyDate}
-        />
         <div className='flex items-center gap-1.5 border-t p-2'>
           <TimeSelect
             value={hour}
@@ -159,15 +154,6 @@ export function AccessLogFilters({
   onReset,
 }: AccessLogFiltersProps) {
   const [moreOpen, setMoreOpen] = useState(false);
-  const isPresetStatus = STATUS_CODE_OPTIONS.some(
-    (option) => option.value === draft.statusCode,
-  );
-  const statusSelectValue =
-    draft.statusCode === ''
-      ? ''
-      : isPresetStatus
-        ? draft.statusCode
-        : CUSTOM_STATUS_CODE;
 
   return (
     <div className='space-y-3'>
@@ -188,9 +174,7 @@ export function AccessLogFilters({
         <FilterField label='访问域名'>
           <Input
             value={draft.host}
-            onChange={(e) =>
+            onChange={(e) => onDraftChange({ ...draft, host: e.target.value })}
-              onDraftChange({ ...draft, host: e.target.value })
-            }
             onKeyDown={(e) => {
               if (e.key === 'Enter') onSearch();
             }}
@@ -199,50 +183,20 @@ export function AccessLogFilters({
           />
         </FilterField>
         <FilterField label='状态码'>
-          <div className='flex flex-col gap-1.5'>
+          <Input
-            <Select
+            value={draft.statusCode}
-              value={statusSelectValue}
+            onChange={(e) =>
-              onValueChange={(value) => {
+              onDraftChange({
-                if (value === CUSTOM_STATUS_CODE) {
+                ...draft,
-                  onDraftChange({
+                statusCode: e.target.value.replace(/\D/g, '').slice(0, 3),
-                    ...draft,
+              })
-                    statusCode: isPresetStatus ? '' : draft.statusCode,
+            }
-                  });
+            onKeyDown={(e) => {
-                } else {
+              if (e.key === 'Enter') onSearch();
-                  onDraftChange({ ...draft, statusCode: value });
+            }}
-                }
+            placeholder='输入状态码，如 404'
-              }}
+            className='h-9 text-xs'
-            >
+          />
-              <SelectTrigger className='h-9 text-xs'>
-                <SelectValue placeholder='全部状态码' />
-              </SelectTrigger>
-              <SelectContent>
-                {STATUS_CODE_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-                <SelectItem value={CUSTOM_STATUS_CODE}>自定义…</SelectItem>
-              </SelectContent>
-            </Select>
-            {statusSelectValue === CUSTOM_STATUS_CODE ? (
-              <Input
-                value={draft.statusCode}
-                onChange={(e) =>
-                  onDraftChange({
-                    ...draft,
-                    statusCode: e.target.value.replace(/\D/g, '').slice(0, 3),
-                  })
-                }
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') onSearch();
-                }}
-                placeholder='输入状态码，如 201'
-                autoFocus
-                className='h-9 text-xs'
-              />
-            ) : null}
-          </div>
         </FilterField>
       </div>
 

frontend/app/(main)/access-logs/components/access-log-utils.ts

@@ -17,23 +17,6 @@ export type RateLimitRangeHours = 24 | 72;
 
 export const PAGE_SIZE_OPTIONS = [20, 50, 100, 200];
 
-/** 状态码快捷筛选项（空值表示全部，由 Select placeholder 兜底）。 */
-export const STATUS_CODE_OPTIONS: { value: string; label: string }[] = [
-  { value: '200', label: '200 OK' },
-  { value: '301', label: '301 永久重定向' },
-  { value: '302', label: '302 临时重定向' },
-  { value: '304', label: '304 未修改' },
-  { value: '400', label: '400 请求错误' },
-  { value: '401', label: '401 未授权' },
-  { value: '403', label: '403 禁止访问' },
-  { value: '404', label: '404 未找到' },
-  { value: '429', label: '429 请求过多' },
-  { value: '500', label: '500 服务器错误' },
-  { value: '502', label: '502 网关错误' },
-  { value: '503', label: '503 服务不可用' },
-  { value: '504', label: '504 网关超时' },
-];
-
 export const OVERVIEW_RANGE_OPTIONS: {
   value: OverviewRangeHours;
   label: string;

frontend/app/(main)/components/dashboard/geo-distribution-list.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { Globe2 } from 'lucide-react';
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Progress } from '@/components/ui/progress';
-import type { DistributionItem } from '@/lib/services/openflare';
-
-import { formatCompactNumber } from './dashboard-utils';
-
-export function GeoDistributionList({ items }: { items: DistributionItem[] }) {
-  const sortedItems = [...items]
-    .sort((left, right) => right.value - left.value)
-    .slice(0, 8);
-  const maxValue = sortedItems[0]?.value ?? 0;
-
-  return (
-    <Card className='border-dashed shadow-none'>
-      <CardHeader>
-        <CardTitle className='text-sm font-semibold flex items-center gap-1.5'>
-          <Globe2 className='size-4 text-primary' />
-          来源国家分布
-        </CardTitle>
-        <CardDescription className='text-xs'>
-          聚合最近 24 小时主要来源国家。
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        {sortedItems.length === 0 ? (
-          <div className='flex min-h-[180px] items-center justify-center text-xs text-muted-foreground'>
-            暂无来源分布数据
-          </div>
-        ) : (
-          <div className='space-y-3'>
-            {sortedItems.map((item) => {
-              const ratio = maxValue > 0 ? (item.value / maxValue) * 100 : 0;
-              return (
-                <div key={item.key} className='space-y-1.5'>
-                  <div className='flex items-center justify-between text-xs'>
-                    <span className='font-medium'>{item.key || '未知'}</span>
-                    <span className='font-mono tabular-nums text-muted-foreground'>
-                      {formatCompactNumber(item.value)}
-                    </span>
-                  </div>
-                  <Progress value={ratio} className='h-1.5' />
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

frontend/app/(main)/components/dashboard/traffic-capacity-trend-chart.tsx

@@ -7,11 +7,7 @@ import type {
   NetworkTrendPoint,
 } from '@/lib/services/openflare';
 
-import {
+import { formatBytes, formatPercent, formatTrendHour } from './dashboard-utils';
-  formatBytes,
-  formatPercent,
-  formatTrendHour,
-} from './dashboard-utils';
 
 /** 业务流量（来自访问日志）与容量趋势（节点 Agent 宿主机指标）合并展示。 */
 export function TrafficCapacityTrendChart({

frontend/app/(main)/page.tsx

@@ -1,112 +1,112 @@
 'use client';
 
-import {useQuery} from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
-import {LayoutDashboard, RefreshCw} from 'lucide-react';
+import { LayoutDashboard, RefreshCw } from 'lucide-react';
 
-import {EmptyStateWithBorder} from '@/components/layout/empty';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
-import {ErrorInline} from '@/components/layout/error';
+import { ErrorInline } from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
-import {DashboardService} from '@/lib/services/openflare';
+import { DashboardService } from '@/lib/services/openflare';
-import {formatDateTime} from '@/lib/utils';
+import { formatDateTime } from '@/lib/utils';
 
 import {
-    SourceDistributionChart,
+  SourceDistributionChart,
-    StatusCodeDistributionChart,
+  StatusCodeDistributionChart,
-    TopDomainChart,
+  TopDomainChart,
 } from './components/dashboard/distribution-rank-charts';
-import {NodeHealthTable} from './components/dashboard/node-health-table';
+import { NodeHealthTable } from './components/dashboard/node-health-table';
-import {TrafficCapacityTrendChart} from './components/dashboard/traffic-capacity-trend-chart';
+import { TrafficCapacityTrendChart } from './components/dashboard/traffic-capacity-trend-chart';
-import {TrafficTrendChart} from './components/dashboard/traffic-trend-chart';
+import { TrafficTrendChart } from './components/dashboard/traffic-trend-chart';
-import {WorldStage} from './components/dashboard/world-stage';
+import { WorldStage } from './components/dashboard/world-stage';
-import {getErrorMessage} from './nodes/components/node-utils';
+import { getErrorMessage } from './nodes/components/node-utils';
 
 const dashboardQueryKey = ['openflare', 'dashboard', 'overview'];
 
 export default function OpenFlareDashboardPage() {
-    const overviewQuery = useQuery({
+  const overviewQuery = useQuery({
-        queryKey: dashboardQueryKey,
+    queryKey: dashboardQueryKey,
-        queryFn: () => DashboardService.getOverview(),
+    queryFn: () => DashboardService.getOverview(),
-        refetchInterval: 60_000,
+    refetchInterval: 60_000,
-    });
+  });
 
-    const overview = overviewQuery.data;
+  const overview = overviewQuery.data;
 
-    return (
+  return (
-        <div className='py-6 px-1 space-y-6'>
+    <div className='py-6 px-1 space-y-6'>
-            <div className='flex flex-wrap items-center justify-between gap-3'>
+      <div className='flex flex-wrap items-center justify-between gap-3'>
-                <div className='flex items-center gap-2'>
+        <div className='flex items-center gap-2'>
-                    <LayoutDashboard className='size-5 text-primary'/>
+          <LayoutDashboard className='size-5 text-primary' />
-                    <h1 className='text-2xl font-semibold tracking-tight'>总览</h1>
+          <h1 className='text-2xl font-semibold tracking-tight'>总览</h1>
-                </div>
-                <div className='flex items-center gap-2 text-xs text-muted-foreground'>
-                    {overview?.generated_at ? (
-                        <span>数据生成于 {formatDateTime(overview.generated_at)}</span>
-                    ) : null}
-                    <Button
-                        variant='outline'
-                        size='sm'
-                        className='h-8'
-                        onClick={() => overviewQuery.refetch()}
-                        disabled={overviewQuery.isFetching}
-                    >
-                        <RefreshCw
-                            className={`size-3.5 mr-1.5 ${overviewQuery.isFetching ? 'animate-spin' : ''}`}
-                        />
-                        刷新
-                    </Button>
-                </div>
-            </div>
-
-            {overviewQuery.isLoading ? (
-                <LoadingStateWithBorder
-                    title='加载总览数据'
-                    description='正在聚合节点健康、流量与容量指标...'
-                />
-            ) : overviewQuery.isError ? (
-                <ErrorInline
-                    message={`总览看板加载失败：${getErrorMessage(overviewQuery.error)}`}
-                    onRetry={() => overviewQuery.refetch()}
-                />
-            ) : !overview ? (
-                <EmptyStateWithBorder
-                    title='暂无总览数据'
-                    description='系统已经启动，但还没有可展示的总览聚合结果。'
-                />
-            ) : (
-                <>
-                    <WorldStage
-                        summary={overview.summary}
-                        traffic={overview.traffic}
-                        capacity={overview.capacity}
-                        nodes={overview.nodes}
-                        sourceCountries={overview.distributions.source_countries}
-                    />
-
-                    <div className='grid gap-6'>
-                        <TrafficTrendChart points={overview.trends.traffic_24h}/>
-                    </div>
-
-                    <div className='grid gap-6 xl:grid-cols-3'>
-                        <SourceDistributionChart
-                            items={overview.distributions.source_countries}
-                        />
-                        <StatusCodeDistributionChart
-                            items={overview.distributions.status_codes}
-                        />
-                        <TopDomainChart items={overview.distributions.top_domains}/>
-                    </div>
-
-                    <div className='grid gap-6'>
-                        <TrafficCapacityTrendChart
-                            networkPoints={overview.trends.network_24h}
-                            capacityPoints={overview.trends.capacity_24h}
-                        />
-                    </div>
-
-                    <NodeHealthTable nodes={overview.nodes}/>
-                </>
-            )}
         </div>
-    );
+        <div className='flex items-center gap-2 text-xs text-muted-foreground'>
+          {overview?.generated_at ? (
+            <span>数据生成于 {formatDateTime(overview.generated_at)}</span>
+          ) : null}
+          <Button
+            variant='outline'
+            size='sm'
+            className='h-8'
+            onClick={() => overviewQuery.refetch()}
+            disabled={overviewQuery.isFetching}
+          >
+            <RefreshCw
+              className={`size-3.5 mr-1.5 ${overviewQuery.isFetching ? 'animate-spin' : ''}`}
+            />
+            刷新
+          </Button>
+        </div>
+      </div>
+
+      {overviewQuery.isLoading ? (
+        <LoadingStateWithBorder
+          title='加载总览数据'
+          description='正在聚合节点健康、流量与容量指标...'
+        />
+      ) : overviewQuery.isError ? (
+        <ErrorInline
+          message={`总览看板加载失败：${getErrorMessage(overviewQuery.error)}`}
+          onRetry={() => overviewQuery.refetch()}
+        />
+      ) : !overview ? (
+        <EmptyStateWithBorder
+          title='暂无总览数据'
+          description='系统已经启动，但还没有可展示的总览聚合结果。'
+        />
+      ) : (
+        <>
+          <WorldStage
+            summary={overview.summary}
+            traffic={overview.traffic}
+            capacity={overview.capacity}
+            nodes={overview.nodes}
+            sourceCountries={overview.distributions.source_countries}
+          />
+
+          <div className='grid gap-6'>
+            <TrafficTrendChart points={overview.trends.traffic_24h} />
+          </div>
+
+          <div className='grid gap-6 xl:grid-cols-3'>
+            <SourceDistributionChart
+              items={overview.distributions.source_countries}
+            />
+            <StatusCodeDistributionChart
+              items={overview.distributions.status_codes}
+            />
+            <TopDomainChart items={overview.distributions.top_domains} />
+          </div>
+
+          <div className='grid gap-6'>
+            <TrafficCapacityTrendChart
+              networkPoints={overview.trends.network_24h}
+              capacityPoints={overview.trends.capacity_24h}
+            />
+          </div>
+
+          <NodeHealthTable nodes={overview.nodes} />
+        </>
+      )}
+    </div>
+  );
 }

internal/apps/openflare/observability/routers.go

@@ -5,11 +5,12 @@ package observability
 
 import (
 	"errors"
+	"net/http"
+	"strconv"
+
 	"github.com/Rain-kl/Wavelet/internal/apps/openflare/apiutil"
 	"github.com/Rain-kl/Wavelet/internal/shared/response"
 	"github.com/gin-gonic/gin"
-	"net/http"
-	"strconv"
 )
 
 // GetAccessLogOverviewHandler 获取访问日志概览。