feat: tranbox offset

src/config/i18n.js

@@ -710,12 +710,20 @@ export const I18N = {
     en: `Open Translate Popup/Translate Selected Shortcut`,
   },
   tranbtn_offset_x: {
-    zh: `翻译按钮偏移X（0-100）`,
-    en: `Translate Button Offset X (0-100)`,
+    zh: `翻译按钮偏移X（±200）`,
+    en: `Translate Button Offset X (±200)`,
   },
   tranbtn_offset_y: {
-    zh: `翻译按钮偏移Y（0-100）`,
-    en: `Translate Button Offset Y (0-100)`,
+    zh: `翻译按钮偏移Y（±200）`,
+    en: `Translate Button Offset Y (±200)`,
+  },
+  tranbox_offset_x: {
+    zh: `翻译框偏移X（±200）`,
+    en: `Translate Box Offset X (±200)`,
+  },
+  tranbox_offset_y: {
+    zh: `翻译框偏移Y（±200）`,
+    en: `Translate Box Offset Y (±200)`,
   },
   translated_text: {
     zh: `译文`,

src/config/index.js

@@ -430,6 +430,8 @@ export const DEFAULT_TRANBOX_SETTING = {
   tranboxShortcut: DEFAULT_TRANBOX_SHORTCUT,
   btnOffsetX: 10,
   btnOffsetY: 10,
+  boxOffsetX: 0,
+  boxOffsetY: 10,
   hideTranBtn: false, // 是否隐藏翻译按钮
   hideClickAway: false, // 是否点击外部关闭弹窗
   simpleStyle: false, // 是否简洁界面

src/views/Options/Tranbox.js

@@ -27,10 +27,10 @@ export default function Tranbox() {
     let { name, value } = e.target;
     switch (name) {
       case "btnOffsetX":
-        value = limitNumber(value, 0, 100);
-        break;
       case "btnOffsetY":
-        value = limitNumber(value, 0, 100);
+      case "boxOffsetX":
+      case "boxOffsetY":
+        value = limitNumber(value, -200, 200);
         break;
       default:
     }
@@ -55,6 +55,8 @@ export default function Tranbox() {
     tranboxShortcut,
     btnOffsetX,
     btnOffsetY,
+    boxOffsetX = 0,
+    boxOffsetY = 10,
     hideTranBtn = false,
     hideClickAway = false,
     simpleStyle = false,
@@ -159,6 +161,24 @@ export default function Tranbox() {
           onChange={handleChange}
         />
 
+        <TextField
+          size="small"
+          label={i18n("tranbox_offset_x")}
+          type="number"
+          name="boxOffsetX"
+          defaultValue={boxOffsetX}
+          onChange={handleChange}
+        />
+
+        <TextField
+          size="small"
+          label={i18n("tranbox_offset_y")}
+          type="number"
+          name="boxOffsetY"
+          defaultValue={boxOffsetY}
+          onChange={handleChange}
+        />
+
         <TextField
           select
           size="small"

src/views/Selection/TranBtn.js

@@ -5,18 +5,11 @@ export default function TranBtn({
   onTrigger,
   btnEvent,
   position,
-  tranboxSetting,
+  btnOffsetX,
+  btnOffsetY,
 }) {
-  const left = limitNumber(
-    position.x + tranboxSetting.btnOffsetX,
-    0,
-    window.innerWidth - 32
-  );
-  const top = limitNumber(
-    position.y + tranboxSetting.btnOffsetY,
-    0,
-    window.innerHeight - 32
-  );
+  const left = limitNumber(position.x + btnOffsetX, 0, window.innerWidth - 32);
+  const top = limitNumber(position.y + btnOffsetY, 0, window.innerHeight - 32);
 
   return (
     <div

src/views/Selection/index.js

@@ -29,6 +29,10 @@ export default function Slection({
     tranboxShortcut = DEFAULT_TRANBOX_SHORTCUT,
     triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
     extStyles,
+    btnOffsetX,
+    btnOffsetY,
+    boxOffsetX = 0,
+    boxOffsetY = 10,
   } = tranboxSetting;
 
   const boxWidth =
@@ -79,16 +83,18 @@ export default function Slection({
 
     const rect = selection?.getRangeAt(0)?.getBoundingClientRect();
     if (rect && followSelection) {
+      const x = (rect.left + rect.right) / 2 + boxOffsetX;
+      const y = rect.bottom + boxOffsetY;
       setBoxPosition({
-        x: limitNumber(rect.right, 0, window.innerWidth - 300),
-        y: limitNumber(rect.bottom, 0, window.innerHeight - 200),
+        x: limitNumber(x, 0, window.innerWidth - 300),
+        y: limitNumber(y, 0, window.innerHeight - 200),
       });
     }
 
     setSelText(selectedText);
     setText(selectedText);
     setShowBox(true);
-  }, [followSelection]);
+  }, [followSelection, boxOffsetX, boxOffsetY]);
 
   const btnEvent = useMemo(() => {
     if (isMobile) {
@@ -114,9 +120,11 @@ export default function Slection({
 
       const rect = selection?.getRangeAt(0)?.getBoundingClientRect();
       if (rect && followSelection) {
+        const x = (rect.left + rect.right) / 2 + boxOffsetX;
+        const y = rect.bottom + boxOffsetY;
         setBoxPosition({
-          x: limitNumber(rect.right, 0, window.innerWidth - 300),
-          y: limitNumber(rect.bottom, 0, window.innerHeight - 200),
+          x: limitNumber(x, 0, window.innerWidth - 300),
+          y: limitNumber(y, 0, window.innerHeight - 200),
         });
       }
 
@@ -139,7 +147,14 @@ export default function Slection({
         handleMouseup
       );
     };
-  }, [hideTranBtn, triggerMode, followSelection, handleTrigger]);
+  }, [
+    hideTranBtn,
+    triggerMode,
+    followSelection,
+    boxOffsetX,
+    boxOffsetY,
+    handleTrigger,
+  ]);
 
   useEffect(() => {
     if (isExt) {
@@ -225,7 +240,8 @@ export default function Slection({
       {showBtn && (
         <TranBtn
           position={position}
-          tranboxSetting={tranboxSetting}
+          btnOffsetX={btnOffsetX}
+          btnOffsetY={btnOffsetY}
           btnEvent={btnEvent}
           onTrigger={(e) => {
             e.stopPropagation();