Merge pull request #396 from caorushizi/dev/perfermance

Dev/perfermance
caorushizi · Jan 2, 2025 · 10f07c1 · 10f07c1
2 parents f716e07 + 31a1831
commit 10f07c1
Show file tree

Hide file tree

Showing 31 changed files with 736 additions and 850 deletions.
diff --git a/packages/renderer/eslint.config.js b/packages/renderer/eslint.config.js
@@ -2,6 +2,7 @@ import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import pluginReactHooks from "eslint-plugin-react-hooks";
 import { fixupConfigRules } from "@eslint/compat";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 
@@ -11,6 +12,17 @@ export default [
   ...tseslint.configs.recommended,
   ...fixupConfigRules(pluginReactConfig),
   eslintPluginPrettierRecommended,
+  {
+    files: ["src/**/*.{js,ts,jsx,tsx}"],
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      ...pluginReactHooks.configs.recommended.rules,
+    },
+  },
   {
     rules: {
       "@typescript-eslint/no-explicit-any": "warn",

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
@@ -61,6 +61,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.3.0",
     "lint-staged": "^15.2.5",
     "postcss": "^8.4.39",

diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx
@@ -3,18 +3,22 @@ import React, { FC, Suspense, lazy, useEffect } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import "dayjs/locale/zh-cn";
 import zhCN from "antd/locale/zh_CN";
-import useElectron from "./hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import Loading from "./components/Loading";
 import { DownloadFilter } from "./types";
 import { isWeb, tdApp } from "./utils";
-import { useAsyncEffect } from "ahooks";
-import { ThemeContext } from "./context/ThemeContext";
-import { SessionStore, useSessionStore } from "./store/session";
+import { useAsyncEffect, useMemoizedFn } from "ahooks";
+import {
+  themeSelector,
+  updateSelector,
+  useSessionStore,
+} from "./store/session";
 import { useShallow } from "zustand/react/shallow";
 import { DOWNLOAD_FAIL, DOWNLOAD_SUCCESS, PAGE_LOAD } from "./const";
 import { useAppStore, setAppStoreSelector } from "./store/app";
 import { PageMode, setBrowserSelector, useBrowserStore } from "./store/browser";
 import { downloadStoreSelector, useDownloadStore } from "./store/download";
+import { App as AntdApp } from "antd";
 
 const AppLayout = lazy(() => import("./layout/App"));
 const HomePage = lazy(() => import("./pages/HomePage"));
@@ -27,43 +31,36 @@ function getAlgorithm(appTheme: "dark" | "light") {
   return appTheme === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm;
 }
 
-const sessionSelector = (s: SessionStore) => ({
-  setUpdateAvailable: s.setUpdateAvailable,
-  setUploadChecking: s.setUploadChecking,
-});
-
 const App: FC = () => {
-  const [appTheme, setAppTheme] = React.useState<"dark" | "light">("light");
   const { addIpcListener, removeIpcListener, getMachineId } = useElectron();
   const { setUpdateAvailable, setUploadChecking } = useSessionStore(
-    useShallow(sessionSelector),
+    useShallow(updateSelector),
   );
   const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
   const { setBrowserStore } = useBrowserStore(useShallow(setBrowserSelector));
   const { increase } = useDownloadStore(useShallow(downloadStoreSelector));
+  const { theme, setTheme } = useSessionStore(useShallow(themeSelector));
 
-  const themeChange = (event: MediaQueryListEvent) => {
+  const themeChange = useMemoizedFn((event: MediaQueryListEvent) => {
     if (event.matches) {
-      setAppTheme("dark");
+      setTheme("dark");
     } else {
-      setAppTheme("light");
+      setTheme("light");
     }
-  };
+  });
 
   // 监听store变化
-  const onAppStoreChange = (event: any, store: AppStore) => {
+  const onAppStoreChange = useMemoizedFn((event: any, store: AppStore) => {
     setAppStore(store);
-  };
+  });
 
-  const onReceiveDownloadItem = () => {
+  const onReceiveDownloadItem = useMemoizedFn(() => {
     increase();
-  };
+  });
 
-  const onChangePrivacy = () => {
+  const onChangePrivacy = useMemoizedFn(() => {
     setBrowserStore({ url: "", title: "", mode: PageMode.Default });
-  };
-
-  console.log("App.tsx: onAppStoreChange", onAppStoreChange);
+  });
 
   useEffect(() => {
     const updateAvailable = () => {
@@ -114,9 +111,9 @@ const App: FC = () => {
     isDarkTheme.addEventListener("change", themeChange);
 
     if (isDarkTheme.matches) {
-      setAppTheme("dark");
+      setTheme("dark");
     } else {
-      setAppTheme("light");
+      setTheme("light");
     }
 
     return () => {
@@ -125,12 +122,12 @@ const App: FC = () => {
   }, []);
 
   return (
-    <ThemeContext.Provider value={appTheme}>
-      <ConfigProvider
-        locale={zhCN}
-        componentSize={isWeb ? undefined : "small"}
-        theme={{ algorithm: getAlgorithm(appTheme) }}
-      >
+    <ConfigProvider
+      locale={zhCN}
+      componentSize={isWeb ? undefined : "small"}
+      theme={{ algorithm: getAlgorithm(theme) }}
+    >
+      <AntdApp className="size-full overflow-hidden">
         <BrowserRouter>
           <Routes>
             <Route
@@ -201,8 +198,8 @@ const App: FC = () => {
             />
           </Routes>
         </BrowserRouter>
-      </ConfigProvider>
-    </ThemeContext.Provider>
+      </AntdApp>
+    </ConfigProvider>
   );
 };
 

diff --git a/packages/renderer/src/assets/svg/EditIcon.tsx b/packages/renderer/src/assets/svg/EditIcon.tsx
@@ -10,16 +10,9 @@ export function EditIcon(props: React.SVGProps<SVGSVGElement>) {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clipPath="url(#clip0_3_85)">
-        <path d="M12.6156 4.58593L12.1641 5.0375L12.3438 4.85781C12.4875 4.69687 12.4813 4.45 12.3266 4.29531L12.6156 4.58593ZM10.1641 2.12968L10.6156 2.58125L10.4359 2.40156C10.275 2.25781 10.0281 2.26406 9.87344 2.41875L10.1641 2.12968ZM15.0047 14.4625C15.0047 14.1094 14.7188 13.8219 14.3641 13.8219H1.56406C1.21094 13.8219 0.923439 14.1078 0.923439 14.4625C0.923439 14.8156 1.20938 15.1031 1.56406 15.1031H14.3656C14.7188 15.1016 15.0047 14.8156 15.0047 14.4625ZM2.575 12.8219C2.92813 12.8219 3.21563 12.5359 3.21563 12.1812V8.82343C3.21563 8.47031 2.92969 8.18281 2.575 8.18281C2.22188 8.18281 1.93438 8.46875 1.93438 8.82343V12.1812C1.93438 12.5359 2.22188 12.8219 2.575 12.8219Z" />
-        <path d="M1.93438 12.1828C1.93438 12.5359 2.22031 12.8234 2.575 12.8234H5.92344C6.27656 12.8234 6.56406 12.5375 6.56406 12.1828C6.56406 11.8297 6.27813 11.5422 5.92344 11.5422H2.575C2.22188 11.5422 1.93438 11.8297 1.93438 12.1828Z" />
-        <path d="M13.6703 3.83594C13.6687 3.83437 13.6656 3.83281 13.6641 3.82969L10.8609 1.02656C10.4437 0.66406 9.80937 0.679685 9.4125 1.07812C9.41094 1.07969 9.40937 1.08281 9.40625 1.08437L2.11562 8.37344C1.86562 8.62344 1.86562 9.02812 2.11562 9.27812C2.36562 9.52812 2.77031 9.52812 3.02031 9.27812L10.1609 2.1375L12.6094 4.58437L5.47031 11.7234C5.22031 11.9734 5.22031 12.3781 5.47031 12.6281C5.72031 12.8781 6.125 12.8781 6.375 12.6281L13.7406 5.2625C14.0828 4.84531 14.0594 4.22656 13.6703 3.83594Z" />
-      </g>
-      <defs>
-        <clipPath id="clip0_3_85">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
+      <path d="M12.6156 4.58593L12.1641 5.0375L12.3438 4.85781C12.4875 4.69687 12.4813 4.45 12.3266 4.29531L12.6156 4.58593ZM10.1641 2.12968L10.6156 2.58125L10.4359 2.40156C10.275 2.25781 10.0281 2.26406 9.87344 2.41875L10.1641 2.12968ZM15.0047 14.4625C15.0047 14.1094 14.7188 13.8219 14.3641 13.8219H1.56406C1.21094 13.8219 0.923439 14.1078 0.923439 14.4625C0.923439 14.8156 1.20938 15.1031 1.56406 15.1031H14.3656C14.7188 15.1016 15.0047 14.8156 15.0047 14.4625ZM2.575 12.8219C2.92813 12.8219 3.21563 12.5359 3.21563 12.1812V8.82343C3.21563 8.47031 2.92969 8.18281 2.575 8.18281C2.22188 8.18281 1.93438 8.46875 1.93438 8.82343V12.1812C1.93438 12.5359 2.22188 12.8219 2.575 12.8219Z" />
+      <path d="M1.93438 12.1828C1.93438 12.5359 2.22031 12.8234 2.575 12.8234H5.92344C6.27656 12.8234 6.56406 12.5375 6.56406 12.1828C6.56406 11.8297 6.27813 11.5422 5.92344 11.5422H2.575C2.22188 11.5422 1.93438 11.8297 1.93438 12.1828Z" />
+      <path d="M13.6703 3.83594C13.6687 3.83437 13.6656 3.83281 13.6641 3.82969L10.8609 1.02656C10.4437 0.66406 9.80937 0.679685 9.4125 1.07812C9.41094 1.07969 9.40937 1.08281 9.40625 1.08437L2.11562 8.37344C1.86562 8.62344 1.86562 9.02812 2.11562 9.27812C2.36562 9.52812 2.77031 9.52812 3.02031 9.27812L10.1609 2.1375L12.6094 4.58437L5.47031 11.7234C5.22031 11.9734 5.22031 12.3781 5.47031 12.6281C5.72031 12.8781 6.125 12.8781 6.375 12.6281L13.7406 5.2625C14.0828 4.84531 14.0594 4.22656 13.6703 3.83594Z" />
     </svg>
   );
 }