feat: add text additional styles to rule

src/config/i18n.js

@@ -719,6 +719,11 @@ export const I18N = {
     en: `1. AI intelligent replacement does not support regular expressions.2. Separate multiple terms with newlines or semicolons ";". 3. Terms and translations are separated by English commas ",". 4. If there is no translation, the term will be deemed not to be translated.`,
     zh_TW: `1.AI智能替換，不支援正規表示式。2. 多條術語以換行或分號「;」分隔。3. 術語與譯文以英文逗號「,」分隔。4. 無譯文者視為不翻譯該術語。`,
   },
+  text_ext_style: {
+    zh: `译文附加样式`,
+    en: `Translation additional styles`,
+    zh_TW: `譯文附加樣式`,
+  },
   selector_style: {
     zh: `选择器节点样式`,
     en: `Selector Style`,

src/config/rules.js

@@ -115,6 +115,7 @@ export const DEFAULT_RULE = {
   transOpen: GLOBAL_KEY, // 开启翻译
   bgColor: "", // 译文颜色
   textDiyStyle: "", // 自定义译文样式
+  textExtStyle: "", // 译文附加样式
   termsStyle: "", // 专业术语样式
   highlightStyle: "", // 高亮词汇样式
   selectStyle: "", // 选择器节点样式
@@ -158,6 +159,7 @@ export const GLOBLA_RULE = {
   transOpen: "false", // 开启翻译
   bgColor: DEFAULT_COLOR, // 译文颜色
   textDiyStyle: DEFAULT_DIY_STYLE, // 自定义译文样式
+  textExtStyle: "", // 译文附加样式
   termsStyle: "font-weight: bold;", // 专业术语样式
   highlightStyle: "color: red;", // 高亮词汇样式
   selectStyle: DEFAULT_SELECT_STYLE, // 选择器节点样式

src/libs/rules.js

@@ -56,6 +56,7 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     "aiTerms",
     "termsStyle",
     "highlightStyle",
+    "textExtStyle",
     "selectStyle",
     "parentStyle",
     "grandStyle",
@@ -150,6 +151,7 @@ export const checkRules = (rules) => {
         aiTerms,
         termsStyle,
         highlightStyle,
+        textExtStyle,
         selectStyle,
         parentStyle,
         grandStyle,
@@ -189,6 +191,7 @@ export const checkRules = (rules) => {
         aiTerms: type(aiTerms) === "string" ? aiTerms : "",
         termsStyle: type(termsStyle) === "string" ? termsStyle : "",
         highlightStyle: type(highlightStyle) === "string" ? highlightStyle : "",
+        textExtStyle: type(textExtStyle) === "string" ? textExtStyle : "",
         selectStyle: type(selectStyle) === "string" ? selectStyle : "",
         parentStyle: type(parentStyle) === "string" ? parentStyle : "",
         grandStyle: type(grandStyle) === "string" ? grandStyle : "",

src/libs/translator.js

@@ -1153,6 +1153,7 @@ export class Translator {
       transEndHook,
       transOnly,
       termsStyle,
+      textExtStyle,
       selectStyle,
       parentStyle,
       grandStyle,
@@ -1187,6 +1188,9 @@ export class Translator {
 
       const inner = document.createElement(transTag);
       inner.className = `${Translator.KISS_CLASS.inner} ${this.#textClass[textStyle]}`;
+      if (textExtStyle?.trim()) {
+        inner.style.cssText = textExtStyle; // 附加内联样式
+      }
       inner.appendChild(createLoadingSVG());
       wrapper.appendChild(inner);
       nodes[nodes.length - 1].after(wrapper);

src/views/Options/Rules.js

@@ -104,6 +104,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     aiTerms = "",
     termsStyle = "",
     highlightStyle = "color: red;",
+    textExtStyle = "",
     selectStyle = "",
     parentStyle = "",
     grandStyle = "",
@@ -630,6 +631,16 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               maxRows={10}
               multiline
             />
+            <TextField
+              size="small"
+              label={i18n("text_ext_style")}
+              name="textExtStyle"
+              value={textExtStyle}
+              disabled={disabled}
+              onChange={handleChange}
+              maxRows={10}
+              multiline
+            />
             <TextField
               size="small"
               label={i18n("selector_style")}