Revert "Refactor components to remove forwardRef and simplify props handling"

This reverts commit 1cd013fb94.

src/components/connection/connection-detail.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Snackbar, useTheme } from "@mui/material";
 import { useLockFn } from "ahooks";
 import dayjs from "dayjs";
 import { t } from "i18next";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 
 import { deleteConnection } from "@/services/cmds";
 import parseTraffic from "@/utils/parse-traffic";
@@ -11,43 +11,45 @@ export interface ConnectionDetailRef {
   open: (detail: IConnectionsItem) => void;
 }
 
-export const ConnectionDetail = ({ ref, ...props }) => {
+export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
-  const [open, setOpen] = useState(false);
+  (props, ref) => {
-  const [detail, setDetail] = useState<IConnectionsItem>(null!);
+    const [open, setOpen] = useState(false);
-  const theme = useTheme();
+    const [detail, setDetail] = useState<IConnectionsItem>(null!);
+    const theme = useTheme();
 
-  useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
-    open: (detail: IConnectionsItem) => {
+      open: (detail: IConnectionsItem) => {
-      if (open) return;
+        if (open) return;
-      setOpen(true);
+        setOpen(true);
-      setDetail(detail);
+        setDetail(detail);
-    },
+      },
-  }));
+    }));
 
-  const onClose = () => setOpen(false);
+    const onClose = () => setOpen(false);
 
-  return (
+    return (
-    <Snackbar
+      <Snackbar
-      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-      open={open}
+        open={open}
-      onClose={onClose}
+        onClose={onClose}
-      sx={{
+        sx={{
-        ".MuiSnackbarContent-root": {
+          ".MuiSnackbarContent-root": {
-          maxWidth: "520px",
+            maxWidth: "520px",
-          maxHeight: "480px",
+            maxHeight: "480px",
-          overflowY: "auto",
+            overflowY: "auto",
-          backgroundColor: theme.palette.background.paper,
+            backgroundColor: theme.palette.background.paper,
-          color: theme.palette.text.primary,
+            color: theme.palette.text.primary,
-        },
+          },
-      }}
+        }}
-      message={
+        message={
-        detail ? (
+          detail ? (
-          <InnerConnectionDetail data={detail} onClose={onClose} />
+            <InnerConnectionDetail data={detail} onClose={onClose} />
-        ) : null
+          ) : null
-      }
+        }
-    />
+      />
-  );
+    );
-};
+  },
+);
 
 interface InnerProps {
   data: IConnectionsItem;

src/components/layout/traffic-graph.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from "@mui/material";
-import { useEffect, useImperativeHandle, useRef } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 
 const maxPoint = 30;
 
@@ -24,7 +24,7 @@ export interface TrafficRef {
 /**
  * draw the traffic graph
  */
-export const TrafficGraph = ({ ref, ...props }) => {
+export const TrafficGraph = forwardRef<TrafficRef>((props, ref) => {
   const countRef = useRef(0);
   const styleRef = useRef(true);
   const listRef = useRef<TrafficData[]>(defaultList);
@@ -196,4 +196,4 @@ export const TrafficGraph = ({ ref, ...props }) => {
   }, [palette]);
 
   return <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />;
-};
+});

src/components/profile/profile-viewer.tsx

@@ -9,7 +9,13 @@ import {
   TextField,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { useForm, Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -32,280 +38,304 @@ export interface ProfileViewerRef {
 
 // create or edit the profile
 // remote / local
-export const ProfileViewer = ({
+export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
-  ref,
+  (props, ref) => {
-  ...props
+    const { t } = useTranslation();
-}: Props & { ref?: React.RefObject<ProfileViewerRef | null> }) => {
+    const [open, setOpen] = useState(false);
-  const { t } = useTranslation();
+    const [openType, setOpenType] = useState<"new" | "edit">("new");
-  const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
-  const [openType, setOpenType] = useState<"new" | "edit">("new");
+    const { profiles } = useProfiles();
-  const [loading, setLoading] = useState(false);
-  const { profiles } = useProfiles();
 
-  // file input
+    // file input
-  const fileDataRef = useRef<string | null>(null);
+    const fileDataRef = useRef<string | null>(null);
 
-  const {
+    const {
-    control,
+      control,
-    watch,
+      watch,
-    register: _register,
+      register: _register,
-    ...formIns
+      ...formIns
-  } = useForm<IProfileItem>({
+    } = useForm<IProfileItem>({
-    defaultValues: {
+      defaultValues: {
-      type: "remote",
+        type: "remote",
-      name: "",
+        name: "",
-      desc: "",
+        desc: "",
-      url: "",
+        url: "",
-      option: {
+        option: {
-        with_proxy: false,
+          with_proxy: false,
-        self_proxy: false,
+          self_proxy: false,
+        },
       },
-    },
+    });
-  });
 
-  useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
-    create: () => {
+      create: () => {
-      setOpenType("new");
+        setOpenType("new");
-      setOpen(true);
+        setOpen(true);
-    },
+      },
-    edit: (item) => {
+      edit: (item) => {
-      if (item) {
+        if (item) {
-        Object.entries(item).forEach(([key, value]) => {
+          Object.entries(item).forEach(([key, value]) => {
-          formIns.setValue(key as any, value);
+            formIns.setValue(key as any, value);
-        });
+          });
-      }
+        }
-      setOpenType("edit");
+        setOpenType("edit");
-      setOpen(true);
+        setOpen(true);
-    },
+      },
-  }));
+    }));
 
-  const selfProxy = watch("option.self_proxy");
+    const selfProxy = watch("option.self_proxy");
-  const withProxy = watch("option.with_proxy");
+    const withProxy = watch("option.with_proxy");
 
-  useEffect(() => {
+    useEffect(() => {
-    if (selfProxy) formIns.setValue("option.with_proxy", false);
+      if (selfProxy) formIns.setValue("option.with_proxy", false);
-  }, [selfProxy]);
+    }, [selfProxy]);
 
-  useEffect(() => {
+    useEffect(() => {
-    if (withProxy) formIns.setValue("option.self_proxy", false);
+      if (withProxy) formIns.setValue("option.self_proxy", false);
-  }, [withProxy]);
+    }, [withProxy]);
 
-  const handleOk = useLockFn(
+    const handleOk = useLockFn(
-    formIns.handleSubmit(async (form) => {
+      formIns.handleSubmit(async (form) => {
-      if (form.option?.timeout_seconds) {
+        if (form.option?.timeout_seconds) {
-        form.option.timeout_seconds = +form.option.timeout_seconds;
+          form.option.timeout_seconds = +form.option.timeout_seconds;
-      }
-
-      setLoading(true);
-      try {
-        // 基本验证
-        if (!form.type) throw new Error("`Type` should not be null");
-        if (form.type === "remote" && !form.url) {
-          throw new Error("The URL should not be null");
         }
 
-        // 处理表单数据
+        setLoading(true);
-        if (form.option?.update_interval) {
+        try {
-          form.option.update_interval = +form.option.update_interval;
+          // 基本验证
-        } else {
+          if (!form.type) throw new Error("`Type` should not be null");
-          delete form.option?.update_interval;
+          if (form.type === "remote" && !form.url) {
-        }
+            throw new Error("The URL should not be null");
-        if (form.option?.user_agent === "") {
-          delete form.option.user_agent;
-        }
-
-        const name = form.name || `${form.type} file`;
-        const item = { ...form, name };
-        const isRemote = form.type === "remote";
-        const isUpdate = openType === "edit";
-
-        // 判断是否是当前激活的配置
-        const isActivating = isUpdate && form.uid === (profiles?.current ?? "");
-
-        // 保存原始代理设置以便回退成功后恢复
-        const originalOptions = {
-          with_proxy: form.option?.with_proxy,
-          self_proxy: form.option?.self_proxy,
-        };
-
-        // 执行创建或更新操作，本地配置不需要回退机制
-        if (!isRemote) {
-          if (openType === "new") {
-            await createProfile(item, fileDataRef.current);
-          } else {
-            if (!form.uid) throw new Error("UID not found");
-            await patchProfile(form.uid, item);
           }
-        } else {
+
-          // 远程配置使用回退机制
+          // 处理表单数据
-          try {
+          if (form.option?.update_interval) {
-            // 尝试正常操作
+            form.option.update_interval = +form.option.update_interval;
+          } else {
+            delete form.option?.update_interval;
+          }
+          if (form.option?.user_agent === "") {
+            delete form.option.user_agent;
+          }
+
+          const name = form.name || `${form.type} file`;
+          const item = { ...form, name };
+          const isRemote = form.type === "remote";
+          const isUpdate = openType === "edit";
+
+          // 判断是否是当前激活的配置
+          const isActivating =
+            isUpdate && form.uid === (profiles?.current ?? "");
+
+          // 保存原始代理设置以便回退成功后恢复
+          const originalOptions = {
+            with_proxy: form.option?.with_proxy,
+            self_proxy: form.option?.self_proxy,
+          };
+
+          // 执行创建或更新操作，本地配置不需要回退机制
+          if (!isRemote) {
             if (openType === "new") {
               await createProfile(item, fileDataRef.current);
             } else {
               if (!form.uid) throw new Error("UID not found");
               await patchProfile(form.uid, item);
             }
-          } catch {
+          } else {
-            // 首次创建/更新失败，尝试使用自身代理
+            // 远程配置使用回退机制
-            showNotice(
+            try {
-              "info",
+              // 尝试正常操作
-              t("Profile creation failed, retrying with Clash proxy..."),
+              if (openType === "new") {
-            );
+                await createProfile(item, fileDataRef.current);
+              } else {
+                if (!form.uid) throw new Error("UID not found");
+                await patchProfile(form.uid, item);
+              }
+            } catch {
+              // 首次创建/更新失败，尝试使用自身代理
+              showNotice(
+                "info",
+                t("Profile creation failed, retrying with Clash proxy..."),
+              );
 
-            // 使用自身代理的配置
+              // 使用自身代理的配置
-            const retryItem = {
+              const retryItem = {
-              ...item,
+                ...item,
-              option: {
+                option: {
-                ...item.option,
+                  ...item.option,
-                with_proxy: false,
+                  with_proxy: false,
-                self_proxy: true,
+                  self_proxy: true,
-              },
+                },
-            };
+              };
 
-            // 使用自身代理再次尝试
+              // 使用自身代理再次尝试
-            if (openType === "new") {
+              if (openType === "new") {
-              await createProfile(retryItem, fileDataRef.current);
+                await createProfile(retryItem, fileDataRef.current);
-            } else {
+              } else {
-              if (!form.uid) throw new Error("UID not found");
+                if (!form.uid) throw new Error("UID not found");
-              await patchProfile(form.uid, retryItem);
+                await patchProfile(form.uid, retryItem);
 
-              // 编辑模式下恢复原始代理设置
+                // 编辑模式下恢复原始代理设置
-              await patchProfile(form.uid, { option: originalOptions });
+                await patchProfile(form.uid, { option: originalOptions });
+              }
+
+              showNotice(
+                "success",
+                t("Profile creation succeeded with Clash proxy"),
+              );
             }
-
-            showNotice(
-              "success",
-              t("Profile creation succeeded with Clash proxy"),
-            );
           }
+
+          // 成功后的操作
+          setOpen(false);
+          setTimeout(() => formIns.reset(), 500);
+          fileDataRef.current = null;
+
+          // 优化：UI先关闭，异步通知父组件
+          setTimeout(() => {
+            props.onChange(isActivating);
+          }, 0);
+        } catch (err: any) {
+          showNotice("error", err.message || err.toString());
+        } finally {
+          setLoading(false);
         }
+      }),
+    );
 
-        // 成功后的操作
+    const handleClose = () => {
+      try {
         setOpen(false);
-        setTimeout(() => formIns.reset(), 500);
         fileDataRef.current = null;
-
+        setTimeout(() => formIns.reset(), 500);
-        // 优化：UI先关闭，异步通知父组件
+      } catch (e) {
-        setTimeout(() => {
+        console.warn("[ProfileViewer] handleClose error:", e);
-          props.onChange(isActivating);
-        }, 0);
-      } catch (err: any) {
-        showNotice("error", err.message || err.toString());
-      } finally {
-        setLoading(false);
       }
-    }),
+    };
-  );
 
-  const handleClose = () => {
+    const text = {
-    try {
+      fullWidth: true,
-      setOpen(false);
+      size: "small",
-      fileDataRef.current = null;
+      margin: "normal",
-      setTimeout(() => formIns.reset(), 500);
+      variant: "outlined",
-    } catch (e) {
+      autoComplete: "off",
-      console.warn("[ProfileViewer] handleClose error:", e);
+      autoCorrect: "off",
-    }
+    } as const;
-  };
 
-  const text = {
+    const formType = watch("type");
-    fullWidth: true,
+    const isRemote = formType === "remote";
-    size: "small",
+    const isLocal = formType === "local";
-    margin: "normal",
-    variant: "outlined",
-    autoComplete: "off",
-    autoCorrect: "off",
-  } as const;
 
-  const formType = watch("type");
+    return (
-  const isRemote = formType === "remote";
+      <BaseDialog
-  const isLocal = formType === "local";
+        open={open}
+        title={openType === "new" ? t("Create Profile") : t("Edit Profile")}
+        contentSx={{ width: 375, pb: 0, maxHeight: "80%" }}
+        okBtn={t("Save")}
+        cancelBtn={t("Cancel")}
+        onClose={handleClose}
+        onCancel={handleClose}
+        onOk={handleOk}
+        loading={loading}
+      >
+        <Controller
+          name="type"
+          control={control}
+          render={({ field }) => (
+            <FormControl size="small" fullWidth sx={{ mt: 1, mb: 1 }}>
+              <InputLabel>{t("Type")}</InputLabel>
+              <Select {...field} autoFocus label={t("Type")}>
+                <MenuItem value="remote">Remote</MenuItem>
+                <MenuItem value="local">Local</MenuItem>
+              </Select>
+            </FormControl>
+          )}
+        />
 
-  return (
+        <Controller
-    <BaseDialog
+          name="name"
-      open={open}
+          control={control}
-      title={openType === "new" ? t("Create Profile") : t("Edit Profile")}
+          render={({ field }) => (
-      contentSx={{ width: 375, pb: 0, maxHeight: "80%" }}
+            <TextField {...text} {...field} label={t("Name")} />
-      okBtn={t("Save")}
+          )}
-      cancelBtn={t("Cancel")}
+        />
-      onClose={handleClose}
+
-      onCancel={handleClose}
+        <Controller
-      onOk={handleOk}
+          name="desc"
-      loading={loading}
+          control={control}
-    >
+          render={({ field }) => (
-      <Controller
+            <TextField {...text} {...field} label={t("Descriptions")} />
-        name="type"
+          )}
-        control={control}
+        />
-        render={({ field }) => (
+
-          <FormControl size="small" fullWidth sx={{ mt: 1, mb: 1 }}>
+        {isRemote && (
-            <InputLabel>{t("Type")}</InputLabel>
+          <>
-            <Select {...field} autoFocus label={t("Type")}>
+            <Controller
-              <MenuItem value="remote">Remote</MenuItem>
+              name="url"
-              <MenuItem value="local">Local</MenuItem>
+              control={control}
-            </Select>
+              render={({ field }) => (
-          </FormControl>
+                <TextField
+                  {...text}
+                  {...field}
+                  multiline
+                  label={t("Subscription URL")}
+                />
+              )}
+            />
+
+            <Controller
+              name="option.user_agent"
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  {...text}
+                  {...field}
+                  placeholder={`clash-verge/v${version}`}
+                  label="User Agent"
+                />
+              )}
+            />
+
+            <Controller
+              name="option.timeout_seconds"
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  {...text}
+                  {...field}
+                  type="number"
+                  placeholder="60"
+                  label={t("HTTP Request Timeout")}
+                  slotProps={{
+                    input: {
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          {t("seconds")}
+                        </InputAdornment>
+                      ),
+                    },
+                  }}
+                />
+              )}
+            />
+          </>
         )}
-      />
 
-      <Controller
+        {(isRemote || isLocal) && (
-        name="name"
-        control={control}
-        render={({ field }) => (
-          <TextField {...text} {...field} label={t("Name")} />
-        )}
-      />
-
-      <Controller
-        name="desc"
-        control={control}
-        render={({ field }) => (
-          <TextField {...text} {...field} label={t("Descriptions")} />
-        )}
-      />
-
-      {isRemote && (
-        <>
           <Controller
-            name="url"
+            name="option.update_interval"
-            control={control}
-            render={({ field }) => (
-              <TextField
-                {...text}
-                {...field}
-                multiline
-                label={t("Subscription URL")}
-              />
-            )}
-          />
-
-          <Controller
-            name="option.user_agent"
-            control={control}
-            render={({ field }) => (
-              <TextField
-                {...text}
-                {...field}
-                placeholder={`clash-verge/v${version}`}
-                label="User Agent"
-              />
-            )}
-          />
-
-          <Controller
-            name="option.timeout_seconds"
             control={control}
             render={({ field }) => (
               <TextField
                 {...text}
                 {...field}
                 type="number"
-                placeholder="60"
+                label={t("Update Interval")}
-                label={t("HTTP Request Timeout")}
                 slotProps={{
                   input: {
                     endAdornment: (
                       <InputAdornment position="end">
-                        {t("seconds")}
+                        {t("mins")}
                       </InputAdornment>
                     ),
                   },
@@ -313,79 +343,57 @@ export const ProfileViewer = ({
               />
             )}
           />
-        </>
+        )}
-      )}
 
-      {(isRemote || isLocal) && (
+        {isLocal && openType === "new" && (
-        <Controller
+          <FileInput
-          name="option.update_interval"
+            onChange={(file, val) => {
-          control={control}
+              formIns.setValue("name", formIns.getValues("name") || file.name);
-          render={({ field }) => (
+              fileDataRef.current = val;
-            <TextField
+            }}
-              {...text}
+          />
-              {...field}
+        )}
-              type="number"
+
-              label={t("Update Interval")}
+        {isRemote && (
-              slotProps={{
+          <>
-                input: {
+            <Controller
-                  endAdornment: (
+              name="option.with_proxy"
-                    <InputAdornment position="end">{t("mins")}</InputAdornment>
+              control={control}
-                  ),
+              render={({ field }) => (
-                },
+                <StyledBox>
-              }}
+                  <InputLabel>{t("Use System Proxy")}</InputLabel>
+                  <Switch checked={field.value} {...field} color="primary" />
+                </StyledBox>
+              )}
             />
-          )}
-        />
-      )}
 
-      {isLocal && openType === "new" && (
+            <Controller
-        <FileInput
+              name="option.self_proxy"
-          onChange={(file, val) => {
+              control={control}
-            formIns.setValue("name", formIns.getValues("name") || file.name);
+              render={({ field }) => (
-            fileDataRef.current = val;
+                <StyledBox>
-          }}
+                  <InputLabel>{t("Use Clash Proxy")}</InputLabel>
-        />
+                  <Switch checked={field.value} {...field} color="primary" />
-      )}
+                </StyledBox>
+              )}
+            />
 
-      {isRemote && (
+            <Controller
-        <>
+              name="option.danger_accept_invalid_certs"
-          <Controller
+              control={control}
-            name="option.with_proxy"
+              render={({ field }) => (
-            control={control}
+                <StyledBox>
-            render={({ field }) => (
+                  <InputLabel>{t("Accept Invalid Certs (Danger)")}</InputLabel>
-              <StyledBox>
+                  <Switch checked={field.value} {...field} color="primary" />
-                <InputLabel>{t("Use System Proxy")}</InputLabel>
+                </StyledBox>
-                <Switch checked={field.value} {...field} color="primary" />
+              )}
-              </StyledBox>
+            />
-            )}
+          </>
-          />
+        )}
-
+      </BaseDialog>
-          <Controller
+    );
-            name="option.self_proxy"
+  },
-            control={control}
+);
-            render={({ field }) => (
-              <StyledBox>
-                <InputLabel>{t("Use Clash Proxy")}</InputLabel>
-                <Switch checked={field.value} {...field} color="primary" />
-              </StyledBox>
-            )}
-          />
-
-          <Controller
-            name="option.danger_accept_invalid_certs"
-            control={control}
-            render={({ field }) => (
-              <StyledBox>
-                <InputLabel>{t("Accept Invalid Certs (Danger)")}</InputLabel>
-                <Switch checked={field.value} {...field} color="primary" />
-              </StyledBox>
-            )}
-          />
-        </>
-      )}
-    </BaseDialog>
-  );
-};
 
 const StyledBox = styled(Box)(() => ({
   margin: "8px 0 8px 8px",

src/components/proxy/proxy-groups.tsx

@@ -1,19 +1,23 @@
-import { ExpandMoreRounded } from "@mui/icons-material";
 import {
   Box,
   Snackbar,
   Alert,
   Chip,
+  Stack,
   Typography,
   IconButton,
+  Collapse,
   Menu,
   MenuItem,
+  Divider,
+  Button,
 } from "@mui/material";
+import { ArchiveOutlined, ExpandMoreRounded } from "@mui/icons-material";
 import { useLockFn } from "ahooks";
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
+import useSWR from "swr";
 import { useTranslation } from "react-i18next";
 import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
-import useSWR from "swr";
 
 import { useProxySelection } from "@/hooks/use-proxy-selection";
 import { useVerge } from "@/hooks/use-verge";
@@ -30,8 +34,8 @@ import { BaseEmpty } from "../base";
 import { ScrollTopButton } from "../layout/scroll-top-button";
 
 import { ProxyChain } from "./proxy-chain";
-import { ProxyGroupNavigator } from "./proxy-group-navigator";
 import { ProxyRender } from "./proxy-render";
+import { ProxyGroupNavigator } from "./proxy-group-navigator";
 import { useRenderList } from "./use-render-list";
 
 interface Props {

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

@@ -1,10 +1,16 @@
 import { Box, Paper, Divider } from "@mui/material";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import { useImperativeHandle, useState, useCallback, useMemo } from "react";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useState,
+  useCallback,
+  useMemo,
+} from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog } from "@/components/base";
+import { BaseDialog, DialogRef } from "@/components/base";
 import { BaseLoadingOverlay } from "@/components/base";
 import { listWebDavBackup } from "@/services/cmds";
 
@@ -19,7 +25,7 @@ dayjs.extend(customParseFormat);
 const DATE_FORMAT = "YYYY-MM-DD_HH-mm-ss";
 const FILENAME_PATTERN = /\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}/;
 
-export const BackupViewer = ({ ref, ...props }) => {
+export const BackupViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
@@ -125,4 +131,4 @@ export const BackupViewer = ({ ref, ...props }) => {
       </Box>
     </BaseDialog>
   );
-};
+});

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

@@ -12,11 +12,11 @@ import {
   ListItemText,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { mutate } from "swr";
 
-import { BaseDialog } from "@/components/base";
+import { BaseDialog, DialogRef } from "@/components/base";
 import { useVerge } from "@/hooks/use-verge";
 import { changeClashCore, restartCore } from "@/services/cmds";
 import {
@@ -31,7 +31,7 @@ const VALID_CORE = [
   { name: "Mihomo Alpha", core: "verge-mihomo-alpha", chip: "Alpha Version" },
 ];
 
-export const ClashCoreViewer = ({ ref, ...props }) => {
+export const ClashCoreViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
   const { verge, mutateVerge } = useVerge();
@@ -169,4 +169,4 @@ export const ClashCoreViewer = ({ ref, ...props }) => {
       </List>
     </BaseDialog>
   );
-};
+});

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

@@ -9,7 +9,7 @@ import {
   TextField,
 } from "@mui/material";
 import { useLockFn, useRequest } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, Switch } from "@/components/base";
@@ -30,12 +30,10 @@ interface ClashPortViewerRef {
 const generateRandomPort = () =>
   Math.floor(Math.random() * (65535 - 1025 + 1)) + 1025;
 
-export const ClashPortViewer = ({
+export const ClashPortViewer = forwardRef<
-  ref,
+  ClashPortViewerRef,
-  ...props
+  ClashPortViewerProps
-}: ClashPortViewerProps & {
+>((props, ref) => {
-  ref?: React.RefObject<ClashPortViewerRef | null>;
-}) => {
   const { t } = useTranslation();
   const { clashInfo, patchInfo } = useClashInfo();
   const { verge, patchVerge } = useVerge();
@@ -350,4 +348,4 @@ export const ClashPortViewer = ({
       </List>
     </BaseDialog>
   );
-};
+});

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

@@ -1,11 +1,12 @@
 import { Box, Chip } from "@mui/material";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { DialogRef } from "@/components/base";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { getRuntimeYaml } from "@/services/cmds";
 
-export const ConfigViewer = ({ ref, ..._ }) => {
+export const ConfigViewer = forwardRef<DialogRef>((_, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [runtimeConfig, setRuntimeConfig] = useState("");
@@ -37,4 +38,4 @@ export const ConfigViewer = ({ ref, ..._ }) => {
       onClose={() => setOpen(false)}
     />
   );
-};
+});

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

@@ -12,15 +12,15 @@ import {
   Tooltip,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, Switch } from "@/components/base";
+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 = ({ ref, ...props }) => {
+export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [copySuccess, setCopySuccess] = useState<null | string>(null);
@@ -217,4 +217,4 @@ export const ControllerViewer = ({ ref, ...props }) => {
       </Snackbar>
     </BaseDialog>
   );
-};
+});

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

@@ -15,11 +15,11 @@ import {
 import { invoke } from "@tauri-apps/api/core";
 import { useLockFn } from "ahooks";
 import yaml from "js-yaml";
-import { useImperativeHandle, useState, useEffect } from "react";
+import { forwardRef, useImperativeHandle, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import MonacoEditor from "react-monaco-editor";
 
-import { BaseDialog, Switch } from "@/components/base";
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { showNotice } from "@/services/noticeService";
 import { useThemeMode } from "@/services/states";
@@ -87,7 +87,7 @@ const DEFAULT_DNS_CONFIG = {
   },
 };
 
-export const DnsViewer = ({ ref, ...props }) => {
+export const DnsViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const { clash, mutateClash } = useClash();
   const themeMode = useThemeMode();
@@ -1034,4 +1034,4 @@ export const DnsViewer = ({ ref, ...props }) => {
       )}
     </BaseDialog>
   );
-};
+});

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

@@ -1,7 +1,7 @@
 import { Delete as DeleteIcon } from "@mui/icons-material";
 import { Box, Button, Divider, List, ListItem, TextField } from "@mui/material";
 import { useLockFn, useRequest } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, Switch } from "@/components/base";
@@ -71,194 +71,201 @@ interface ClashHeaderConfigingRef {
   close: () => void;
 }
 
-export const HeaderConfiguration = ({ ref, ...props }) => {
+export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
-  const { t } = useTranslation();
+  (props, ref) => {
-  const { clash, mutateClash, patchClash } = useClash();
+    const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
+    const { clash, mutateClash, patchClash } = useClash();
+    const [open, setOpen] = useState(false);
 
-  // CORS配置状态管理
+    // CORS配置状态管理
-  const [corsConfig, setCorsConfig] = useState<{
+    const [corsConfig, setCorsConfig] = useState<{
-    allowPrivateNetwork: boolean;
+      allowPrivateNetwork: boolean;
-    allowOrigins: string[];
+      allowOrigins: string[];
-  }>(() => {
+    }>(() => {
-    const cors = clash?.["external-controller-cors"];
-    const origins = cors?.["allow-origins"] ?? [];
-    return {
-      allowPrivateNetwork: cors?.["allow-private-network"] ?? true,
-      allowOrigins: filterBaseOriginsForUI(origins),
-    };
-  });
-
-  // 处理CORS配置变更
-  const handleCorsConfigChange = (
-    key: "allowPrivateNetwork" | "allowOrigins",
-    value: boolean | string[],
-  ) => {
-    setCorsConfig((prev) => ({
-      ...prev,
-      [key]: value,
-    }));
-  };
-
-  // 添加新的允许来源
-  const handleAddOrigin = () => {
-    handleCorsConfigChange("allowOrigins", [...corsConfig.allowOrigins, ""]);
-  };
-
-  // 更新允许来源列表中的某一项
-  const handleUpdateOrigin = (index: number, value: string) => {
-    const newOrigins = [...corsConfig.allowOrigins];
-    newOrigins[index] = value;
-    handleCorsConfigChange("allowOrigins", newOrigins);
-  };
-
-  // 删除允许来源列表中的某一项
-  const handleDeleteOrigin = (index: number) => {
-    const newOrigins = [...corsConfig.allowOrigins];
-    newOrigins.splice(index, 1);
-    handleCorsConfigChange("allowOrigins", newOrigins);
-  };
-
-  // 保存配置请求
-  const { loading, run: saveConfig } = useRequest(
-    async () => {
-      // 保存时使用完整的源列表（包括开发URL）
-      const fullOrigins = getFullOrigins(corsConfig.allowOrigins);
-
-      await patchClash({
-        "external-controller-cors": {
-          "allow-private-network": corsConfig.allowPrivateNetwork,
-          "allow-origins": fullOrigins.filter(
-            (origin: string) => origin.trim() !== "",
-          ),
-        },
-      });
-      await mutateClash();
-    },
-    {
-      manual: true,
-      onSuccess: () => {
-        setOpen(false);
-        showNotice("success", t("Configuration saved successfully"));
-      },
-      onError: () => {
-        showNotice("error", t("Failed to save configuration"));
-      },
-    },
-  );
-
-  useImperativeHandle(ref, () => ({
-    open: () => {
       const cors = clash?.["external-controller-cors"];
       const origins = cors?.["allow-origins"] ?? [];
-      setCorsConfig({
+      return {
         allowPrivateNetwork: cors?.["allow-private-network"] ?? true,
         allowOrigins: filterBaseOriginsForUI(origins),
-      });
+      };
-      setOpen(true);
+    });
-    },
-    close: () => setOpen(false),
-  }));
 
-  const handleSave = useLockFn(async () => {
+    // 处理CORS配置变更
-    await saveConfig();
+    const handleCorsConfigChange = (
-  });
+      key: "allowPrivateNetwork" | "allowOrigins",
+      value: boolean | string[],
+    ) => {
+      setCorsConfig((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    };
 
-  return (
+    // 添加新的允许来源
-    <BaseDialog
+    const handleAddOrigin = () => {
-      open={open}
+      handleCorsConfigChange("allowOrigins", [...corsConfig.allowOrigins, ""]);
-      title={t("External Cors Configuration")}
+    };
-      contentSx={{ width: 500 }}
-      okBtn={loading ? t("Saving...") : t("Save")}
-      cancelBtn={t("Cancel")}
-      onClose={() => setOpen(false)}
-      onCancel={() => setOpen(false)}
-      onOk={handleSave}
-    >
-      <List sx={{ width: "90%", padding: 2 }}>
-        <ListItem sx={{ padding: "8px 0" }}>
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            width="100%"
-          >
-            <span style={{ fontWeight: "normal" }}>
-              {t("Allow private network access")}
-            </span>
-            <Switch
-              edge="end"
-              checked={corsConfig.allowPrivateNetwork}
-              onChange={(e) =>
-                handleCorsConfigChange("allowPrivateNetwork", e.target.checked)
-              }
-            />
-          </Box>
-        </ListItem>
 
-        <Divider sx={{ my: 2 }} />
+    // 更新允许来源列表中的某一项
+    const handleUpdateOrigin = (index: number, value: string) => {
+      const newOrigins = [...corsConfig.allowOrigins];
+      newOrigins[index] = value;
+      handleCorsConfigChange("allowOrigins", newOrigins);
+    };
+
+    // 删除允许来源列表中的某一项
+    const handleDeleteOrigin = (index: number) => {
+      const newOrigins = [...corsConfig.allowOrigins];
+      newOrigins.splice(index, 1);
+      handleCorsConfigChange("allowOrigins", newOrigins);
+    };
+
+    // 保存配置请求
+    const { loading, run: saveConfig } = useRequest(
+      async () => {
+        // 保存时使用完整的源列表（包括开发URL）
+        const fullOrigins = getFullOrigins(corsConfig.allowOrigins);
+
+        await patchClash({
+          "external-controller-cors": {
+            "allow-private-network": corsConfig.allowPrivateNetwork,
+            "allow-origins": fullOrigins.filter(
+              (origin: string) => origin.trim() !== "",
+            ),
+          },
+        });
+        await mutateClash();
+      },
+      {
+        manual: true,
+        onSuccess: () => {
+          setOpen(false);
+          showNotice("success", t("Configuration saved successfully"));
+        },
+        onError: () => {
+          showNotice("error", t("Failed to save configuration"));
+        },
+      },
+    );
+
+    useImperativeHandle(ref, () => ({
+      open: () => {
+        const cors = clash?.["external-controller-cors"];
+        const origins = cors?.["allow-origins"] ?? [];
+        setCorsConfig({
+          allowPrivateNetwork: cors?.["allow-private-network"] ?? true,
+          allowOrigins: filterBaseOriginsForUI(origins),
+        });
+        setOpen(true);
+      },
+      close: () => setOpen(false),
+    }));
+
+    const handleSave = useLockFn(async () => {
+      await saveConfig();
+    });
+
+    return (
+      <BaseDialog
+        open={open}
+        title={t("External Cors Configuration")}
+        contentSx={{ width: 500 }}
+        okBtn={loading ? t("Saving...") : t("Save")}
+        cancelBtn={t("Cancel")}
+        onClose={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        onOk={handleSave}
+      >
+        <List sx={{ width: "90%", padding: 2 }}>
+          <ListItem sx={{ padding: "8px 0" }}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              width="100%"
+            >
+              <span style={{ fontWeight: "normal" }}>
+                {t("Allow private network access")}
+              </span>
+              <Switch
+                edge="end"
+                checked={corsConfig.allowPrivateNetwork}
+                onChange={(e) =>
+                  handleCorsConfigChange(
+                    "allowPrivateNetwork",
+                    e.target.checked,
+                  )
+                }
+              />
+            </Box>
+          </ListItem>
+
+          <Divider sx={{ my: 2 }} />
+
+          <ListItem sx={{ padding: "8px 0" }}>
+            <div style={{ width: "100%" }}>
+              <div style={{ marginBottom: 8, fontWeight: "bold" }}>
+                {t("Allowed Origins")}
+              </div>
+              {corsConfig.allowOrigins.map((origin, index) => (
+                <div
+                  key={index}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    marginBottom: 8,
+                  }}
+                >
+                  <TextField
+                    fullWidth
+                    size="small"
+                    sx={{ fontSize: 14, marginRight: 2 }}
+                    value={origin}
+                    onChange={(e) => handleUpdateOrigin(index, e.target.value)}
+                    placeholder={t("Please enter a valid url")}
+                    inputProps={{ style: { fontSize: 14 } }}
+                  />
+                  <Button
+                    variant="contained"
+                    color="error"
+                    size="small"
+                    onClick={() => handleDeleteOrigin(index)}
+                    disabled={corsConfig.allowOrigins.length <= 0}
+                    sx={deleteButtonStyle}
+                  >
+                    <DeleteIcon fontSize="small" />
+                  </Button>
+                </div>
+              ))}
+              <Button
+                variant="contained"
+                size="small"
+                onClick={handleAddOrigin}
+                sx={addButtonStyle}
+              >
+                {t("Add")}
+              </Button>
 
-        <ListItem sx={{ padding: "8px 0" }}>
-          <div style={{ width: "100%" }}>
-            <div style={{ marginBottom: 8, fontWeight: "bold" }}>
-              {t("Allowed Origins")}
-            </div>
-            {corsConfig.allowOrigins.map((origin, index) => (
               <div
-                key={index}
                 style={{
-                  display: "flex",
+                  marginTop: 12,
-                  alignItems: "center",
+                  padding: 8,
-                  marginBottom: 8,
+                  backgroundColor: "#f5f5f5",
+                  borderRadius: 4,
                 }}
               >
-                <TextField
+                <div
-                  fullWidth
+                  style={{ color: "#666", fontSize: 12, fontStyle: "italic" }}
-                  size="small"
-                  sx={{ fontSize: 14, marginRight: 2 }}
-                  value={origin}
-                  onChange={(e) => handleUpdateOrigin(index, e.target.value)}
-                  placeholder={t("Please enter a valid url")}
-                  inputProps={{ style: { fontSize: 14 } }}
-                />
-                <Button
-                  variant="contained"
-                  color="error"
-                  size="small"
-                  onClick={() => handleDeleteOrigin(index)}
-                  disabled={corsConfig.allowOrigins.length <= 0}
-                  sx={deleteButtonStyle}
                 >
-                  <DeleteIcon fontSize="small" />
+                  {t("Always included origins: {{urls}}", {
-                </Button>
+                    urls: DEV_URLS.join(", "),
-              </div>
+                  })}
-            ))}
+                </div>
-            <Button
-              variant="contained"
-              size="small"
-              onClick={handleAddOrigin}
-              sx={addButtonStyle}
-            >
-              {t("Add")}
-            </Button>
-
-            <div
-              style={{
-                marginTop: 12,
-                padding: 8,
-                backgroundColor: "#f5f5f5",
-                borderRadius: 4,
-              }}
-            >
-              <div style={{ color: "#666", fontSize: 12, fontStyle: "italic" }}>
-                {t("Always included origins: {{urls}}", {
-                  urls: DEV_URLS.join(", "),
-                })}
               </div>
             </div>
-          </div>
+          </ListItem>
-        </ListItem>
+        </List>
-      </List>
+      </BaseDialog>
-    </BaseDialog>
+    );
-  );
+  },
-};
+);

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

@@ -1,9 +1,9 @@
 import { styled, Typography } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, Switch } from "@/components/base";
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { useVerge } from "@/hooks/use-verge";
 import { showNotice } from "@/services/noticeService";
 
@@ -26,7 +26,7 @@ const HOTKEY_FUNC = [
   "entry_lightweight_mode",
 ];
 
-export const HotkeyViewer = ({ ref, ...props }) => {
+export const HotkeyViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
@@ -117,4 +117,4 @@ export const HotkeyViewer = ({ ref, ...props }) => {
       ))}
     </BaseDialog>
   );
-};
+});

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

@@ -12,10 +12,10 @@ 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 { useEffect, useImperativeHandle, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, Switch } from "@/components/base";
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import { useVerge } from "@/hooks/use-verge";
 import { copyIconFile, getAppDir } from "@/services/cmds";
@@ -38,7 +38,7 @@ const getIcons = async (icon_dir: string, name: string) => {
   };
 };
 
-export const LayoutViewer = ({ ref, ...props }) => {
+export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const { verge, patchVerge, mutateVerge } = useVerge();
 
@@ -387,7 +387,7 @@ export const LayoutViewer = ({ ref, ...props }) => {
       </List>
     </BaseDialog>
   );
-};
+});
 
 const Item = styled(ListItem)(() => ({
   padding: "5px 2px",

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

@@ -7,16 +7,16 @@ import {
   InputAdornment,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, Switch } from "@/components/base";
+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";
 
-export const LiteModeViewer = ({ ref, ...props }) => {
+export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const { verge, patchVerge } = useVerge();
 
@@ -143,4 +143,4 @@ export const LiteModeViewer = ({ ref, ...props }) => {
       </List>
     </BaseDialog>
   );
-};
+});

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

@@ -8,15 +8,15 @@ import {
   TextField,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, Switch } from "@/components/base";
+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 = ({ ref, ...props }) => {
+export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const { verge, patchVerge } = useVerge();
 
@@ -319,4 +319,4 @@ export const MiscViewer = ({ ref, ...props }) => {
       </List>
     </BaseDialog>
   );
-};
+});

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

@@ -1,15 +1,15 @@
 import { ContentCopyRounded } from "@mui/icons-material";
 import { alpha, Box, Button, IconButton } from "@mui/material";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
-import { BaseDialog } from "@/components/base";
+import { BaseDialog, DialogRef } from "@/components/base";
 import { getNetworkInterfacesInfo } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
-export const NetworkInterfaceViewer = ({ ref, ...props }) => {
+export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [isV4, setIsV4] = useState(true);
@@ -99,7 +99,7 @@ export const NetworkInterfaceViewer = ({ ref, ...props }) => {
       ))}
     </BaseDialog>
   );
-};
+});
 
 const AddressDisplay = (props: { label: string; content: string }) => {
   const { t } = useTranslation();

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

@@ -11,19 +11,25 @@ import {
   Typography,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useEffect, useImperativeHandle, useMemo, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import useSWR, { mutate } from "swr";
 
-import { BaseDialog, Switch } from "@/components/base";
+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,
-  getClashConfig,
   getNetworkInterfacesInfo,
   getSystemHostname,
   getSystemProxy,
@@ -69,7 +75,7 @@ const getValidReg = (isWindows: boolean) => {
   return new RegExp(rValid);
 };
 
-export const SysproxyViewer = ({ ref, ...props }) => {
+export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const isWindows = getSystem() === "windows";
   const validReg = useMemo(() => getValidReg(isWindows), [isWindows]);
@@ -613,7 +619,7 @@ export const SysproxyViewer = ({ ref, ...props }) => {
       </List>
     </BaseDialog>
   );
-};
+});
 
 const FlexBox = styled("div")`
   display: flex;

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

@@ -9,16 +9,16 @@ import {
   useTheme,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog } from "@/components/base";
+import { BaseDialog, DialogRef } from "@/components/base";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { useVerge } from "@/hooks/use-verge";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
 import { showNotice } from "@/services/noticeService";
 
-export const ThemeViewer = ({ ref, ...props }) => {
+export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
   const [open, setOpen] = useState(false);
@@ -144,7 +144,7 @@ export const ThemeViewer = ({ ref, ...props }) => {
       </List>
     </BaseDialog>
   );
-};
+});
 
 const Item = styled(ListItem)(() => ({
   padding: "5px 2px",

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

@@ -8,10 +8,10 @@ import {
   TextField,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, Switch } from "@/components/base";
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { enhanceProfiles } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
@@ -21,7 +21,7 @@ import { StackModeSwitch } from "./stack-mode-switch";
 
 const OS = getSystem();
 
-export const TunViewer = ({ ref, ...props }) => {
+export const TunViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
   const { clash, mutateClash, patchClash } = useClash();
@@ -238,4 +238,4 @@ export const TunViewer = ({ ref, ...props }) => {
       </List>
     </BaseDialog>
   );
-};
+});

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

@@ -4,18 +4,24 @@ 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 { useImperativeHandle, useState, useMemo, useEffect } from "react";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useState,
+  useMemo,
+  useEffect,
+} from "react";
 import { useTranslation } from "react-i18next";
 import ReactMarkdown from "react-markdown";
 import useSWR from "swr";
 
-import { BaseDialog } from "@/components/base";
+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 = ({ ref, ...props }) => {
+export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
   const [open, setOpen] = useState(false);
@@ -161,4 +167,4 @@ export const UpdateViewer = ({ ref, ...props }) => {
       )}
     </BaseDialog>
   );
-};
+});

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

@@ -1,9 +1,9 @@
 import { Button, Box, Typography } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, BaseEmpty } from "@/components/base";
+import { BaseDialog, BaseEmpty, DialogRef } from "@/components/base";
 import { useClashInfo } from "@/hooks/use-clash";
 import { useVerge } from "@/hooks/use-verge";
 import { openWebUrl } from "@/services/cmds";
@@ -11,7 +11,7 @@ import { showNotice } from "@/services/noticeService";
 
 import { WebUIItem } from "./web-ui-item";
 
-export const WebUIViewer = ({ ref, ...props }) => {
+export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
 
   const { clashInfo } = useClashInfo();
@@ -139,4 +139,4 @@ export const WebUIViewer = ({ ref, ...props }) => {
       )}
     </BaseDialog>
   );
-};
+});

src/components/test/test-viewer.tsx

@@ -1,7 +1,7 @@
 import { TextField } from "@mui/material";
 import { useLockFn } from "ahooks";
 import { nanoid } from "nanoid";
-import { useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -19,10 +19,7 @@ export interface TestViewerRef {
 }
 
 // create or edit the test item
-export const TestViewer = ({
+export const TestViewer = forwardRef<TestViewerRef, Props>((props, ref) => {
-  ref,
-  ...props
-}: Props & { ref?: React.RefObject<TestViewerRef | null> }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [openType, setOpenType] = useState<"new" | "edit">("new");
@@ -176,4 +173,4 @@ export const TestViewer = ({
       />
     </BaseDialog>
   );
-};
+});

src/providers/app-data-provider.tsx

@@ -1,5 +1,11 @@
 import { listen } from "@tauri-apps/api/event";
-import React, { createContext, use, useEffect, useMemo, useRef } from "react";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
 import useSWR from "swr";
 
 import { useClashInfo } from "@/hooks/use-clash";
@@ -583,12 +589,14 @@ export const AppDataProvider = ({
     refreshAll,
   ]);
 
-  return <AppDataContext value={value}>{children}</AppDataContext>;
+  return (
+    <AppDataContext.Provider value={value}>{children}</AppDataContext.Provider>
+  );
 };
 
 // 自定义Hook访问全局数据
 export const useAppData = () => {
-  const context = use(AppDataContext);
+  const context = useContext(AppDataContext);
 
   if (!context) {
     throw new Error("useAppData必须在AppDataProvider内使用");

src/providers/chain-proxy-provider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, use, useState } from "react";
+import React, { createContext, useCallback, useContext, useState } from "react";
 
 interface ChainProxyContextType {
   isChainMode: boolean;
@@ -26,7 +26,7 @@ export const ChainProxyProvider = ({
   }, []);
 
   return (
-    <ChainProxyContext
+    <ChainProxyContext.Provider
       value={{
         isChainMode,
         setChainMode,
@@ -35,12 +35,12 @@ export const ChainProxyProvider = ({
       }}
     >
       {children}
-    </ChainProxyContext>
+    </ChainProxyContext.Provider>
   );
 };
 
 export const useChainProxy = () => {
-  const context = use(ChainProxyContext);
+  const context = useContext(ChainProxyContext);
   if (!context) {
     throw new Error("useChainProxy must be used within a ChainProxyProvider");
   }