Refactor imports and improve code organization across multiple components and hooks

- Consolidated and reordered imports in various files for better readability and maintainability.
- Removed unused imports and ensured consistent import styles.
- Enhanced the structure of components by grouping related imports together.
- Updated the layout and organization of hooks to streamline functionality.
- Improved the overall code quality by following best practices in import management.

src/components/setting/mods/backup-config-viewer.tsx

@@ -1,9 +1,5 @@
-import { useState, useRef, memo, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
-import { useVerge } from "@/hooks/use-verge";
-import { isValidUrl } from "@/utils/helper";
-import { useLockFn } from "ahooks";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import {
   TextField,
   Button,
@@ -12,10 +8,15 @@ import {
   IconButton,
   InputAdornment,
 } from "@mui/material";
-import Visibility from "@mui/icons-material/Visibility";
-import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import { useLockFn } from "ahooks";
+import { useState, useRef, memo, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { useVerge } from "@/hooks/use-verge";
 import { saveWebdavConfig, createWebdavBackup } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
+import { isValidUrl } from "@/utils/helper";
 
 interface BackupConfigViewerProps {
   onBackupSuccess: () => Promise<void>;

src/components/setting/mods/backup-table-viewer.tsx

@@ -1,4 +1,5 @@
-import { SVGProps, memo } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import RestoreIcon from "@mui/icons-material/Restore";
 import {
   Box,
   Paper,
@@ -14,15 +15,15 @@ import {
 } from "@mui/material";
 import { Typography } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
 import { Dayjs } from "dayjs";
+import { SVGProps, memo } from "react";
+import { useTranslation } from "react-i18next";
+
 import {
   deleteWebdavBackup,
   restoreWebDavBackup,
   restartApp,
 } from "@/services/cmds";
-import DeleteIcon from "@mui/icons-material/Delete";
-import RestoreIcon from "@mui/icons-material/Restore";
 import { showNotice } from "@/services/noticeService";
 
 export type BackupFile = IWebDavFile & {

src/components/setting/mods/backup-viewer.tsx

@@ -1,3 +1,6 @@
+import { Box, Paper, Divider } from "@mui/material";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
 import {
   forwardRef,
   useImperativeHandle,
@@ -6,17 +9,16 @@ import {
   useMemo,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { BaseLoadingOverlay } from "@/components/base";
-import dayjs from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
+
+import { BackupConfigViewer } from "./backup-config-viewer";
 import {
   BackupTableViewer,
   BackupFile,
   DEFAULT_ROWS_PER_PAGE,
 } from "./backup-table-viewer";
-import { BackupConfigViewer } from "./backup-config-viewer";
-import { Box, Paper, Divider } from "@mui/material";
+
+import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseLoadingOverlay } from "@/components/base";
 import { listWebDavBackup } from "@/services/cmds";
 dayjs.extend(customParseFormat);
 

src/components/setting/mods/clash-core-viewer.tsx

@@ -1,14 +1,8 @@
-import { mutate } from "swr";
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { useTranslation } from "react-i18next";
-import { useVerge } from "@/hooks/use-verge";
-import { useLockFn } from "ahooks";
-import { LoadingButton } from "@mui/lab";
 import {
   SwitchAccessShortcutRounded,
   RestartAltRounded,
 } from "@mui/icons-material";
+import { LoadingButton } from "@mui/lab";
 import {
   Box,
   Chip,
@@ -17,6 +11,13 @@ import {
   ListItemButton,
   ListItemText,
 } from "@mui/material";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { mutate } from "swr";
+
+import { BaseDialog, DialogRef } from "@/components/base";
+import { useVerge } from "@/hooks/use-verge";
 import { changeClashCore, restartCore } from "@/services/cmds";
 import {
   closeAllConnections,

src/components/setting/mods/clash-port-viewer.tsx

@@ -1,8 +1,3 @@
-import { BaseDialog, Switch } from "@/components/base";
-import { useClashInfo } from "@/hooks/use-clash";
-import { useVerge } from "@/hooks/use-verge";
-import { showNotice } from "@/services/noticeService";
-import getSystem from "@/utils/get-system";
 import { Shuffle } from "@mui/icons-material";
 import {
   CircularProgress,
@@ -17,6 +12,12 @@ import { useLockFn, useRequest } from "ahooks";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { BaseDialog, Switch } from "@/components/base";
+import { useClashInfo } from "@/hooks/use-clash";
+import { useVerge } from "@/hooks/use-verge";
+import { showNotice } from "@/services/noticeService";
+import getSystem from "@/utils/get-system";
+
 const OS = getSystem();
 
 interface ClashPortViewerProps {}

src/components/setting/mods/config-viewer.tsx

@@ -1,9 +1,10 @@
+import { Box, Chip } from "@mui/material";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Box, Chip } from "@mui/material";
-import { getRuntimeYaml } from "@/services/cmds";
+
 import { DialogRef } from "@/components/base";
 import { EditorViewer } from "@/components/profile/editor-viewer";
+import { getRuntimeYaml } from "@/services/cmds";
 
 export const ConfigViewer = forwardRef<DialogRef>((_, ref) => {
   const { t } = useTranslation();

src/components/setting/mods/controller-viewer.tsx

@@ -1,7 +1,3 @@
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
-import { useClashInfo } from "@/hooks/use-clash";
-import { useVerge } from "@/hooks/use-verge";
-import { showNotice } from "@/services/noticeService";
 import { ContentCopy } from "@mui/icons-material";
 import {
   Alert,
@@ -19,6 +15,11 @@ import { useLockFn } from "ahooks";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { useClashInfo } from "@/hooks/use-clash";
+import { useVerge } from "@/hooks/use-verge";
+import { showNotice } from "@/services/noticeService";
+
 export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);

src/components/setting/mods/dns-viewer.tsx

@@ -1,6 +1,4 @@
-import { forwardRef, useImperativeHandle, useState, useEffect } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
+import { RestartAltRounded } from "@mui/icons-material";
 import {
   Box,
   Button,
@@ -14,15 +12,18 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import { RestartAltRounded } from "@mui/icons-material";
-import { useClash } from "@/hooks/use-clash";
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { invoke } from "@tauri-apps/api/core";
+import { useLockFn } from "ahooks";
 import yaml from "js-yaml";
+import { forwardRef, useImperativeHandle, useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import MonacoEditor from "react-monaco-editor";
+
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { useClash } from "@/hooks/use-clash";
+import { showNotice } from "@/services/noticeService";
 import { useThemeMode } from "@/services/states";
 import getSystem from "@/utils/get-system";
-import { invoke } from "@tauri-apps/api/core";
-import { showNotice } from "@/services/noticeService";
 
 const Item = styled(ListItem)(() => ({
   padding: "5px 2px",

src/components/setting/mods/external-controller-cors.tsx

@@ -1,12 +1,13 @@
-import { BaseDialog, Switch } from "@/components/base";
-import { useClash } from "@/hooks/use-clash";
-import { showNotice } from "@/services/noticeService";
 import { Delete as DeleteIcon } from "@mui/icons-material";
 import { Box, Button, Divider, List, ListItem, TextField } from "@mui/material";
 import { useLockFn, useRequest } from "ahooks";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { BaseDialog, Switch } from "@/components/base";
+import { useClash } from "@/hooks/use-clash";
+import { showNotice } from "@/services/noticeService";
+
 // 定义开发环境的URL列表
 // 这些URL在开发模式下会被自动包含在允许的来源中
 // 在生产环境中，这些URL会被过滤掉

src/components/setting/mods/guard-state.tsx

@@ -1,4 +1,5 @@
 import { cloneElement, isValidElement, ReactNode, useRef } from "react";
+
 import noop from "@/utils/noop";
 
 interface Props<Value> {

src/components/setting/mods/hotkey-input.tsx

@@ -1,9 +1,10 @@
-import { useRef, useState } from "react";
-import { alpha, Box, IconButton, styled } from "@mui/material";
 import { DeleteRounded } from "@mui/icons-material";
-import { parseHotkey } from "@/utils/parse-hotkey";
+import { alpha, Box, IconButton, styled } from "@mui/material";
+import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { parseHotkey } from "@/utils/parse-hotkey";
+
 const KeyWrapper = styled("div")(({ theme }) => ({
   position: "relative",
   width: 165,

src/components/setting/mods/hotkey-viewer.tsx

@@ -1,10 +1,12 @@
+import { styled, Typography } 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, Switch } from "@/components/base";
+
 import { HotkeyInput } from "./hotkey-input";
+
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { useVerge } from "@/hooks/use-verge";
 import { showNotice } from "@/services/noticeService";
 
 const ItemWrapper = styled("div")`

src/components/setting/mods/layout-viewer.tsx

@@ -1,5 +1,3 @@
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   List,
   Button,
@@ -10,17 +8,21 @@ import {
   ListItemText,
   Box,
 } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
+import { convertFileSrc } from "@tauri-apps/api/core";
+import { join } from "@tauri-apps/api/path";
+import { open as openDialog } from "@tauri-apps/plugin-dialog";
+import { exists } from "@tauri-apps/plugin-fs";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { GuardState } from "./guard-state";
+
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
-import { GuardState } from "./guard-state";
-import { open as openDialog } from "@tauri-apps/plugin-dialog";
-import { convertFileSrc } from "@tauri-apps/api/core";
+import { useVerge } from "@/hooks/use-verge";
 import { copyIconFile, getAppDir } from "@/services/cmds";
-import { join } from "@tauri-apps/api/path";
-import { exists } from "@tauri-apps/plugin-fs";
-import getSystem from "@/utils/get-system";
 import { showNotice } from "@/services/noticeService";
+import getSystem from "@/utils/get-system";
 
 const OS = getSystem();
 

src/components/setting/mods/lite-mode-viewer.tsx

@@ -1,6 +1,3 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
 import {
   List,
   ListItem,
@@ -9,9 +6,13 @@ import {
   Typography,
   InputAdornment,
 } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { useVerge } from "@/hooks/use-verge";
 import { entry_lightweight_mode } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 

src/components/setting/mods/misc-viewer.tsx

@@ -1,6 +1,3 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
 import {
   InputAdornment,
   List,
@@ -10,9 +7,13 @@ import {
   Select,
   TextField,
 } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { useVerge } from "@/hooks/use-verge";
 import { showNotice } from "@/services/noticeService";
 
 export const MiscViewer = forwardRef<DialogRef>((props, ref) => {

src/components/setting/mods/network-interface-viewer.tsx

@@ -1,12 +1,13 @@
+import { ContentCopyRounded } from "@mui/icons-material";
+import { alpha, Box, Button, IconButton } from "@mui/material";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
+import useSWR from "swr";
+
 import { BaseDialog, DialogRef } from "@/components/base";
 import { getNetworkInterfacesInfo } from "@/services/cmds";
-import { alpha, Box, Button, IconButton } from "@mui/material";
-import { ContentCopyRounded } from "@mui/icons-material";
-import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { showNotice } from "@/services/noticeService";
-import useSWR from "swr";
 
 export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

src/components/setting/mods/password-input.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import {
   Button,
   Dialog,
@@ -8,6 +6,8 @@ import {
   DialogTitle,
   TextField,
 } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   onConfirm: (passwd: string) => Promise<void>;

src/components/setting/mods/setting-comp.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import { ChevronRightRounded } from "@mui/icons-material";
 import {
   Box,
   List,
@@ -7,8 +7,9 @@ import {
   ListItemText,
   ListSubheader,
 } from "@mui/material";
-import { ChevronRightRounded } from "@mui/icons-material";
 import CircularProgress from "@mui/material/CircularProgress";
+import React, { ReactNode, useState } from "react";
+
 import isAsyncFunction from "@/utils/is-async-function";
 
 interface ItemProps {

src/components/setting/mods/sysproxy-viewer.tsx

@@ -1,19 +1,3 @@
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
-import { BaseFieldset } from "@/components/base/base-fieldset";
-import { TooltipIcon } from "@/components/base/base-tooltip-icon";
-import { EditorViewer } from "@/components/profile/editor-viewer";
-import { useVerge } from "@/hooks/use-verge";
-import { useAppData } from "@/providers/app-data-provider";
-import { getClashConfig } from "@/services/cmds";
-import {
-  getAutotemProxy,
-  getNetworkInterfacesInfo,
-  getSystemHostname,
-  getSystemProxy,
-  patchVergeConfig,
-} from "@/services/cmds";
-import { showNotice } from "@/services/noticeService";
-import getSystem from "@/utils/get-system";
 import { EditRounded } from "@mui/icons-material";
 import {
   Autocomplete,
@@ -37,6 +21,23 @@ import {
 import { useTranslation } from "react-i18next";
 import useSWR, { mutate } from "swr";
 
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseFieldset } from "@/components/base/base-fieldset";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import { EditorViewer } from "@/components/profile/editor-viewer";
+import { useVerge } from "@/hooks/use-verge";
+import { useAppData } from "@/providers/app-data-provider";
+import { getClashConfig } from "@/services/cmds";
+import {
+  getAutotemProxy,
+  getNetworkInterfacesInfo,
+  getSystemHostname,
+  getSystemProxy,
+  patchVergeConfig,
+} from "@/services/cmds";
+import { showNotice } from "@/services/noticeService";
+import getSystem from "@/utils/get-system";
+
 const DEFAULT_PAC = `function FindProxyForURL(url, host) {
   return "PROXY %proxy_host%:%mixed-port%; SOCKS5 %proxy_host%:%mixed-port%; DIRECT;";
 }`;

src/components/setting/mods/theme-mode-switch.tsx

@@ -1,5 +1,5 @@
-import { useTranslation } from "react-i18next";
 import { Button, ButtonGroup } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 type ThemeValue = IVergeConfig["theme_mode"];
 

src/components/setting/mods/theme-viewer.tsx

@@ -1,6 +1,4 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
+import { EditRounded } from "@mui/icons-material";
 import {
   Button,
   List,
@@ -10,11 +8,14 @@ import {
   TextField,
   useTheme,
 } from "@mui/material";
-import { useVerge } from "@/hooks/use-verge";
-import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
 import { BaseDialog, DialogRef } from "@/components/base";
 import { EditorViewer } from "@/components/profile/editor-viewer";
-import { EditRounded } from "@mui/icons-material";
+import { useVerge } from "@/hooks/use-verge";
+import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
 import { showNotice } from "@/services/noticeService";
 
 export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {

src/components/setting/mods/tun-viewer.tsx

@@ -1,6 +1,3 @@
-import { forwardRef, useImperativeHandle, useState } from "react";
-import { useLockFn } from "ahooks";
-import { useTranslation } from "react-i18next";
 import {
   List,
   ListItem,
@@ -10,12 +7,17 @@ import {
   Button,
   TextField,
 } from "@mui/material";
-import { useClash } from "@/hooks/use-clash";
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
 import { StackModeSwitch } from "./stack-mode-switch";
+
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { useClash } from "@/hooks/use-clash";
 import { enhanceProfiles } from "@/services/cmds";
-import getSystem from "@/utils/get-system";
 import { showNotice } from "@/services/noticeService";
+import getSystem from "@/utils/get-system";
 
 const OS = getSystem();
 

src/components/setting/mods/update-viewer.tsx

@@ -1,4 +1,9 @@
-import useSWR from "swr";
+import { Box, LinearProgress, Button } from "@mui/material";
+import { Event, UnlistenFn } from "@tauri-apps/api/event";
+import { relaunch } from "@tauri-apps/plugin-process";
+import { open as openUrl } from "@tauri-apps/plugin-shell";
+import { check as checkUpdate } from "@tauri-apps/plugin-updater";
+import { useLockFn } from "ahooks";
 import {
   forwardRef,
   useImperativeHandle,
@@ -6,19 +11,15 @@ import {
   useMemo,
   useEffect,
 } from "react";
-import { useLockFn } from "ahooks";
-import { Box, LinearProgress, Button } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { relaunch } from "@tauri-apps/plugin-process";
-import { check as checkUpdate } from "@tauri-apps/plugin-updater";
-import { BaseDialog, DialogRef } from "@/components/base";
-import { useUpdateState, useSetUpdateState } from "@/services/states";
-import { Event, UnlistenFn } from "@tauri-apps/api/event";
-import { portableFlag } from "@/pages/_layout";
-import { open as openUrl } from "@tauri-apps/plugin-shell";
 import ReactMarkdown from "react-markdown";
+import useSWR from "swr";
+
+import { BaseDialog, DialogRef } from "@/components/base";
 import { useListen } from "@/hooks/use-listen";
+import { portableFlag } from "@/pages/_layout";
 import { showNotice } from "@/services/noticeService";
+import { useUpdateState, useSetUpdateState } from "@/services/states";
 
 export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

src/components/setting/mods/web-ui-item.tsx

@@ -1,11 +1,3 @@
-import { useState } from "react";
-import {
-  Divider,
-  IconButton,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
 import {
   CheckRounded,
   CloseRounded,
@@ -13,6 +5,14 @@ import {
   EditRounded,
   OpenInNewRounded,
 } from "@mui/icons-material";
+import {
+  Divider,
+  IconButton,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 interface Props {

src/components/setting/mods/web-ui-viewer.tsx

@@ -1,12 +1,14 @@
-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 { useLockFn } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { WebUIItem } from "./web-ui-item";
+
 import { BaseDialog, BaseEmpty, DialogRef } from "@/components/base";
 import { useClashInfo } from "@/hooks/use-clash";
-import { WebUIItem } from "./web-ui-item";
+import { useVerge } from "@/hooks/use-verge";
+import { openWebUrl } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
 export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {