feat: extend styles for transbox

src/common.js

@@ -139,6 +139,7 @@ function showTransbox({
   contextMenuType,
   tranboxSetting = DEFAULT_TRANBOX_SETTING,
   transApis,
+  darkMode,
 }) {
   if (!tranboxSetting?.transOpen) {
     return;
@@ -153,6 +154,8 @@ function showTransbox({
   const shadowContainer = $tranbox.attachShadow({ mode: "closed" });
   const emotionRoot = document.createElement("style");
   const shadowRootElement = document.createElement("div");
+  shadowRootElement.classList.add(`KT-transbox`);
+  shadowRootElement.classList.add(`KT-transbox_${darkMode ? "dark" : "light"}`);
   shadowContainer.appendChild(emotionRoot);
   shadowContainer.appendChild(shadowRootElement);
   const cache = createCache({

src/config/i18n.js

@@ -847,4 +847,8 @@ export const I18N = {
     zh: `选中触发`,
     en: `Select Trigger`,
   },
+  extend_styles: {
+    zh: `附加样式`,
+    en: `Extend Styles`,
+  },
 };

src/config/index.js

@@ -433,6 +433,7 @@ export const DEFAULT_TRANBOX_SETTING = {
   hideClickAway: false, // 是否点击外部关闭弹窗
   simpleStyle: false, // 是否简洁界面
   triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式
+  extStyles: "", // 附加样式
 };
 
 // 订阅列表

src/hooks/Theme.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
+import { CssBaseline, GlobalStyles } from "@mui/material";
 import { useDarkMode } from "./ColorMode";
 import { THEME_DARK, THEME_LIGHT } from "../config";
 
@@ -9,7 +9,7 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
  * @param {*} param0
  * @returns
  */
-export default function Theme({ children, options }) {
+export default function Theme({ children, options, styles }) {
   const { darkMode } = useDarkMode();
   const theme = useMemo(() => {
     let htmlFontSize = 16;
@@ -38,6 +38,7 @@ export default function Theme({ children, options }) {
     <ThemeProvider theme={theme}>
       {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
       <CssBaseline />
+      <GlobalStyles styles={styles} />
       {children}
     </ThemeProvider>
   );

src/views/Options/Setting.js

@@ -278,6 +278,7 @@ export default function Settings() {
           name="blacklist"
           defaultValue={blacklist}
           onChange={handleChange}
+          maxRows={10}
           multiline
         />
       </Stack>

src/views/Options/Tranbox.js

@@ -59,6 +59,7 @@ export default function Tranbox() {
     hideClickAway = false,
     simpleStyle = false,
     triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
+    extStyles = "",
   } = tranboxSetting;
 
   return (
@@ -208,6 +209,16 @@ export default function Tranbox() {
           ))}
         </TextField>
 
+        <TextField
+          size="small"
+          label={i18n("extend_styles")}
+          name="extStyles"
+          defaultValue={extStyles}
+          onChange={handleChange}
+          maxRows={10}
+          multiline
+        />
+
         {!isExt && (
           <ShortcutInput
             value={tranboxShortcut}

src/views/Selection/DictCont.js

@@ -71,7 +71,7 @@ export default function DictCont({ text }) {
   ].join("\n");
 
   return (
-    <Stack spacing={1}>
+    <Stack className="KT-transbox-dict" spacing={1}>
       <Stack direction="row" justifyContent="space-between">
         <Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
           {dictResult.src}

src/views/Selection/DictContV2.js

@@ -1,65 +0,0 @@
-import Box from "@mui/material/Box";
-import Chip from "@mui/material/Chip";
-import Stack from "@mui/material/Stack";
-import FavBtn from "./FavBtn";
-import Typography from "@mui/material/Typography";
-
-const exchangeMap = {
-  word_third: "第三人称单数",
-  word_ing: "现在分词",
-  word_done: "过去式",
-  word_past: "过去分词",
-  word_pl: "复数",
-  word_proto: "词源",
-};
-
-export default function DictCont({ dictResult }) {
-  if (!dictResult) {
-    return;
-  }
-
-  return (
-    <Box>
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        alignItems="flex-start"
-      >
-        <Typography variant="subtitle1" style={{ fontWeight: "bold" }}>
-          {dictResult.simple_means?.word_name}
-        </Typography>
-        <FavBtn word={dictResult.simple_means?.word_name} />
-      </Stack>
-
-      {dictResult.simple_means?.symbols?.map(({ ph_en, ph_am, parts }, idx) => (
-        <Typography key={idx} component="div">
-          {(ph_en || ph_am) && (
-            <Typography>{`英 /${ph_en || ""}/ 美 /${ph_am || ""}/`}</Typography>
-          )}
-          <ul style={{ margin: "0.5em 0" }}>
-            {parts.map(({ part, means }, idx) => (
-              <li key={idx}>
-                {part ? `[${part}] ${means.join("; ")}` : means.join("; ")}
-              </li>
-            ))}
-          </ul>
-        </Typography>
-      ))}
-
-      <Typography>
-        {Object.entries(dictResult.simple_means?.exchange || {})
-          .map(([key, val]) => `${exchangeMap[key] || key}: ${val.join(", ")}`)
-          .join("; ")}
-      </Typography>
-
-      <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
-        {Object.values(dictResult.simple_means?.tags || {})
-          .flat()
-          .filter((item) => item)
-          .map((item) => (
-            <Chip label={item} size="small" />
-          ))}
-      </Stack>
-    </Box>
-  );
-}

src/views/Selection/DraggableResizable.js

@@ -173,6 +173,7 @@ export default function DraggableResizable({
 
   return (
     <Box
+      className="KT-draggable"
       style={{
         touchAction: "none",
         position: "fixed",
@@ -219,11 +220,17 @@ export default function DraggableResizable({
         }}
         {...opts}
       />
-      <Paper elevation={4}>
-        <Pointer direction="Header" style={{ cursor: "move" }} {...opts}>
+      <Paper className="KT-draggable-body" elevation={4}>
+        <Pointer
+          className="KT-draggable-header"
+          direction="Header"
+          style={{ cursor: "move" }}
+          {...opts}
+        >
           {header}
         </Pointer>
-        <div
+        <Box
+          className="KT-draggable-container"
           style={{
             width: size.w,
             height: size.h,
@@ -231,7 +238,7 @@ export default function DraggableResizable({
           }}
         >
           {children}
-        </div>
+        </Box>
       </Paper>
       <Pointer
         direction="Right"

src/views/Selection/SugCont.js

@@ -21,7 +21,7 @@ export default function SugCont({ text }) {
   }
 
   return (
-    <Stack spacing={1}>
+    <Stack className="KT-transbox-sug" spacing={1}>
       {sugs.map(({ k, v }) => (
         <Typography component="div" key={k}>
           <Typography>{k}</Typography>

src/views/Selection/TranBox.js

@@ -32,7 +32,7 @@ function Header({
   setHideClickAway,
 }) {
   return (
-    <Box>
+    <Box className="KT-transbox-header">
       <Stack direction="row" justifyContent="space-between" alignItems="center">
         <DragIndicatorIcon fontSize="small" />
         <Stack direction="row" alignItems="center">
@@ -86,10 +86,14 @@ function TranForm({ text, setText, tranboxSetting, transApis, simpleStyle }) {
   const inputRef = useRef(null);
 
   return (
-    <Stack sx={{ p: simpleStyle ? 1 : 2 }} spacing={simpleStyle ? 1 : 2}>
+    <Stack
+      className="KT-transbox-container"
+      sx={{ p: simpleStyle ? 1 : 2 }}
+      spacing={simpleStyle ? 1 : 2}
+    >
       {!simpleStyle && (
         <>
-          <Box>
+          <Box className="KT-transbox-select">
             <Grid container spacing={simpleStyle ? 1 : 2} columns={12}>
               <Grid item xs={4} sm={4} md={4} lg={4}>
                 <TextField
@@ -154,7 +158,7 @@ function TranForm({ text, setText, tranboxSetting, transApis, simpleStyle }) {
             </Grid>
           </Box>
 
-          <Box>
+          <Box className="KT-transbox-origin">
             <TextField
               size="small"
               label={i18n("original_text")}
@@ -235,10 +239,11 @@ export default function TranBox({
   setSimpleStyle,
   hideClickAway,
   setHideClickAway,
+  extStyles,
 }) {
   return (
     <SettingProvider>
-      <ThemeProvider>
+      <ThemeProvider styles={extStyles}>
         <DraggableResizable
           defaultPosition={boxPosition}
           defaultSize={boxSize}

src/views/Selection/TranBtn.js

@@ -20,6 +20,7 @@ export default function TranBtn({
 
   return (
     <div
+      className="KT-tranbtn"
       style={{
         cursor: "pointer",
         // position: "absolute",

src/views/Selection/TranCont.js

@@ -59,7 +59,7 @@ export default function TranCont({
 
   if (simpleStyle) {
     return (
-      <Box>
+      <Box className="KT-transbox-target KT-transbox-target_simple">
         {error ? (
           <Alert severity="error">{error}</Alert>
         ) : loading ? (
@@ -72,7 +72,7 @@ export default function TranCont({
   }
 
   return (
-    <Box>
+    <Box className="KT-transbox-target KT-transbox-target_default">
       <TextField
         size="small"
         label={i18n("translated_text")}

src/views/Selection/index.js

@@ -25,6 +25,7 @@ export default function Slection({
     hideClickAway: initHideClickAway = false,
     tranboxShortcut = DEFAULT_TRANBOX_SHORTCUT,
     triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
+    extStyles,
   } = tranboxSetting;
 
   const boxWidth =
@@ -192,6 +193,7 @@ export default function Slection({
           setSimpleStyle={setSimpleStyle}
           hideClickAway={hideClickAway}
           setHideClickAway={setHideClickAway}
+          extStyles={extStyles}
         />
       )}