fix: i18n menu command for userscript

src/common.js

@@ -140,6 +140,7 @@ function showTransbox({
   tranboxSetting = DEFAULT_TRANBOX_SETTING,
   transApis,
   darkMode,
+  uiLang,
 }) {
   if (!tranboxSetting?.transOpen) {
     return;
@@ -170,6 +171,7 @@ function showTransbox({
           contextMenuType={contextMenuType}
           tranboxSetting={tranboxSetting}
           transApis={transApis}
+          uiLang={uiLang}
         />
       </CacheProvider>
     </React.StrictMode>

src/config/i18n.js

@@ -845,4 +845,20 @@ export const I18N = {
     zh: `自定义选项`,
     en: `Custom Option`,
   },
+  translate_selected_text: {
+    zh: `翻译选中文字`,
+    en: `Translate Selected Text`,
+  },
+  toggle_style: {
+    zh: `切换样式`,
+    en: `Toggle Style`,
+  },
+  open_menu: {
+    zh: `打开弹窗菜单`,
+    en: `Open Popup Menu`,
+  },
+  open_setting: {
+    zh: `打开设置`,
+    en: `Open Setting`,
+  },
 };

src/hooks/I18n.js

@@ -2,6 +2,14 @@ import { useSetting } from "./Setting";
 import { I18N, URL_RAW_PREFIX } from "../config";
 import { useFetch } from "./Fetch";
 
+export const getI18n = (uiLang, key, defaultText = "") => {
+  return I18N?.[key]?.[uiLang] ?? defaultText;
+};
+
+export const useLangMap = (uiLang) => {
+  return (key, defaultText = "") => getI18n(uiLang, key, defaultText);
+};
+
 /**
  * 多语言 hook
  * @returns
@@ -10,7 +18,7 @@ export const useI18n = () => {
   const {
     setting: { uiLang },
   } = useSetting();
-  return (key, defaultText = "") => I18N?.[key]?.[uiLang] ?? defaultText;
+  return useLangMap(uiLang);
 };
 
 export const useI18nMd = (key) => {

src/views/Action/index.js

@@ -22,6 +22,7 @@ import {
 import { shortcutRegister } from "../../libs/shortcut";
 import { sendIframeMsg } from "../../libs/iframe";
 import { kissLog } from "../../libs/log";
+import { getI18n } from "../../hooks/I18n";
 
 export default function Action({ translator, fab }) {
   const fabWidth = 40;
@@ -96,11 +97,11 @@ export default function Action({ translator, fab }) {
     // 注册菜单
     try {
       const menuCommandIds = [];
-      const { contextMenuType } = translator.setting;
+      const { contextMenuType, uiLang } = translator.setting;
       contextMenuType !== 0 &&
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Toggle Translate",
+            getI18n(uiLang, "translate_switch"),
             (event) => {
               translator.toggle();
               sendIframeMsg(MSG_TRANS_TOGGLE);
@@ -109,7 +110,7 @@ export default function Action({ translator, fab }) {
             "Q"
           ),
           GM.registerMenuCommand(
-            "Toggle Style",
+            getI18n(uiLang, "toggle_style"),
             (event) => {
               translator.toggleStyle();
               sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
@@ -118,14 +119,14 @@ export default function Action({ translator, fab }) {
             "C"
           ),
           GM.registerMenuCommand(
-            "Open Menu",
+            getI18n(uiLang, "open_menu"),
             (event) => {
               setShowPopup((pre) => !pre);
             },
             "K"
           ),
           GM.registerMenuCommand(
-            "Open Setting",
+            getI18n(uiLang, "open_setting"),
             (event) => {
               window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
             },

src/views/Selection/index.js

@@ -13,11 +13,13 @@ import {
 } from "../../config";
 import { isMobile } from "../../libs/mobile";
 import { kissLog } from "../../libs/log";
+import { useLangMap } from "../../hooks/I18n";
 
 export default function Slection({
   contextMenuType,
   tranboxSetting,
   transApis,
+  uiLang,
 }) {
   const {
     hideTranBtn = false,
@@ -37,6 +39,7 @@ export default function Slection({
       ? 200
       : limitNumber(window.innerHeight, 200, 400);
 
+  const langMap = useLangMap(uiLang);
   const [showBox, setShowBox] = useState(false);
   const [showBtn, setShowBtn] = useState(false);
   const [selectedText, setSelText] = useState("");
@@ -146,7 +149,7 @@ export default function Slection({
       contextMenuType !== 0 &&
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Translate Selected Text",
+            langMap("translate_selected_text"),
             (event) => {
               handleTranbox();
             },
@@ -162,7 +165,7 @@ export default function Slection({
     } catch (err) {
       kissLog(err, "registerMenuCommand");
     }
-  }, [handleTranbox, contextMenuType]);
+  }, [handleTranbox, contextMenuType, langMap]);
 
   useEffect(() => {
     if (hideClickAway) {