diff --git a/src/plugins/entryPoint/background.js b/src/plugins/entryPoint/background.js index 0fa651b..883e49f 100644 --- a/src/plugins/entryPoint/background.js +++ b/src/plugins/entryPoint/background.js @@ -3,8 +3,6 @@ import { getCurrentTabId, getCurrentTabUrl, - getLoginToken, - pingPong, setLoginToken, } from "./utils/background.utils"; diff --git a/src/plugins/general/utils.js b/src/plugins/general/utils.js index e97e8ad..0694054 100644 --- a/src/plugins/general/utils.js +++ b/src/plugins/general/utils.js @@ -157,14 +157,14 @@ function convertCurrentTextNodeContent(textNode, targetWordList) { export function customizeGeneralEvent() { addSelectionChangeEvent(); - customizeMouseDownEvent(); + addMouseDownEvent(); listenFromFloatingPanelEvent(); } /** * 监听mousedown事件,当用户点击悬浮图标时,显示翻译面板 */ -function customizeMouseDownEvent() { +function addMouseDownEvent() { document.addEventListener("mousedown", async function (event) { const mouseX = event.clientX; const mouseY = event.clientY; @@ -235,17 +235,18 @@ function customizeMouseDownEvent() { * 监听selectionchange事件,当用户选中文本时,显示悬浮图标 */ function addSelectionChangeEvent() { - document.addEventListener("selectionchange", function () { + document.addEventListener("selectionchange", async function () { + sendMessageFromGeneralScriptToFloatingPanel({ + type: "token", + message: await getLoginToken(), + }); const selection = window.getSelection(); const range = selection.getRangeAt(0); if (selection.toString().trim()) { const rect = range.getBoundingClientRect(); - let x = calculateSelectionPosition(rect, floatingIconSize).x; - let y = calculateSelectionPosition(rect, floatingIconSize).y; - gSelectionPosition = calculateSelectionPosition( - rect, - translationPanelSize - ); + let x = calculateFloatingIconPosition(rect, floatingIconSize).x; + let y = calculateFloatingIconPosition(rect, floatingIconSize).y; + gSelectionPosition = calculateFloatingPanelPosition(range); gSelectionPosition.y = rect.top; // FIXME: 这里没有考虑到selection的位置可能会超出屏幕的情况 showFloatingIcon(x, y); @@ -254,7 +255,7 @@ function addSelectionChangeEvent() { }); } -function calculateSelectionPosition(rect, baseElementSize) { +function calculateFloatingIconPosition(rect, baseElementSize) { return { x: (rect.right - rect.left) / 2 + rect.left - baseElementSize.width / 2, y: rect.top - baseElementSize.height, diff --git a/src/webPage/translationFloatingPanel/src/App.vue b/src/webPage/translationFloatingPanel/src/App.vue index 471597a..5bf4484 100644 --- a/src/webPage/translationFloatingPanel/src/App.vue +++ b/src/webPage/translationFloatingPanel/src/App.vue @@ -34,7 +34,7 @@ import { SEARCH_WORD, USER_SETTING } from './constants'; -import { customPost } from './utils/customRequest'; +import { customGet, customPost } from './utils/customRequest'; interface CustomEvent extends Event { detail: string; @@ -163,7 +163,7 @@ function handleClick() { } function listenEventFromGeneralScript() { - document.addEventListener('generalScriptEvent', (e: Event) => { + document.addEventListener('generalScriptEvent', async (e: Event) => { const ee = e as CustomEvent; const data = JSON.parse(ee.detail); switch (data.type) { @@ -192,7 +192,17 @@ function listenEventFromGeneralScript() { } break; case 'token': - localStorage.setItem('token', data.message); + localStorage.setItem('floatingPanelToken', data.message); + if (!groupId.value) { + if (shouldAddToDefaultGroup()) { + const userSetting = await customGet(USER_SETTING); + groupId.value = userSetting.data.data.defaultGroupID; + } else { + const g = (await createGroup()).data.data; + groupId.value = g._id; + } + } + break; default: break; @@ -253,13 +263,6 @@ async function createGroup() { onMounted(async () => { listenEventFromGeneralScript(); - if (shouldAddToDefaultGroup()) { - const userSetting = (await customPost(USER_SETTING, {})).data.data; - groupId.value = userSetting.defaultGroupID; - } else { - const g = (await createGroup()).data.data; - groupId.value = g._id; - } }); function sendMessageToGeneralScript(message: any) { diff --git a/src/webPage/translationFloatingPanel/src/utils/customRequest.ts b/src/webPage/translationFloatingPanel/src/utils/customRequest.ts index 14f1a4b..e98574b 100644 --- a/src/webPage/translationFloatingPanel/src/utils/customRequest.ts +++ b/src/webPage/translationFloatingPanel/src/utils/customRequest.ts @@ -8,21 +8,28 @@ const instance = axios.create({ } }); +axios.interceptors.request.use((config) => { + return config; +}); + axios.interceptors.response.use((response) => { return response; }); export const customGet = async (url: string) => { - instance.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`; + instance.defaults.headers.common['Authorization'] = + `Bearer ${localStorage.getItem('floatingPanelToken')}`; return instance.get(url); }; export const customPost = async (url: string, data: any) => { - instance.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`; + instance.defaults.headers.common['Authorization'] = + `Bearer ${localStorage.getItem('floatingPanelToken')}`; return instance.post(url, data); }; export const customDelete = async (url: string, data: any) => { - instance.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`; + instance.defaults.headers.common['Authorization'] = + `Bearer ${localStorage.getItem('floatingPanelToken')}`; return instance.delete(url, data); };