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
-          mode='single'
-          selected={current}
-          onSelect={applyDate}
-        />
+        <Calendar 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) =>
-              onDraftChange({ ...draft, host: e.target.value })
-            }
+            onChange={(e) => onDraftChange({ ...draft, host: e.target.value })}
             onKeyDown={(e) => {
               if (e.key === 'Enter') onSearch();
             }}
@@ -199,33 +183,6 @@ export function AccessLogFilters({
           />
         </FilterField>
         <FilterField label='状态码'>
-          <div className='flex flex-col gap-1.5'>
-            <Select
-              value={statusSelectValue}
-              onValueChange={(value) => {
-                if (value === CUSTOM_STATUS_CODE) {
-                  onDraftChange({
-                    ...draft,
-                    statusCode: isPresetStatus ? '' : draft.statusCode,
-                  });
-                } else {
-                  onDraftChange({ ...draft, statusCode: value });
-                }
-              }}
-            >
-              <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) =>
@@ -237,12 +194,9 @@ export function AccessLogFilters({
             onKeyDown={(e) => {
               if (e.key === 'Enter') onSearch();
             }}
-                placeholder='输入状态码，如 201'
-                autoFocus
+            placeholder='输入状态码，如 404'
             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 {
-  formatBytes,
-  formatPercent,
-  formatTrendHour,
-} from './dashboard-utils';
+import { formatBytes, formatPercent, formatTrendHour } from './dashboard-utils';
 
 /** 业务流量（来自访问日志）与容量趋势（节点 Agent 宿主机指标）合并展示。 */
 export function TrafficCapacityTrendChart({

frontend/app/(main)/page.tsx

@@ -1,25 +1,25 @@
 'use client';
 
-import {useQuery} from '@tanstack/react-query';
-import {LayoutDashboard, RefreshCw} from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { LayoutDashboard, RefreshCw } from 'lucide-react';
 
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import {Button} from '@/components/ui/button';
-import {DashboardService} from '@/lib/services/openflare';
-import {formatDateTime} from '@/lib/utils';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import { Button } from '@/components/ui/button';
+import { DashboardService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
 
 import {
   SourceDistributionChart,
   StatusCodeDistributionChart,
   TopDomainChart,
 } from './components/dashboard/distribution-rank-charts';
-import {NodeHealthTable} from './components/dashboard/node-health-table';
-import {TrafficCapacityTrendChart} from './components/dashboard/traffic-capacity-trend-chart';
-import {TrafficTrendChart} from './components/dashboard/traffic-trend-chart';
-import {WorldStage} from './components/dashboard/world-stage';
-import {getErrorMessage} from './nodes/components/node-utils';
+import { NodeHealthTable } from './components/dashboard/node-health-table';
+import { TrafficCapacityTrendChart } from './components/dashboard/traffic-capacity-trend-chart';
+import { TrafficTrendChart } from './components/dashboard/traffic-trend-chart';
+import { WorldStage } from './components/dashboard/world-stage';
+import { getErrorMessage } from './nodes/components/node-utils';
 
 const dashboardQueryKey = ['openflare', 'dashboard', 'overview'];
 
@@ -36,7 +36,7 @@ export default function OpenFlareDashboardPage() {
     <div className='py-6 px-1 space-y-6'>
       <div className='flex flex-wrap items-center justify-between gap-3'>
         <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>
         </div>
         <div className='flex items-center gap-2 text-xs text-muted-foreground'>
@@ -84,7 +84,7 @@ export default function OpenFlareDashboardPage() {
           />
 
           <div className='grid gap-6'>
-                        <TrafficTrendChart points={overview.trends.traffic_24h}/>
+            <TrafficTrendChart points={overview.trends.traffic_24h} />
           </div>
 
           <div className='grid gap-6 xl:grid-cols-3'>
@@ -94,7 +94,7 @@ export default function OpenFlareDashboardPage() {
             <StatusCodeDistributionChart
               items={overview.distributions.status_codes}
             />
-                        <TopDomainChart items={overview.distributions.top_domains}/>
+            <TopDomainChart items={overview.distributions.top_domains} />
           </div>
 
           <div className='grid gap-6'>
@@ -104,7 +104,7 @@ export default function OpenFlareDashboardPage() {
             />
           </div>
 
-                    <NodeHealthTable nodes={overview.nodes}/>
+          <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 获取访问日志概览。