From 2c146d811ab5c0b589ffe5641dd58c7c2e890b8b Mon Sep 17 00:00:00 2001
From: caorushizi <84996057@qq.com>
Date: Fri, 3 Jan 2025 03:01:53 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E2=9C=A8=20=20some=20performance?=
 =?UTF-8?q?=20issues=20were=20optimized?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/renderer/src/App.tsx                 |  41 +-
 .../renderer/src/components/DownloadForm.tsx  | 405 +++++++++---------
 .../renderer/src/components/EpisodeNumber.tsx | 182 --------
 .../renderer/src/components/IconButton.tsx    |  12 +-
 packages/renderer/src/context/ThemeContext.ts |   3 -
 packages/renderer/src/layout/AppSideBar.tsx   |   8 +-
 .../renderer/src/pages/Converter/index.tsx    |   9 +-
 .../HomePage/components/DownloadList.tsx      |   9 +-
 .../pages/HomePage/components/ListHeader.tsx  |   7 +-
 .../renderer/src/pages/HomePage/index.tsx     |   9 +-
 packages/renderer/src/pages/Player/index.tsx  |   7 +-
 .../renderer/src/pages/SettingPage/index.tsx  |  28 +-
 .../SourceExtract/components/BrowserView.tsx  |  99 ++---
 .../components/BrowserViewPanel.tsx           |  56 +++
 .../SourceExtract/components/FavoriteList.tsx |   7 +-
 .../SourceExtract/components/ToolBar.tsx      |   6 +-
 packages/renderer/src/store/config.ts         |  29 +-
 packages/renderer/src/store/session.ts        |  26 +-
 18 files changed, 365 insertions(+), 578 deletions(-)
 delete mode 100644 packages/renderer/src/components/EpisodeNumber.tsx
 delete mode 100644 packages/renderer/src/context/ThemeContext.ts
 create mode 100644 packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx

diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx
index b96b4b4d..b46eed7c 100644
--- a/packages/renderer/src/App.tsx
+++ b/packages/renderer/src/App.tsx
@@ -8,13 +8,17 @@ 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 {
+  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,26 +31,21 @@ 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) => {
     if (event.matches) {
-      setAppTheme("dark");
+      setTheme("dark");
     } else {
-      setAppTheme("light");
+      setTheme("light");
     }
   };
 
@@ -114,9 +113,9 @@ const App: FC = () => {
     isDarkTheme.addEventListener("change", themeChange);
 
     if (isDarkTheme.matches) {
-      setAppTheme("dark");
+      setTheme("dark");
     } else {
-      setAppTheme("light");
+      setTheme("light");
     }
 
     return () => {
@@ -125,12 +124,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 +200,8 @@ const App: FC = () => {
             />
           </Routes>
         </BrowserRouter>
-      </ConfigProvider>
-    </ThemeContext.Provider>
+      </AntdApp>
+    </ConfigProvider>
   );
 };
 
diff --git a/packages/renderer/src/components/DownloadForm.tsx b/packages/renderer/src/components/DownloadForm.tsx
index 2267d453..bff5bf7e 100644
--- a/packages/renderer/src/components/DownloadForm.tsx
+++ b/packages/renderer/src/components/DownloadForm.tsx
@@ -1,4 +1,5 @@
 import {
+  App,
   AutoComplete,
   Button,
   Form,
@@ -6,12 +7,11 @@ import {
   Modal,
   Select,
   Switch,
-  message,
 } from "antd";
 import React, { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import TextArea from "antd/es/input/TextArea";
-import { ConfigStore, useConfigStore } from "@/store/config";
+import { downloadFormSelector, useConfigStore } from "@/store/config";
 import { useShallow } from "zustand/react/shallow";
 import { useAsyncEffect, useMemoizedFn } from "ahooks";
 import { DownloadType } from "@/types";
@@ -51,11 +51,6 @@ export interface DownloadItemForm extends DownloadItem {
   batchList?: string;
 }
 
-const configSelector = (s: ConfigStore) => ({
-  setLastDownloadTypes: s.setLastDownloadTypes,
-  setLastIsBatch: s.setLastIsBatch,
-});
-
 interface Options {
   label: string;
   value: string;
@@ -77,9 +72,9 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
     const [modalOpen, setModalOpen] = useState(false);
     const [form] = Form.useForm<DownloadFormType>();
     const { t } = useTranslation();
-    const [messageApi, contextHolder] = message.useMessage();
+    const { message } = App.useApp();
     const { setLastDownloadTypes, setLastIsBatch } = useConfigStore(
-      useShallow(configSelector),
+      useShallow(downloadFormSelector),
     );
     const [folders, setFolders] = useState<Options[]>([]);
     const [videoFolders, setVideoFolders] = useState<string[]>([]);
@@ -146,7 +141,7 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
         tdApp.onEvent(ADD_TO_LIST, { id });
       } catch (e: any) {
         console.error(e);
-        messageApi.error(e?.message || t("pleaseEnterCorrectFomeInfo"));
+        message.error(e?.message || t("pleaseEnterCorrectFomeInfo"));
       }
     });
 
@@ -165,7 +160,7 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
         tdApp.onEvent(DOWNLOAD_NOW, { id });
       } catch (e: any) {
         console.error(e);
-        messageApi.error(e?.message || t("pleaseEnterCorrectFomeInfo"));
+        message.error(e?.message || t("pleaseEnterCorrectFomeInfo"));
       }
     });
 
@@ -178,213 +173,203 @@ export default forwardRef<DownloadFormRef, DownloadFormProps>(
     });
 
     return (
-      <>
-        {contextHolder}
-        <Modal
-          open={modalOpen}
-          key={isEdit ? "edit" : "new"}
-          title={isEdit ? t("editDownload") : t("newDownload")}
-          width={500}
-          onClose={() => setModalOpen(false)}
-          onCancel={() => setModalOpen(false)}
-          afterOpenChange={afterOpenChange}
-          destroyOnClose={destroyOnClose}
-          footer={[
-            <Button key="cancel" onClick={() => setModalOpen(false)}>
-              {t("cancel")}
-            </Button>,
-            <Button key="submit" onClick={handleSubmit}>
-              {isEdit && !usePrevData
-                ? t("confirmChange")
-                : t("addToDownloadList")}
-            </Button>,
-            <Button key="link" type="primary" onClick={handleDownloadNow}>
-              {t("downloadNow")}
-            </Button>,
-          ]}
+      <Modal
+        open={modalOpen}
+        key={isEdit ? "edit" : "new"}
+        title={isEdit ? t("editDownload") : t("newDownload")}
+        width={500}
+        onClose={() => setModalOpen(false)}
+        onCancel={() => setModalOpen(false)}
+        afterOpenChange={afterOpenChange}
+        destroyOnClose={destroyOnClose}
+        footer={[
+          <Button key="cancel" onClick={() => setModalOpen(false)}>
+            {t("cancel")}
+          </Button>,
+          <Button key="submit" onClick={handleSubmit}>
+            {isEdit && !usePrevData
+              ? t("confirmChange")
+              : t("addToDownloadList")}
+          </Button>,
+          <Button key="link" type="primary" onClick={handleDownloadNow}>
+            {t("downloadNow")}
+          </Button>,
+        ]}
+      >
+        <Form
+          form={form}
+          autoFocus
+          labelCol={{ span: 5 }}
+          layout="horizontal"
+          colon={false}
+          onValuesChange={handleValuesChange}
         >
-          <Form
-            form={form}
-            autoFocus
-            labelCol={{ span: 5 }}
-            layout="horizontal"
-            colon={false}
-            onValuesChange={handleValuesChange}
+          <Form.Item name="id" hidden />
+          <Form.Item hidden={isEdit} label={t("batchDownload")} name={"batch"}>
+            <Switch />
+          </Form.Item>
+          <Form.Item
+            key="type"
+            name="type"
+            label={t("videoType")}
+            rules={[
+              {
+                required: true,
+                message: t("pleaseEnterVideoName"),
+              },
+            ]}
           >
-            <Form.Item name="id" hidden />
-            <Form.Item
-              hidden={isEdit}
-              label={t("batchDownload")}
-              name={"batch"}
-            >
-              <Switch />
-            </Form.Item>
-            <Form.Item
-              key="type"
-              name="type"
-              label={t("videoType")}
-              rules={[
+            <Select
+              disabled={isEdit}
+              options={[
+                {
+                  label: t("streamMedia"),
+                  value: "m3u8",
+                },
                 {
-                  required: true,
-                  message: t("pleaseEnterVideoName"),
+                  label: t("bilibiliMedia"),
+                  value: "bilibili",
                 },
               ]}
-            >
-              <Select
-                disabled={isEdit}
-                options={[
-                  {
-                    label: t("streamMedia"),
-                    value: "m3u8",
-                  },
-                  {
-                    label: t("bilibiliMedia"),
-                    value: "bilibili",
-                  },
-                ]}
-                placeholder={t("pleaseSelectVideoType")}
-              />
-            </Form.Item>
-            <Form.Item noStyle shouldUpdate>
-              {(form) => {
-                const isBatch = form.getFieldValue("batch");
-                if (isBatch) {
-                  return null;
-                }
+              placeholder={t("pleaseSelectVideoType")}
+            />
+          </Form.Item>
+          <Form.Item noStyle shouldUpdate>
+            {(form) => {
+              const isBatch = form.getFieldValue("batch");
+              if (isBatch) {
+                return null;
+              }
 
-                return (
-                  <Form.Item
-                    shouldUpdate
-                    name="name"
-                    label={t("videoName")}
-                    rules={[
-                      {
-                        required: true,
-                        message: t("pleaseEnterCorrectFomeInfo"),
-                      },
-                    ]}
-                  >
-                    <Input placeholder={t("pleaseEnterVideoName")} />
-                  </Form.Item>
-                );
-              }}
-            </Form.Item>
-            <Form.Item noStyle shouldUpdate>
-              {(form) => {
-                if (isEdit || !form.getFieldValue("batch")) {
-                  return null;
-                }
-                return (
-                  <Form.Item
-                    label={t("videoLink")}
-                    name="batchList"
-                    required
-                    rules={[
-                      {
-                        required: true,
-                        message: t("pleaseEnterVideoLink"),
-                      },
-                      {
-                        validator: (_, value) => {
-                          const lines = value.split("\n");
-                          for (const line of lines) {
-                            const params = line.trim().split(" ");
-                            if (params.length > 3) {
-                              return Promise.reject(
-                                new Error(t("pleaseEnterCorrectBatchList")),
-                              );
-                            }
-                            const [url] = params;
-                            if (!/^(https?):\/\/.+/.test(url)) {
-                              return Promise.reject(
-                                new Error(t("pleaseEnterCorrectBatchList")),
-                              );
-                            }
+              return (
+                <Form.Item
+                  shouldUpdate
+                  name="name"
+                  label={t("videoName")}
+                  rules={[
+                    {
+                      required: true,
+                      message: t("pleaseEnterCorrectFomeInfo"),
+                    },
+                  ]}
+                >
+                  <Input placeholder={t("pleaseEnterVideoName")} />
+                </Form.Item>
+              );
+            }}
+          </Form.Item>
+          <Form.Item noStyle shouldUpdate>
+            {(form) => {
+              if (isEdit || !form.getFieldValue("batch")) {
+                return null;
+              }
+              return (
+                <Form.Item
+                  label={t("videoLink")}
+                  name="batchList"
+                  required
+                  rules={[
+                    {
+                      required: true,
+                      message: t("pleaseEnterVideoLink"),
+                    },
+                    {
+                      validator: (_, value) => {
+                        const lines = value.split("\n");
+                        for (const line of lines) {
+                          const params = line.trim().split(" ");
+                          if (params.length > 3) {
+                            return Promise.reject(
+                              new Error(t("pleaseEnterCorrectBatchList")),
+                            );
                           }
-                          return Promise.resolve();
-                        },
-                      },
-                    ]}
-                  >
-                    <TextArea
-                      rows={5}
-                      placeholder={t("videoLikeDescription")}
-                    />
-                  </Form.Item>
-                );
-              }}
-            </Form.Item>
-            <Form.Item noStyle shouldUpdate>
-              {(form) => {
-                if (form.getFieldValue("batch") && !isEdit) {
-                  return null;
-                }
-                return (
-                  <Form.Item
-                    name="url"
-                    label={t("videoLink")}
-                    required
-                    rules={[
-                      {
-                        required: true,
-                        message: t("pleaseEnterOnlineVideoUrl"),
-                      },
-                      {
-                        pattern: /^(file|https?):\/\/.+/,
-                        message: t("pleaseEnterCorrectVideoLink"),
+                          const [url] = params;
+                          if (!/^(https?):\/\/.+/.test(url)) {
+                            return Promise.reject(
+                              new Error(t("pleaseEnterCorrectBatchList")),
+                            );
+                          }
+                        }
+                        return Promise.resolve();
                       },
-                    ]}
-                  >
-                    <Input
-                      placeholder={t("pleaseEnterOnlineVideoUrlOrDragM3U8Here")}
-                      onDrop={(e) => {
-                        const file: any = e.dataTransfer.files[0];
-                        form.setFieldValue("url", `file://${file.path}`);
-                        form.validateFields(["url"]);
-                      }}
-                    />
-                  </Form.Item>
-                );
-              }}
-            </Form.Item>
-            <Form.Item noStyle shouldUpdate>
-              {(form) => {
-                if (form.getFieldValue("batch")) {
-                  return null;
-                }
-                return (
-                  <Form.Item name="folder" label={t("folder")}>
-                    <AutoComplete
-                      placeholder={t("pleaseInputVideoFolder")}
-                      optionFilterProp="label"
-                      options={folders}
-                      onSearch={handleSearch}
-                    />
-                  </Form.Item>
-                );
-              }}
-            </Form.Item>
-            <Form.Item noStyle shouldUpdate>
-              {(form) => {
-                if (
-                  form.getFieldValue("type") !== "m3u8" &&
-                  !form.getFieldValue("batch")
-                ) {
-                  return null;
-                }
-                return (
-                  <Form.Item label={t("additionalHeaders")} name="headers">
-                    <TextArea
-                      rows={4}
-                      placeholder={t("additionalHeadersDescription")}
-                    />
-                  </Form.Item>
-                );
-              }}
-            </Form.Item>
-          </Form>
-        </Modal>
-      </>
+                    },
+                  ]}
+                >
+                  <TextArea rows={5} placeholder={t("videoLikeDescription")} />
+                </Form.Item>
+              );
+            }}
+          </Form.Item>
+          <Form.Item noStyle shouldUpdate>
+            {(form) => {
+              if (form.getFieldValue("batch") && !isEdit) {
+                return null;
+              }
+              return (
+                <Form.Item
+                  name="url"
+                  label={t("videoLink")}
+                  required
+                  rules={[
+                    {
+                      required: true,
+                      message: t("pleaseEnterOnlineVideoUrl"),
+                    },
+                    {
+                      pattern: /^(file|https?):\/\/.+/,
+                      message: t("pleaseEnterCorrectVideoLink"),
+                    },
+                  ]}
+                >
+                  <Input
+                    placeholder={t("pleaseEnterOnlineVideoUrlOrDragM3U8Here")}
+                    onDrop={(e) => {
+                      const file: any = e.dataTransfer.files[0];
+                      form.setFieldValue("url", `file://${file.path}`);
+                      form.validateFields(["url"]);
+                    }}
+                  />
+                </Form.Item>
+              );
+            }}
+          </Form.Item>
+          <Form.Item noStyle shouldUpdate>
+            {(form) => {
+              if (form.getFieldValue("batch")) {
+                return null;
+              }
+              return (
+                <Form.Item name="folder" label={t("folder")}>
+                  <AutoComplete
+                    placeholder={t("pleaseInputVideoFolder")}
+                    optionFilterProp="label"
+                    options={folders}
+                    onSearch={handleSearch}
+                  />
+                </Form.Item>
+              );
+            }}
+          </Form.Item>
+          <Form.Item noStyle shouldUpdate>
+            {(form) => {
+              if (
+                form.getFieldValue("type") !== "m3u8" &&
+                !form.getFieldValue("batch")
+              ) {
+                return null;
+              }
+              return (
+                <Form.Item label={t("additionalHeaders")} name="headers">
+                  <TextArea
+                    rows={4}
+                    placeholder={t("additionalHeadersDescription")}
+                  />
+                </Form.Item>
+              );
+            }}
+          </Form.Item>
+        </Form>
+      </Modal>
     );
   },
 );
diff --git a/packages/renderer/src/components/EpisodeNumber.tsx b/packages/renderer/src/components/EpisodeNumber.tsx
deleted file mode 100644
index 738663b4..00000000
--- a/packages/renderer/src/components/EpisodeNumber.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import React, { ChangeEvent, FC } from "react";
-import { ConfigStore, useConfigStore } from "@/store/config";
-import { useMemoizedFn } from "ahooks";
-import { Input, InputNumber, Select, Space } from "antd";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useShallow } from "zustand/react/shallow";
-
-interface EpisodeNumberProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  canChangeType: boolean;
-  isEdit?: boolean;
-  usePrevData?: boolean;
-}
-
-const videoTypeSelector = (s: ConfigStore) => ({
-  lastVideoType: s.lastVideoType,
-  lastVideoName: s.lastVideoName,
-  lastVideoNumber: s.lastVideoNumber,
-  setLastVideo: s.setLastVideo,
-});
-
-export const EpisodeNumber: FC<EpisodeNumberProps> = ({
-  value = "",
-  onChange = () => {},
-  canChangeType,
-  usePrevData,
-}) => {
-  const { lastVideoName, lastVideoNumber, lastVideoType, setLastVideo } =
-    useConfigStore(useShallow(videoTypeSelector));
-  const { t } = useTranslation();
-  const [type, setType] = useState("teleplay");
-  const [name, setName] = useState("");
-  const [number, setNumber] = useState(1);
-  const isEpisode = useMemo(
-    () => type === "teleplay" && canChangeType,
-    [type, canChangeType],
-  );
-
-  /**
-   * initialize
-   * This component is used in three places
-   * 1. Create a new download
-   * 2. Edit download
-   * 3. Video sniffing
-   */
-  useEffect(() => {
-    // If not, use the last value
-    if (value == null) {
-      const name = lastVideoName || "";
-      const number = lastVideoNumber || 1;
-      const type = lastVideoType || "movie";
-
-      setName(name);
-      setNumber(number);
-      setType(type);
-
-      if (type === "teleplay" && canChangeType) {
-        onChange(`${name}_第${number}集`);
-      } else {
-        onChange(name);
-      }
-
-      return;
-    }
-
-    // Resolve name
-    const parseName = (value: string = "") => {
-      const res = {
-        name: "",
-        number: 1,
-        isTelePlay: false,
-      };
-
-      if (/_第(\d+)集$/.test(value)) {
-        const [, name, number] = value.match(/(.*?)_第(\d+)集$/);
-        res.name = name;
-        res.number = Number(number);
-        res.isTelePlay = true;
-      } else {
-        res.name = value;
-      }
-
-      return res;
-    };
-    const { name, number, isTelePlay } = parseName(value);
-
-    if (usePrevData) {
-      setName(name);
-      setNumber(lastVideoNumber);
-      setType(lastVideoType);
-
-      if (lastVideoType === "teleplay" && canChangeType) {
-        onChange(`${name}_第${lastVideoNumber}集`);
-      } else {
-        onChange(name);
-      }
-      return;
-    }
-
-    setName(name);
-    setNumber(number);
-    setType(isTelePlay ? "teleplay" : "movie");
-
-    if (isTelePlay && canChangeType) {
-      onChange(`${name}_第${number}集`);
-    } else {
-      onChange(name);
-    }
-  }, [value]);
-
-  const handleNameChange = useMemoizedFn((e: ChangeEvent<HTMLInputElement>) => {
-    setName(e.target.value);
-    setLastVideo({ name: e.target.value });
-
-    if (isEpisode) {
-      onChange(`${e.target.value}_第${number}集`);
-    } else {
-      onChange(e.target.value);
-    }
-  });
-
-  const onNumberChange = useMemoizedFn((val: number) => {
-    setNumber(val);
-    setLastVideo({ number: val });
-
-    if (isEpisode) {
-      onChange(`${name}_第${val}集`);
-    }
-  });
-
-  const handleChangeType = useMemoizedFn((type: string) => {
-    setLastVideo({ type });
-    setType(type);
-
-    if (type === "teleplay") {
-      onChange(`${name}_第${number}集`);
-    } else {
-      onChange(name);
-    }
-  });
-
-  return (
-    <Space.Compact block>
-      {canChangeType && (
-        <Select
-          style={{ width: 100 }}
-          defaultValue="teleplay"
-          options={[
-            {
-              label: "剧集",
-              value: "teleplay",
-            },
-            {
-              label: "电影",
-              value: "movie",
-            },
-          ]}
-          value={type}
-          onChange={handleChangeType}
-        />
-      )}
-      <Input
-        value={name}
-        onChange={handleNameChange}
-        placeholder={t("pleaseEnterVideoName")}
-      />
-      {canChangeType && isEpisode && (
-        <InputNumber
-          style={{ width: 300 }}
-          addonBefore="第"
-          addonAfter="集"
-          changeOnWheel
-          value={number}
-          min={1}
-          onChange={onNumberChange}
-        />
-      )}
-    </Space.Compact>
-  );
-};
diff --git a/packages/renderer/src/components/IconButton.tsx b/packages/renderer/src/components/IconButton.tsx
index 136d0d80..c7bea1bc 100644
--- a/packages/renderer/src/components/IconButton.tsx
+++ b/packages/renderer/src/components/IconButton.tsx
@@ -1,12 +1,8 @@
-import { ThemeContext } from "@/context/ThemeContext";
+import { themeSelector, useSessionStore } from "@/store/session";
 import { cn } from "@/utils";
 import { useMemoizedFn } from "ahooks";
-import React, {
-  cloneElement,
-  PropsWithChildren,
-  ReactElement,
-  useContext,
-} from "react";
+import React, { cloneElement, PropsWithChildren, ReactElement } from "react";
+import { useShallow } from "zustand/react/shallow";
 
 interface Props extends PropsWithChildren {
   title?: string;
@@ -23,7 +19,7 @@ export function IconButton({
   onClick,
   icon,
 }: Props) {
-  const theme = useContext(ThemeContext);
+  const { theme } = useSessionStore(useShallow(themeSelector));
   const handleClick = useMemoizedFn(() => {
     if (disabled) {
       return;
diff --git a/packages/renderer/src/context/ThemeContext.ts b/packages/renderer/src/context/ThemeContext.ts
deleted file mode 100644
index e3d55962..00000000
--- a/packages/renderer/src/context/ThemeContext.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from "react";
-
-export const ThemeContext = createContext("light");
diff --git a/packages/renderer/src/layout/AppSideBar.tsx b/packages/renderer/src/layout/AppSideBar.tsx
index d6007593..469c21c8 100644
--- a/packages/renderer/src/layout/AppSideBar.tsx
+++ b/packages/renderer/src/layout/AppSideBar.tsx
@@ -13,7 +13,7 @@ import {
   ShareIcon,
 } from "@/assets/svg";
 import siderBg from "@/assets/images/sider-bg.png";
-import { SessionStore, useSessionStore } from "@/store/session";
+import { updateSelector, useSessionStore } from "@/store/session";
 import { useShallow } from "zustand/react/shallow";
 import {
   useAppStore,
@@ -78,10 +78,6 @@ interface Props {
   className?: string;
 }
 
-const sessionSelector = (s: SessionStore) => ({
-  updateAvailable: s.updateAvailable,
-});
-
 export function AppSideBar({ className }: Props) {
   const { setAppStore: ipcSetAppStore, showBrowserWindow } = useElectron();
   const { t } = useTranslation();
@@ -92,7 +88,7 @@ export function AppSideBar({ className }: Props) {
   );
   const appStore = useAppStore(useShallow(appStoreSelector));
   const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
-  const { updateAvailable } = useSessionStore(useShallow(sessionSelector));
+  const { updateAvailable } = useSessionStore(useShallow(updateSelector));
 
   const activeKey = processLocation(location.pathname);
 
diff --git a/packages/renderer/src/pages/Converter/index.tsx b/packages/renderer/src/pages/Converter/index.tsx
index 7cf92781..8d9c2cf5 100644
--- a/packages/renderer/src/pages/Converter/index.tsx
+++ b/packages/renderer/src/pages/Converter/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useState } from "react";
 import PageContainer from "../../components/PageContainer";
 import { useTranslation } from "react-i18next";
-import { Empty, message } from "antd";
+import { App, Empty } from "antd";
 import useElectron from "../../hooks/electron";
 import { useMemoizedFn, usePagination } from "ahooks";
 import { getFileName, tdApp } from "../../utils";
@@ -21,7 +21,7 @@ const Converter = () => {
     convertToAudio,
     deleteConversion,
   } = useElectron();
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
   const [converting, setConverting] = useState<Record<number, boolean>>({});
 
   const { data, refresh } = usePagination(
@@ -45,9 +45,9 @@ const Converter = () => {
     tdApp.onEvent(START_CONVERT);
     try {
       await convertToAudio(item.id);
-      messageApi.success(t("convertSuccess"));
+      message.success(t("convertSuccess"));
     } catch (e: any) {
-      messageApi.error(e.message);
+      message.error(e.message);
     } finally {
       const nextState = produce((draft) => {
         draft[item.id] = false;
@@ -98,7 +98,6 @@ const Converter = () => {
       rightExtra={<Button onClick={handleSelectFile}>{t("addFile")}</Button>}
       className="rounded-lg bg-white dark:bg-[#1F2024]"
     >
-      {contextHolder}
       <div className="flex flex-col gap-3 rounded-lg bg-white p-3 dark:bg-[#1F2024]">
         {data && data.list.length ? (
           data.list.map((item) => {
diff --git a/packages/renderer/src/pages/HomePage/components/DownloadList.tsx b/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
index 79a19f36..e50e18e7 100644
--- a/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
+++ b/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { DownloadItem } from "./DownloadItem";
 import { ListHeader } from "./ListHeader";
 import { produce } from "immer";
-import { Empty, message, Pagination } from "antd";
+import { App, Empty, Pagination } from "antd";
 import { DownloadFilter } from "@/types";
 import { ListPagination } from "./types";
 import useElectron from "@/hooks/electron";
@@ -42,7 +42,7 @@ export function DownloadList({
     editDownloadItem,
     editDownloadNow,
   } = useElectron();
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
   const { t } = useTranslation();
   const [progress, setProgress] = useState<Record<number, DownloadProgress>>(
     {},
@@ -149,7 +149,7 @@ export function DownloadList({
 
   const onStartDownload = useMemoizedFn(async (id: number) => {
     await startDownload(id);
-    messageApi.success(t("addTaskSuccess"));
+    message.success(t("addTaskSuccess"));
     refresh();
   });
 
@@ -198,7 +198,7 @@ export function DownloadList({
       await startDownload(Number(id));
     }
 
-    messageApi.success(t("addTaskSuccess"));
+    message.success(t("addTaskSuccess"));
     refresh();
     setSelected([]);
   };
@@ -232,7 +232,6 @@ export function DownloadList({
 
   return (
     <div className="flex h-full flex-col gap-3 rounded-lg">
-      {contextHolder}
       <ListHeader
         selected={selected}
         checked={listChecked}
diff --git a/packages/renderer/src/pages/HomePage/components/ListHeader.tsx b/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
index ed892101..9c28adf9 100644
--- a/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
+++ b/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { Button, Dropdown, MenuProps, message } from "antd";
+import { App, Button, Dropdown, MenuProps } from "antd";
 import { Trans, useTranslation } from "react-i18next";
 import { Checkbox } from "@/components/ui/checkbox";
 import { DownloadFilter } from "@/types";
@@ -26,7 +26,7 @@ export function ListHeader({
   onCancelItems,
   filter,
 }: Props) {
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
   const { t } = useTranslation();
   const disabled = useMemo(() => selected.length === 0, [selected.length]);
   const { exportDownloadList } = useElectron();
@@ -44,14 +44,13 @@ export function ListHeader({
       try {
         await exportDownloadList();
       } catch (err) {
-        messageApi.error(t("exportDownloadListFailed"));
+        message.error(t("exportDownloadListFailed"));
       }
     }
   });
 
   return (
     <div className="flex flex-row items-center justify-between pb-2 pl-3">
-      {contextHolder}
       <div className="flex flex-row items-center gap-3">
         <Checkbox checked={checked} onCheckedChange={onSelectAll} />
         <span
diff --git a/packages/renderer/src/pages/HomePage/index.tsx b/packages/renderer/src/pages/HomePage/index.tsx
index 2cd5f49c..f83acc7d 100644
--- a/packages/renderer/src/pages/HomePage/index.tsx
+++ b/packages/renderer/src/pages/HomePage/index.tsx
@@ -14,7 +14,7 @@ import { Button } from "@/components/ui/button";
 import { Popover, QRCode } from "antd";
 import { QrcodeOutlined } from "@ant-design/icons";
 import { HomeDownloadButton } from "@/components/HomeDownloadButton";
-import { ConfigStore, useConfigStore } from "@/store/config";
+import { downloadFormSelector, useConfigStore } from "@/store/config";
 import { useShallow } from "zustand/react/shallow";
 import { isDownloadType, isWeb, randomName, tdApp } from "@/utils";
 import { CLICK_DOWNLOAD } from "@/const";
@@ -25,11 +25,6 @@ interface Props {
   filter?: DownloadFilter;
 }
 
-const configSelector = (s: ConfigStore) => ({
-  lastIsBatch: s.lastIsBatch,
-  lastDownloadTypes: s.lastDownloadTypes,
-});
-
 const HomePage: FC<Props> = ({ filter = DownloadFilter.list }) => {
   const {
     getDownloadItems,
@@ -46,7 +41,7 @@ const HomePage: FC<Props> = ({ filter = DownloadFilter.list }) => {
   const [localIP, setLocalIP] = useState<string>("");
   const newFormRef = useRef<DownloadFormRef>(null);
   const { lastIsBatch, lastDownloadTypes } = useConfigStore(
-    useShallow(configSelector),
+    useShallow(downloadFormSelector),
   );
   const location = useLocation();
   const {
diff --git a/packages/renderer/src/pages/Player/index.tsx b/packages/renderer/src/pages/Player/index.tsx
index f1537150..4fe32c10 100644
--- a/packages/renderer/src/pages/Player/index.tsx
+++ b/packages/renderer/src/pages/Player/index.tsx
@@ -1,14 +1,14 @@
 import { cn, http } from "@/utils";
 import { UnorderedListOutlined } from "@ant-design/icons";
 import { useAsyncEffect, useMemoizedFn } from "ahooks";
-import { Drawer, message } from "antd";
+import { App, Drawer } from "antd";
 import React, { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";
 
 export default function PlayerPage() {
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
   const player = useRef<Player>();
   const [videoList, setVideoList] = useState([]);
   const [currentVideo, setCurrentVideo] = useState("");
@@ -23,7 +23,7 @@ export default function PlayerPage() {
       setCurrentVideo(res.data[0].url);
       url = res.data[0].url;
     } catch (e) {
-      messageApi.error(t("failToFetchVideoList"));
+      message.error(t("failToFetchVideoList"));
     } finally {
       player.current = new Player({
         id: "mse",
@@ -53,7 +53,6 @@ export default function PlayerPage() {
 
   return (
     <div className="group relative flex h-full w-full dark:bg-[#141415]">
-      {contextHolder}
       <div
         className="absolute right-5 top-5 z-50 hidden cursor-pointer items-center rounded-sm border border-white px-1.5 py-0.5 text-center group-hover:block"
         onClick={handleOpen}
diff --git a/packages/renderer/src/pages/SettingPage/index.tsx b/packages/renderer/src/pages/SettingPage/index.tsx
index c94d7915..7a57d839 100644
--- a/packages/renderer/src/pages/SettingPage/index.tsx
+++ b/packages/renderer/src/pages/SettingPage/index.tsx
@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import PageContainer from "../../components/PageContainer";
 import {
+  App,
   Badge,
   Button,
   Dropdown,
@@ -9,7 +10,6 @@ import {
   Input,
   InputNumber,
   MenuProps,
-  message,
   Modal,
   Progress,
   Radio,
@@ -32,7 +32,7 @@ import useElectron from "../../hooks/electron";
 import { useMemoizedFn, useRequest } from "ahooks";
 import { AppLanguage, AppTheme } from "../../types";
 import { useTranslation } from "react-i18next";
-import { SessionStore, useSessionStore } from "@/store/session";
+import { updateSelector, useSessionStore } from "@/store/session";
 import { useShallow } from "zustand/react/shallow";
 import { isWeb, tdApp } from "@/utils";
 import { CHECK_UPDATE } from "@/const";
@@ -58,11 +58,6 @@ function GroupWrapper({ children, title, hidden }: GroupWrapperProps) {
   );
 }
 
-const sessionSelector = (s: SessionStore) => ({
-  updateAvailable: s.updateAvailable,
-  updateChecking: s.updateChecking,
-});
-
 const SettingPage: React.FC = () => {
   const {
     onSelectDownloadDir,
@@ -83,9 +78,9 @@ const SettingPage: React.FC = () => {
   const settings = useAppStore(useShallow(appStoreSelector));
   const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
   const { data: envPath } = useRequest(getEnvPath);
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
   const { updateAvailable, updateChecking } = useSessionStore(
-    useShallow(sessionSelector),
+    useShallow(updateSelector),
   );
   const [openUpdateModal, setOpenUpdateModal] = useState(false);
   const [downloadProgress, setDownloadProgress] = useState(0);
@@ -124,7 +119,7 @@ const SettingPage: React.FC = () => {
       }
       setAppStore(values);
     } catch (e: any) {
-      messageApi.error(e.message);
+      message.error(e.message);
     }
   });
 
@@ -145,9 +140,9 @@ const SettingPage: React.FC = () => {
     if (key === "1") {
       try {
         await importFavorites();
-        messageApi.success(t("importFavoriteSuccess"));
+        message.success(t("importFavoriteSuccess"));
       } catch (e: any) {
-        messageApi.error(t("importFavoriteFailed"));
+        message.error(t("importFavoriteFailed"));
       }
     }
   };
@@ -155,9 +150,9 @@ const SettingPage: React.FC = () => {
   const handleExportFavorite = async () => {
     try {
       await exportFavorites();
-      messageApi.success(t("exportFavoriteSuccess"));
+      message.success(t("exportFavoriteSuccess"));
     } catch (e: any) {
-      messageApi.error(t("exportFavoriteFailed"));
+      message.error(t("exportFavoriteFailed"));
     }
   };
 
@@ -198,15 +193,14 @@ const SettingPage: React.FC = () => {
   const handleClearWebviewCache = useMemoizedFn(async () => {
     try {
       await clearWebviewCache();
-      messageApi.success(t("clearCacheSuccess"));
+      message.success(t("clearCacheSuccess"));
     } catch (err: any) {
-      messageApi.error(t("clearCacheFailed"));
+      message.error(t("clearCacheFailed"));
     }
   });
 
   return (
     <PageContainer title={t("setting")}>
-      {contextHolder}
       <Form<AppStore>
         ref={formRef}
         layout="horizontal"
diff --git a/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx b/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx
index a98d7375..c32447af 100644
--- a/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx
@@ -1,6 +1,4 @@
-import { DeleteIcon } from "@/assets/svg";
 import DownloadForm, { DownloadFormRef } from "@/components/DownloadForm";
-import { IconButton } from "@/components/IconButton";
 import { Button } from "@/components/ui/button";
 import WebView from "@/components/WebView";
 import useElectron from "@/hooks/electron";
@@ -13,10 +11,11 @@ import {
 } from "@/store/browser";
 import { generateUrl, randomName } from "@/utils";
 import { useMemoizedFn } from "ahooks";
-import { Empty, Space, Spin, message, Splitter } from "antd";
+import { Empty, Space, Spin, Splitter, App } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
+import { BrowserViewPanel } from "./BrowserViewPanel";
 
 export function BrowserView() {
   const {
@@ -26,16 +25,15 @@ export function BrowserView() {
     webviewGoHome,
     downloadNow,
     addDownloadItem,
-    showDownloadDialog: ipcShowDownloadDialog,
   } = useElectron();
   const downloadForm = useRef<DownloadFormRef>(null);
   const store = useBrowserStore(useShallow(browserStoreSelector));
-  const { addSource, setBrowserStore, deleteSource } = useBrowserStore(
+  const { addSource, setBrowserStore } = useBrowserStore(
     useShallow(setBrowserSelector),
   );
   const { t } = useTranslation();
   const [placeHolder, setPlaceHolder] = useState<string>("");
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
 
   useEffect(() => {
     const onShowDownloadDialog = async (
@@ -70,16 +68,16 @@ export function BrowserView() {
     };
   }, [store.status]);
 
-  const onClickGoHome = async () => {
+  const onClickGoHome = useMemoizedFn(async () => {
     await webviewGoHome();
     setBrowserStore({
       url: "",
       title: "",
       mode: PageMode.Default,
     });
-  };
+  });
 
-  const confirmDownload = async (now?: boolean) => {
+  const confirmDownload = useMemoizedFn(async (now?: boolean) => {
     try {
       const { name, url, headers, type, folder } =
         downloadForm.current.getFieldsValue();
@@ -99,24 +97,24 @@ export function BrowserView() {
 
       return true;
     } catch (e) {
-      messageApi.error((e as any).message);
+      message.error((e as any).message);
       return false;
     }
-  };
+  });
 
-  const loadUrl = (url: string) => {
+  const loadUrl = useMemoizedFn((url: string) => {
     setBrowserStore({
       url,
       mode: PageMode.Browser,
       status: BrowserStatus.Loading,
     });
     webviewLoadURL(url);
-  };
+  });
 
-  const goto = () => {
+  const goto = useMemoizedFn(() => {
     const link = generateUrl(store.url);
     loadUrl(link);
-  };
+  });
 
   const handleFormVisibleChange = useMemoizedFn((visible: boolean) => {
     if (!visible) {
@@ -124,7 +122,7 @@ export function BrowserView() {
     }
   });
 
-  const renderContent = () => {
+  const renderContent = useMemoizedFn(() => {
     // Loaded state
     if (store.status === BrowserStatus.Loading) {
       return (
@@ -161,68 +159,20 @@ export function BrowserView() {
     }
 
     return null;
-  };
-
-  const renderSidePanel = () => {
-    if (store.sources.length === 0) {
-      return null;
-    }
-
-    return (
-      <div className="flex h-full flex-col gap-3 overflow-y-auto bg-white p-3 dark:bg-[#1F2024]">
-        {store.sources.map((item, index) => {
-          return (
-            <div
-              className="flex flex-col gap-2 rounded-lg bg-[#FAFCFF] p-2 dark:bg-[#27292F]"
-              key={index}
-            >
-              <span
-                className="line-clamp-2 cursor-default break-words text-sm text-[#343434] dark:text-[#B4B4B4]"
-                title={item.name}
-              >
-                {item.name}
-              </span>
-              <span
-                className="line-clamp-2 cursor-default break-words text-xs dark:text-[#515257]"
-                title={item.url}
-              >
-                {item.url}
-              </span>
-              <div className="flex flex-row items-center justify-between gap-3">
-                <div>
-                  <IconButton
-                    icon={<DeleteIcon />}
-                    onClick={() => {
-                      deleteSource(item.url);
-                    }}
-                  />
-                </div>
-                <Button
-                  size="sm"
-                  onClick={() => {
-                    ipcShowDownloadDialog([item]);
-                  }}
-                >
-                  {t("addToDownloadList")}
-                </Button>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
+  });
 
   return (
     <div className="flex flex-1 flex-col overflow-hidden">
-      <Splitter className="flex h-full flex-1 gap-2">
-        <Splitter.Panel>{renderContent()}</Splitter.Panel>
-        {store.sources.length && (
-          <Splitter.Panel defaultSize={240} min="20%" max="70%">
-            {renderSidePanel()}
+      {!store.sources.length ? (
+        renderContent()
+      ) : (
+        <Splitter className="flex h-full flex-1 gap-2">
+          <Splitter.Panel>{renderContent()}</Splitter.Panel>
+          <Splitter.Panel min="20%" max="70%" defaultSize={240}>
+            <BrowserViewPanel />
           </Splitter.Panel>
-        )}
-      </Splitter>
+        </Splitter>
+      )}
       <DownloadForm
         id="browser"
         isEdit
@@ -233,7 +183,6 @@ export function BrowserView() {
         destroyOnClose
         onFormVisibleChange={handleFormVisibleChange}
       />
-      {contextHolder}
     </div>
   );
 }
diff --git a/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx b/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
new file mode 100644
index 00000000..10a19c3d
--- /dev/null
+++ b/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
@@ -0,0 +1,56 @@
+import { DeleteIcon } from "@/assets/svg";
+import { IconButton } from "@/components/IconButton";
+import { Button } from "@/components/ui/button";
+import useElectron from "@/hooks/electron";
+import {
+  browserStoreSelector,
+  setBrowserSelector,
+  useBrowserStore,
+} from "@/store/browser";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useShallow } from "zustand/react/shallow";
+
+export function BrowserViewPanel() {
+  const store = useBrowserStore(useShallow(browserStoreSelector));
+  const { deleteSource } = useBrowserStore(useShallow(setBrowserSelector));
+  const { t } = useTranslation();
+  const { showDownloadDialog } = useElectron();
+
+  return (
+    <div className="flex h-full flex-col gap-3 overflow-y-auto bg-white p-3 dark:bg-[#1F2024]">
+      {store.sources.map((item, index) => {
+        return (
+          <div
+            className="flex flex-col gap-2 rounded-lg bg-[#FAFCFF] p-2 dark:bg-[#27292F]"
+            key={index}
+          >
+            <span
+              className="line-clamp-2 cursor-default break-words text-sm text-[#343434] dark:text-[#B4B4B4]"
+              title={item.name}
+            >
+              {item.name}
+            </span>
+            <span
+              className="line-clamp-2 cursor-default break-words text-xs dark:text-[#515257]"
+              title={item.url}
+            >
+              {item.url}
+            </span>
+            <div className="flex flex-row items-center justify-between gap-3">
+              <div>
+                <IconButton
+                  icon={<DeleteIcon />}
+                  onClick={() => deleteSource(item.url)}
+                />
+              </div>
+              <Button size="sm" onClick={() => showDownloadDialog([item])}>
+                {t("addToDownloadList")}
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx b/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
index 403b33c0..2374eea8 100644
--- a/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
@@ -2,7 +2,7 @@ import useElectron from "@/hooks/electron";
 import { getFavIcon, tdApp } from "@/utils";
 import { PlusOutlined } from "@ant-design/icons";
 import { useRequest } from "ahooks";
-import { Form, Input, message, Modal } from "antd";
+import { App, Form, Input, Modal } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FavItem } from "./FavItem";
@@ -27,7 +27,7 @@ export function FavoriteList() {
   } = useElectron();
   const { data: favoriteList = [], refresh } = useRequest(getFavorites);
   const { t } = useTranslation();
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
   const [favoriteAddForm] = Form.useForm<Favorite>();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { setBrowserStore } = useBrowserStore(useShallow(setBrowserSelector));
@@ -70,7 +70,7 @@ export function FavoriteList() {
 
       setIsModalOpen(false);
     } catch (err: any) {
-      messageApi.error(err.message || t("addFavoriteFailed"));
+      message.error(err.message || t("addFavoriteFailed"));
     }
   };
 
@@ -118,7 +118,6 @@ export function FavoriteList() {
 
   return (
     <div className="h-full w-full py-4">
-      {contextHolder}
       <div className="grid grid-cols-4 place-items-center gap-4 overflow-auto md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-9">
         {favoriteList.map((item) => {
           return (
diff --git a/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx b/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
index 7de46450..6e6eae8e 100644
--- a/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
@@ -2,7 +2,7 @@ import useElectron from "@/hooks/electron";
 import { cn, generateUrl, getFavIcon, tdApp } from "@/utils";
 import { useRequest } from "ahooks";
 import { Input, Tooltip } from "antd";
-import React, { useContext, useMemo } from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
   BackIcon,
@@ -17,7 +17,6 @@ import {
   PCIcon,
 } from "@/assets/svg";
 import { IconButton } from "@/components/IconButton";
-import { ThemeContext } from "@/context/ThemeContext";
 import { EyeInvisibleOutlined } from "@ant-design/icons";
 import { OPEN_URL } from "@/const";
 import {
@@ -33,6 +32,7 @@ import {
   setBrowserSelector,
   useBrowserStore,
 } from "@/store/browser";
+import { themeSelector, useSessionStore } from "@/store/session";
 
 interface Props {
   page: boolean;
@@ -50,7 +50,7 @@ export function ToolBar({ page }: Props) {
     setUserAgent,
     webviewUrlContextMenu,
   } = useElectron();
-  const theme = useContext(ThemeContext);
+  const { theme } = useSessionStore(useShallow(themeSelector));
   const store = useBrowserStore(useShallow(browserStoreSelector));
   const { setBrowserStore } = useBrowserStore(useShallow(setBrowserSelector));
   const appStore = useAppStore(useShallow(appStoreSelector));
diff --git a/packages/renderer/src/store/config.ts b/packages/renderer/src/store/config.ts
index 512eab43..d5672d63 100644
--- a/packages/renderer/src/store/config.ts
+++ b/packages/renderer/src/store/config.ts
@@ -8,45 +8,23 @@ type State = {
   // Last download type
   lastIsBatch: boolean;
   lastDownloadTypes: DownloadType;
-
-  // Video type selected last time (only m3u8 can be cached)
-  lastVideoType: string;
-  lastVideoName: string;
-  lastVideoNumber: number;
 };
 
 type Actions = {
   setLastDownloadTypes: (type: DownloadType) => void;
-  setLastVideo: (data: {
-    type?: string;
-    name?: string;
-    number?: number;
-  }) => void;
   setLastIsBatch: (isBatch: boolean) => void;
 };
 
-export type ConfigStore = State & Actions;
-
 export const useConfigStore = create<State & Actions>()(
   persist(
     immer((set) => ({
       lastIsBatch: false,
       lastDownloadTypes: DownloadType.m3u8,
-      lastVideoType: "",
-      lastVideoName: "",
-      lastVideoNumber: 1,
       setLastDownloadTypes: (type) => {
         set((state) => {
           state.lastDownloadTypes = type;
         });
       },
-      setLastVideo: ({ type, name, number }) => {
-        set((state) => {
-          if (type) state.lastVideoType = type;
-          if (name) state.lastVideoName = name;
-          if (number) state.lastVideoNumber = number;
-        });
-      },
       setLastIsBatch: (isBatch) => {
         set((state) => {
           state.lastIsBatch = isBatch;
@@ -59,3 +37,10 @@ export const useConfigStore = create<State & Actions>()(
     },
   ),
 );
+
+export const downloadFormSelector = (s: State & Actions) => ({
+  lastIsBatch: s.lastIsBatch,
+  lastDownloadTypes: s.lastDownloadTypes,
+  setLastDownloadTypes: s.setLastDownloadTypes,
+  setLastIsBatch: s.setLastIsBatch,
+});
diff --git a/packages/renderer/src/store/session.ts b/packages/renderer/src/store/session.ts
index 826e62a3..25c9b38d 100644
--- a/packages/renderer/src/store/session.ts
+++ b/packages/renderer/src/store/session.ts
@@ -4,19 +4,24 @@ import { immer } from "zustand/middleware/immer";
 type State = {
   updateAvailable: boolean;
   updateChecking: boolean;
+
+  // theme
+  theme: "light" | "dark";
 };
 
 type Actions = {
   setUpdateAvailable: (available: boolean) => void;
   setUploadChecking: (loading: boolean) => void;
-};
 
-export type SessionStore = State & Actions;
+  // theme
+  setTheme: (theme: "light" | "dark") => void;
+};
 
 export const useSessionStore = create<State & Actions>()(
   immer((set) => ({
     updateAvailable: false,
     updateChecking: true,
+    theme: "light",
     setUpdateAvailable: (available) => {
       set((state) => {
         state.updateAvailable = available;
@@ -27,5 +32,22 @@ export const useSessionStore = create<State & Actions>()(
         state.updateChecking = loading;
       });
     },
+    setTheme: (theme) => {
+      set((state) => {
+        state.theme = theme;
+      });
+    },
   })),
 );
+
+export const themeSelector = (s: State & Actions) => ({
+  theme: s.theme,
+  setTheme: s.setTheme,
+});
+
+export const updateSelector = (s: State & Actions) => ({
+  updateAvailable: s.updateAvailable,
+  updateChecking: s.updateChecking,
+  setUpdateAvailable: s.setUpdateAvailable,
+  setUploadChecking: s.setUploadChecking,
+});

From 5a32df61c55070b383b81ef557a24cbe87b0885f Mon Sep 17 00:00:00 2001
From: caorushizi <84996057@qq.com>
Date: Fri, 3 Jan 2025 03:06:33 +0800
Subject: [PATCH 2/4] =?UTF-8?q?style:=20=F0=9F=92=84=20=20optimized=20the?=
 =?UTF-8?q?=20file=20reference=20path=20problem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/renderer/src/App.tsx                               | 2 +-
 packages/renderer/src/components/DownloadForm.tsx           | 2 +-
 packages/renderer/src/components/DownloadTerminal.tsx       | 2 +-
 packages/renderer/src/components/WebView.tsx                | 2 +-
 packages/renderer/src/hooks/{electron.ts => useElectron.ts} | 0
 packages/renderer/src/layout/App.tsx                        | 2 +-
 packages/renderer/src/layout/AppHeader.tsx                  | 2 +-
 packages/renderer/src/layout/AppSideBar.tsx                 | 2 +-
 packages/renderer/src/pages/Converter/index.tsx             | 6 +++---
 .../renderer/src/pages/HomePage/components/DownloadItem.tsx | 2 +-
 .../renderer/src/pages/HomePage/components/DownloadList.tsx | 2 +-
 .../renderer/src/pages/HomePage/components/ListHeader.tsx   | 2 +-
 packages/renderer/src/pages/HomePage/index.tsx              | 6 +++---
 packages/renderer/src/pages/SettingPage/index.tsx           | 6 +++---
 .../src/pages/SourceExtract/components/BrowserView.tsx      | 2 +-
 .../src/pages/SourceExtract/components/BrowserViewPanel.tsx | 2 +-
 .../src/pages/SourceExtract/components/FavoriteList.tsx     | 2 +-
 .../renderer/src/pages/SourceExtract/components/ToolBar.tsx | 2 +-
 packages/renderer/src/pages/SourceExtract/index.tsx         | 4 ++--
 packages/renderer/src/store/browser.ts                      | 2 +-
 20 files changed, 26 insertions(+), 26 deletions(-)
 rename packages/renderer/src/hooks/{electron.ts => useElectron.ts} (100%)

diff --git a/packages/renderer/src/App.tsx b/packages/renderer/src/App.tsx
index b46eed7c..f3e2c5eb 100644
--- a/packages/renderer/src/App.tsx
+++ b/packages/renderer/src/App.tsx
@@ -3,7 +3,7 @@ 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";
diff --git a/packages/renderer/src/components/DownloadForm.tsx b/packages/renderer/src/components/DownloadForm.tsx
index bff5bf7e..df3f50fb 100644
--- a/packages/renderer/src/components/DownloadForm.tsx
+++ b/packages/renderer/src/components/DownloadForm.tsx
@@ -17,7 +17,7 @@ import { useAsyncEffect, useMemoizedFn } from "ahooks";
 import { DownloadType } from "@/types";
 import { tdApp } from "@/utils";
 import { ADD_TO_LIST, DOWNLOAD_NOW } from "@/const";
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 
 export interface DownloadFormType {
   batch?: boolean;
diff --git a/packages/renderer/src/components/DownloadTerminal.tsx b/packages/renderer/src/components/DownloadTerminal.tsx
index 20843705..30000f92 100644
--- a/packages/renderer/src/components/DownloadTerminal.tsx
+++ b/packages/renderer/src/components/DownloadTerminal.tsx
@@ -3,7 +3,7 @@ import "@xterm/xterm/css/xterm.css";
 import { Terminal as XTerminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { cn } from "@/utils";
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 
 interface TerminalProps {
   className?: string;
diff --git a/packages/renderer/src/components/WebView.tsx b/packages/renderer/src/components/WebView.tsx
index cd832d3b..0f04b57a 100644
--- a/packages/renderer/src/components/WebView.tsx
+++ b/packages/renderer/src/components/WebView.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useRef, useEffect } from "react";
-import useElectron from "../hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { cn } from "@/utils";
 
 interface DivRect {
diff --git a/packages/renderer/src/hooks/electron.ts b/packages/renderer/src/hooks/useElectron.ts
similarity index 100%
rename from packages/renderer/src/hooks/electron.ts
rename to packages/renderer/src/hooks/useElectron.ts
diff --git a/packages/renderer/src/layout/App.tsx b/packages/renderer/src/layout/App.tsx
index 636f0f0f..8485635e 100644
--- a/packages/renderer/src/layout/App.tsx
+++ b/packages/renderer/src/layout/App.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
-import useElectron from "../hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { useAsyncEffect } from "ahooks";
 import { AppHeader } from "./AppHeader";
 import { AppSideBar } from "./AppSideBar";
diff --git a/packages/renderer/src/layout/AppHeader.tsx b/packages/renderer/src/layout/AppHeader.tsx
index cefe9916..dcd4cece 100644
--- a/packages/renderer/src/layout/AppHeader.tsx
+++ b/packages/renderer/src/layout/AppHeader.tsx
@@ -1,4 +1,4 @@
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { cn } from "@/utils";
 import React from "react";
 import { useTranslation } from "react-i18next";
diff --git a/packages/renderer/src/layout/AppSideBar.tsx b/packages/renderer/src/layout/AppSideBar.tsx
index 469c21c8..30ae192f 100644
--- a/packages/renderer/src/layout/AppSideBar.tsx
+++ b/packages/renderer/src/layout/AppSideBar.tsx
@@ -1,7 +1,7 @@
 import React, { cloneElement, PropsWithChildren, ReactElement } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Badge } from "antd";
-import useElectron from "../hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { useTranslation } from "react-i18next";
 import { cn, isWeb } from "@/utils";
 import {
diff --git a/packages/renderer/src/pages/Converter/index.tsx b/packages/renderer/src/pages/Converter/index.tsx
index 8d9c2cf5..d6c9429e 100644
--- a/packages/renderer/src/pages/Converter/index.tsx
+++ b/packages/renderer/src/pages/Converter/index.tsx
@@ -1,10 +1,10 @@
 import React, { ReactNode, useState } from "react";
-import PageContainer from "../../components/PageContainer";
+import PageContainer from "@/components/PageContainer";
 import { useTranslation } from "react-i18next";
 import { App, Empty } from "antd";
-import useElectron from "../../hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { useMemoizedFn, usePagination } from "ahooks";
-import { getFileName, tdApp } from "../../utils";
+import { getFileName, tdApp } from "@/utils";
 import { Conversion } from "../../../../main/types/entity/Conversion";
 import { DeleteOutlined, SyncOutlined } from "@ant-design/icons";
 import { produce } from "immer";
diff --git a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
index 075912d5..b0df0a9b 100644
--- a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
+++ b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
@@ -14,7 +14,7 @@ import {
   PauseIcon,
   TerminalIcon,
 } from "@/assets/svg";
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { DownloadTag } from "@/components/DownloadTag";
 import { IconButton } from "@/components/IconButton";
 import { useMemoizedFn } from "ahooks";
diff --git a/packages/renderer/src/pages/HomePage/components/DownloadList.tsx b/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
index e50e18e7..30c45264 100644
--- a/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
+++ b/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
@@ -6,7 +6,7 @@ import { produce } from "immer";
 import { App, Empty, Pagination } from "antd";
 import { DownloadFilter } from "@/types";
 import { ListPagination } from "./types";
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { useTranslation } from "react-i18next";
 import Loading from "@/components/Loading";
 import { useMemoizedFn } from "ahooks";
diff --git a/packages/renderer/src/pages/HomePage/components/ListHeader.tsx b/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
index 9c28adf9..fa78d282 100644
--- a/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
+++ b/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
@@ -4,7 +4,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { Checkbox } from "@/components/ui/checkbox";
 import { DownloadFilter } from "@/types";
 import { useMemoizedFn } from "ahooks";
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { isWeb } from "@/utils";
 
 interface Props {
diff --git a/packages/renderer/src/pages/HomePage/index.tsx b/packages/renderer/src/pages/HomePage/index.tsx
index f83acc7d..e3a6ebba 100644
--- a/packages/renderer/src/pages/HomePage/index.tsx
+++ b/packages/renderer/src/pages/HomePage/index.tsx
@@ -1,8 +1,8 @@
 import React, { FC, useEffect, useRef, useState } from "react";
-import PageContainer from "../../components/PageContainer";
+import PageContainer from "@/components/PageContainer";
 import { useMemoizedFn, useMount, usePagination } from "ahooks";
-import useElectron from "../../hooks/electron";
-import { DownloadFilter, DownloadType } from "../../types";
+import useElectron from "@/hooks/useElectron";
+import { DownloadFilter, DownloadType } from "@/types";
 import { useTranslation } from "react-i18next";
 import { DownloadList } from "./components";
 import DownloadForm, {
diff --git a/packages/renderer/src/pages/SettingPage/index.tsx b/packages/renderer/src/pages/SettingPage/index.tsx
index 7a57d839..4de2ecc5 100644
--- a/packages/renderer/src/pages/SettingPage/index.tsx
+++ b/packages/renderer/src/pages/SettingPage/index.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
-import PageContainer from "../../components/PageContainer";
+import PageContainer from "@/components/PageContainer";
 import {
   App,
   Badge,
@@ -28,9 +28,9 @@ import {
   appStoreSelector,
   setAppStoreSelector,
 } from "@/store/app";
-import useElectron from "../../hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { useMemoizedFn, useRequest } from "ahooks";
-import { AppLanguage, AppTheme } from "../../types";
+import { AppLanguage, AppTheme } from "@/types";
 import { useTranslation } from "react-i18next";
 import { updateSelector, useSessionStore } from "@/store/session";
 import { useShallow } from "zustand/react/shallow";
diff --git a/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx b/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx
index c32447af..98653554 100644
--- a/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/BrowserView.tsx
@@ -1,7 +1,7 @@
 import DownloadForm, { DownloadFormRef } from "@/components/DownloadForm";
 import { Button } from "@/components/ui/button";
 import WebView from "@/components/WebView";
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import {
   BrowserStatus,
   browserStoreSelector,
diff --git a/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx b/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
index 10a19c3d..9fb86ccb 100644
--- a/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
@@ -1,7 +1,7 @@
 import { DeleteIcon } from "@/assets/svg";
 import { IconButton } from "@/components/IconButton";
 import { Button } from "@/components/ui/button";
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import {
   browserStoreSelector,
   setBrowserSelector,
diff --git a/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx b/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
index 2374eea8..31d5015b 100644
--- a/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
@@ -1,4 +1,4 @@
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { getFavIcon, tdApp } from "@/utils";
 import { PlusOutlined } from "@ant-design/icons";
 import { useRequest } from "ahooks";
diff --git a/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx b/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
index 6e6eae8e..457bc9f5 100644
--- a/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
@@ -1,4 +1,4 @@
-import useElectron from "@/hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { cn, generateUrl, getFavIcon, tdApp } from "@/utils";
 import { useRequest } from "ahooks";
 import { Input, Tooltip } from "antd";
diff --git a/packages/renderer/src/pages/SourceExtract/index.tsx b/packages/renderer/src/pages/SourceExtract/index.tsx
index 0bb9a343..dce0f516 100644
--- a/packages/renderer/src/pages/SourceExtract/index.tsx
+++ b/packages/renderer/src/pages/SourceExtract/index.tsx
@@ -1,7 +1,7 @@
 import { useAsyncEffect } from "ahooks";
 import React, { useEffect, useRef } from "react";
-import PageContainer from "../../components/PageContainer";
-import useElectron from "../../hooks/electron";
+import PageContainer from "@/components/PageContainer";
+import useElectron from "@/hooks/useElectron";
 import { FavoriteList } from "./components/FavoriteList";
 import { BrowserView } from "./components/BrowserView";
 import { ToolBar } from "./components/ToolBar";
diff --git a/packages/renderer/src/store/browser.ts b/packages/renderer/src/store/browser.ts
index 0f50acae..92603dd2 100644
--- a/packages/renderer/src/store/browser.ts
+++ b/packages/renderer/src/store/browser.ts
@@ -1,4 +1,4 @@
-import useElectron from "../hooks/electron";
+import useElectron from "@/hooks/useElectron";
 import { DownloadType } from "@/types";
 import { convertPlainObject } from "@/utils";
 import { create } from "zustand";

From 623ed941f4a61d29264190e7a636fd1d115d6849 Mon Sep 17 00:00:00 2001
From: caorushizi <84996057@qq.com>
Date: Fri, 3 Jan 2025 03:37:35 +0800
Subject: [PATCH 3/4] =?UTF-8?q?perf:=20=F0=9F=9A=80=20=20use=20memoized=20?=
 =?UTF-8?q?function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/renderer/eslint.config.js            |  12 +
 packages/renderer/package.json                |   1 +
 packages/renderer/src/App.tsx                 |  20 +-
 packages/renderer/src/layout/AppHeader.tsx    |   5 +-
 packages/renderer/src/layout/AppSideBar.tsx   | 217 ++++++++++--------
 .../renderer/src/pages/Converter/index.tsx    |   6 +-
 .../HomePage/components/DownloadItem.tsx      |  20 +-
 .../HomePage/components/DownloadList.tsx      |  18 +-
 .../pages/HomePage/components/ListHeader.tsx  |   3 +-
 .../renderer/src/pages/HomePage/index.tsx     |  88 +++----
 packages/renderer/src/pages/Player/index.tsx  |   4 +-
 .../renderer/src/pages/SettingPage/index.tsx  |  12 +-
 .../SourceExtract/components/FavoriteList.tsx |  26 +--
 .../SourceExtract/components/ToolBar.tsx      |  60 ++---
 .../src/pages/SourceExtract/index.tsx         |  36 +--
 pnpm-lock.yaml                                |   3 +
 16 files changed, 295 insertions(+), 236 deletions(-)

diff --git a/packages/renderer/eslint.config.js b/packages/renderer/eslint.config.js
index febe369f..03a28c33 100644
--- 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
index f68e9306..36f957a2 100644
--- 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
index f3e2c5eb..a1891234 100644
--- a/packages/renderer/src/App.tsx
+++ b/packages/renderer/src/App.tsx
@@ -7,7 +7,7 @@ import useElectron from "@/hooks/useElectron";
 import Loading from "./components/Loading";
 import { DownloadFilter } from "./types";
 import { isWeb, tdApp } from "./utils";
-import { useAsyncEffect } from "ahooks";
+import { useAsyncEffect, useMemoizedFn } from "ahooks";
 import {
   themeSelector,
   updateSelector,
@@ -41,28 +41,26 @@ const App: FC = () => {
   const { increase } = useDownloadStore(useShallow(downloadStoreSelector));
   const { theme, setTheme } = useSessionStore(useShallow(themeSelector));
 
-  const themeChange = (event: MediaQueryListEvent) => {
+  const themeChange = useMemoizedFn((event: MediaQueryListEvent) => {
     if (event.matches) {
       setTheme("dark");
     } else {
       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 = () => {
diff --git a/packages/renderer/src/layout/AppHeader.tsx b/packages/renderer/src/layout/AppHeader.tsx
index dcd4cece..4b83acb5 100644
--- a/packages/renderer/src/layout/AppHeader.tsx
+++ b/packages/renderer/src/layout/AppHeader.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { HelpIcon } from "@/assets/svg";
 import LogoImg from "../assets/images/logo.png";
+import { useMemoizedFn } from "ahooks";
 
 interface Props {
   className?: string;
@@ -13,10 +14,10 @@ export function AppHeader({ className }: Props) {
   const { openUrl } = useElectron();
   const { t } = useTranslation();
 
-  const openHelpUrl = () => {
+  const openHelpUrl = useMemoizedFn(() => {
     const url = "https://downloader.caorushizi.cn/guides.html?form=client";
     openUrl(url);
-  };
+  });
 
   return (
     <div
diff --git a/packages/renderer/src/layout/AppSideBar.tsx b/packages/renderer/src/layout/AppSideBar.tsx
index 30ae192f..9976354d 100644
--- a/packages/renderer/src/layout/AppSideBar.tsx
+++ b/packages/renderer/src/layout/AppSideBar.tsx
@@ -1,4 +1,9 @@
-import React, { cloneElement, PropsWithChildren, ReactElement } from "react";
+import React, {
+  cloneElement,
+  PropsWithChildren,
+  ReactElement,
+  useMemo,
+} from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Badge } from "antd";
 import useElectron from "@/hooks/useElectron";
@@ -21,6 +26,7 @@ import {
   setAppStoreSelector,
 } from "@/store/app";
 import { downloadStoreSelector, useDownloadStore } from "@/store/download";
+import { useMemoizedFn } from "ahooks";
 
 function processLocation(pathname: string) {
   let name = pathname;
@@ -51,7 +57,10 @@ function AppMenuItem({
   className,
   icon,
 }: AppMenuItemProps) {
-  const isActive = activeKey === processLocation(link);
+  const isActive = useMemo(() => {
+    return activeKey === processLocation(link);
+  }, [activeKey, link]);
+
   return (
     <Link
       to={link}
@@ -90,103 +99,123 @@ export function AppSideBar({ className }: Props) {
   const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
   const { updateAvailable } = useSessionStore(useShallow(updateSelector));
 
-  const activeKey = processLocation(location.pathname);
-
-  const handleExternalLink = async (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
+  const activeKey = useMemo(
+    () => processLocation(location.pathname),
+    [location.pathname],
+  );
 
-    setAppStore({ openInNewWindow: true });
-    if (location.pathname === "/source") {
-      navigate("/");
-    }
-    // FIXME: It is possible that the webview is not completely hidden yet
-    await ipcSetAppStore("openInNewWindow", true);
-    await showBrowserWindow();
-  };
+  const handleExternalLink = useMemoizedFn(
+    async (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      e.preventDefault();
 
-  const items1: MenuItem[] = [
-    {
-      label: (
-        <AppMenuItem
-          link="/"
-          onClick={() => {
-            clearCount();
-          }}
-          activeKey={activeKey}
-          icon={<ListIcon />}
-        >
-          <span>{t("downloadList")}</span>
-          {count > 0 && (
-            <Badge count={count} offset={[5, 1]} size="small"></Badge>
-          )}
-        </AppMenuItem>
-      ),
-      key: "home",
-    },
-    {
-      label: (
-        <AppMenuItem link="/done" activeKey={activeKey} icon={<DoneIcon />}>
-          <span>{t("downloadComplete")}</span>
-        </AppMenuItem>
-      ),
-      key: "done",
-    },
-    {
-      label: (
-        <AppMenuItem
-          link="/converter"
-          activeKey={activeKey}
-          icon={<ConverterIcon />}
-        >
-          <span>{t("converter")}</span>
-        </AppMenuItem>
-      ),
-      key: "converter",
-    },
-    {
-      label: (
-        <AppMenuItem
-          link="/source"
-          activeKey={activeKey}
-          className="group"
-          icon={<ExtractIcon />}
-        >
-          <span className="flex flex-1">{t("materialExtraction")}</span>
-          <div
-            title={t("openInNewWindow")}
-            className="hidden hover:opacity-70 group-hover:block"
-            onClick={(e) => handleExternalLink(e)}
-          >
-            <ShareIcon
-              fill={"/source" === location.pathname ? "#fff" : "#AAB5CB"}
-            />
-          </div>
-        </AppMenuItem>
-      ),
-      key: "source",
-    },
-    {
-      label: (
-        <AppMenuItem
-          link="/settings"
-          activeKey={activeKey}
-          icon={<SettingsIcon />}
-        >
-          <span>{t("setting")}</span>
-          <Badge dot={updateAvailable} offset={[-13, -3]} />
-        </AppMenuItem>
-      ),
-      key: "settings",
+      setAppStore({ openInNewWindow: true });
+      if (location.pathname === "/source") {
+        navigate("/");
+      }
+      // FIXME: It is possible that the webview is not completely hidden yet
+      await ipcSetAppStore("openInNewWindow", true);
+      await showBrowserWindow();
     },
-  ];
-  const items = items1.filter((i) =>
-    isWeb ? i.key !== "source" && i.key !== "converter" : true,
   );
 
-  const finalItems = items.filter((item) =>
-    appStore.openInNewWindow ? item?.key !== "source" : true,
-  );
+  const handleClearCount = useMemoizedFn(() => {
+    clearCount();
+  });
+
+  const items1: MenuItem[] = useMemo(() => {
+    return [
+      {
+        label: (
+          <AppMenuItem
+            link="/"
+            onClick={handleClearCount}
+            activeKey={activeKey}
+            icon={<ListIcon />}
+          >
+            <span>{t("downloadList")}</span>
+            {count > 0 && (
+              <Badge count={count} offset={[5, 1]} size="small"></Badge>
+            )}
+          </AppMenuItem>
+        ),
+        key: "home",
+      },
+      {
+        label: (
+          <AppMenuItem link="/done" activeKey={activeKey} icon={<DoneIcon />}>
+            <span>{t("downloadComplete")}</span>
+          </AppMenuItem>
+        ),
+        key: "done",
+      },
+      {
+        label: (
+          <AppMenuItem
+            link="/converter"
+            activeKey={activeKey}
+            icon={<ConverterIcon />}
+          >
+            <span>{t("converter")}</span>
+          </AppMenuItem>
+        ),
+        key: "converter",
+      },
+      {
+        label: (
+          <AppMenuItem
+            link="/source"
+            activeKey={activeKey}
+            className="group"
+            icon={<ExtractIcon />}
+          >
+            <span className="flex flex-1">{t("materialExtraction")}</span>
+            <div
+              title={t("openInNewWindow")}
+              className="hidden hover:opacity-70 group-hover:block"
+              onClick={handleExternalLink}
+            >
+              <ShareIcon
+                fill={"/source" === location.pathname ? "#fff" : "#AAB5CB"}
+              />
+            </div>
+          </AppMenuItem>
+        ),
+        key: "source",
+      },
+      {
+        label: (
+          <AppMenuItem
+            link="/settings"
+            activeKey={activeKey}
+            icon={<SettingsIcon />}
+          >
+            <span>{t("setting")}</span>
+            <Badge dot={updateAvailable} offset={[-13, -3]} />
+          </AppMenuItem>
+        ),
+        key: "settings",
+      },
+    ];
+  }, [
+    activeKey,
+    count,
+    handleExternalLink,
+    location.pathname,
+    t,
+    updateAvailable,
+    handleClearCount,
+  ]);
+
+  const finalItems = useMemo(() => {
+    return items1
+      .filter((i) =>
+        isWeb ? i.key !== "source" && i.key !== "converter" : true,
+      )
+      .filter((item) =>
+        appStore.openInNewWindow ? item?.key !== "source" : true,
+      );
+  }, [items1, appStore.openInNewWindow]);
 
   return (
     <div
diff --git a/packages/renderer/src/pages/Converter/index.tsx b/packages/renderer/src/pages/Converter/index.tsx
index d6c9429e..e74c13c3 100644
--- a/packages/renderer/src/pages/Converter/index.tsx
+++ b/packages/renderer/src/pages/Converter/index.tsx
@@ -62,7 +62,7 @@ const Converter = () => {
     refresh();
   });
 
-  const renderActionButtons = (dom: ReactNode, item: Conversion): ReactNode => {
+  const renderActionButtons = useMemoizedFn((item: Conversion): ReactNode => {
     // Download successfully
     return [
       <div
@@ -80,7 +80,7 @@ const Converter = () => {
         <IconButton icon={<DeleteOutlined />} />
       </div>,
     ];
-  };
+  });
 
   const handleSelectFile = useMemoizedFn(async () => {
     const file = await selectFile();
@@ -111,7 +111,7 @@ const Converter = () => {
                     {item.name}
                   </div>
                   <div className="flex flex-row gap-3">
-                    {renderActionButtons(null, item)}
+                    {renderActionButtons(item)}
                   </div>
                 </div>
                 <div className="text-xs text-[#AAB5CB]">{item.path}</div>
diff --git a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
index b0df0a9b..1982884e 100644
--- a/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
+++ b/packages/renderer/src/pages/HomePage/components/DownloadItem.tsx
@@ -54,7 +54,7 @@ export function DownloadItem({
   const { t } = useTranslation();
   const { openPlayerWindow } = useElectron();
 
-  const renderTerminalBtn = (item: DownloadItem) => {
+  const renderTerminalBtn = useMemoizedFn((item: DownloadItem) => {
     if (!appStore.showTerminal) return null;
 
     return (
@@ -71,10 +71,10 @@ export function DownloadItem({
         log={item.log}
       />
     );
-  };
+  });
 
   // Edit form
-  const renderEditIconBtn = (item: DownloadItem) => {
+  const renderEditIconBtn = useMemoizedFn((item: DownloadItem) => {
     return (
       <IconButton
         title={t("edit")}
@@ -82,7 +82,7 @@ export function DownloadItem({
         onClick={() => onShowEditForm(item)}
       />
     );
-  };
+  });
 
   const handlePlay = useMemoizedFn(() => {
     openPlayerWindow();
@@ -109,7 +109,7 @@ export function DownloadItem({
     tdApp.onEvent(STOP_DOWNLOAD);
   });
 
-  const renderActionButtons = (item: VideoStat): ReactNode => {
+  const renderActionButtons = useMemoizedFn((item: VideoStat): ReactNode => {
     if (item.status === DownloadStatus.Ready) {
       return [
         renderTerminalBtn(item),
@@ -171,9 +171,9 @@ export function DownloadItem({
         onClick={handlePlay}
       />,
     ];
-  };
+  });
 
-  const renderTitle = (item: VideoStat): ReactNode => {
+  const renderTitle = useMemoizedFn((item: VideoStat): ReactNode => {
     return (
       <div
         className={cn("truncate text-sm dark:text-[#B4B4B4]", {
@@ -185,7 +185,7 @@ export function DownloadItem({
         {item.name}
       </div>
     );
-  };
+  });
 
   const handleRenderTag = useMemoizedFn(() => {
     let tag = null;
@@ -249,7 +249,7 @@ export function DownloadItem({
     );
   });
 
-  const renderDescription = (item: DownloadItem): ReactNode => {
+  const renderDescription = useMemoizedFn((item: DownloadItem): ReactNode => {
     if (progress) {
       const { percent, speed } = progress;
       const val = Math.round(Number(percent));
@@ -286,7 +286,7 @@ export function DownloadItem({
         )}
       </div>
     );
-  };
+  });
 
   return (
     <div
diff --git a/packages/renderer/src/pages/HomePage/components/DownloadList.tsx b/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
index 30c45264..d19bba90 100644
--- a/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
+++ b/packages/renderer/src/pages/HomePage/components/DownloadList.tsx
@@ -121,7 +121,7 @@ export function DownloadList({
     );
   });
 
-  const handleSelectAll = () => {
+  const handleSelectAll = useMemoizedFn(() => {
     setSelected(
       produce((draft) => {
         if (draft.length) {
@@ -131,7 +131,7 @@ export function DownloadList({
         }
       }),
     );
-  };
+  });
 
   const listChecked = useMemo(() => {
     if (selected.length === 0) {
@@ -141,7 +141,7 @@ export function DownloadList({
       return true;
     }
     return "indeterminate";
-  }, [selected]);
+  }, [selected, data.length]);
 
   useEffect(() => {
     setSelected([]);
@@ -185,15 +185,15 @@ export function DownloadList({
     onDownloadListContextMenu(item);
   });
 
-  const onDeleteItems = async (ids: number[]) => {
+  const onDeleteItems = useMemoizedFn(async (ids: number[]) => {
     for (const id of ids) {
       await deleteDownloadItem(Number(id));
     }
     setSelected([]);
     refresh();
-  };
+  });
 
-  const onDownloadItems = async (ids: number[]) => {
+  const onDownloadItems = useMemoizedFn(async (ids: number[]) => {
     for (const id of ids) {
       await startDownload(Number(id));
     }
@@ -201,11 +201,11 @@ export function DownloadList({
     message.success(t("addTaskSuccess"));
     refresh();
     setSelected([]);
-  };
+  });
 
-  const onCancelItems = async () => {
+  const onCancelItems = useMemoizedFn(async () => {
     setSelected([]);
-  };
+  });
 
   const handleShowDownloadForm = useMemoizedFn((item: DownloadItem) => {
     tdApp.onEvent(EDIT_DOWNLOAD);
diff --git a/packages/renderer/src/pages/HomePage/components/ListHeader.tsx b/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
index fa78d282..a147063a 100644
--- a/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
+++ b/packages/renderer/src/pages/HomePage/components/ListHeader.tsx
@@ -37,7 +37,8 @@ export function ListHeader({
         label: t("exportDownloadList"),
       },
     ];
-  }, []);
+  }, [t]);
+
   const onMenuClick: MenuProps["onClick"] = useMemoizedFn(async (e) => {
     const { key } = e;
     if (key === "exportDownloadList") {
diff --git a/packages/renderer/src/pages/HomePage/index.tsx b/packages/renderer/src/pages/HomePage/index.tsx
index e3a6ebba..1762dc32 100644
--- a/packages/renderer/src/pages/HomePage/index.tsx
+++ b/packages/renderer/src/pages/HomePage/index.tsx
@@ -101,52 +101,62 @@ const HomePage: FC<Props> = ({ filter = DownloadFilter.list }) => {
     setLocalIP(ip);
   });
 
-  const confirmAddItems = async (values: DownloadFormType, now?: boolean) => {
-    const { batch, batchList = "", name, headers, type, url, folder } = values;
-    if (batch) {
-      /**
-       * Here you need to parse the batchList
-       * The format is batchList
-       * url1 name1\n
-       * url2 name2\n
-       * url3
-       * ...
-       */
-      const items: Omit<DownloadItem, "id">[] = batchList
-        .split("\n")
-        .map((line: string) => {
-          const [url, name, folder] = line.trim().split(" ");
-          return {
-            url: url.trim(),
-            name: name || randomName(),
-            headers,
-            type,
-            folder,
-          };
-        });
-      if (now) {
-        await downloadItemsNow(items);
-      } else {
-        await addDownloadItems(items);
-      }
-    } else {
-      const item: Omit<DownloadItem, "id"> = {
+  const confirmAddItems = useMemoizedFn(
+    async (values: DownloadFormType, now?: boolean) => {
+      const {
+        batch,
+        batchList = "",
         name,
-        url,
         headers,
         type,
+        url,
         folder,
-      };
-      if (now) {
-        await downloadNow(item);
+      } = values;
+      if (batch) {
+        /**
+         * Here you need to parse the batchList
+         * The format is batchList
+         * url1 name1\n
+         * url2 name2\n
+         * url3
+         * ...
+         */
+        const items: Omit<DownloadItem, "id">[] = batchList
+          .split("\n")
+          .map((line: string) => {
+            const [url, name, folder] = line.trim().split(" ");
+            return {
+              url: url.trim(),
+              name: name || randomName(),
+              headers,
+              type,
+              folder,
+            };
+          });
+        if (now) {
+          await downloadItemsNow(items);
+        } else {
+          await addDownloadItems(items);
+        }
       } else {
-        await addDownloadItem(item);
+        const item: Omit<DownloadItem, "id"> = {
+          name,
+          url,
+          headers,
+          type,
+          folder,
+        };
+        if (now) {
+          await downloadNow(item);
+        } else {
+          await addDownloadItem(item);
+        }
       }
-    }
 
-    refresh();
-    return true;
-  };
+      refresh();
+      return true;
+    },
+  );
 
   const handleOpenForm = useMemoizedFn(() => {
     tdApp.onEvent(CLICK_DOWNLOAD);
diff --git a/packages/renderer/src/pages/Player/index.tsx b/packages/renderer/src/pages/Player/index.tsx
index 4fe32c10..013851bb 100644
--- a/packages/renderer/src/pages/Player/index.tsx
+++ b/packages/renderer/src/pages/Player/index.tsx
@@ -35,13 +35,13 @@ export default function PlayerPage() {
     }
   }, []);
 
-  const handleVideoClick = (url: string) => {
+  const handleVideoClick = useMemoizedFn((url: string) => {
     setCurrentVideo(url);
     player.current.src = url;
     player.current.play();
 
     setOpen(false);
-  };
+  });
 
   const onClose = useMemoizedFn(() => {
     setOpen(false);
diff --git a/packages/renderer/src/pages/SettingPage/index.tsx b/packages/renderer/src/pages/SettingPage/index.tsx
index 4de2ecc5..36ed10fd 100644
--- a/packages/renderer/src/pages/SettingPage/index.tsx
+++ b/packages/renderer/src/pages/SettingPage/index.tsx
@@ -90,13 +90,13 @@ const SettingPage: React.FC = () => {
     formRef.current?.setFieldsValue(settings);
   }, [settings]);
 
-  const onSelectDir = async () => {
+  const onSelectDir = useMemoizedFn(async () => {
     const local = await onSelectDownloadDir();
     if (local) {
       setAppStore({ local });
       formRef.current?.setFieldValue("local", local);
     }
-  };
+  });
 
   const renderButtonLabel = useMemoizedFn(() => {
     if (isWeb) {
@@ -135,7 +135,7 @@ const SettingPage: React.FC = () => {
     },
   ];
 
-  const onMenuClick: MenuProps["onClick"] = async (e) => {
+  const onMenuClick: MenuProps["onClick"] = useMemoizedFn(async (e) => {
     const { key } = e;
     if (key === "1") {
       try {
@@ -145,16 +145,16 @@ const SettingPage: React.FC = () => {
         message.error(t("importFavoriteFailed"));
       }
     }
-  };
+  });
 
-  const handleExportFavorite = async () => {
+  const handleExportFavorite = useMemoizedFn(async () => {
     try {
       await exportFavorites();
       message.success(t("exportFavoriteSuccess"));
     } catch (e: any) {
       message.error(t("exportFavoriteFailed"));
     }
-  };
+  });
 
   const handleCheckUpdate = useMemoizedFn(async () => {
     tdApp.onEvent(CHECK_UPDATE);
diff --git a/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx b/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
index 31d5015b..fbf5a5e6 100644
--- a/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/FavoriteList.tsx
@@ -1,7 +1,7 @@
 import useElectron from "@/hooks/useElectron";
 import { getFavIcon, tdApp } from "@/utils";
 import { PlusOutlined } from "@ant-design/icons";
-import { useRequest } from "ahooks";
+import { useMemoizedFn, useRequest } from "ahooks";
 import { App, Form, Input, Modal } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -32,31 +32,31 @@ export function FavoriteList() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { setBrowserStore } = useBrowserStore(useShallow(setBrowserSelector));
 
-  const loadUrl = (url: string) => {
+  const loadUrl = useMemoizedFn((url: string) => {
     setBrowserStore({
       url,
       mode: PageMode.Browser,
       status: BrowserStatus.Loading,
     });
     webviewLoadURL(url);
-  };
+  });
 
-  const onClickLoadItem = (item: Favorite) => {
+  const onClickLoadItem = useMemoizedFn((item: Favorite) => {
     loadUrl(item.url);
     tdApp.onEvent(OPEN_FAVORITE);
-  };
+  });
 
-  const handleRemoveFavorite = async (id: number) => {
+  const handleRemoveFavorite = useMemoizedFn(async (id: number) => {
     removeFavorite(id);
     refresh();
-  };
+  });
 
-  const showModal = () => {
+  const showModal = useMemoizedFn(() => {
     setIsModalOpen(true);
     tdApp.onEvent(ADD_FAVORITE);
-  };
+  });
 
-  const handleOk = async () => {
+  const handleOk = useMemoizedFn(async () => {
     try {
       const values = await favoriteAddForm.validateFields();
       const icon = await getFavIcon(values.url);
@@ -72,11 +72,11 @@ export function FavoriteList() {
     } catch (err: any) {
       message.error(err.message || t("addFavoriteFailed"));
     }
-  };
+  });
 
-  const handleCancel = () => {
+  const handleCancel = useMemoizedFn(() => {
     setIsModalOpen(false);
-  };
+  });
 
   useEffect(() => {
     const onClickLoadItem = (item: Favorite) => {
diff --git a/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx b/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
index 457bc9f5..109eb427 100644
--- a/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/ToolBar.tsx
@@ -1,6 +1,6 @@
 import useElectron from "@/hooks/useElectron";
 import { cn, generateUrl, getFavIcon, tdApp } from "@/utils";
-import { useRequest } from "ahooks";
+import { useMemoizedFn, useRequest } from "ahooks";
 import { Input, Tooltip } from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -62,48 +62,50 @@ export function ToolBar({ page }: Props) {
     store.status !== BrowserStatus.Loaded || store.mode !== PageMode.Browser;
 
   // Set default UA
-  const onSetDefaultUA = () => {
+  const onSetDefaultUA = useMemoizedFn(() => {
     const nextMode = !appStore.isMobile;
     setUserAgent(nextMode);
     setAppStore({
       isMobile: nextMode,
     });
-  };
+  });
 
   const curIsFavorite = useMemo(() => {
     return favoriteList.find((item) => item.url === store.url);
   }, [favoriteList, store.url]);
 
-  const onInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!store.url) {
-      return;
-    }
-    if (e.key !== "Enter") {
-      return;
-    }
-
-    await goto();
-  };
+  const onInputKeyDown = useMemoizedFn(
+    async (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!store.url) {
+        return;
+      }
+      if (e.key !== "Enter") {
+        return;
+      }
+
+      await goto();
+    },
+  );
 
-  const onClickGoBack = async () => {
+  const onClickGoBack = useMemoizedFn(async () => {
     const back = await webviewGoBack();
     if (!back) {
       // TODO: Reset title
       // document.title = originTitle.current;
       setBrowserStore({ url: "", title: "", mode: PageMode.Default });
     }
-  };
+  });
 
-  const onClickGoHome = async () => {
+  const onClickGoHome = useMemoizedFn(async () => {
     await webviewGoHome();
     setBrowserStore({
       url: "",
       title: "",
       mode: PageMode.Default,
     });
-  };
+  });
 
-  const loadUrl = (url: string) => {
+  const loadUrl = useMemoizedFn((url: string) => {
     tdApp.onEvent(OPEN_URL);
     setBrowserStore({
       url,
@@ -111,21 +113,21 @@ export function ToolBar({ page }: Props) {
       status: BrowserStatus.Loading,
     });
     webviewLoadURL(url);
-  };
+  });
 
-  const onInputContextMenu = () => {
+  const onInputContextMenu = useMemoizedFn(() => {
     webviewUrlContextMenu();
-  };
+  });
 
-  const onClickEnter = async () => {
+  const onClickEnter = useMemoizedFn(async () => {
     if (!store.url) {
       return;
     }
 
     await goto();
-  };
+  });
 
-  const onClickAddFavorite = async () => {
+  const onClickAddFavorite = useMemoizedFn(async () => {
     if (curIsFavorite) {
       await removeFavorite(curIsFavorite.id);
     } else {
@@ -137,17 +139,17 @@ export function ToolBar({ page }: Props) {
       });
     }
     refresh();
-  };
+  });
 
   // Merge to home page
-  const onCombineToHome = () => {
+  const onCombineToHome = useMemoizedFn(() => {
     combineToHomePage(store);
-  };
+  });
 
-  const goto = () => {
+  const goto = useMemoizedFn(() => {
     const link = generateUrl(store.url);
     loadUrl(link);
-  };
+  });
 
   const iconColor = theme === "dark" ? "white" : "black";
 
diff --git a/packages/renderer/src/pages/SourceExtract/index.tsx b/packages/renderer/src/pages/SourceExtract/index.tsx
index dce0f516..266a8bb9 100644
--- a/packages/renderer/src/pages/SourceExtract/index.tsx
+++ b/packages/renderer/src/pages/SourceExtract/index.tsx
@@ -1,4 +1,4 @@
-import { useAsyncEffect } from "ahooks";
+import { useAsyncEffect, useMemoizedFn } from "ahooks";
 import React, { useEffect, useRef } from "react";
 import PageContainer from "@/components/PageContainer";
 import useElectron from "@/hooks/useElectron";
@@ -56,38 +56,40 @@ const SourceExtract: React.FC<SourceExtractProps> = ({ page = false }) => {
     };
   }, [store.status]);
 
-  const setPageInfo = ({ url, title }: UrlDetail) => {
+  const setPageInfo = useMemoizedFn(({ url, title }: UrlDetail) => {
     document.title = title;
     setBrowserStore({ url, title });
-  };
+  });
 
-  const onDomReady = (e: unknown, info: UrlDetail) => {
+  const onDomReady = useMemoizedFn((e: unknown, info: UrlDetail) => {
     setPageInfo(info);
-  };
+  });
 
-  const onFailLoad = (e: unknown, data: { code: number; desc: string }) => {
-    setBrowserStore({
-      status: BrowserStatus.Failed,
-      errCode: data.code,
-      errMsg: data.desc,
-    });
-  };
+  const onFailLoad = useMemoizedFn(
+    (e: unknown, data: { code: number; desc: string }) => {
+      setBrowserStore({
+        status: BrowserStatus.Failed,
+        errCode: data.code,
+        errMsg: data.desc,
+      });
+    },
+  );
 
-  const onDidNavigate = (e: unknown, info: UrlDetail) => {
+  const onDidNavigate = useMemoizedFn((e: unknown, info: UrlDetail) => {
     setPageInfo(info);
     setBrowserStore({ status: BrowserStatus.Loaded });
-  };
+  });
 
-  const onDidNavigateInPage = (e: unknown, info: UrlDetail) => {
+  const onDidNavigateInPage = useMemoizedFn((e: unknown, info: UrlDetail) => {
     setPageInfo(info);
-  };
+  });
 
   useEffect(() => {
     document.title = store.title || document.title;
     return () => {
       document.title = originTitle.current;
     };
-  }, []);
+  }, [store.title]);
 
   return (
     <PageContainer
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cefe9c56..4a886bbe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -718,6 +718,9 @@ importers:
       eslint-plugin-react:
         specifier: ^7.34.3
         version: 7.34.3(eslint@8.57.0)
+      eslint-plugin-react-hooks:
+        specifier: ^4.6.2
+        version: 4.6.2(eslint@8.57.0)
       globals:
         specifier: ^15.3.0
         version: 15.3.0

From 31a1831344103ae4c4d6b256c68e4e0b36725230 Mon Sep 17 00:00:00 2001
From: caorushizi <84996057@qq.com>
Date: Fri, 3 Jan 2025 04:19:31 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E2=9C=A8=20=20video=20sniffing=20p?=
 =?UTF-8?q?age=20added=20one-click=20cleanup=20and=20one-click=20download?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/renderer/src/assets/svg/EditIcon.tsx | 13 +----
 .../renderer/src/components/ui/button.tsx     |  2 +-
 .../components/BrowserViewPanel.tsx           | 56 ++++++++++++++++---
 packages/renderer/src/store/browser.ts        |  7 +++
 4 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/packages/renderer/src/assets/svg/EditIcon.tsx b/packages/renderer/src/assets/svg/EditIcon.tsx
index 4916de49..3d32a3b3 100644
--- 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>
   );
 }
diff --git a/packages/renderer/src/components/ui/button.tsx b/packages/renderer/src/components/ui/button.tsx
index 205fec86..375be871 100644
--- a/packages/renderer/src/components/ui/button.tsx
+++ b/packages/renderer/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-[30px] px-3 py-1",
-        sm: "h-[20px] rounded-md px-1",
+        sm: "h-[20px] rounded-md px-1.5 text-xs",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
       },
diff --git a/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx b/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
index 9fb86ccb..bd047ddb 100644
--- a/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
+++ b/packages/renderer/src/pages/SourceExtract/components/BrowserViewPanel.tsx
@@ -1,24 +1,53 @@
-import { DeleteIcon } from "@/assets/svg";
-import { IconButton } from "@/components/IconButton";
 import { Button } from "@/components/ui/button";
 import useElectron from "@/hooks/useElectron";
 import {
   browserStoreSelector,
   setBrowserSelector,
+  SourceData,
   useBrowserStore,
 } from "@/store/browser";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useShallow } from "zustand/react/shallow";
+import { Button as AntdButton, App } from "antd";
+import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import { useMemoizedFn } from "ahooks";
 
 export function BrowserViewPanel() {
   const store = useBrowserStore(useShallow(browserStoreSelector));
-  const { deleteSource } = useBrowserStore(useShallow(setBrowserSelector));
+  const { deleteSource, clearSources } = useBrowserStore(
+    useShallow(setBrowserSelector),
+  );
   const { t } = useTranslation();
   const { showDownloadDialog } = useElectron();
+  const { downloadNow } = useElectron();
+  const { message } = App.useApp();
+
+  const handleClear = useMemoizedFn(() => {
+    clearSources();
+  });
+
+  const handleDownloadNow = useMemoizedFn(async (item: SourceData) => {
+    try {
+      const downloadItem: Omit<DownloadItem, "id"> = {
+        url: item.url,
+        name: item.name,
+        headers: item.headers,
+        type: item.type,
+      };
+      await downloadNow(downloadItem);
+    } catch (e) {
+      message.error((e as any).message);
+    }
+  });
 
   return (
     <div className="flex h-full flex-col gap-3 overflow-y-auto bg-white p-3 dark:bg-[#1F2024]">
+      <div>
+        <AntdButton size="small" danger onClick={handleClear}>
+          清空
+        </AntdButton>
+      </div>
       {store.sources.map((item, index) => {
         return (
           <div
@@ -38,14 +67,25 @@ export function BrowserViewPanel() {
               {item.url}
             </span>
             <div className="flex flex-row items-center justify-between gap-3">
-              <div>
-                <IconButton
-                  icon={<DeleteIcon />}
+              <div className="flex flex-row items-center gap-2">
+                <AntdButton
+                  icon={<DeleteOutlined />}
+                  type="text"
+                  size="small"
                   onClick={() => deleteSource(item.url)}
+                  title={t("delete")}
+                  danger
+                />
+                <AntdButton
+                  icon={<EditOutlined />}
+                  type="text"
+                  size="small"
+                  title={t("edit")}
+                  onClick={() => showDownloadDialog([item])}
                 />
               </div>
-              <Button size="sm" onClick={() => showDownloadDialog([item])}>
-                {t("addToDownloadList")}
+              <Button size="sm" onClick={() => handleDownloadNow(item)}>
+                {t("downloadNow")}
               </Button>
             </div>
           </div>
diff --git a/packages/renderer/src/store/browser.ts b/packages/renderer/src/store/browser.ts
index 92603dd2..80d3955c 100644
--- a/packages/renderer/src/store/browser.ts
+++ b/packages/renderer/src/store/browser.ts
@@ -4,6 +4,7 @@ import { convertPlainObject } from "@/utils";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
+// eslint-disable-next-line react-hooks/rules-of-hooks
 const { setSharedState } = useElectron();
 
 export enum PageMode {
@@ -42,6 +43,7 @@ type Actions = {
   addSource: (source: SourceData) => void;
   deleteSource: (url: string) => void;
   setSources: (sources: SourceData[]) => void;
+  clearSources: () => void;
 };
 
 export const useBrowserStore = create<BrowserStore & Actions>()(
@@ -68,6 +70,10 @@ export const useBrowserStore = create<BrowserStore & Actions>()(
       set((state) => {
         state.sources = sources;
       }),
+    clearSources: () =>
+      set((state) => {
+        state.sources = [];
+      }),
   })),
 );
 
@@ -89,5 +95,6 @@ export const setBrowserSelector = (state: BrowserStore & Actions) => {
     addSource: state.addSource,
     deleteSource: state.deleteSource,
     setSources: state.setSources,
+    clearSources: state.clearSources,
   };
 };