dev......

2023-08-31 00:18:57 +08:00
parent c46fe7d1c6
commit aa795e2731
21 changed files with 228 additions and 449 deletions
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -1,7 +1,6 @@
 import queryString from "query-string";
 import { fetchPolyfill } from "../libs/fetch";
 import {
-  GLOBAL_KEY,
  OPT_TRANS_GOOGLE,
  OPT_TRANS_MICROSOFT,
  OPT_TRANS_OPENAI,
@@ -11,9 +10,8 @@ import {
  PROMPT_PLACE_TO,
  KV_SALT_SYNC,
 } from "../config";
-import { detectLang } from "../libs/browser";
+import { detectLang } from "../libs";
 import { sha256 } from "../libs/utils";
-import { checkRules } from "../libs/rules";

 /**
 * 同步数据
@@ -39,13 +37,8 @@ export const apiSyncData = async (url, key, data, isBg = false) =>
 * @param {*} isBg
 * @returns
 */
-export const apiFetchRules = async (url, isBg = false) => {
-  const res = await fetchPolyfill(url, { isBg });
-  const rules = checkRules(res).filter(
-    (rule) => rule.pattern.replaceAll(GLOBAL_KEY, "") !== ""
-  );
-  return rules;
-};
+export const apiFetchRules = (url, isBg = false) =>
+  fetchPolyfill(url, { isBg });

 /**
 * 谷歌翻译
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -159,7 +159,7 @@ export const DEFAULT_SUBRULES_LIST = [
    selected: true,
  },
  {
-    url: "https://fishjar.github.io/kiss-translator/kiss-translator-rules.json",
+    url: process.env.REACT_APP_RULESURL2,
    selected: false,
  },
 ];
--- a/src/hooks/ColorMode.js
+++ b/src/hooks/ColorMode.js
@@ -13,7 +13,7 @@ export function useDarkMode() {

  const toggleDarkMode = useCallback(async () => {
    await updateSetting({ darkMode: !darkMode });
-  }, [darkMode]);
+  }, [darkMode, updateSetting]);

  return { darkMode, toggleDarkMode };
 }
--- a/src/hooks/Rules.js
+++ b/src/hooks/Rules.js
@@ -23,7 +23,7 @@ export function useRules() {
      await updateSync({ rulesUpdateAt: updateAt });
      trySyncRules();
    },
-    [rulesUpdateAt]
+    [rulesUpdateAt, save, updateSync]
  );

  const add = useCallback(
@@ -87,39 +87,3 @@ export function useRules() {

  return { list, add, del, put, merge };
 }
-
-// /**
-//  * 订阅规则
-//  * @returns
-//  */
-// export function useSubrules() {
-//   const setting = useSetting();
-//   const updateSetting = useSettingUpdate();
-//   const list = setting?.subrulesList || DEFAULT_SUBRULES_LIST;
-
-//   const select = async (url) => {
-//     const subrulesList = [...list];
-//     subrulesList.forEach((item) => {
-//       if (item.url === url) {
-//         item.selected = true;
-//       } else {
-//         item.selected = false;
-//       }
-//     });
-//     await updateSetting({ subrulesList });
-//   };
-
-//   const add = async (url) => {
-//     const subrulesList = [...list];
-//     subrulesList.push({ url });
-//     await updateSetting({ subrulesList });
-//   };
-
-//   const del = async (url) => {
-//     let subrulesList = [...list];
-//     subrulesList = subrulesList.filter((item) => item.url !== url);
-//     await updateSetting({ subrulesList });
-//   };
-
-//   return { list, select, add, del };
-// }
--- a/src/hooks/Setting.js
+++ b/src/hooks/Setting.js
@@ -23,7 +23,7 @@ export function SettingProvider({ children }) {
      await updateSync({ settingUpdateAt: updateAt });
      trySyncSetting();
    },
-    [settingUpdateAt]
+    [settingUpdateAt, update, updateSync]
  );

  return (
@@ -45,35 +45,3 @@ export function SettingProvider({ children }) {
 export function useSetting() {
  return useContext(SettingContext);
 }
-
-// export function useSetting() {
-//   const [setting,setSeting]= useState(null);
-//   useEffect(()=>{
-//     (async ()=>{
-//       const
-//     })()
-//   },[])
-// }
-
-// /**
-//  * 设置hook
-//  * @returns
-//  */
-// export function useSetting() {
-//   const storages = useStorages();
-//   return storages?.[STOKEY_SETTING];
-// }
-
-// /**
-//  * 更新设置
-//  * @returns
-//  */
-// export function useSettingUpdate() {
-//   const sync = useSync();
-//   return async (obj) => {
-//     const updateAt = sync.opt?.settingUpdateAt ? Date.now() : 0;
-//     await storage.putObj(STOKEY_SETTING, obj);
-//     await sync.update({ settingUpdateAt: updateAt });
-//     trySyncSetting();
-//   };
-// }
--- a/src/hooks/Storage.js
+++ b/src/hooks/Storage.js
@@ -33,83 +33,3 @@ export function useStorage(key, defaultVal = null) {

  return { data, save, update, remove };
 }
-
-// /**
-//  * 默认配置
-//  */
-// export const defaultStorage = {
-//   [STOKEY_SETTING]: DEFAULT_SETTING,
-//   [STOKEY_RULES]: DEFAULT_RULES,
-//   [STOKEY_SYNC]: DEFAULT_SYNC,
-// };
-
-// const activeKeys = Object.keys(defaultStorage);
-
-// const StoragesContext = createContext(null);
-
-// export function StoragesProvider({ children }) {
-//   const [storages, setStorages] = useState(null);
-
-//   const handleChanged = (changes) => {
-//     if (isWeb || isGm) {
-//       const { key, oldValue, newValue } = changes;
-//       changes = {
-//         [key]: {
-//           oldValue,
-//           newValue,
-//         },
-//       };
-//     }
-//     const newStorages = {};
-//     Object.entries(changes)
-//       .filter(
-//         ([key, { oldValue, newValue }]) =>
-//           activeKeys.includes(key) && oldValue !== newValue
-//       )
-//       .forEach(([key, { newValue }]) => {
-//         newStorages[key] = JSON.parse(newValue);
-//       });
-//     if (Object.keys(newStorages).length !== 0) {
-//       setStorages((pre) => ({ ...pre, ...newStorages }));
-//     }
-//   };
-
-//   useEffect(() => {
-//     // 首次从storage同步配置到内存
-//     (async () => {
-//       const curStorages = {};
-//       for (const key of activeKeys) {
-//         const val = await storage.get(key);
-//         if (val) {
-//           curStorages[key] = JSON.parse(val);
-//         } else {
-//           await storage.setObj(key, defaultStorage[key]);
-//           curStorages[key] = defaultStorage[key];
-//         }
-//       }
-//       setStorages(curStorages);
-//     })();
-
-//     // 监听storage，并同步到内存中
-//     storage.onChanged(handleChanged);
-
-//     // 解除监听
-//     return () => {
-//       if (isExt) {
-//         browser.storage.onChanged.removeListener(handleChanged);
-//       } else {
-//         window.removeEventListener("storage", handleChanged);
-//       }
-//     };
-//   }, []);
-
-//   return (
-//     <StoragesContext.Provider value={storages}>
-//       {children}
-//     </StoragesContext.Provider>
-//   );
-// }
-
-// export function useStorages() {
-//   return useContext(StoragesContext);
-// }
--- a/src/hooks/SubRules.js
+++ b/src/hooks/SubRules.js
@@ -1,47 +1,81 @@
 import { DEFAULT_SUBRULES_LIST } from "../config";
 import { useSetting } from "./Setting";
-import { useCallback } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { loadOrFetchSubRules } from "../libs/subRules";
+import { delSubRules } from "../libs/storage";

 /**
 * 订阅规则
 * @returns
 */
 export function useSubRules() {
-  const { data: setting, update: updateSetting } = useSetting();
-  const list = setting?.subRulesList || DEFAULT_SUBRULES_LIST;
+  const [loading, setLoading] = useState(false);
+  const [selectedRules, setSelectedRules] = useState([]);
+  const { setting, updateSetting } = useSetting();
+  const list = setting?.subrulesList || DEFAULT_SUBRULES_LIST;

-  const select = useCallback(
+  const selectedSub = useMemo(() => list.find((item) => item.selected), [list]);
+  const selectedUrl = selectedSub.url;
+
+  const selectSub = useCallback(
    async (url) => {
-      const subRulesList = [...list];
-      subRulesList.forEach((item) => {
+      const subrulesList = [...list];
+      subrulesList.forEach((item) => {
        if (item.url === url) {
          item.selected = true;
        } else {
          item.selected = false;
        }
      });
-      await updateSetting({ subRulesList });
+      await updateSetting({ subrulesList });
    },
-    [list]
+    [list, updateSetting]
  );

-  const add = useCallback(
+  const addSub = useCallback(
    async (url) => {
-      const subRulesList = [...list];
-      subRulesList.push({ url, selected: false });
-      await updateSetting({ subRulesList });
+      const subrulesList = [...list];
+      subrulesList.push({ url, selected: false });
+      await updateSetting({ subrulesList });
    },
-    [list]
+    [list, updateSetting]
  );

-  const del = useCallback(
+  const delSub = useCallback(
    async (url) => {
-      let subRulesList = [...list];
-      subRulesList = subRulesList.filter((item) => item.url !== url);
-      await updateSetting({ subRulesList });
+      let subrulesList = [...list];
+      subrulesList = subrulesList.filter((item) => item.url !== url);
+      await updateSetting({ subrulesList });
+      await delSubRules(url);
    },
-    [list]
+    [list, updateSetting]
  );

-  return { list, select, add, del };
+  useEffect(() => {
+    (async () => {
+      if (selectedUrl) {
+        try {
+          setLoading(true);
+          const rules = await loadOrFetchSubRules(selectedUrl);
+          setSelectedRules(rules);
+        } catch (err) {
+          console.log("[loadOrFetchSubRules]", err);
+        } finally {
+          setLoading(false);
+        }
+      }
+    })();
+  }, [selectedUrl]);
+
+  return {
+    subList: list,
+    selectSub,
+    addSub,
+    delSub,
+    selectedSub,
+    selectedUrl,
+    selectedRules,
+    setSelectedRules,
+    loading,
+  };
 }
--- a/src/hooks/Sync.js
+++ b/src/hooks/Sync.js
@@ -9,14 +9,3 @@ export function useSync() {
  const { data, update } = useStorage(STOKEY_SYNC, DEFAULT_SYNC);
  return { sync: data, updateSync: update };
 }
-// export function useSync() {
-//   const storages = useStorages();
-//   const opt = storages?.[STOKEY_SYNC];
-//   const update = useCallback(async (obj) => {
-//     await storage.putObj(STOKEY_SYNC, obj);
-//   }, []);
-//   return {
-//     opt,
-//     update,
-//   };
-// }
--- a/src/hooks/Translate.js
+++ b/src/hooks/Translate.js
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useState } from "react";
-import { detectLang } from "../libs/browser";
+import { detectLang } from "../libs";
 import { apiTranslate } from "../apis";

 /**
--- a/src/libs/auth.js
+++ b/src/libs/auth.js
@@ -1,5 +1,5 @@
-import storage from "./storage";
-import { STOKEY_MSAUTH, URL_MICROSOFT_AUTH } from "../config";
+import { getMsauth, setMsauth } from "./storage";
+import { URL_MICROSOFT_AUTH } from "../config";
 import { fetchData } from "./fetch";

 const parseMSToken = (token) => {
@@ -26,9 +26,9 @@ const _msAuth = () => {
    }

    // 查询storage缓存
-    const res = (await storage.getObj(STOKEY_MSAUTH)) || {};
-    token = res.token;
-    exp = res.exp;
+    const res = await getMsauth();
+    token = res?.token;
+    exp = res?.exp;
    if (token && exp * 1000 > now + 1000) {
      return [token, exp];
    }
@@ -36,7 +36,7 @@ const _msAuth = () => {
    // 缓存没有或失效，查询接口
    token = await fetchData(URL_MICROSOFT_AUTH);
    exp = parseMSToken(token);
-    await storage.setObj(STOKEY_MSAUTH, { token, exp });
+    await setMsauth({ token, exp });
    return [token, exp];
  };
 };
--- a/src/libs/browser.js
+++ b/src/libs/browser.js
@@ -13,21 +13,3 @@ function _browser() {
 }

 export const browser = _browser();
-// export const client = process.env.REACT_APP_CLIENT;
-// export const isExt = CLIENT_EXTS.includes(client);
-// export const isGm = client === CLIENT_USERSCRIPT;
-// export const isWeb = client === CLIENT_WEB;
-
-/**
- * 本地语言识别
- * @param {*} q
- * @returns
- */
-export const detectLang = async (q) => {
-  try {
-    const res = await browser?.i18n?.detectLanguage(q);
-    return res?.languages?.[0]?.language;
-  } catch (err) {
-    console.log("[detect lang]", err);
-  }
-};
--- a/src/libs/index.js
+++ b/src/libs/index.js
@@ -1,4 +1,5 @@
 import { CACHE_NAME } from "../config";
+import { browser } from "./browser";

 /**
 * 清除缓存数据
@@ -10,3 +11,17 @@ export const tryClearCaches = async () => {
    console.log("[clean caches]", err.message);
  }
 };
+
+/**
+ * 本地语言识别
+ * @param {*} q
+ * @returns
+ */
+export const detectLang = async (q) => {
+  try {
+    const res = await browser?.i18n?.detectLanguage(q);
+    return res?.languages?.[0]?.language;
+  } catch (err) {
+    console.log("[detect lang]", err);
+  }
+};
--- a/src/libs/rules.js
+++ b/src/libs/rules.js
@@ -1,12 +1,3 @@
-import {
-  getSyncWithDefault,
-  updateSync,
-  getSubRulesWithDefault,
-  getSubRules,
-  delSubRules,
-  setSubRules,
-} from "./storage";
-import { fetchPolyfill } from "./fetch";
 import { matchValue, type, isMatch } from "./utils";
 import {
  GLOBAL_KEY,
@@ -17,8 +8,7 @@ import {
  GLOBLA_RULE,
  DEFAULT_SUBRULES_LIST,
 } from "../config";
-
-// import { syncOpt } from "./sync";
+import { loadOrFetchSubRules } from "./subRules";

 /**
 * 根据href匹配规则
@@ -36,7 +26,7 @@ export const matchRule = async (
    try {
      const selectedSub = subrulesList.find((item) => item.selected);
      if (selectedSub?.url) {
-        const subRules = await loadSubRules(selectedSub.url);
+        const subRules = await loadOrFetchSubRules(selectedSub.url);
        rules.splice(-1, 0, ...subRules);
      }
    } catch (err) {
@@ -123,19 +113,3 @@ export const checkRules = (rules) => {

  return rules;
 };
-
-// /**
-//  * 订阅规则的本地缓存
-//  */
-// export const rulesCache = {
-//   fetch: async (url, isBg = false) => {
-//     const res = await fetchPolyfill(url, { isBg });
-//     const rules = checkRules(res).filter(
-//       (rule) => rule.pattern.replaceAll(GLOBAL_KEY, "") !== ""
-//     );
-//     return rules;
-//   },
-//   set: (url, rules) => setSubRules(url, rules),
-//   get: (url) => getSubRulesWithDefault(url),
-//   del: (url) => delSubRules(url),
-// };
--- a/src/libs/storage.js
+++ b/src/libs/storage.js
@@ -10,32 +10,16 @@ import {
  DEFAULT_SYNC,
  BUILTIN_RULES,
 } from "../config";
-import { browser, isExt, isGm } from "./client";
-// import { APP_NAME } from "../config/app";
+import { isExt, isGm } from "./client";
+import { browser } from "./browser";

 async function set(key, val) {
  if (isExt) {
    await browser.storage.local.set({ [key]: val });
  } else if (isGm) {
-    // const oldValue = await (window.KISS_GM || GM).getValue(key);
    await (window.KISS_GM || GM).setValue(key, val);
-    // window.dispatchEvent(
-    //   new StorageEvent("storage", {
-    //     key,
-    //     oldValue,
-    //     newValue: val,
-    //   })
-    // );
  } else {
-    // const oldValue = window.localStorage.getItem(key);
    window.localStorage.setItem(key, val);
-    // window.dispatchEvent(
-    //   new StorageEvent("storage", {
-    //     key,
-    //     oldValue,
-    //     newValue: val,
-    //   })
-    // );
  }
 }

@@ -54,25 +38,9 @@ async function del(key) {
  if (isExt) {
    await browser.storage.local.remove([key]);
  } else if (isGm) {
-    // const oldValue = await (window.KISS_GM || GM).getValue(key);
    await (window.KISS_GM || GM).deleteValue(key);
-    // window.dispatchEvent(
-    //   new StorageEvent("storage", {
-    //     key,
-    //     oldValue,
-    //     newValue: null,
-    //   })
-    // );
  } else {
-    // const oldValue = window.localStorage.getItem(key);
    window.localStorage.removeItem(key);
-    // window.dispatchEvent(
-    //   new StorageEvent("storage", {
-    //     key,
-    //     oldValue,
-    //     newValue: null,
-    //   })
-    // );
  }
 }

@@ -96,18 +64,6 @@ async function putObj(key, obj) {
  await setObj(key, { ...cur, ...obj });
 }

-// /**
-//  * 监听storage事件
-//  * @param {*} handleChanged
-//  */
-// function onChanged(handleChanged) {
-//   if (isExt) {
-//     browser.storage.onChanged.addListener(handleChanged);
-//   } else {
-//     window.addEventListener("storage", handleChanged);
-//   }
-// }
-
 /**
 * 对storage的封装
 */
--- a/src/libs/subRules.js
+++ b/src/libs/subRules.js
@@ -1,5 +1,12 @@
-import { getSyncWithDefault, updateSync } from "./storage";
+import { GLOBAL_KEY } from "../config";
+import {
+  getSyncWithDefault,
+  updateSync,
+  setSubRules,
+  getSubRules,
+} from "./storage";
 import { apiFetchRules } from "../apis";
+import { checkRules } from "./rules";

 /**
 * 同步订阅规则
@@ -7,9 +14,12 @@ import { apiFetchRules } from "../apis";
 * @returns
 */
 export const syncSubRules = async (url, isBg = false) => {
-  const rules = await apiFetchRules(url, isBg);
+  const res = await apiFetchRules(url, isBg);
+  const rules = checkRules(res).filter(
+    (rule) => rule.pattern.replaceAll(GLOBAL_KEY, "") !== ""
+  );
  if (rules.length > 0) {
-    await rulesCache.set(url, rules);
+    await setSubRules(url, rules);
  }
  return rules;
 };
@@ -54,7 +64,7 @@ export const trySyncAllSubRules = async ({ subrulesList }, isBg = false) => {
 * @returns
 */
 export const loadOrFetchSubRules = async (url) => {
-  const rules = await apiFetchRules(url);
+  const rules = await getSubRules(url);
  if (rules?.length) {
    return rules;
  }
--- a/src/libs/sync.js
+++ b/src/libs/sync.js
@@ -1,28 +1,20 @@
 import {
-  STOKEY_SYNC,
-  DEFAULT_SYNC,
  KV_SETTING_KEY,
  KV_RULES_KEY,
  KV_RULES_SHARE_KEY,
-  STOKEY_SETTING,
-  STOKEY_RULES,
  KV_SALT_SHARE,
 } from "../config";
-import { storage, getSyncWithDefault, updateSync } from "../libs/storage";
-import { getSetting, getRules } from ".";
+import {
+  getSyncWithDefault,
+  updateSync,
+  getSettingWithDefault,
+  getRulesWithDefault,
+  setSetting,
+  setRules,
+} from "./storage";
 import { apiSyncData } from "../apis";
 import { sha256 } from "./utils";

-// /**
-//  * 同步相关数据
-//  */
-// export const syncOpt = {
-//   load: async () => (await storage.getObj(STOKEY_SYNC)) || DEFAULT_SYNC,
-//   update: async (obj) => {
-//     await storage.putObj(STOKEY_SYNC, obj);
-//   },
-// };
-
 /**
 * 同步设置
 * @returns
@@ -33,7 +25,7 @@ const syncSetting = async (isBg = false) => {
    return;
  }

-  const setting = await getSetting();
+  const setting = await getSettingWithDefault();
  const res = await apiSyncData(
    syncUrl,
    syncKey,
@@ -50,7 +42,7 @@ const syncSetting = async (isBg = false) => {
      settingUpdateAt: res.updateAt,
      settingSyncAt: res.updateAt,
    });
-    await storage.setObj(STOKEY_SETTING, res.value);
+    await setSetting(res.value);
  } else {
    await updateSync({ settingSyncAt: res.updateAt });
  }
@@ -74,7 +66,7 @@ const syncRules = async (isBg = false) => {
    return;
  }

-  const rules = await getRules();
+  const rules = await getRulesWithDefault();
  const res = await apiSyncData(
    syncUrl,
    syncKey,
@@ -91,7 +83,7 @@ const syncRules = async (isBg = false) => {
      rulesUpdateAt: res.updateAt,
      rulesSyncAt: res.updateAt,
    });
-    await storage.setObj(STOKEY_RULES, res.value);
+    await setRules(res.value);
  } else {
    await updateSync({ rulesSyncAt: res.updateAt });
  }
--- a/src/libs/translator.js
+++ b/src/libs/translator.js
@@ -12,7 +12,6 @@ import {
 import Content from "../views/Content";
 import { fetchUpdate, fetchClear } from "./fetch";
 import { debounce } from "./utils";
-import { isExt } from "./client";

 /**
 * 翻译类
@@ -102,6 +101,10 @@ export class Translator {
    }
  }

+  get setting() {
+    return this._setting;
+  }
+
  get rule() {
    // console.log("get rule", this._rule);
    return this._rule;
--- a/src/userscript.js
+++ b/src/userscript.js
@@ -3,13 +3,14 @@ import ReactDOM from "react-dom/client";
 import Action from "./views/Action";
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { getSetting, getRules, matchRule, getFab } from "./libs";
+import { getSettingWithDefault, getRulesWithDefault,  getFabWithDefault } from "./libs/storage";
 import { Translator } from "./libs/translator";
 import { trySyncAllSubRules } from "./libs/subRules";
 import { isGm } from "./libs/client";
 import { MSG_TRANS_TOGGLE, MSG_TRANS_PUTRULE } from "./config";
 import { isIframe } from "./libs/iframe";
 import { handlePing, injectScript } from "./libs/gm";
+import { matchRule } from "./libs/rules";

 /**
 * 入口函数
@@ -36,8 +37,8 @@ const init = async () => {

  // 翻译页面
  const href = isIframe ? document.referrer : document.location.href;
-  const setting = await getSetting();
-  const rules = await getRules();
+  const setting = await getSettingWithDefault();
+  const rules = await getRulesWithDefault();
  const rule = await matchRule(rules, href, setting);
  const translator = new Translator(rule, setting);

@@ -59,7 +60,7 @@ const init = async () => {
  }

  // 浮球按钮
-  const fab = await getFab();
+  const fab = await getFabWithDefault();
  const $action = document.createElement("div");
  $action.setAttribute("id", "kiss-translator");
  document.body.parentElement.appendChild($action);
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -24,7 +24,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
-import { useSetting, useSettingUpdate } from "../../hooks/Setting";
+import { useSetting } from "../../hooks/Setting";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import Tabs from "@mui/material/Tabs";
@@ -35,11 +35,13 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import IconButton from "@mui/material/IconButton";
 import ShareIcon from "@mui/icons-material/Share";
 import SyncIcon from "@mui/icons-material/Sync";
-import { useSubrules } from "../../hooks/Rules";
-import { rulesCache, loadSubRules, syncSubRules } from "../../libs/rules";
+import { useSubRules } from "../../hooks/SubRules";
+import { syncSubRules } from "../../libs/subRules";
+import { loadOrFetchSubRules } from "../../libs/subRules";
 import { useAlert } from "../../hooks/Alert";
-import { syncOpt, syncShareRules } from "../../libs/sync";
+import { syncShareRules } from "../../libs/sync";
 import { debounce } from "../../libs/utils";
+import { delSubRules, getSyncWithDefault } from "../../libs/storage";

 function RuleFields({ rule, rules, setShow, setKeyword }) {
  const initFormValues = rule || { ...DEFAULT_RULE, transOpen: "true" };
@@ -409,12 +411,12 @@ function UploadButton({ onChange, text }) {
  );
 }

-function ShareButton({ rules, injectRules, selectedSub }) {
+function ShareButton({ rules, injectRules, selectedUrl }) {
  const alert = useAlert();
  const i18n = useI18n();
  const handleClick = async () => {
    try {
-      const { syncUrl, syncKey } = await syncOpt.load();
+      const { syncUrl, syncKey } = await getSyncWithDefault();
      if (!syncUrl || !syncKey) {
        alert.warning(i18n("error_sync_setting"));
        return;
@@ -422,7 +424,7 @@ function ShareButton({ rules, injectRules, selectedSub }) {

      const shareRules = [...rules.list];
      if (injectRules) {
-        const subRules = await loadSubRules(selectedSub?.url);
+        const subRules = await loadOrFetchSubRules(selectedUrl);
        shareRules.splice(-1, 0, ...subRules);
      }

@@ -451,19 +453,15 @@ function ShareButton({ rules, injectRules, selectedSub }) {
  );
 }

-function UserRules() {
+function UserRules({ subRules }) {
  const i18n = useI18n();
  const rules = useRules();
  const [showAdd, setShowAdd] = useState(false);
-  const setting = useSetting();
-  const updateSetting = useSettingUpdate();
-  const subrules = useSubrules();
-  const [subRules, setSubRules] = useState([]);
+  const { setting, updateSetting } = useSetting();
  const [keyword, setKeyword] = useState("");

-  const selectedSub = subrules.list.find((item) => item.selected);
-
  const injectRules = !!setting?.injectRules;
+  const { selectedUrl, selectedRules } = subRules;

  const handleImport = (e) => {
    const file = e.target.files[0];
@@ -493,19 +491,6 @@ function UserRules() {
    });
  };

-  useEffect(() => {
-    (async () => {
-      if (selectedSub?.url) {
-        try {
-          const rules = await loadSubRules(selectedSub?.url);
-          setSubRules(rules);
-        } catch (err) {
-          console.log("[load rules]", err);
-        }
-      }
-    })();
-  }, [selectedSub?.url]);
-
  useEffect(() => {
    if (!showAdd) {
      setKeyword("");
@@ -514,7 +499,13 @@ function UserRules() {

  return (
    <Stack spacing={3}>
-      <Stack direction="row" alignItems="center" spacing={2} useFlexGap flexWrap="wrap">
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={2}
+        useFlexGap
+        flexWrap="wrap"
+      >
        <Button
          size="small"
          variant="contained"
@@ -536,7 +527,7 @@ function UserRules() {
        <ShareButton
          rules={rules}
          injectRules={injectRules}
-          selectedSub={selectedSub}
+          selectedUrl={selectedUrl}
        />

        <FormControlLabel
@@ -572,7 +563,7 @@ function UserRules() {

      {injectRules && (
        <Box>
-          {subRules
+          {selectedRules
            .filter(
              (rule) =>
                rule.pattern.includes(keyword) || keyword.includes(rule.pattern)
@@ -586,13 +577,13 @@ function UserRules() {
  );
 }

-function SubRulesItem({ index, url, selectedUrl, subrules, setRules }) {
+function SubRulesItem({ index, url, selectedUrl, delSub, setSelectedRules }) {
  const [loading, setLoading] = useState(false);

  const handleDel = async () => {
    try {
-      await subrules.del(url);
-      await rulesCache.del(url);
+      await delSub(url);
+      await delSubRules(url);
    } catch (err) {
      console.log("[del subrules]", err);
    }
@@ -603,7 +594,7 @@ function SubRulesItem({ index, url, selectedUrl, subrules, setRules }) {
      setLoading(true);
      const rules = await syncSubRules(url);
      if (rules.length > 0 && url === selectedUrl) {
-        setRules(rules);
+        setSelectedRules(rules);
      }
    } catch (err) {
      console.log("[sync sub rules]", err);
@@ -633,7 +624,7 @@ function SubRulesItem({ index, url, selectedUrl, subrules, setRules }) {
  );
 }

-function SubRulesEdit({ subrules }) {
+function SubRulesEdit({ subList, addSub }) {
  const i18n = useI18n();
  const [inputText, setInputText] = useState("");
  const [inputError, setInputError] = useState("");
@@ -656,7 +647,7 @@ function SubRulesEdit({ subrules }) {
      return;
    }

-    if (subrules.list.find((item) => item.url === url)) {
+    if (subList.find((item) => item.url === url)) {
      setInputError(i18n("error_duplicate_values"));
      return;
    }
@@ -667,7 +658,7 @@ function SubRulesEdit({ subrules }) {
      if (rules.length === 0) {
        throw new Error("empty rules");
      }
-      await subrules.add(url);
+      await addSub(url);
      setShowInput(false);
      setInputText("");
    } catch (err) {
@@ -735,47 +726,36 @@ function SubRulesEdit({ subrules }) {
  );
 }

-function SubRules() {
-  const [loading, setLoading] = useState(false);
-  const [rules, setRules] = useState([]);
-  const subrules = useSubrules();
-  const selectedSub = subrules.list.find((item) => item.selected);
+function SubRules({ subRules }) {
+  const {
+    subList,
+    selectSub,
+    addSub,
+    delSub,
+    selectedUrl,
+    selectedRules,
+    setSelectedRules,
+    loading,
+  } = subRules;

  const handleSelect = (e) => {
    const url = e.target.value;
-    subrules.select(url);
+    selectSub(url);
  };

-  useEffect(() => {
-    (async () => {
-      if (selectedSub?.url) {
-        try {
-          setLoading(true);
-
-          const rules = await loadSubRules(selectedSub?.url);
-          setRules(rules);
-        } catch (err) {
-          console.log("[load rules]", err);
-        } finally {
-          setLoading(false);
-        }
-      }
-    })();
-  }, [selectedSub?.url]);
-
  return (
    <Stack spacing={3}>
-      <SubRulesEdit subrules={subrules} />
+      <SubRulesEdit subList={subList} addSub={addSub} />

-      <RadioGroup value={selectedSub?.url} onChange={handleSelect}>
-        {subrules.list.map((item, index) => (
+      <RadioGroup value={selectedUrl} onChange={handleSelect}>
+        {subList.map((item, index) => (
          <SubRulesItem
            key={item.url}
            url={item.url}
            index={index}
-            selectedUrl={selectedSub?.url}
-            subrules={subrules}
-            setRules={setRules}
+            selectedUrl={selectedUrl}
+            delSub={delSub}
+            setSelectedRules={setSelectedRules}
          />
        ))}
      </RadioGroup>
@@ -786,7 +766,9 @@ function SubRules() {
            <CircularProgress />
          </center>
        ) : (
-          rules.map((rule) => <RuleAccordion key={rule.pattern} rule={rule} />)
+          selectedRules.map((rule) => (
+            <RuleAccordion key={rule.pattern} rule={rule} />
+          ))
        )}
      </Box>
    </Stack>
@@ -796,6 +778,7 @@ function SubRules() {
 export default function Rules() {
  const i18n = useI18n();
  const [activeTab, setActiveTab] = useState(0);
+  const subRules = useSubRules();

  const handleTabChange = (e, newValue) => {
    setActiveTab(newValue);
@@ -816,8 +799,12 @@ export default function Rules() {
            <Tab label={i18n("subscribe_rules")} />
          </Tabs>
        </Box>
-        <div hidden={activeTab !== 0}>{activeTab === 0 && <UserRules />}</div>
-        <div hidden={activeTab !== 1}>{activeTab === 1 && <SubRules />}</div>
+        <div hidden={activeTab !== 0}>
+          {activeTab === 0 && <UserRules subRules={subRules} />}
+        </div>
+        <div hidden={activeTab !== 1}>
+          {activeTab === 1 && <SubRules subRules={subRules} />}
+        </div>
      </Stack>
    </Box>
  );
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -6,18 +6,15 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
 import { useSetting } from "../../hooks/Setting";
-import { limitNumber, debounce } from "../../libs/utils";
+import { limitNumber } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
 import { UI_LANGS } from "../../config";
-import { useMemo } from "react";

 export default function Settings() {
  const i18n = useI18n();
  const { setting, updateSetting } = useSetting();

-  const handleChange = useMemo(
-    () =>
-      debounce((e) => {
+  const handleChange = (e) => {
    e.preventDefault();
    let { name, value } = e.target;
    switch (name) {
@@ -38,9 +35,7 @@ export default function Settings() {
    updateSetting({
      [name]: value,
    });
-      }, 500),
-    [updateSetting]
-  );
+  };

  if (!setting) {
    return;
@@ -84,7 +79,7 @@ export default function Settings() {
          label={i18n("fetch_limit")}
          type="number"
          name="fetchLimit"
-          defaultValue={fetchLimit}
+          value={fetchLimit}
          onChange={handleChange}
        />

@@ -93,7 +88,7 @@ export default function Settings() {
          label={i18n("fetch_interval")}
          type="number"
          name="fetchInterval"
-          defaultValue={fetchInterval}
+          value={fetchInterval}
          onChange={handleChange}
        />

@@ -102,7 +97,7 @@ export default function Settings() {
          label={i18n("min_translate_length")}
          type="number"
          name="minLength"
-          defaultValue={minLength}
+          value={minLength}
          onChange={handleChange}
        />

@@ -111,7 +106,7 @@ export default function Settings() {
          label={i18n("max_translate_length")}
          type="number"
          name="maxLength"
-          defaultValue={maxLength}
+          value={maxLength}
          onChange={handleChange}
        />

@@ -132,7 +127,7 @@ export default function Settings() {
          size="small"
          label={i18n("google_api")}
          name="googleUrl"
-          defaultValue={googleUrl}
+          value={googleUrl}
          onChange={handleChange}
        />

@@ -140,7 +135,7 @@ export default function Settings() {
          size="small"
          label={i18n("openai_api")}
          name="openaiUrl"
-          defaultValue={openaiUrl}
+          value={openaiUrl}
          onChange={handleChange}
        />

@@ -149,7 +144,7 @@ export default function Settings() {
          type="password"
          label={i18n("openai_key")}
          name="openaiKey"
-          defaultValue={openaiKey}
+          value={openaiKey}
          onChange={handleChange}
        />

@@ -157,7 +152,7 @@ export default function Settings() {
          size="small"
          label={i18n("openai_model")}
          name="openaiModel"
-          defaultValue={openaiModel}
+          value={openaiModel}
          onChange={handleChange}
        />

@@ -165,7 +160,7 @@ export default function Settings() {
          size="small"
          label={i18n("openai_prompt")}
          name="openaiPrompt"
-          defaultValue={openaiPrompt}
+          value={openaiPrompt}
          onChange={handleChange}
          multiline
        />
--- a/src/views/Options/SyncSetting.js
+++ b/src/views/Options/SyncSetting.js
@@ -6,8 +6,7 @@ import { useSync } from "../../hooks/Sync";
 import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
 import { URL_KISS_WORKER } from "../../config";
-import { debounce } from "../../libs/utils";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { syncAll } from "../../libs/sync";
 import Button from "@mui/material/Button";
 import { useAlert } from "../../hooks/Alert";
@@ -16,22 +15,17 @@ import CircularProgress from "@mui/material/CircularProgress";

 export default function SyncSetting() {
  const i18n = useI18n();
-  const sync = useSync();
+  const { sync, updateSync } = useSync();
  const alert = useAlert();
  const [loading, setLoading] = useState(false);

-  const handleChange = useMemo(
-    () =>
-      debounce(async (e) => {
+  const handleChange = async (e) => {
    e.preventDefault();
    const { name, value } = e.target;
-        await sync.update({
+    await updateSync({
      [name]: value,
    });
-        // trySyncAll();
-      }, 500),
-    [sync]
-  );
+  };

  const handleSyncTest = async (e) => {
    e.preventDefault();
@@ -47,11 +41,7 @@ export default function SyncSetting() {
    }
  };

-  if (!sync.opt) {
-    return;
-  }
-
-  const { syncUrl, syncKey } = sync.opt;
+  const { syncUrl, syncKey } = sync;

  return (
    <Box>
@@ -62,7 +52,7 @@ export default function SyncSetting() {
          size="small"
          label={i18n("data_sync_url")}
          name="syncUrl"
-          defaultValue={syncUrl}
+          value={syncUrl}
          onChange={handleChange}
          helperText={
            <Link href={URL_KISS_WORKER}>{i18n("about_sync_api")}</Link>
@@ -74,11 +64,17 @@ export default function SyncSetting() {
          type="password"
          label={i18n("data_sync_key")}
          name="syncKey"
-          defaultValue={syncKey}
+          value={syncKey}
          onChange={handleChange}
        />

-        <Stack direction="row" alignItems="center" spacing={2} useFlexGap flexWrap="wrap">
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={2}
+          useFlexGap
+          flexWrap="wrap"
+        >
          <Button
            size="small"
            variant="contained"