hide fab & open setting shortcut

src/config/i18n.js

@@ -521,4 +521,20 @@ export const I18N = {
     zh: `"打开弹窗"快捷键`,
     en: `"Open Popup" Shortcut`,
   },
+  open_setting_shortcut: {
+    zh: `"打开设置"快捷键`,
+    en: `"Open Setting" Shortcut`,
+  },
+  hide_fab_button: {
+    zh: `隐藏悬浮按钮`,
+    en: `"Hide Fab Button`,
+  },
+  show: {
+    zh: `显示`,
+    en: `"Show`,
+  },
+  hide: {
+    zh: `隐藏`,
+    en: `"Hide`,
+  },
 };

src/config/index.js

@@ -243,10 +243,12 @@ export const DEFAULT_TRANS_APIS = {
 export const OPT_SHORTCUT_TRANSLATE = "toggleTranslate";
 export const OPT_SHORTCUT_STYLE = "toggleStyle";
 export const OPT_SHORTCUT_POPUP = "togglePopup";
+export const OPT_SHORTCUT_SETTING = "openSetting";
 export const DEFAULT_SHORTCUTS = {
   [OPT_SHORTCUT_TRANSLATE]: ["Alt", "q"],
   [OPT_SHORTCUT_STYLE]: ["Alt", "c"],
   [OPT_SHORTCUT_POPUP]: ["Alt", "k"],
+  [OPT_SHORTCUT_SETTING]: ["Alt", "o"],
 };
 
 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度
@@ -269,6 +271,7 @@ export const DEFAULT_SETTING = {
   transApis: DEFAULT_TRANS_APIS, // 翻译接口
   mouseKey: OPT_MOUSEKEY_DISABLE, // 鼠标悬停翻译
   shortcuts: DEFAULT_SHORTCUTS, // 快捷键
+  hideFab: false, // 是否隐藏按钮
 };
 
 export const DEFAULT_RULES = [GLOBLA_RULE];

src/views/Action/index.js

@@ -14,6 +14,7 @@ import {
   OPT_SHORTCUT_TRANSLATE,
   OPT_SHORTCUT_STYLE,
   OPT_SHORTCUT_POPUP,
+  OPT_SHORTCUT_SETTING,
 } from "../../config";
 import { shortcutRegister } from "../../libs/shortcut";
 
@@ -64,6 +65,9 @@ export default function Action({ translator, fab }) {
       shortcutRegister(shortcuts[OPT_SHORTCUT_POPUP], () => {
         setShowPopup((pre) => !pre);
       }),
+      shortcutRegister(shortcuts[OPT_SHORTCUT_SETTING], () => {
+        window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
+      }),
     ];
 
     return () => {
@@ -80,7 +84,7 @@ export default function Action({ translator, fab }) {
       try {
         menuCommandIds.push(
           GM.registerMenuCommand(
-            "Toggle Translate",
+            "Toggle Translate (Alt+q)",
             (event) => {
               translator.toggle();
               setShowPopup(false);
@@ -88,7 +92,7 @@ export default function Action({ translator, fab }) {
             "Q"
           ),
           GM.registerMenuCommand(
-            "Toggle Style",
+            "Toggle Style (Alt+c)",
             (event) => {
               translator.toggleStyle();
               setShowPopup(false);
@@ -96,11 +100,18 @@ export default function Action({ translator, fab }) {
             "C"
           ),
           GM.registerMenuCommand(
-            "Open Menu",
+            "Open Menu (Alt+k)",
             (event) => {
               setShowPopup((pre) => !pre);
             },
             "K"
+          ),
+          GM.registerMenuCommand(
+            "Open Setting (Alt+o)",
+            (event) => {
+              setShowPopup((pre) => !pre);
+            },
+            "O"
           )
         );
       } catch (err) {
@@ -183,7 +194,7 @@ export default function Action({ translator, fab }) {
           key="fab"
           snapEdge
           {...fabProps}
-          show={!showPopup}
+          show={translator.setting.hideFab ? false : !showPopup}
           onStart={handleStart}
           onMove={handleMove}
           handler={

src/views/Options/Setting.js

@@ -24,6 +24,7 @@ import {
   OPT_SHORTCUT_TRANSLATE,
   OPT_SHORTCUT_STYLE,
   OPT_SHORTCUT_POPUP,
+  OPT_SHORTCUT_SETTING,
 } from "../../config";
 import { useEffect, useState, useRef } from "react";
 import { useShortcut } from "../../hooks/Shortcut";
@@ -128,6 +129,7 @@ export default function Settings() {
     clearCache,
     newlineLength = TRANS_NEWLINE_LENGTH,
     mouseKey = OPT_MOUSEKEY_DISABLE,
+    hideFab = false,
   } = setting;
 
   return (
@@ -229,26 +231,46 @@ export default function Settings() {
             </FormHelperText>
           </FormControl>
         ) : (
-          <Grid container rowSpacing={2} columns={12}>
+          <>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
+            <FormControl size="small">
-              <ShortcutItem
+              <InputLabel>{i18n("hide_fab_button")}</InputLabel>
-                action={OPT_SHORTCUT_TRANSLATE}
+              <Select
-                label={i18n("toggle_translate_shortcut")}
+                name="hideFab"
-              />
+                value={hideFab}
+                label={i18n("hide_fab_button")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("show")}</MenuItem>
+                <MenuItem value={true}>{i18n("hide")}</MenuItem>
+              </Select>
+            </FormControl>
+            <Grid container rowSpacing={2} columns={12}>
+              <Grid item xs={12} sm={12} md={3} lg={3}>
+                <ShortcutItem
+                  action={OPT_SHORTCUT_TRANSLATE}
+                  label={i18n("toggle_translate_shortcut")}
+                />
+              </Grid>
+              <Grid item xs={12} sm={12} md={3} lg={3}>
+                <ShortcutItem
+                  action={OPT_SHORTCUT_STYLE}
+                  label={i18n("toggle_style_shortcut")}
+                />
+              </Grid>
+              <Grid item xs={12} sm={12} md={3} lg={3}>
+                <ShortcutItem
+                  action={OPT_SHORTCUT_POPUP}
+                  label={i18n("toggle_popup_shortcut")}
+                />
+              </Grid>
+              <Grid item xs={12} sm={12} md={3} lg={3}>
+                <ShortcutItem
+                  action={OPT_SHORTCUT_SETTING}
+                  label={i18n("open_setting_shortcut")}
+                />
+              </Grid>
             </Grid>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
+          </>
-              <ShortcutItem
-                action={OPT_SHORTCUT_STYLE}
-                label={i18n("toggle_style_shortcut")}
-              />
-            </Grid>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
-              <ShortcutItem
-                action={OPT_SHORTCUT_POPUP}
-                label={i18n("toggle_popup_shortcut")}
-              />
-            </Grid>
-          </Grid>
         )}
       </Stack>
     </Box>