[优化] 格式化

openflare_server/web/README.md

@@ -29,12 +29,12 @@ pnpm build
 
 ## 构建说明
 
-* 构建采用 Next.js 静态导出模式。
+- 构建采用 Next.js 静态导出模式。
-* `pnpm build` 会先生成 `out/`，随后自动复制为 Go Server 兼容的 `build/` 目录。
+- `pnpm build` 会先生成 `out/`，随后自动复制为 Go Server 兼容的 `build/` 目录。
-* 默认 API Base URL 为 `/api`，如需覆盖可在构建时设置 `NEXT_PUBLIC_API_BASE_URL`。
+- 默认 API Base URL 为 `/api`，如需覆盖可在构建时设置 `NEXT_PUBLIC_API_BASE_URL`。
-* 构建版本号可通过 `NEXT_PUBLIC_APP_VERSION` 注入，例如 `NEXT_PUBLIC_APP_VERSION=v0.4.0 pnpm build`。
+- 构建版本号可通过 `NEXT_PUBLIC_APP_VERSION` 注入，例如 `NEXT_PUBLIC_APP_VERSION=v0.4.0 pnpm build`。
-* `pnpm dev` 会以开发模式启动 `http://127.0.0.1:3001`，并通过同源代理把 `/api/*` 的 HTTP 与 WebSocket 请求统一转发到 `NEXT_DEV_BACKEND_URL`，默认是 `http://127.0.0.1:3000`。
+- `pnpm dev` 会以开发模式启动 `http://127.0.0.1:3001`，并通过同源代理把 `/api/*` 的 HTTP 与 WebSocket 请求统一转发到 `NEXT_DEV_BACKEND_URL`，默认是 `http://127.0.0.1:3000`。
-* `pnpm start` 用于启动已构建产物，对应 Next 生产模式。
+- `pnpm start` 用于启动已构建产物，对应 Next 生产模式。
 
 ## 开源协议
 
@@ -42,8 +42,8 @@ pnpm build
 
 ## 目录约定
 
-* `app/`：路由与布局
+- `app/`：路由与布局
-* `features/`：业务模块
+- `features/`：业务模块
-* `components/`：复用组件
+- `components/`：复用组件
-* `lib/`：请求、环境变量、工具与常量
+- `lib/`：请求、环境变量、工具与常量
-* `tests/`：测试代码
+- `tests/`：测试代码

openflare_server/web/app/(dashboard)/page.tsx

@@ -2,7 +2,7 @@ import { DashboardOverview } from '@/features/dashboard/components/dashboard-ove
 
 export default function DashboardPage() {
   return (
-    <div className='space-y-6'>
+    <div className="space-y-6">
       <DashboardOverview />
     </div>
   );

openflare_server/web/app/globals.css

@@ -1,8 +1,8 @@
 @import '../styles/tokens.css';
 @import 'tailwindcss';
 @import '@heroui/styles';
-@import "tw-animate-css";
+@import 'tw-animate-css';
-@import "shadcn/tailwind.css";
+@import 'shadcn/tailwind.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -27,7 +27,12 @@ body {
   background: var(--body-background);
   color: var(--foreground-primary);
   font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
     sans-serif;
   transition:
     background 0.2s ease,

openflare_server/web/app/layout.tsx

@@ -6,10 +6,10 @@ import { AppProviders } from '@/components/providers/app-providers';
 import { getThemeInitScript } from '@/lib/theme/theme';
 
 import './globals.css';
-import { Geist } from "next/font/google";
+import { Geist } from 'next/font/google';
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
-const geist = Geist({subsets:['latin'],variable:'--font-sans'});
+const geist = Geist({ subsets: ['latin'], variable: '--font-sans' });
 
 export const metadata: Metadata = {
   title: {
@@ -26,9 +26,13 @@ interface RootLayoutProps {
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <html lang='zh-CN' suppressHydrationWarning className={cn("font-sans", geist.variable)}>
+    <html
+      lang="zh-CN"
+      suppressHydrationWarning
+      className={cn('font-sans', geist.variable)}
+    >
       <body>
-        <Script id='theme-init' strategy='beforeInteractive'>
+        <Script id="theme-init" strategy="beforeInteractive">
           {getThemeInitScript()}
         </Script>
         <AppProviders>{children}</AppProviders>

openflare_server/web/app/not-found.tsx

@@ -4,11 +4,17 @@ import { AppCard } from '@/components/ui/app-card';
 
 export default function NotFound() {
   return (
-    <main className='flex min-h-screen items-center justify-center px-4'>
+    <main className="flex min-h-screen items-center justify-center px-4">
-      <AppCard title='页面不存在' description='当前请求的页面尚未接入新版管理端路由。'>
+      <AppCard
-        <div className='space-y-4 text-sm leading-6 text-[var(--foreground-secondary)]'>
+        title="页面不存在"
+        description="当前请求的页面尚未接入新版管理端路由。"
+      >
+        <div className="space-y-4 text-sm leading-6 text-[var(--foreground-secondary)]">
           <p>请返回总览页，或继续通过侧边导航访问已初始化的模块入口。</p>
-          <Link href='/' className='inline-flex rounded-full bg-[var(--brand-primary)] px-4 py-2 font-medium text-[var(--foreground-inverse)] transition hover:opacity-90'>
+          <Link
+            href="/"
+            className="inline-flex rounded-full bg-[var(--brand-primary)] px-4 py-2 font-medium text-[var(--foreground-inverse)] transition hover:opacity-90"
+          >
             返回总览
           </Link>
         </div>

openflare_server/web/components/data/rank-chart.tsx

@@ -35,7 +35,7 @@ export function RankChart({
   color,
   valueFormatter = defaultFormatter,
   emptyMessage = '暂无分布数据',
-                          }: RankChartProps) {
+}: RankChartProps) {
   const option = useMemo<EChartsOption>(
     () => ({
       animationDuration: 400,
@@ -104,7 +104,8 @@ export function RankChart({
             show: true,
             position: 'right',
             color: '#e2e8f0',
-              formatter: (params: unknown) => valueFormatter(getChartValue(params)),
+            formatter: (params: unknown) =>
+              valueFormatter(getChartValue(params)),
           },
         },
       ],

openflare_server/web/components/data/trend-chart.tsx

@@ -36,7 +36,7 @@ export function TrendChart({
   series,
   height = 220,
   yAxisValueFormatter,
-                           }: TrendChartProps) {
+}: TrendChartProps) {
   const option = useMemo<EChartsOption>(() => {
     const axisFormatter = yAxisValueFormatter ?? defaultFormatter;
     const maxValue = calculateNiceAxisMax(

openflare_server/web/components/feedback/empty-state.tsx

@@ -3,15 +3,17 @@ interface EmptyStateProps {
   description?: string;
 }
 
-export function EmptyState({title, description}: EmptyStateProps) {
+export function EmptyState({ title, description }: EmptyStateProps) {
   return (
-        <div
+    <div className="rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-5 py-6 text-sm">
-            className='rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-5 py-6 text-sm'>
+      <p className="text-base font-semibold text-[var(--foreground-primary)]">
-            <p className='text-base font-semibold text-[var(--foreground-primary)]'>{title}</p>
+        {title}
-            {description ?
+      </p>
-                <p className='mt-2 leading-6 text-[var(--foreground-secondary)]'>{description}</p> : null
+      {description ? (
-            }
+        <p className="mt-2 leading-6 text-[var(--foreground-secondary)]">
-
+          {description}
+        </p>
+      ) : null}
     </div>
   );
 }

openflare_server/web/components/feedback/error-state.tsx

@@ -5,9 +5,13 @@ interface ErrorStateProps {
 
 export function ErrorState({ title, description }: ErrorStateProps) {
   return (
-    <div className='rounded-2xl border border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] px-5 py-6 text-sm'>
+    <div className="rounded-2xl border border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] px-5 py-6 text-sm">
-      <p className='text-base font-semibold text-[var(--status-danger-foreground)]'>{title}</p>
+      <p className="text-base font-semibold text-[var(--status-danger-foreground)]">
-      <p className='mt-2 leading-6 text-[var(--status-danger-foreground)]/80'>{description}</p>
+        {title}
+      </p>
+      <p className="mt-2 leading-6 text-[var(--status-danger-foreground)]/80">
+        {description}
+      </p>
     </div>
   );
 }

openflare_server/web/components/feedback/feature-placeholder.tsx

@@ -16,12 +16,12 @@ export function FeaturePlaceholder({
     <AppCard
       title={title}
       description={description}
-      action={<StatusBadge label='阶段 1 骨架完成' variant='success' />}
+      action={<StatusBadge label="阶段 1 骨架完成" variant="success" />}
     >
-      <ul className='space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]'>
+      <ul className="space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]">
         {milestones.map((item) => (
-          <li key={item} className='flex gap-3'>
+          <li key={item} className="flex gap-3">
-            <span className='mt-2 h-2 w-2 shrink-0 rounded-full bg-[var(--brand-primary)]' />
+            <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-[var(--brand-primary)]" />
             <span>{item}</span>
           </li>
         ))}

openflare_server/web/components/feedback/loading-state.tsx

@@ -7,9 +7,9 @@ interface LoadingStateProps {
 export function LoadingState({ className }: LoadingStateProps) {
   return (
     <div className={cn('space-y-3', className)}>
-      <div className='h-4 w-32 animate-pulse rounded bg-[var(--control-background-hover)]' />
+      <div className="h-4 w-32 animate-pulse rounded bg-[var(--control-background-hover)]" />
-      <div className='h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]' />
+      <div className="h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]" />
-      <div className='h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]' />
+      <div className="h-24 animate-pulse rounded-2xl bg-[var(--surface-muted)]" />
     </div>
   );
 }

openflare_server/web/components/forms/turnstile-widget.tsx

@@ -22,7 +22,8 @@ declare global {
 }
 
 const TURNSTILE_SCRIPT_ID = 'cloudflare-turnstile-script';
-const TURNSTILE_SCRIPT_SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+const TURNSTILE_SCRIPT_SRC =
+  'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
 
 interface TurnstileWidgetProps {
   siteKey: string;
@@ -63,7 +64,9 @@ export function TurnstileWidget({
       });
     };
 
-    const existingScript = document.getElementById(TURNSTILE_SCRIPT_ID) as HTMLScriptElement | null;
+    const existingScript = document.getElementById(
+      TURNSTILE_SCRIPT_ID,
+    ) as HTMLScriptElement | null;
 
     if (window.turnstile) {
       mountWidget();
@@ -81,7 +84,9 @@ export function TurnstileWidget({
 
     return () => {
       cancelled = true;
-      const script = document.getElementById(TURNSTILE_SCRIPT_ID) as HTMLScriptElement | null;
+      const script = document.getElementById(
+        TURNSTILE_SCRIPT_ID,
+      ) as HTMLScriptElement | null;
       if (script) {
         script.removeEventListener('load', mountWidget);
       }
@@ -92,5 +97,5 @@ export function TurnstileWidget({
     };
   }, [onError, onExpire, onVerify, siteKey]);
 
-  return <div id={elementId} ref={containerRef} className='min-h-16' />;
+  return <div id={elementId} ref={containerRef} className="min-h-16" />;
 }

openflare_server/web/components/layout/dashboard-shell.tsx

@@ -9,11 +9,11 @@ interface DashboardShellProps {
 
 export function DashboardShell({ children }: DashboardShellProps) {
   return (
-    <div className='flex min-h-screen bg-transparent text-[var(--foreground-primary)]'>
+    <div className="flex min-h-screen bg-transparent text-[var(--foreground-primary)]">
       <DashboardSidebar />
-      <div className='flex min-w-0 flex-1 flex-col'>
+      <div className="flex min-w-0 flex-1 flex-col">
         <DashboardTopbar />
-        <main className='flex-1 px-4 py-6 md:px-8 md:py-8'>{children}</main>
+        <main className="flex-1 px-4 py-6 md:px-8 md:py-8">{children}</main>
       </div>
     </div>
   );

openflare_server/web/components/layout/page-header.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type { ReactNode } from 'react';
 
 interface PageHeaderProps {
   title: string;
@@ -6,21 +6,25 @@ interface PageHeaderProps {
   action?: ReactNode;
 }
 
-export function PageHeader({title, description, action}: PageHeaderProps) {
+export function PageHeader({ title, description, action }: PageHeaderProps) {
   return (
-        <div className='flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between'>
+    <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-            <div className='space-y-3'>
+      <div className="space-y-3">
-                <p className='text-sm font-medium uppercase tracking-[0.24em] text-[var(--brand-primary)]'>OpenFlare</p>
+        <p className="text-sm font-medium tracking-[0.24em] text-[var(--brand-primary)] uppercase">
-                <div className='space-y-2'>
+          OpenFlare
-                    <h1 className='text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]'>{title}</h1>
+        </p>
+        <div className="space-y-2">
+          <h1 className="text-3xl font-semibold tracking-tight text-[var(--foreground-primary)]">
+            {title}
+          </h1>
           {description ? (
-                        <p className='max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]'>
+            <p className="max-w-3xl text-sm leading-7 text-[var(--foreground-secondary)]">
               {description}
             </p>
           ) : null}
         </div>
       </div>
-            {action ? <div className='flex flex-wrap gap-3'>{action}</div> : null}
+      {action ? <div className="flex flex-wrap gap-3">{action}</div> : null}
     </div>
   );
 }

openflare_server/web/components/layout/public-shell.tsx

@@ -9,27 +9,35 @@ interface PublicShellProps {
 
 export function PublicShell({ children }: PublicShellProps) {
   return (
-    <div className='flex min-h-screen items-center justify-center px-4 py-12'>
+    <div className="flex min-h-screen items-center justify-center px-4 py-12">
-      <div className='w-full max-w-3xl rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-panel)]/85 p-8 shadow-[var(--shadow-soft)] backdrop-blur'>
+      <div className="w-full max-w-3xl rounded-[var(--radius-xl)] border border-[var(--border-default)] bg-[var(--surface-panel)]/85 p-8 shadow-[var(--shadow-soft)] backdrop-blur">
-        <div className='mb-8 flex flex-col gap-4 border-b border-[var(--border-default)] pb-6 md:flex-row md:items-end md:justify-between'>
+        <div className="mb-8 flex flex-col gap-4 border-b border-[var(--border-default)] pb-6 md:flex-row md:items-end md:justify-between">
           <div>
-            <p className='text-3xl font-medium text-[var(--brand-primary)]'>OpenFlare</p>
+            <p className="text-3xl font-medium text-[var(--brand-primary)]">
+              OpenFlare
+            </p>
           </div>
-          <div className='flex flex-col items-start gap-3 text-sm text-[var(--foreground-secondary)] md:items-end'>
+          <div className="flex flex-col items-start gap-3 text-sm text-[var(--foreground-secondary)] md:items-end">
-            <span className='rounded-full border border-[var(--border-default)] px-3 py-1.5'>
+            <span className="rounded-full border border-[var(--border-default)] px-3 py-1.5">
               {publicEnv.appVersion}
             </span>
           </div>
         </div>
 
-        <div className='space-y-6'>{children}</div>
+        <div className="space-y-6">{children}</div>
 
-        <div className='mt-8 border-t border-[var(--border-default)] pt-6 text-sm text-[var(--foreground-secondary)]'>
+        <div className="mt-8 border-t border-[var(--border-default)] pt-6 text-sm text-[var(--foreground-secondary)]">
-          <div className='flex flex-wrap gap-4'>
+          <div className="flex flex-wrap gap-4">
-            <Link href='/' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+            <Link
+              href="/"
+              className="text-[var(--brand-primary)] transition hover:opacity-80"
+            >
               返回
             </Link>
-            <Link href='/about' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+            <Link
+              href="/about"
+              className="text-[var(--brand-primary)] transition hover:opacity-80"
+            >
               关于
             </Link>
           </div>

openflare_server/web/components/providers/auth-provider.tsx

@@ -10,7 +10,10 @@ import {
   useState,
 } from 'react';
 
-import { logout as logoutRequest, getCurrentUser } from '@/features/auth/api/auth';
+import {
+  logout as logoutRequest,
+  getCurrentUser,
+} from '@/features/auth/api/auth';
 import type { AuthUser } from '@/types/auth';
 
 interface AuthContextValue {

openflare_server/web/components/providers/theme-provider.tsx

@@ -93,7 +93,9 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
     [resolvedTheme, setThemeMode, themeMode],
   );
 
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
 }
 
 export function useTheme() {

openflare_server/web/components/ui/app-card.tsx

@@ -25,17 +25,23 @@ export function AppCard({
       {...props}
     >
       {(title || description || action) && (
-        <header className='flex flex-col gap-3 border-b border-[var(--border-default)] px-6 py-5 md:flex-row md:items-start md:justify-between'>
+        <header className="flex flex-col gap-3 border-b border-[var(--border-default)] px-6 py-5 md:flex-row md:items-start md:justify-between">
-          <div className='space-y-1'>
+          <div className="space-y-1">
-            {title ? <h2 className='text-lg font-semibold text-[var(--foreground-primary)]'>{title}</h2> : null}
+            {title ? (
+              <h2 className="text-lg font-semibold text-[var(--foreground-primary)]">
+                {title}
+              </h2>
+            ) : null}
             {description ? (
-              <p className='text-sm leading-6 text-[var(--foreground-secondary)]'>{description}</p>
+              <p className="text-sm leading-6 text-[var(--foreground-secondary)]">
+                {description}
+              </p>
             ) : null}
           </div>
-          {action ? <div className='shrink-0'>{action}</div> : null}
+          {action ? <div className="shrink-0">{action}</div> : null}
         </header>
       )}
-      <div className='px-6 py-5'>{children}</div>
+      <div className="px-6 py-5">{children}</div>
     </section>
   );
 }

openflare_server/web/components/ui/app-modal.tsx

@@ -55,32 +55,52 @@ export function AppModal({
   }
 
   return (
-    <div className='fixed inset-0 z-50 flex items-center justify-center bg-slate-950/55 px-4 py-6' role='dialog' aria-modal='true' aria-label={title}>
+    <div
-      <button type='button' className='absolute inset-0 cursor-default' onClick={onClose} aria-label='关闭弹窗' />
+      className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/55 px-4 py-6"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+    >
+      <button
+        type="button"
+        className="absolute inset-0 cursor-default"
+        onClick={onClose}
+        aria-label="关闭弹窗"
+      />
       <div
         className={cn(
           'relative flex max-h-[calc(100vh-3rem)] w-full flex-col overflow-hidden rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-panel)] shadow-2xl',
           sizeClassNameMap[size],
         )}
       >
-        <div className='flex items-start justify-between gap-4 border-b border-[var(--border-default)] px-6 py-5'>
+        <div className="flex items-start justify-between gap-4 border-b border-[var(--border-default)] px-6 py-5">
-          <div className='space-y-2'>
+          <div className="space-y-2">
-            <h2 className='text-xl font-semibold text-[var(--foreground-primary)]'>{title}</h2>
+            <h2 className="text-xl font-semibold text-[var(--foreground-primary)]">
+              {title}
+            </h2>
             {description ? (
-              <p className='max-w-2xl text-sm leading-6 text-[var(--foreground-secondary)]'>{description}</p>
+              <p className="max-w-2xl text-sm leading-6 text-[var(--foreground-secondary)]">
+                {description}
+              </p>
             ) : null}
           </div>
           <button
-            type='button'
+            type="button"
             onClick={onClose}
-            className='inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-lg text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]'
+            className="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-lg text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
-            aria-label='关闭弹窗'
+            aria-label="关闭弹窗"
           >
             ×
           </button>
         </div>
-        <div className='min-h-0 flex-1 overflow-y-auto px-6 py-6'>{children}</div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-6">
-        {footer ? <div className='border-t border-[var(--border-default)] px-6 py-5'>{footer}</div> : null}
+          {children}
+        </div>
+        {footer ? (
+          <div className="border-t border-[var(--border-default)] px-6 py-5">
+            {footer}
+          </div>
+        ) : null}
       </div>
     </div>
   );

openflare_server/web/components/ui/drawer.tsx

@@ -261,7 +261,9 @@ function useDrawerMetaContext() {
   const context = useContext(DrawerMetaContext);
 
   if (!context) {
-    throw new Error('Drawer title and description must be used within DrawerContent.');
+    throw new Error(
+      'Drawer title and description must be used within DrawerContent.',
+    );
   }
 
   return context;
@@ -271,14 +273,30 @@ export function DrawerHeader({
   className,
   ...props
 }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('border-b border-[var(--border-default)] px-6 py-5', className)} {...props} />;
+  return (
+    <div
+      className={cn(
+        'border-b border-[var(--border-default)] px-6 py-5',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export function DrawerFooter({
   className,
   ...props
 }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('border-t border-[var(--border-default)] px-6 py-4', className)} {...props} />;
+  return (
+    <div
+      className={cn(
+        'border-t border-[var(--border-default)] px-6 py-4',
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export function DrawerTitle({
@@ -290,7 +308,10 @@ export function DrawerTitle({
   return (
     <h2
       id={titleId}
-      className={cn('text-xl font-semibold text-[var(--foreground-primary)]', className)}
+      className={cn(
+        'text-xl font-semibold text-[var(--foreground-primary)]',
+        className,
+      )}
       {...props}
     />
   );
@@ -305,7 +326,10 @@ export function DrawerDescription({
   return (
     <p
       id={descriptionId}
-      className={cn('mt-2 text-sm leading-6 text-[var(--foreground-secondary)]', className)}
+      className={cn(
+        'mt-2 text-sm leading-6 text-[var(--foreground-secondary)]',
+        className,
+      )}
       {...props}
     />
   );

openflare_server/web/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none outline-none transition placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none transition outline-none placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

openflare_server/web/components/ui/label.tsx

@@ -2,19 +2,18 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils/cn';
 
-const Label = React.forwardRef<
+const Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(
-  HTMLLabelElement,
+  ({ className, ...props }, ref) => (
-  React.ComponentProps<'label'>
->(({ className, ...props }, ref) => (
     <label
       ref={ref}
       className={cn(
-      'text-sm font-medium leading-none text-[var(--foreground-primary)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm leading-none font-medium text-[var(--foreground-primary)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         className,
       )}
       {...props}
     />
-));
+  ),
+);
 
 Label.displayName = 'Label';
 

openflare_server/web/components/ui/separator.tsx

@@ -1,13 +1,13 @@
-"use client"
+'use client';
 
-import * as React from "react"
+import * as React from 'react';
-import { Separator as SeparatorPrimitive } from "radix-ui"
+import { Separator as SeparatorPrimitive } from 'radix-ui';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function Separator({
   className,
-  orientation = "horizontal",
+  orientation = 'horizontal',
   decorative = true,
   ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
@@ -17,12 +17,12 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };

openflare_server/web/components/ui/switch.tsx

@@ -21,7 +21,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
     },
     ref,
   ) => {
-    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const [internalChecked, setInternalChecked] =
+      React.useState(defaultChecked);
     const isControlled = checked !== undefined;
     const isChecked = isControlled ? checked : internalChecked;
 

openflare_server/web/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        'flex min-h-28 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none outline-none transition placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
+        'flex min-h-28 w-full rounded-xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-3 py-2 text-sm text-[var(--foreground-primary)] shadow-none transition outline-none placeholder:text-[var(--foreground-muted)] focus-visible:border-[var(--border-strong)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       ref={ref}

openflare_server/web/components/ui/theme-toggle.tsx

@@ -11,55 +11,61 @@ interface ThemeToggleProps {
 export function ThemeToggle({ className }: ThemeToggleProps) {
   const { themeMode, resolvedTheme, setThemeMode } = useTheme();
   const currentIndex = themeModes.indexOf(themeMode);
-  const nextTheme = themeModes[(currentIndex + 1) % themeModes.length] as ThemeMode;
+  const nextTheme = themeModes[
+    (currentIndex + 1) % themeModes.length
+  ] as ThemeMode;
 
   const icon =
     themeMode === 'light' ? (
       <svg
-        className='h-5 w-5'
+        className="h-5 w-5"
-        viewBox='0 0 24 24'
+        viewBox="0 0 24 24"
-        fill='none'
+        fill="none"
-        stroke='currentColor'
+        stroke="currentColor"
-        strokeWidth='1.8'
+        strokeWidth="1.8"
-        strokeLinecap='round'
+        strokeLinecap="round"
-        strokeLinejoin='round'
+        strokeLinejoin="round"
       >
-        <circle cx='12' cy='12' r='4' />
+        <circle cx="12" cy="12" r="4" />
-        <path d='M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3' />
+        <path d="M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3" />
       </svg>
     ) : themeMode === 'dark' ? (
       <svg
-        className='h-5 w-5'
+        className="h-5 w-5"
-        viewBox='0 0 24 24'
+        viewBox="0 0 24 24"
-        fill='none'
+        fill="none"
-        stroke='currentColor'
+        stroke="currentColor"
-        strokeWidth='1.8'
+        strokeWidth="1.8"
-        strokeLinecap='round'
+        strokeLinecap="round"
-        strokeLinejoin='round'
+        strokeLinejoin="round"
       >
-        <path d='M20 15.2A7.8 7.8 0 1 1 8.8 4 6.4 6.4 0 0 0 20 15.2Z' />
+        <path d="M20 15.2A7.8 7.8 0 1 1 8.8 4 6.4 6.4 0 0 0 20 15.2Z" />
       </svg>
     ) : (
       <svg
-        className='h-5 w-5'
+        className="h-5 w-5"
-        viewBox='0 0 24 24'
+        viewBox="0 0 24 24"
-        fill='none'
+        fill="none"
-        stroke='currentColor'
+        stroke="currentColor"
-        strokeWidth='1.8'
+        strokeWidth="1.8"
-        strokeLinecap='round'
+        strokeLinecap="round"
-        strokeLinejoin='round'
+        strokeLinejoin="round"
       >
-        <rect x='3.5' y='4' width='17' height='12' rx='2.5' />
+        <rect x="3.5" y="4" width="17" height="12" rx="2.5" />
-        <path d='M8 20h8M12 16v4' />
+        <path d="M8 20h8M12 16v4" />
       </svg>
     );
 
   const label =
-    themeMode === 'light' ? '浅色模式' : themeMode === 'dark' ? '深色模式' : '跟随系统';
+    themeMode === 'light'
+      ? '浅色模式'
+      : themeMode === 'dark'
+        ? '深色模式'
+        : '跟随系统';
 
   return (
     <button
-      type='button'
+      type="button"
       onClick={() => setThemeMode(nextTheme)}
       className={cn(
         'inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]',

openflare_server/web/features/about/components/about-page.tsx

@@ -33,45 +33,68 @@ export function AboutPage() {
   }
 
   if (aboutQuery.isError) {
-    return <ErrorState title='关于页加载失败' description={getErrorMessage(aboutQuery.error)} />;
+    return (
+      <ErrorState
+        title="关于页加载失败"
+        description={getErrorMessage(aboutQuery.error)}
+      />
+    );
   }
 
   if (statusQuery.isError) {
-    return <ErrorState title='系统状态加载失败' description={getErrorMessage(statusQuery.error)} />;
+    return (
+      <ErrorState
+        title="系统状态加载失败"
+        description={getErrorMessage(statusQuery.error)}
+      />
+    );
   }
 
   const aboutContent = aboutQuery.data?.trim() ?? '';
   const status = statusQuery.data;
 
   if (!status) {
-    return <EmptyState title='暂无系统信息' description='未能获取 OpenFlare 的公开状态信息。' />;
+    return (
+      <EmptyState
+        title="暂无系统信息"
+        description="未能获取 OpenFlare 的公开状态信息。"
+      />
+    );
   }
 
   return (
-    <div className='space-y-6'>
+    <div className="space-y-6">
       <AppCard
-        title='关于 OpenFlare'
+        title="关于 OpenFlare"
-        description='公开展示当前系统简介、版本信息与项目入口。'
+        description="公开展示当前系统简介、版本信息与项目入口。"
-        action={<StatusBadge label={status.version || 'dev'} variant='info' />}
+        action={<StatusBadge label={status.version || 'dev'} variant="info" />}
       >
-        <div className='grid gap-4 md:grid-cols-3'>
+        <div className="grid gap-4 md:grid-cols-3">
-          <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'>
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4">
-            <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>系统名称</p>
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
-            <p className='mt-2 text-sm font-medium text-[var(--foreground-primary)]'>{status.system_name || 'OpenFlare'}</p>
+              系统名称
+            </p>
+            <p className="mt-2 text-sm font-medium text-[var(--foreground-primary)]">
+              {status.system_name || 'OpenFlare'}
+            </p>
           </div>
-          <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'>
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4">
-            <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>Server 启动时间</p>
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
-            <p className='mt-2 text-sm font-medium text-[var(--foreground-primary)]'>
+              Server 启动时间
+            </p>
+            <p className="mt-2 text-sm font-medium text-[var(--foreground-primary)]">
               {formatDateTime(new Date(status.start_time * 1000))}
             </p>
           </div>
-          <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'>
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4">
-            <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>项目仓库</p>
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+              项目仓库
+            </p>
             <a
-              href='https://github.com/Rain-kl/OpenFlare'
+              href="https://github.com/Rain-kl/OpenFlare"
-              target='_blank'
+              target="_blank"
-              rel='noreferrer'
+              rel="noreferrer"
-              className='mt-2 block text-sm font-medium text-[var(--brand-primary)] transition hover:opacity-80'
+              className="mt-2 block text-sm font-medium text-[var(--brand-primary)] transition hover:opacity-80"
             >
               github.com/Rain-kl/OpenFlare
             </a>
@@ -80,21 +103,29 @@ export function AboutPage() {
       </AppCard>
 
       {aboutContent ? (
-        <AppCard title='项目介绍' description='以下内容由系统设置中的“关于内容”维护。'>
+        <AppCard
+          title="项目介绍"
+          description="以下内容由系统设置中的“关于内容”维护。"
+        >
           <div
-            className='prose prose-sm max-w-none text-[var(--foreground-primary)] [&_a]:text-[var(--brand-primary)]'
+            className="prose prose-sm max-w-none text-[var(--foreground-primary)] [&_a]:text-[var(--brand-primary)]"
-            dangerouslySetInnerHTML={{ __html: marked.parse(aboutContent) as string }}
+            dangerouslySetInnerHTML={{
+              __html: marked.parse(aboutContent) as string,
+            }}
           />
         </AppCard>
       ) : (
         <EmptyState
-          title='尚未配置关于内容'
+          title="尚未配置关于内容"
-          description='可在设置页的“其他设置”标签中编写 Markdown / HTML 内容，这里会自动同步展示。'
+          description="可在设置页的“其他设置”标签中编写 Markdown / HTML 内容，这里会自动同步展示。"
         />
       )}
 
-      <div className='flex flex-wrap gap-3 text-sm'>
+      <div className="flex flex-wrap gap-3 text-sm">
-        <Link href='/login' className='text-[var(--brand-primary)] transition hover:opacity-80'>
+        <Link
+          href="/login"
+          className="text-[var(--brand-primary)] transition hover:opacity-80"
+        >
           前往登录
         </Link>
       </div>

openflare_server/web/features/apply-logs/components/apply-logs-page.tsx

@@ -29,11 +29,8 @@ import {
 } from '@/features/shared/components/resource-primitives';
 import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
 
-const applyLogsQueryKey = (
+const applyLogsQueryKey = (nodeId: string, pageNo: number, pageSize: number) =>
-  nodeId: string,
+  ['apply-logs', nodeId, pageNo, pageSize] as const;
-  pageNo: number,
-  pageSize: number,
-) => ['apply-logs', nodeId, pageNo, pageSize] as const;
 
 const pageSizeOptions = [20, 50, 100];
 const emptyApplyLogRows: ApplyLogItem[] = [];
@@ -64,7 +61,12 @@ function truncateHash(value: string) {
   return value.length > 12 ? `${value.slice(0, 12)}...` : value;
 }
 
-function buildSummary(rows: ApplyLogItem[], total: number, current: number, totalPage: number) {
+function buildSummary(
+  rows: ApplyLogItem[],
+  total: number,
+  current: number,
+  totalPage: number,
+) {
   const nodeIds = new Set(rows.map((item) => item.node_id));
   return [
     { label: '总记录数', value: total },
@@ -209,14 +211,17 @@ export function ApplyLogsPage() {
         <InlineMessage tone={feedback.tone} message={feedback.message} />
       ) : null}
 
-      <AppCard title="日志摘要" description="后端按分页返回应用日志，页面仅展示当前页数据和总量信息。">
+      <AppCard
+        title="日志摘要"
+        description="后端按分页返回应用日志，页面仅展示当前页数据和总量信息。"
+      >
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
           {summary.map((item) => (
             <div
               key={item.label}
               className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
             >
-              <p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]">
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
                 {item.label}
               </p>
               <p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
@@ -348,13 +353,16 @@ export function ApplyLogsPage() {
 
               <div className="flex flex-col gap-3 border-t border-[var(--border-default)] pt-4 md:flex-row md:items-center md:justify-between">
                 <p className="text-sm text-[var(--foreground-secondary)]">
-                  第 {current} / {Math.max(totalPage, 1)} 页，共 {total} 条记录。
+                  第 {current} / {Math.max(totalPage, 1)} 页，共 {total}{' '}
+                  条记录。
                 </p>
                 <div className="flex flex-wrap gap-2">
                   <SecondaryButton
                     type="button"
                     disabled={current <= 1}
-                    onClick={() => setPageNo((previous) => Math.max(1, previous - 1))}
+                    onClick={() =>
+                      setPageNo((previous) => Math.max(1, previous - 1))
+                    }
                   >
                     上一页
                   </SecondaryButton>
@@ -363,7 +371,9 @@ export function ApplyLogsPage() {
                     disabled={totalPage === 0 || current >= totalPage}
                     onClick={() =>
                       setPageNo((previous) =>
-                        totalPage > 0 ? Math.min(totalPage, previous + 1) : previous,
+                        totalPage > 0
+                          ? Math.min(totalPage, previous + 1)
+                          : previous,
                       )
                     }
                   >
@@ -387,14 +397,30 @@ export function ApplyLogsPage() {
           <div className="space-y-4">
             <div className="flex flex-wrap gap-2">
               <StatusBadge {...getResultMeta(selectedLog.result)} />
-              <StatusBadge label={`Node：${selectedLog.node_id}`} variant="info" />
+              <StatusBadge
-              <StatusBadge label={`版本：${selectedLog.version}`} variant="warning" />
+                label={`Node：${selectedLog.node_id}`}
+                variant="info"
+              />
+              <StatusBadge
+                label={`版本：${selectedLog.version}`}
+                variant="warning"
+              />
             </div>
 
             <div className="grid gap-4 sm:grid-cols-2">
-              <MetricCard label="创建时间" value={formatDateTime(selectedLog.created_at)} />
+              <MetricCard
-              <MetricCard label="相对时间" value={formatRelativeTime(selectedLog.created_at)} />
+                label="创建时间"
-              <MetricCard label="目标 Checksum" value={selectedLog.checksum || '—'} breakAll />
+                value={formatDateTime(selectedLog.created_at)}
+              />
+              <MetricCard
+                label="相对时间"
+                value={formatRelativeTime(selectedLog.created_at)}
+              />
+              <MetricCard
+                label="目标 Checksum"
+                value={selectedLog.checksum || '—'}
+                breakAll
+              />
               <MetricCard
                 label="支持文件数"
                 value={String(selectedLog.support_file_count)}
@@ -412,10 +438,10 @@ export function ApplyLogsPage() {
             </div>
 
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-              <p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]">
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
                 消息
               </p>
-              <pre className="mt-3 whitespace-pre-wrap break-words text-sm leading-6 text-[var(--foreground-primary)]">
+              <pre className="mt-3 text-sm leading-6 break-words whitespace-pre-wrap text-[var(--foreground-primary)]">
                 {selectedLog.message || '—'}
               </pre>
             </div>
@@ -430,7 +456,10 @@ export function ApplyLogsPage() {
         onClose={() => setCleanupModalOpen(false)}
         footer={
           <div className="flex flex-wrap justify-end gap-2">
-            <SecondaryButton type="button" onClick={() => setCleanupModalOpen(false)}>
+            <SecondaryButton
+              type="button"
+              onClick={() => setCleanupModalOpen(false)}
+            >
               取消
             </SecondaryButton>
             <PrimaryButton
@@ -505,7 +534,7 @@ function MetricCard({
 }) {
   return (
     <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-      <p className="text-xs tracking-[0.2em] uppercase text-[var(--foreground-muted)]">
+      <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
         {label}
       </p>
       <p

openflare_server/web/features/auth/components/auth-form-primitives.tsx

@@ -1,4 +1,8 @@
-import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import type {
+  ButtonHTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react';
 
 import { cn } from '@/lib/utils/cn';
 
@@ -12,10 +16,16 @@ export function AuthFormField({
   children: ReactNode;
 }) {
   return (
-    <label className='block space-y-2'>
+    <label className="block space-y-2">
-      <span className='text-sm font-medium text-[var(--foreground-primary)]'>{label}</span>
+      <span className="text-sm font-medium text-[var(--foreground-primary)]">
+        {label}
+      </span>
       {children}
-      {hint ? <span className='block text-xs text-[var(--foreground-secondary)]'>{hint}</span> : null}
+      {hint ? (
+        <span className="block text-xs text-[var(--foreground-secondary)]">
+          {hint}
+        </span>
+      ) : null}
     </label>
   );
 }
@@ -25,7 +35,7 @@ export function AuthInput(props: InputHTMLAttributes<HTMLInputElement>) {
     <input
       {...props}
       className={cn(
-        'w-full rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3 text-sm text-[var(--foreground-primary)] outline-none transition placeholder:text-[var(--foreground-muted)] focus:border-[var(--border-strong)] focus:ring-2 focus:ring-[var(--accent-soft)]',
+        'w-full rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none placeholder:text-[var(--foreground-muted)] focus:border-[var(--border-strong)] focus:ring-2 focus:ring-[var(--accent-soft)]',
         props.className,
       )}
     />

openflare_server/web/features/auth/components/dashboard-auth-guard.tsx

@@ -18,15 +18,18 @@ export function DashboardAuthGuard({ children }: DashboardAuthGuardProps) {
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
-      const redirect = pathname && pathname !== '/' ? `?redirect=${encodeURIComponent(pathname)}` : '';
+      const redirect =
+        pathname && pathname !== '/'
+          ? `?redirect=${encodeURIComponent(pathname)}`
+          : '';
       router.replace(`/login${redirect}`);
     }
   }, [isAuthenticated, isLoading, pathname, router]);
 
   if (isLoading || !isAuthenticated) {
     return (
-      <main className='flex min-h-screen items-center justify-center px-4 py-8'>
+      <main className="flex min-h-screen items-center justify-center px-4 py-8">
-        <LoadingState className='w-full max-w-md' />
+        <LoadingState className="w-full max-w-md" />
       </main>
     );
   }

openflare_server/web/features/auth/components/github-oauth-callback.tsx

@@ -16,7 +16,10 @@ export function GitHubOAuthCallback() {
   const { setUser } = useAuth();
   const handledCodeRef = useRef<string | null>(null);
   const [prompt, setPrompt] = useState('正在处理 GitHub 授权结果...');
-  const [message, setMessage] = useState<{ tone: 'danger' | 'success'; text: string } | null>(null);
+  const [message, setMessage] = useState<{
+    tone: 'danger' | 'success';
+    text: string;
+  } | null>(null);
   const code = searchParams?.get('code')?.trim() ?? '';
 
   const mutation = useMutation({
@@ -28,14 +31,20 @@ export function GitHubOAuthCallback() {
     },
     onError: (error: Error) => {
       setPrompt('授权处理失败');
-      setMessage({ tone: 'danger', text: error.message || 'GitHub 授权失败，请稍后重试。' });
+      setMessage({
+        tone: 'danger',
+        text: error.message || 'GitHub 授权失败，请稍后重试。',
+      });
     },
   });
 
   useEffect(() => {
     if (!code) {
       setPrompt('缺少授权 code');
-      setMessage({ tone: 'danger', text: '未收到 GitHub 授权参数，请返回登录页重试。' });
+      setMessage({
+        tone: 'danger',
+        text: '未收到 GitHub 授权参数，请返回登录页重试。',
+      });
       return;
     }
 
@@ -48,10 +57,12 @@ export function GitHubOAuthCallback() {
   }, [code, mutation]);
 
   return (
-    <AppCard title='GitHub OAuth 回调' description={prompt}>
+    <AppCard title="GitHub OAuth 回调" description={prompt}>
-      <div className='space-y-4'>
+      <div className="space-y-4">
         {mutation.isPending ? <LoadingState /> : null}
-        {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
+        {message ? (
+          <InlineMessage tone={message.tone} message={message.text} />
+        ) : null}
       </div>
     </AppCard>
   );

openflare_server/web/features/auth/components/password-reset-confirm-form.tsx

@@ -19,45 +19,66 @@ export function PasswordResetConfirmForm() {
   const searchParams = useSearchParams();
   const email = searchParams?.get('email') || '';
   const token = searchParams?.get('token') || '';
-  const [message, setMessage] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);
+  const [message, setMessage] = useState<{
+    tone: 'success' | 'danger';
+    text: string;
+  } | null>(null);
 
   const mutation = useMutation({
     mutationFn: () => resetPassword({ email, token }),
     onSuccess: async (password) => {
       try {
         await navigator.clipboard.writeText(password);
-        setMessage({ tone: 'success', text: `密码已重置，新密码已复制到剪贴板：${password}` });
+        setMessage({
+          tone: 'success',
+          text: `密码已重置，新密码已复制到剪贴板：${password}`,
+        });
       } catch {
         setMessage({ tone: 'success', text: `密码已重置：${password}` });
       }
     },
     onError: (error: Error) => {
-      setMessage({ tone: 'danger', text: error.message || '密码重置失败，请重新获取链接。' });
+      setMessage({
+        tone: 'danger',
+        text: error.message || '密码重置失败，请重新获取链接。',
+      });
     },
   });
 
   const missingParams = !email || !token;
 
   return (
-    <AppCard title='密码重置确认' description='确认后，系统会生成新的随机密码。'>
+    <AppCard
-      <div className='space-y-4'>
+      title="密码重置确认"
-        <AuthFormField label='邮箱地址'>
+      description="确认后，系统会生成新的随机密码。"
+    >
+      <div className="space-y-4">
+        <AuthFormField label="邮箱地址">
           <AuthInput value={email} readOnly />
         </AuthFormField>
 
         {missingParams ? (
-          <InlineMessage tone='danger' message='重置链接缺少必要参数，请重新发起密码重置。' />
+          <InlineMessage
+            tone="danger"
+            message="重置链接缺少必要参数，请重新发起密码重置。"
+          />
         ) : null}
 
-        {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
+        {message ? (
+          <InlineMessage tone={message.tone} message={message.text} />
+        ) : null}
 
-        <div className='flex flex-col gap-3 sm:flex-row'>
+        <div className="flex flex-col gap-3 sm:flex-row">
-          <AuthButton type='button' disabled={missingParams || mutation.isPending} onClick={() => mutation.mutate()}>
+          <AuthButton
+            type="button"
+            disabled={missingParams || mutation.isPending}
+            onClick={() => mutation.mutate()}
+          >
             {mutation.isPending ? '处理中...' : '确认重置密码'}
           </AuthButton>
           {message?.tone === 'success' ? (
             <SecondaryButton
-              type='button'
+              type="button"
               onClick={async () => {
                 const password = message.text.split('：').pop() || '';
                 if (password) {
@@ -70,9 +91,12 @@ export function PasswordResetConfirmForm() {
           ) : null}
         </div>
 
-        <div className='text-sm text-[var(--foreground-secondary)]'>
+        <div className="text-sm text-[var(--foreground-secondary)]">
           处理完成后可返回
-          <Link href='/login' className='ml-2 text-[var(--brand-primary)] transition hover:opacity-80'>
+          <Link
+            href="/login"
+            className="ml-2 text-[var(--brand-primary)] transition hover:opacity-80"
+          >
             登录页
           </Link>
         </div>

openflare_server/web/features/auth/components/password-reset-flow.tsx

@@ -7,7 +7,13 @@ import { PasswordResetRequestForm } from '@/features/auth/components/password-re
 
 export function PasswordResetFlow() {
   const searchParams = useSearchParams();
-  const hasConfirmationParams = Boolean(searchParams?.get('email') && searchParams?.get('token'));
+  const hasConfirmationParams = Boolean(
+    searchParams?.get('email') && searchParams?.get('token'),
+  );
 
-  return hasConfirmationParams ? <PasswordResetConfirmForm /> : <PasswordResetRequestForm />;
+  return hasConfirmationParams ? (
+    <PasswordResetConfirmForm />
+  ) : (
+    <PasswordResetRequestForm />
+  );
 }

openflare_server/web/features/auth/components/password-reset-request-form.tsx

@@ -27,7 +27,10 @@ type ResetRequestFormValues = z.infer<typeof resetRequestSchema>;
 
 export function PasswordResetRequestForm() {
   const [turnstileToken, setTurnstileToken] = useState('');
-  const [message, setMessage] = useState<{ tone: 'success' | 'danger' | 'info'; text: string } | null>(null);
+  const [message, setMessage] = useState<{
+    tone: 'success' | 'danger' | 'info';
+    text: string;
+  } | null>(null);
 
   const form = useForm<ResetRequestFormValues>({
     resolver: zodResolver(resetRequestSchema),
@@ -47,7 +50,10 @@ export function PasswordResetRequestForm() {
       form.reset();
     },
     onError: (error: Error) => {
-      setMessage({ tone: 'danger', text: error.message || '重置邮件发送失败，请稍后重试。' });
+      setMessage({
+        tone: 'danger',
+        text: error.message || '重置邮件发送失败，请稍后重试。',
+      });
     },
   });
 
@@ -62,18 +68,26 @@ export function PasswordResetRequestForm() {
 
   return (
     <PublicAuthGuard>
-      <AppCard title='密码重置' description='提交后，系统会向你的注册邮箱发送重置链接。'>
+      <AppCard
-        <form className='space-y-4' onSubmit={handleSubmit}>
+        title="密码重置"
-          <AuthFormField label='邮箱地址'>
+        description="提交后，系统会向你的注册邮箱发送重置链接。"
-            <AuthInput type='email' placeholder='请输入邮箱地址' {...form.register('email')} />
+      >
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <AuthFormField label="邮箱地址">
+            <AuthInput
+              type="email"
+              placeholder="请输入邮箱地址"
+              {...form.register('email')}
+            />
             {form.formState.errors.email ? (
-              <span className='text-xs text-[var(--status-danger-foreground)]'>
+              <span className="text-xs text-[var(--status-danger-foreground)]">
                 {form.formState.errors.email.message}
               </span>
             ) : null}
           </AuthFormField>
 
-          {statusQuery.data?.turnstile_check && statusQuery.data.turnstile_site_key ? (
+          {statusQuery.data?.turnstile_check &&
+          statusQuery.data.turnstile_site_key ? (
             <TurnstileWidget
               siteKey={statusQuery.data.turnstile_site_key}
               onVerify={(token) => setTurnstileToken(token)}
@@ -82,16 +96,21 @@ export function PasswordResetRequestForm() {
             />
           ) : null}
 
-          {message ? <InlineMessage tone={message.tone} message={message.text} /> : null}
+          {message ? (
+            <InlineMessage tone={message.tone} message={message.text} />
+          ) : null}
 
-          <AuthButton type='submit' disabled={mutation.isPending}>
+          <AuthButton type="submit" disabled={mutation.isPending}>
             {mutation.isPending ? '提交中...' : '发送重置邮件'}
           </AuthButton>
         </form>
 
-        <div className='mt-6 text-sm text-[var(--foreground-secondary)]'>
+        <div className="mt-6 text-sm text-[var(--foreground-secondary)]">
           想起密码了？
-          <Link href='/login' className='ml-2 text-[var(--brand-primary)] transition hover:opacity-80'>
+          <Link
+            href="/login"
+            className="ml-2 text-[var(--brand-primary)] transition hover:opacity-80"
+          >
             返回登录
           </Link>
         </div>

openflare_server/web/features/config-versions/components/cleanup-config-versions-modal.tsx

@@ -45,7 +45,12 @@ export function CleanupConfigVersionsModal({
           <SecondaryButton type="button" onClick={onClose} disabled={isPending}>
             取消
           </SecondaryButton>
-          <PrimaryButton type="submit" form="cleanup-form" disabled={isPending} className="bg-[var(--status-danger-foreground)] hover:bg-[var(--status-danger-foreground)] hover:opacity-90 border-[var(--status-danger-foreground)]">
+          <PrimaryButton
+            type="submit"
+            form="cleanup-form"
+            disabled={isPending}
+            className="border-[var(--status-danger-foreground)] bg-[var(--status-danger-foreground)] hover:bg-[var(--status-danger-foreground)] hover:opacity-90"
+          >
             {isPending ? '清理中...' : '确认清理'}
           </PrimaryButton>
         </div>

openflare_server/web/features/config-versions/components/config-versions-page.tsx

@@ -285,7 +285,10 @@ function PublishPreviewCard({
               {isActiveVersionDetailLoading ? (
                 <LoadingState />
               ) : activeVersionDetailError ? (
-                <InlineMessage tone="danger" message={activeVersionDetailError} />
+                <InlineMessage
+                  tone="danger"
+                  message={activeVersionDetailError}
+                />
               ) : activeVersionDetail ? (
                 <CodeBlock className="max-h-[32rem] whitespace-pre-wrap">
                   {activeVersionDetail.main_config}
@@ -520,7 +523,11 @@ export function ConfigVersionsPage() {
               <SecondaryButton
                 type="button"
                 onClick={() => {
-                  if (window.confirm('确认强制重新发布吗？这会忽略配置变化检查并立即生成一个新版本。')) {
+                  if (
+                    window.confirm(
+                      '确认强制重新发布吗？这会忽略配置变化检查并立即生成一个新版本。',
+                    )
+                  ) {
                     publishMutation.mutate(true);
                   }
                 }}
@@ -672,7 +679,9 @@ export function ConfigVersionsPage() {
       <CleanupConfigVersionsModal
         isOpen={isCleanupModalOpen}
         onClose={() => setIsCleanupModalOpen(false)}
-        onConfirm={(keepCount) => cleanupMutation.mutate({ keep_count: keepCount })}
+        onConfirm={(keepCount) =>
+          cleanupMutation.mutate({ keep_count: keepCount })
+        }
         isPending={cleanupMutation.isPending}
       />
     </>

openflare_server/web/features/dashboard/api/overview.ts

@@ -27,7 +27,9 @@ function isCompactDistributionItem(
 }
 
 function isCompactTrafficTrendPoint(
-  value: DashboardOverview['trends']['traffic_24h'][number] | CompactTrafficTrendPoint,
+  value:
+    | DashboardOverview['trends']['traffic_24h'][number]
+    | CompactTrafficTrendPoint,
 ): value is CompactTrafficTrendPoint {
   return Array.isArray(value);
 }
@@ -74,7 +76,10 @@ function normalizeDistributionItems(
 
 function normalizeTrafficTrendPoints(
   items:
-    | Array<DashboardOverview['trends']['traffic_24h'][number] | CompactTrafficTrendPoint>
+    | Array<
+        | DashboardOverview['trends']['traffic_24h'][number]
+        | CompactTrafficTrendPoint
+      >
     | null
     | undefined,
 ) {
@@ -114,7 +119,8 @@ function normalizeCapacityTrendPoints(
 function normalizeNetworkTrendPoints(
   items:
     | Array<
-        DashboardOverview['trends']['network_24h'][number] | CompactNetworkTrendPoint
+        | DashboardOverview['trends']['network_24h'][number]
+        | CompactNetworkTrendPoint
       >
     | null
     | undefined,
@@ -136,7 +142,8 @@ function normalizeNetworkTrendPoints(
 function normalizeDiskIOTrendPoints(
   items:
     | Array<
-        DashboardOverview['trends']['disk_io_24h'][number] | CompactDiskIOTrendPoint
+        | DashboardOverview['trends']['disk_io_24h'][number]
+        | CompactDiskIOTrendPoint
       >
     | null
     | undefined,
@@ -154,7 +161,10 @@ function normalizeDiskIOTrendPoints(
 }
 
 function normalizeDashboardNodes(
-  items: Array<DashboardNodeHealth | CompactDashboardNodeHealth> | null | undefined,
+  items:
+    | Array<DashboardNodeHealth | CompactDashboardNodeHealth>
+    | null
+    | undefined,
 ): DashboardNodeHealth[] {
   return arrayOrEmpty(items).map((item) =>
     isCompactDashboardNode(item)
@@ -185,11 +195,7 @@ function normalizeDashboardNodes(
 }
 
 function normalizeDashboardOverview(
-  overview:
+  overview: DashboardOverview | DashboardOverviewCompact | null | undefined,
-    | DashboardOverview
-    | DashboardOverviewCompact
-    | null
-    | undefined,
 ): DashboardOverview | null {
   if (!overview) {
     return null;
@@ -209,8 +215,12 @@ function normalizeDashboardOverview(
       source_countries: normalizeDistributionItems(
         overview.distributions?.source_countries,
       ),
-      status_codes: normalizeDistributionItems(overview.distributions?.status_codes),
+      status_codes: normalizeDistributionItems(
-      top_domains: normalizeDistributionItems(overview.distributions?.top_domains),
+        overview.distributions?.status_codes,
+      ),
+      top_domains: normalizeDistributionItems(
+        overview.distributions?.top_domains,
+      ),
     },
     trends: {
       traffic_24h: normalizeTrafficTrendPoints(overview.trends?.traffic_24h),
@@ -222,8 +232,8 @@ function normalizeDashboardOverview(
 }
 
 export async function getDashboardOverview() {
-  const overview = await apiRequest<DashboardOverview | DashboardOverviewCompact>(
+  const overview = await apiRequest<
-    '/dashboard/overview',
+    DashboardOverview | DashboardOverviewCompact
-  );
+  >('/dashboard/overview');
   return normalizeDashboardOverview(overview);
 }

openflare_server/web/features/dashboard/components/dashboard-overview.tsx

@@ -249,9 +249,7 @@ export function DashboardOverview() {
       </div>
 
       <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
-        <AppCard
+        <AppCard title="24 小时网络与磁盘趋势">
-          title="24 小时网络与磁盘趋势"
-        >
           <div className="space-y-6">
             <TrendChart
               labels={overview.trends.network_24h.map((point) =>
@@ -311,9 +309,7 @@ export function DashboardOverview() {
           </div>
         </AppCard>
 
-        <AppCard
+        <AppCard title="Top 节点榜单">
-          title="Top 节点榜单"
-        >
           <div className="grid gap-6 xl:grid-cols-1">
             <div>
               <p className="mb-3 text-xs tracking-[0.22em] text-[var(--foreground-muted)] uppercase">
@@ -352,10 +348,7 @@ export function DashboardOverview() {
       </div>
 
       <div className="grid gap-6 xl:grid-cols-3">
-        <AppCard
+        <AppCard title="来源分布" description="聚合最近 24 小时主要来源国家。">
-          title="来源分布"
-          description="聚合最近 24 小时主要来源国家。"
-        >
           <RankChart
             items={overview.distributions.source_countries.map((item) => ({
               label: item.key,
@@ -380,10 +373,7 @@ export function DashboardOverview() {
           />
         </AppCard>
 
-        <AppCard
+        <AppCard title="Top Domain" description="观察主要流量集中在哪些域名。">
-          title="Top Domain"
-          description="观察主要流量集中在哪些域名。"
-        >
           <RankChart
             items={overview.distributions.top_domains.map((item) => ({
               label: item.key,

openflare_server/web/features/dns-accounts/api/dns-accounts.ts

@@ -15,7 +15,10 @@ export function createDnsAccount(payload: DnsAccountMutationPayload) {
   });
 }
 
-export function updateDnsAccount(id: number, payload: DnsAccountMutationPayload) {
+export function updateDnsAccount(
+  id: number,
+  payload: DnsAccountMutationPayload,
+) {
   return apiRequest<DnsAccountItem>(`/dns-accounts/${id}/update`, {
     method: 'POST',
     body: JSON.stringify(payload),

openflare_server/web/features/dns-accounts/components/dns-accounts-page.tsx

@@ -30,7 +30,10 @@ import { formatDateTime } from '@/lib/utils/date';
 
 export function DnsAccountsPage() {
   const queryClient = useQueryClient();
-  const [feedback, setFeedback] = useState<{ tone: 'info' | 'success' | 'danger'; message: string } | null>(null);
+  const [feedback, setFeedback] = useState<{
+    tone: 'info' | 'success' | 'danger';
+    message: string;
+  } | null>(null);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
 
   const dnsAccountsQuery = useQuery({
@@ -57,7 +60,10 @@ export function DnsAccountsPage() {
     deleteMutation.mutate(account.id);
   };
 
-  const accounts = useMemo(() => dnsAccountsQuery.data ?? [], [dnsAccountsQuery.data]);
+  const accounts = useMemo(
+    () => dnsAccountsQuery.data ?? [],
+    [dnsAccountsQuery.data],
+  );
 
   return (
     <>
@@ -73,30 +79,47 @@ export function DnsAccountsPage() {
               >
                 返回
               </Link>
-              <PrimaryButton type="button" onClick={() => setIsCreateOpen(true)}>
+              <PrimaryButton
+                type="button"
+                onClick={() => setIsCreateOpen(true)}
+              >
                 添加账号
               </PrimaryButton>
             </div>
           }
         />
 
-        {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
 
         <AppCard title="DNS 账号列表">
           {dnsAccountsQuery.isLoading ? (
             <LoadingState />
           ) : dnsAccountsQuery.isError ? (
-            <ErrorState title="加载失败" description={getErrorMessage(dnsAccountsQuery.error)} />
+            <ErrorState
+              title="加载失败"
+              description={getErrorMessage(dnsAccountsQuery.error)}
+            />
           ) : accounts.length === 0 ? (
-            <EmptyState title="暂无 DNS 账号" description="点击右上角“添加账号”开始录入。" />
+            <EmptyState
+              title="暂无 DNS 账号"
+              description="点击右上角“添加账号”开始录入。"
+            />
           ) : (
             <div className="space-y-3">
               {accounts.map((account) => (
-                <div key={account.id} className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                <div
+                  key={account.id}
+                  className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
+                >
                   <div className="flex items-start justify-between gap-4">
                     <div className="space-y-2">
                       <p className="text-sm font-semibold text-[var(--foreground-primary)]">
-                        {account.name} <span className="ml-2 text-xs font-normal text-[var(--foreground-secondary)]">({account.type})</span>
+                        {account.name}{' '}
+                        <span className="ml-2 text-xs font-normal text-[var(--foreground-secondary)]">
+                          ({account.type})
+                        </span>
                       </p>
                       <div className="text-xs leading-5 text-[var(--foreground-secondary)]">
                         <p>创建于：{formatDateTime(account.created_at)}</p>
@@ -121,17 +144,29 @@ export function DnsAccountsPage() {
       </div>
 
       {isCreateOpen && (
-        <DnsAccountCreateModal isOpen={isCreateOpen} onClose={() => setIsCreateOpen(false)} onCreated={() => {
+        <DnsAccountCreateModal
+          isOpen={isCreateOpen}
+          onClose={() => setIsCreateOpen(false)}
+          onCreated={() => {
             setFeedback({ tone: 'success', message: 'DNS 账号已添加。' });
             setIsCreateOpen(false);
             queryClient.invalidateQueries({ queryKey: ['dns-accounts'] });
-        }} />
+          }}
+        />
       )}
     </>
   );
 }
 
-function DnsAccountCreateModal({ isOpen, onClose, onCreated }: { isOpen: boolean; onClose: () => void; onCreated: () => void }) {
+function DnsAccountCreateModal({
+  isOpen,
+  onClose,
+  onCreated,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+}) {
   const [error, setError] = useState('');
   const { register, handleSubmit, formState } = useForm({
     defaultValues: { name: '', type: 'cloudflare', authorization: '' },
@@ -157,8 +192,14 @@ function DnsAccountCreateModal({ isOpen, onClose, onCreated }: { isOpen: boolean
     <AppModal isOpen={isOpen} onClose={onClose} title="添加 DNS 账号">
       <form onSubmit={onSubmit} className="space-y-5">
         {error && <InlineMessage tone="danger" message={error} />}
-        <ResourceField label="账号名称" error={formState.errors.name?.message as string}>
+        <ResourceField
-          <ResourceInput placeholder="Cloudlfare 邮箱账号" {...register('name', { required: '请输入名称' })} />
+          label="账号名称"
+          error={formState.errors.name?.message as string}
+        >
+          <ResourceInput
+            placeholder="Cloudlfare 邮箱账号"
+            {...register('name', { required: '请输入名称' })}
+          />
         </ResourceField>
         <ResourceField label="DNS 服务商">
           <ResourceSelect {...register('type')}>
@@ -166,7 +207,9 @@ function DnsAccountCreateModal({ isOpen, onClose, onCreated }: { isOpen: boolean
           </ResourceSelect>
         </ResourceField>
         <ResourceField label="API Token" hint="请勿使用 Global API Key">
-          <ResourceInput {...register('authorization', { required: '请输入 Token' })} />
+          <ResourceInput
+            {...register('authorization', { required: '请输入 Token' })}
+          />
         </ResourceField>
         <PrimaryButton type="submit" disabled={createMutation.isPending}>
           {createMutation.isPending ? '提交中...' : '提交'}

openflare_server/web/features/managed-domains/api/managed-domains.ts

@@ -17,7 +17,10 @@ export function createManagedDomain(payload: ManagedDomainMutationPayload) {
   });
 }
 
-export function updateManagedDomain(id: number, payload: ManagedDomainMutationPayload) {
+export function updateManagedDomain(
+  id: number,
+  payload: ManagedDomainMutationPayload,
+) {
   return apiRequest<ManagedDomainItem>(`/managed-domains/${id}/update`, {
     method: 'POST',
     body: JSON.stringify(payload),

openflare_server/web/features/nodes/components/node-detail-page.tsx

@@ -404,7 +404,9 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
       });
       setHealthEventCleanupModalOpen(false);
       await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ['node-observability', nodeId] }),
+        queryClient.invalidateQueries({
+          queryKey: ['node-observability', nodeId],
+        }),
         queryClient.invalidateQueries({ queryKey: ['dashboard', 'overview'] }),
       ]);
     },
@@ -869,9 +871,7 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
                 )}
               </AppCard>
 
-              <AppCard
+              <AppCard title="实时资源">
-                title="实时资源"
-              >
                 {observabilityQuery.isLoading ? (
                   <LoadingState />
                 ) : observabilityQuery.isError ? (
@@ -930,9 +930,7 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
                 )}
               </AppCard>
 
-              <AppCard
+              <AppCard title="网络流量">
-                title="网络流量"
-              >
                 {observabilityQuery.isLoading ? (
                   <LoadingState />
                 ) : observabilityQuery.isError ? (
@@ -1628,7 +1626,9 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
 
                   {nodeInstallCommand ? (
                     <div>
-                      <p className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">脚本部署 (Linux / macOS)</p>
+                      <p className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">
+                        脚本部署 (Linux / macOS)
+                      </p>
                       <CodeBlock className="whitespace-pre-wrap">
                         {nodeInstallCommand}
                       </CodeBlock>
@@ -1637,7 +1637,9 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
 
                   {nodeDockerInstallCommand ? (
                     <div>
-                      <p className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">Docker 部署</p>
+                      <p className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">
+                        Docker 部署
+                      </p>
                       <CodeBlock className="whitespace-pre-wrap">
                         {nodeDockerInstallCommand}
                       </CodeBlock>
@@ -1835,8 +1837,12 @@ export function NodeDetailPage({ nodeId }: { nodeId: string }) {
           />
         ) : (
           <div className="space-y-3 text-sm text-[var(--foreground-secondary)]">
-            <p>该操作会删除当前节点已记录的全部健康事件，包括活动中与已恢复事件。</p>
+            <p>
-            <p>这不会影响节点后续继续上报新的健康事件，但现有时间线与相关摘要会立即刷新。</p>
+              该操作会删除当前节点已记录的全部健康事件，包括活动中与已恢复事件。
+            </p>
+            <p>
+              这不会影响节点后续继续上报新的健康事件，但现有时间线与相关摘要会立即刷新。
+            </p>
           </div>
         )}
       </AppModal>

openflare_server/web/features/nodes/components/node-editor-modal.tsx

@@ -151,8 +151,8 @@ function getRegionCenter(feature: GeoJsonFeature) {
 }
 
 function buildRegionOptions() {
-  const features = ((worldGeoJson as { features?: GeoJsonFeature[] }).features ??
+  const features = ((worldGeoJson as { features?: GeoJsonFeature[] })
-    []) as GeoJsonFeature[];
+    .features ?? []) as GeoJsonFeature[];
   const options = new Map<string, RegionOption>();
 
   for (const feature of features) {
@@ -186,7 +186,7 @@ function buildFormValues(node?: Partial<NodeItem> | null): NodeEditorValues {
     ip: node.ip ?? '',
     auto_update_enabled: node.auto_update_enabled ?? false,
     geo_manual_override: node.geo_manual_override ?? false,
-    geo_region: node.geo_manual_override ? node.geo_name ?? '' : '',
+    geo_region: node.geo_manual_override ? (node.geo_name ?? '') : '',
     geo_name: node.geo_name ?? '',
     geo_latitude:
       node.geo_latitude === undefined || node.geo_latitude === null

openflare_server/web/features/nodes/utils.ts

@@ -86,7 +86,9 @@ export function getUpdateMode(node: NodeItem) {
   return { label: '手动', variant: 'info' as const };
 }
 
-export function getOpenrestyStatusVariant(status: NodeItem['openresty_status']) {
+export function getOpenrestyStatusVariant(
+  status: NodeItem['openresty_status'],
+) {
   if (status === 'healthy') {
     return 'success';
   }
@@ -178,12 +180,15 @@ export function buildNodeInstallCommand(serverUrl: string, agentToken: string) {
   ].join('\n');
 }
 
-export function buildNodeDockerInstallCommand(serverUrl: string, agentToken: string) {
+export function buildNodeDockerInstallCommand(
+  serverUrl: string,
+  agentToken: string,
+) {
   return [
     `docker run -d --name openflare-agent --restart unless-stopped \\`,
     `  -p 80:80 -p 443:443 \\`,
     `  -e OPENFLARE_SERVER_URL=${serverUrl} \\`,
     `  -e OPENFLARE_AGENT_TOKEN=${agentToken} \\`,
-    `  ghcr.io/rain-kl/openflare-agent:latest`
+    `  ghcr.io/rain-kl/openflare-agent:latest`,
   ].join('\n');
 }

openflare_server/web/features/performance/components/performance-page.tsx

@@ -1,19 +1,19 @@
 'use client';
 
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
-import {useQuery, useQueryClient} from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 
-import {EmptyState} from '@/components/feedback/empty-state';
+import { EmptyState } from '@/components/feedback/empty-state';
-import {ErrorState} from '@/components/feedback/error-state';
+import { ErrorState } from '@/components/feedback/error-state';
-import {InlineMessage} from '@/components/feedback/inline-message';
+import { InlineMessage } from '@/components/feedback/inline-message';
-import {LoadingState} from '@/components/feedback/loading-state';
+import { LoadingState } from '@/components/feedback/loading-state';
-import {PageHeader} from '@/components/layout/page-header';
+import { PageHeader } from '@/components/layout/page-header';
-import {useAuth} from '@/components/providers/auth-provider';
+import { useAuth } from '@/components/providers/auth-provider';
-import {AppCard} from '@/components/ui/app-card';
+import { AppCard } from '@/components/ui/app-card';
-import {StatusBadge} from '@/components/ui/status-badge';
+import { StatusBadge } from '@/components/ui/status-badge';
-import {getConfigVersionPreview} from '@/features/config-versions/api/config-versions';
+import { getConfigVersionPreview } from '@/features/config-versions/api/config-versions';
-import {getOptions, updateOptions} from '@/features/settings/api/settings';
+import { getOptions, updateOptions } from '@/features/settings/api/settings';
-import type {OptionItem} from '@/features/settings/types';
+import type { OptionItem } from '@/features/settings/types';
 import {
   CodeBlock,
   PrimaryButton,
@@ -171,7 +171,7 @@ function isCacheLevelsValue(value: string) {
 
 export function PerformancePage() {
   const queryClient = useQueryClient();
-    const {user} = useAuth();
+  const { user } = useAuth();
   const [activeTab, setActiveTab] = useState<PerformanceTab>('settings');
   const [feedback, setFeedback] = useState<FeedbackState | null>(null);
   const [busyKey, setBusyKey] = useState<string | null>(null);
@@ -271,7 +271,7 @@ export function PerformancePage() {
     try {
       await action();
     } catch (error) {
-            setFeedback({tone: 'danger', message: getErrorMessage(error)});
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
     } finally {
       setBusyKey(null);
     }
@@ -281,14 +281,14 @@ export function PerformancePage() {
     entries: Array<[string, string]>,
     successMessage: string,
   ) => {
-        await updateOptions(entries.map(([key, value]) => ({key, value})));
+    await updateOptions(entries.map(([key, value]) => ({ key, value })));
 
     await Promise.all([
-            queryClient.invalidateQueries({queryKey: settingsQueryKey}),
+      queryClient.invalidateQueries({ queryKey: settingsQueryKey }),
-            queryClient.invalidateQueries({queryKey: previewQueryKey}),
+      queryClient.invalidateQueries({ queryKey: previewQueryKey }),
-            queryClient.invalidateQueries({queryKey: ['config-versions']}),
+      queryClient.invalidateQueries({ queryKey: ['config-versions'] }),
     ]);
-        setFeedback({tone: 'success', message: successMessage});
+    setFeedback({ tone: 'success', message: successMessage });
   };
 
   const handleRuntimeSave = () => {
@@ -337,10 +337,7 @@ export function PerformancePage() {
             'OpenRestyWorkerProcesses',
             performanceFields.OpenRestyWorkerProcesses.trim(),
           ],
-                    [
+          ['OpenRestyResolvers', performanceFields.OpenRestyResolvers.trim()],
-                        'OpenRestyResolvers',
-                        performanceFields.OpenRestyResolvers.trim(),
-                    ],
           [
             'OpenRestyWorkerConnections',
             performanceFields.OpenRestyWorkerConnections.trim(),
@@ -576,7 +573,7 @@ export function PerformancePage() {
   }
 
   if (optionsQuery.isLoading || previewQuery.isLoading) {
-        return <LoadingState/>;
+    return <LoadingState />;
   }
 
   if (optionsQuery.isError) {
@@ -615,7 +612,7 @@ export function PerformancePage() {
       />
 
       {feedback ? (
-                <InlineMessage tone={feedback.tone} message={feedback.message}/>
+        <InlineMessage tone={feedback.tone} message={feedback.message} />
       ) : null}
 
       <div className="flex flex-wrap gap-3">
@@ -653,17 +650,15 @@ export function PerformancePage() {
       {activeTab === 'settings' ? (
         <div className="space-y-6">
           <div className="grid gap-4 md:grid-cols-3">
-                        <div
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-                            className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
               <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
                 主配置校验
               </p>
               <div className="mt-2">
-                                <StatusBadge label="发布链路受管" variant="info"/>
+                <StatusBadge label="发布链路受管" variant="info" />
               </div>
             </div>
-                        <div
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-                            className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
               <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
                 当前预览规则数
               </p>
@@ -671,8 +666,7 @@ export function PerformancePage() {
                 {preview.route_count} 条
               </p>
             </div>
-                        <div
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-                            className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
               <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
                 当前模板
               </p>
@@ -908,9 +902,7 @@ export function PerformancePage() {
                   onClick={handleProxySave}
                   disabled={busyKey === 'performance-proxy'}
                 >
-                                    {busyKey === 'performance-proxy'
+                  {busyKey === 'performance-proxy' ? '保存中...' : '保存'}
-                                        ? '保存中...'
-                                        : '保存'}
                 </PrimaryButton>
               }
             >
@@ -1052,9 +1044,7 @@ export function PerformancePage() {
                     onClick={handleGzipSave}
                     disabled={busyKey === 'performance-gzip'}
                   >
-                                        {busyKey === 'performance-gzip'
+                    {busyKey === 'performance-gzip' ? '保存中...' : '保存'}
-                                            ? '保存中...'
-                                            : '保存'}
                   </PrimaryButton>
                 }
               >
@@ -1131,8 +1121,7 @@ export function PerformancePage() {
                       onClick={handleCacheSave}
                       disabled={busyKey === 'performance-cache'}
                     >
-                                            {busyKey === 'performance-cache'
+                      {busyKey === 'performance-cache' ? '保存中...' : '保存'}
-                                                ? '保存中...' : '保存'}
                     </PrimaryButton>
                   </div>
                 }
@@ -1278,9 +1267,7 @@ export function PerformancePage() {
                   </div>
                 </div>
               </AppCard>
-
             </div>
-
           </div>
         </div>
       ) : (
@@ -1341,7 +1328,8 @@ export function PerformancePage() {
                   />
                 </div>
                 <CodeBlock
-                                    className={`${templatePanelClassName} whitespace-pre-wrap break-words`}>
+                  className={`${templatePanelClassName} break-words whitespace-pre-wrap`}
+                >
                   {preview.main_config}
                 </CodeBlock>
               </div>

openflare_server/web/features/proxy-routes/api/proxy-routes.ts

@@ -22,7 +22,10 @@ export function createProxyRoute(payload: ProxyRouteMutationPayload) {
   });
 }
 
-export function updateProxyRoute(id: number, payload: ProxyRouteMutationPayload) {
+export function updateProxyRoute(
+  id: number,
+  payload: ProxyRouteMutationPayload,
+) {
   return apiRequest<ProxyRouteItem>(`/proxy-routes/${id}/update`, {
     method: 'POST',
     body: JSON.stringify(payload),
@@ -41,5 +44,7 @@ export function getTlsCertificates() {
 
 export function matchManagedDomainCertificate(domain: string) {
   const searchParams = new URLSearchParams({ domain });
-  return apiRequest<ManagedDomainMatchResult>(`/managed-domains/match?${searchParams.toString()}`);
+  return apiRequest<ManagedDomainMatchResult>(
+    `/managed-domains/match?${searchParams.toString()}`,
+  );
 }

openflare_server/web/features/proxy-routes/components/domain-list-input.tsx

@@ -100,9 +100,7 @@ export function buildDomainRowsFromRoute(
   if (domainCertIDs.length === domains.length) {
     return domains.map((domain, index) => ({
       domain,
-      certificateId: domainCertIDs[index]
+      certificateId: domainCertIDs[index] ? String(domainCertIDs[index]) : '',
-        ? String(domainCertIDs[index])
-        : '',
     }));
   }
 
@@ -185,7 +183,9 @@ export function DomainListInput({
                   value={row.domain}
                   list={`${listId}-${index}`}
                   aria-label={`域名 ${index + 1}`}
-                  placeholder={index === 0 ? domainPlaceholder : 'www.example.com'}
+                  placeholder={
+                    index === 0 ? domainPlaceholder : 'www.example.com'
+                  }
                   onBlur={onBlur}
                   onChange={(event) => {
                     const nextRows = safeRows.slice();

openflare_server/web/features/proxy-routes/components/proxy-route-config-page.tsx

@@ -123,7 +123,10 @@ const rateLimitSchema = z
     limit_rate: z.string(),
   })
   .superRefine((value, context) => {
-    for (const field of ['limit_conn_per_server', 'limit_conn_per_ip'] as const) {
+    for (const field of [
+      'limit_conn_per_server',
+      'limit_conn_per_ip',
+    ] as const) {
       const rawValue = value[field].trim();
       if (!rawValue) {
         continue;
@@ -369,7 +372,9 @@ function DomainSettingsSection({
         <ResourceField
           label="域名列表"
           hint="每行配置一个域名。可为不同域名选择不同证书，相同证书也可以重复选择。"
-          error={form.formState.errors.domain_rows?.message as string | undefined}
+          error={
+            form.formState.errors.domain_rows?.message as string | undefined
+          }
           container="div"
         >
           <Controller
@@ -490,7 +495,10 @@ function RateLimitSection({
           error={form.formState.errors.limit_rate?.message}
           className="md:col-span-2"
         >
-          <ResourceInput placeholder="512k/1m" {...form.register('limit_rate')} />
+          <ResourceInput
+            placeholder="512k/1m"
+            {...form.register('limit_rate')}
+          />
         </ResourceField>
       </form>
     </ConfigSectionShell>
@@ -538,7 +546,9 @@ function ReverseProxySection({
         onSubmit={form.handleSubmit((values) => {
           const { urls } = parseOriginUrls(values.origin_urls_text);
           const primaryOrigin = parseOriginUrl(urls[0]);
-          const { headers } = parseCustomHeadersText(values.custom_headers_text);
+          const { headers } = parseCustomHeadersText(
+            values.custom_headers_text,
+          );
 
           onSave(
             buildPayloadFromRoute(route, {
@@ -565,7 +575,9 @@ function ReverseProxySection({
           <ResourceTextarea
             aria-label="上游地址"
             className="min-h-40"
-            placeholder={'https://origin-a.internal:443\nhttps://origin-b.internal:443'}
+            placeholder={
+              'https://origin-a.internal:443\nhttps://origin-b.internal:443'
+            }
             {...form.register('origin_urls_text')}
           />
         </ResourceField>
@@ -593,7 +605,10 @@ function ReverseProxySection({
           />
         </ResourceField>
 
-        <ResourceField label="备注" error={form.formState.errors.remark?.message}>
+        <ResourceField
+          label="备注"
+          error={form.formState.errors.remark?.message}
+        >
           <ResourceTextarea
             placeholder="例如：多活回源，优先使用上海入口"
             {...form.register('remark')}
@@ -617,7 +632,8 @@ function CacheSection({
     resolver: zodResolver(cacheSchema),
     defaultValues: {
       cache_enabled: route.cache_enabled,
-      cache_policy: (route.cache_policy || 'url') as CacheValues['cache_policy'],
+      cache_policy: (route.cache_policy ||
+        'url') as CacheValues['cache_policy'],
       cache_rules_text: route.cache_rule_list.join('\n'),
     },
   });
@@ -625,7 +641,8 @@ function CacheSection({
   useEffect(() => {
     form.reset({
       cache_enabled: route.cache_enabled,
-      cache_policy: (route.cache_policy || 'url') as CacheValues['cache_policy'],
+      cache_policy: (route.cache_policy ||
+        'url') as CacheValues['cache_policy'],
       cache_rules_text: route.cache_rule_list.join('\n'),
     });
   }, [form, route]);
@@ -650,7 +667,9 @@ function CacheSection({
               cache_enabled: values.cache_enabled,
               cache_policy: values.cache_enabled ? values.cache_policy : 'url',
               cache_rules:
-                values.cache_enabled && values.cache_policy !== 'url' ? rules : [],
+                values.cache_enabled && values.cache_policy !== 'url'
+                  ? rules
+                  : [],
             }),
             { message: '缓存设置已保存。' },
           );
@@ -770,7 +789,13 @@ type PowValues = z.infer<typeof powSchema>;
 
 function buildPowListFromConfig(
   list:
-    | { ips?: string[]; ip_cidrs?: string[]; paths?: string[]; path_regexes?: string[]; user_agents?: string[] }
+    | {
+        ips?: string[];
+        ip_cidrs?: string[];
+        paths?: string[];
+        path_regexes?: string[];
+        user_agents?: string[];
+      }
     | undefined,
 ): PowListValues {
   return {
@@ -923,7 +948,7 @@ function PowSection({
 
         <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
           <fieldset disabled={!watchedEnabled} className="space-y-4">
-            <legend className="text-sm font-medium text-[var(--foreground-primary)] mb-2">
+            <legend className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">
               白名单（匹配的请求跳过 PoW）
             </legend>
             <ResourceField label="IP" hint="每行一个 IP 地址">
@@ -964,7 +989,7 @@ function PowSection({
           </fieldset>
 
           <fieldset disabled={!watchedEnabled} className="space-y-4">
-            <legend className="text-sm font-medium text-[var(--foreground-primary)] mb-2">
+            <legend className="mb-2 text-sm font-medium text-[var(--foreground-primary)]">
               黑名单（匹配的请求必须 PoW）
             </legend>
             <ResourceField label="IP" hint="每行一个 IP 地址">
@@ -1178,7 +1203,9 @@ export function ProxyRouteConfigPage({
       setFeedback({ tone: 'success', message: context.message });
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: ['proxy-routes'] }),
-        queryClient.invalidateQueries({ queryKey: ['config-versions', 'diff'] }),
+        queryClient.invalidateQueries({
+          queryKey: ['config-versions', 'diff'],
+        }),
       ]);
     },
     onError: (error) => {

openflare_server/web/features/proxy-routes/components/proxy-route-create-drawer.tsx

@@ -156,7 +156,9 @@ export function ProxyRouteCreateDrawer({
         .map((item) => item.domain.trim().toLowerCase())
         .filter(Boolean);
       const domainCertIDs = buildDomainCertificateIDs(values.domain_rows);
-      const selectedCertIDs = normalizeSelectedCertificateIDs(values.domain_rows);
+      const selectedCertIDs = normalizeSelectedCertificateIDs(
+        values.domain_rows,
+      );
       const { urls } = parseOriginUrls(values.origin_urls_text);
       const primaryOrigin = parseOriginUrl(urls[0]);
 
@@ -182,7 +184,8 @@ export function ProxyRouteCreateDrawer({
         cert_id: selectedCertIDs[0] ?? null,
         cert_ids: selectedCertIDs,
         domain_cert_ids: domainCertIDs,
-        redirect_http: selectedCertIDs.length > 0 ? values.redirect_http : false,
+        redirect_http:
+          selectedCertIDs.length > 0 ? values.redirect_http : false,
         limit_conn_per_server: 0,
         limit_conn_per_ip: 0,
         limit_rate: '',
@@ -248,7 +251,9 @@ export function ProxyRouteCreateDrawer({
         <ResourceField
           label="域名列表"
           hint="每行配置一个域名，可按需为该行选择证书。保存时会自动汇总站点证书集合。"
-          error={form.formState.errors.domain_rows?.message as string | undefined}
+          error={
+            form.formState.errors.domain_rows?.message as string | undefined
+          }
           container="div"
         >
           <Controller
@@ -287,7 +292,9 @@ export function ProxyRouteCreateDrawer({
         >
           <ResourceTextarea
             aria-label="上游地址"
-            placeholder={'https://origin-a.internal:443\nhttps://origin-b.internal:443'}
+            placeholder={
+              'https://origin-a.internal:443\nhttps://origin-b.internal:443'
+            }
             {...form.register('origin_urls_text')}
           />
         </ResourceField>

openflare_server/web/features/proxy-routes/components/proxy-routes-page.tsx

@@ -87,7 +87,9 @@ export function ProxyRoutesPage() {
       setFeedback({ tone: 'success', message: '网站已删除。' });
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: ['proxy-routes'] }),
-        queryClient.invalidateQueries({ queryKey: ['config-versions', 'diff'] }),
+        queryClient.invalidateQueries({
+          queryKey: ['config-versions', 'diff'],
+        }),
       ]);
     },
     onError: (error) => {
@@ -104,7 +106,9 @@ export function ProxyRoutesPage() {
       });
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: ['config-versions'] }),
-        queryClient.invalidateQueries({ queryKey: ['config-versions', 'diff'] }),
+        queryClient.invalidateQueries({
+          queryKey: ['config-versions', 'diff'],
+        }),
       ]);
     },
     onError: (error) => {
@@ -135,7 +139,10 @@ export function ProxyRoutesPage() {
   }, [keyword, routes]);
 
   const diff = diffQuery.data;
-  const totalDomains = routes.reduce((sum, route) => sum + route.domain_count, 0);
+  const totalDomains = routes.reduce(
+    (sum, route) => sum + route.domain_count,
+    0,
+  );
   const enabledCount = routes.filter((route) => route.enabled).length;
 
   const handleDelete = (route: ProxyRouteItem) => {
@@ -243,11 +250,11 @@ export function ProxyRoutesPage() {
             <div className="space-y-3">
               <StatusBadge
                 label={
-                  diff && hasConfigChanges(diff) ? '有待发布变更' : '已与线上一致'
+                  diff && hasConfigChanges(diff)
-                }
+                    ? '有待发布变更'
-                variant={
+                    : '已与线上一致'
-                  diff && hasConfigChanges(diff) ? 'warning' : 'success'
                 }
+                variant={diff && hasConfigChanges(diff) ? 'warning' : 'success'}
               />
               <p className="text-sm text-[var(--foreground-secondary)]">
                 {diff
@@ -266,9 +273,7 @@ export function ProxyRoutesPage() {
           </AppCard>
         </div>
 
-        <AppCard
+        <AppCard title="规则列表">
-          title="规则列表"
-        >
           <div className="space-y-4">
             <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
               <div className="max-w-xl">
@@ -356,7 +361,7 @@ export function ProxyRoutesPage() {
 
                       <div className="grid gap-3 md:grid-cols-2">
                         <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-3">
-                          <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                          <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                             域名列表
                           </p>
                           <p className="mt-2 text-sm text-[var(--foreground-primary)]">
@@ -365,7 +370,7 @@ export function ProxyRoutesPage() {
                         </div>
 
                         <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-3">
-                          <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                          <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                             上游摘要
                           </p>
                           <p className="mt-2 text-sm text-[var(--foreground-primary)]">
@@ -393,7 +398,9 @@ export function ProxyRoutesPage() {
         onCreated={async (route) => {
           await Promise.all([
             queryClient.invalidateQueries({ queryKey: ['proxy-routes'] }),
-            queryClient.invalidateQueries({ queryKey: ['config-versions', 'diff'] }),
+            queryClient.invalidateQueries({
+              queryKey: ['config-versions', 'diff'],
+            }),
           ]);
           router.push(`/proxy-route/detail?id=${route.id}&section=domains`);
         }}

openflare_server/web/features/settings/components/auth-source-modal.tsx

@@ -386,7 +386,7 @@ export function AuthSourceModal({
                 }
               />
             </ResourceField>
-            <div className="md:col-span-2 rounded-2xl border border-[var(--status-info-border)] bg-[var(--status-info-soft)] px-4 py-3 text-sm leading-6 text-[var(--status-info-foreground)]">
+            <div className="rounded-2xl border border-[var(--status-info-border)] bg-[var(--status-info-soft)] px-4 py-3 text-sm leading-6 text-[var(--status-info-foreground)] md:col-span-2">
               第三方平台的 Redirect URI / Callback URL 请填写：
               <span className="font-medium">
                 {' '}

openflare_server/web/features/settings/components/settings-page.tsx

@@ -927,7 +927,9 @@ export function SettingsPage() {
                             ) : (
                               <PrimaryButton
                                 type="button"
-                                onClick={() => handleBindAuthSource(source.name)}
+                                onClick={() =>
+                                  handleBindAuthSource(source.name)
+                                }
                                 disabled={
                                   busyKey === `auth-source-bind-${source.name}`
                                 }
@@ -1591,7 +1593,6 @@ export function SettingsPage() {
                 }
                 disabled={busyKey === 'toggle-EmailVerificationEnabled'}
               />
-
             </div>
             <div className="mt-5 text-sm text-[var(--foreground-secondary)]">
               当前已配置 {authSourcesQuery.data?.length ?? 0} 个认证源。

openflare_server/web/features/shared/components/module-page-skeleton.tsx

@@ -14,12 +14,12 @@ export function ModulePageSkeleton({
   description,
 }: ModulePageSkeletonProps) {
   return (
-    <div className='space-y-6'>
+    <div className="space-y-6">
       <PageHeader title={title} description={description} />
 
       <FeaturePlaceholder
         title={`${title} 页面骨架`}
-        description='当前阶段先完成页面入口、统一头部和反馈组件接线，真实列表、表单与联动能力将在后续业务迁移阶段接入。'
+        description="当前阶段先完成页面入口、统一头部和反馈组件接线，真实列表、表单与联动能力将在后续业务迁移阶段接入。"
         milestones={[
           '路由入口已创建，可纳入统一导航。',
           '页面标题区、说明区与内容容器已统一。',
@@ -27,10 +27,16 @@ export function ModulePageSkeleton({
         ]}
       />
 
-      <div className='grid gap-4 xl:grid-cols-3'>
+      <div className="grid gap-4 xl:grid-cols-3">
         <LoadingState />
-        <EmptyState title='空态骨架' description='后续接入查询后，可将资源为空时的提示统一沉淀为此组件。' />
+        <EmptyState
-        <ErrorState title='错误态骨架' description='后续请求失败、鉴权失效与重试提示可在此基础上扩展。' />
+          title="空态骨架"
+          description="后续接入查询后，可将资源为空时的提示统一沉淀为此组件。"
+        />
+        <ErrorState
+          title="错误态骨架"
+          description="后续请求失败、鉴权失效与重试提示可在此基础上扩展。"
+        />
       </div>
     </div>
   );

openflare_server/web/features/shared/components/resource-primitives.tsx

@@ -176,7 +176,7 @@ export function ToggleField({
   onChange,
 }: ToggleFieldProps) {
   return (
-    <label className="flex self-start cursor-pointer items-start gap-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
+    <label className="flex cursor-pointer items-start gap-3 self-start rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
       <input
         type="checkbox"
         checked={checked}

openflare_server/web/features/update/components/version-upgrade-modal.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import {marked} from 'marked';
+import { marked } from 'marked';
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 
-import {EmptyState} from '@/components/feedback/empty-state';
+import { EmptyState } from '@/components/feedback/empty-state';
-import {ErrorState} from '@/components/feedback/error-state';
+import { ErrorState } from '@/components/feedback/error-state';
-import {LoadingState} from '@/components/feedback/loading-state';
+import { LoadingState } from '@/components/feedback/loading-state';
-import {AppCard} from '@/components/ui/app-card';
+import { AppCard } from '@/components/ui/app-card';
-import {AppModal} from '@/components/ui/app-modal';
+import { AppModal } from '@/components/ui/app-modal';
-import {StatusBadge} from '@/components/ui/status-badge';
+import { StatusBadge } from '@/components/ui/status-badge';
 import type {
   LatestReleaseInfo,
   ReleaseChannel,
@@ -20,7 +20,7 @@ import {
   ResourceInput,
   SecondaryButton,
 } from '@/features/shared/components/resource-primitives';
-import {formatDateTime, formatRelativeTime} from '@/lib/utils/date';
+import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
 
 interface VersionUpgradeModalProps {
   isOpen: boolean;
@@ -48,15 +48,15 @@ interface VersionUpgradeModalProps {
 
 function getUpgradeBadge(release: LatestReleaseInfo | null | undefined) {
   if (!release) {
-        return {label: '未检查', variant: 'info' as const};
+    return { label: '未检查', variant: 'info' as const };
   }
   if (release.in_progress) {
-        return {label: '升级中', variant: 'warning' as const};
+    return { label: '升级中', variant: 'warning' as const };
   }
   if (release.has_update) {
-        return {label: '可升级', variant: 'warning' as const};
+    return { label: '可升级', variant: 'warning' as const };
   }
-    return {label: '最新', variant: 'success' as const};
+  return { label: '最新', variant: 'success' as const };
 }
 
 function formatLogTimestamp(value: string) {
@@ -103,13 +103,11 @@ export function VersionUpgradeModal({
   onUpgrade,
   onUploadBinary,
   onConfirmManualUpgrade,
-                                    }: VersionUpgradeModalProps) {
+}: VersionUpgradeModalProps) {
   const upgradeBadge = getUpgradeBadge(release);
   const [selectedBinary, setSelectedBinary] = useState<File | null>(null);
   const uploadPhaseLabel =
-        uploadProgress >= 100
+    uploadProgress >= 100 ? '已上传，正在服务端校验版本...' : '上传中...';
-            ? '已上传，正在服务端校验版本...'
-            : '上传中...';
   const selectedChannelLabel =
     selectedChannel === 'preview' ? '预览版' : '正式版';
   const toggleChannel = () => {
@@ -137,7 +135,6 @@ export function VersionUpgradeModal({
     >
       <div className="space-y-6">
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-2">
-
           <AppCard title="服务端版本">
             <div className="flex flex-wrap items-center gap-3">
               <p className="text-sm font-medium text-[var(--foreground-primary)]">
@@ -165,7 +162,9 @@ export function VersionUpgradeModal({
                           selectedChannel === 'preview' ? 'warning' : 'info'
                         }
                         onClick={toggleChannel}
-                                            disabled={isChecking || isUpgrading || isUploadingBinary}
+                        disabled={
+                          isChecking || isUpgrading || isUploadingBinary
+                        }
                       />
                     </div>
                   </div>
@@ -183,9 +182,9 @@ export function VersionUpgradeModal({
           </AppCard>
         </div>
 
-                {isLoading ? <LoadingState/> : null}
+        {isLoading ? <LoadingState /> : null}
         {!isLoading && releaseErrorMessage ? (
-                    <ErrorState title="版本检查失败" description={releaseErrorMessage}/>
+          <ErrorState title="版本检查失败" description={releaseErrorMessage} />
         ) : null}
         {!isLoading && !releaseErrorMessage && !release ? (
           <EmptyState
@@ -209,9 +208,9 @@ export function VersionUpgradeModal({
                   variant={release.has_update ? 'warning' : 'success'}
                 />
                 {release.prerelease ? (
-                                    <StatusBadge label="Preview 发布" variant="warning"/>
+                  <StatusBadge label="Preview 发布" variant="warning" />
                 ) : (
-                                    <StatusBadge label="正式发布" variant="info"/>
+                  <StatusBadge label="正式发布" variant="info" />
                 )}
                 {!release.upgrade_supported ? (
                   <StatusBadge
@@ -220,7 +219,7 @@ export function VersionUpgradeModal({
                   />
                 ) : null}
                 {release.in_progress ? (
-                                    <StatusBadge label="升级任务执行中" variant="warning"/>
+                  <StatusBadge label="升级任务执行中" variant="warning" />
                 ) : null}
               </div>
               <div
@@ -241,7 +240,6 @@ export function VersionUpgradeModal({
               </a>
               {canUpgrade ? (
                 <div className="flex justify-end">
-
                   <PrimaryButton
                     type="button"
                     onClick={onUpgrade}
@@ -269,9 +267,7 @@ export function VersionUpgradeModal({
         ) : null}
 
         {release ? (
-                    <AppCard
+          <AppCard title="升级日志">
-                        title="升级日志"
-                    >
             {upgradeLogs.length > 0 ? (
               <div className="space-y-3">
                 <div className="flex flex-wrap items-center gap-3">
@@ -310,7 +306,7 @@ export function VersionUpgradeModal({
                         {formatLogLevel(log.level)}
                       </span>
                       <span className="text-slate-500"> | </span>
-                                            <span className="whitespace-pre-wrap break-all text-slate-100">
+                      <span className="break-all whitespace-pre-wrap text-slate-100">
                         {log.message}
                       </span>
                     </pre>
@@ -318,17 +314,13 @@ export function VersionUpgradeModal({
                 </div>
               </div>
             ) : (
-                            <EmptyState
+              <EmptyState title="暂无升级日志" />
-                                title="暂无升级日志"
-                            />
             )}
           </AppCard>
         ) : null}
 
         {canUpgrade ? (
-                    <AppCard
+          <AppCard title="手动升级">
-                        title="手动升级"
-                    >
             <div className="space-y-4">
               <ResourceField
                 label="服务端二进制"
@@ -390,7 +382,7 @@ export function VersionUpgradeModal({
                   <div className="h-2 w-full overflow-hidden rounded-full bg-[var(--border-default)]">
                     <div
                       className="h-full rounded-full bg-[var(--brand-primary)] transition-all duration-200"
-                                            style={{width: `${uploadProgress}%`}}
+                      style={{ width: `${uploadProgress}%` }}
                     />
                   </div>
                 </div>
@@ -404,15 +396,13 @@ export function VersionUpgradeModal({
               ) : null}
 
               {!manualErrorMessage && manualStatusMessage ? (
-                                <div
+                <div className="rounded-2xl border border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] px-4 py-3 text-sm text-[var(--status-warning-foreground)]">
-                                    className="rounded-2xl border border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] px-4 py-3 text-sm text-[var(--status-warning-foreground)]">
                   {manualStatusMessage}
                 </div>
               ) : null}
 
               {uploadedBinary ? (
-                                <div
+                <div className="space-y-4 rounded-3xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-4">
-                                    className="space-y-4 rounded-3xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-4">
                   <div className="flex flex-wrap items-center gap-3">
                     <StatusBadge
                       label={
@@ -476,9 +466,7 @@ export function VersionUpgradeModal({
                   </p>
                 </div>
               ) : (
-                                <EmptyState
+                <EmptyState title="尚未上传升级包" />
-                                    title="尚未上传升级包"
-                                />
               )}
             </div>
           </AppCard>

openflare_server/web/features/users/api/users.ts

@@ -12,7 +12,9 @@ export function getUsers(page: number) {
 }
 
 export function searchUsers(keyword: string) {
-  return apiRequest<UserItem[]>(`/user/search?keyword=${encodeURIComponent(keyword)}`);
+  return apiRequest<UserItem[]>(
+    `/user/search?keyword=${encodeURIComponent(keyword)}`,
+  );
 }
 
 export function getUser(id: number) {

openflare_server/web/features/users/components/users-page.tsx

@@ -40,12 +40,19 @@ const ITEMS_PER_PAGE = 10;
 const usersListQueryKey = ['users', 'list'] as const;
 
 const userSchema = z.object({
-  username: z.string().trim().min(1, '请输入用户名').max(12, '用户名不能超过 12 个字符'),
+  username: z
+    .string()
+    .trim()
+    .min(1, '请输入用户名')
+    .max(12, '用户名不能超过 12 个字符'),
   display_name: z.string().trim().max(20, '显示名称不能超过 20 个字符'),
   password: z
     .string()
     .max(20, '密码不能超过 20 个字符')
-    .refine((value) => value.length === 0 || value.length >= 8, '密码至少需要 8 个字符'),
+    .refine(
+      (value) => value.length === 0 || value.length >= 8,
+      '密码至少需要 8 个字符',
+    ),
 });
 
 type UserFormValues = z.infer<typeof userSchema>;
@@ -171,7 +178,13 @@ export function UsersPage() {
   });
 
   const manageMutation = useMutation({
-    mutationFn: async ({ username, action }: { username: string; action: ManageUserAction }) => {
+    mutationFn: async ({
+      username,
+      action,
+    }: {
+      username: string;
+      action: ManageUserAction;
+    }) => {
       await manageUser(username, action);
       return action;
     },
@@ -240,11 +253,17 @@ export function UsersPage() {
       enable: '启用',
     }[action];
 
-    if (action === 'delete' && !window.confirm(`确认删除用户“${targetUser.username}”吗？`)) {
+    if (
+      action === 'delete' &&
+      !window.confirm(`确认删除用户“${targetUser.username}”吗？`)
+    ) {
       return;
     }
 
-    if ((action === 'disable' || action === 'enable') && !window.confirm(`确认${actionText}用户“${targetUser.username}”吗？`)) {
+    if (
+      (action === 'disable' || action === 'enable') &&
+      !window.confirm(`确认${actionText}用户“${targetUser.username}”吗？`)
+    ) {
       return;
     }
 
@@ -259,14 +278,14 @@ export function UsersPage() {
 
   if (!isAdmin) {
     return (
-      <div className='space-y-6'>
+      <div className="space-y-6">
         <PageHeader
-          title='用户管理'
+          title="用户管理"
-          description='阶段 4 已迁移用户管理页面，但当前账户没有管理员权限。'
+          description="阶段 4 已迁移用户管理页面，但当前账户没有管理员权限。"
         />
         <EmptyState
-          title='权限不足'
+          title="权限不足"
-          description='用户列表、编辑与账户管理动作仅对管理员开放，请使用管理员账号登录后继续。'
+          description="用户列表、编辑与账户管理动作仅对管理员开放，请使用管理员账号登录后继续。"
         />
       </div>
     );
@@ -274,60 +293,72 @@ export function UsersPage() {
 
   return (
     <>
-    <div className='space-y-6'>
+      <div className="space-y-6">
         <PageHeader
-        title='用户管理'
+          title="用户管理"
-        description='支持搜索、分页、创建、编辑以及启用、封禁、权限调整等常见账户管理动作。'
+          description="支持搜索、分页、创建、编辑以及启用、封禁、权限调整等常见账户管理动作。"
           action={
-          <PrimaryButton type='button' onClick={handleCreate}>
+            <PrimaryButton type="button" onClick={handleCreate}>
               新建用户
             </PrimaryButton>
           }
         />
 
-      {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
 
         <AppCard
-        title='用户列表'
+          title="用户列表"
           action={
-          <div className='flex flex-wrap gap-2'>
+            <div className="flex flex-wrap gap-2">
               <SecondaryButton
-              type='button'
+                type="button"
-              onClick={() => void queryClient.invalidateQueries({ queryKey: usersListQueryKey })}
+                onClick={() =>
+                  void queryClient.invalidateQueries({
+                    queryKey: usersListQueryKey,
+                  })
+                }
               >
                 刷新
               </SecondaryButton>
             </div>
           }
         >
-        <div className='space-y-5'>
+          <div className="space-y-5">
-          <div className='flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between'>
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-            <div className='flex w-full flex-col gap-3 md:flex-row'>
+              <div className="flex w-full flex-col gap-3 md:flex-row">
                 <ResourceInput
                   value={searchInput}
                   onChange={(event) => setSearchInput(event.target.value)}
-                placeholder='搜索用户 ID、用户名、显示名称或邮箱地址'
+                  placeholder="搜索用户 ID、用户名、显示名称或邮箱地址"
-                className='md:max-w-xl'
+                  className="md:max-w-xl"
                 />
-              <div className='flex flex-wrap gap-2'>
+                <div className="flex flex-wrap gap-2">
-                <PrimaryButton type='button' onClick={handleSearchSubmit}>
+                  <PrimaryButton type="button" onClick={handleSearchSubmit}>
                     搜索
                   </PrimaryButton>
-                <SecondaryButton type='button' onClick={handleResetSearch}>
+                  <SecondaryButton type="button" onClick={handleResetSearch}>
                     清空
                   </SecondaryButton>
                 </div>
               </div>
 
               {searchKeyword.length === 0 ? (
-              <div className='flex flex-wrap gap-2'>
+                <div className="flex flex-wrap gap-2">
-                <SecondaryButton type='button' onClick={() => setPage((value) => Math.max(value - 1, 0))} disabled={page === 0 || activeQuery.isLoading}>
+                  <SecondaryButton
+                    type="button"
+                    onClick={() => setPage((value) => Math.max(value - 1, 0))}
+                    disabled={page === 0 || activeQuery.isLoading}
+                  >
                     上一页
                   </SecondaryButton>
                   <SecondaryButton
-                  type='button'
+                    type="button"
                     onClick={() => setPage((value) => value + 1)}
-                  disabled={activeQuery.isLoading || users.length < ITEMS_PER_PAGE}
+                    disabled={
+                      activeQuery.isLoading || users.length < ITEMS_PER_PAGE
+                    }
                   >
                     下一页
                   </SecondaryButton>
@@ -338,73 +369,119 @@ export function UsersPage() {
             {activeQuery.isLoading ? (
               <LoadingState />
             ) : activeQuery.isError ? (
-            <ErrorState title='用户列表加载失败' description={getErrorMessage(activeQuery.error)} />
+              <ErrorState
+                title="用户列表加载失败"
+                description={getErrorMessage(activeQuery.error)}
+              />
             ) : users.length === 0 ? (
-            <EmptyState title='暂无用户' description='当前条件下没有可展示的用户记录。' />
+              <EmptyState
+                title="暂无用户"
+                description="当前条件下没有可展示的用户记录。"
+              />
             ) : (
-            <div className='overflow-x-auto'>
+              <div className="overflow-x-auto">
-              <table className='min-w-full divide-y divide-[var(--border-default)] text-left text-sm'>
+                <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
                   <thead>
-                  <tr className='text-[var(--foreground-secondary)]'>
+                    <tr className="text-[var(--foreground-secondary)]">
-                    <th className='px-3 py-3 font-medium'>用户</th>
+                      <th className="px-3 py-3 font-medium">用户</th>
-                    <th className='px-3 py-3 font-medium'>邮箱</th>
+                      <th className="px-3 py-3 font-medium">邮箱</th>
-                    <th className='px-3 py-3 font-medium'>角色</th>
+                      <th className="px-3 py-3 font-medium">角色</th>
-                    <th className='px-3 py-3 font-medium'>状态</th>
+                      <th className="px-3 py-3 font-medium">状态</th>
-                    <th className='px-3 py-3 font-medium'>操作</th>
+                      <th className="px-3 py-3 font-medium">操作</th>
                     </tr>
                   </thead>
-                <tbody className='divide-y divide-[var(--border-default)]'>
+                  <tbody className="divide-y divide-[var(--border-default)]">
                     {users.map((targetUser) => {
                       const roleMeta = getRoleMeta(targetUser.role);
                       const statusMeta = getStatusMeta(targetUser.status);
-                    const canManage = (currentUser?.role ?? 0) > targetUser.role;
+                      const canManage =
+                        (currentUser?.role ?? 0) > targetUser.role;
 
                       return (
-                      <tr key={targetUser.id} className='align-top'>
+                        <tr key={targetUser.id} className="align-top">
-                        <td className='px-3 py-4'>
+                          <td className="px-3 py-4">
-                          <div className='space-y-1'>
+                            <div className="space-y-1">
-                            <p className='font-medium text-[var(--foreground-primary)]'>{targetUser.username}</p>
+                              <p className="font-medium text-[var(--foreground-primary)]">
-                            <p className='text-xs text-[var(--foreground-secondary)]'>
+                                {targetUser.username}
+                              </p>
+                              <p className="text-xs text-[var(--foreground-secondary)]">
                                 显示名称：{targetUser.display_name || '未设置'}
                               </p>
-                            <p className='text-xs text-[var(--foreground-secondary)]'>ID：{targetUser.id}</p>
+                              <p className="text-xs text-[var(--foreground-secondary)]">
+                                ID：{targetUser.id}
+                              </p>
                             </div>
                           </td>
-                        <td className='px-3 py-4 text-[var(--foreground-secondary)]'>
+                          <td className="px-3 py-4 text-[var(--foreground-secondary)]">
                             {targetUser.email || '未绑定'}
                           </td>
-                        <td className='px-3 py-4'>
+                          <td className="px-3 py-4">
-                          <StatusBadge label={roleMeta.label} variant={roleMeta.variant} />
+                            <StatusBadge
+                              label={roleMeta.label}
+                              variant={roleMeta.variant}
+                            />
                           </td>
-                        <td className='px-3 py-4'>
+                          <td className="px-3 py-4">
-                          <StatusBadge label={statusMeta.label} variant={statusMeta.variant} />
+                            <StatusBadge
+                              label={statusMeta.label}
+                              variant={statusMeta.variant}
+                            />
                           </td>
-                        <td className='px-3 py-4'>
+                          <td className="px-3 py-4">
-                          <div className='flex flex-wrap gap-2'>
+                            <div className="flex flex-wrap gap-2">
-                            <SecondaryButton type='button' onClick={() => handleEdit(targetUser)} className='px-3 py-2 text-xs' disabled={!canManage}>
+                              <SecondaryButton
+                                type="button"
+                                onClick={() => handleEdit(targetUser)}
+                                className="px-3 py-2 text-xs"
+                                disabled={!canManage}
+                              >
                                 编辑
                               </SecondaryButton>
                               <SecondaryButton
-                              type='button'
+                                type="button"
-                              onClick={() => handleManage(targetUser, targetUser.status === 1 ? 'disable' : 'enable')}
+                                onClick={() =>
-                              className='px-3 py-2 text-xs'
+                                  handleManage(
-                              disabled={!canManage || manageMutation.isPending}
+                                    targetUser,
+                                    targetUser.status === 1
+                                      ? 'disable'
+                                      : 'enable',
+                                  )
+                                }
+                                className="px-3 py-2 text-xs"
+                                disabled={
+                                  !canManage || manageMutation.isPending
+                                }
                               >
                                 {targetUser.status === 1 ? '禁用' : '启用'}
                               </SecondaryButton>
                               <SecondaryButton
-                              type='button'
+                                type="button"
-                              onClick={() => handleManage(targetUser, targetUser.role >= 10 ? 'demote' : 'promote')}
+                                onClick={() =>
-                              className='px-3 py-2 text-xs'
+                                  handleManage(
-                              disabled={!canManage || manageMutation.isPending || (!isRoot && targetUser.role < 10)}
+                                    targetUser,
+                                    targetUser.role >= 10
+                                      ? 'demote'
+                                      : 'promote',
+                                  )
+                                }
+                                className="px-3 py-2 text-xs"
+                                disabled={
+                                  !canManage ||
+                                  manageMutation.isPending ||
+                                  (!isRoot && targetUser.role < 10)
+                                }
                               >
                                 {targetUser.role >= 10 ? '降级' : '提升'}
                               </SecondaryButton>
                               <DangerButton
-                              type='button'
+                                type="button"
-                              onClick={() => handleManage(targetUser, 'delete')}
+                                onClick={() =>
-                              className='px-3 py-2 text-xs'
+                                  handleManage(targetUser, 'delete')
-                              disabled={!canManage || manageMutation.isPending}
+                                }
+                                className="px-3 py-2 text-xs"
+                                disabled={
+                                  !canManage || manageMutation.isPending
+                                }
                               >
                                 删除
                               </DangerButton>
@@ -424,14 +501,30 @@ export function UsersPage() {
         isOpen={isEditorOpen}
         onClose={handleResetForm}
         title={editingUserId ? '编辑用户' : '创建新用户'}
-      description={editingUserId ? '可更新用户名、显示名称与密码。留空密码表示不修改。' : '新建用户默认创建为普通用户。'}
+        description={
+          editingUserId
+            ? '可更新用户名、显示名称与密码。留空密码表示不修改。'
+            : '新建用户默认创建为普通用户。'
+        }
         footer={
-        <div className='flex flex-wrap justify-end gap-3'>
+          <div className="flex flex-wrap justify-end gap-3">
-          <SecondaryButton type='button' onClick={handleResetForm} disabled={saveMutation.isPending}>
+            <SecondaryButton
+              type="button"
+              onClick={handleResetForm}
+              disabled={saveMutation.isPending}
+            >
               取消
             </SecondaryButton>
-          <PrimaryButton type='submit' form='user-editor-form' disabled={saveMutation.isPending}>
+            <PrimaryButton
-            {saveMutation.isPending ? '保存中...' : editingUserId ? '保存修改' : '创建用户'}
+              type="submit"
+              form="user-editor-form"
+              disabled={saveMutation.isPending}
+            >
+              {saveMutation.isPending
+                ? '保存中...'
+                : editingUserId
+                  ? '保存修改'
+                  : '创建用户'}
             </PrimaryButton>
           </div>
         }
@@ -439,39 +532,70 @@ export function UsersPage() {
         {editingUserId && editingUserQuery.isLoading ? (
           <LoadingState />
         ) : editingUserId && editingUserQuery.isError ? (
-        <ErrorState title='用户详情加载失败' description={getErrorMessage(editingUserQuery.error)} />
+          <ErrorState
+            title="用户详情加载失败"
+            description={getErrorMessage(editingUserQuery.error)}
+          />
         ) : (
-        <form id='user-editor-form' className='space-y-5' onSubmit={handleSubmit}>
+          <form
-          <ResourceField label='用户名' error={form.formState.errors.username?.message}>
+            id="user-editor-form"
-            <ResourceInput placeholder='请输入用户名' {...form.register('username')} />
+            className="space-y-5"
+            onSubmit={handleSubmit}
+          >
+            <ResourceField
+              label="用户名"
+              error={form.formState.errors.username?.message}
+            >
+              <ResourceInput
+                placeholder="请输入用户名"
+                {...form.register('username')}
+              />
             </ResourceField>
 
-          <ResourceField label='显示名称' error={form.formState.errors.display_name?.message}>
+            <ResourceField
-            <ResourceInput placeholder='请输入显示名称' {...form.register('display_name')} />
+              label="显示名称"
+              error={form.formState.errors.display_name?.message}
+            >
+              <ResourceInput
+                placeholder="请输入显示名称"
+                {...form.register('display_name')}
+              />
             </ResourceField>
 
             <ResourceField
               label={editingUserId ? '新密码' : '密码'}
-            hint={editingUserId ? '留空表示保持原密码不变。' : '密码长度需为 8 到 20 个字符。'}
+              hint={
+                editingUserId
+                  ? '留空表示保持原密码不变。'
+                  : '密码长度需为 8 到 20 个字符。'
+              }
               error={form.formState.errors.password?.message}
             >
-            <ResourceInput type='password' placeholder='请输入密码' {...form.register('password')} />
+              <ResourceInput
+                type="password"
+                placeholder="请输入密码"
+                {...form.register('password')}
+              />
             </ResourceField>
 
             {editingUserId && editingUserQuery.data ? (
-            <div className='grid gap-4 md:grid-cols-2'>
+              <div className="grid gap-4 md:grid-cols-2">
-              <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-                <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>绑定邮箱</p>
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
-                <p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
+                    绑定邮箱
+                  </p>
+                  <p className="mt-2 text-sm break-all text-[var(--foreground-primary)]">
                     {editingUserQuery.data.email || '未绑定'}
                   </p>
                 </div>
-              <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-                <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>第三方账号</p>
+                  <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
-                <p className='mt-2 text-sm text-[var(--foreground-primary)]'>
+                    第三方账号
+                  </p>
+                  <p className="mt-2 text-sm text-[var(--foreground-primary)]">
                     GitHub：{editingUserQuery.data.github_id || '未绑定'}
                   </p>
-                <p className='mt-1 text-sm text-[var(--foreground-primary)]'>
+                  <p className="mt-1 text-sm text-[var(--foreground-primary)]">
                     微信：{editingUserQuery.data.wechat_id || '未绑定'}
                   </p>
                 </div>

openflare_server/web/features/users/types.ts

@@ -16,7 +16,12 @@ export interface UserMutationPayload {
   password: string;
 }
 
-export type ManageUserAction = 'promote' | 'demote' | 'delete' | 'disable' | 'enable';
+export type ManageUserAction =
+  | 'promote'
+  | 'demote'
+  | 'delete'
+  | 'disable'
+  | 'enable';
 
 export interface ManageUserResult {
   role: number;

openflare_server/web/features/waf/components/waf-page.tsx

@@ -1,20 +1,30 @@
 'use client';
 
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import type {ReactNode} from 'react';
+import type { ReactNode } from 'react';
-import {useEffect, useMemo, useState} from 'react';
+import { useEffect, useMemo, useState } from 'react';
-import {Check, Globe2, ListFilter, type LucideIcon, Plus, Save, Search, ShieldCheck, Trash2,} from 'lucide-react';
+import {
+  Check,
+  Globe2,
+  ListFilter,
+  type LucideIcon,
+  Plus,
+  Save,
+  Search,
+  ShieldCheck,
+  Trash2,
+} from 'lucide-react';
 
-import {EmptyState} from '@/components/feedback/empty-state';
+import { EmptyState } from '@/components/feedback/empty-state';
-import {ErrorState} from '@/components/feedback/error-state';
+import { ErrorState } from '@/components/feedback/error-state';
-import {InlineMessage} from '@/components/feedback/inline-message';
+import { InlineMessage } from '@/components/feedback/inline-message';
-import {LoadingState} from '@/components/feedback/loading-state';
+import { LoadingState } from '@/components/feedback/loading-state';
-import {PageHeader} from '@/components/layout/page-header';
+import { PageHeader } from '@/components/layout/page-header';
-import {AppCard} from '@/components/ui/app-card';
+import { AppCard } from '@/components/ui/app-card';
-import {AppModal} from '@/components/ui/app-modal';
+import { AppModal } from '@/components/ui/app-modal';
-import {Drawer} from '@/components/ui/drawer';
+import { Drawer } from '@/components/ui/drawer';
-import {getProxyRoutes} from '@/features/proxy-routes/api/proxy-routes';
+import { getProxyRoutes } from '@/features/proxy-routes/api/proxy-routes';
-import type {ProxyRouteItem} from '@/features/proxy-routes/types';
+import type { ProxyRouteItem } from '@/features/proxy-routes/types';
 import {
   DangerButton,
   PrimaryButton,
@@ -31,8 +41,8 @@ import {
   replaceWAFRuleGroupSites,
   updateWAFRuleGroup,
 } from '@/features/waf/api/waf';
-import type {WAFRuleGroup, WAFRuleGroupPayload} from '@/features/waf/types';
+import type { WAFRuleGroup, WAFRuleGroupPayload } from '@/features/waf/types';
-import {cn} from '@/lib/utils/cn';
+import { cn } from '@/lib/utils/cn';
 
 type FeedbackState = {
   tone: 'success' | 'danger' | 'info';
@@ -126,17 +136,13 @@ function textToList(text: string) {
 
 function normalizeItems(items: string[]) {
   return Array.from(
-        new Set(
+    new Set(items.map((item) => item.trim()).filter(Boolean)),
-            items
-                .map((item) => item.trim())
-                .filter(Boolean),
-        ),
   ).sort((left, right) => left.localeCompare(right));
 }
 
 function buildDraft(group: WAFRuleGroup | null): WAFRuleGroupPayload {
   if (!group) {
-        return {...emptyDraft};
+    return { ...emptyDraft };
   }
   return {
     name: group.name,
@@ -165,8 +171,8 @@ function countRuleEntries(group: RuleListRenderable) {
 }
 
 function buildCountryOptions() {
-    const zhDisplayNames = new Intl.DisplayNames(['zh-CN'], {type: 'region'});
+  const zhDisplayNames = new Intl.DisplayNames(['zh-CN'], { type: 'region' });
-    const enDisplayNames = new Intl.DisplayNames(['en'], {type: 'region'});
+  const enDisplayNames = new Intl.DisplayNames(['en'], { type: 'region' });
   const options: CountryOption[] = [];
 
   for (let first = 65; first <= 90; first += 1) {
@@ -215,13 +221,13 @@ function updateDraftList(
 ) {
   switch (key) {
     case 'ip_whitelist':
-            return {...draft, ip_whitelist: updater(draft.ip_whitelist)};
+      return { ...draft, ip_whitelist: updater(draft.ip_whitelist) };
     case 'ip_blacklist':
-            return {...draft, ip_blacklist: updater(draft.ip_blacklist)};
+      return { ...draft, ip_blacklist: updater(draft.ip_blacklist) };
     case 'country_whitelist':
-            return {...draft, country_whitelist: updater(draft.country_whitelist)};
+      return { ...draft, country_whitelist: updater(draft.country_whitelist) };
     case 'country_blacklist':
-            return {...draft, country_blacklist: updater(draft.country_blacklist)};
+      return { ...draft, country_blacklist: updater(draft.country_blacklist) };
   }
 }
 
@@ -234,7 +240,7 @@ function StatCard({
   label,
   value,
   hint,
-                  }: {
+}: {
   icon: LucideIcon;
   label: string;
   value: string;
@@ -244,14 +250,15 @@ function StatCard({
     <div className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
       <div className="flex items-start justify-between gap-4">
         <div className="space-y-2">
-                    <p className="text-xs font-medium uppercase tracking-[0.22em] text-[var(--foreground-muted)]">
+          <p className="text-xs font-medium tracking-[0.22em] text-[var(--foreground-muted)] uppercase">
             {label}
           </p>
-                    <p className="text-2xl font-semibold text-[var(--foreground-primary)]">{value}</p>
+          <p className="text-2xl font-semibold text-[var(--foreground-primary)]">
+            {value}
+          </p>
         </div>
-                <span
+        <span className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] text-[var(--foreground-primary)]">
-                    className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] text-[var(--foreground-primary)]">
+          <Icon className="h-5 w-5" />
-          <Icon className="h-5 w-5"/>
         </span>
       </div>
       {hint && (
@@ -267,7 +274,7 @@ function TabButton({
   label,
   active,
   onClick,
-                   }: {
+}: {
   label: string;
   active: boolean;
   onClick: () => void;
@@ -283,7 +290,9 @@ function TabButton({
           : 'border-[var(--border-default)] bg-[var(--surface-elevated)] hover:border-[var(--border-strong)] hover:bg-[var(--surface-muted)]',
       )}
     >
-            <p className=" text-sm font-semibold text-[var(--foreground-primary)]">{label}</p>
+      <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+        {label}
+      </p>
     </button>
   );
 }
@@ -292,7 +301,7 @@ function RuleChip({
   label,
   tone,
   onRemove,
-                  }: {
+}: {
   label: string;
   tone: 'whitelist' | 'blacklist';
   onRemove: () => void;
@@ -326,7 +335,7 @@ function RuleListSection({
   tone,
   emptyText,
   onRemove,
-                         }: {
+}: {
   title: string;
   description: string;
   items: string[];
@@ -338,25 +347,30 @@ function RuleListSection({
     <div className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
       <div className="flex items-start justify-between gap-4">
         <div>
-                    <h3 className="text-sm font-semibold text-[var(--foreground-primary)]">{title}</h3>
+          <h3 className="text-sm font-semibold text-[var(--foreground-primary)]">
+            {title}
+          </h3>
           <p className="mt-1 text-xs leading-5 text-[var(--foreground-secondary)]">
             {description}
           </p>
         </div>
-                <span
+        <span className="rounded-full border border-[var(--border-default)] px-2.5 py-1 text-xs font-medium text-[var(--foreground-secondary)]">
-                    className="rounded-full border border-[var(--border-default)] px-2.5 py-1 text-xs font-medium text-[var(--foreground-secondary)]">
           {items.length}
         </span>
       </div>
       {items.length > 0 ? (
         <div className="mt-4 flex flex-wrap gap-2">
           {items.map((item) => (
-                        <RuleChip key={item} label={item} tone={tone} onRemove={() => onRemove(item)}/>
+            <RuleChip
+              key={item}
+              label={item}
+              tone={tone}
+              onRemove={() => onRemove(item)}
+            />
           ))}
         </div>
       ) : (
-                <div
+        <div className="mt-4 rounded-2xl border border-dashed border-[var(--border-default)] px-4 py-6 text-sm text-[var(--foreground-secondary)]">
-                    className="mt-4 rounded-2xl border border-dashed border-[var(--border-default)] px-4 py-6 text-sm text-[var(--foreground-secondary)]">
           {emptyText}
         </div>
       )}
@@ -371,7 +385,7 @@ function RuleEntryModal({
   onClose,
   onChange,
   onSubmit,
-                        }: {
+}: {
   state: RuleModalState;
   countryOptions: CountryOption[];
   pending: boolean;
@@ -401,7 +415,9 @@ function RuleEntryModal({
       .sort((left, right) => {
         const leftSelected = selectedCountrySet.has(left.code) ? 1 : 0;
         const rightSelected = selectedCountrySet.has(right.code) ? 1 : 0;
-                return rightSelected - leftSelected || left.code.localeCompare(right.code);
+        return (
+          rightSelected - leftSelected || left.code.localeCompare(right.code)
+        );
       });
   }, [countryOptions, keyword, selectedCountrySet]);
 
@@ -409,7 +425,7 @@ function RuleEntryModal({
     const values = selectedCountrySet.has(code)
       ? state.countryValues.filter((item) => item !== code)
       : normalizeItems([...state.countryValues, code]);
-        onChange({countryValues: values});
+    onChange({ countryValues: values });
   };
 
   const selectFiltered = () => {
@@ -421,7 +437,7 @@ function RuleEntryModal({
     });
   };
 
-    const clearCountries = () => onChange({countryValues: []});
+  const clearCountries = () => onChange({ countryValues: [] });
 
   const typeLabel = state.listType === 'whitelist' ? '白名单' : '黑名单';
   const dimensionLabel = state.dimension === 'ip' ? 'IP' : '地域';
@@ -449,13 +465,15 @@ function RuleEntryModal({
           <ResourceField label="类型" container="div">
             <div className="grid grid-cols-2 gap-3">
               {[
-                                {value: 'whitelist', label: '白名单'},
+                { value: 'whitelist', label: '白名单' },
-                                {value: 'blacklist', label: '黑名单'},
+                { value: 'blacklist', label: '黑名单' },
               ].map((option) => (
                 <button
                   key={option.value}
                   type="button"
-                                    onClick={() => onChange({listType: option.value as RuleListType})}
+                  onClick={() =>
+                    onChange({ listType: option.value as RuleListType })
+                  }
                   className={cn(
                     'rounded-2xl border px-4 py-3 text-sm font-medium transition',
                     state.listType === option.value
@@ -471,13 +489,15 @@ function RuleEntryModal({
           <ResourceField label="维度" container="div">
             <div className="grid grid-cols-2 gap-3">
               {[
-                                {value: 'ip', label: 'IP'},
+                { value: 'ip', label: 'IP' },
-                                {value: 'country', label: '地域'},
+                { value: 'country', label: '地域' },
               ].map((option) => (
                 <button
                   key={option.value}
                   type="button"
-                                    onClick={() => onChange({dimension: option.value as RuleDimension})}
+                  onClick={() =>
+                    onChange({ dimension: option.value as RuleDimension })
+                  }
                   className={cn(
                     'rounded-2xl border px-4 py-3 text-sm font-medium transition',
                     state.dimension === option.value
@@ -493,18 +513,20 @@ function RuleEntryModal({
         </div>
 
         {state.dimension === 'ip' ? (
-                    <ResourceField label="IP / IP 段" hint="支持单个 IP、CIDR，或使用换行/逗号一次添加多个。">
+          <ResourceField
+            label="IP / IP 段"
+            hint="支持单个 IP、CIDR，或使用换行/逗号一次添加多个。"
+          >
             <ResourceTextarea
               value={state.ipValue}
               placeholder="例如 1.1.1.1 或 192.168.0.0/24"
-                            onChange={(event) => onChange({ipValue: event.target.value})}
+              onChange={(event) => onChange({ ipValue: event.target.value })}
             />
           </ResourceField>
         ) : (
           <div className="space-y-4">
-                        <div
+            <div className="flex items-center gap-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
-                            className="flex items-center gap-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
+              <Search className="h-4 w-4 text-[var(--foreground-secondary)]" />
-                            <Search className="h-4 w-4 text-[var(--foreground-secondary)]"/>
               <input
                 value={keyword}
                 onChange={(event) => setKeyword(event.target.value)}
@@ -527,8 +549,7 @@ function RuleEntryModal({
               </button>
             </div>
 
-                        <div
+            <div className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
-                            className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
               <div className="flex items-center justify-between gap-3">
                 <div>
                   <h3 className="text-sm font-semibold text-[var(--foreground-primary)]">
@@ -538,8 +559,7 @@ function RuleEntryModal({
                     选项显示为「国家代码 国家中文名」。
                   </p>
                 </div>
-                                <span
+                <span className="rounded-full border border-[var(--border-default)] px-2.5 py-1 text-xs font-medium text-[var(--foreground-secondary)]">
-                                    className="rounded-full border border-[var(--border-default)] px-2.5 py-1 text-xs font-medium text-[var(--foreground-secondary)]">
                   已选 {state.countryValues.length}
                 </span>
               </div>
@@ -587,7 +607,7 @@ function SiteApplyDrawer({
   onOpenChange,
   onSave,
   pending,
-                         }: {
+}: {
   group: WAFRuleGroup | null;
   routes: ProxyRouteItem[];
   open: boolean;
@@ -654,9 +674,8 @@ function SiteApplyDrawer({
       }
     >
       <div className="space-y-4">
-                <div
+        <div className="flex items-center gap-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
-                    className="flex items-center gap-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
+          <Search className="h-4 w-4 text-[var(--foreground-secondary)]" />
-                    <Search className="h-4 w-4 text-[var(--foreground-secondary)]"/>
           <input
             value={keyword}
             onChange={(event) => setKeyword(event.target.value)}
@@ -692,7 +711,9 @@ function SiteApplyDrawer({
                     : 'border-[var(--border-default)]',
                 )}
               >
-                {selectedSet.has(route.id) ? <Check className="h-3 w-3"/> : null}
+                {selectedSet.has(route.id) ? (
+                  <Check className="h-3 w-3" />
+                ) : null}
               </span>
               <span className="min-w-0 flex-1">
                 <span className="block truncate text-sm font-medium text-[var(--foreground-primary)]">
@@ -717,7 +738,9 @@ export function WAFPage() {
   const [draft, setDraft] = useState<WAFRuleGroupPayload>(emptyDraft);
   const [feedback, setFeedback] = useState<FeedbackState | null>(null);
   const [applyGroup, setApplyGroup] = useState<WAFRuleGroup | null>(null);
-    const [ruleModal, setRuleModal] = useState<RuleModalState>(defaultRuleModalState);
+  const [ruleModal, setRuleModal] = useState<RuleModalState>(
+    defaultRuleModalState,
+  );
 
   const groupsQuery = useQuery({
     queryKey: ['waf', 'rule-groups'],
@@ -740,7 +763,9 @@ export function WAFPage() {
     () =>
       selectedID === 0
         ? null
-                : (groups.find((group) => group.id === selectedID) ?? groups[0] ?? null),
+        : (groups.find((group) => group.id === selectedID) ??
+          groups[0] ??
+          null),
     [groups, selectedID],
   );
 
@@ -753,8 +778,8 @@ export function WAFPage() {
 
   const invalidate = async () => {
     await Promise.all([
-            queryClient.invalidateQueries({queryKey: ['waf', 'rule-groups']}),
+      queryClient.invalidateQueries({ queryKey: ['waf', 'rule-groups'] }),
-            queryClient.invalidateQueries({queryKey: ['config-versions', 'diff']}),
+      queryClient.invalidateQueries({ queryKey: ['config-versions', 'diff'] }),
     ]);
   };
 
@@ -767,11 +792,11 @@ export function WAFPage() {
     },
     onSuccess: async (group) => {
       setSelectedID(group.id);
-            setFeedback({tone: 'success', message: 'WAF 规则组已保存。'});
+      setFeedback({ tone: 'success', message: 'WAF 规则组已保存。' });
       await invalidate();
     },
     onError: (error) => {
-            setFeedback({tone: 'danger', message: getErrorMessage(error)});
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
     },
   });
 
@@ -779,52 +804,75 @@ export function WAFPage() {
     mutationFn: deleteWAFRuleGroup,
     onSuccess: async () => {
       setSelectedID(null);
-            setFeedback({tone: 'success', message: 'WAF 规则组已删除。'});
+      setFeedback({ tone: 'success', message: 'WAF 规则组已删除。' });
       await invalidate();
     },
     onError: (error) => {
-            setFeedback({tone: 'danger', message: getErrorMessage(error)});
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
     },
   });
 
   const applyMutation = useMutation({
-        mutationFn: ({id, ids}: { id: number; ids: number[] }) =>
+    mutationFn: ({ id, ids }: { id: number; ids: number[] }) =>
       replaceWAFRuleGroupSites(id, ids),
     onSuccess: async () => {
       setApplyGroup(null);
-            setFeedback({tone: 'success', message: '规则组应用范围已更新。'});
+      setFeedback({ tone: 'success', message: '规则组应用范围已更新。' });
       await invalidate();
     },
     onError: (error) => {
-            setFeedback({tone: 'danger', message: getErrorMessage(error)});
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
     },
   });
 
   if (groupsQuery.isLoading || routesQuery.isLoading) {
-        return <LoadingState/>;
+    return <LoadingState />;
   }
   if (groupsQuery.isError) {
-        return <ErrorState title="WAF 加载失败" description={getErrorMessage(groupsQuery.error)}/>;
+    return (
+      <ErrorState
+        title="WAF 加载失败"
+        description={getErrorMessage(groupsQuery.error)}
+      />
+    );
   }
   if (routesQuery.isError) {
-        return <ErrorState title="网站列表加载失败" description={getErrorMessage(routesQuery.error)}/>;
+    return (
+      <ErrorState
+        title="网站列表加载失败"
+        description={getErrorMessage(routesQuery.error)}
+      />
+    );
   }
   if (!selectedGroup && groups.length === 0) {
-        return <EmptyState title="WAF 尚未初始化" description="刷新页面后系统会自动创建全局规则组。"/>;
+    return (
+      <EmptyState
+        title="WAF 尚未初始化"
+        description="刷新页面后系统会自动创建全局规则组。"
+      />
+    );
   }
 
   const enabledGroups = groups.filter((group) => group.enabled);
-    const protectedSites = new Set(groups.flatMap((group) => group.applied_site_ids));
+  const protectedSites = new Set(
-    const totalRules = groups.reduce((sum, group) => sum + countRuleEntries(group), 0);
+    groups.flatMap((group) => group.applied_site_ids),
+  );
+  const totalRules = groups.reduce(
+    (sum, group) => sum + countRuleEntries(group),
+    0,
+  );
   const currentRuleCount = countRuleEntries(draft);
   const appliedSiteNames = selectedGroup?.is_global
     ? ['全部网站']
     : (selectedGroup?.applied_site_ids ?? [])
-        .map((id) => routes.find((route) => route.id === id)?.site_name ?? `网站 #${id}`)
+        .map(
+          (id) =>
+            routes.find((route) => route.id === id)?.site_name ?? `网站 #${id}`,
+        )
         .sort((left, right) => left.localeCompare(right));
 
   const openRuleModal = () => {
-        setRuleModal({...defaultRuleModalState, open: true});
+    setRuleModal({ ...defaultRuleModalState, open: true });
   };
 
   const closeRuleModal = () => {
@@ -840,33 +888,48 @@ export function WAFPage() {
     if (values.length === 0) {
       setFeedback({
         tone: 'danger',
-                message: ruleModal.dimension === 'ip' ? '请先输入 IP 或 IP 段。' : '请先选择地域。',
+        message:
+          ruleModal.dimension === 'ip'
+            ? '请先输入 IP 或 IP 段。'
+            : '请先选择地域。',
       });
       return;
     }
 
     const listKey = getListFieldKey(ruleModal.listType, ruleModal.dimension);
     setDraft((current) =>
-            updateDraftList(current, listKey, (items) => normalizeItems([...items, ...values])),
+      updateDraftList(current, listKey, (items) =>
+        normalizeItems([...items, ...values]),
+      ),
     );
-        setFeedback({tone: 'info', message: '名单项已添加到当前草稿，保存后生效。'});
+    setFeedback({
+      tone: 'info',
+      message: '名单项已添加到当前草稿，保存后生效。',
+    });
     closeRuleModal();
     setActiveTab('lists');
   };
 
   const removeRuleItem = (key: ListFieldKey, value: string) => {
     setDraft((current) =>
-            updateDraftList(current, key, (items) => items.filter((item) => item !== value)),
+      updateDraftList(current, key, (items) =>
+        items.filter((item) => item !== value),
+      ),
     );
   };
 
   const overviewItems: Array<{ label: string; value: ReactNode }> = [
-        {label: '当前规则组', value: selectedGroup ? selectedGroup.name : '新建规则组'},
+    {
-        {label: '启用状态', value: draft.enabled ? '启用中' : '已停用'},
+      label: '当前规则组',
-        {label: '当前规则数', value: `${currentRuleCount} 条`},
+      value: selectedGroup ? selectedGroup.name : '新建规则组',
+    },
+    { label: '启用状态', value: draft.enabled ? '启用中' : '已停用' },
+    { label: '当前规则数', value: `${currentRuleCount} 条` },
     {
       label: '生效范围',
-            value: selectedGroup?.is_global ? '全部网站' : `${selectedGroup?.applied_site_count ?? 0} 个网站`,
+      value: selectedGroup?.is_global
+        ? '全部网站'
+        : `${selectedGroup?.applied_site_count ?? 0} 个网站`,
     },
     {
       label: '拦截返回',
@@ -894,16 +957,18 @@ export function WAFPage() {
               onClick={() => {
                 setSelectedID(0);
                 setActiveTab('basic');
-                                setDraft({...emptyDraft, name: '自定义规则组'});
+                setDraft({ ...emptyDraft, name: '自定义规则组' });
               }}
             >
-                            <Plus className="mr-2 h-4 w-4"/>
+              <Plus className="mr-2 h-4 w-4" />
               新建规则组
             </PrimaryButton>
           }
         />
 
-                {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message}/> : null}
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
 
         <div className="grid gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
           <AppCard title="规则组">
@@ -926,9 +991,9 @@ export function WAFPage() {
                   <span className="flex items-center justify-between gap-3">
                     <span className="flex min-w-0 items-center gap-2">
                       {group.is_global ? (
-                          <Globe2 className="h-4 w-4"/>
+                        <Globe2 className="h-4 w-4" />
                       ) : (
-                          <ShieldCheck className="h-4 w-4"/>
+                        <ShieldCheck className="h-4 w-4" />
                       )}
                       <span className="truncate text-sm font-semibold text-[var(--foreground-primary)]">
                         {group.name}
@@ -939,8 +1004,10 @@ export function WAFPage() {
                     </span>
                   </span>
                   <span className="mt-2 block text-xs text-[var(--foreground-secondary)]">
-                    {group.is_global ? '应用全部网站' : `已应用 ${group.applied_site_count} 个网站`} ·{' '}
+                    {group.is_global
-                                        {countRuleEntries(group)} 条规则
+                      ? '应用全部网站'
+                      : `已应用 ${group.applied_site_count} 个网站`}{' '}
+                    · {countRuleEntries(group)} 条规则
                   </span>
                 </button>
               ))}
@@ -953,7 +1020,10 @@ export function WAFPage() {
             action={
               <div className="flex flex-wrap gap-3">
                 {selectedGroup && !selectedGroup.is_global ? (
-                                    <SecondaryButton type="button" onClick={() => setApplyGroup(selectedGroup)}>
+                  <SecondaryButton
+                    type="button"
+                    onClick={() => setApplyGroup(selectedGroup)}
+                  >
                     一键应用
                   </SecondaryButton>
                 ) : null}
@@ -962,11 +1032,10 @@ export function WAFPage() {
                   disabled={saveMutation.isPending}
                   onClick={() => saveMutation.mutate(draft)}
                 >
-                                    <Save className="mr-2 h-4 w-4"/>
+                  <Save className="mr-2 h-4 w-4" />
                   {saveMutation.isPending ? '保存中...' : '保存规则组'}
                 </PrimaryButton>
               </div>
-
             }
           >
             <div className="space-y-6">
@@ -1013,7 +1082,7 @@ export function WAFPage() {
                         onChange={(event) =>
                           setDraft((current) => ({
                             ...current,
-                                                        name: event.target.value
+                            name: event.target.value,
                           }))
                         }
                       />
@@ -1023,7 +1092,10 @@ export function WAFPage() {
                       description="关闭后保留配置，但不会参与匹配。"
                       checked={draft.enabled}
                       onChange={(checked) =>
-                                                setDraft((current) => ({...current, enabled: checked}))
+                        setDraft((current) => ({
+                          ...current,
+                          enabled: checked,
+                        }))
                       }
                     />
                     <ResourceField
@@ -1036,24 +1108,22 @@ export function WAFPage() {
                         onChange={(event) =>
                           setDraft((current) => ({
                             ...current,
-                                                        remark: event.target.value
+                            remark: event.target.value,
                           }))
                         }
                       />
                     </ResourceField>
                   </div>
-                                    <div className="grid gap-5 ">
+                  <div className="grid gap-5">
                     <div className="space-y-5">
-                                            <div
+                      <div className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
-                                                className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
                         <div className="flex items-start justify-between gap-4">
                           <div>
                             <h3 className="text-sm font-semibold text-[var(--foreground-primary)]">
                               配置总览
                             </h3>
                           </div>
-                                                    <span
+                          <span className="rounded-full border border-[var(--border-default)] px-2.5 py-1 text-xs font-medium text-[var(--foreground-secondary)]">
-                                                        className="rounded-full border border-[var(--border-default)] px-2.5 py-1 text-xs font-medium text-[var(--foreground-secondary)]">
                             {selectedGroup?.is_global ? '全局' : '自定义'}
                           </span>
                         </div>
@@ -1064,7 +1134,7 @@ export function WAFPage() {
                               key={item.label}
                               className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-4"
                             >
-                                                            <dt className="text-xs font-medium uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                              <dt className="text-xs font-medium tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                                 {item.label}
                               </dt>
                               <dd className="mt-2 text-sm font-medium text-[var(--foreground-primary)]">
@@ -1075,7 +1145,7 @@ export function WAFPage() {
                         </dl>
 
                         <div className="mt-5">
-                                                    <p className="text-xs font-medium uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                          <p className="text-xs font-medium tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                             当前应用网站
                           </p>
                           <div className="mt-3 flex flex-wrap gap-2">
@@ -1089,16 +1159,13 @@ export function WAFPage() {
                                 </span>
                               ))
                             ) : (
-                                                            <span
+                              <span className="rounded-2xl border border-dashed border-[var(--border-default)] px-4 py-3 text-sm text-[var(--foreground-secondary)]">
-                                                                className="rounded-2xl border border-dashed border-[var(--border-default)] px-4 py-3 text-sm text-[var(--foreground-secondary)]">
                                 尚未绑定网站，可点击右上角「一键应用」进行配置。
                               </span>
                             )}
                           </div>
                         </div>
                       </div>
-
-
                     </div>
                   </div>
                 </div>
@@ -1113,7 +1180,7 @@ export function WAFPage() {
                       </h3>
                     </div>
                     <PrimaryButton type="button" onClick={openRuleModal}>
-                                            <Plus className="mr-2 h-4 w-4"/>
+                      <Plus className="mr-2 h-4 w-4" />
                       添加
                     </PrimaryButton>
                   </div>
@@ -1168,8 +1235,7 @@ export function WAFPage() {
               {activeTab === 'block' ? (
                 <div className="grid gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
                   <div className="space-y-5">
-                                        <div
+                    <div className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
-                                            className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
                       <h3 className="text-sm font-semibold text-[var(--foreground-primary)]">
                         拦截返回状态码
                       </h3>
@@ -1199,7 +1265,7 @@ export function WAFPage() {
                               onClick={() =>
                                 setDraft((current) => ({
                                   ...current,
-                                                                    block_status_code: code
+                                  block_status_code: code,
                                 }))
                               }
                               className={cn(
@@ -1215,11 +1281,9 @@ export function WAFPage() {
                         </div>
                       </div>
                     </div>
-
                   </div>
 
-                                    <div
+                  <div className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
-                                        className="rounded-[26px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
                     <ResourceField
                       label="拦截页面"
                       hint="支持直接输入 HTML 或纯文本。留空时只返回状态码。"
@@ -1236,31 +1300,31 @@ export function WAFPage() {
                         }
                       />
                     </ResourceField>
-
-
                   </div>
                 </div>
               ) : null}
 
-                            <div
+              <div className="flex flex-wrap justify-between gap-3 border-t border-[var(--border-default)] pt-6">
-                                className="flex flex-wrap justify-between gap-3 border-t border-[var(--border-default)] pt-6">
                 <div>
                   {selectedGroup && !selectedGroup.is_global ? (
                     <DangerButton
                       type="button"
                       disabled={deleteMutation.isPending}
                       onClick={() => {
-                                                if (window.confirm(`确认删除 WAF 规则组 ${selectedGroup.name} 吗？`)) {
+                        if (
+                          window.confirm(
+                            `确认删除 WAF 规则组 ${selectedGroup.name} 吗？`,
+                          )
+                        ) {
                           deleteMutation.mutate(selectedGroup.id);
                         }
                       }}
                     >
-                                            <Trash2 className="mr-2 h-4 w-4"/>
+                      <Trash2 className="mr-2 h-4 w-4" />
                       删除
                     </DangerButton>
                   ) : null}
                 </div>
-
               </div>
             </div>
           </AppCard>
@@ -1272,7 +1336,9 @@ export function WAFPage() {
         countryOptions={countryOptions}
         pending={saveMutation.isPending}
         onClose={closeRuleModal}
-                onChange={(patch) => setRuleModal((current) => ({...current, ...patch, open: true}))}
+        onChange={(patch) =>
+          setRuleModal((current) => ({ ...current, ...patch, open: true }))
+        }
         onSubmit={applyRuleModal}
       />
 
@@ -1288,7 +1354,7 @@ export function WAFPage() {
         }}
         onSave={(ids) => {
           if (applyGroup) {
-                        applyMutation.mutate({id: applyGroup.id, ids});
+            applyMutation.mutate({ id: applyGroup.id, ids });
           }
         }}
       />

openflare_server/web/features/websites/components/certificate-detail-modal.tsx

@@ -13,7 +13,10 @@ import {
   getTlsCertificate,
   getTlsCertificateContent,
 } from '@/features/tls-certificates/api/tls-certificates';
-import { getCertificateStatus, getErrorMessage } from '@/features/websites/utils';
+import {
+  getCertificateStatus,
+  getErrorMessage,
+} from '@/features/websites/utils';
 import {
   CodeBlock,
   DangerButton,
@@ -81,11 +84,7 @@ export function CertificateDetailModal({
           <SecondaryButton type="button" onClick={onClose}>
             关闭
           </SecondaryButton>
-          <PrimaryButton
+          <PrimaryButton type="button" onClick={onEdit} disabled={!certificate}>
-            type="button"
-            onClick={onEdit}
-            disabled={!certificate}
-          >
             编辑证书
           </PrimaryButton>
           <DangerButton
@@ -112,15 +111,12 @@ export function CertificateDetailModal({
           )}
         />
       ) : !certificate || !content ? (
-        <EmptyState
+        <EmptyState title="证书不存在" description="当前证书可能已被删除。" />
-          title="证书不存在"
-          description="当前证书可能已被删除。"
-        />
       ) : (
         <div className="space-y-6">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                 证书名称
               </p>
               <p className="mt-2 text-sm text-[var(--foreground-primary)]">
@@ -128,7 +124,7 @@ export function CertificateDetailModal({
               </p>
             </div>
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                 状态
               </p>
               <div className="mt-2">
@@ -138,7 +134,7 @@ export function CertificateDetailModal({
               </div>
             </div>
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                 生效时间
               </p>
               <p className="mt-2 text-sm text-[var(--foreground-primary)]">
@@ -146,7 +142,7 @@ export function CertificateDetailModal({
               </p>
             </div>
             <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-              <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                 到期时间
               </p>
               <p className="mt-2 text-sm text-[var(--foreground-primary)]">
@@ -156,7 +152,7 @@ export function CertificateDetailModal({
           </div>
 
           <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-            <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+            <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
               备注
             </p>
             <p className="mt-2 text-sm leading-6 text-[var(--foreground-primary)]">
@@ -180,7 +176,7 @@ export function CertificateDetailModal({
                   复制
                 </SecondaryButton>
               </div>
-              <CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
+              <CodeBlock className="max-h-56 overflow-y-auto break-all whitespace-pre-wrap">
                 {content.cert_pem}
               </CodeBlock>
             </div>
@@ -199,7 +195,7 @@ export function CertificateDetailModal({
                   复制
                 </SecondaryButton>
               </div>
-              <CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
+              <CodeBlock className="max-h-56 overflow-y-auto break-all whitespace-pre-wrap">
                 {content.key_pem}
               </CodeBlock>
             </div>

openflare_server/web/features/websites/components/certificate-import-modal.tsx

@@ -52,8 +52,9 @@ export function CertificateImportModal({
   const queryClient = useQueryClient();
   const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
   const [feedback, setFeedback] = useState<FeedbackState | null>(null);
-  const [fileForm, setFileForm] =
+  const [fileForm, setFileForm] = useState<FileImportFormValues>(
-    useState<FileImportFormValues>(defaultFileImportValues);
+    defaultFileImportValues,
+  );
   const [certFile, setCertFile] = useState<File | null>(null);
   const [keyFile, setKeyFile] = useState<File | null>(null);
   const [fileInputNonce, setFileInputNonce] = useState(0);
@@ -280,9 +281,7 @@ export function CertificateImportModal({
                 <ResourceField
                   label="私钥文件"
                   hint={
-                    keyFile
+                    keyFile ? `已选择：${keyFile.name}` : '请选择 KEY/PEM 文件'
-                      ? `已选择：${keyFile.name}`
-                      : '请选择 KEY/PEM 文件'
                   }
                 >
                   <ResourceInput

openflare_server/web/features/websites/components/website-detail-page.tsx

@@ -143,13 +143,16 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
     enabled: Boolean(wafRouteID),
   });
   const wafMutation = useMutation({
-    mutationFn: (ids: number[]) => replaceWAFSiteRuleGroups(wafRouteID ?? 0, ids),
+    mutationFn: (ids: number[]) =>
+      replaceWAFSiteRuleGroups(wafRouteID ?? 0, ids),
     onSuccess: async (view) => {
       setWafSelectedIDs(view.applied_ids);
       setFeedback({ tone: 'success', message: '网站 WAF 规则组已更新。' });
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: ['waf'] }),
-        queryClient.invalidateQueries({ queryKey: ['config-versions', 'diff'] }),
+        queryClient.invalidateQueries({
+          queryKey: ['config-versions', 'diff'],
+        }),
       ]);
     },
     onError: (error) => {

openflare_server/web/features/websites/components/website-editor-modal.tsx

@@ -90,7 +90,7 @@ export function WebsiteEditorModal({
   });
 
   const currentCertificate = watchedCertId
-    ? certificates.find((item) => item.id === Number(watchedCertId)) ?? null
+    ? (certificates.find((item) => item.id === Number(watchedCertId)) ?? null)
     : null;
 
   const handleSubmit = form.handleSubmit((values) => {
@@ -215,7 +215,7 @@ export function WebsiteEditorModal({
 
         <div className="grid gap-4 md:grid-cols-3">
           <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-            <p className="text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
               当前域名
             </p>
             <p className="mt-2 text-sm text-[var(--foreground-primary)]">
@@ -223,7 +223,7 @@ export function WebsiteEditorModal({
             </p>
           </div>
           <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-            <p className="text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
               匹配类型
             </p>
             <div className="mt-2">
@@ -235,12 +235,14 @@ export function WebsiteEditorModal({
             </div>
           </div>
           <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
-            <p className="text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
               当前证书
             </p>
             <div className="mt-2">
               <StatusBadge
-                label={currentCertificate ? currentCertificate.name : '未绑定证书'}
+                label={
+                  currentCertificate ? currentCertificate.name : '未绑定证书'
+                }
                 variant={currentCertificate ? 'success' : 'warning'}
               />
             </div>

openflare_server/web/features/websites/components/websites-page.tsx

@@ -136,7 +136,7 @@ export function WebsitesPage() {
             <div className="grid gap-4 lg:grid-cols-2">
               {domains.map((domain) => {
                 const certificate = domain.cert_id
-                  ? certificateMap.get(domain.cert_id) ?? null
+                  ? (certificateMap.get(domain.cert_id) ?? null)
                   : null;
                 const matchType = getMatchTypeMeta(domain.domain);
 
@@ -168,7 +168,7 @@ export function WebsitesPage() {
 
                         <div className="grid gap-3 md:grid-cols-1">
                           <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-3">
-                            <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
+                            <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
                               绑定证书
                             </p>
                             <p className="mt-2 text-sm text-[var(--foreground-primary)]">

openflare_server/web/features/websites/schemas.ts

@@ -97,4 +97,3 @@ export const defaultAcmeApplyValues: AcmeApplyFormValues = {
   dns2: '',
   remark: '',
 };
-

openflare_server/web/lib/theme/theme.ts

@@ -6,7 +6,9 @@ export const themeModes = ['light', 'dark', 'system'] as const;
 export type ThemeMode = (typeof themeModes)[number];
 export type ResolvedTheme = Exclude<ThemeMode, 'system'>;
 
-export function isThemeMode(value: string | null | undefined): value is ThemeMode {
+export function isThemeMode(
+  value: string | null | undefined,
+): value is ThemeMode {
   return themeModes.includes(value as ThemeMode);
 }
 

openflare_server/web/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
+import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from "tailwind-merge"
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

openflare_server/web/lib/utils/date.ts

@@ -17,8 +17,12 @@ function toDate(value: string | Date | null | undefined) {
     return null;
   }
 
-  const normalizedValue = typeof value === 'string' ? value.replace(' ', 'T') : value;
+  const normalizedValue =
-  const date = normalizedValue instanceof Date ? normalizedValue : new Date(normalizedValue);
+    typeof value === 'string' ? value.replace(' ', 'T') : value;
+  const date =
+    normalizedValue instanceof Date
+      ? normalizedValue
+      : new Date(normalizedValue);
   return Number.isNaN(date.getTime()) ? null : date;
 }
 

openflare_server/web/next.config.mjs

@@ -1,5 +1,6 @@
 const devBackendUrl =
-  process.env.NEXT_DEV_BACKEND_URL?.replace(/\/+$/, '') || 'http://127.0.0.1:3000';
+  process.env.NEXT_DEV_BACKEND_URL?.replace(/\/+$/, '') ||
+  'http://127.0.0.1:3000';
 const enableDevProxy = process.env.NEXT_DEV_PROXY === 'true';
 
 export default function createNextConfig() {
@@ -10,7 +11,16 @@ export default function createNextConfig() {
       unoptimized: true,
     },
     eslint: {
-      dirs: ['app', 'components', 'features', 'hooks', 'lib', 'store', 'tests', 'types'],
+      dirs: [
+        'app',
+        'components',
+        'features',
+        'hooks',
+        'lib',
+        'store',
+        'tests',
+        'types',
+      ],
     },
   };
 

openflare_server/web/scripts/dev-server.mjs

@@ -6,7 +6,10 @@ import next from 'next';
 const port = Number.parseInt(process.env.PORT ?? '3001', 10);
 const hostname = process.env.HOSTNAME || '127.0.0.1';
 const backendBaseUrl = new URL(
-  (process.env.NEXT_DEV_BACKEND_URL || 'http://127.0.0.1:3000').replace(/\/+$/, ''),
+  (process.env.NEXT_DEV_BACKEND_URL || 'http://127.0.0.1:3000').replace(
+    /\/+$/,
+    '',
+  ),
 );
 
 const app = next({
@@ -55,11 +58,19 @@ function writeProxyError(res, error) {
 
 function proxyHttpRequest(req, res) {
   const targetUrl = new URL(req.url || '/', backendBaseUrl);
-  const requestImpl = targetUrl.protocol === 'https:' ? https.request : http.request;
+  const requestImpl =
-  const proxyReq = requestImpl(createProxyRequestOptions(req, targetUrl), (proxyRes) => {
+    targetUrl.protocol === 'https:' ? https.request : http.request;
-    res.writeHead(proxyRes.statusCode || 502, proxyRes.statusMessage, proxyRes.headers);
+  const proxyReq = requestImpl(
+    createProxyRequestOptions(req, targetUrl),
+    (proxyRes) => {
+      res.writeHead(
+        proxyRes.statusCode || 502,
+        proxyRes.statusMessage,
+        proxyRes.headers,
+      );
       proxyRes.pipe(res);
-  });
+    },
+  );
 
   proxyReq.on('error', (error) => {
     if (!res.headersSent) {
@@ -92,7 +103,8 @@ function formatUpgradeResponseHeaders(statusCode, statusMessage, headers) {
 
 function proxyWebSocketUpgrade(req, socket, head) {
   const targetUrl = new URL(req.url || '/', backendBaseUrl);
-  const requestImpl = targetUrl.protocol === 'https:' ? https.request : http.request;
+  const requestImpl =
+    targetUrl.protocol === 'https:' ? https.request : http.request;
   const proxyReq = requestImpl(createProxyRequestOptions(req, targetUrl));
 
   proxyReq.on('upgrade', (proxyRes, proxySocket, proxyHead) => {
@@ -156,6 +168,10 @@ server.on('upgrade', (req, socket, head) => {
 });
 
 server.listen(port, hostname, () => {
-  console.log(`OpenFlare web dev server listening on http://${hostname}:${port}`);
+  console.log(
-  console.log(`Proxying /api/* and websocket upgrades to ${backendBaseUrl.href}`);
+    `OpenFlare web dev server listening on http://${hostname}:${port}`,
+  );
+  console.log(
+    `Proxying /api/* and websocket upgrades to ${backendBaseUrl.href}`,
+  );
 });

openflare_server/web/tests/unit/proxy-routes-page.test.tsx

@@ -180,7 +180,10 @@ describe('Proxy route website pages', () => {
             primary_domain: payload.domain,
             domain_count: payload.domains.length,
             origin_url: payload.origin_url,
-            upstreams: JSON.stringify([payload.origin_url, ...payload.upstreams]),
+            upstreams: JSON.stringify([
+              payload.origin_url,
+              ...payload.upstreams,
+            ]),
             upstream_list: [payload.origin_url, ...payload.upstreams],
             enabled: payload.enabled,
             enable_https: payload.enable_https,
@@ -242,7 +245,9 @@ describe('Proxy route website pages', () => {
               JSON.stringify({
                 success: true,
                 message: '',
-                data: [{ id: 1, domain: '*.example.com', cert_id: 1, enabled: true }],
+                data: [
+                  { id: 1, domain: '*.example.com', cert_id: 1, enabled: true },
+                ],
               }),
             ),
           );
@@ -377,7 +382,9 @@ describe('Proxy route website pages', () => {
               JSON.stringify({
                 success: true,
                 message: '',
-                data: [{ id: 1, domain: '*.example.com', cert_id: 1, enabled: true }],
+                data: [
+                  { id: 1, domain: '*.example.com', cert_id: 1, enabled: true },
+                ],
               }),
             ),
           );