feat: support auto record history

src/pages/background/core/rules.ts

@@ -1,10 +1,11 @@
 import { cloneDeep } from 'lodash-es';
 import { convertToRule, convertToBasicRule, isMatchUrl, upgradeRuleFormat, initRule } from '@/share/core/rule-utils';
 import { getLocal } from '@/share/core/storage';
-import { getTableName } from '@/share/core/utils';
-import { APIs, EVENTs, IS_MATCH, TABLE_NAMES, TABLE_NAMES_ARR } from '@/share/core/constant';
-import type { InitdRule, Rule, RuleFilterOptions } from '@/share/core/types';
+import { getTableName, getVirtualKey } from '@/share/core/utils';
+import { APIs, EVENTs, IS_MATCH, RULE_TYPE, TABLE_NAMES, TABLE_NAMES_ARR } from '@/share/core/constant';
+import type { InitdRule, RULE_ACTION_OBJ, Rule, RuleFilterOptions } from '@/share/core/types';
 import notify from '@/share/core/notify';
+import { prefs } from '@/share/core/prefs';
 import { getDatabase } from './db';
 
 const cache: { [key: string]: null | InitdRule[] } = {};
@@ -121,6 +122,19 @@ async function save(o: Rule) {
           req.onsuccess = () => {
             updateCache(tableName);
             notify.other({ method: APIs.ON_EVENT, event: EVENTs.RULE_UPDATE, from: originalRule, target: existsRule });
+            // Write history
+            if (prefs.get('rule-history') && [RULE_TYPE.MODIFY_RECV_HEADER, RULE_TYPE.MODIFY_SEND_HEADER, RULE_TYPE.REDIRECT].includes(o.ruleType)) {
+              const writeValue = o.ruleType === RULE_TYPE.REDIRECT ? o.action : (o.action as RULE_ACTION_OBJ).value;
+              const key = `rule_switch_${getVirtualKey(o)}`;
+              const engine = getLocal();
+              engine.get(key).then((result) => {
+                const arr = Array.isArray(result[key]) ? [...result[key]] : [];
+                if (!arr.includes(writeValue)) {
+                  arr.push(writeValue);
+                  engine.set({ [key]: arr });
+                }
+              });
+            }
             resolve(rule);
           };
         };

src/pages/options/sections/options/index.tsx

@@ -22,6 +22,8 @@ const checkPrefs: { [key: string]: string } = {
   'include-headers': t('include_header_in_custom_function'),
   'modify-body': t('modify_body'),
   'is-debug': t('debug_mode_enable'),
+  'rule-switch': t('rule-switch'),
+  'rule-history': t('rule-history'),
 };
 
 interface SelectItem {

src/share/components/rule-content-switcher.tsx

@@ -9,6 +9,7 @@ import useStorage from '@/share/hooks/use-storage';
 import Api from '@/share/pages/api';
 import { getVirtualKey, t } from '@/share/core/utils';
 import { Toast } from '@/share/pages/toast';
+import useOption from '../hooks/use-option';
 import type { DropdownProps } from '@douyinfe/semi-ui/lib/es/dropdown';
 
 interface RuleContentSwitcherEditProps {
@@ -66,6 +67,8 @@ const RuleContentSwitcher: FC<RuleContentSwitcherProps> = (props) => {
   const key = useMemo(() => getVirtualKey(rule), [rule]);
   const { value, setValue } = useStorage<string[]>(`rule_switch_${key}`, []);
 
+  const isEnable = useOption('rule-switch', false);
+
   const menu = useMemo(() => {
     const updateRule = async (k: string, v: any) => {
       const newRule = { ...newestRule.current };
@@ -123,6 +126,10 @@ const RuleContentSwitcher: FC<RuleContentSwitcherProps> = (props) => {
     return result;
   }, [add, value]);
 
+  if (!isEnable) {
+    return null;
+  }
+
   if (![RULE_TYPE.MODIFY_SEND_HEADER, RULE_TYPE.MODIFY_RECV_HEADER, RULE_TYPE.REDIRECT].includes(type) || menu.length === 0) {
     return null;
   }

src/share/core/constant.ts

@@ -36,6 +36,8 @@ export const defaultPrefValue: PrefValue = {
   'modify-body': false,
   'is-debug': false,
   'dark-mode': 'auto',
+  'rule-switch': true,
+  'rule-history': true,
 };
 
 export enum APIs {

src/share/core/prefs.ts

@@ -76,7 +76,7 @@ class Prefs {
       return value;
     }
   }
-  get(key: string, defaultValue?: any) {
+  get<T = any>(key: string, defaultValue?: T): T | undefined {
     if (key in this.boundMethods) {
       if (key in this.boundWrappers) {
         return this.boundWrappers[key];
@@ -95,6 +95,7 @@ class Prefs {
       return defaultPrefValue[key];
     }
     console.warn(`No default preference for ${key}`);
+    return defaultValue;
   }
   getAll() {
     return { ...this.values };

src/share/core/rule-history.ts

@@ -0,0 +1,8 @@
+import { getLocal } from './storage';
+
+const addHistory = (key: string, value: string) => {
+  const engine = getLocal();
+  engine.get(key).then((result) => {
+    engine.set({ [key]: result[key] });
+  });
+};

src/share/hooks/use-option.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { prefs } from '../core/prefs';
+import emitter from '../core/emitter';
+
+function useOption<T = any>(key: string, defaultValue?: T): T | undefined {
+  const [state, setState] = useState(defaultValue);
+
+  useEffect(() => {
+    prefs.ready(() => {
+      setState(prefs.get(key));
+    });
+    const handleUpdate = () => {
+      setState(prefs.get(key));
+    };
+    emitter.on(emitter.EVENT_PREFS_UPDATE, handleUpdate);
+    return () => {
+      emitter.off(emitter.EVENT_PREFS_UPDATE, handleUpdate);
+    };
+  }, [key]);
+
+  return state;
+}
+
+export default useOption;