添加可以选择悬浮按钮单击操作的设置选项 (#313)

* Add an option in Settings to provide choices for the FAB Single Click action.

* Complete Translation

---------

Co-authored-by: 1030283726 <1030283726@qq.com>

src/config/i18n.js

@@ -847,7 +847,21 @@ export const I18N = {
     en: `Hide Fab Button`,
     zh_TW: `隱藏懸浮按鈕`,
   },
-
+  fab_click_action: {
+    zh: `单击悬浮按钮动作`,
+    en: `Single Click Fab Action`,
+    zh_TW: `單擊懸浮按钮動作`,
+  },
+  fab_click_menu: {
+    zh: `弹出菜单`,
+    en: `Popup Menu`,
+    zh_TW: `彈出選單`,
+  },
+  fab_click_translate: {
+    zh: `直接翻译`,
+    en: `Translate`,
+    zh_TW: `直接翻譯`,
+  },
   hide_tran_button: {
     zh: `隐藏翻译按钮`,
     en: `Hide Translate Button`,

src/config/setting.js

@@ -120,6 +120,7 @@ export const DEFAULT_SETTING = {
   httpTimeout: DEFAULT_HTTP_TIMEOUT,
   clearCache: false, // 是否在浏览器下次启动时清除缓存
   injectRules: true, // 是否注入订阅规则
+  fabClickAction: 0, // 悬浮按钮点击行为
   // injectWebfix: true, // 是否注入修复补丁(作废)
   // detectRemote: false, // 是否使用远程语言检测(移至rule，作废)
   // contextMenus: true, // 是否添加右键菜单(作废)

src/views/Action/index.js

@@ -33,6 +33,8 @@ export default function Action({ translator, fab }) {
   });
   const [moved, setMoved] = useState(false);
 
+  const { fabClickAction = 0 } = fab || {};
+
   const handleWindowResize = useMemo(
     () =>
       debounce(() => {
@@ -215,7 +217,14 @@ export default function Action({ translator, fab }) {
               color="primary"
               onClick={(e) => {
                 if (!moved) {
-                  setShowPopup((pre) => !pre);
+                  if (fabClickAction === 1) {
+                    translator.toggle();
+                    sendIframeMsg(MSG_TRANS_TOGGLE);
+                    setShowPopup(false);
+                  } 
+                  else {
+                    setShowPopup((pre) => !pre);
+                  }
                 }
               }}
             >

src/views/Options/Setting.js

@@ -122,7 +122,7 @@ export default function Settings() {
     transInterval = 500,
     langDetector = OPT_TRANS_MICROSOFT,
   } = setting;
-  const { isHide = false } = fab || {};
+  const { isHide = false, fabClickAction = 0  } = fab || {};
 
   return (
     <Box>
@@ -232,6 +232,19 @@ export default function Settings() {
           </Select>
         </FormControl>
 
+        <FormControl size="small">
+          <InputLabel>{i18n("fab_click_action")}</InputLabel>
+          <Select
+            name="fabClickAction"
+            value={fabClickAction}  
+            label={i18n("fab_click_action")}
+            onChange= {(e) => updateFab({ fabClickAction: e.target.value })}
+          >
+            <MenuItem value={0}>{i18n("fab_click_menu")}</MenuItem>
+            <MenuItem value={1}>{i18n("fab_click_translate")}</MenuItem>
+          </Select>
+        </FormControl>
+
         <FormControl size="small">
           <InputLabel>{i18n("context_menus")}</InputLabel>
           <Select