+
+ {t("Allowed Origins")}
+
+ {corsConfig.allowOrigins.map((origin, index) => (
+
+ handleUpdateOrigin(index, e.target.value)}
+ placeholder={t("Please enter a valid url")}
+ inputProps={{ style: { fontSize: 14 } }}
+ />
+
+
+ ))}
+
-
-
-
- {t("Allowed Origins")}
-
- {corsConfig.allowOrigins.map((origin, index) => (
-
handleUpdateOrigin(index, e.target.value)}
- placeholder={t("Please enter a valid url")}
- inputProps={{ style: { fontSize: 14 } }}
- />
-
-
-
-
- );
-};
+
+
+
+ );
+ },
+);
diff --git a/src/components/setting/mods/hotkey-viewer.tsx b/src/components/setting/mods/hotkey-viewer.tsx
index 8ea690fa..cd09e244 100644
--- a/src/components/setting/mods/hotkey-viewer.tsx
+++ b/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
((props, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
@@ -117,4 +117,4 @@ export const HotkeyViewer = ({ ref, ...props }) => {
))}
);
-};
+});
diff --git a/src/components/setting/mods/layout-viewer.tsx b/src/components/setting/mods/layout-viewer.tsx
index 80951552..5e0f1e25 100644
--- a/src/components/setting/mods/layout-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const { verge, patchVerge, mutateVerge } = useVerge();
@@ -387,7 +387,7 @@ export const LayoutViewer = ({ ref, ...props }) => {
);
-};
+});
const Item = styled(ListItem)(() => ({
padding: "5px 2px",
diff --git a/src/components/setting/mods/lite-mode-viewer.tsx b/src/components/setting/mods/lite-mode-viewer.tsx
index 30f534a2..6c243667 100644
--- a/src/components/setting/mods/lite-mode-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const { verge, patchVerge } = useVerge();
@@ -143,4 +143,4 @@ export const LiteModeViewer = ({ ref, ...props }) => {
);
-};
+});
diff --git a/src/components/setting/mods/misc-viewer.tsx b/src/components/setting/mods/misc-viewer.tsx
index cee02882..b0048fd8 100644
--- a/src/components/setting/mods/misc-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const { verge, patchVerge } = useVerge();
@@ -319,4 +319,4 @@ export const MiscViewer = ({ ref, ...props }) => {
);
-};
+});
diff --git a/src/components/setting/mods/network-interface-viewer.tsx b/src/components/setting/mods/network-interface-viewer.tsx
index 5b7d0422..912529eb 100644
--- a/src/components/setting/mods/network-interface-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const [isV4, setIsV4] = useState(true);
@@ -99,7 +99,7 @@ export const NetworkInterfaceViewer = ({ ref, ...props }) => {
))}
);
-};
+});
const AddressDisplay = (props: { label: string; content: string }) => {
const { t } = useTranslation();
diff --git a/src/components/setting/mods/sysproxy-viewer.tsx b/src/components/setting/mods/sysproxy-viewer.tsx
index 9649a3f6..329d857e 100644
--- a/src/components/setting/mods/sysproxy-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const isWindows = getSystem() === "windows";
const validReg = useMemo(() => getValidReg(isWindows), [isWindows]);
@@ -613,7 +619,7 @@ export const SysproxyViewer = ({ ref, ...props }) => {
);
-};
+});
const FlexBox = styled("div")`
display: flex;
diff --git a/src/components/setting/mods/theme-viewer.tsx b/src/components/setting/mods/theme-viewer.tsx
index f59fae53..e3f764c5 100644
--- a/src/components/setting/mods/theme-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
@@ -144,7 +144,7 @@ export const ThemeViewer = ({ ref, ...props }) => {
);
-};
+});
const Item = styled(ListItem)(() => ({
padding: "5px 2px",
diff --git a/src/components/setting/mods/tun-viewer.tsx b/src/components/setting/mods/tun-viewer.tsx
index d3667573..cd361cc9 100644
--- a/src/components/setting/mods/tun-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const { clash, mutateClash, patchClash } = useClash();
@@ -238,4 +238,4 @@ export const TunViewer = ({ ref, ...props }) => {
);
-};
+});
diff --git a/src/components/setting/mods/update-viewer.tsx b/src/components/setting/mods/update-viewer.tsx
index a2fa367e..3b67e175 100644
--- a/src/components/setting/mods/update-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
@@ -161,4 +167,4 @@ export const UpdateViewer = ({ ref, ...props }) => {
)}
);
-};
+});
diff --git a/src/components/setting/mods/web-ui-viewer.tsx b/src/components/setting/mods/web-ui-viewer.tsx
index 655be1e9..e82035fc 100644
--- a/src/components/setting/mods/web-ui-viewer.tsx
+++ b/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((props, ref) => {
const { t } = useTranslation();
const { clashInfo } = useClashInfo();
@@ -139,4 +139,4 @@ export const WebUIViewer = ({ ref, ...props }) => {
)}
);
-};
+});
diff --git a/src/components/test/test-viewer.tsx b/src/components/test/test-viewer.tsx
index 56453bb9..0962c424 100644
--- a/src/components/test/test-viewer.tsx
+++ b/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 = ({
- ref,
- ...props
-}: Props & { ref?: React.RefObject }) => {
+export const TestViewer = forwardRef((props, ref) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const [openType, setOpenType] = useState<"new" | "edit">("new");
@@ -176,4 +173,4 @@ export const TestViewer = ({
/>
);
-};
+});
diff --git a/src/providers/app-data-provider.tsx b/src/providers/app-data-provider.tsx
index 8abd1380..16ad3962 100644
--- a/src/providers/app-data-provider.tsx
+++ b/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 {children};
+ return (
+ {children}
+ );
};
// 自定义Hook访问全局数据
export const useAppData = () => {
- const context = use(AppDataContext);
+ const context = useContext(AppDataContext);
if (!context) {
throw new Error("useAppData必须在AppDataProvider内使用");
diff --git a/src/providers/chain-proxy-provider.tsx b/src/providers/chain-proxy-provider.tsx
index c8ccce1d..2b834f89 100644
--- a/src/providers/chain-proxy-provider.tsx
+++ b/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 (
-
{children}
-
+
);
};
export const useChainProxy = () => {
- const context = use(ChainProxyContext);
+ const context = useContext(ChainProxyContext);
if (!context) {
throw new Error("useChainProxy must be used within a ChainProxyProvider");
}