feat: refactor app data provider and context for improved data management and performance

src/components/base/base-dialog.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import { LoadingButton } from "@mui/lab";
 import {
   Button,

src/components/home/clash-info-card.tsx

@@ -1,10 +1,10 @@
 import { DeveloperBoardOutlined } from "@mui/icons-material";
-import { Typography, Stack, Divider } from "@mui/material";
+import { Divider, Stack, Typography } from "@mui/material";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useClash } from "@/hooks/use-clash";
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 
 import { EnhancedCard } from "./enhanced-card";
 

src/components/home/clash-mode-card.tsx

@@ -1,17 +1,16 @@
 import {
+  DirectionsRounded,
   LanguageRounded,
   MultipleStopRounded,
-  DirectionsRounded,
 } from "@mui/icons-material";
-import { Box, Typography, Paper, Stack } from "@mui/material";
+import { Box, Paper, Stack, Typography } from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useVerge } from "@/hooks/use-verge";
-import { useAppData } from "@/providers/app-data-provider";
-import { closeAllConnections } from "@/services/cmds";
-import { patchClashMode } from "@/services/cmds";
+import { useAppData } from "@/providers/app-data-context";
+import { closeAllConnections, patchClashMode } from "@/services/cmds";
 
 export const ClashModeCard = () => {
   const { t } = useTranslation();

src/components/home/current-proxy-card.tsx

@@ -1,37 +1,37 @@
 import {
-  SignalWifi4Bar as SignalStrong,
+  AccessTimeRounded,
+  ChevronRight,
+  WifiOff as SignalError,
   SignalWifi3Bar as SignalGood,
   SignalWifi2Bar as SignalMedium,
-  SignalWifi1Bar as SignalWeak,
   SignalWifi0Bar as SignalNone,
-  WifiOff as SignalError,
-  ChevronRight,
-  SortRounded,
-  AccessTimeRounded,
+  SignalWifi4Bar as SignalStrong,
+  SignalWifi1Bar as SignalWeak,
   SortByAlphaRounded,
+  SortRounded,
 } from "@mui/icons-material";
 import {
   Box,
-  Typography,
-  Chip,
   Button,
-  alpha,
-  useTheme,
-  Select,
-  MenuItem,
+  Chip,
   FormControl,
+  IconButton,
   InputLabel,
+  MenuItem,
+  Select,
   SelectChangeEvent,
   Tooltip,
-  IconButton,
+  Typography,
+  alpha,
+  useTheme,
 } from "@mui/material";
-import { useEffect, useState, useMemo, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
 import { EnhancedCard } from "@/components/home/enhanced-card";
 import { useProxySelection } from "@/hooks/use-proxy-selection";
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 import delayManager from "@/services/delay";
 
 // 本地存储的键名

src/components/home/enhanced-traffic-stats.tsx

@@ -1,22 +1,21 @@
 import {
-  ArrowUpwardRounded,
   ArrowDownwardRounded,
-  MemoryRounded,
-  LinkRounded,
-  CloudUploadRounded,
+  ArrowUpwardRounded,
   CloudDownloadRounded,
+  CloudUploadRounded,
+  LinkRounded,
+  MemoryRounded,
 } from "@mui/icons-material";
 import {
-  Typography,
+  Box,
+  Grid,
+  PaletteColor,
   Paper,
+  Typography,
   alpha,
   useTheme,
-  PaletteColor,
-  Grid,
-  Box,
 } from "@mui/material";
-import { useRef, useCallback, memo, useMemo } from "react";
-import { ReactNode } from "react";
+import { ReactNode, memo, useCallback, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
@@ -24,8 +23,8 @@ import { TrafficErrorBoundary } from "@/components/common/traffic-error-boundary
 import { useTrafficDataEnhanced } from "@/hooks/use-traffic-monitor";
 import { useVerge } from "@/hooks/use-verge";
 import { useVisibility } from "@/hooks/use-visibility";
-import { useAppData } from "@/providers/app-data-provider";
-import { isDebugEnabled, gc } from "@/services/cmds";
+import { useAppData } from "@/providers/app-data-context";
+import { gc, isDebugEnabled } from "@/services/cmds";
 import parseTraffic from "@/utils/parse-traffic";
 
 import {

src/components/home/home-profile-card.tsx

@@ -1,30 +1,30 @@
 import {
   CloudUploadOutlined,
-  StorageOutlined,
-  UpdateOutlined,
   DnsOutlined,
-  SpeedOutlined,
   EventOutlined,
   LaunchOutlined,
+  SpeedOutlined,
+  StorageOutlined,
+  UpdateOutlined,
 } from "@mui/icons-material";
 import {
   Box,
-  Typography,
   Button,
-  Stack,
   LinearProgress,
-  alpha,
-  useTheme,
   Link,
+  Stack,
+  Typography,
+  alpha,
   keyframes,
+  useTheme,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
 import dayjs from "dayjs";
-import { useMemo, useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 import { openWebUrl, updateProfile } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 import parseTraffic from "@/utils/parse-traffic";

src/components/proxy/provider-button.tsx

@@ -1,18 +1,18 @@
-import { StorageOutlined, RefreshRounded } from "@mui/icons-material";
+import { RefreshRounded, StorageOutlined } from "@mui/icons-material";
 import {
-  Button,
   Box,
+  Button,
   Dialog,
-  DialogTitle,
-  DialogContent,
   DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
   IconButton,
+  LinearProgress,
   List,
   ListItem,
   ListItemText,
   Typography,
-  Divider,
-  LinearProgress,
   alpha,
   styled,
 } from "@mui/material";
@@ -21,7 +21,7 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 import { proxyProviderUpdate } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 import parseTraffic from "@/utils/parse-traffic";

src/components/proxy/proxy-chain.tsx

@@ -35,7 +35,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 import {
   closeAllConnections,
   getProxies,

src/components/proxy/proxy-groups.tsx

@@ -1,28 +1,28 @@
 import { ExpandMoreRounded } from "@mui/icons-material";
 import {
-  Box,
-  Snackbar,
   Alert,
+  Box,
   Chip,
-  Typography,
   IconButton,
   Menu,
   MenuItem,
+  Snackbar,
+  Typography,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
-import { useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 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";
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 import {
-  providerHealthCheck,
   getGroupProxyDelays,
-  updateProxyChainConfigInRuntime,
   getRuntimeConfig,
+  providerHealthCheck,
+  updateProxyChainConfigInRuntime,
 } from "@/services/cmds";
 import delayManager from "@/services/delay";
 

src/components/proxy/use-render-list.ts

@@ -2,14 +2,14 @@ import { useEffect, useMemo } from "react";
 import useSWR from "swr";
 
 import { useVerge } from "@/hooks/use-verge";
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 import { getRuntimeConfig } from "@/services/cmds";
 import delayManager from "@/services/delay";
 
 import { filterSort } from "./use-filter-sort";
 import {
-  useHeadStateNew,
   DEFAULT_STATE,
+  useHeadStateNew,
   type HeadState,
 } from "./use-head-state";
 import { useWindowWidth } from "./use-window-width";

src/components/rule/provider-button.tsx

@@ -1,17 +1,17 @@
-import { StorageOutlined, RefreshRounded } from "@mui/icons-material";
+import { RefreshRounded, StorageOutlined } from "@mui/icons-material";
 import {
-  Button,
   Box,
+  Button,
   Dialog,
-  DialogTitle,
-  DialogContent,
   DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
   IconButton,
   List,
   ListItem,
   ListItemText,
   Typography,
-  Divider,
   alpha,
   styled,
 } from "@mui/material";
@@ -20,7 +20,7 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useAppData } from "@/providers/app-data-provider";
+import { useAppData } from "@/providers/app-data-context";
 import { ruleProviderUpdate } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 

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

@@ -26,10 +26,10 @@ 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 { useAppData } from "@/providers/app-data-context";
 import {
   getAutotemProxy,
+  getClashConfig,
   getNetworkInterfacesInfo,
   getSystemHostname,
   getSystemProxy,
@@ -440,14 +440,10 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             </Typography>
           </FlexBox>
           {!value.pac && (
-            <>
-              <FlexBox>
-                <Typography className="label">{t("Server Addr")}</Typography>
-                <Typography className="value">
-                  {getSystemProxyAddress}
-                </Typography>
-              </FlexBox>
-            </>
+            <FlexBox>
+              <Typography className="label">{t("Server Addr")}</Typography>
+              <Typography className="value">{getSystemProxyAddress}</Typography>
+            </FlexBox>
           )}
           {value.pac && (
             <FlexBox>
@@ -582,39 +578,37 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
         )}
 
         {value.pac && (
-          <>
-            <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
-              <ListItemText
-                primary={t("PAC Script Content")}
-                sx={{ padding: "3px 0" }}
-              />
-              <Button
-                startIcon={<EditRounded />}
-                variant="outlined"
-                onClick={() => {
-                  setEditorOpen(true);
+          <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
+            <ListItemText
+              primary={t("PAC Script Content")}
+              sx={{ padding: "3px 0" }}
+            />
+            <Button
+              startIcon={<EditRounded />}
+              variant="outlined"
+              onClick={() => {
+                setEditorOpen(true);
+              }}
+            >
+              {t("Edit")} PAC
+            </Button>
+            {editorOpen && (
+              <EditorViewer
+                open={true}
+                title={`${t("Edit")} PAC`}
+                initialData={Promise.resolve(value.pac_content ?? "")}
+                language="javascript"
+                onSave={(_prev, curr) => {
+                  let pac = DEFAULT_PAC;
+                  if (curr && curr.trim().length > 0) {
+                    pac = curr;
+                  }
+                  setValue((v) => ({ ...v, pac_content: pac }));
                 }}
-              >
-                {t("Edit")} PAC
-              </Button>
-              {editorOpen && (
-                <EditorViewer
-                  open={true}
-                  title={`${t("Edit")} PAC`}
-                  initialData={Promise.resolve(value.pac_content ?? "")}
-                  language="javascript"
-                  onSave={(_prev, curr) => {
-                    let pac = DEFAULT_PAC;
-                    if (curr && curr.trim().length > 0) {
-                      pac = curr;
-                    }
-                    setValue((v) => ({ ...v, pac_content: pac }));
-                  }}
-                  onClose={() => setEditorOpen(false)}
-                />
-              )}
-            </ListItem>
-          </>
+                onClose={() => setEditorOpen(false)}
+              />
+            )}
+          </ListItem>
         )}
       </List>
     </BaseDialog>