feat: export word & translation

src/config/i18n.js

@@ -463,6 +463,10 @@ export const I18N = {
     zh: `导出`,
     en: `Export`,
   },
+  export_translation: {
+    zh: `导出释义`,
+    en: `Export Translation`,
+  },
   error_cant_be_blank: {
     zh: `不能为空`,
     en: `Can not be blank`,

src/config/index.js

@@ -407,6 +407,10 @@ export const DEFAULT_INPUT_RULE = {
 };
 
 // 划词翻译
+export const PHONIC_MAP = {
+  en_phonic: ["英", "uk"],
+  us_phonic: ["美", "en"],
+};
 export const OPT_TRANBOX_TRIGGER_CLICK = "click";
 export const OPT_TRANBOX_TRIGGER_HOVER = "hover";
 export const OPT_TRANBOX_TRIGGER_SELECT = "select";

src/views/Options/DownloadButton.js

@@ -1,10 +1,15 @@
 import FileDownloadIcon from "@mui/icons-material/FileDownload";
-import Button from "@mui/material/Button";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { useState } from "react";
+import { kissLog } from "../../libs/log";
 
-export default function DownloadButton({ data, text, fileName }) {
-  const handleClick = (e) => {
+export default function DownloadButton({ handleData, text, fileName }) {
+  const [loading, setLoading] = useState(false);
+  const handleClick = async (e) => {
     e.preventDefault();
-    if (data) {
+    try {
+      setLoading(true);
+      const data = await handleData();
       const url = window.URL.createObjectURL(new Blob([data]));
       const link = document.createElement("a");
       link.href = url;
@@ -12,16 +17,21 @@ export default function DownloadButton({ data, text, fileName }) {
       document.body.appendChild(link);
       link.click();
       link.remove();
+    } catch (err) {
+      kissLog(err, "download");
+    } finally {
+      setLoading(false);
     }
   };
   return (
-    <Button
+    <LoadingButton
       size="small"
       variant="outlined"
       onClick={handleClick}
+      loading={loading}
       startIcon={<FileDownloadIcon />}
     >
       {text}
-    </Button>
+    </LoadingButton>
   );
 }

src/views/Options/FavWords.js

@@ -17,6 +17,8 @@ import Button from "@mui/material/Button";
 import ClearAllIcon from "@mui/icons-material/ClearAll";
 import { isValidWord } from "../../libs/utils";
 import { kissLog } from "../../libs/log";
+import { apiTranslate } from "../../apis";
+import { OPT_TRANS_BAIDU, PHONIC_MAP } from "../../config";
 
 function FavAccordion({ word, index }) {
   const [expanded, setExpanded] = useState(false);
@@ -65,6 +67,45 @@ export default function FavWords() {
     }
   };
 
+  const handleTranslation = async () => {
+    const tranList = [];
+    for (const text of downloadList) {
+      try {
+        const dictRes = await apiTranslate({
+          text,
+          translator: OPT_TRANS_BAIDU,
+          fromLang: "en",
+          toLang: "zh-CN",
+        });
+        if (dictRes[2]?.type === 1) {
+          tranList.push(JSON.parse(dictRes[2].result));
+        }
+      } catch (err) {
+        // skip
+      }
+    }
+
+    return tranList
+      .map((dictResult) =>
+        [
+          `## ${dictResult.src}`,
+          dictResult.voice
+            ?.map(Object.entries)
+            .map((item) => item[0])
+            .map(([key, val]) => `${PHONIC_MAP[key]?.[0] || key} ${val}`)
+            .join(" "),
+          dictResult.content[0].mean
+            .map(({ pre, cont }) => {
+              return `  - ${pre ? `[${pre}] ` : ""}${Object.keys(cont).join(
+                "; "
+              )}`;
+            })
+            .join("\n"),
+        ].join("\n\n")
+      )
+      .join("\n\n");
+  };
+
   return (
     <Box>
       <Stack spacing={3}>
@@ -82,10 +123,15 @@ export default function FavWords() {
             fileExts={[".txt", ".csv"]}
           />
           <DownloadButton
-            data={downloadList.join("\n")}
+            handleData={() => downloadList.join("\n")}
             text={i18n("export")}
             fileName={`kiss-words_${Date.now()}.txt`}
           />
+          <DownloadButton
+            handleData={handleTranslation}
+            text={i18n("export_translation")}
+            fileName={`kiss-words_${Date.now()}.md`}
+          />
           <Button
             size="small"
             variant="outlined"

src/views/Options/Rules.js

@@ -776,7 +776,7 @@ function UserRules({ subRules }) {
 
         <UploadButton text={i18n("import")} handleImport={handleImport} />
         <DownloadButton
-          data={JSON.stringify([...rules.list].reverse(), null, 2)}
+          handleData={() => JSON.stringify([...rules.list].reverse(), null, 2)}
           text={i18n("export")}
           fileName={`kiss-rules_${Date.now()}.json`}
         />

src/views/Selection/DictCont.js

@@ -5,16 +5,11 @@ import Typography from "@mui/material/Typography";
 import AudioBtn from "./AudioBtn";
 import CircularProgress from "@mui/material/CircularProgress";
 import Alert from "@mui/material/Alert";
-import { OPT_TRANS_BAIDU } from "../../config";
+import { OPT_TRANS_BAIDU, PHONIC_MAP } from "../../config";
 import { apiTranslate } from "../../apis";
 import { isValidWord } from "../../libs/utils";
 import CopyBtn from "./CopyBtn";
 
-const phonicMap = {
-  en_phonic: ["英", "uk"],
-  us_phonic: ["美", "en"],
-};
-
 export default function DictCont({ text }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -66,7 +61,7 @@ export default function DictCont({ text }) {
     dictResult.voice
       ?.map(Object.entries)
       .map((item) => item[0])
-      .map(([key, val]) => `${phonicMap[key]?.[0] || key} ${val}`)
+      .map(([key, val]) => `${PHONIC_MAP[key]?.[0] || key} ${val}`)
       .join(" "),
     dictResult.content[0].mean
       .map(({ pre, cont }) => {
@@ -99,9 +94,9 @@ export default function DictCont({ text }) {
                 style={{ display: "inline-block" }}
               >
                 <Typography component="span">{`${
-                  phonicMap[key]?.[0] || key
+                  PHONIC_MAP[key]?.[0] || key
                 } ${val}`}</Typography>
-                <AudioBtn text={dictResult.src} lan={phonicMap[key]?.[1]} />
+                <AudioBtn text={dictResult.src} lan={PHONIC_MAP[key]?.[1]} />
               </Typography>
             ))}
         </Typography>