fix: styledSpan & transOnly

src/libs/translator.js

@@ -389,10 +389,11 @@ export class Translator {
         node.removeEventListener("mouseleave", this._handleMouseout);
       }
 
-      // 移除已插入元素
+      // 移除/恢复元素
-      node.querySelector(APP_LCNAME)?.remove();
       if (innerHTML && this._setting.transOnly) {
         node.innerHTML = innerHTML;
+      } else {
+        node.querySelector(APP_LCNAME)?.remove();
       }
     });
 
@@ -496,9 +497,9 @@ export class Translator {
 
     traEl = document.createElement(APP_LCNAME);
     traEl.style.visibility = "visible";
-    if (this._setting.transOnly) {
+    // if (this._setting.transOnly) {
-      el.innerHTML = "";
+    //   el.innerHTML = "";
-    }
+    // }
     el.appendChild(traEl);
     el.style.cssText +=
       "-webkit-line-clamp: unset; max-height: none; height: auto;";
@@ -510,6 +511,6 @@ export class Translator {
     // console.log({ q, keeps });
 
     const root = createRoot(traEl);
-    root.render(<Content q={q} keeps={keeps} translator={this} />);
+    root.render(<Content q={q} keeps={keeps} translator={this} $el={el} />);
   };
 }

src/views/Content/index.js

@@ -14,114 +14,79 @@ import {
   TRANS_NEWLINE_LENGTH,
 } from "../../config";
 import { useTranslate } from "../../hooks/Translate";
-import { styled } from "@mui/material/styles";
+import { styled, css } from "@mui/material/styles";
+import { APP_LCNAME } from "../../config";
 
-const Span = styled("span")``;
+const LINE_STYLES = {
+  [OPT_STYLE_LINE]: "solid",
+  [OPT_STYLE_DOTLINE]: "dotted",
+  [OPT_STYLE_DASHLINE]: "dashed",
+  [OPT_STYLE_WAVYLINE]: "wavy",
+};
 
-const LineSpan = styled(Span)`
+const StyledSpan = styled("span")`
+  ${({ textStyle, textDiyStyle, bgColor }) => {
+    switch (textStyle) {
+      case OPT_STYLE_LINE: // 下划线
+      case OPT_STYLE_DOTLINE: // 点状线
+      case OPT_STYLE_DASHLINE: // 虚线
+      case OPT_STYLE_WAVYLINE: // 波浪线
+        return css`
           opacity: 0.6;
           -webkit-opacity: 0.6;
           text-decoration-line: underline;
-  text-decoration-style: ${(props) => props.$lineStyle};
+          text-decoration-style: ${LINE_STYLES[textStyle]};
-  text-decoration-color: ${(props) => props.$lineColor};
+          text-decoration-color: ${bgColor};
           text-decoration-thickness: 2px;
           text-underline-offset: 0.3em;
           -webkit-text-decoration-line: underline;
-  -webkit-text-decoration-style: ${(props) => props.$lineStyle};
+          -webkit-text-decoration-style: ${LINE_STYLES[textStyle]};
-  -webkit-text-decoration-color: ${(props) => props.$lineColor};
+          -webkit-text-decoration-color: ${bgColor};
           -webkit-text-decoration-thickness: 2px;
           -webkit-text-underline-offset: 0.3em;
           &:hover {
             opacity: 1;
             -webkit-opacity: 1;
           }
-`;
+        `;
-
+      case OPT_STYLE_FUZZY: // 模糊
-const BlockquoteSpan = styled(Span)`
+        return css`
-  opacity: 0.6;
-  -webkit-opacity: 0.6;
-  display: block;
-  padding: 0 0.75em;
-  border-left: 0.25em solid ${(props) => props.$lineColor};
-  &:hover {
-    opacity: 1;
-    -webkit-opacity: 1;
-  }
-`;
-
-const FuzzySpan = styled(Span)`
           filter: blur(0.2em);
           -webkit-filter: blur(0.2em);
           &:hover {
             filter: none;
             -webkit-filter: none;
           }
-`;
+        `;
-
-const HighlightSpan = styled(Span)`
-  color: #fff;
-  background-color: ${(props) => props.$bgColor};
-`;
-
-const DiySpan = styled(Span)`
-  ${(props) => props.$diyStyle}
-`;
-
-function StyledSpan({ textStyle, textDiyStyle, bgColor, children, ...props }) {
-  switch (textStyle) {
-    case OPT_STYLE_LINE: // 下划线
-      return (
-        <LineSpan $lineStyle="solid" $lineColor={bgColor} {...props}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_DOTLINE: // 点状线
-      return (
-        <LineSpan $lineStyle="dotted" $lineColor={bgColor} {...props}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_DASHLINE: // 虚线
-      return (
-        <LineSpan $lineStyle="dashed" $lineColor={bgColor} {...props}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_WAVYLINE: // 波浪线
-      return (
-        <LineSpan $lineStyle="wavy" $lineColor={bgColor} {...props}>
-          {children}
-        </LineSpan>
-      );
-    case OPT_STYLE_FUZZY: // 模糊
-      return <FuzzySpan {...props}>{children}</FuzzySpan>;
       case OPT_STYLE_HIGHLIGHT: // 高亮
-      return (
+        return css`
-        <HighlightSpan $bgColor={bgColor || DEFAULT_COLOR} {...props}>
+          color: #fff;
-          {children}
+          background-color: ${bgColor || DEFAULT_COLOR};
-        </HighlightSpan>
+        `;
-      );
       case OPT_STYLE_BLOCKQUOTE: // 引用
-      return (
+        return css`
-        <BlockquoteSpan $lineColor={bgColor || DEFAULT_COLOR} {...props}>
+          opacity: 0.6;
-          {children}
+          -webkit-opacity: 0.6;
-        </BlockquoteSpan>
+          display: block;
-      );
+          padding: 0 0.75em;
-    case OPT_STYLE_DIY: // 自定义
+          border-left: 0.25em solid ${bgColor || DEFAULT_COLOR};
-      return (
+          &:hover {
-        <DiySpan $diyStyle={textDiyStyle} {...props}>
+            opacity: 1;
-          {children}
+            -webkit-opacity: 1;
-        </DiySpan>
-      );
-    default:
-      return <Span {...props}>{children}</Span>;
           }
-}
+        `;
+      case OPT_STYLE_DIY: // 自定义
+        return textDiyStyle;
+      default:
+        return ``;
+    }
+  }}
+`;
 
-export default function Content({ q, keeps, translator }) {
+export default function Content({ q, keeps, translator, $el }) {
   const [rule, setRule] = useState(translator.rule);
   const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
-  const { textStyle, bgColor = "", textDiyStyle = "" } = rule;
+  const { transOpen, textStyle, bgColor = "", textDiyStyle = "" } = rule;
 
   const {
     newlineLength = TRANS_NEWLINE_LENGTH,
@@ -176,6 +141,14 @@ export default function Content({ q, keeps, translator }) {
     return;
   }
 
+  if (transOnly && transOpen === "true" && $el.querySelector(APP_LCNAME)) {
+    Array.from($el.childNodes).forEach((el) => {
+      if (el.localName !== APP_LCNAME) {
+        el.remove();
+      }
+    });
+  }
+
   if (keeps.length > 0) {
     return (
       <>