From 5c44ba1da850c77d069d5fde17cf5aa9dac13f49 Mon Sep 17 00:00:00 2001 From: Gabe Date: Wed, 27 Aug 2025 01:02:11 +0800 Subject: [PATCH] feat: enhanced hook function functionality --- src/config/i18n.js | 12 ++++++------ src/hooks/Translate.js | 4 +--- src/libs/translator.js | 31 ++++++++++++++++++------------- src/views/Content/index.js | 24 +++++++++++++----------- 4 files changed, 38 insertions(+), 33 deletions(-) diff --git a/src/config/i18n.js b/src/config/i18n.js index e7d1e4b..61e9da5 100644 --- a/src/config/i18n.js +++ b/src/config/i18n.js @@ -1184,9 +1184,9 @@ export const I18N = { zh_TW: `翻譯開始 Hook`, }, translate_start_hook_helper: { - zh: `翻译开始时运行，入参为： 翻译节点，原文文本。`, - en: `Run when translation starts, the input parameters are: translation node, original text.`, - zh_TW: `翻譯開始時執行，入參為：翻譯節點、原文文字。`, + zh: `翻译开始时运行，入参为： 翻译节点，原文文本，返回：待译文本。`, + en: `Run when translation starts, the input parameters are: translation node, original text, and returns: text to be translated.`, + zh_TW: `翻譯開始時執行，入參為：翻譯節點、原文文字，回傳：待譯文本。`, }, translate_end_hook: { zh: `翻译完成钩子函数`, @@ -1194,9 +1194,9 @@ export const I18N = { zh_TW: `翻譯完成 Hook`, }, translate_end_hook_helper: { - zh: `翻译完成时运行，入参为： 翻译节点，原文文本，译文文本，保留元素。`, - en: `Run when the translation is completed, the input parameters are: translation node, original text, translation text, retained elements.`, - zh_TW: `翻譯完成時執行，入參為：翻譯節點、原文文字、譯文文字、保留元素。`, + zh: `翻译完成时运行，入参为： 翻译节点，原文文本，译文文本，保留元素、术语列表，返回：译文文本。`, + en: `Run when the translation is completed, the input parameters are: translation node, original text, translation text, retained elements, and returns: translation text.`, + zh_TW: `翻譯完成時執行，入參為：翻譯節點、原文文字、譯文文字、保留元素，返回：譯文文本。`, }, translate_remove_hook: { zh: `翻译移除钩子函数`, diff --git a/src/hooks/Translate.js b/src/hooks/Translate.js index 1082d16..f9e5131 100644 --- a/src/hooks/Translate.js +++ b/src/hooks/Translate.js @@ -14,7 +14,7 @@ import { kissLog } from "../libs/log"; */ export function useTranslate(q, rule, setting) { const [text, setText] = useState(""); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const [sameLang, setSamelang] = useState(false); const { translator, fromLang, toLang, detectRemote, skipLangs = [] } = rule; @@ -22,8 +22,6 @@ export function useTranslate(q, rule, setting) { useEffect(() => { (async () => { try { - setLoading(true); - if (!q.replace(/\[(\d+)\]/g, "").trim()) { setText(q); setSamelang(false); diff --git a/src/libs/translator.js b/src/libs/translator.js index 37a2742..c10d94c 100644 --- a/src/libs/translator.js +++ b/src/libs/translator.js @@ -495,13 +495,6 @@ export class Translator { let q = el.innerText.trim(); const keeps = []; - // 翻译开始钩子函数 - const { transStartHook } = this._rule; - if (transStartHook?.trim()) { - interpreter.run(`exports.transStartHook = ${transStartHook}`); - interpreter.exports.transStartHook(el, q); - } - // 保留元素 const keepSelector = this._keepSelector.trim(); if (keepSelector) { @@ -540,17 +533,22 @@ export class Translator { const re = new RegExp(term[0], "g"); q = q.replace(re, (t) => { const text = `[${keeps.length}]`; - keeps.push(`${term[1] || t}`); + keeps.push(`${term[1] || t}`); return text; }); } } - // 附加样式 - const { selectStyle, parentStyle } = this._rule; - el.style.cssText += selectStyle; - if (el.parentElement) { - el.parentElement.style.cssText += parentStyle; + // 翻译开始钩子函数 + const { transStartHook } = this._rule; + if (transStartHook?.trim()) { + interpreter.run(`exports.transStartHook = ${transStartHook}`); + q = interpreter.exports.transStartHook(el, q); + } + + // 终止翻译 + if (!q) { + return; } // 插入译文节点 @@ -564,5 +562,12 @@ export class Translator { // 渲染译文节点 const root = createRoot(traEl); root.render(); + + // 附加样式 + const { selectStyle, parentStyle } = this._rule; + el.style.cssText += selectStyle; + if (el.parentElement) { + el.parentElement.style.cssText += parentStyle; + } }; } diff --git a/src/views/Content/index.js b/src/views/Content/index.js index c7323b6..35707e6 100644 --- a/src/views/Content/index.js +++ b/src/views/Content/index.js @@ -129,14 +129,6 @@ export default function Content({ q, keeps, translator, $el }) { }; }, [translator.eventName]); - useEffect(() => { - // 运行钩子函数 - if (text && transEndHook?.trim()) { - interpreter.run(`exports.transEndHook = ${transEndHook}`); - interpreter.exports.transEndHook($el, q, text, keeps); - } - }, [$el, q, text, keeps, transEndHook]); - const gap = useMemo(() => { if (transOnly === "true") { return ""; @@ -154,6 +146,16 @@ export default function Content({ q, keeps, translator, $el }) { [textStyle, textDiyStyle, bgColor, transTag] ); + const trText = useMemo(() => { + if (loading || !transEndHook?.trim()) { + return text; + } + + // 翻译完成钩子函数 + interpreter.run(`exports.transEndHook = ${transEndHook}`); + return interpreter.exports.transEndHook($el, q, text, keeps); + }, [loading, $el, q, text, keeps, transEndHook]); + if (loading) { return ( <> @@ -163,7 +165,7 @@ export default function Content({ q, keeps, translator, $el }) { ); } - if (!text || sameLang) { + if (!trText || sameLang) { return; } @@ -186,7 +188,7 @@ export default function Content({ q, keeps, translator, $el }) { keeps[parseInt(p)]), + __html: trText.replace(/\[(\d+)\]/g, (_, p) => keeps[parseInt(p)]), }} /> @@ -196,7 +198,7 @@ export default function Content({ q, keeps, translator, $el }) { return ( <> {gap} - {text} + {trText} ); }