prettier

frontend/app/(main)/admin/settings/components/openflare-ops-utils.ts

@@ -1,183 +1,228 @@
-import type {OptionItem} from "@/lib/services/openflare"
+import type { OptionItem } from '@/lib/services/openflare';
 
 export type OpenFlareOpsFields = {
-  agent_heartbeat_interval: string
-  agent_websocket_upgrade_enabled: boolean
-  node_offline_threshold: string
-  agent_update_repo: string
-  geoip_provider: string
-  server_address: string
-  uptime_kuma_enabled: boolean
-  uptime_kuma_url: string
-  uptime_kuma_username: string
-  uptime_kuma_password: string
-  uptime_kuma_monitor_scope: string
-  uptime_kuma_selected_sites: string
-  uptime_kuma_sync_interval: string
-  uptime_kuma_interval: string
-  uptime_kuma_retry: string
-  uptime_kuma_retry_interval: string
-  uptime_kuma_timeout: string
-  database_auto_cleanup_enabled: boolean
-  database_auto_cleanup_retention_days: string
-}
+  agent_heartbeat_interval: string;
+  agent_websocket_upgrade_enabled: boolean;
+  node_offline_threshold: string;
+  agent_update_repo: string;
+  geoip_provider: string;
+  server_address: string;
+  uptime_kuma_enabled: boolean;
+  uptime_kuma_url: string;
+  uptime_kuma_username: string;
+  uptime_kuma_password: string;
+  uptime_kuma_monitor_scope: string;
+  uptime_kuma_selected_sites: string;
+  uptime_kuma_sync_interval: string;
+  uptime_kuma_interval: string;
+  uptime_kuma_retry: string;
+  uptime_kuma_retry_interval: string;
+  uptime_kuma_timeout: string;
+  database_auto_cleanup_enabled: boolean;
+  database_auto_cleanup_retention_days: string;
+};
 
 export const defaultOpenFlareOpsFields: OpenFlareOpsFields = {
-  agent_heartbeat_interval: "10000",
+  agent_heartbeat_interval: '10000',
   agent_websocket_upgrade_enabled: true,
-  node_offline_threshold: "120000",
-  agent_update_repo: "Rain-kl/OpenFlare",
-  geoip_provider: "ipinfo",
-  server_address: "",
+  node_offline_threshold: '120000',
+  agent_update_repo: 'Rain-kl/OpenFlare',
+  geoip_provider: 'ipinfo',
+  server_address: '',
   uptime_kuma_enabled: false,
-  uptime_kuma_url: "",
-  uptime_kuma_username: "",
-  uptime_kuma_password: "",
-  uptime_kuma_monitor_scope: "all",
-  uptime_kuma_selected_sites: "",
-  uptime_kuma_sync_interval: "5",
-  uptime_kuma_interval: "60",
-  uptime_kuma_retry: "0",
-  uptime_kuma_retry_interval: "60",
-  uptime_kuma_timeout: "48",
+  uptime_kuma_url: '',
+  uptime_kuma_username: '',
+  uptime_kuma_password: '',
+  uptime_kuma_monitor_scope: 'all',
+  uptime_kuma_selected_sites: '',
+  uptime_kuma_sync_interval: '5',
+  uptime_kuma_interval: '60',
+  uptime_kuma_retry: '0',
+  uptime_kuma_retry_interval: '60',
+  uptime_kuma_timeout: '48',
   database_auto_cleanup_enabled: false,
-  database_auto_cleanup_retention_days: "30",
-}
+  database_auto_cleanup_retention_days: '30',
+};
 
 export const INSTALLER_SCRIPT_URL =
-  "https://raw.githubusercontent.com/Rain-kl/OpenFlare/main/scripts/install-agent.sh"
+  'https://raw.githubusercontent.com/Rain-kl/OpenFlare/main/scripts/install-agent.sh';
 
 export function optionsToMap(options: OptionItem[]) {
   return options.reduce<Record<string, string>>((accumulator, option) => {
-    accumulator[option.key] = option.value
-    return accumulator
-  }, {})
+    accumulator[option.key] = option.value;
+    return accumulator;
+  }, {});
 }
 
 function toBoolean(value: string | undefined, fallback: boolean) {
-  if (value === undefined) return fallback
-  return value === "true"
+  if (value === undefined) return fallback;
+  return value === 'true';
 }
 
 export function mapOptionsToOpsFields(
   optionMap: Record<string, string>,
-  serverAddress = "",
+  serverAddress = '',
 ): OpenFlareOpsFields {
   return {
-    agent_heartbeat_interval: optionMap.agent_heartbeat_interval ?? "10000",
-    agent_websocket_upgrade_enabled: toBoolean(optionMap.agent_websocket_upgrade_enabled, true),
-    node_offline_threshold: optionMap.node_offline_threshold ?? "120000",
-    agent_update_repo: optionMap.agent_update_repo ?? "Rain-kl/OpenFlare",
-    geoip_provider: optionMap.geoip_provider ?? "ipinfo",
+    agent_heartbeat_interval: optionMap.agent_heartbeat_interval ?? '10000',
+    agent_websocket_upgrade_enabled: toBoolean(
+      optionMap.agent_websocket_upgrade_enabled,
+      true,
+    ),
+    node_offline_threshold: optionMap.node_offline_threshold ?? '120000',
+    agent_update_repo: optionMap.agent_update_repo ?? 'Rain-kl/OpenFlare',
+    geoip_provider: optionMap.geoip_provider ?? 'ipinfo',
     server_address: optionMap.server_address || serverAddress,
     uptime_kuma_enabled: toBoolean(optionMap.uptime_kuma_enabled, false),
-    uptime_kuma_url: optionMap.uptime_kuma_url ?? "",
-    uptime_kuma_username: optionMap.uptime_kuma_username ?? "",
-    uptime_kuma_password: "",
-    uptime_kuma_monitor_scope: optionMap.uptime_kuma_monitor_scope ?? "all",
-    uptime_kuma_selected_sites: optionMap.uptime_kuma_selected_sites ?? "",
-    uptime_kuma_sync_interval: optionMap.uptime_kuma_sync_interval ?? "5",
-    uptime_kuma_interval: optionMap.uptime_kuma_interval ?? "60",
-    uptime_kuma_retry: optionMap.uptime_kuma_retry ?? "0",
-    uptime_kuma_retry_interval: optionMap.uptime_kuma_retry_interval ?? "60",
-    uptime_kuma_timeout: optionMap.uptime_kuma_timeout ?? "48",
-    database_auto_cleanup_enabled: toBoolean(optionMap.database_auto_cleanup_enabled, false),
-    database_auto_cleanup_retention_days: optionMap.database_auto_cleanup_retention_days ?? "30",
-  }
+    uptime_kuma_url: optionMap.uptime_kuma_url ?? '',
+    uptime_kuma_username: optionMap.uptime_kuma_username ?? '',
+    uptime_kuma_password: '',
+    uptime_kuma_monitor_scope: optionMap.uptime_kuma_monitor_scope ?? 'all',
+    uptime_kuma_selected_sites: optionMap.uptime_kuma_selected_sites ?? '',
+    uptime_kuma_sync_interval: optionMap.uptime_kuma_sync_interval ?? '5',
+    uptime_kuma_interval: optionMap.uptime_kuma_interval ?? '60',
+    uptime_kuma_retry: optionMap.uptime_kuma_retry ?? '0',
+    uptime_kuma_retry_interval: optionMap.uptime_kuma_retry_interval ?? '60',
+    uptime_kuma_timeout: optionMap.uptime_kuma_timeout ?? '48',
+    database_auto_cleanup_enabled: toBoolean(
+      optionMap.database_auto_cleanup_enabled,
+      false,
+    ),
+    database_auto_cleanup_retention_days:
+      optionMap.database_auto_cleanup_retention_days ?? '30',
+  };
 }
 
 export function formatDurationLabel(value: string) {
-  const milliseconds = Number.parseInt(value, 10)
-  if (Number.isNaN(milliseconds)) return value
-  if (milliseconds >= 60000) return `${milliseconds / 60000} 分钟`
-  return `${milliseconds / 1000} 秒`
+  const milliseconds = Number.parseInt(value, 10);
+  if (Number.isNaN(milliseconds)) return value;
+  if (milliseconds >= 60000) return `${milliseconds / 60000} 分钟`;
+  return `${milliseconds / 1000} 秒`;
 }
 
 export function normalizeServerUrl(value: string) {
-  return value.trim().replace(/\/+$/, "")
+  return value.trim().replace(/\/+$/, '');
 }
 
 export function getBrowserOrigin() {
-  if (typeof window === "undefined") return ""
-  return normalizeServerUrl(window.location.origin)
+  if (typeof window === 'undefined') return '';
+  return normalizeServerUrl(window.location.origin);
 }
 
-export function buildDiscoveryCommand(serverUrl: string, discoveryToken: string) {
+export function buildDiscoveryCommand(
+  serverUrl: string,
+  discoveryToken: string,
+) {
   return [
     `curl -fsSL ${INSTALLER_SCRIPT_URL} | bash -s -- \\`,
     `  --server-url ${normalizeServerUrl(serverUrl)} \\`,
     `  --discovery-token ${discoveryToken}`,
-  ].join("\n")
+  ].join('\n');
 }
 
 export function validateAgentFields(fields: OpenFlareOpsFields) {
-  const heartbeat = Number.parseInt(fields.agent_heartbeat_interval, 10)
-  const offline = Number.parseInt(fields.node_offline_threshold, 10)
+  const heartbeat = Number.parseInt(fields.agent_heartbeat_interval, 10);
+  const offline = Number.parseInt(fields.node_offline_threshold, 10);
   if (Number.isNaN(heartbeat) || heartbeat < 5000) {
-    throw new Error("心跳间隔不能小于 5000 毫秒。")
+    throw new Error('心跳间隔不能小于 5000 毫秒。');
   }
   if (Number.isNaN(offline) || offline < 10000) {
-    throw new Error("离线阈值不能小于 10000 毫秒。")
+    throw new Error('离线阈值不能小于 10000 毫秒。');
   }
 }
 
 export function validateUptimeKumaFields(fields: OpenFlareOpsFields) {
-  const syncInt = Number.parseInt(fields.uptime_kuma_sync_interval, 10)
-  const interval = Number.parseInt(fields.uptime_kuma_interval, 10)
-  const retry = Number.parseInt(fields.uptime_kuma_retry, 10)
-  const retryInt = Number.parseInt(fields.uptime_kuma_retry_interval, 10)
-  const timeout = Number.parseInt(fields.uptime_kuma_timeout, 10)
+  const syncInt = Number.parseInt(fields.uptime_kuma_sync_interval, 10);
+  const interval = Number.parseInt(fields.uptime_kuma_interval, 10);
+  const retry = Number.parseInt(fields.uptime_kuma_retry, 10);
+  const retryInt = Number.parseInt(fields.uptime_kuma_retry_interval, 10);
+  const timeout = Number.parseInt(fields.uptime_kuma_timeout, 10);
 
   if (fields.uptime_kuma_enabled) {
-    if (!fields.uptime_kuma_url.trim()) throw new Error("请输入 Uptime Kuma 地址。")
-    if (!fields.uptime_kuma_username.trim()) throw new Error("请输入 Uptime Kuma 用户名。")
+    if (!fields.uptime_kuma_url.trim())
+      throw new Error('请输入 Uptime Kuma 地址。');
+    if (!fields.uptime_kuma_username.trim())
+      throw new Error('请输入 Uptime Kuma 用户名。');
   }
-  if (Number.isNaN(syncInt) || syncInt <= 0) throw new Error("同步间隔必须为正整数。")
-  if (Number.isNaN(interval) || interval <= 0) throw new Error("心跳间隔必须为正整数。")
-  if (Number.isNaN(retry) || retry < 0) throw new Error("重试次数必须为非负整数。")
-  if (Number.isNaN(retryInt) || retryInt <= 0) throw new Error("心跳重试间隔必须为正整数。")
-  if (Number.isNaN(timeout) || timeout <= 0) throw new Error("请求超时必须为正整数。")
+  if (Number.isNaN(syncInt) || syncInt <= 0)
+    throw new Error('同步间隔必须为正整数。');
+  if (Number.isNaN(interval) || interval <= 0)
+    throw new Error('心跳间隔必须为正整数。');
+  if (Number.isNaN(retry) || retry < 0)
+    throw new Error('重试次数必须为非负整数。');
+  if (Number.isNaN(retryInt) || retryInt <= 0)
+    throw new Error('心跳重试间隔必须为正整数。');
+  if (Number.isNaN(timeout) || timeout <= 0)
+    throw new Error('请求超时必须为正整数。');
 }
 
 export function validateDatabaseAutoCleanup(fields: OpenFlareOpsFields) {
-  const retentionDays = Number.parseInt(fields.database_auto_cleanup_retention_days, 10)
+  const retentionDays = Number.parseInt(
+    fields.database_auto_cleanup_retention_days,
+    10,
+  );
   if (Number.isNaN(retentionDays) || retentionDays < 1) {
-    throw new Error("自动清理保留天数至少为 1 天。")
+    throw new Error('自动清理保留天数至少为 1 天。');
   }
 }
 
 export function agentOptionEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validateAgentFields(fields)
+  validateAgentFields(fields);
   return [
-    { key: "agent_heartbeat_interval", value: fields.agent_heartbeat_interval },
-    { key: "agent_websocket_upgrade_enabled", value: String(fields.agent_websocket_upgrade_enabled) },
-    { key: "node_offline_threshold", value: fields.node_offline_threshold },
-    { key: "agent_update_repo", value: fields.agent_update_repo.trim() },
-    { key: "geoip_provider", value: fields.geoip_provider },
-  ]
+    { key: 'agent_heartbeat_interval', value: fields.agent_heartbeat_interval },
+    {
+      key: 'agent_websocket_upgrade_enabled',
+      value: String(fields.agent_websocket_upgrade_enabled),
+    },
+    { key: 'node_offline_threshold', value: fields.node_offline_threshold },
+    { key: 'agent_update_repo', value: fields.agent_update_repo.trim() },
+    { key: 'geoip_provider', value: fields.geoip_provider },
+  ];
 }
 
-export function uptimeKumaOptionEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validateUptimeKumaFields(fields)
+export function uptimeKumaOptionEntries(
+  fields: OpenFlareOpsFields,
+): OptionItem[] {
+  validateUptimeKumaFields(fields);
   return [
-    { key: "uptime_kuma_enabled", value: String(fields.uptime_kuma_enabled) },
-    { key: "uptime_kuma_url", value: fields.uptime_kuma_url.trim() },
-    { key: "uptime_kuma_username", value: fields.uptime_kuma_username.trim() },
-    { key: "uptime_kuma_password", value: fields.uptime_kuma_password },
-    { key: "uptime_kuma_monitor_scope", value: fields.uptime_kuma_monitor_scope },
-    { key: "uptime_kuma_selected_sites", value: fields.uptime_kuma_selected_sites },
-    { key: "uptime_kuma_sync_interval", value: fields.uptime_kuma_sync_interval },
-    { key: "uptime_kuma_interval", value: fields.uptime_kuma_interval },
-    { key: "uptime_kuma_retry", value: fields.uptime_kuma_retry },
-    { key: "uptime_kuma_retry_interval", value: fields.uptime_kuma_retry_interval },
-    { key: "uptime_kuma_timeout", value: fields.uptime_kuma_timeout },
-  ]
+    { key: 'uptime_kuma_enabled', value: String(fields.uptime_kuma_enabled) },
+    { key: 'uptime_kuma_url', value: fields.uptime_kuma_url.trim() },
+    { key: 'uptime_kuma_username', value: fields.uptime_kuma_username.trim() },
+    { key: 'uptime_kuma_password', value: fields.uptime_kuma_password },
+    {
+      key: 'uptime_kuma_monitor_scope',
+      value: fields.uptime_kuma_monitor_scope,
+    },
+    {
+      key: 'uptime_kuma_selected_sites',
+      value: fields.uptime_kuma_selected_sites,
+    },
+    {
+      key: 'uptime_kuma_sync_interval',
+      value: fields.uptime_kuma_sync_interval,
+    },
+    { key: 'uptime_kuma_interval', value: fields.uptime_kuma_interval },
+    { key: 'uptime_kuma_retry', value: fields.uptime_kuma_retry },
+    {
+      key: 'uptime_kuma_retry_interval',
+      value: fields.uptime_kuma_retry_interval,
+    },
+    { key: 'uptime_kuma_timeout', value: fields.uptime_kuma_timeout },
+  ];
 }
 
-export function databaseAutoCleanupEntries(fields: OpenFlareOpsFields): OptionItem[] {
-  validateDatabaseAutoCleanup(fields)
+export function databaseAutoCleanupEntries(
+  fields: OpenFlareOpsFields,
+): OptionItem[] {
+  validateDatabaseAutoCleanup(fields);
   return [
-    { key: "database_auto_cleanup_enabled", value: String(fields.database_auto_cleanup_enabled) },
-    { key: "database_auto_cleanup_retention_days", value: fields.database_auto_cleanup_retention_days },
-  ]
+    {
+      key: 'database_auto_cleanup_enabled',
+      value: String(fields.database_auto_cleanup_enabled),
+    },
+    {
+      key: 'database_auto_cleanup_retention_days',
+      value: fields.database_auto_cleanup_retention_days,
+    },
+  ];
 }

frontend/app/(main)/admin/settings/components/system-status.tsx

@@ -1,206 +1,242 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import {useCallback, useEffect, useRef, useState} from "react"
-import {toast} from "sonner"
-import {Activity, Cpu, Database, HardDrive, Layers, RefreshCw} from "lucide-react"
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Button} from "@/components/ui/button"
-import {Switch} from "@/components/ui/switch"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select"
-import {Badge} from "@/components/ui/badge"
-import {Progress} from "@/components/ui/progress"
-import {Skeleton} from "@/components/ui/skeleton"
-import type {SystemStatus} from "@/lib/services/admin"
-import services from "@/lib/services"
+import * as React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import {
+  Activity,
+  Cpu,
+  Database,
+  HardDrive,
+  Layers,
+  RefreshCw,
+} from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Skeleton } from '@/components/ui/skeleton';
+import type { SystemStatus } from '@/lib/services/admin';
+import services from '@/lib/services';
 
 /**
  * 格式化数字，每3位加逗号
  */
 const formatNumber = (num: number | string) => {
-  if (num === undefined || num === null) return "0"
-  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ",")
-}
+  if (num === undefined || num === null) return '0';
+  return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ',');
+};
 
 /**
  * 运行时系统状态展示与管理组件
  */
 export function SystemStatusManager() {
-  const [status, setStatus] = useState<SystemStatus | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [wavelet, setWavelet] = useState(false)
-  const [autoRefresh, setAutoRefresh] = useState(true)
-  const [intervalTime, setIntervalTime] = useState("5000") // 默认5秒
+  const [status, setStatus] = useState<SystemStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [wavelet, setWavelet] = useState(false);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [intervalTime, setIntervalTime] = useState('5000'); // 默认5秒
 
-  const intervalRef = useRef<NodeJS.Timeout | null>(null)
-  const prevStatusRef = useRef<SystemStatus | null>(null)
-  const [changedFields, setChangedFields] = useState<Record<string, boolean>>({})
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const prevStatusRef = useRef<SystemStatus | null>(null);
+  const [changedFields, setChangedFields] = useState<Record<string, boolean>>(
+    {},
+  );
 
   // 获取状态数据
   const fetchStatus = useCallback(async (isSilent = false) => {
-    if (!isSilent) setWavelet(true)
+    if (!isSilent) setWavelet(true);
     try {
-      const data = await services.adminStatus.getSystemStatus()
+      const data = await services.adminStatus.getSystemStatus();
 
       // 检测变化的字段用于微动画效果
       if (prevStatusRef.current) {
-        const changes: Record<string, boolean> = {}
+        const changes: Record<string, boolean> = {};
         Object.keys(data).forEach((key) => {
-          const k = key as keyof SystemStatus
+          const k = key as keyof SystemStatus;
           if (prevStatusRef.current && prevStatusRef.current[k] !== data[k]) {
-            changes[k] = true
+            changes[k] = true;
           }
-        })
-        setChangedFields(changes)
+        });
+        setChangedFields(changes);
         // 1秒后清除变化状态
         setTimeout(() => {
-          setChangedFields({})
-        }, 1000)
+          setChangedFields({});
+        }, 1000);
       }
 
-      setStatus(data)
-      prevStatusRef.current = data
+      setStatus(data);
+      prevStatusRef.current = data;
     } catch (err) {
-      toast.error("获取系统状态失败", {
-        description: err instanceof Error ? err.message : "请求时发生未知错误"
-      })
+      toast.error('获取系统状态失败', {
+        description: err instanceof Error ? err.message : '请求时发生未知错误',
+      });
     } finally {
-      setLoading(false)
-      setWavelet(false)
+      setLoading(false);
+      setWavelet(false);
     }
-  }, [])
+  }, []);
 
   // 轮询逻辑
   useEffect(() => {
     // 首次加载
-    fetchStatus()
-  }, [fetchStatus])
+    fetchStatus();
+  }, [fetchStatus]);
 
   useEffect(() => {
     if (intervalRef.current) {
-      clearInterval(intervalRef.current)
+      clearInterval(intervalRef.current);
     }
 
     if (autoRefresh) {
-      const time = parseInt(intervalTime, 10)
+      const time = parseInt(intervalTime, 10);
       intervalRef.current = setInterval(() => {
-        fetchStatus(true)
-      }, time)
+        fetchStatus(true);
+      }, time);
     }
 
     return () => {
       if (intervalRef.current) {
-        clearInterval(intervalRef.current)
+        clearInterval(intervalRef.current);
       }
-    }
-  }, [autoRefresh, intervalTime, fetchStatus])
+    };
+  }, [autoRefresh, intervalTime, fetchStatus]);
 
   // 计算内存分配百分比 (Alloc / Sys)
   const getMemoryUsagePercent = () => {
-    if (!status) return 0
+    if (!status) return 0;
 
     const parseSizeToBytes = (sizeStr: string): number => {
-      const parts = sizeStr.split(" ")
-      if (parts.length < 2) return 0
-      const value = parseFloat(parts[0])
-      const unit = parts[1].toLowerCase()
+      const parts = sizeStr.split(' ');
+      if (parts.length < 2) return 0;
+      const value = parseFloat(parts[0]);
+      const unit = parts[1].toLowerCase();
 
-      if (unit.startsWith("gib")) return value * 1024 * 1024 * 1024
-      if (unit.startsWith("mib")) return value * 1024 * 1024
-      if (unit.startsWith("kib")) return value * 1024
-      return value
-    }
+      if (unit.startsWith('gib')) return value * 1024 * 1024 * 1024;
+      if (unit.startsWith('mib')) return value * 1024 * 1024;
+      if (unit.startsWith('kib')) return value * 1024;
+      return value;
+    };
 
-    const alloc = parseSizeToBytes(status.alloc)
-    const sys = parseSizeToBytes(status.sys)
-    if (sys === 0) return 0
-    return Math.min(Math.round((alloc / sys) * 100), 100)
-  }
+    const alloc = parseSizeToBytes(status.alloc);
+    const sys = parseSizeToBytes(status.sys);
+    if (sys === 0) return 0;
+    return Math.min(Math.round((alloc / sys) * 100), 100);
+  };
 
   // 闪烁动画类
   const getPulseClass = (field: string) => {
-    return changedFields[field] ? "animate-pulse text-primary font-bold transition-all duration-300 scale-105 inline-block" : "transition-all duration-300"
-  }
+    return changedFields[field]
+      ? 'animate-pulse text-primary font-bold transition-all duration-300 scale-105 inline-block'
+      : 'transition-all duration-300';
+  };
 
-  const RenderMetricRow = ({ label, value, field }: { label: string; value: string | number; field?: string }) => (
-    <div className="flex items-center justify-between py-2 border-b border-dashed border-border/40 last:border-b-0 hover:bg-muted/30 px-2 rounded-sm transition-colors duration-150">
-      <span className="text-xs font-medium text-muted-foreground">{label}</span>
-      <span className={`text-xs font-mono font-medium ${field ? getPulseClass(field) : ""}`}>
-        {typeof value === "number" ? formatNumber(value) : value}
+  const RenderMetricRow = ({
+    label,
+    value,
+    field,
+  }: {
+    label: string;
+    value: string | number;
+    field?: string;
+  }) => (
+    <div className='flex items-center justify-between py-2 border-b border-dashed border-border/40 last:border-b-0 hover:bg-muted/30 px-2 rounded-sm transition-colors duration-150'>
+      <span className='text-xs font-medium text-muted-foreground'>{label}</span>
+      <span
+        className={`text-xs font-mono font-medium ${field ? getPulseClass(field) : ''}`}
+      >
+        {typeof value === 'number' ? formatNumber(value) : value}
       </span>
     </div>
-  )
+  );
 
   if (loading) {
     return (
-      <div className="space-y-6 p-1">
-        <div className="flex items-center justify-between border-b border-border/40 pb-4">
-          <div className="space-y-1">
-            <Skeleton className="h-6 w-32" />
-            <Skeleton className="h-4 w-48" />
+      <div className='space-y-6 p-1'>
+        <div className='flex items-center justify-between border-b border-border/40 pb-4'>
+          <div className='space-y-1'>
+            <Skeleton className='h-6 w-32' />
+            <Skeleton className='h-4 w-48' />
           </div>
-          <div className="flex items-center gap-3">
-            <Skeleton className="h-8 w-24" />
-            <Skeleton className="h-8 w-16" />
-            <Skeleton className="h-8 w-8" />
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-8 w-24' />
+            <Skeleton className='h-8 w-16' />
+            <Skeleton className='h-8 w-8' />
           </div>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-48 w-full" />
+        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
+          <Skeleton className='h-48 w-full' />
         </div>
       </div>
-    )
+    );
   }
 
   return (
-    <div className="py-6 px-1 space-y-6">
+    <div className='py-6 px-1 space-y-6'>
       {/* 顶部控制栏 */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 gap-4">
-        <div className="flex items-center gap-2">
-          <Activity className="size-5 text-primary" />
+      <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between pb-4 gap-4'>
+        <div className='flex items-center gap-2'>
+          <Activity className='size-5 text-primary' />
           <div>
-            <h1 className="text-2xl font-semibold tracking-tight">系统状态</h1>
+            <h1 className='text-2xl font-semibold tracking-tight'>系统状态</h1>
           </div>
         </div>
 
-        <div className="flex items-center flex-wrap gap-4 bg-muted/30 p-1.5 rounded-lg border border-border/40 backdrop-blur-sm">
-          <div className="flex items-center gap-2 px-1">
+        <div className='flex items-center flex-wrap gap-4 bg-muted/30 p-1.5 rounded-lg border border-border/40 backdrop-blur-sm'>
+          <div className='flex items-center gap-2 px-1'>
             <Switch
-              id="auto-refresh"
+              id='auto-refresh'
               checked={autoRefresh}
               onCheckedChange={setAutoRefresh}
             />
-            <label htmlFor="auto-refresh" className="text-xs font-medium cursor-pointer select-none">
+            <label
+              htmlFor='auto-refresh'
+              className='text-xs font-medium cursor-pointer select-none'
+            >
               自动刷新
             </label>
           </div>
 
           {autoRefresh && (
             <Select value={intervalTime} onValueChange={setIntervalTime}>
-              <SelectTrigger className="h-7 w-20 text-[11px] bg-background border-border/40">
+              <SelectTrigger className='h-7 w-20 text-[11px] bg-background border-border/40'>
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="1000">1s</SelectItem>
-                <SelectItem value="2000">2s</SelectItem>
-                <SelectItem value="5000">5s</SelectItem>
-                <SelectItem value="10000">10s</SelectItem>
+                <SelectItem value='1000'>1s</SelectItem>
+                <SelectItem value='2000'>2s</SelectItem>
+                <SelectItem value='5000'>5s</SelectItem>
+                <SelectItem value='10000'>10s</SelectItem>
               </SelectContent>
             </Select>
           )}
 
           <Button
-            size="sm"
-            variant="secondary"
-            className="h-7 text-[11px] gap-1.5"
+            size='sm'
+            variant='secondary'
+            className='h-7 text-[11px] gap-1.5'
             onClick={() => fetchStatus()}
             disabled={wavelet}
           >
-            <RefreshCw className={`size-3 ${wavelet ? "animate-spin" : ""}`} />
+            <RefreshCw className={`size-3 ${wavelet ? 'animate-spin' : ''}`} />
             刷新
           </Button>
         </div>
@@ -209,130 +245,277 @@ export function SystemStatusManager() {
       {status && (
         <>
           {/* 主网格排版 */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
             {/* 1. 服务概览 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">服务概览</CardTitle>
-                  <CardDescription className="text-[10px]">服务的基础生命指标</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    服务概览
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    服务的基础生命指标
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Activity className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Activity className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-1">
-                <RenderMetricRow label="服务运行时间" value={status.uptime} field="uptime" />
-                <RenderMetricRow label="当前 Goroutines 数量" value={status.num_goroutine} field="num_goroutine" />
-                <RenderMetricRow label="Heap 对象数量" value={status.heap_objects} field="heap_objects" />
+              <CardContent className='space-y-1'>
+                <RenderMetricRow
+                  label='服务运行时间'
+                  value={status.uptime}
+                  field='uptime'
+                />
+                <RenderMetricRow
+                  label='当前 Goroutines 数量'
+                  value={status.num_goroutine}
+                  field='num_goroutine'
+                />
+                <RenderMetricRow
+                  label='Heap 对象数量'
+                  value={status.heap_objects}
+                  field='heap_objects'
+                />
               </CardContent>
             </Card>
 
             {/* 2. 内存统计 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">内存统计</CardTitle>
-                  <CardDescription className="text-[10px]">主内存消耗概览</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    内存统计
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    主内存消耗概览
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Cpu className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Cpu className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-3">
-                <div className="space-y-1">
-                  <RenderMetricRow label="当前内存使用量" value={status.alloc} field="alloc" />
-                  <RenderMetricRow label="所有已分配的内存" value={status.total_alloc} field="total_alloc" />
-                  <RenderMetricRow label="内存占用量" value={status.sys} field="sys" />
-                  <RenderMetricRow label="下次 GC 内存回收量" value={status.next_gc} field="next_gc" />
+              <CardContent className='space-y-3'>
+                <div className='space-y-1'>
+                  <RenderMetricRow
+                    label='当前内存使用量'
+                    value={status.alloc}
+                    field='alloc'
+                  />
+                  <RenderMetricRow
+                    label='所有已分配的内存'
+                    value={status.total_alloc}
+                    field='total_alloc'
+                  />
+                  <RenderMetricRow
+                    label='内存占用量'
+                    value={status.sys}
+                    field='sys'
+                  />
+                  <RenderMetricRow
+                    label='下次 GC 内存回收量'
+                    value={status.next_gc}
+                    field='next_gc'
+                  />
                 </div>
                 {/* 物理内存水位比例 */}
-                <div className="space-y-1 px-1 pt-1">
-                  <div className="flex justify-between text-[10px] text-muted-foreground">
+                <div className='space-y-1 px-1 pt-1'>
+                  <div className='flex justify-between text-[10px] text-muted-foreground'>
                     <span>当前使用率 (Alloc / Sys)</span>
-                    <span className="font-mono">{getMemoryUsagePercent()}%</span>
+                    <span className='font-mono'>
+                      {getMemoryUsagePercent()}%
+                    </span>
                   </div>
-                  <Progress value={getMemoryUsagePercent()} className="h-1.5" />
+                  <Progress value={getMemoryUsagePercent()} className='h-1.5' />
                 </div>
               </CardContent>
             </Card>
 
             {/* 3. 堆/栈详情 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">堆/栈详情</CardTitle>
-                  <CardDescription className="text-[10px]">运行时堆栈内存空间细节</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    堆/栈详情
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    运行时堆栈内存空间细节
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Database className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Database className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-1">
-                <RenderMetricRow label="当前 Heap 内存使用量" value={status.heap_alloc} field="heap_alloc" />
-                <RenderMetricRow label="Heap 内存占用量" value={status.heap_sys} field="heap_sys" />
-                <RenderMetricRow label="Heap 内存空闲量" value={status.heap_idle} field="heap_idle" />
-                <RenderMetricRow label="正在使用的 Heap 内存" value={status.heap_inuse} field="heap_inuse" />
-                <RenderMetricRow label="已释放的 Heap 内存" value={status.heap_released} field="heap_released" />
-                <RenderMetricRow label="启动 Stack 使用量" value={status.stack_inuse} field="stack_inuse" />
-                <RenderMetricRow label="已分配的 Stack 内存" value={status.stack_sys} field="stack_sys" />
+              <CardContent className='space-y-1'>
+                <RenderMetricRow
+                  label='当前 Heap 内存使用量'
+                  value={status.heap_alloc}
+                  field='heap_alloc'
+                />
+                <RenderMetricRow
+                  label='Heap 内存占用量'
+                  value={status.heap_sys}
+                  field='heap_sys'
+                />
+                <RenderMetricRow
+                  label='Heap 内存空闲量'
+                  value={status.heap_idle}
+                  field='heap_idle'
+                />
+                <RenderMetricRow
+                  label='正在使用的 Heap 内存'
+                  value={status.heap_inuse}
+                  field='heap_inuse'
+                />
+                <RenderMetricRow
+                  label='已释放的 Heap 内存'
+                  value={status.heap_released}
+                  field='heap_released'
+                />
+                <RenderMetricRow
+                  label='启动 Stack 使用量'
+                  value={status.stack_inuse}
+                  field='stack_inuse'
+                />
+                <RenderMetricRow
+                  label='已分配的 Stack 内存'
+                  value={status.stack_sys}
+                  field='stack_sys'
+                />
               </CardContent>
             </Card>
 
             {/* 4. 底层组件与结构体 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">底层及结构体内存</CardTitle>
-                  <CardDescription className="text-[10px]">运行时底层管理结构体开销</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    底层及结构体内存
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    运行时底层管理结构体开销
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <HardDrive className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <HardDrive className='size-4' />
                 </Badge>
               </CardHeader>
-              <CardContent className="space-y-1">
-                <RenderMetricRow label="MSpan 结构内存使用量" value={status.mspan_inuse} field="mspan_inuse" />
-                <RenderMetricRow label="已分配的 MSpan 结构内存" value={status.mspan_sys} field="mspan_sys" />
-                <RenderMetricRow label="MCache 结构内存使用量" value={status.mcache_inuse} field="mcache_inuse" />
-                <RenderMetricRow label="已分配的 MCache 结构内存" value={status.mcache_sys} field="mcache_sys" />
-                <RenderMetricRow label="已分配的剖析哈希表内存" value={status.buck_hash_sys} field="buck_hash_sys" />
-                <RenderMetricRow label="已分配的 GC 元数据内存" value={status.gc_sys} field="gc_sys" />
-                <RenderMetricRow label="其它已分配的系统内存" value={status.other_sys} field="other_sys" />
+              <CardContent className='space-y-1'>
+                <RenderMetricRow
+                  label='MSpan 结构内存使用量'
+                  value={status.mspan_inuse}
+                  field='mspan_inuse'
+                />
+                <RenderMetricRow
+                  label='已分配的 MSpan 结构内存'
+                  value={status.mspan_sys}
+                  field='mspan_sys'
+                />
+                <RenderMetricRow
+                  label='MCache 结构内存使用量'
+                  value={status.mcache_inuse}
+                  field='mcache_inuse'
+                />
+                <RenderMetricRow
+                  label='已分配的 MCache 结构内存'
+                  value={status.mcache_sys}
+                  field='mcache_sys'
+                />
+                <RenderMetricRow
+                  label='已分配的剖析哈希表内存'
+                  value={status.buck_hash_sys}
+                  field='buck_hash_sys'
+                />
+                <RenderMetricRow
+                  label='已分配的 GC 元数据内存'
+                  value={status.gc_sys}
+                  field='gc_sys'
+                />
+                <RenderMetricRow
+                  label='其它已分配的系统内存'
+                  value={status.other_sys}
+                  field='other_sys'
+                />
               </CardContent>
             </Card>
 
             {/* 5. 垃圾回收与分配计数 */}
-            <Card className="shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300 md:col-span-2">
-              <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-                <div className="space-y-0.5">
-                  <CardTitle className="text-sm font-semibold">垃圾回收与分配计数</CardTitle>
-                  <CardDescription className="text-[10px]">GC 历史数据与分配频次</CardDescription>
+            <Card className='shadow-sm border-border/40 bg-card/50 backdrop-blur-md hover:border-primary/20 transition-all duration-300 md:col-span-2'>
+              <CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
+                <div className='space-y-0.5'>
+                  <CardTitle className='text-sm font-semibold'>
+                    垃圾回收与分配计数
+                  </CardTitle>
+                  <CardDescription className='text-[10px]'>
+                    GC 历史数据与分配频次
+                  </CardDescription>
                 </div>
-                <Badge variant="secondary" className="p-1 rounded-full bg-primary/10 text-primary border-none">
-                  <Layers className="size-4" />
+                <Badge
+                  variant='secondary'
+                  className='p-1 rounded-full bg-primary/10 text-primary border-none'
+                >
+                  <Layers className='size-4' />
                 </Badge>
               </CardHeader>
               <CardContent>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6">
+                <div className='grid grid-cols-1 sm:grid-cols-2 gap-x-6'>
                   <div>
-                    <RenderMetricRow label="GC 执行次数" value={status.num_gc} field="num_gc" />
-                    <RenderMetricRow label="距离上次 GC 时间" value={status.last_gc_time} field="last_gc_time" />
-                    <RenderMetricRow label="GC 暂停时间总量" value={status.pause_total_ns} field="pause_total_ns" />
-                    <RenderMetricRow label="上次 GC 暂停时间" value={status.last_pause} field="last_pause" />
+                    <RenderMetricRow
+                      label='GC 执行次数'
+                      value={status.num_gc}
+                      field='num_gc'
+                    />
+                    <RenderMetricRow
+                      label='距离上次 GC 时间'
+                      value={status.last_gc_time}
+                      field='last_gc_time'
+                    />
+                    <RenderMetricRow
+                      label='GC 暂停时间总量'
+                      value={status.pause_total_ns}
+                      field='pause_total_ns'
+                    />
+                    <RenderMetricRow
+                      label='上次 GC 暂停时间'
+                      value={status.last_pause}
+                      field='last_pause'
+                    />
                   </div>
                   <div>
-                    <RenderMetricRow label="内存分配次数" value={status.mallocs} field="mallocs" />
-                    <RenderMetricRow label="内存释放次数" value={status.frees} field="frees" />
-                    <RenderMetricRow label="指针查找次数" value={status.lookups} field="lookups" />
+                    <RenderMetricRow
+                      label='内存分配次数'
+                      value={status.mallocs}
+                      field='mallocs'
+                    />
+                    <RenderMetricRow
+                      label='内存释放次数'
+                      value={status.frees}
+                      field='frees'
+                    />
+                    <RenderMetricRow
+                      label='指针查找次数'
+                      value={status.lookups}
+                      field='lookups'
+                    />
                   </div>
                 </div>
               </CardContent>
             </Card>
-
           </div>
         </>
       )}
     </div>
-  )
+  );
 }

frontend/app/(main)/admin/settings/components/uptimekuma-site-modal.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import {useEffect, useMemo, useState} from "react"
-import {useQuery} from "@tanstack/react-query"
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
-import {Button} from "@/components/ui/button"
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -11,17 +11,17 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import {Input} from "@/components/ui/input"
-import {Label} from "@/components/ui/label"
-import {ProxyRouteService} from "@/lib/services/openflare"
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ProxyRouteService } from '@/lib/services/openflare';
 
 type UptimeKumaSiteSelectModalProps = {
-  open: boolean
-  selectedSites: string[]
-  onOpenChange: (open: boolean) => void
-  onSave: (sites: string[]) => void
-}
+  open: boolean;
+  selectedSites: string[];
+  onOpenChange: (open: boolean) => void;
+  onSave: (sites: string[]) => void;
+};
 
 export function UptimeKumaSiteSelectModal({
   open,
@@ -29,62 +29,66 @@ export function UptimeKumaSiteSelectModal({
   onOpenChange,
   onSave,
 }: UptimeKumaSiteSelectModalProps) {
-  const [searchTerm, setSearchTerm] = useState("")
-  const [tempSelected, setTempSelected] = useState<Set<string>>(new Set())
+  const [searchTerm, setSearchTerm] = useState('');
+  const [tempSelected, setTempSelected] = useState<Set<string>>(new Set());
 
   const routesQuery = useQuery({
-    queryKey: ["openflare", "proxy-routes"],
+    queryKey: ['openflare', 'proxy-routes'],
     queryFn: () => ProxyRouteService.list(),
     enabled: open,
-  })
+  });
 
   useEffect(() => {
-    if (!open) return
-    setTempSelected(new Set(selectedSites.map((site) => site.trim()).filter(Boolean)))
-    setSearchTerm("")
-  }, [open, selectedSites])
+    if (!open) return;
+    setTempSelected(
+      new Set(selectedSites.map((site) => site.trim()).filter(Boolean)),
+    );
+    setSearchTerm('');
+  }, [open, selectedSites]);
 
   const filteredRoutes = useMemo(() => {
-    const routes = routesQuery.data ?? []
-    const keyword = searchTerm.trim().toLowerCase()
-    if (!keyword) return routes
+    const routes = routesQuery.data ?? [];
+    const keyword = searchTerm.trim().toLowerCase();
+    if (!keyword) return routes;
     return routes.filter((route) => {
-      const domains = (route.zone_domains ?? []).map((item) => item.domain).join(' ')
+      const domains = (route.zone_domains ?? [])
+        .map((item) => item.domain)
+        .join(' ');
       return (
         route.site_name.toLowerCase().includes(keyword) ||
         domains.toLowerCase().includes(keyword)
-      )
-    })
-  }, [routesQuery.data, searchTerm])
+      );
+    });
+  }, [routesQuery.data, searchTerm]);
 
   const toggleSite = (siteName: string) => {
     setTempSelected((previous) => {
-      const next = new Set(previous)
-      if (next.has(siteName)) next.delete(siteName)
-      else next.add(siteName)
-      return next
-    })
-  }
+      const next = new Set(previous);
+      if (next.has(siteName)) next.delete(siteName);
+      else next.add(siteName);
+      return next;
+    });
+  };
 
   const handleSelectAll = () => {
     setTempSelected((previous) => {
-      const next = new Set(previous)
-      filteredRoutes.forEach((route) => next.add(route.site_name))
-      return next
-    })
-  }
+      const next = new Set(previous);
+      filteredRoutes.forEach((route) => next.add(route.site_name));
+      return next;
+    });
+  };
 
   const handleDeselectAll = () => {
     setTempSelected((previous) => {
-      const next = new Set(previous)
-      filteredRoutes.forEach((route) => next.delete(route.site_name))
-      return next
-    })
-  }
+      const next = new Set(previous);
+      filteredRoutes.forEach((route) => next.delete(route.site_name));
+      return next;
+    });
+  };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className='max-w-2xl'>
         <DialogHeader>
           <DialogTitle>选择监控站点</DialogTitle>
           <DialogDescription>
@@ -92,88 +96,111 @@ export function UptimeKumaSiteSelectModal({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          <div className="space-y-1.5">
+        <div className='space-y-4'>
+          <div className='space-y-1.5'>
             <Label>搜索站点</Label>
             <Input
               value={searchTerm}
               onChange={(event) => setSearchTerm(event.target.value)}
-              placeholder="按名称或域名搜索..."
+              placeholder='按名称或域名搜索...'
             />
           </div>
 
-          <div className="flex flex-wrap gap-2">
-            <Button type="button" variant="outline" size="sm" onClick={handleSelectAll}>
+          <div className='flex flex-wrap gap-2'>
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={handleSelectAll}
+            >
               全选过滤项
             </Button>
-            <Button type="button" variant="outline" size="sm" onClick={handleDeselectAll}>
+            <Button
+              type='button'
+              variant='outline'
+              size='sm'
+              onClick={handleDeselectAll}
+            >
               清空过滤项
             </Button>
           </div>
 
-          <div className="max-h-72 overflow-y-auto rounded-lg border">
+          <div className='max-h-72 overflow-y-auto rounded-lg border'>
             {routesQuery.isLoading ? (
-              <p className="p-4 text-sm text-muted-foreground">加载站点列表...</p>
+              <p className='p-4 text-sm text-muted-foreground'>
+                加载站点列表...
+              </p>
             ) : routesQuery.isError ? (
-              <p className="p-4 text-sm text-destructive">
+              <p className='p-4 text-sm text-destructive'>
                 {routesQuery.error instanceof Error
                   ? routesQuery.error.message
-                  : "加载站点失败"}
+                  : '加载站点失败'}
               </p>
             ) : filteredRoutes.length === 0 ? (
-              <p className="p-4 text-sm text-muted-foreground">无匹配的站点</p>
+              <p className='p-4 text-sm text-muted-foreground'>无匹配的站点</p>
             ) : (
-              <table className="w-full text-left text-sm">
-                <thead className="sticky top-0 bg-muted/60 text-xs uppercase text-muted-foreground">
+              <table className='w-full text-left text-sm'>
+                <thead className='sticky top-0 bg-muted/60 text-xs uppercase text-muted-foreground'>
                   <tr>
-                    <th className="w-12 px-3 py-2">选择</th>
-                    <th className="px-3 py-2">站点名称</th>
-                    <th className="px-3 py-2">主域名</th>
+                    <th className='w-12 px-3 py-2'>选择</th>
+                    <th className='px-3 py-2'>站点名称</th>
+                    <th className='px-3 py-2'>主域名</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y">
+                <tbody className='divide-y'>
                   {filteredRoutes.map((route) => {
-                    const checked = tempSelected.has(route.site_name)
+                    const checked = tempSelected.has(route.site_name);
                     return (
                       <tr
                         key={route.id}
-                        className="cursor-pointer hover:bg-muted/30"
+                        className='cursor-pointer hover:bg-muted/30'
                         onClick={() => toggleSite(route.site_name)}
                       >
-                        <td className="px-3 py-2" onClick={(event) => event.stopPropagation()}>
+                        <td
+                          className='px-3 py-2'
+                          onClick={(event) => event.stopPropagation()}
+                        >
                           <input
-                            type="checkbox"
+                            type='checkbox'
                             checked={checked}
                             onChange={() => toggleSite(route.site_name)}
-                            className="size-4 rounded border-input"
+                            className='size-4 rounded border-input'
                           />
                         </td>
-                        <td className="px-3 py-2 font-medium">{route.site_name}</td>
-                        <td className="px-3 py-2 text-muted-foreground">
-                          {(route.zone_domains ?? []).map((item) => item.domain).join(', ') || '—'}
+                        <td className='px-3 py-2 font-medium'>
+                          {route.site_name}
+                        </td>
+                        <td className='px-3 py-2 text-muted-foreground'>
+                          {(route.zone_domains ?? [])
+                            .map((item) => item.domain)
+                            .join(', ') || '—'}
                         </td>
                       </tr>
-                    )
+                    );
                   })}
                 </tbody>
               </table>
             )}
           </div>
 
-          <p className="text-right text-xs text-muted-foreground">
+          <p className='text-right text-xs text-muted-foreground'>
             已选择 {tempSelected.size} 个监控站点
           </p>
         </div>
 
         <DialogFooter>
-          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+          <Button
+            type='button'
+            variant='outline'
+            onClick={() => onOpenChange(false)}
+          >
             取消
           </Button>
           <Button
-            type="button"
+            type='button'
             onClick={() => {
-              onSave(Array.from(tempSelected))
-              onOpenChange(false)
+              onSave(Array.from(tempSelected));
+              onOpenChange(false);
             }}
           >
             保存选择
@@ -181,5 +208,5 @@ export function UptimeKumaSiteSelectModal({
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+}