feat: move settings to rule

src/views/Options/Navigator.js

@@ -11,7 +11,6 @@ import DesignServicesIcon from "@mui/icons-material/DesignServices";
 import { useI18n } from "../../hooks/I18n";
 import SyncIcon from "@mui/icons-material/Sync";
 import ApiIcon from "@mui/icons-material/Api";
-import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension";
 import InputIcon from "@mui/icons-material/Input";
 import SelectAllIcon from "@mui/icons-material/SelectAll";
 import EventNoteIcon from "@mui/icons-material/EventNote";
@@ -65,12 +64,6 @@ export default function Navigator(props) {
       url: "/sync",
       icon: <SyncIcon />,
     },
-    {
-      id: "webfix",
-      label: i18n("patch_setting"),
-      url: "/webfix",
-      icon: <SendTimeExtensionIcon />,
-    },
     {
       id: "words",
       label: i18n("favorite_words"),

src/views/Options/Rules.js

@@ -15,6 +15,9 @@ import {
   OPT_STYLE_USE_COLOR,
   URL_KISS_RULES_NEW_ISSUE,
   OPT_SYNCTYPE_WORKER,
+  OPT_TIMING_PAGESCROLL,
+  DEFAULT_TRANS_TAG,
+  OPT_TIMING_ALL,
 } from "../../config";
 import { useState, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -50,12 +53,10 @@ import HelpButton from "./HelpButton";
 import { useSyncCaches } from "../../hooks/Sync";
 import DownloadButton from "./DownloadButton";
 import UploadButton from "./UploadButton";
+import { FIXER_ALL } from "../../libs/webfix";
 
 function RuleFields({ rule, rules, setShow, setKeyword }) {
-  const initFormValues = rule || {
-    ...DEFAULT_RULE,
-    transOpen: "true",
-  };
+  const initFormValues = { ...DEFAULT_RULE, ...(rule || {}) };
   const editMode = !!rule;
 
   const i18n = useI18n();
@@ -79,6 +80,14 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     transOpen,
     bgColor,
     textDiyStyle,
+    transOnly = "false",
+    transTiming = OPT_TIMING_PAGESCROLL,
+    transTag = DEFAULT_TRANS_TAG,
+    transTitle = "false",
+    detectRemote = "false",
+    skipLangs = [],
+    fixerSelector = "",
+    fixerFunc = "-",
   } = formValues;
 
   const hasSamePattern = (str) => {
@@ -323,6 +332,141 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
 
         {showMore && (
           <>
+            <Box>
+              <Grid container spacing={2} columns={12}>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transOnly"
+                    value={transOnly}
+                    label={i18n("show_only_translations")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transTiming"
+                    value={transTiming}
+                    label={i18n("translate_timing")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    {OPT_TIMING_ALL.map((item) => (
+                      <MenuItem key={item} value={item}>
+                        {i18n(item)}
+                      </MenuItem>
+                    ))}
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transTag"
+                    value={transTag}
+                    label={i18n("translation_element_tag")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"span"}>{`<span>`}</MenuItem>
+                    <MenuItem value={"font"}>{`<font>`}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="transTitle"
+                    value={transTitle}
+                    label={i18n("translate_page_title")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid item xs={12} sm={6} md={3} lg={2}>
+                  <TextField
+                    select
+                    size="small"
+                    fullWidth
+                    name="detectRemote"
+                    value={detectRemote}
+                    label={i18n("detect_lang_remote")}
+                    disabled={disabled}
+                    onChange={handleChange}
+                  >
+                    {GlobalItem}
+                    <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
+                    <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
+                  </TextField>
+                </Grid>
+              </Grid>
+            </Box>
+
+            <TextField
+              select
+              size="small"
+              label={i18n("disable_langs")}
+              helperText={i18n("disable_langs_helper")}
+              name="skipLangs"
+              value={skipLangs}
+              disabled={disabled}
+              onChange={handleChange}
+              SelectProps={{
+                multiple: true,
+              }}
+            >
+              {OPT_LANGS_TO.map(([langKey, langName]) => (
+                <MenuItem key={langKey} value={langKey}>
+                  {langName}
+                </MenuItem>
+              ))}
+            </TextField>
+
+            <TextField
+              size="small"
+              label={i18n("fixer_selector")}
+              name="fixerSelector"
+              value={fixerSelector}
+              disabled={disabled}
+              onChange={handleChange}
+              multiline
+            />
+            <TextField
+              select
+              size="small"
+              name="fixerFunc"
+              value={fixerFunc}
+              label={i18n("fixer_function")}
+              helperText={i18n("fixer_function_helper")}
+              disabled={disabled}
+              onChange={handleChange}
+            >
+              {GlobalItem}
+              {FIXER_ALL.map((item) => (
+                <MenuItem key={item} value={item}>
+                  {item}
+                </MenuItem>
+              ))}
+            </TextField>
+
             <TextField
               size="small"
               label={i18n("terms")}

src/views/Options/Setting.js

@@ -17,16 +17,12 @@ import {
   UI_LANGS,
   TRANS_NEWLINE_LENGTH,
   CACHE_NAME,
-  OPT_MOUSEKEY_ALL,
-  OPT_MOUSEKEY_DISABLE,
   OPT_SHORTCUT_TRANSLATE,
   OPT_SHORTCUT_STYLE,
   OPT_SHORTCUT_POPUP,
   OPT_SHORTCUT_SETTING,
-  OPT_LANGS_TO,
   DEFAULT_BLACKLIST,
   MSG_CONTEXT_MENUS,
-  DEFAULT_TRANS_TAG,
 } from "../../config";
 import { useShortcut } from "../../hooks/Shortcut";
 import ShortcutInput from "./ShortcutInput";
@@ -95,15 +91,9 @@ export default function Settings() {
     maxLength,
     clearCache,
     newlineLength = TRANS_NEWLINE_LENGTH,
-    mouseKey = OPT_MOUSEKEY_DISABLE,
-    detectRemote = false,
     contextMenuType = 1,
-    transTag = DEFAULT_TRANS_TAG,
-    transOnly = false,
-    transTitle = false,
     touchTranslate = 2,
     blacklist = DEFAULT_BLACKLIST.join(",\n"),
-    disableLangs = [],
   } = setting;
   const { isHide = false } = fab || {};
 
@@ -171,62 +161,6 @@ export default function Settings() {
           onChange={handleChange}
         />
 
-        <FormControl size="small">
-          <InputLabel>{i18n("translate_timing")}</InputLabel>
-          <Select
-            name="mouseKey"
-            value={mouseKey}
-            label={i18n("translate_timing")}
-            onChange={handleChange}
-          >
-            {OPT_MOUSEKEY_ALL.map((item) => (
-              <MenuItem key={item} value={item}>
-                {i18n(item)}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-
-        <FormControl size="small">
-          <InputLabel>{i18n("translation_element_tag")}</InputLabel>
-          <Select
-            name="transTag"
-            value={transTag}
-            label={i18n("translation_element_tag")}
-            onChange={handleChange}
-          >
-            <MenuItem value={"span"}>{`<span>`}</MenuItem>
-            <MenuItem value={"font"}>{`<font>`}</MenuItem>
-          </Select>
-        </FormControl>
-
-        <FormControl size="small">
-          <InputLabel>{i18n("show_only_translations")}</InputLabel>
-          <Select
-            name="transOnly"
-            value={transOnly}
-            label={i18n("show_only_translations")}
-            onChange={handleChange}
-          >
-            <MenuItem value={false}>{i18n("disable")}</MenuItem>
-            <MenuItem value={true}>{i18n("enable")}</MenuItem>
-          </Select>
-          <FormHelperText>{i18n("show_only_translations_help")}</FormHelperText>
-        </FormControl>
-
-        <FormControl size="small">
-          <InputLabel>{i18n("translate_page_title")}</InputLabel>
-          <Select
-            name="transTitle"
-            value={transTitle}
-            label={i18n("translate_page_title")}
-            onChange={handleChange}
-          >
-            <MenuItem value={false}>{i18n("disable")}</MenuItem>
-            <MenuItem value={true}>{i18n("enable")}</MenuItem>
-          </Select>
-        </FormControl>
-
         <FormControl size="small">
           <InputLabel>{i18n("touch_translate_shortcut")}</InputLabel>
           <Select
@@ -272,38 +206,6 @@ export default function Settings() {
           </Select>
         </FormControl>
 
-        <FormControl size="small">
-          <InputLabel>{i18n("detect_lang_remote")}</InputLabel>
-          <Select
-            name="detectRemote"
-            value={detectRemote}
-            label={i18n("detect_lang_remote")}
-            onChange={handleChange}
-          >
-            <MenuItem value={false}>{i18n("disable")}</MenuItem>
-            <MenuItem value={true}>{i18n("enable")}</MenuItem>
-          </Select>
-          <FormHelperText>{i18n("detect_lang_remote_help")}</FormHelperText>
-        </FormControl>
-
-        <FormControl size="small">
-          <InputLabel>{i18n("disable_langs")}</InputLabel>
-          <Select
-            multiple
-            name="disableLangs"
-            value={disableLangs}
-            label={i18n("disable_langs")}
-            onChange={handleChange}
-          >
-            {OPT_LANGS_TO.map(([langKey, langName]) => (
-              <MenuItem key={langKey} value={langKey}>
-                {langName}
-              </MenuItem>
-            ))}
-          </Select>
-          <FormHelperText>{i18n("disable_langs_helper")}</FormHelperText>
-        </FormControl>
-
         {isExt ? (
           <>
             <FormControl size="small">

src/views/Options/Webfix.js

@@ -1,358 +0,0 @@
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import { useCallback, useEffect, useState } from "react";
-import { useI18n } from "../../hooks/I18n";
-import Typography from "@mui/material/Typography";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import Alert from "@mui/material/Alert";
-import Box from "@mui/material/Box";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
-import { useSetting } from "../../hooks/Setting";
-import CircularProgress from "@mui/material/CircularProgress";
-import { syncWebfix, loadOrFetchWebfix, FIXER_ALL } from "../../libs/webfix";
-import Button from "@mui/material/Button";
-import SyncIcon from "@mui/icons-material/Sync";
-import { useAlert } from "../../hooks/Alert";
-import HelpButton from "./HelpButton";
-import { URL_KISS_RULES_NEW_ISSUE } from "../../config";
-import MenuItem from "@mui/material/MenuItem";
-import { useWebfixRules } from "../../hooks/WebfixRules";
-
-function WebfixFields({ rule, webfix, setShow }) {
-  const editMode = !!rule;
-  const initFormValues = rule || {
-    pattern: "",
-    selector: "",
-    rootSelector: "",
-    fixer: FIXER_ALL[0],
-  };
-  const i18n = useI18n();
-  const [disabled, setDisabled] = useState(editMode);
-  const [errors, setErrors] = useState({});
-  const [formValues, setFormValues] = useState(initFormValues);
-
-  const { pattern, selector, rootSelector, fixer } = formValues;
-
-  const hasSamePattern = (str) => {
-    for (const item of webfix.list || []) {
-      if (item.pattern === str && rule?.pattern !== str) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  const handleFocus = (e) => {
-    e.preventDefault();
-    const { name } = e.target;
-    setErrors((pre) => ({ ...pre, [name]: "" }));
-  };
-
-  const handleChange = (e) => {
-    e.preventDefault();
-    const { name, value } = e.target;
-    setFormValues((pre) => ({ ...pre, [name]: value }));
-  };
-
-  const handleCancel = (e) => {
-    e.preventDefault();
-    if (editMode) {
-      setDisabled(true);
-    } else {
-      setShow(false);
-    }
-    setFormValues(initFormValues);
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const errors = {};
-    if (!pattern.trim()) {
-      errors.pattern = i18n("error_cant_be_blank");
-    }
-    if (hasSamePattern(pattern)) {
-      errors.pattern = i18n("error_duplicate_values");
-    }
-    if (!selector.trim()) {
-      errors.selector = i18n("error_cant_be_blank");
-    }
-    if (Object.keys(errors).length > 0) {
-      setErrors(errors);
-      return;
-    }
-
-    if (editMode) {
-      // 编辑
-      setDisabled(true);
-      webfix.put(rule.pattern, formValues);
-    } else {
-      // 添加
-      webfix.add(formValues);
-      setShow(false);
-      setFormValues(initFormValues);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <Stack spacing={3}>
-        <TextField
-          size="small"
-          label={i18n("pattern")}
-          error={!!errors.pattern}
-          helperText={errors.pattern}
-          name="pattern"
-          value={pattern}
-          disabled={disabled}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          multiline
-        />
-        <TextField
-          size="small"
-          label={i18n("root_selector")}
-          error={!!errors.rootSelector}
-          helperText={errors.rootSelector}
-          name="rootSelector"
-          value={rootSelector}
-          disabled={disabled}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          multiline
-        />
-        <TextField
-          size="small"
-          label={i18n("selector")}
-          error={!!errors.selector}
-          helperText={errors.selector}
-          name="selector"
-          value={selector}
-          disabled={disabled}
-          onChange={handleChange}
-          onFocus={handleFocus}
-          multiline
-        />
-        <TextField
-          select
-          size="small"
-          name="fixer"
-          value={fixer}
-          label={i18n("fixer_function")}
-          helperText={i18n("fixer_function_helper")}
-          disabled={disabled}
-          onChange={handleChange}
-        >
-          {FIXER_ALL.map((item) => (
-            <MenuItem key={item} value={item}>
-              {item}
-            </MenuItem>
-          ))}
-        </TextField>
-
-        {webfix &&
-          (editMode ? (
-            // 编辑
-            <Stack direction="row" spacing={2}>
-              {disabled ? (
-                <>
-                  <Button
-                    size="small"
-                    variant="contained"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setDisabled(false);
-                    }}
-                  >
-                    {i18n("edit")}
-                  </Button>
-                  <Button
-                    size="small"
-                    variant="outlined"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      webfix.del(rule.pattern);
-                    }}
-                  >
-                    {i18n("delete")}
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Button size="small" variant="contained" type="submit">
-                    {i18n("save")}
-                  </Button>
-                  <Button
-                    size="small"
-                    variant="outlined"
-                    onClick={handleCancel}
-                  >
-                    {i18n("cancel")}
-                  </Button>
-                </>
-              )}
-            </Stack>
-          ) : (
-            // 添加
-            <Stack direction="row" spacing={2}>
-              <Button size="small" variant="contained" type="submit">
-                {i18n("save")}
-              </Button>
-              <Button size="small" variant="outlined" onClick={handleCancel}>
-                {i18n("cancel")}
-              </Button>
-            </Stack>
-          ))}
-      </Stack>
-    </form>
-  );
-}
-
-function WebfixAccordion({ rule, webfix }) {
-  const [expanded, setExpanded] = useState(false);
-
-  const handleChange = (e) => {
-    setExpanded((pre) => !pre);
-  };
-
-  return (
-    <Accordion expanded={expanded} onChange={handleChange}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography
-          sx={{
-            opacity: webfix ? 1 : 0.5,
-            overflowWrap: "anywhere",
-          }}
-        >
-          {rule.pattern}
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        {expanded && <WebfixFields rule={rule} webfix={webfix} />}
-      </AccordionDetails>
-    </Accordion>
-  );
-}
-
-export default function Webfix() {
-  const [loading, setLoading] = useState(false);
-  const [sites, setSites] = useState([]);
-  const i18n = useI18n();
-  const alert = useAlert();
-  const { setting, updateSetting } = useSetting();
-  const [showAdd, setShowAdd] = useState(false);
-  const webfix = useWebfixRules();
-
-  const loadSites = useCallback(async () => {
-    const sites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
-    setSites(sites);
-  }, []);
-
-  const handleSyncTest = async (e) => {
-    e.preventDefault();
-    try {
-      setLoading(true);
-      await syncWebfix(process.env.REACT_APP_WEBFIXURL);
-      await loadSites();
-      alert.success(i18n("sync_success"));
-    } catch (err) {
-      console.log("[sync webfix]", err);
-      alert.error(i18n("sync_failed"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    (async () => {
-      try {
-        setLoading(true);
-        await loadSites();
-      } catch (err) {
-        console.log("[load webfix]", err.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [loadSites]);
-
-  return (
-    <Box>
-      <Stack spacing={3}>
-        <Alert severity="info">{i18n("patch_setting_help")}</Alert>
-
-        <Stack
-          direction="row"
-          alignItems="center"
-          spacing={2}
-          useFlexGap
-          flexWrap="wrap"
-        >
-          <Button
-            size="small"
-            variant="contained"
-            disabled={showAdd}
-            onClick={(e) => {
-              e.preventDefault();
-              setShowAdd(true);
-            }}
-          >
-            {i18n("add")}
-          </Button>
-
-          <Button
-            size="small"
-            variant="outlined"
-            disabled={loading}
-            onClick={handleSyncTest}
-            startIcon={<SyncIcon />}
-          >
-            {i18n("sync_now")}
-          </Button>
-          <HelpButton url={URL_KISS_RULES_NEW_ISSUE} />
-          <FormControlLabel
-            control={
-              <Switch
-                size="small"
-                checked={!!setting.injectWebfix}
-                onChange={() => {
-                  updateSetting({
-                    injectWebfix: !setting.injectWebfix,
-                  });
-                }}
-              />
-            }
-            label={i18n("inject_webfix")}
-          />
-        </Stack>
-
-        {showAdd && <WebfixFields webfix={webfix} setShow={setShowAdd} />}
-
-        {webfix.list?.length > 0 && (
-          <Box>
-            {webfix.list.map((rule) => (
-              <WebfixAccordion key={rule.pattern} rule={rule} webfix={webfix} />
-            ))}
-          </Box>
-        )}
-
-        {setting.injectWebfix && (
-          <Box>
-            {loading ? (
-              <center>
-                <CircularProgress size={16} />
-              </center>
-            ) : (
-              sites.map((rule) => (
-                <WebfixAccordion key={rule.pattern} rule={rule} />
-              ))
-            )}
-          </Box>
-        )}
-      </Stack>
-    </Box>
-  );
-}

src/views/Options/index.js

@@ -18,7 +18,6 @@ import Stack from "@mui/material/Stack";
 import { adaptScript } from "../../libs/gm";
 import Alert from "@mui/material/Alert";
 import Apis from "./Apis";
-import Webfix from "./Webfix";
 import InputSetting from "./InputSetting";
 import Tranbox from "./Tranbox";
 import FavWords from "./FavWords";
@@ -125,7 +124,6 @@ export default function Options() {
                 <Route path="tranbox" element={<Tranbox />} />
                 <Route path="apis" element={<Apis />} />
                 <Route path="sync" element={<SyncSetting />} />
-                <Route path="webfix" element={<Webfix />} />
                 <Route path="words" element={<FavWords />} />
                 <Route path="about" element={<About />} />
               </Route>