diff --git a/src/config/index.js b/src/config/index.js index ad96222..f13e61e 100644 --- a/src/config/index.js +++ b/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 = "*"; diff --git a/src/libs/index.js b/src/libs/index.js index de2adfe..5d965dc 100644 --- a/src/libs/index.js +++ b/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: 支持通配符(*)匹配 diff --git a/src/userscript.js b/src/userscript.js index 978ead4..b915679 100644 --- a/src/userscript.js +++ b/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( - + ); diff --git a/src/views/Action/Draggable.js b/src/views/Action/Draggable.js index e968c2a..bc3c494 100644 --- a/src/views/Action/Draggable.js +++ b/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; diff --git a/src/views/Action/index.js b/src/views/Action/index.js index 02f7594..12c951a 100644 --- a/src/views/Action/index.js +++ b/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, - top: windowSize.h / 2, + left: fab.x ?? windowSize.w - fabWidth, + top: fab.y ?? windowSize.h / 2, }; return (