tranbox...

src/apis/index.js

@@ -114,7 +114,7 @@ export const apiTranslate = async ({
     OPT_LANGS_SPECIAL[translator].get(fromLang) ??
     OPT_LANGS_SPECIAL[translator].get("auto");
   const to = OPT_LANGS_SPECIAL[translator].get(toLang);
-  if (!to) {
+  if (!text || !to) {
     console.log(`[trans] target lang: ${toLang} not support`);
     return [trText, isSame];
   }

src/common.js

@@ -78,7 +78,10 @@ export async function showFab(translator) {
   );
 }
 
-export function showTransbox({ tranboxSetting = DEFAULT_TRANBOX_SETTING }) {
+export function showTransbox({
+  tranboxSetting = DEFAULT_TRANBOX_SETTING,
+  transApis,
+}) {
   if (!tranboxSetting?.transOpen) {
     return;
   }
@@ -99,7 +102,7 @@ export function showTransbox({ tranboxSetting = DEFAULT_TRANBOX_SETTING }) {
   ReactDOM.createRoot(shadowRootElement).render(
     <React.StrictMode>
       <CacheProvider value={cache}>
-        <Slection tranboxSetting={tranboxSetting} />
+        <Slection tranboxSetting={tranboxSetting} transApis={transApis} />
       </CacheProvider>
     </React.StrictMode>
   );

src/config/i18n.js

@@ -623,12 +623,20 @@ export const I18N = {
     zh: `显示翻译框快捷键`,
     en: `Toggle Translate Box Shortcut`,
   },
-  tanbtn_offset_x: {
+  tranbtn_offset_x: {
     zh: `翻译按钮偏移（X）`,
     en: `Translate Button Offset (X)`,
   },
-  tanbtn_offset_y: {
+  tranbtn_offset_y: {
     zh: `翻译按钮偏移（Y）`,
     en: `Translate Button Offset (Y)`,
   },
+  translated_text: {
+    zh: `译文`,
+    en: `Translated Text`,
+  },
+  original_text: {
+    zh: `原文`,
+    en: `Original Text`,
+  },
 };

src/libs/utils.js

@@ -223,3 +223,13 @@ export const matchInputStr = (str, sign) => {
   }
   return str.match(reg);
 };
+
+/**
+ * 判断是否英文单词
+ * @param {*} str
+ * @returns
+ */
+export const isValidWord = (str) => {
+  const regex = /^[a-zA-Z-]+$/;
+  return regex.test(str);
+};

src/views/Options/Tranbox.js

@@ -110,7 +110,7 @@ export default function Tranbox() {
 
         <TextField
           size="small"
-          label={i18n("tanbtn_offset_x")}
+          label={i18n("tranbtn_offset_x")}
           type="number"
           name="btnOffsetX"
           defaultValue={btnOffsetX}
@@ -119,7 +119,7 @@ export default function Tranbox() {
 
         <TextField
           size="small"
-          label={i18n("tanbtn_offset_y")}
+          label={i18n("tranbtn_offset_y")}
           type="number"
           name="btnOffsetY"
           defaultValue={btnOffsetY}

src/views/Selection/DraggableResizable.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
 
@@ -75,6 +75,7 @@ function Pointer({
           w = origin.w + dx;
           h = origin.h + dy;
           break;
+        default:
       }
 
       if (w < minSize.w) {
@@ -134,7 +135,8 @@ export default function DraggableResizable({
     w: 1200,
     h: 1200,
   },
-  sx,
+  onChangeSize,
+  onChangePosition,
 }) {
   const lineWidth = 4;
   const [position, setPosition] = useState(defaultPosition);
@@ -149,6 +151,14 @@ export default function DraggableResizable({
     maxSize,
   };
 
+  useEffect(() => {
+    onChangeSize && onChangeSize(size);
+  }, [size, onChangeSize]);
+
+  useEffect(() => {
+    onChangePosition && onChangePosition(position);
+  }, [position, onChangePosition]);
+
   return (
     <Box
       style={{
@@ -158,7 +168,7 @@ export default function DraggableResizable({
         display: "grid",
         gridTemplateColumns: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
         gridTemplateRows: `${lineWidth * 2}px auto ${lineWidth * 2}px`,
-        zIndex: 10000,
+        zIndex: 2147483647,
       }}
     >
       <Pointer

src/views/Selection/Tranbox.js

@@ -8,21 +8,139 @@ 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 } from "../../config";
+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";
 
-function TranForm({ tranboxSetting }) {
+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();
 
-  const {
+  const [editMode, setEditMode] = useState(false);
-    transOpen,
+  const [editText, setEditText] = useState("");
-    translator,
+  const [translator, setTranslator] = useState(tranboxSetting.translator);
-    fromLang,
+  const [fromLang, setFromLang] = useState(tranboxSetting.fromLang);
-    toLang,
+  const [toLang, setToLang] = useState(tranboxSetting.toLang);
-    tranboxShortcut,
+  const inputRef = useRef(null);
-    btnOffsetX,
-    btnOffsetY,
-  } = tranboxSetting;
 
   return (
     <Stack sx={{ p: 2 }} spacing={2}>
@@ -37,7 +155,9 @@ function TranForm({ tranboxSetting }) {
               name="fromLang"
               value={fromLang}
               label={i18n("from_lang")}
-              //   onChange={handleChange}
+              onChange={(e) => {
+                setFromLang(e.target.value);
+              }}
             >
               {OPT_LANGS_FROM.map(([lang, name]) => (
                 <MenuItem key={lang} value={lang}>
@@ -55,7 +175,9 @@ function TranForm({ tranboxSetting }) {
               name="toLang"
               value={toLang}
               label={i18n("to_lang")}
-              //   onChange={handleChange}
+              onChange={(e) => {
+                setToLang(e.target.value);
+              }}
             >
               {OPT_LANGS_TO.map(([lang, name]) => (
                 <MenuItem key={lang} value={lang}>
@@ -73,7 +195,9 @@ function TranForm({ tranboxSetting }) {
               value={translator}
               name="translator"
               label={i18n("translate_service")}
-              // onChange={handleChange}
+              onChange={(e) => {
+                setTranslator(e.target.value);
+              }}
             >
               {OPT_TRANS_ALL.map((item) => (
                 <MenuItem key={item} value={item}>
@@ -84,20 +208,72 @@ function TranForm({ tranboxSetting }) {
           </Grid>
         </Grid>
       </Box>
+
+      <Box>
+        <TextField
+          label={i18n("original_text")}
+          inputRef={inputRef}
+          fullWidth
+          multiline
+          value={editMode ? editText : text}
+          disabled={!editMode}
+          onChange={(e) => {
+            setEditText(e.target.value);
+          }}
+          onClick={() => {
+            setEditMode(true);
+            setEditText(text);
+            const timer = setTimeout(() => {
+              clearTimeout(timer);
+              inputRef.current?.focus();
+            }, 100);
+          }}
+          onBlur={() => {
+            setEditMode(false);
+            setText(editText.trim());
+          }}
+        />
+      </Box>
+
+      <TranCont
+        text={text}
+        translator={translator}
+        fromLang={fromLang}
+        toLang={toLang}
+        transApis={transApis}
+      />
     </Stack>
   );
 }
 
-export default function TranBox({ position, setShowBox, tranboxSetting }) {
+export default function TranBox({
+  text,
+  setText,
+  setShowBox,
+  tranboxSetting,
+  transApis,
+  boxSize,
+  setBoxSize,
+  boxPosition,
+  setBoxPosition,
+}) {
   return (
     <SettingProvider>
       <ThemeProvider>
         <DraggableResizable
-          defaultPosition={position}
+          defaultPosition={boxPosition}
+          defaultSize={boxSize}
           header={<Header setShowPopup={setShowBox} />}
+          onChangeSize={setBoxSize}
+          onChangePosition={setBoxPosition}
         >
           <Divider />
-          <TranForm tranboxSetting={tranboxSetting} />
+          <TranForm
+            text={text}
+            setText={setText}
+            tranboxSetting={tranboxSetting}
+            transApis={transApis}
+          />
         </DraggableResizable>
       </ThemeProvider>
     </SettingProvider>

src/views/Selection/Tranbtn.js

@@ -6,6 +6,7 @@ export default function TranBtn({ onClick, position, tranboxSetting }) {
         position: "fixed",
         left: position.x + tranboxSetting.btnOffsetX,
         top: position.y + tranboxSetting.btnOffsetY,
+        zIndex: 2147483647,
       }}
       onClick={onClick}
       onMouseUp={(e) => {

src/views/Selection/index.js

@@ -1,26 +1,38 @@
 import { useState, useEffect } from "react";
 import TranBtn from "./Tranbtn";
 import TranBox from "./Tranbox";
+import { shortcutRegister } from "../../libs/shortcut";
 
-export default function Slection({ tranboxSetting }) {
+export default function Slection({ tranboxSetting, transApis }) {
   const [showBox, setShowBox] = useState(false);
   const [showBtn, setShowBtn] = useState(false);
+  const [selectedText, setSelText] = useState("");
   const [text, setText] = useState("");
   const [position, setPosition] = useState({ x: 0, y: 0 });
-
+  const [boxSize, setBoxSize] = useState({ w: 600, h: 400 });
-  console.log("tranboxSetting", tranboxSetting);
+  const [boxPosition, setBoxPosition] = useState({
+    x: (window.innerWidth - 600) / 2,
+    y: (window.innerHeight - 400) / 2,
+  });
 
   function handleMouseup(e) {
-    const text = window.getSelection()?.toString()?.trim() || "";
+    const selectedText = window.getSelection()?.toString()?.trim() || "";
+    if (!selectedText) {
+      setShowBtn(false);
+      return;
+    }
+
+    setSelText(selectedText);
+    setShowBtn(true);
     setPosition({ x: e.clientX, y: e.clientY });
-    setText(text);
-    setShowBtn(!!text);
   }
 
   const handleClick = (e) => {
     e.stopPropagation();
     setShowBtn(false);
-    if (!!text) {
+
+    setText(selectedText);
+    if (!showBox) {
       setShowBox(true);
     }
   };
@@ -32,12 +44,31 @@ export default function Slection({ tranboxSetting }) {
     };
   }, []);
 
+  useEffect(() => {
+    const clearShortcut = shortcutRegister(
+      tranboxSetting.tranboxShortcut,
+      () => {
+        setShowBox((pre) => !pre);
+      }
+    );
+
+    return () => {
+      clearShortcut();
+    };
+  }, [tranboxSetting.tranboxShortcut, setShowBox]);
+
   return (
     <>
       {showBox && (
         <TranBox
-          position={position}
+          text={text}
+          setText={setText}
+          boxSize={boxSize}
+          setBoxSize={setBoxSize}
+          boxPosition={boxPosition}
+          setBoxPosition={setBoxPosition}
           tranboxSetting={tranboxSetting}
+          transApis={transApis}
           setShowBox={setShowBox}
         />
       )}