feat: close tranbox when click away

src/config/i18n.js

@@ -623,6 +623,10 @@ export const I18N = {
     zh: `隐藏翻译按钮`,
     en: `Hide Translate Button`,
   },
+  hide_click_away: {
+    zh: `点击外部关闭弹窗`,
+    en: `Click outside to close the pop-up window`,
+  },
   show: {
     zh: `显示`,
     en: `Show`,

src/config/index.js

@@ -388,7 +388,8 @@ export const DEFAULT_TRANBOX_SETTING = {
   tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
   btnOffsetX: 10,
   btnOffsetY: 10,
-  hideTranBtn: false,
+  hideTranBtn: false, // 是否隐藏翻译按钮
+  hideClickAway: false, // 是否点击外部关闭弹窗
 };
 
 // 订阅列表

src/views/Options/Tranbox.js

@@ -50,6 +50,7 @@ export default function Tranbox() {
     btnOffsetX,
     btnOffsetY,
     hideTranBtn = false,
+    hideClickAway = false,
   } = tranboxSetting;
 
   return (
@@ -160,6 +161,18 @@ export default function Tranbox() {
           <MenuItem value={true}>{i18n("hide")}</MenuItem>
         </TextField>
 
+        <TextField
+          select
+          size="small"
+          name="hideClickAway"
+          value={hideClickAway}
+          label={i18n("hide_click_away")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("disable")}</MenuItem>
+          <MenuItem value={true}>{i18n("enable")}</MenuItem>
+        </TextField>
+
         {!isExt && (
           <ShortcutInput
             value={tranboxShortcut}

src/views/Selection/DraggableResizable.js

@@ -148,6 +148,7 @@ export default function DraggableResizable({
   },
   onChangeSize,
   onChangePosition,
+  ...props
 }) {
   const lineWidth = 4;
   const [position, setPosition] = useState(defaultPosition);
@@ -182,6 +183,7 @@ export default function DraggableResizable({
         gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
         zIndex: 2147483647,
       }}
+      {...props}
     >
       <Pointer
         direction="TopLeft"

src/views/Selection/TranBox.js

@@ -175,6 +175,7 @@ export default function TranBox({
           header={<Header setShowPopup={setShowBox} />}
           onChangeSize={setBoxSize}
           onChangePosition={setBoxPosition}
+          onClick={(e) => e.stopPropagation()}
         >
           <Divider />
           <TranForm

src/views/Selection/index.js

@@ -132,6 +132,18 @@ export default function Slection({
     }
   }, [handleTranbox, contextMenuType]);
 
+  useEffect(() => {
+    if (tranboxSetting.hideClickAway) {
+      const handleHideBox = () => {
+        setShowBox(false);
+      };
+      window.addEventListener("click", handleHideBox);
+      return () => {
+        window.removeEventListener("click", handleHideBox);
+      };
+    }
+  }, [tranboxSetting.hideClickAway]);
+
   return (
     <>
       {showBox && (