diff --git a/.gitignore b/.gitignore
index c9e2fb916e..c6af1a81b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,6 @@ dist-ssr
 update.json
 scripts/_env.sh
 .vscode
+
+.eslintcache
+.stylelintcache
diff --git a/package.json b/package.json
index 73f99b8bdb..42e126e086 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,9 @@
     "web:serve": "vite preview",
     "lint": "run-s lint:*",
     "lint:prettier": "prettier --check .",
-    "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx .",
+    "lint:eslint": "eslint --cache .",
     "lint:ts": "tsc --noEmit",
-    "lint:backend": "cargo clippy --manifest-path ./backend/Cargo.toml --all-targets --all-features -- -D warnings",
+    "lint:backend": "cargo clippy --manifest-path ./backend/Cargo.toml --all-targets --all-features",
     "fmt": "run-p fmt:*",
     "fmt:backend": "cargo fmt --manifest-path ./backend/Cargo.toml --all",
     "fmt:prettier": "prettier --write .",
diff --git a/scripts/check.ts b/scripts/check.ts
index 0a703c2c1f..432550b2a2 100644
--- a/scripts/check.ts
+++ b/scripts/check.ts
@@ -174,7 +174,7 @@ function clashRs(): BinInfo {
 async function getLatestVersion() {
   try {
     const response = await fetch(VERSION_URL, { method: "GET" });
-    let v = await response.text();
+    const v = await response.text();
     META_VERSION = v.trim();
     console.log(`Latest release version: ${META_VERSION}`);
   } catch (error) {
diff --git a/scripts/updater.ts b/scripts/updater.ts
index ded7c0aea6..1d00e2eb99 100644
--- a/scripts/updater.ts
+++ b/scripts/updater.ts
@@ -135,7 +135,7 @@ async function resolveUpdater() {
   });
 
   // delete the old assets
-  for (let asset of updateRelease.assets) {
+  for (const asset of updateRelease.assets) {
     if (asset.name === UPDATE_JSON_FILE) {
       await github.rest.repos.deleteReleaseAsset({
         ...options,
diff --git a/src/components/base/base-dialog.tsx b/src/components/base/base-dialog.tsx
index 56d90eaa47..3d9b651dd8 100644
--- a/src/components/base/base-dialog.tsx
+++ b/src/components/base/base-dialog.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { LoadingButton } from "@mui/lab";
 import {
   Button,
   Dialog,
@@ -8,7 +8,7 @@ import {
   type SxProps,
   type Theme,
 } from "@mui/material";
-import { LoadingButton } from "@mui/lab";
+import { ReactNode } from "react";
 
 interface Props {
   title: ReactNode;
@@ -31,7 +31,7 @@ export interface DialogRef {
   close: () => void;
 }
 
-export const BaseDialog: React.FC<Props> = (props) => {
+export function BaseDialog(props: Props) {
   const {
     open,
     title,
@@ -71,4 +71,4 @@ export const BaseDialog: React.FC<Props> = (props) => {
       )}
     </Dialog>
   );
-};
+}
diff --git a/src/components/base/base-notice.tsx b/src/components/base/base-notice.tsx
index 58490344dd..d466b6371b 100644
--- a/src/components/base/base-notice.tsx
+++ b/src/components/base/base-notice.tsx
@@ -1,7 +1,7 @@
-import { createRoot } from "react-dom/client";
-import { ReactNode, useState } from "react";
+import { CheckCircleRounded, Close, ErrorRounded } from "@mui/icons-material";
 import { Box, IconButton, Slide, Snackbar, Typography } from "@mui/material";
-import { Close, CheckCircleRounded, ErrorRounded } from "@mui/icons-material";
+import { ReactNode, useState } from "react";
+import { createRoot } from "react-dom/client";
 
 interface InnerProps {
   type: string;
@@ -68,7 +68,7 @@ interface NoticeInstance {
 
 let parent: HTMLDivElement = null!;
 
-// @ts-ignore
+// @ts-expect-error 90 行动态添加了 info、error、success 属性
 export const Notice: NoticeInstance = (props) => {
   if (!parent) {
     parent = document.createElement("div");
diff --git a/src/components/connection/connection-detail.tsx b/src/components/connection/connection-detail.tsx
index b07b375e1e..f59f88a87b 100644
--- a/src/components/connection/connection-detail.tsx
+++ b/src/components/connection/connection-detail.tsx
@@ -1,10 +1,10 @@
-import dayjs from "dayjs";
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { Box, Button, Snackbar } from "@mui/material";
 import { deleteConnection } from "@/services/api";
-import { truncateStr } from "@/utils/truncate-str";
 import parseTraffic from "@/utils/parse-traffic";
+import { truncateStr } from "@/utils/truncate-str";
+import { Box, Button, Snackbar } from "@mui/material";
+import { useLockFn } from "ahooks";
+import dayjs from "dayjs";
+import { forwardRef, useImperativeHandle, useState } from "react";
 
 export interface ConnectionDetailRef {
   open: (detail: IConnectionsItem) => void;
@@ -40,6 +40,8 @@ export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
   },
 );
 
+ConnectionDetail.displayName = "ConnectionDetail";
+
 interface InnerProps {
   data: IConnectionsItem;
   onClose?: () => void;
diff --git a/src/components/layout/traffic-graph.tsx b/src/components/layout/traffic-graph.tsx
index 5c1a6b7ef9..0fb5f95415 100644
--- a/src/components/layout/traffic-graph.tsx
+++ b/src/components/layout/traffic-graph.tsx
@@ -1,5 +1,5 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { useTheme } from "@mui/material";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 
 const maxPoint = 30;
 
@@ -193,3 +193,5 @@ export const TrafficGraph = forwardRef<TrafficRef>((props, ref) => {
 
   return <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />;
 });
+
+TrafficGraph.displayName = "TrafficGraph";
diff --git a/src/components/profile/profile-viewer.tsx b/src/components/profile/profile-viewer.tsx
index a63d972953..233f8008cc 100644
--- a/src/components/profile/profile-viewer.tsx
+++ b/src/components/profile/profile-viewer.tsx
@@ -1,13 +1,6 @@
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { BaseDialog } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { createProfile, patchProfile } from "@/services/cmds";
 import {
   Box,
   FormControl,
@@ -16,14 +9,21 @@ import {
   MenuItem,
   Select,
   Switch,
-  styled,
   TextField,
+  styled,
 } from "@mui/material";
-import { createProfile, patchProfile } from "@/services/cmds";
-import { BaseDialog } from "@/components/base";
 import { version } from "@root/package.json";
+import { useLockFn } from "ahooks";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { FileInput } from "./file-input";
-import { useNotification } from "@/hooks/use-notification";
 
 interface Props {
   onChange: () => void;
@@ -277,6 +277,8 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
   },
 );
 
+ProfileViewer.displayName = "ProfileViewer";
+
 const StyledBox = styled(Box)(() => ({
   margin: "8px 0 8px 8px",
   display: "flex",
diff --git a/src/components/proxy/proxy-head.tsx b/src/components/proxy/proxy-head.tsx
index fe29cb83bf..8ca486d744 100644
--- a/src/components/proxy/proxy-head.tsx
+++ b/src/components/proxy/proxy-head.tsx
@@ -1,23 +1,23 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Box, IconButton, TextField, SxProps } from "@mui/material";
+import { useVerge } from "@/hooks/use-verge";
+import delayManager from "@/services/delay";
 import {
   AccessTimeRounded,
+  FilterAltOffRounded,
+  FilterAltRounded,
   MyLocationRounded,
   NetworkCheckRounded,
-  FilterAltRounded,
-  FilterAltOffRounded,
-  VisibilityRounded,
-  VisibilityOffRounded,
-  WifiTetheringRounded,
-  WifiTetheringOffRounded,
   SortByAlphaRounded,
   SortRounded,
+  VisibilityOffRounded,
+  VisibilityRounded,
+  WifiTetheringOffRounded,
+  WifiTetheringRounded,
 } from "@mui/icons-material";
-import { useVerge } from "@/hooks/use-verge";
-import type { HeadState } from "./use-head-state";
+import { Box, IconButton, SxProps, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import type { ProxySortType } from "./use-filter-sort";
-import delayManager from "@/services/delay";
+import type { HeadState } from "./use-head-state";
 
 interface Props {
   sx?: SxProps;
@@ -45,7 +45,7 @@ export const ProxyHead = (props: Props) => {
   const { verge } = useVerge();
 
   useEffect(() => {
-    delayManager.setUrl(groupName, testUrl || verge?.default_latency_test!);
+    delayManager.setUrl(groupName, testUrl || verge!.default_latency_test!);
   }, [groupName, testUrl, verge?.default_latency_test]);
 
   return (
diff --git a/src/components/setting/mods/clash-core-viewer.tsx b/src/components/setting/mods/clash-core-viewer.tsx
index 6ecaec9572..265d9e84ab 100644
--- a/src/components/setting/mods/clash-core-viewer.tsx
+++ b/src/components/setting/mods/clash-core-viewer.tsx
@@ -135,3 +135,5 @@ export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+ClashCoreViewer.displayName = "ClashCoreViewer";
diff --git a/src/components/setting/mods/clash-field-viewer.tsx b/src/components/setting/mods/clash-field-viewer.tsx
index 2681454cf8..9e389af5f6 100644
--- a/src/components/setting/mods/clash-field-viewer.tsx
+++ b/src/components/setting/mods/clash-field-viewer.tsx
@@ -1,17 +1,17 @@
-import useSWR from "swr";
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Checkbox, Divider, Stack, Tooltip, Typography } from "@mui/material";
-import { InfoRounded } from "@mui/icons-material";
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { useProfiles } from "@/hooks/use-profiles";
 import { getRuntimeExists } from "@/services/cmds";
 import {
-  HANDLE_FIELDS,
   DEFAULT_FIELDS,
+  HANDLE_FIELDS,
   OTHERS_FIELDS,
 } from "@/utils/clash-fields";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { useProfiles } from "@/hooks/use-profiles";
-import { useNotification } from "@/hooks/use-notification";
+import { InfoRounded } from "@mui/icons-material";
+import { Checkbox, Divider, Stack, Tooltip, Typography } from "@mui/material";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+import useSWR from "swr";
 
 const otherFields = [...OTHERS_FIELDS];
 const handleFields = [...HANDLE_FIELDS, ...DEFAULT_FIELDS];
@@ -114,6 +114,8 @@ export const ClashFieldViewer = forwardRef<DialogRef>((props, ref) => {
   );
 });
 
+ClashFieldViewer.displayName = "ClashFieldViewer";
+
 function WarnIcon() {
   return (
     <Tooltip title="The field exists in the config but not enabled.">
diff --git a/src/components/setting/mods/clash-port-viewer.tsx b/src/components/setting/mods/clash-port-viewer.tsx
index ee107b8f8b..02c0ebb298 100644
--- a/src/components/setting/mods/clash-port-viewer.tsx
+++ b/src/components/setting/mods/clash-port-viewer.tsx
@@ -1,11 +1,11 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useLockFn } from "ahooks";
-import { List, ListItem, ListItemText, TextField } from "@mui/material";
-import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef } from "@/components/base";
-import { useVerge } from "@/hooks/use-verge";
+import { useClashInfo } from "@/hooks/use-clash";
 import { useNotification } from "@/hooks/use-notification";
+import { useVerge } from "@/hooks/use-verge";
+import { List, ListItem, ListItemText, TextField } from "@mui/material";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -69,3 +69,5 @@ export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+ClashPortViewer.displayName = "ClashPortViewer";
diff --git a/src/components/setting/mods/config-viewer.tsx b/src/components/setting/mods/config-viewer.tsx
index 22c169c299..6ca11cbb4f 100644
--- a/src/components/setting/mods/config-viewer.tsx
+++ b/src/components/setting/mods/config-viewer.tsx
@@ -1,3 +1,8 @@
+import { BaseDialog, DialogRef } from "@/components/base";
+import { getRuntimeYaml } from "@/services/cmds";
+import { atomThemeMode } from "@/services/states";
+import { Chip } from "@mui/material";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import {
   forwardRef,
   useEffect,
@@ -7,11 +12,6 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { useRecoilValue } from "recoil";
-import { Chip } from "@mui/material";
-import { atomThemeMode } from "@/services/states";
-import { getRuntimeYaml } from "@/services/cmds";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 
 import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";
 import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
@@ -74,3 +74,5 @@ export const ConfigViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+ConfigViewer.displayName = "ConfigViewer";
diff --git a/src/components/setting/mods/controller-viewer.tsx b/src/components/setting/mods/controller-viewer.tsx
index ae1068b755..4dd97ef4ed 100644
--- a/src/components/setting/mods/controller-viewer.tsx
+++ b/src/components/setting/mods/controller-viewer.tsx
@@ -1,10 +1,10 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
-import { List, ListItem, ListItemText, TextField } from "@mui/material";
-import { useClashInfo } from "@/hooks/use-clash";
 import { BaseDialog, DialogRef } from "@/components/base";
+import { useClashInfo } from "@/hooks/use-clash";
 import { useNotification } from "@/hooks/use-notification";
+import { List, ListItem, ListItemText, TextField } from "@mui/material";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -73,3 +73,5 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+ControllerViewer.displayName = "ControllerViewer";
diff --git a/src/components/setting/mods/hotkey-viewer.tsx b/src/components/setting/mods/hotkey-viewer.tsx
index 2125940312..7e2a92d593 100644
--- a/src/components/setting/mods/hotkey-viewer.tsx
+++ b/src/components/setting/mods/hotkey-viewer.tsx
@@ -1,11 +1,11 @@
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { useVerge } from "@/hooks/use-verge";
+import { Typography, styled } from "@mui/material";
+import { useLockFn } from "ahooks";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLockFn } from "ahooks";
-import { styled, Typography } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef } from "@/components/base";
 import { HotkeyInput } from "./hotkey-input";
-import { useNotification } from "@/hooks/use-notification";
 
 const ItemWrapper = styled("div")`
   display: flex;
@@ -105,3 +105,5 @@ export const HotkeyViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+HotkeyViewer.displayName = "HotkeyViewer";
diff --git a/src/components/setting/mods/layout-viewer.tsx b/src/components/setting/mods/layout-viewer.tsx
index 59209665b1..a43f3224ac 100644
--- a/src/components/setting/mods/layout-viewer.tsx
+++ b/src/components/setting/mods/layout-viewer.tsx
@@ -1,11 +1,11 @@
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { useVerge } from "@/hooks/use-verge";
+import { List, Switch } from "@mui/material";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { List, Switch } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { SettingItem } from "./setting-comp";
 import { GuardState } from "./guard-state";
-import { useNotification } from "@/hooks/use-notification";
+import { SettingItem } from "./setting-comp";
 
 export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -79,3 +79,5 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+LayoutViewer.displayName = "LayoutViewer";
diff --git a/src/components/setting/mods/misc-viewer.tsx b/src/components/setting/mods/misc-viewer.tsx
index dab4a0653a..57f5304cda 100644
--- a/src/components/setting/mods/misc-viewer.tsx
+++ b/src/components/setting/mods/misc-viewer.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { useVerge } from "@/hooks/use-verge";
 import {
   List,
   ListItem,
@@ -10,9 +10,9 @@ import {
   Switch,
   TextField,
 } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { useNotification } from "@/hooks/use-notification";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -169,3 +169,5 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+MiscViewer.displayName = "MiscViewer";
diff --git a/src/components/setting/mods/service-viewer.tsx b/src/components/setting/mods/service-viewer.tsx
index e463e3dc16..0f436027c5 100644
--- a/src/components/setting/mods/service-viewer.tsx
+++ b/src/components/setting/mods/service-viewer.tsx
@@ -1,16 +1,16 @@
-import useSWR from "swr";
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
-import { Button, Stack, Typography } from "@mui/material";
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
 import {
   checkService,
   installService,
-  uninstallService,
   patchVergeConfig,
+  uninstallService,
 } from "@/services/cmds";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { useNotification } from "@/hooks/use-notification";
+import { Button, Stack, Typography } from "@mui/material";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+import useSWR from "swr";
 
 interface Props {
   enable: boolean;
@@ -122,3 +122,5 @@ export const ServiceViewer = forwardRef<DialogRef, Props>((props, ref) => {
     </BaseDialog>
   );
 });
+
+ServiceViewer.displayName = "ServiceViewer";
diff --git a/src/components/setting/mods/sysproxy-viewer.tsx b/src/components/setting/mods/sysproxy-viewer.tsx
index a6b5e2e5c4..cd7768592f 100644
--- a/src/components/setting/mods/sysproxy-viewer.tsx
+++ b/src/components/setting/mods/sysproxy-viewer.tsx
@@ -1,21 +1,21 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { useVerge } from "@/hooks/use-verge";
+import { getSystemProxy } from "@/services/cmds";
 import {
   Box,
   InputAdornment,
   List,
   ListItem,
   ListItemText,
-  styled,
   Switch,
   TextField,
   Typography,
+  styled,
 } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { getSystemProxy } from "@/services/cmds";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { useNotification } from "@/hooks/use-notification";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -163,6 +163,8 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   );
 });
 
+SysproxyViewer.displayName = "SysproxyViewer";
+
 const FlexBox = styled("div")`
   display: flex;
   margin-top: 4px;
diff --git a/src/components/setting/mods/theme-viewer.tsx b/src/components/setting/mods/theme-viewer.tsx
index 311e14ff59..8c198d650b 100644
--- a/src/components/setting/mods/theme-viewer.tsx
+++ b/src/components/setting/mods/theme-viewer.tsx
@@ -1,18 +1,18 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { useVerge } from "@/hooks/use-verge";
+import { defaultDarkTheme, defaultTheme } from "@/pages/_theme";
 import {
   List,
   ListItem,
   ListItemText,
-  styled,
   TextField,
+  styled,
   useTheme,
 } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { useNotification } from "@/hooks/use-notification";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -124,6 +124,8 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
   );
 });
 
+ThemeViewer.displayName = "ThemeViewer";
+
 const Item = styled(ListItem)(() => ({
   padding: "5px 2px",
 }));
diff --git a/src/components/setting/mods/update-viewer.tsx b/src/components/setting/mods/update-viewer.tsx
index 024b628945..f367e74db4 100644
--- a/src/components/setting/mods/update-viewer.tsx
+++ b/src/components/setting/mods/update-viewer.tsx
@@ -1,15 +1,15 @@
-import useSWR from "swr";
-import snarkdown from "snarkdown";
-import { forwardRef, useImperativeHandle, useState, useMemo } from "react";
-import { useLockFn } from "ahooks";
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useNotification } from "@/hooks/use-notification";
+import { atomUpdateState } from "@/services/states";
 import { Box, styled } from "@mui/material";
-import { useRecoilState } from "recoil";
-import { useTranslation } from "react-i18next";
 import { relaunch } from "@tauri-apps/api/process";
 import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { atomUpdateState } from "@/services/states";
-import { useNotification } from "@/hooks/use-notification";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useRecoilState } from "recoil";
+import snarkdown from "snarkdown";
+import useSWR from "swr";
 
 const UpdateLog = styled(Box)(() => ({
   "h1,h2,h3,ul,ol,p": { margin: "0.5em 0", color: "inherit" },
@@ -69,3 +69,5 @@ export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+UpdateViewer.displayName = "UpdateViewer";
diff --git a/src/components/setting/mods/web-ui-viewer.tsx b/src/components/setting/mods/web-ui-viewer.tsx
index 6bdfdcfafc..16dbc60107 100644
--- a/src/components/setting/mods/web-ui-viewer.tsx
+++ b/src/components/setting/mods/web-ui-viewer.tsx
@@ -1,13 +1,13 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
-import { Button, Box, Typography } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { openWebUrl } from "@/services/cmds";
 import { BaseDialog, BaseEmpty, DialogRef } from "@/components/base";
 import { useClashInfo } from "@/hooks/use-clash";
-import { WebUIItem } from "./web-ui-item";
 import { useNotification } from "@/hooks/use-notification";
+import { useVerge } from "@/hooks/use-verge";
+import { openWebUrl } from "@/services/cmds";
+import { Box, Button, Typography } from "@mui/material";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { WebUIItem } from "./web-ui-item";
 
 export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -118,7 +118,8 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
           text="Empty List"
           extra={
             <Typography mt={2} sx={{ fontSize: "12px" }}>
-              Replace host, port, secret with "%host" "%port" "%secret"
+              Replace host, port, secret with &quot;%host&quot;
+              &quot;%port&quot; &quot;%secret&quot;
             </Typography>
           }
         />
@@ -136,3 +137,5 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
     </BaseDialog>
   );
 });
+
+WebUIViewer.displayName = "WebUIViewer";
diff --git a/src/hooks/use-notification.ts b/src/hooks/use-notification.ts
index 1db63d4e7b..38f5e1341c 100644
--- a/src/hooks/use-notification.ts
+++ b/src/hooks/use-notification.ts
@@ -28,7 +28,7 @@ export const useNotification = async (
   } else if (!checkPermission()) {
     throw new Error("notification permission not granted!");
   } else {
-    let options: Options = {
+    const options: Options = {
       title: title,
     };
     if (body) options.body = body;