Refactor components to remove forwardRef and simplify props handling

- Updated multiple components to remove the use of forwardRef, simplifying the props structure.
- Adjusted imports and component definitions accordingly.
- Ensured consistent handling of refs and props across various viewer components.
- Improved readability and maintainability of the codebase.

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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 
 import { deleteConnection } from "@/services/cmds";
 import parseTraffic from "@/utils/parse-traffic";
@@ -11,8 +11,7 @@ export interface ConnectionDetailRef {
   open: (detail: IConnectionsItem) => void;
 }
 
-export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
-  (props, ref) => {
+export const ConnectionDetail = ({ ref, ...props }) => {
   const [open, setOpen] = useState(false);
   const [detail, setDetail] = useState<IConnectionsItem>(null!);
   const theme = useTheme();
@@ -48,8 +47,7 @@ export const ConnectionDetail = forwardRef<ConnectionDetailRef>(
       }
     />
   );
-  },
-);
+};
 
 interface InnerProps {
   data: IConnectionsItem;

src/components/home/enhanced-canvas-traffic-graph.tsx

@@ -1,6 +1,5 @@
 import { Box, useTheme } from "@mui/material";
 import {
-  forwardRef,
   useImperativeHandle,
   useState,
   useEffect,
@@ -81,8 +80,7 @@ const GRAPH_CONFIG = {
  * 稳定版Canvas流量图表组件
  * 修复闪烁问题，添加时间轴显示
  */
-export const EnhancedCanvasTrafficGraph = memo(
-  forwardRef<EnhancedCanvasTrafficGraphRef>((props, ref) => {
+export const EnhancedCanvasTrafficGraph = memo(({ ref, ...props }) => {
   const theme = useTheme();
   const { t } = useTranslation();
 
@@ -142,12 +140,7 @@ export const EnhancedCanvasTrafficGraph = memo(
   useEffect(() => {
     const timeRangeData = getDataForTimeRange(timeRange);
     updateDisplayDataDebounced(timeRangeData);
-    }, [
-      dataPoints,
-      timeRange,
-      getDataForTimeRange,
-      updateDisplayDataDebounced,
-    ]);
+  }, [dataPoints, timeRange, getDataForTimeRange, updateDisplayDataDebounced]);
 
   // Y轴坐标计算 - 基于刻度范围的线性映射
   const calculateY = useCallback(
@@ -159,10 +152,7 @@ export const EnhancedCanvasTrafficGraph = memo(
       if (data.length === 0) return bottomY;
 
       // 获取当前的刻度范围
-        const allValues = [
-          ...data.map((d) => d.up),
-          ...data.map((d) => d.down),
-        ];
+      const allValues = [...data.map((d) => d.up), ...data.map((d) => d.down)];
       const maxValue = Math.max(...allValues);
       const minValue = Math.min(...allValues);
 
@@ -231,9 +221,7 @@ export const EnhancedCanvasTrafficGraph = memo(
         const upY = calculateY(dataPoint.up, rect.height, displayData);
         const downY = calculateY(dataPoint.down, rect.height, displayData);
         const highlightY =
-            Math.max(dataPoint.up, dataPoint.down) === dataPoint.up
-              ? upY
-              : downY;
+          Math.max(dataPoint.up, dataPoint.down) === dataPoint.up ? upY : downY;
 
         setTooltipData({
           x: mouseX,
@@ -261,10 +249,7 @@ export const EnhancedCanvasTrafficGraph = memo(
       if (data.length === 0) return [];
 
       // 找到数据的最大值和最小值
-        const allValues = [
-          ...data.map((d) => d.up),
-          ...data.map((d) => d.down),
-        ];
+      const allValues = [...data.map((d) => d.up), ...data.map((d) => d.down)];
       const maxValue = Math.max(...allValues);
       const minValue = Math.min(...allValues);
 
@@ -397,8 +382,7 @@ export const EnhancedCanvasTrafficGraph = memo(
   );
 
   // 获取时间范围对应的最佳时间显示策略
-    const getTimeDisplayStrategy = useCallback(
-      (timeRangeMinutes: TimeRange) => {
+  const getTimeDisplayStrategy = useCallback((timeRangeMinutes: TimeRange) => {
     switch (timeRangeMinutes) {
       case 1: // 1分钟：更密集的时间标签，显示 MM:SS
         return {
@@ -442,9 +426,7 @@ export const EnhancedCanvasTrafficGraph = memo(
           minPixelDistance: 40, // 减少间距，允许更多标签
         };
     }
-      },
-      [],
-    );
+  }, []);
 
   // 绘制时间轴
   const drawTimeAxis = useCallback(
@@ -480,8 +462,7 @@ export const EnhancedCanvasTrafficGraph = memo(
       );
 
       // 收集要显示的时间点
-        const timePoints: Array<{ index: number; x: number; label: string }> =
-          [];
+      const timePoints: Array<{ index: number; x: number; label: string }> = [];
 
       // 添加第一个时间点
       if (data.length > 0 && data[0].timestamp) {
@@ -493,11 +474,7 @@ export const EnhancedCanvasTrafficGraph = memo(
       }
 
       // 添加中间的时间点
-        for (
-          let i = actualStep;
-          i < data.length - actualStep;
-          i += actualStep
-        ) {
+      for (let i = actualStep; i < data.length - actualStep; i += actualStep) {
         const point = data[i];
         if (!point.timestamp) continue;
 
@@ -726,15 +703,7 @@ export const EnhancedCanvasTrafficGraph = memo(
     );
 
     // 绘制上传线（前景层）
-      drawTrafficLine(
-        ctx,
-        upValues,
-        width,
-        height,
-        colors.up,
-        true,
-        displayData,
-      );
+    drawTrafficLine(ctx, upValues, width, height, colors.up, true, displayData);
 
     // 绘制悬浮高亮线
     if (tooltipData.visible && tooltipData.dataIndex >= 0) {
@@ -999,7 +968,6 @@ export const EnhancedCanvasTrafficGraph = memo(
       </Box>
     </Box>
   );
-  }),
-);
+});
 
 EnhancedCanvasTrafficGraph.displayName = "EnhancedCanvasTrafficGraph";

src/components/layout/traffic-graph.tsx

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

src/components/profile/profile-viewer.tsx

@@ -9,13 +9,7 @@ import {
   TextField,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -38,8 +32,10 @@ export interface ProfileViewerRef {
 
 // create or edit the profile
 // remote / local
-export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
-  (props, ref) => {
+export const ProfileViewer = ({
+  ref,
+  ...props
+}: Props & { ref?: React.RefObject<ProfileViewerRef | null> }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [openType, setOpenType] = useState<"new" | "edit">("new");
@@ -124,8 +120,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
         const isUpdate = openType === "edit";
 
         // 判断是否是当前激活的配置
-          const isActivating =
-            isUpdate && form.uid === (profiles?.current ?? "");
+        const isActivating = isUpdate && form.uid === (profiles?.current ?? "");
 
         // 保存原始代理设置以便回退成功后恢复
         const originalOptions = {
@@ -334,9 +329,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
               slotProps={{
                 input: {
                   endAdornment: (
-                      <InputAdornment position="end">
-                        {t("mins")}
-                      </InputAdornment>
+                    <InputAdornment position="end">{t("mins")}</InputAdornment>
                   ),
                 },
               }}
@@ -392,8 +385,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
       )}
     </BaseDialog>
   );
-  },
-);
+};
 
 const StyledBox = styled(Box)(() => ({
   margin: "8px 0 8px 8px",

src/components/proxy/proxy-groups.tsx

@@ -1,23 +1,19 @@
+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";
@@ -34,8 +30,8 @@ import { BaseEmpty } from "../base";
 import { ScrollTopButton } from "../layout/scroll-top-button";
 
 import { ProxyChain } from "./proxy-chain";
-import { ProxyRender } from "./proxy-render";
 import { ProxyGroupNavigator } from "./proxy-group-navigator";
+import { ProxyRender } from "./proxy-render";
 import { useRenderList } from "./use-render-list";
 
 interface Props {

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

@@ -1,16 +1,10 @@
 import { Box, Paper, Divider } from "@mui/material";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import {
-  forwardRef,
-  useImperativeHandle,
-  useState,
-  useCallback,
-  useMemo,
-} from "react";
+import { useImperativeHandle, useState, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog } from "@/components/base";
 import { BaseLoadingOverlay } from "@/components/base";
 import { listWebDavBackup } from "@/services/cmds";
 
@@ -25,7 +19,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 = forwardRef<DialogRef>((props, ref) => {
+export const BackupViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
@@ -131,4 +125,4 @@ export const BackupViewer = forwardRef<DialogRef>((props, ref) => {
       </Box>
     </BaseDialog>
   );
-});
+};

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

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

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

@@ -1,12 +1,11 @@
 import { Box, Chip } from "@mui/material";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { 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 = forwardRef<DialogRef>((_, ref) => {
+export const ConfigViewer = ({ ref, ..._ }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [runtimeConfig, setRuntimeConfig] = useState("");
@@ -38,4 +37,4 @@ export const ConfigViewer = forwardRef<DialogRef>((_, 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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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) => {
+export const ControllerViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [copySuccess, setCopySuccess] = useState<null | string>(null);
@@ -217,4 +217,4 @@ export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
       </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 { forwardRef, useImperativeHandle, useState, useEffect } from "react";
+import { useImperativeHandle, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import MonacoEditor from "react-monaco-editor";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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 = forwardRef<DialogRef>((props, ref) => {
+export const DnsViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const { clash, mutateClash } = useClash();
   const themeMode = useThemeMode();
@@ -1034,4 +1034,4 @@ export const DnsViewer = forwardRef<DialogRef>((props, ref) => {
       )}
     </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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BaseDialog, Switch } from "@/components/base";
@@ -71,8 +71,7 @@ interface ClashHeaderConfigingRef {
   close: () => void;
 }
 
-export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
-  (props, ref) => {
+export const HeaderConfiguration = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const { clash, mutateClash, patchClash } = useClash();
   const [open, setOpen] = useState(false);
@@ -191,10 +190,7 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
               edge="end"
               checked={corsConfig.allowPrivateNetwork}
               onChange={(e) =>
-                  handleCorsConfigChange(
-                    "allowPrivateNetwork",
-                    e.target.checked,
-                  )
+                handleCorsConfigChange("allowPrivateNetwork", e.target.checked)
               }
             />
           </Box>
@@ -254,9 +250,7 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
                 borderRadius: 4,
               }}
             >
-                <div
-                  style={{ color: "#666", fontSize: 12, fontStyle: "italic" }}
-                >
+              <div style={{ color: "#666", fontSize: 12, fontStyle: "italic" }}>
                 {t("Always included origins: {{urls}}", {
                   urls: DEV_URLS.join(", "),
                 })}
@@ -267,5 +261,4 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
       </List>
     </BaseDialog>
   );
-  },
-);
+};

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

@@ -1,9 +1,9 @@
 import { styled, Typography } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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 = forwardRef<DialogRef>((props, ref) => {
+export const HotkeyViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
@@ -117,4 +117,4 @@ export const HotkeyViewer = forwardRef<DialogRef>((props, ref) => {
       ))}
     </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 { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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 = forwardRef<DialogRef>((props, ref) => {
+export const LayoutViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const { verge, patchVerge, mutateVerge } = useVerge();
 
@@ -387,7 +387,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
       </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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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 = forwardRef<DialogRef>((props, ref) => {
+export const LiteModeViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const { verge, patchVerge } = useVerge();
 
@@ -143,4 +143,4 @@ export const LiteModeViewer = forwardRef<DialogRef>((props, ref) => {
       </List>
     </BaseDialog>
   );
-});
+};

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

@@ -8,15 +8,15 @@ import {
   TextField,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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) => {
+export const MiscViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const { verge, patchVerge } = useVerge();
 
@@ -319,4 +319,4 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
       </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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog } from "@/components/base";
 import { getNetworkInterfacesInfo } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 
-export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
+export const NetworkInterfaceViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [isV4, setIsV4] = useState(true);
@@ -99,7 +99,7 @@ export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
       ))}
     </BaseDialog>
   );
-});
+};
 
 const AddressDisplay = (props: { label: string; content: string }) => {
   const { t } = useTranslation();

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

@@ -11,25 +11,19 @@ import {
   Typography,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from "react";
+import { useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR, { mutate } from "swr";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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,
@@ -75,7 +69,7 @@ const getValidReg = (isWindows: boolean) => {
   return new RegExp(rValid);
 };
 
-export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
+export const SysproxyViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
   const isWindows = getSystem() === "windows";
   const validReg = useMemo(() => getValidReg(isWindows), [isWindows]);
@@ -619,7 +613,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
       </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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog } 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 = forwardRef<DialogRef>((props, ref) => {
+export const ThemeViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
 
   const [open, setOpen] = useState(false);
@@ -144,7 +144,7 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
       </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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, DialogRef, Switch } from "@/components/base";
+import { BaseDialog, 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 = forwardRef<DialogRef>((props, ref) => {
+export const TunViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
 
   const { clash, mutateClash, patchClash } = useClash();
@@ -238,4 +238,4 @@ export const TunViewer = forwardRef<DialogRef>((props, ref) => {
       </List>
     </BaseDialog>
   );
-});
+};

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

@@ -4,24 +4,18 @@ 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,
-  useState,
-  useMemo,
-  useEffect,
-} from "react";
+import { useImperativeHandle, useState, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import ReactMarkdown from "react-markdown";
 import useSWR from "swr";
 
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog } 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) => {
+export const UpdateViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
 
   const [open, setOpen] = useState(false);
@@ -167,4 +161,4 @@ export const UpdateViewer = forwardRef<DialogRef>((props, ref) => {
       )}
     </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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { BaseDialog, BaseEmpty, DialogRef } from "@/components/base";
+import { BaseDialog, BaseEmpty } 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 = forwardRef<DialogRef>((props, ref) => {
+export const WebUIViewer = ({ ref, ...props }) => {
   const { t } = useTranslation();
 
   const { clashInfo } = useClashInfo();
@@ -139,4 +139,4 @@ export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
       )}
     </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 { forwardRef, useImperativeHandle, useState } from "react";
+import { useImperativeHandle, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -19,7 +19,10 @@ export interface TestViewerRef {
 }
 
 // create or edit the test item
-export const TestViewer = forwardRef<TestViewerRef, Props>((props, ref) => {
+export const TestViewer = ({
+  ref,
+  ...props
+}: Props & { ref?: React.RefObject<TestViewerRef | null> }) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [openType, setOpenType] = useState<"new" | "edit">("new");
@@ -173,4 +176,4 @@ export const TestViewer = forwardRef<TestViewerRef, Props>((props, ref) => {
       />
     </BaseDialog>
   );
-});
+};

src/providers/app-data-provider.tsx

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

src/providers/chain-proxy-provider.tsx

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