fix: tranbox shortcut in usserscript

src/config/index.js

@@ -347,12 +347,14 @@ export const DEFAULT_INPUT_RULE = {
 };
 
 // 划词翻译
+export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyS"];
 export const DEFAULT_TRANBOX_SETTING = {
   transOpen: true,
   translator: OPT_TRANS_MICROSOFT,
   fromLang: "auto",
   toLang: "zh-CN",
   toLang2: "en",
+  tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
   btnOffsetX: 10,
   btnOffsetY: 10,
   hideTranBtn: false,

src/views/Options/Tranbox.js

@@ -4,10 +4,13 @@ import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import { useI18n } from "../../hooks/I18n";
 import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } 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";
 
 export default function Tranbox() {
   const i18n = useI18n();
@@ -30,12 +33,20 @@ export default function Tranbox() {
     });
   };
 
+  const handleShortcutInput = useCallback(
+    (val) => {
+      updateTranbox({ tranboxShortcut: val });
+    },
+    [updateTranbox]
+  );
+
   const {
     transOpen,
     translator,
     fromLang,
     toLang,
     toLang2 = "en",
+    tranboxShortcut,
     btnOffsetX,
     btnOffsetY,
     hideTranBtn = false,
@@ -148,6 +159,14 @@ export default function Tranbox() {
           <MenuItem value={false}>{i18n("show")}</MenuItem>
           <MenuItem value={true}>{i18n("hide")}</MenuItem>
         </TextField>
+
+        {!isExt && (
+          <ShortcutInput
+            value={tranboxShortcut}
+            onChange={handleShortcutInput}
+            label={i18n("trigger_tranbox_shortcut")}
+          />
+        )}
       </Stack>
     </Box>
   );

src/views/Selection/index.js

@@ -1,9 +1,10 @@
 import { useState, useEffect, useCallback } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
+import { shortcutRegister } from "../../libs/shortcut";
 import { sleep, limitNumber } from "../../libs/utils";
-import { isGm } from "../../libs/client";
+import { isGm, isExt } from "../../libs/client";
-import { MSG_OPEN_TRANBOX } from "../../config";
+import { MSG_OPEN_TRANBOX, DEFAULT_TRANBOX_SHORTCUT } from "../../config";
 import { isMobile } from "../../libs/mobile";
 
 export default function Slection({ contextMenus, tranboxSetting, transApis }) {
@@ -75,6 +76,21 @@ export default function Slection({ contextMenus, tranboxSetting, transApis }) {
     };
   }, [tranboxSetting.hideTranBtn]);
 
+  useEffect(() => {
+    if (isExt) {
+      return;
+    }
+
+    const clearShortcut = shortcutRegister(
+      tranboxSetting.tranboxShortcut || DEFAULT_TRANBOX_SHORTCUT,
+      handleTranbox
+    );
+
+    return () => {
+      clearShortcut();
+    };
+  }, [tranboxSetting.tranboxShortcut, handleTranbox]);
+
   useEffect(() => {
     window.addEventListener(MSG_OPEN_TRANBOX, handleTranbox);
     return () => {