From 148a4e97a695732e9ee82991dd7425286d5f287a Mon Sep 17 00:00:00 2001
From: Gabe Yuan <gabe@zq.com>
Date: Tue, 16 Apr 2024 11:25:04 +0800
Subject: [PATCH] fix: tranbox ui

---
 src/config/i18n.js              |  4 +++
 src/views/Options/Tranbox.js    | 13 ++++++++
 src/views/Selection/AudioBtn.js |  6 ++--
 src/views/Selection/DictCont.js | 56 ++++++++++++++++++++++-----------
 src/views/Selection/SugCont.js  | 16 ++++++----
 src/views/Selection/TranBox.js  | 16 +++++++---
 src/views/Selection/index.js    |  2 +-
 7 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/src/config/i18n.js b/src/config/i18n.js
index d238ae8..1e0a91f 100644
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -627,6 +627,10 @@ export const I18N = {
     zh: `点击外部关闭弹窗`,
     en: `Click outside to close the pop-up window`,
   },
+  use_simple_style: {
+    zh: `使用简洁界面`,
+    en: `Click outside to close the pop-up window`,
+  },
   show: {
     zh: `显示`,
     en: `Show`,
diff --git a/src/views/Options/Tranbox.js b/src/views/Options/Tranbox.js
index bf006d4..6c1a902 100644
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -51,6 +51,7 @@ export default function Tranbox() {
     btnOffsetY,
     hideTranBtn = false,
     hideClickAway = false,
+    simpleStyle = false,
   } = tranboxSetting;
 
   return (
@@ -173,6 +174,18 @@ export default function Tranbox() {
           <MenuItem value={true}>{i18n("enable")}</MenuItem>
         </TextField>
 
+        <TextField
+          select
+          size="small"
+          name="simpleStyle"
+          value={simpleStyle}
+          label={i18n("use_simple_style")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("disable")}</MenuItem>
+          <MenuItem value={true}>{i18n("enable")}</MenuItem>
+        </TextField>
+
         {!isExt && (
           <ShortcutInput
             value={tranboxShortcut}
diff --git a/src/views/Selection/AudioBtn.js b/src/views/Selection/AudioBtn.js
index 15a7bee..3d5d052 100644
--- a/src/views/Selection/AudioBtn.js
+++ b/src/views/Selection/AudioBtn.js
@@ -8,7 +8,7 @@ export default function AudioBtn({ text, lan = "uk" }) {
   if (error || !ready) {
     return (
       <IconButton disabled size="small">
-        <VolumeUpIcon />
+        <VolumeUpIcon fontSize="inherit" />
       </IconButton>
     );
   }
@@ -16,14 +16,14 @@ export default function AudioBtn({ text, lan = "uk" }) {
   if (playing) {
     return (
       <IconButton color="primary" size="small">
-        <VolumeUpIcon />
+        <VolumeUpIcon fontSize="inherit" />
       </IconButton>
     );
   }
 
   return (
     <IconButton onClick={onPlay} size="small">
-      <VolumeUpIcon />
+      <VolumeUpIcon fontSize="inherit" />
     </IconButton>
   );
 }
diff --git a/src/views/Selection/DictCont.js b/src/views/Selection/DictCont.js
index 6ab689d..28d0a40 100644
--- a/src/views/Selection/DictCont.js
+++ b/src/views/Selection/DictCont.js
@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import FavBtn from "./FavBtn";
 import Typography from "@mui/material/Typography";
@@ -9,6 +8,7 @@ import Alert from "@mui/material/Alert";
 import { OPT_TRANS_BAIDU } from "../../config";
 import { apiTranslate } from "../../apis";
 import { isValidWord } from "../../libs/utils";
+import CopyBtn from "./CopyBtn";
 
 const phonicMap = {
   en_phonic: ["英", "uk"],
@@ -61,40 +61,60 @@ export default function DictCont({ text }) {
     return;
   }
 
+  const copyText = [
+    dictResult.src,
+    dictResult.voice
+      ?.map(Object.entries)
+      .map((item) => item[0])
+      .map(([key, val]) => `${phonicMap[key]?.[0] || key} ${val}`)
+      .join(" "),
+    dictResult.content[0].mean
+      .map(({ pre, cont }) => {
+        return `${pre ? `[${pre}] ` : ""}${Object.keys(cont).join("; ")}`;
+      })
+      .join("\n"),
+  ].join("\n");
+
   return (
-    <Box>
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        alignItems="flex-start"
-      >
+    <Stack spacing={1}>
+      <Stack direction="row" justifyContent="space-between">
         <Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
           {dictResult.src}
         </Typography>
-        <FavBtn word={dictResult.src} />
+        <Stack direction="row" justifyContent="space-between">
+          <CopyBtn text={copyText} />
+          <FavBtn word={dictResult.src} />
+        </Stack>
       </Stack>
 
       <Typography component="div">
-        <Stack direction="row">
+        <Typography component="div">
           {dictResult.voice
             ?.map(Object.entries)
             .map((item) => item[0])
             .map(([key, val]) => (
-              <span key={key}>
-                <span>{`${phonicMap[key]?.[0] || key} ${val}`}</span>
+              <Typography
+                component="div"
+                key={key}
+                style={{ display: "inline-block" }}
+              >
+                <Typography component="span">{`${
+                  phonicMap[key]?.[0] || key
+                } ${val}`}</Typography>
                 <AudioBtn text={dictResult.src} lan={phonicMap[key]?.[1]} />
-              </span>
+              </Typography>
             ))}
-        </Stack>
-        <ul style={{ margin: "0.5em 0" }}>
+        </Typography>
+
+        <Typography component="ul">
           {dictResult.content[0].mean.map(({ pre, cont }, idx) => (
-            <li key={idx}>
+            <Typography component="li" key={idx}>
               {pre && `[${pre}] `}
               {Object.keys(cont).join("; ")}
-            </li>
+            </Typography>
           ))}
-        </ul>
+        </Typography>
       </Typography>
-    </Box>
+    </Stack>
   );
 }
diff --git a/src/views/Selection/SugCont.js b/src/views/Selection/SugCont.js
index 0d64767..1afe01f 100644
--- a/src/views/Selection/SugCont.js
+++ b/src/views/Selection/SugCont.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { apiBaiduSuggest } from "../../apis";
+import Stack from "@mui/material/Stack";
 
 export default function SugCont({ text }) {
   const [sugs, setSugs] = useState([]);
@@ -16,16 +16,20 @@ export default function SugCont({ text }) {
     })();
   }, [text]);
 
+  if (sugs.length === 0) {
+    return;
+  }
+
   return (
-    <Box>
+    <Stack spacing={1}>
       {sugs.map(({ k, v }) => (
         <Typography component="div" key={k}>
           <Typography>{k}</Typography>
-          <ul style={{ margin: "0" }}>
-            <li>{v}</li>
-          </ul>
+          <Typography component="ul" style={{ margin: "0" }}>
+            <Typography component="li">{v}</Typography>
+          </Typography>
         </Typography>
       ))}
-    </Box>
+    </Stack>
   );
 }
diff --git a/src/views/Selection/TranBox.js b/src/views/Selection/TranBox.js
index 3b24789..d0e09f5 100644
--- a/src/views/Selection/TranBox.js
+++ b/src/views/Selection/TranBox.js
@@ -33,7 +33,7 @@ function Header({
 }) {
   return (
     <Stack direction="row" justifyContent="space-between" alignItems="center">
-      <DragIndicatorIcon />
+      <DragIndicatorIcon fontSize="small" />
 
       <Stack direction="row" alignItems="center">
         <IconButton
@@ -42,7 +42,11 @@ function Header({
             setHideClickAway((pre) => !pre);
           }}
         >
-          {hideClickAway ? <PushPinOutlinedIcon /> : <PushPinIcon />}
+          {hideClickAway ? (
+            <PushPinOutlinedIcon fontSize="small" />
+          ) : (
+            <PushPinIcon fontSize="small" />
+          )}
         </IconButton>
         <IconButton
           size="small"
@@ -50,7 +54,11 @@ function Header({
             setSimpleStyle((pre) => !pre);
           }}
         >
-          {simpleStyle ? <UnfoldMoreIcon /> : <UnfoldLessIcon />}
+          {simpleStyle ? (
+            <UnfoldMoreIcon fontSize="small" />
+          ) : (
+            <UnfoldLessIcon fontSize="small" />
+          )}
         </IconButton>
         <IconButton
           size="small"
@@ -58,7 +66,7 @@ function Header({
             setShowPopup(false);
           }}
         >
-          <CloseIcon />
+          <CloseIcon fontSize="small" />
         </IconButton>
       </Stack>
     </Stack>
diff --git a/src/views/Selection/index.js b/src/views/Selection/index.js
index 8a7ba50..6b24883 100644
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -22,7 +22,6 @@ export default function Slection({
       ? 200
       : limitNumber(window.innerHeight, 200, 400);
 
-  const [simpleStyle, setSimpleStyle] = useState(!!tranboxSetting.simpleStyle);
   const [showBox, setShowBox] = useState(false);
   const [showBtn, setShowBtn] = useState(false);
   const [selectedText, setSelText] = useState("");
@@ -36,6 +35,7 @@ export default function Slection({
     x: (window.innerWidth - boxWidth) / 2,
     y: (window.innerHeight - boxHeight) / 2,
   });
+  const [simpleStyle, setSimpleStyle] = useState(!!tranboxSetting.simpleStyle);
   const [hideClickAway, setHideClickAway] = useState(
     !!tranboxSetting.hideClickAway
   );