can set global value to rules

2023-08-08 13:29:15 +08:00
parent 320b218c0a
commit 7f0b660716
8 changed files with 92 additions and 44 deletions
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -149,8 +149,8 @@ export const I18N = {
    en: `Multiple URLs can be separated by English commas ","`,
  },
  selector_helper: {
-    zh: `遵循CSS选择器规则，但不同浏览器，有些不同的写法。`,
-    en: `Follow the CSS selector rules, but different browsers have some different ways of writing.`,
+    zh: `1、遵循CSS选择器规则，但不同浏览器，支持写法不尽相同。2、留空表示采用全局设置。`,
+    en: `1. Follow CSS selector rules, but different browsers support different writing methods. 2. Leave blank to adopt the global setting.`,
  },
  translate_switch: {
    zh: `开启翻译`,
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -10,6 +10,8 @@ export const STOKEY_SETTING = `${APP_NAME}_setting`;
 export const STOKEY_RULES = `${APP_NAME}_rules`;
 export const STOKEY_SYNC = `${APP_NAME}_sync`;

+export const GLOBAL_KEY = "*";
+
 export const CLIENT_WEB = "web";
 export const CLIENT_CHROME = "chrome";
 export const CLIENT_EDGE = "edge";
@@ -125,14 +127,26 @@ export const DEFAULT_FETCH_INTERVAL = 100; // 默认任务间隔时间
 export const PROMPT_PLACE_FROM = "{{from}}"; // 占位符
 export const PROMPT_PLACE_TO = "{{to}}"; // 占位符

-export const DEFAULT_RULE = {
+// 全局规则
+export const GLOBLA_RULE = {
  pattern: "*",
  selector: DEFAULT_SELECTOR,
  translator: OPT_TRANS_MICROSOFT,
  fromLang: "auto",
  toLang: "zh-CN",
  textStyle: OPT_STYLE_DASHLINE,
-  transOpen: false,
+  transOpen: "false",
+};
+
+// 默认规则
+export const DEFAULT_RULE = {
+  pattern: "",
+  selector: "",
+  translator: GLOBAL_KEY,
+  fromLang: GLOBAL_KEY,
+  toLang: GLOBAL_KEY,
+  textStyle: GLOBAL_KEY,
+  transOpen: GLOBAL_KEY,
 };

 export const DEFAULT_SETTING = {
@@ -152,9 +166,9 @@ export const DEFAULT_RULES = [
  ...RULES.map((item) => ({
    ...DEFAULT_RULE,
    ...item,
-    transOpen: true,
+    transOpen: "true",
  })),
-  DEFAULT_RULE,
+  GLOBLA_RULE,
 ];

 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
--- a/src/hooks/Rules.js
+++ b/src/hooks/Rules.js
@@ -4,6 +4,7 @@ import {
  OPT_STYLE_ALL,
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
+  GLOBAL_KEY,
 } from "../config";
 import storage from "../libs/storage";
 import { useStorages } from "./Storage";
@@ -67,13 +68,7 @@ export function useRules() {
    const fromLangs = OPT_LANGS_FROM.map((item) => item[0]);
    const toLangs = OPT_LANGS_TO.map((item) => item[0]);
    newRules
-      .filter(
-        ({ pattern, selector }) =>
-          pattern &&
-          selector &&
-          typeof pattern === "string" &&
-          typeof selector === "string"
-      )
+      .filter(({ pattern }) => pattern && typeof pattern === "string")
      .map(
        ({
          pattern,
@@ -85,12 +80,12 @@ export function useRules() {
          transOpen,
        }) => ({
          pattern,
-          selector,
-          translator: matchValue(OPT_TRANS_ALL, translator),
-          fromLang: matchValue(fromLangs, fromLang),
-          toLang: matchValue(toLangs, toLang),
-          textStyle: matchValue(OPT_STYLE_ALL, textStyle),
-          transOpen: matchValue([true, false], transOpen),
+          selector: typeof selector === "string" ? selector : "",
+          translator: matchValue([GLOBAL_KEY, ...OPT_TRANS_ALL], translator),
+          fromLang: matchValue([GLOBAL_KEY, ...fromLangs], fromLang),
+          toLang: matchValue([GLOBAL_KEY, ...toLangs], toLang),
+          textStyle: matchValue([GLOBAL_KEY, ...OPT_STYLE_ALL], textStyle),
+          transOpen: matchValue([GLOBAL_KEY, "true", "false"], transOpen),
        })
      )
      .forEach((newRule) => {
--- a/src/libs/browser.js
+++ b/src/libs/browser.js
@@ -8,7 +8,7 @@ function _browser() {
  try {
    return require("webextension-polyfill");
  } catch (err) {
-    console.log("[browser]", err.message);
+    // console.log("[browser]", err.message);
  }
 }

--- a/src/libs/index.js
+++ b/src/libs/index.js
@@ -3,7 +3,8 @@ import {
  DEFAULT_SETTING,
  STOKEY_SETTING,
  STOKEY_RULES,
-  DEFAULT_RULE,
+  GLOBLA_RULE,
+  GLOBAL_KEY,
 } from "../config";
 import { browser } from "./browser";

@@ -38,12 +39,31 @@ export const getRules = async () => (await storage.getObj(STOKEY_RULES)) || [];
 * @param {string} href
 * @returns
 */
-export const matchRule = (rules, href) =>
-  rules.find((rule) =>
+export const matchRule = (rules, href) => {
+  const rule = rules.find((rule) =>
    rule.pattern
      .split(",")
      .some((p) => p.trim() === "*" || href.includes(p.trim()))
-  ) || DEFAULT_RULE;
+  );
+
+  if (!rule) {
+    return GLOBLA_RULE;
+  }
+
+  if (!rule?.selector?.trim()) {
+    rule.selector = GLOBLA_RULE.selector;
+  }
+
+  ["translator", "fromLang", "toLang", "textStyle", "transOpen"].forEach(
+    (key) => {
+      if (rule[key] === GLOBAL_KEY) {
+        rule[key] = GLOBLA_RULE[key];
+      }
+    }
+  );
+
+  return rule;
+};

 /**
 * 本地语言识别
--- a/src/libs/translator.js
+++ b/src/libs/translator.js
@@ -40,7 +40,7 @@ export class Translator {

  constructor(rule) {
    this._rule = rule;
-    if (rule.transOpen) {
+    if (rule.transOpen === "true") {
      this._register();
    }
  }
@@ -54,11 +54,11 @@ export class Translator {
  };

  toggle = () => {
-    if (this._rule.transOpen) {
-      this._rule.transOpen = false;
+    if (this._rule.transOpen === "true") {
+      this._rule.transOpen = "false";
      this._unRegister();
    } else {
-      this._rule.transOpen = true;
+      this._rule.transOpen = "true";
      this._register();
    }
  };
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -3,6 +3,7 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import {
+  GLOBAL_KEY,
  DEFAULT_RULE,
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
@@ -23,11 +24,7 @@ import FileDownloadIcon from "@mui/icons-material/FileDownload";
 import FileUploadIcon from "@mui/icons-material/FileUpload";

 function RuleFields({ rule, rules, setShow }) {
-  const initFormValues = rule || {
-    ...DEFAULT_RULE,
-    pattern: "",
-    transOpen: true,
-  };
+  const initFormValues = rule || DEFAULT_RULE;
  const editMode = !!rule;

  const i18n = useI18n();
@@ -82,9 +79,9 @@ function RuleFields({ rule, rules, setShow }) {
    if (!pattern.trim()) {
      errors.pattern = i18n("error_cant_be_blank");
    }
-    if (!selector.trim()) {
-      errors.selector = i18n("error_cant_be_blank");
-    }
+    // if (!selector.trim()) {
+    //   errors.selector = i18n("error_cant_be_blank");
+    // }
    if (hasSamePattern(pattern)) {
      errors.pattern = i18n("error_duplicate_values");
    }
@@ -105,6 +102,12 @@ function RuleFields({ rule, rules, setShow }) {
    }
  };

+  const globalItem = rule?.pattern !== "*" && (
+    <MenuItem key={GLOBAL_KEY} value={GLOBAL_KEY}>
+      {GLOBAL_KEY}
+    </MenuItem>
+  );
+
  return (
    <form onSubmit={handleSubmit}>
      <Stack spacing={2}>
@@ -147,8 +150,9 @@ function RuleFields({ rule, rules, setShow }) {
                disabled={disabled}
                onChange={handleChange}
              >
-                <MenuItem value={true}>{i18n("default_enabled")}</MenuItem>
-                <MenuItem value={false}>{i18n("default_disabled")}</MenuItem>
+                {globalItem}
+                <MenuItem value={"true"}>{i18n("default_enabled")}</MenuItem>
+                <MenuItem value={"false"}>{i18n("default_disabled")}</MenuItem>
              </TextField>
            </Grid>
            <Grid item xs={10} md={4}>
@@ -162,6 +166,7 @@ function RuleFields({ rule, rules, setShow }) {
                disabled={disabled}
                onChange={handleChange}
              >
+                {globalItem}
                {OPT_TRANS_ALL.map((item) => (
                  <MenuItem key={item} value={item}>
                    {item}
@@ -180,8 +185,11 @@ function RuleFields({ rule, rules, setShow }) {
                disabled={disabled}
                onChange={handleChange}
              >
+                {globalItem}
                {OPT_LANGS_FROM.map(([lang, name]) => (
-                  <MenuItem key={lang} value={lang}>{name}</MenuItem>
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
                ))}
              </TextField>
            </Grid>
@@ -196,8 +204,11 @@ function RuleFields({ rule, rules, setShow }) {
                disabled={disabled}
                onChange={handleChange}
              >
+                {globalItem}
                {OPT_LANGS_TO.map(([lang, name]) => (
-                  <MenuItem key={lang} value={lang}>{name}</MenuItem>
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
                ))}
              </TextField>
            </Grid>
@@ -212,8 +223,11 @@ function RuleFields({ rule, rules, setShow }) {
                disabled={disabled}
                onChange={handleChange}
              >
+                {globalItem}
                {OPT_STYLE_ALL.map((item) => (
-                  <MenuItem key={item} value={item}>{i18n(item)}</MenuItem>
+                  <MenuItem key={item} value={item}>
+                    {i18n(item)}
+                  </MenuItem>
                ))}
              </TextField>
            </Grid>
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -35,7 +35,7 @@ export default function Popup() {

  const handleTransToggle = async (e) => {
    try {
-      setRule({ ...rule, transOpen: e.target.checked });
+      setRule({ ...rule, transOpen: e.target.checked ? "true" : "false" });

      if (isExt) {
        await sendTabMsg(MSG_TRANS_TOGGLE);
@@ -131,7 +131,12 @@ export default function Popup() {
    <Box minWidth={300} sx={{ p: 2 }}>
      <Stack spacing={2}>
        <FormControlLabel
-          control={<Switch checked={transOpen} onChange={handleTransToggle} />}
+          control={
+            <Switch
+              checked={transOpen === "true"}
+              onChange={handleTransToggle}
+            />
+          }
          label={i18n("translate")}
        />