fab keep at the last position

src/config/index.js

@@ -9,6 +9,7 @@ export const STOKEY_MSAUTH = `${APP_NAME}_msauth`;
 export const STOKEY_SETTING = `${APP_NAME}_setting`;
 export const STOKEY_RULES = `${APP_NAME}_rules`;
 export const STOKEY_SYNC = `${APP_NAME}_sync`;
+export const STOKEY_FAB = `${APP_NAME}_fab`;
 
 export const GLOBAL_KEY = "*";
 

src/libs/index.js

@@ -3,6 +3,7 @@ import {
   DEFAULT_SETTING,
   STOKEY_SETTING,
   STOKEY_RULES,
+  STOKEY_FAB,
   GLOBLA_RULE,
   GLOBAL_KEY,
 } from "../config";
@@ -32,6 +33,18 @@ export const getSetting = async () => ({
  */
 export const getRules = async () => (await storage.getObj(STOKEY_RULES)) || [];
 
+/**
+ * 查询fab位置信息
+ * @returns
+ */
+export const getFab = async () => (await storage.getObj(STOKEY_FAB)) || {};
+
+/**
+ * 设置fab位置信息
+ * @returns
+ */
+export const setFab = async (obj) => await storage.setObj(STOKEY_FAB, obj);
+
 /**
  * 根据href匹配规则
  * TODO: 支持通配符（*）匹配

src/userscript.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import Action from "./views/Action";
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { getSetting, getRules, matchRule } from "./libs";
+import { getSetting, getRules, matchRule, getFab } from "./libs";
 import { Translator } from "./libs/translator";
 
 /**
@@ -33,6 +33,7 @@ import { Translator } from "./libs/translator";
   const translator = new Translator(rule, setting);
 
   // 浮球按钮
+  const fab = await getFab();
   const $action = document.createElement("div");
   $action.setAttribute("id", "kiss-translator");
   document.body.parentElement.appendChild($action);
@@ -49,7 +50,7 @@ import { Translator } from "./libs/translator";
   ReactDOM.createRoot(shadowRootElement).render(
     <React.StrictMode>
       <CacheProvider value={cache}>
-        <Action translator={translator} />
+        <Action translator={translator} fab={fab} />
       </CacheProvider>
     </React.StrictMode>
   );

src/views/Action/Draggable.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { limitNumber } from "../../libs/utils";
 import { isMobile } from "../../libs/mobile";
+import { setFab } from "../../libs";
 
 const getEdgePosition = (
   { x: left, y: top, edge },
@@ -88,7 +89,7 @@ export default function Draggable({
     setEdgeTimer(
       setTimeout(() => {
         setPosition((pre) => getHidePosition(pre, w, h, width, height));
-      }, 2000)
+      }, 1500)
     );
   }, []);
 
@@ -149,6 +150,15 @@ export default function Draggable({
     goEdge(windowSize.w, windowSize.h, width, height);
   }, [snapEdge, goEdge, windowSize.w, windowSize.h, width, height]);
 
+  useEffect(() => {
+    if (position.hide) {
+      setFab({
+        x: position.x,
+        y: position.y,
+      });
+    }
+  }, [position]);
+
   const opacity = useMemo(() => {
     if (snapEdge) {
       return position.hide ? 0.1 : 1;

src/views/Action/index.js

@@ -12,7 +12,7 @@ import { StoragesProvider } from "../../hooks/Storage";
 import Popup from "../Popup";
 import { debounce } from "../../libs/utils";
 
-export default function Action({ translator }) {
+export default function Action({ translator, fab }) {
   const fabWidth = 40;
   const [showPopup, setShowPopup] = useState(false);
   const [windowSize, setWindowSize] = useState({
@@ -76,8 +76,8 @@ export default function Action({ translator }) {
     windowSize,
     width: fabWidth,
     height: fabWidth,
-    left: windowSize.w - fabWidth,
+    left: fab.x ?? windowSize.w - fabWidth,
-    top: windowSize.h / 2,
+    top: fab.y ?? windowSize.h / 2,
   };
 
   return (