From f033b11e6338ab09f00dd08bc76f2dedc5d4ebdb Mon Sep 17 00:00:00 2001 From: Gabe Yuan Date: Tue, 24 Oct 2023 23:37:53 +0800 Subject: [PATCH] tranbox --- src/content.js | 6 +- src/userscript.js | 6 +- src/views/Options/Navigator.js | 3 +- src/views/Selection/TranCont.js | 130 ++++++++++++++++++++++++++++++++ src/views/Selection/Tranbox.js | 125 +----------------------------- src/views/Selection/Tranbtn.js | 24 ++---- 6 files changed, 149 insertions(+), 145 deletions(-) create mode 100644 src/views/Selection/TranCont.js diff --git a/src/content.js b/src/content.js index 415a793..0c99f5e 100644 --- a/src/content.js +++ b/src/content.js @@ -65,11 +65,11 @@ function runtimeListener(translator) { windowListener(rule); runtimeListener(translator); - // 浮球按钮 - await showFab(translator); - // 划词翻译 showTransbox(setting); + + // 浮球按钮 + await showFab(translator); } catch (err) { showErr(err); } diff --git a/src/userscript.js b/src/userscript.js index 5b32726..2b2d1bf 100644 --- a/src/userscript.js +++ b/src/userscript.js @@ -63,12 +63,12 @@ function runSettingPage() { // 监听消息 windowListener(rule); - // 浮球按钮 - await showFab(translator); - // 划词翻译 showTransbox(setting); + // 浮球按钮 + await showFab(translator); + // 同步订阅规则 await trySyncAllSubRules(setting); } catch (err) { diff --git a/src/views/Options/Navigator.js b/src/views/Options/Navigator.js index f0ab47c..2f2da95 100644 --- a/src/views/Options/Navigator.js +++ b/src/views/Options/Navigator.js @@ -13,6 +13,7 @@ import SyncIcon from "@mui/icons-material/Sync"; import ApiIcon from "@mui/icons-material/Api"; import SendTimeExtensionIcon from "@mui/icons-material/SendTimeExtension"; import InputIcon from "@mui/icons-material/Input"; +import TranslateIcon from '@mui/icons-material/Translate'; function LinkItem({ label, url, icon }) { const match = useMatch(url); @@ -49,7 +50,7 @@ export default function Navigator(props) { id: "selection_translate", label: i18n("selection_translate"), url: "/tranbox", - icon: , + icon: , }, { id: "apis_setting", diff --git a/src/views/Selection/TranCont.js b/src/views/Selection/TranCont.js new file mode 100644 index 0000000..fffe119 --- /dev/null +++ b/src/views/Selection/TranCont.js @@ -0,0 +1,130 @@ +import TextField from "@mui/material/TextField"; +import Box from "@mui/material/Box"; +import Alert from "@mui/material/Alert"; +import CircularProgress from "@mui/material/CircularProgress"; +import { useI18n } from "../../hooks/I18n"; +import { DEFAULT_TRANS_APIS, OPT_TRANS_BAIDU } from "../../config"; +import { useEffect, useState } from "react"; +import { apiTranslate } from "../../apis"; +import { isValidWord } from "../../libs/utils"; + +const exchangeMap = { + word_third: "第三人称单数", + word_ing: "现在分词", + word_done: "过去式", + word_past: "过去分词", + word_pl: "复数", + word_proto: "原词", +}; + +function DictCont({ dictResult }) { + if (!dictResult) { + return; + } + + return ( + +
+ {dictResult.simple_means?.word_name} +
+
+ {Object.entries(dictResult.simple_means?.exchange || {}).map( + ([key, val]) => ( + {`${exchangeMap[key] || key}: ${val.join( + "," + )}; `} + ) + )} +
+
+ {Object.values(dictResult.simple_means?.tags || {}) + .flat() + .filter((item) => item) + .join(", ")} +
+ {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => ( +
+
{`英: /${ph_en}/ 美: /${ph_am}/`}
+
    + {parts.map(({ part, means }, idx) => ( +
  • {`[${part}] ${means.join("; ")}`}
    • + ))} +
+
+ ))} + + ); +} + +export default function TranCont({ + text, + translator, + fromLang, + toLang, + transApis, +}) { + const i18n = useI18n(); + const [trText, setTrText] = useState(""); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(""); + const [dictResult, setDictResult] = useState(null); + + useEffect(() => { + (async () => { + try { + setLoading(true); + setTrText(""); + setError(""); + setDictResult(null); + + const apis = { ...transApis, ...DEFAULT_TRANS_APIS }; + const apiSetting = apis[translator]; + const tranRes = await apiTranslate({ + text, + translator, + fromLang, + toLang, + apiSetting, + }); + setTrText(tranRes[0]); + + // 词典 + if (isValidWord(text) && toLang.startsWith("zh")) { + if (fromLang === "en" && translator === OPT_TRANS_BAIDU) { + setDictResult(tranRes[2]); + } else { + const dictRes = await apiTranslate({ + text, + translator: OPT_TRANS_BAIDU, + fromLang: "en", + toLang: "zh-CN", + apiSetting: apis[OPT_TRANS_BAIDU], + }); + setDictResult(dictRes[2].dict_result); + } + } + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + })(); + }, [text, translator, fromLang, toLang, transApis]); + + return ( + <> + + + + + {loading && } + {error && {error}} + {dictResult && } + + ); +} diff --git a/src/views/Selection/Tranbox.js b/src/views/Selection/Tranbox.js index 5944b6e..592dde3 100644 --- a/src/views/Selection/Tranbox.js +++ b/src/views/Selection/Tranbox.js @@ -8,129 +8,10 @@ import MenuItem from "@mui/material/MenuItem"; import Grid from "@mui/material/Grid"; import Box from "@mui/material/Box"; import Divider from "@mui/material/Divider"; -import Alert from "@mui/material/Alert"; -import CircularProgress from "@mui/material/CircularProgress"; import { useI18n } from "../../hooks/I18n"; -import { - OPT_TRANS_ALL, - OPT_LANGS_FROM, - OPT_LANGS_TO, - DEFAULT_TRANS_APIS, - OPT_TRANS_BAIDU, -} from "../../config"; -import { useEffect, useState, useRef } from "react"; -import { apiTranslate } from "../../apis"; -import { isValidWord } from "../../libs/utils"; - -const exchangeMap = { - word_third: "第三人称单数", - word_ing: "现在分词", - word_done: "过去式", - word_past: "过去分词", - word_pl: "复数", - word_proto: "原词", -}; - -function DictCont({ dictResult }) { - if (!dictResult) { - return; - } - - return ( - -

{dictResult.simple_means?.word_name}

-

- {Object.entries(dictResult.simple_means?.exchange || {}).map( - ([key, val]) => ( - {`${exchangeMap[key] || key}: ${val.join( - "," - )}; `} - ) - )} -

-

- {Object.values(dictResult.simple_means?.tags || {}) - .map((vals) => vals.join(", ")) - .join(", ")} -

- {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => ( -
-

{`英: [${ph_en}] 美: [${ph_am}]`}

- {parts.map(({ part, means }, idx) => ( -

{`[${part}]: ${means.join("; ")}`}

- ))} -
- ))} - - ); -} - -function TranCont({ text, translator, fromLang, toLang, transApis }) { - const i18n = useI18n(); - const [trText, setTrText] = useState(""); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(""); - const [dictResult, setDictResult] = useState(null); - - useEffect(() => { - (async () => { - try { - setLoading(true); - setTrText(""); - setError(""); - setDictResult(null); - - const apis = { ...transApis, ...DEFAULT_TRANS_APIS }; - const apiSetting = apis[translator]; - const tranRes = await apiTranslate({ - text, - translator, - fromLang, - toLang, - apiSetting, - }); - setTrText(tranRes[0]); - - // 词典 - if (isValidWord(text) && toLang.startsWith("zh")) { - if (fromLang === "en" && translator === OPT_TRANS_BAIDU) { - setDictResult(tranRes[2]); - } else { - const dictRes = await apiTranslate({ - text, - translator: OPT_TRANS_BAIDU, - fromLang: "en", - toLang: "zh-CN", - apiSetting: apis[OPT_TRANS_BAIDU], - }); - setDictResult(dictRes[2].dict_result); - } - } - } catch (err) { - setError(err.message); - } finally { - setLoading(false); - } - })(); - }, [text, translator, fromLang, toLang, transApis]); - - return ( - <> - - - - - {loading && } - {error && {error}} - {dictResult && } - - ); -} +import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config"; +import { useState, useRef } from "react"; +import TranCont from "./TranCont"; function TranForm({ text, setText, tranboxSetting, transApis }) { const i18n = useI18n(); diff --git a/src/views/Selection/Tranbtn.js b/src/views/Selection/Tranbtn.js index 74a9bdc..ab4b002 100644 --- a/src/views/Selection/Tranbtn.js +++ b/src/views/Selection/Tranbtn.js @@ -15,28 +15,20 @@ export default function TranBtn({ onClick, position, tranboxSetting }) { > -