From e256314d4f9d6e7268ab5c4de1ecd0bc0d2a041c Mon Sep 17 00:00:00 2001
From: Gabe <yugang2002@gmail.com>
Date: Sat, 22 Nov 2025 18:15:07 +0800
Subject: [PATCH] fix: add context for setting provider

---
 src/hooks/Setting.js           | 22 ++++++++++------------
 src/hooks/Storage.js           |  5 ++---
 src/libs/browser.js            |  1 +
 src/libs/cache.js              |  2 +-
 src/popup.js                   |  2 +-
 src/views/Action/ContentFab.js |  2 +-
 src/views/Action/index.js      |  2 +-
 src/views/Options/index.js     |  2 +-
 src/views/Selection/TranBox.js |  2 +-
 9 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/hooks/Setting.js b/src/hooks/Setting.js
index 83312dd..2c61c10 100644
--- a/src/hooks/Setting.js
+++ b/src/hooks/Setting.js
@@ -25,17 +25,15 @@ const SettingContext = createContext({
   reloadSetting: () => {},
 });
 
-export function SettingProvider({ children, isSettingPage = false }) {
+export function SettingProvider({ children, context }) {
+  const isOptionsPage = useMemo(() => context === "options", [context]);
+
   const {
     data: setting,
     isLoading,
     update,
     reload,
-  } = useStorage(
-    STOKEY_SETTING,
-    DEFAULT_SETTING,
-    isSettingPage ? KV_SETTING_KEY : ""
-  );
+  } = useStorage(STOKEY_SETTING, DEFAULT_SETTING, KV_SETTING_KEY);
 
   useEffect(() => {
     if (typeof setting?.darkMode === "boolean") {
@@ -47,7 +45,7 @@ export function SettingProvider({ children, isSettingPage = false }) {
   }, [setting?.darkMode, update]);
 
   useEffect(() => {
-    if (!isSettingPage) return;
+    if (!isOptionsPage) return;
 
     (async () => {
       try {
@@ -59,7 +57,7 @@ export function SettingProvider({ children, isSettingPage = false }) {
         logger.error("Failed to fetch log level, using default.", error);
       }
     })();
-  }, [isSettingPage, setting?.logLevel]);
+  }, [isOptionsPage, setting?.logLevel]);
 
   const updateSetting = useCallback(
     (objOrFn) => {
@@ -81,21 +79,21 @@ export function SettingProvider({ children, isSettingPage = false }) {
 
   const value = useMemo(
     () => ({
-      isSettingPage,
+      context,
       setting,
       updateSetting,
       updateChild,
       reloadSetting: reload,
     }),
-    [isSettingPage, setting, updateSetting, updateChild, reload]
+    [context, setting, updateSetting, updateChild, reload]
   );
 
   if (isLoading) {
-    return isSettingPage ? <Loading /> : null;
+    return isOptionsPage ? <Loading /> : null;
   }
 
   if (!setting) {
-    return isSettingPage ? (
+    return isOptionsPage ? (
       <center>
         <Alert severity="error" sx={{ maxWidth: 600, margin: "60px auto" }}>
           <p>数据加载出错，请刷新页面或卸载后重新安装。</p>
diff --git a/src/hooks/Storage.js b/src/hooks/Storage.js
index a6b9c3f..f828ef2 100644
--- a/src/hooks/Storage.js
+++ b/src/hooks/Storage.js
@@ -3,7 +3,7 @@ import { storage } from "../libs/storage";
 import { kissLog } from "../libs/log";
 import { syncData } from "../libs/sync";
 import { useDebouncedCallback } from "./DebouncedCallback";
-import { getContext } from "../libs/browser";
+import { isOptions } from "../libs/browser";
 
 /**
  * 用于将组件状态与 Storage 同步
@@ -80,8 +80,7 @@ export function useStorage(key, defaultVal = null, syncKey = "") {
     });
 
     // 触发远端同步
-    const context = getContext();
-    if (syncKey && context === "options") {
+    if (syncKey && isOptions()) {
       debouncedSync(syncKey, data);
     }
   }, [key, syncKey, isLoading, data, debouncedSync]);
diff --git a/src/libs/browser.js b/src/libs/browser.js
index c6ad0bc..58d6340 100644
--- a/src/libs/browser.js
+++ b/src/libs/browser.js
@@ -37,6 +37,7 @@ export const getContext = () => {
 };
 
 export const isBg = () => getContext() === "background";
+export const isOptions = () => getContext() === "options";
 
 export const isBuiltinAIAvailable =
   "LanguageDetector" in globalThis && "Translator" in globalThis;
diff --git a/src/libs/cache.js b/src/libs/cache.js
index 2e30a6d..1527e50 100644
--- a/src/libs/cache.js
+++ b/src/libs/cache.js
@@ -16,7 +16,7 @@ import { blobToBase64 } from "./utils";
  */
 export const tryClearCaches = async () => {
   try {
-    if (isExt && !isBg) {
+    if (isExt && !isBg()) {
       await sendBgMsg(MSG_CLEAR_CACHES);
     } else {
       await caches.delete(CACHE_NAME);
diff --git a/src/popup.js b/src/popup.js
index 6c0c173..ed6229f 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -9,7 +9,7 @@ globalThis.__KISS_CONTEXT__ = "popup";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <SettingProvider>
+    <SettingProvider context="popup">
       <ThemeProvider>
         <Popup />
       </ThemeProvider>
diff --git a/src/views/Action/ContentFab.js b/src/views/Action/ContentFab.js
index 955145b..1cc5ff2 100644
--- a/src/views/Action/ContentFab.js
+++ b/src/views/Action/ContentFab.js
@@ -45,7 +45,7 @@ export default function ContentFab({
   );
 
   return (
-    <SettingProvider>
+    <SettingProvider context="fab">
       <ThemeProvider>
         <Draggable
           key="fab"
diff --git a/src/views/Action/index.js b/src/views/Action/index.js
index 3967a89..b73dfbe 100644
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -70,7 +70,7 @@ export default function Action({ translator, processActions }) {
   }, [windowSize]);
 
   return (
-    <SettingProvider>
+    <SettingProvider context="contentPopup">
       <ThemeProvider>
         {showPopup && (
           <Draggable
diff --git a/src/views/Options/index.js b/src/views/Options/index.js
index 9aeb4a8..f643250 100644
--- a/src/views/Options/index.js
+++ b/src/views/Options/index.js
@@ -99,7 +99,7 @@ export default function Options() {
   }
 
   return (
-    <SettingProvider isSettingPage={true}>
+    <SettingProvider context="options">
       <ThemeProvider>
         <AlertProvider>
           <ConfirmProvider>
diff --git a/src/views/Selection/TranBox.js b/src/views/Selection/TranBox.js
index 923c788..4a58731 100644
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -141,7 +141,7 @@ export default function TranBox({
   const [mouseHover, setMouseHover] = useState(false);
   // todo: 这里的 SettingProvider 不应和 background 的共用
   return (
-    <SettingProvider>
+    <SettingProvider context="tranbox">
       <ThemeProvider styles={extStyles}>
         {showBox && (
           <DraggableResizable