feat: Add more shortcut keys to popup

src/views/Options/Rules.js

@@ -112,7 +112,6 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     // transTiming = OPT_TIMING_PAGESCROLL,
     transTag = DEFAULT_TRANS_TAG,
     transTitle = "false",
-    transSelected = "true",
     // detectRemote = "true",
     // skipLangs = [],
     // fixerSelector = "",
@@ -337,22 +336,6 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               </TextField>
             </Grid>
 
-            <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
-                select
-                size="small"
-                fullWidth
-                name="transSelected"
-                value={transSelected}
-                label={i18n("translate_selected")}
-                disabled={disabled}
-                onChange={handleChange}
-              >
-                {GlobalItem}
-                <MenuItem value={"false"}>{i18n("disable")}</MenuItem>
-                <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
-              </TextField>
-            </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select

src/views/Options/Tranbox.js

@@ -12,12 +12,13 @@ import {
   OPT_DICT_BAIDU,
 } from "../../config";
 import ShortcutInput from "./ShortcutInput";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
 import { useCallback } from "react";
 import { limitNumber } from "../../libs/utils";
 import { useTranbox } from "../../hooks/Tranbox";
 import { isExt } from "../../libs/client";
 import { useApiList } from "../../hooks/Api";
-import Alert from "@mui/material/Alert";
 
 export default function Tranbox() {
   const i18n = useI18n();
@@ -49,6 +50,7 @@ export default function Tranbox() {
   );
 
   const {
+    transOpen,
     apiSlug,
     fromLang,
     toLang,
@@ -70,7 +72,19 @@ export default function Tranbox() {
   return (
     <Box>
       <Stack spacing={3}>
-        <Alert severity="info">{i18n("selected_translation_alert")}</Alert>
+        <FormControlLabel
+          control={
+            <Switch
+              size="small"
+              name="transOpen"
+              checked={transOpen}
+              onChange={() => {
+                updateTranbox({ transOpen: !transOpen });
+              }}
+            />
+          }
+          label={i18n("toggle_selection_translate")}
+        />
 
         <Box>
           <Grid container spacing={2} columns={12}>

src/views/Popup/index.js

@@ -20,6 +20,9 @@ import {
   MSG_OPEN_OPTIONS,
   MSG_SAVE_RULE,
   MSG_COMMAND_SHORTCUTS,
+  MSG_TRANSBOX_TOGGLE,
+  MSG_MOUSEHOVER_TOGGLE,
+  MSG_TRANSINPUT_TOGGLE,
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
   OPT_STYLE_ALL,
@@ -35,9 +38,7 @@ import { parseUrlPattern } from "../../libs/utils";
 export default function Popup({ setShowPopup, translator }) {
   const i18n = useI18n();
   const [rule, setRule] = useState(translator?.rule);
-  const [transApis, setTransApis] = useState(
-    translator?.setting?.transApis || []
-  );
+  const [setting, setSetting] = useState(translator?.setting);
   const [commands, setCommands] = useState({});
 
   const handleOpenSetting = () => {
@@ -66,6 +67,66 @@ export default function Popup({ setShowPopup, translator }) {
     }
   };
 
+  const handleTransboxToggle = async (e) => {
+    try {
+      setSetting((pre) => ({
+        ...pre,
+        tranboxSetting: { ...pre.tranboxSetting, transOpen: e.target.checked },
+      }));
+
+      if (!translator) {
+        await sendTabMsg(MSG_TRANSBOX_TOGGLE);
+      } else {
+        translator.toggleTransbox();
+        sendIframeMsg(MSG_TRANSBOX_TOGGLE);
+      }
+    } catch (err) {
+      kissLog("toggle transbox", err);
+    }
+  };
+
+  const handleMousehoverToggle = async (e) => {
+    try {
+      setSetting((pre) => ({
+        ...pre,
+        mouseHoverSetting: {
+          ...pre.mouseHoverSetting,
+          useMouseHover: e.target.checked,
+        },
+      }));
+
+      if (!translator) {
+        await sendTabMsg(MSG_MOUSEHOVER_TOGGLE);
+      } else {
+        translator.toggleMouseHover();
+        sendIframeMsg(MSG_MOUSEHOVER_TOGGLE);
+      }
+    } catch (err) {
+      kissLog("toggle mousehover", err);
+    }
+  };
+
+  const handleInputTransToggle = async (e) => {
+    try {
+      setSetting((pre) => ({
+        ...pre,
+        inputRule: {
+          ...pre.inputRule,
+          transOpen: e.target.checked,
+        },
+      }));
+
+      if (!translator) {
+        await sendTabMsg(MSG_TRANSINPUT_TOGGLE);
+      } else {
+        translator.toggleInputTranslate();
+        sendIframeMsg(MSG_TRANSINPUT_TOGGLE);
+      }
+    } catch (err) {
+      kissLog("toggle inputtrans", err);
+    }
+  };
+
   const handleChange = async (e) => {
     try {
       const { name, value } = e.target;
@@ -121,7 +182,7 @@ export default function Popup({ setShowPopup, translator }) {
         const res = await sendTabMsg(MSG_TRANS_GETRULE);
         if (!res.error) {
           setRule(res.rule);
-          setTransApis(res.setting.transApis);
+          setSetting(res.setting);
         }
       } catch (err) {
         kissLog("query rule", err);
@@ -155,15 +216,19 @@ export default function Popup({ setShowPopup, translator }) {
 
   const optApis = useMemo(
     () =>
-      transApis
+      setting?.transApis
         .filter((api) => !api.isDisabled)
         .map((api) => ({
           key: api.apiSlug,
           name: api.apiName || api.apiSlug,
         })),
-    [transApis]
+    [setting]
   );
 
+  const tranboxEnabled = setting?.tranboxSetting.transOpen;
+  const mouseHoverEnabled = setting?.mouseHoverSetting.useMouseHover;
+  const inputTransEnabled = setting?.inputRule.transOpen;
+
   if (!rule) {
     return (
       <Box minWidth={300}>
@@ -195,7 +260,7 @@ export default function Popup({ setShowPopup, translator }) {
   } = rule;
 
   return (
-    <Box width={320}>
+    <Box width={360}>
       {!translator && (
         <>
           <Header />
@@ -275,6 +340,48 @@ export default function Popup({ setShowPopup, translator }) {
               label={i18n("richtext_alt")}
             />
           </Grid>
+          <Grid item xs={6}>
+            <FormControlLabel
+              control={
+                <Switch
+                  size="small"
+                  name="tranboxEnabled"
+                  value={!tranboxEnabled}
+                  checked={tranboxEnabled}
+                  onChange={handleTransboxToggle}
+                />
+              }
+              label={i18n("selection_translate")}
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <FormControlLabel
+              control={
+                <Switch
+                  size="small"
+                  name="mouseHoverEnabled"
+                  value={!mouseHoverEnabled}
+                  checked={mouseHoverEnabled}
+                  onChange={handleMousehoverToggle}
+                />
+              }
+              label={i18n("mousehover_translate")}
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <FormControlLabel
+              control={
+                <Switch
+                  size="small"
+                  name="inputTransEnabled"
+                  value={!inputTransEnabled}
+                  checked={inputTransEnabled}
+                  onChange={handleInputTransToggle}
+                />
+              }
+              label={i18n("input_translate")}
+            />
+          </Grid>
         </Grid>
 
         <TextField