feat(logs): redesign LogsPage with structured log parsing and virtual scrolling

- Add log line parser to extract timestamp, level, status code, latency, IP, HTTP method, and path
  - Implement virtual scrolling with load-more on scroll-up to handle large log files efficiently
  - Replace monolithic pre block with structured grid layout for better readability
  - Add visual badges for log levels and HTTP status codes with color-coded severity
  - Add IconRefreshCw icon component
  - Update ToggleSwitch to accept ReactNode as label
  - Fix fetchConfig calls to use default parameters consistently
  - Add request deduplication in useConfigStore to prevent duplicate /config API calls
  - Add i18n keys for load_more_hint and hidden_lines
This commit is contained in:
Supra4E8C
2025-12-15 17:37:09 +08:00
parent f17329b0ff
commit 4d898b3e20
10 changed files with 656 additions and 92 deletions

View File

@@ -1,9 +1,9 @@
import type { ChangeEvent } from 'react';
import type { ChangeEvent, ReactNode } from 'react';
interface ToggleSwitchProps {
checked: boolean;
onChange: (value: boolean) => void;
label?: string;
label?: ReactNode;
disabled?: boolean;
}

View File

@@ -117,6 +117,15 @@ export function IconInfo({ size = 20, ...props }: IconProps) {
);
}
export function IconRefreshCw({ size = 20, ...props }: IconProps) {
return (
<svg {...baseSvgProps} width={size} height={size} {...props}>
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
<path d="M21 3v5h-5" />
</svg>
);
}
export function IconDownload({ size = 20, ...props }: IconProps) {
return (
<svg {...baseSvgProps} width={size} height={size} {...props}>
@@ -257,4 +266,3 @@ export function IconDollarSign({ size = 20, ...props }: IconProps) {
</svg>
);
}