refactor: adjust base components export

src/components/base/base-empty.tsx

@@ -6,7 +6,7 @@ interface Props {
   extra?: React.ReactNode;
 }
 
-const BaseEmpty = (props: Props) => {
+export const BaseEmpty = (props: Props) => {
   const { text = "Empty", extra } = props;
 
   return (
@@ -27,5 +27,3 @@ const BaseEmpty = (props: Props) => {
     </Box>
   );
 };
-
-export default BaseEmpty;

src/components/base/base-error-boundary.tsx

@@ -9,12 +9,10 @@ function ErrorFallback({ error }: FallbackProps) {
   );
 }
 
-const BaseErrorBoundary: React.FC = (props) => {
+export const BaseErrorBoundary: React.FC = (props) => {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       {props.children}
     </ErrorBoundary>
   );
 };
-
-export default BaseErrorBoundary;

src/components/base/base-loading.tsx

@@ -37,7 +37,7 @@ const LoadingItem = styled("div")(({ theme }) => ({
   background: theme.palette.text.secondary,
 }));
 
-const BaseLoading = () => {
+export const BaseLoading = () => {
   return (
     <Loading>
       <LoadingItem />
@@ -46,5 +46,3 @@ const BaseLoading = () => {
     </Loading>
   );
 };
-
-export default BaseLoading;

src/components/base/base-notice.tsx

@@ -69,7 +69,7 @@ interface NoticeInstance {
 let parent: HTMLDivElement = null!;
 
 // @ts-ignore
-const Notice: NoticeInstance = (props) => {
+export const Notice: NoticeInstance = (props) => {
   if (!parent) {
     parent = document.createElement("div");
     document.body.appendChild(parent);
@@ -91,5 +91,3 @@ const Notice: NoticeInstance = (props) => {
     setTimeout(() => Notice({ type, message, duration }), 0);
   };
 });
-
-export default Notice;

src/components/base/base-page.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography } from "@mui/material";
-import BaseErrorBoundary from "./base-error-boundary";
+import { BaseErrorBoundary } from "./base-error-boundary";
 
 interface Props {
   title?: React.ReactNode; // the page title
@@ -8,7 +8,7 @@ interface Props {
   contentStyle?: React.CSSProperties;
 }
 
-const BasePage: React.FC<Props> = (props) => {
+export const BasePage: React.FC<Props> = (props) => {
   const { title, header, contentStyle, children } = props;
 
   return (
@@ -31,5 +31,3 @@ const BasePage: React.FC<Props> = (props) => {
     </BaseErrorBoundary>
   );
 };
-
-export default BasePage;

src/components/base/index.ts

@@ -1,2 +1,6 @@
 export { BaseDialog, type DialogRef } from "./base-dialog";
+export { BasePage } from "./base-page";
+export { BaseEmpty } from "./base-empty";
+export { BaseLoading } from "./base-loading";
+export { BaseErrorBoundary } from "./base-error-boundary";
 export { Notice } from "./base-notice";

src/components/layout/update-dialog.tsx

@@ -15,7 +15,7 @@ import {
 import { relaunch } from "@tauri-apps/api/process";
 import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
 import { atomUpdateState } from "@/services/states";
-import Notice from "../base/base-notice";
+import { Notice } from "@/components/base";
 
 interface Props {
   open: boolean;

src/components/profile/enhanced.tsx

@@ -10,8 +10,8 @@ import {
   patchProfilesConfig,
   getRuntimeLogs,
 } from "@/services/cmds";
+import { Notice } from "@/components/base";
 import ProfileMore from "./profile-more";
-import Notice from "../base/base-notice";
 
 interface Props {
   items: IProfileItem[];

src/components/profile/file-editor.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import { atomThemeMode } from "@/services/states";
 import { readProfileFile, saveProfileFile } from "@/services/cmds";
-import Notice from "../base/base-notice";
+import { Notice } from "@/components/base";
 
 import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";
 import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
@@ -26,7 +26,7 @@ interface Props {
   onChange?: () => void;
 }
 
-const FileEditor = (props: Props) => {
+export const FileEditor = (props: Props) => {
   const { uid, open, mode, onClose, onChange } = props;
 
   const { t } = useTranslation();
@@ -92,5 +92,3 @@ const FileEditor = (props: Props) => {
     </Dialog>
   );
 };
-
-export default FileEditor;

src/components/profile/info-editor.tsx

@@ -17,7 +17,7 @@ import {
 import { Settings } from "@mui/icons-material";
 import { patchProfile } from "@/services/cmds";
 import { version } from "@root/package.json";
-import Notice from "../base/base-notice";
+import { Notice } from "@/components/base";
 
 interface Props {
   open: boolean;

src/components/profile/log-viewer.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Button,
@@ -9,8 +10,7 @@ import {
   Divider,
   Typography,
 } from "@mui/material";
-import BaseEmpty from "../base/base-empty";
-import { Fragment } from "react";
+import { BaseEmpty } from "@/components/base";
 
 interface Props {
   open: boolean;

src/components/profile/profile-item.tsx

@@ -16,11 +16,11 @@ import {
 import { RefreshRounded } from "@mui/icons-material";
 import { atomLoadingCache } from "@/services/states";
 import { updateProfile, deleteProfile, viewProfile } from "@/services/cmds";
+import { Notice } from "@/components/base";
 import parseTraffic from "@/utils/parse-traffic";
 import ProfileBox from "./profile-box";
 import InfoEditor from "./info-editor";
-import FileEditor from "./file-editor";
-import Notice from "../base/base-notice";
+import { FileEditor } from "./file-editor";
 
 const round = keyframes`
   from { transform: rotate(0deg); }

src/components/profile/profile-more.tsx

@@ -13,11 +13,11 @@ import {
 } from "@mui/material";
 import { FeaturedPlayListRounded } from "@mui/icons-material";
 import { viewProfile } from "@/services/cmds";
+import { Notice } from "@/components/base";
 import InfoEditor from "./info-editor";
-import FileEditor from "./file-editor";
+import { FileEditor } from "./file-editor";
 import ProfileBox from "./profile-box";
 import LogViewer from "./log-viewer";
-import Notice from "../base/base-notice";
 
 interface Props {
   selected: boolean;

src/components/profile/profile-new.tsx

@@ -20,7 +20,7 @@ import {
 } from "@mui/material";
 import { Settings } from "@mui/icons-material";
 import { createProfile } from "@/services/cmds";
-import Notice from "../base/base-notice";
+import { Notice } from "@/components/base";
 import FileInput from "./file-input";
 
 interface Props {

src/components/proxy/proxy-item.tsx

@@ -12,8 +12,8 @@ import {
   SxProps,
   Theme,
 } from "@mui/material";
+import { BaseLoading } from "@/components/base";
 import delayManager from "@/services/delay";
-import BaseLoading from "../base/base-loading";
 
 interface Props {
   groupName: string;

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

@@ -16,7 +16,7 @@ export const useRenderList = (mode: string) => {
   const { data: proxiesData, mutate: mutateProxies } = useSWR(
     "getProxies",
     getProxies,
-    { refreshInterval: 45000, suspense: true }
+    { refreshInterval: 45000 }
   );
 
   const [headStates, setHeadState] = useHeadStateNew();
@@ -35,6 +35,7 @@ export const useRenderList = (mode: string) => {
   }, [proxiesData, mode]);
 
   const renderList: IRenderItem[] = useMemo(() => {
+    if (!proxiesData) return [];
     const useRule = mode === "rule" || mode === "script";
     const renderGroups =
       (useRule ? proxiesData?.groups : [proxiesData?.global!]) || [];

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

@@ -11,7 +11,7 @@ import {
 } from "@/utils/clash-fields";
 import { BaseDialog, DialogRef } from "@/components/base";
 import { useProfiles } from "@/hooks/use-profiles";
-import Notice from "@/components/base/base-notice";
+import { Notice } from "@/components/base";
 
 const fieldSorter = (a: string, b: string) => {
   if (a.includes("-") === a.includes("-")) {

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

@@ -7,8 +7,7 @@ import { List, ListItem, ListItemText, TextField } from "@mui/material";
 import { atomClashPort } from "@/services/states";
 import { getClashConfig } from "@/services/api";
 import { patchClashConfig } from "@/services/cmds";
-import { BaseDialog, DialogRef } from "@/components/base";
-import Notice from "@/components/base/base-notice";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const ClashPortViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

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

@@ -5,8 +5,7 @@ import { useTranslation } from "react-i18next";
 import { List, ListItem, ListItemText, TextField } from "@mui/material";
 import { getClashInfo, patchClashConfig } from "@/services/cmds";
 import { getAxios } from "@/services/api";
-import { BaseDialog, DialogRef } from "@/components/base";
-import Notice from "@/components/base/base-notice";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const ControllerViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

src/components/setting/mods/core-switch.tsx

@@ -5,7 +5,7 @@ import { Menu, MenuItem } from "@mui/material";
 import { Settings } from "@mui/icons-material";
 import { changeClashCore } from "@/services/cmds";
 import { useVerge } from "@/hooks/use-verge";
-import Notice from "@/components/base/base-notice";
+import { Notice } from "@/components/base";
 
 const VALID_CORE = [
   { name: "Clash", core: "clash" },

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

@@ -3,9 +3,8 @@ import { useTranslation } from "react-i18next";
 import { useLockFn } from "ahooks";
 import { styled, Typography } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
 import { HotkeyInput } from "./hotkey-input";
-import Notice from "@/components/base/base-notice";
 
 const ItemWrapper = styled("div")`
   display: flex;

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

@@ -3,8 +3,7 @@ import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { List, ListItem, ListItemText, Switch, TextField } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef } from "@/components/base";
-import Notice from "@/components/base/base-notice";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

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

@@ -9,8 +9,7 @@ import {
   patchVergeConfig,
 } from "@/services/cmds";
 import { forwardRef, useState } from "react";
-import { BaseDialog, DialogRef } from "@/components/base";
-import Notice from "@/components/base/base-notice";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 interface Props {
   enable: boolean;

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

@@ -14,8 +14,7 @@ import {
 } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { getSystemProxy } from "@/services/cmds";
-import { BaseDialog, DialogRef } from "@/components/base";
-import Notice from "@/components/base/base-notice";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

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

@@ -11,8 +11,7 @@ import {
 } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
-import { BaseDialog, DialogRef } from "@/components/base";
-import Notice from "../../base/base-notice";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
 
 export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

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

@@ -5,10 +5,8 @@ import { useTranslation } from "react-i18next";
 import { Button, Box, Typography } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { getClashInfo, openWebUrl } from "@/services/cmds";
+import { BaseDialog, BaseEmpty, DialogRef, Notice } from "@/components/base";
 import { WebUIItem } from "./web-ui-item";
-import { BaseDialog, DialogRef } from "@/components/base";
-import BaseEmpty from "@/components/base/base-empty";
-import Notice from "@/components/base/base-notice";
 
 export const WebUIViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();

src/pages/_layout.tsx

@@ -15,13 +15,12 @@ import { atomCurrentProfile } from "@/services/states";
 import { getProfiles } from "@/services/cmds";
 import { useVerge } from "@/hooks/use-verge";
 import { ReactComponent as LogoSvg } from "@/assets/image/logo.svg";
-import Notice from "@/components/base/base-notice";
+import { BaseErrorBoundary, Notice } from "@/components/base";
 import LayoutItem from "@/components/layout/layout-item";
 import LayoutControl from "@/components/layout/layout-control";
 import LayoutTraffic from "@/components/layout/layout-traffic";
 import UpdateButton from "@/components/layout/update-button";
 import useCustomTheme from "@/components/layout/use-custom-theme";
-import BaseErrorBoundary from "@/components/base/base-error-boundary";
 import getSystem from "@/utils/get-system";
 import "dayjs/locale/zh-cn";
 

src/pages/connections.tsx

@@ -15,8 +15,7 @@ import { useTranslation } from "react-i18next";
 import { TableChartRounded, TableRowsRounded } from "@mui/icons-material";
 import { closeAllConnections, getInformation } from "@/services/api";
 import { atomConnectionSetting } from "@/services/states";
-import BasePage from "@/components/base/base-page";
-import BaseEmpty from "@/components/base/base-empty";
+import { BaseEmpty, BasePage } from "@/components/base";
 import ConnectionItem from "@/components/connection/connection-item";
 import ConnectionTable from "@/components/connection/connection-table";
 

src/pages/logs.tsx

@@ -16,8 +16,7 @@ import {
   PauseCircleOutlineRounded,
 } from "@mui/icons-material";
 import { atomEnableLog, atomLogData } from "@/services/states";
-import BasePage from "@/components/base/base-page";
-import BaseEmpty from "@/components/base/base-empty";
+import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
 
 const LogPage = () => {

src/pages/profiles.tsx

@@ -12,8 +12,7 @@ import {
 } from "@/services/cmds";
 import { getProxies, updateProxy } from "@/services/api";
 import { atomCurrentProfile } from "@/services/states";
-import Notice from "@/components/base/base-notice";
-import BasePage from "@/components/base/base-page";
+import { BasePage, Notice } from "@/components/base";
 import ProfileNew from "@/components/profile/profile-new";
 import ProfileItem from "@/components/profile/profile-item";
 import EnhancedMode from "@/components/profile/enhanced";

src/pages/proxies.tsx

@@ -5,7 +5,7 @@ import { Button, ButtonGroup, Paper } from "@mui/material";
 import { getClashConfig, updateConfigs } from "@/services/api";
 import { patchClashConfig } from "@/services/cmds";
 import { ProxyGroups } from "@/components/proxy/proxy-groups";
-import BasePage from "@/components/base/base-page";
+import { BasePage } from "@/components/base";
 
 const ProxyPage = () => {
   const { t } = useTranslation();

src/pages/rules.tsx

@@ -2,10 +2,9 @@ import useSWR from "swr";
 import { useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Virtuoso } from "react-virtuoso";
-import { Box, Button, MenuItem, Paper, Select, TextField } from "@mui/material";
+import { Box, Paper, TextField } from "@mui/material";
 import { getRules } from "@/services/api";
-import BasePage from "@/components/base/base-page";
-import BaseEmpty from "@/components/base/base-empty";
+import { BaseEmpty, BasePage } from "@/components/base";
 import RuleItem from "@/components/rule/rule-item";
 
 const RulesPage = () => {

src/pages/settings.tsx

@@ -1,7 +1,6 @@
 import { Paper } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import Notice from "@/components/base/base-notice";
-import BasePage from "@/components/base/base-page";
+import { BasePage, Notice } from "@/components/base";
 import SettingVerge from "@/components/setting/setting-verge";
 import SettingClash from "@/components/setting/setting-clash";
 import SettingSystem from "@/components/setting/setting-system";

src/services/cmds.ts

@@ -1,5 +1,5 @@
 import { invoke } from "@tauri-apps/api/tauri";
-import Notice from "@/components/base/base-notice";
+import { Notice } from "@/components/base";
 
 export async function getClashLogs() {
   const regex = /time="(.+?)"\s+level=(.+?)\s+msg="(.+?)"/;