feat: simple style tranbox

2024-04-16 00:54:37 +08:00
parent ce4ac79e5f
commit a13493ebc2
5 changed files with 222 additions and 128 deletions
--- a/src/config/index.js
+++ b/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, // 默认是否简洁界面
 };

 // 订阅列表
--- a/src/views/Selection/TranBox.js
+++ b/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,127 +76,135 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
  const inputRef = useRef(null);

  return (
-    <Stack sx={{ p: 2 }} spacing={2}>
-      <Box>
-        <Grid container spacing={2} columns={12}>
-          <Grid item xs={4} sm={4} md={4} lg={4}>
-            <TextField
-              select
-              SelectProps={{ MenuProps: { disablePortal: true } }}
-              fullWidth
-              size="small"
-              name="fromLang"
-              value={fromLang}
-              label={i18n("from_lang")}
-              onChange={(e) => {
-                setFromLang(e.target.value);
-              }}
-            >
-              {OPT_LANGS_FROM.map(([lang, name]) => (
-                <MenuItem key={lang} value={lang}>
-                  {name}
-                </MenuItem>
-              ))}
-            </TextField>
-          </Grid>
-          <Grid item xs={4} sm={4} md={4} lg={4}>
-            <TextField
-              select
-              SelectProps={{ MenuProps: { disablePortal: true } }}
-              fullWidth
-              size="small"
-              name="toLang"
-              value={toLang}
-              label={i18n("to_lang")}
-              onChange={(e) => {
-                setToLang(e.target.value);
-              }}
-            >
-              {OPT_LANGS_TO.map(([lang, name]) => (
-                <MenuItem key={lang} value={lang}>
-                  {name}
-                </MenuItem>
-              ))}
-            </TextField>
-          </Grid>
-          <Grid item xs={4} sm={4} md={4} lg={4}>
-            <TextField
-              select
-              SelectProps={{ MenuProps: { disablePortal: true } }}
-              fullWidth
-              size="small"
-              value={translator}
-              name="translator"
-              label={i18n("translate_service")}
-              onChange={(e) => {
-                setTranslator(e.target.value);
-              }}
-            >
-              {OPT_TRANS_ALL.map((item) => (
-                <MenuItem key={item} value={item}>
-                  {item}
-                </MenuItem>
-              ))}
-            </TextField>
-          </Grid>
-        </Grid>
-      </Box>
+    <Stack sx={{ p: simpleStyle ? 1 : 2 }} spacing={simpleStyle ? 1 : 2}>
+      {!simpleStyle && (
+        <>
+          <Box>
+            <Grid container spacing={simpleStyle ? 1 : 2} columns={12}>
+              <Grid item xs={4} sm={4} md={4} lg={4}>
+                <TextField
+                  select
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  fullWidth
+                  size="small"
+                  name="fromLang"
+                  value={fromLang}
+                  label={i18n("from_lang")}
+                  onChange={(e) => {
+                    setFromLang(e.target.value);
+                  }}
+                >
+                  {OPT_LANGS_FROM.map(([lang, name]) => (
+                    <MenuItem key={lang} value={lang}>
+                      {name}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+              <Grid item xs={4} sm={4} md={4} lg={4}>
+                <TextField
+                  select
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  fullWidth
+                  size="small"
+                  name="toLang"
+                  value={toLang}
+                  label={i18n("to_lang")}
+                  onChange={(e) => {
+                    setToLang(e.target.value);
+                  }}
+                >
+                  {OPT_LANGS_TO.map(([lang, name]) => (
+                    <MenuItem key={lang} value={lang}>
+                      {name}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+              <Grid item xs={4} sm={4} md={4} lg={4}>
+                <TextField
+                  select
+                  SelectProps={{ MenuProps: { disablePortal: true } }}
+                  fullWidth
+                  size="small"
+                  value={translator}
+                  name="translator"
+                  label={i18n("translate_service")}
+                  onChange={(e) => {
+                    setTranslator(e.target.value);
+                  }}
+                >
+                  {OPT_TRANS_ALL.map((item) => (
+                    <MenuItem key={item} value={item}>
+                      {item}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              </Grid>
+            </Grid>
+          </Box>

-      <Box>
-        <TextField
-          size="small"
-          label={i18n("original_text")}
-          inputRef={inputRef}
-          fullWidth
-          multiline
-          value={editMode ? editText : text}
-          onChange={(e) => {
-            setEditText(e.target.value);
-          }}
-          onFocus={() => {
-            setEditMode(true);
-            setEditText(text);
-          }}
-          onBlur={() => {
-            setEditMode(false);
-            setText(editText.trim());
-          }}
-          InputProps={{
-            endAdornment: (
-              <Stack
-                direction="row"
-                sx={{
-                  position: "absolute",
-                  right: 0,
-                  top: 0,
-                }}
-              >
-                {editMode ? (
-                  <IconButton
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
+          <Box>
+            <TextField
+              size="small"
+              label={i18n("original_text")}
+              inputRef={inputRef}
+              fullWidth
+              multiline
+              value={editMode ? editText : text}
+              onChange={(e) => {
+                setEditText(e.target.value);
+              }}
+              onFocus={() => {
+                setEditMode(true);
+                setEditText(text);
+              }}
+              onBlur={() => {
+                setEditMode(false);
+                setText(editText.trim());
+              }}
+              InputProps={{
+                endAdornment: (
+                  <Stack
+                    direction="row"
+                    sx={{
+                      position: "absolute",
+                      right: 0,
+                      top: 0,
                    }}
                  >
-                    <DoneIcon fontSize="inherit" />
-                  </IconButton>
-                ) : (
-                  <CopyBtn text={text} />
-                )}
-              </Stack>
-            ),
-          }}
-        />
-      </Box>
+                    {editMode ? (
+                      <IconButton
+                        size="small"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                        }}
+                      >
+                        <DoneIcon fontSize="inherit" />
+                      </IconButton>
+                    ) : (
+                      <CopyBtn text={text} />
+                    )}
+                  </Stack>
+                ),
+              }}
+            />
+          </Box>
+        </>
+      )}
+
+      {(!simpleStyle || !isValidWord(text)) && (
+        <TranCont
+          text={text}
+          translator={translator}
+          fromLang={fromLang}
+          toLang={toLang}
+          toLang2={tranboxSetting.toLang2}
+          transApis={transApis}
+          simpleStyle={simpleStyle}
+        />
+      )}

-      <TranCont
-        text={text}
-        translator={translator}
-        fromLang={fromLang}
-        toLang={toLang}
-        toLang2={tranboxSetting.toLang2}
-        transApis={transApis}
-      />
      <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>
--- a/src/views/Selection/TranBtn.js
+++ b/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,
--- a/src/views/Selection/TranCont.js
+++ b/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
--- a/src/views/Selection/index.js
+++ b/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}
        />
      )}