tranbox

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);
   }

src/userscript.js

@@ -63,12 +63,12 @@ function runSettingPage() {
     // 监听消息
     windowListener(rule);
 
-    // 浮球按钮
-    await showFab(translator);
-
     // 划词翻译
     showTransbox(setting);
 
+    // 浮球按钮
+    await showFab(translator);
+
     // 同步订阅规则
     await trySyncAllSubRules(setting);
   } catch (err) {

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: <InputIcon />,
+      icon: <TranslateIcon />,
     },
     {
       id: "apis_setting",

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 (
+    <Box>
+      <div style={{ fontWeight: "bold" }}>
+        {dictResult.simple_means?.word_name}
+      </div>
+      <div>
+        {Object.entries(dictResult.simple_means?.exchange || {}).map(
+          ([key, val]) => (
+            <span key={key}>{`${exchangeMap[key] || key}: ${val.join(
+              ","
+            )}; `}</span>
+          )
+        )}
+      </div>
+      <div>
+        {Object.values(dictResult.simple_means?.tags || {})
+          .flat()
+          .filter((item) => item)
+          .join(", ")}
+      </div>
+      {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
+        <div key={idx}>
+          <div>{`英: /${ph_en}/ 美: /${ph_am}/`}</div>
+          <ul>
+            {parts.map(({ part, means }, idx) => (
+              <li key={idx}>{`[${part}] ${means.join("; ")}`}</li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </Box>
+  );
+}
+
+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 (
+    <>
+      <Box>
+        <TextField
+          label={i18n("translated_text")}
+          fullWidth
+          multiline
+          value={trText}
+        />
+      </Box>
+
+      {loading && <CircularProgress size={24} />}
+      {error && <Alert severity="error">{error}</Alert>}
+      {dictResult && <DictCont dictResult={dictResult} />}
+    </>
+  );
+}

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 {
+import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
-  OPT_TRANS_ALL,
+import { useState, useRef } from "react";
-  OPT_LANGS_FROM,
+import TranCont from "./TranCont";
-  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 (
-    <Box>
-      <h4>{dictResult.simple_means?.word_name}</h4>
-      <p>
-        {Object.entries(dictResult.simple_means?.exchange || {}).map(
-          ([key, val]) => (
-            <span key={key}>{`${exchangeMap[key] || key}: ${val.join(
-              ","
-            )}; `}</span>
-          )
-        )}
-      </p>
-      <p>
-        {Object.values(dictResult.simple_means?.tags || {})
-          .map((vals) => vals.join(", "))
-          .join(", ")}
-      </p>
-      {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
-        <div key={idx}>
-          <p>{`英: [${ph_en}] 美: [${ph_am}]`}</p>
-          {parts.map(({ part, means }, idx) => (
-            <p key={idx}>{`[${part}]: ${means.join("; ")}`}</p>
-          ))}
-        </div>
-      ))}
-    </Box>
-  );
-}
-
-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 (
-    <>
-      <Box>
-        <TextField
-          label={i18n("translated_text")}
-          fullWidth
-          multiline
-          value={trText}
-        />
-      </Box>
-
-      {loading && <CircularProgress size={24} />}
-      {error && <Alert severity="error">{error}</Alert>}
-      {dictResult && <DictCont dictResult={dictResult} />}
-    </>
-  );
-}
 
 function TranForm({ text, setText, tranboxSetting, transApis }) {
   const i18n = useI18n();

src/views/Selection/Tranbtn.js

@@ -15,28 +15,20 @@ export default function TranBtn({ onClick, position, tranboxSetting }) {
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
+        width="20"
-        height="24"
+        height="20"
         viewBox="0 0 32 32"
         version="1.1"
       >
         <path
-          d="M 0.455 1.257 C 0.173 1.991, 0.068 9.096, 0.221 17.046 L 0.500 31.500 15.365 31.777 C 25.475 31.966, 30.672 31.687, 31.615 30.905 C 32.681 30.020, 33 26.349, 33 14.967 L 33 0.180 16.984 0.050 C 4.455 -0.051, 0.856 0.212, 0.455 1.257 M 0.402 16 C 0.402 24.525, 0.556 28.013, 0.743 23.750 C 0.931 19.488, 0.931 12.513, 0.743 8.250 C 0.556 3.988, 0.402 7.475, 0.402 16 M 3 16 C 3 26.333, 3.121 27, 5 27 C 6.681 27, 7 26.333, 7 22.826 L 7 18.651 9.500 21 C 10.875 22.292, 12 24.170, 12 25.174 C 12 26.333, 12.730 27, 14 27 C 17.333 27, 16.670 21.670, 12.978 18.780 L 9.957 16.415 12.978 13.521 C 14.640 11.928, 16 10.004, 16 9.243 C 16 8.382, 16.848 7.981, 18.250 8.180 C 20.374 8.482, 20.516 9.020, 20.788 17.750 C 21.011 24.955, 21.390 27, 22.500 27 C 23.610 27, 23.989 24.955, 24.212 17.750 C 24.484 9.020, 24.626 8.482, 26.750 8.180 C 27.987 8.005, 29 7.217, 29 6.430 C 29 5.302, 27.205 5, 20.500 5 C 12.937 5, 12 5.201, 12 6.826 C 12 7.830, 10.875 9.708, 9.500 11 L 7 13.349 7 9.174 C 7 5.667, 6.681 5, 5 5 C 3.121 5, 3 5.667, 3 16"
+          d="M0 0 C10.56 0 21.12 0 32 0 C32 10.56 32 21.12 32 32 C21.44 32 10.88 32 0 32 C0 21.44 0 10.88 0 0 Z "
-          stroke="none"
+          fill="#209CEE"
-          fill="#209cee"
+          transform="translate(0,0)"
-          fillRule="evenodd"
         />
         <path
-          d="M 4 16 C 4 22.667, 4.394 27, 5 27 C 5.550 27, 6 25.200, 6 23 C 6 20.345, 6.446 19, 7.326 19 C 9.199 19, 13 23.286, 13 25.398 C 13 26.371, 13.562 26.979, 14.250 26.750 C 16.713 25.930, 16.145 22.745, 12.946 19.444 L 9.705 16.100 12.852 12.515 C 14.584 10.544, 16 8.558, 16 8.104 C 16 7.649, 17.125 7.492, 18.500 7.755 C 20.957 8.225, 21 8.396, 21 17.700 C 21 24.828, 21.309 27.064, 22.250 26.752 C 23.100 26.471, 23.592 23.401, 23.788 17.169 C 24.049 8.823, 24.251 8, 26.038 8 C 27.140 8, 28 7.323, 28 6.456 C 28 5.179, 26.699 4.953, 20.500 5.151 C 14.356 5.347, 13 5.683, 13 7.008 C 13 8.949, 7.650 14.316, 6.681 13.347 C 6.306 12.973, 6 10.942, 6 8.833 C 6 6.725, 5.550 5, 5 5 C 4.394 5, 4 9.333, 4 16"
+          d="M0 0 C0.66 0 1.32 0 2 0 C2 2.97 2 5.94 2 9 C2.969375 8.2575 3.93875 7.515 4.9375 6.75 C5.48277344 6.33234375 6.02804688 5.9146875 6.58984375 5.484375 C8.39053593 3.83283924 8.39053593 3.83283924 9 0 C13.95 0 18.9 0 24 0 C24 0.99 24 1.98 24 3 C22.68 3 21.36 3 20 3 C20 9.27 20 15.54 20 22 C19.01 22 18.02 22 17 22 C17 15.73 17 9.46 17 3 C15.35 3 13.7 3 12 3 C11.731875 3.598125 11.46375 4.19625 11.1875 4.8125 C10.01506533 6.97224808 8.80630718 8.35790256 7 10 C8.01790655 12.27071461 8.77442829 13.80784632 10.6875 15.4375 C11.120625 15.953125 11.55375 16.46875 12 17 C11.6875 19.6875 11.6875 19.6875 11 22 C10.34 22 9.68 22 9 22 C8.773125 21.236875 8.54625 20.47375 8.3125 19.6875 C6.73268318 16.45263699 5.16717283 15.58358642 2 14 C2 16.64 2 19.28 2 22 C1.34 22 0.68 22 0 22 C0 14.74 0 7.48 0 0 Z "
-          stroke="none"
+          fill="#E9F5FD"
-          fill="#f5f9fc"
+          transform="translate(4,5)"
-          fillRule="evenodd"
-        />
-        <path
-          d="M 3.378 16 C 3.378 22.325, 3.541 24.912, 3.739 21.750 C 3.937 18.587, 3.937 13.412, 3.739 10.250 C 3.541 7.087, 3.378 9.675, 3.378 16 M 6.175 8.691 C 6.079 10.996, 6.381 13.118, 6.847 13.405 C 8.295 14.300, 13.227 8.362, 12.708 6.349 C 12.289 4.723, 12.218 4.750, 12.116 6.576 C 12.052 7.717, 10.903 9.682, 9.563 10.941 L 7.126 13.230 6.738 8.865 L 6.349 4.500 6.175 8.691 M 15.333 5.667 C 15.700 6.033, 16.300 6.033, 16.667 5.667 C 17.033 5.300, 16.733 5, 16 5 C 15.267 5, 14.967 5.300, 15.333 5.667 M 28.079 6.583 C 28.127 7.748, 28.364 7.985, 28.683 7.188 C 28.972 6.466, 28.936 5.603, 28.604 5.271 C 28.272 4.939, 28.036 5.529, 28.079 6.583 M 16 7.500 C 16 7.775, 16.225 8, 16.500 8 C 16.775 8, 17 7.775, 17 7.500 C 17 7.225, 16.775 7, 16.500 7 C 16.225 7, 16 7.225, 16 7.500 M 20 8.500 C 20 8.775, 20.225 9, 20.500 9 C 20.775 9, 21 8.775, 21 8.500 C 21 8.225, 20.775 8, 20.500 8 C 20.225 8, 20 8.225, 20 8.500 M 24 8.500 C 24 8.775, 24.225 9, 24.500 9 C 24.775 9, 25 8.775, 25 8.500 C 25 8.225, 24.775 8, 24.500 8 C 24.225 8, 24 8.225, 24 8.500 M 12.573 12.906 L 9.645 16.500 13.021 13.282 C 14.878 11.512, 16.196 9.895, 15.949 9.688 C 15.702 9.481, 14.183 10.929, 12.573 12.906 M 13.500 20 C 14.495 21.100, 15.535 22, 15.810 22 C 16.085 22, 15.495 21.100, 14.500 20 C 13.505 18.900, 12.465 18, 12.190 18 C 11.915 18, 12.505 18.900, 13.500 20 M 6.272 23 C 6.272 25.475, 6.467 26.488, 6.706 25.250 C 6.944 24.012, 6.944 21.988, 6.706 20.750 C 6.467 19.512, 6.272 20.525, 6.272 23 M 9.650 21 C 10.833 22.375, 12.018 24.400, 12.284 25.500 C 12.753 27.438, 12.772 27.436, 12.884 25.424 C 12.948 24.283, 11.762 22.258, 10.250 20.924 L 7.500 18.500 9.650 21 M 15 26.500 C 15 26.775, 15.225 27, 15.500 27 C 15.775 27, 16 26.775, 16 26.500 C 16 26.225, 15.775 26, 15.500 26 C 15.225 26, 15 26.225, 15 26.500 M 23 26.500 C 23 26.775, 23.225 27, 23.500 27 C 23.775 27, 24 26.775, 24 26.500 C 24 26.225, 23.775 26, 23.500 26 C 23.225 26, 23 26.225, 23 26.500"
-          stroke="none"
-          fill="#259cec"
-          fillRule="evenodd"
         />
       </svg>
     </div>