feat: simple style tranbox

src/config/index.js

@@ -418,7 +418,8 @@ export const DEFAULT_TRANBOX_SETTING = {
   btnOffsetX: 10,
   btnOffsetY: 10,
   hideTranBtn: false, // 是否隐藏翻译按钮
-  hideClickAway: false, // 是否点击外部关闭弹窗
+  hideClickAway: false, // 默认是否点击外部关闭弹窗
+  simpleStyle: false, // 默认是否简洁界面
 };
 
 // 订阅列表

src/views/Selection/TranBox.js

@@ -1,7 +1,6 @@
 import { SettingProvider } from "../../hooks/Setting";
 import ThemeProvider from "../../hooks/Theme";
 import DraggableResizable from "./DraggableResizable";
-import Header from "../Popup/Header";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
@@ -10,6 +9,12 @@ import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import DoneIcon from "@mui/icons-material/Done";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import CloseIcon from "@mui/icons-material/Close";
 import { useI18n } from "../../hooks/I18n";
 import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
 import { useState, useRef } from "react";
@@ -17,8 +22,50 @@ import TranCont from "./TranCont";
 import DictCont from "./DictCont";
 import SugCont from "./SugCont";
 import CopyBtn from "./CopyBtn";
+import { isValidWord } from "../../libs/utils";
 
-function TranForm({ text, setText, tranboxSetting, transApis }) {
+function Header({
+  setShowPopup,
+  simpleStyle,
+  setSimpleStyle,
+  hideClickAway,
+  setHideClickAway,
+}) {
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center">
+      <DragIndicatorIcon />
+
+      <Stack direction="row" alignItems="center">
+        <IconButton
+          size="small"
+          onClick={() => {
+            setHideClickAway((pre) => !pre);
+          }}
+        >
+          {hideClickAway ? <PushPinOutlinedIcon /> : <PushPinIcon />}
+        </IconButton>
+        <IconButton
+          size="small"
+          onClick={() => {
+            setSimpleStyle((pre) => !pre);
+          }}
+        >
+          {simpleStyle ? <UnfoldMoreIcon /> : <UnfoldLessIcon />}
+        </IconButton>
+        <IconButton
+          size="small"
+          onClick={() => {
+            setShowPopup(false);
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </Stack>
+    </Stack>
+  );
+}
+
+function TranForm({ text, setText, tranboxSetting, transApis, simpleStyle }) {
   const i18n = useI18n();
 
   const [editMode, setEditMode] = useState(false);
@@ -29,9 +76,11 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
   const inputRef = useRef(null);
 
   return (
-    <Stack sx={{ p: 2 }} spacing={2}>
+    <Stack sx={{ p: simpleStyle ? 1 : 2 }} spacing={simpleStyle ? 1 : 2}>
+      {!simpleStyle && (
+        <>
           <Box>
-        <Grid container spacing={2} columns={12}>
+            <Grid container spacing={simpleStyle ? 1 : 2} columns={12}>
               <Grid item xs={4} sm={4} md={4} lg={4}>
                 <TextField
                   select
@@ -141,7 +190,10 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
               }}
             />
           </Box>
+        </>
+      )}
 
+      {(!simpleStyle || !isValidWord(text)) && (
         <TranCont
           text={text}
           translator={translator}
@@ -149,7 +201,10 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
           toLang={toLang}
           toLang2={tranboxSetting.toLang2}
           transApis={transApis}
+          simpleStyle={simpleStyle}
         />
+      )}
+
       <DictCont text={text} />
       <SugCont text={text} />
     </Stack>
@@ -166,6 +221,10 @@ export default function TranBox({
   setBoxSize,
   boxPosition,
   setBoxPosition,
+  simpleStyle,
+  setSimpleStyle,
+  hideClickAway,
+  setHideClickAway,
 }) {
   return (
     <SettingProvider>
@@ -173,7 +232,15 @@ export default function TranBox({
         <DraggableResizable
           defaultPosition={boxPosition}
           defaultSize={boxSize}
-          header={<Header setShowPopup={setShowBox} />}
+          header={
+            <Header
+              setShowPopup={setShowBox}
+              simpleStyle={simpleStyle}
+              setSimpleStyle={setSimpleStyle}
+              hideClickAway={hideClickAway}
+              setHideClickAway={setHideClickAway}
+            />
+          }
           onChangeSize={setBoxSize}
           onChangePosition={setBoxPosition}
           onClick={(e) => e.stopPropagation()}
@@ -184,6 +251,7 @@ export default function TranBox({
             setText={setText}
             tranboxSetting={tranboxSetting}
             transApis={transApis}
+            simpleStyle={simpleStyle}
           />
         </DraggableResizable>
       </ThemeProvider>

src/views/Selection/TranBtn.js

@@ -25,7 +25,8 @@ export default function TranBtn({ onClick, position, tranboxSetting }) {
     <div
       style={{
         cursor: "pointer",
-        position: "absolute",
+        // position: "absolute",
+        position: "fixed",
         left,
         top,
         zIndex: 2147483647,

src/views/Selection/TranCont.js

@@ -7,6 +7,7 @@ import { DEFAULT_TRANS_APIS } from "../../config";
 import { useEffect, useState } from "react";
 import { apiTranslate, apiBaiduLangdetect } from "../../apis";
 import CopyBtn from "./CopyBtn";
+import Typography from "@mui/material/Typography";
 
 export default function TranCont({
   text,
@@ -15,6 +16,7 @@ export default function TranCont({
   toLang,
   toLang2 = "en",
   transApis,
+  simpleStyle,
 }) {
   const i18n = useI18n();
   const [trText, setTrText] = useState("");
@@ -54,6 +56,14 @@ export default function TranCont({
     })();
   }, [text, translator, fromLang, toLang, toLang2, transApis]);
 
+  if (simpleStyle) {
+    return (
+      <Box>
+        <Typography style={{ whiteSpace: "pre-line" }}>{trText}</Typography>
+      </Box>
+    );
+  }
+
   return (
     <Box>
       <TextField

src/views/Selection/index.js

@@ -13,9 +13,16 @@ export default function Slection({
   tranboxSetting,
   transApis,
 }) {
-  const boxWidth = limitNumber(window.innerWidth, 300, 600);
-  const boxHeight = limitNumber(window.innerHeight, 200, 400);
+  const boxWidth =
+    isMobile || tranboxSetting.simpleStyle
+      ? 300
+      : limitNumber(window.innerWidth, 300, 600);
+  const boxHeight =
+    isMobile || tranboxSetting.simpleStyle
+      ? 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("");
@@ -29,6 +36,9 @@ export default function Slection({
     x: (window.innerWidth - boxWidth) / 2,
     y: (window.innerHeight - boxHeight) / 2,
   });
+  const [hideClickAway, setHideClickAway] = useState(
+    !!tranboxSetting.hideClickAway
+  );
 
   const handleClick = (e) => {
     e.stopPropagation();
@@ -64,10 +74,10 @@ export default function Slection({
         return;
       }
 
-      const { pageX, pageY } = isMobile ? e.changedTouches[0] : e;
+      const { clientX, clientY } = isMobile ? e.changedTouches[0] : e;
       !tranboxSetting.hideTranBtn && setShowBtn(true);
       // setPosition({ x: e.clientX, y: e.clientY });
-      setPosition({ x: pageX, y: pageY });
+      setPosition({ x: clientX, y: clientY });
     }
 
     // todo: mobile support
@@ -133,7 +143,7 @@ export default function Slection({
   }, [handleTranbox, contextMenuType]);
 
   useEffect(() => {
-    if (tranboxSetting.hideClickAway) {
+    if (hideClickAway) {
       const handleHideBox = () => {
         setShowBox(false);
       };
@@ -142,7 +152,7 @@ export default function Slection({
         window.removeEventListener("click", handleHideBox);
       };
     }
-  }, [tranboxSetting.hideClickAway]);
+  }, [hideClickAway]);
 
   return (
     <>
@@ -157,6 +167,10 @@ export default function Slection({
           tranboxSetting={tranboxSetting}
           transApis={transApis}
           setShowBox={setShowBox}
+          simpleStyle={simpleStyle}
+          setSimpleStyle={setSimpleStyle}
+          hideClickAway={hideClickAway}
+          setHideClickAway={setHideClickAway}
         />
       )}