feat: terms style

src/config/i18n.js

@@ -718,6 +718,11 @@ export const I18N = {
     en: `Selector Style`,
     zh_TW: `選擇器節點樣式`,
   },
+  terms_style: {
+    zh: `专业术语样式`,
+    en: `Terms Style`,
+    zh_TW: `專業術語樣式`,
+  },
   selector_style_helper: {
     zh: `开启翻译时注入。`,
     en: `It is injected when translation is turned on.`,

src/config/rules.js

@@ -78,8 +78,7 @@ background: linear-gradient(
 
 export const DEFAULT_SELECTOR =
   "h1, h2, h3, h4, h5, h6, li, p, dd, blockquote, figcaption, label, legend";
-export const DEFAULT_IGNORE_SELECTOR =
-  "aside, button, footer, pre, mark, nav";
+export const DEFAULT_IGNORE_SELECTOR = "aside, button, footer, pre, mark, nav";
 export const DEFAULT_KEEP_SELECTOR = `a:has(code)`;
 export const DEFAULT_RULE = {
   pattern: "", // 匹配网址
@@ -94,6 +93,7 @@ export const DEFAULT_RULE = {
   transOpen: GLOBAL_KEY, // 开启翻译
   bgColor: "", // 译文颜色
   textDiyStyle: "", // 自定义译文样式
+  termsStyle: "", // 专业术语样式
   selectStyle: "", // 选择器节点样式
   parentStyle: "", // 选择器父节点样式
   grandStyle: "", // 选择器父节点样式
@@ -132,6 +132,7 @@ export const GLOBLA_RULE = {
   transOpen: "false", // 开启翻译
   bgColor: "", // 译文颜色
   textDiyStyle: DEFAULT_DIY_STYLE, // 自定义译文样式
+  termsStyle: "font-weight: bold;", // 专业术语样式
   selectStyle: DEFAULT_SELECT_STYLE, // 选择器节点样式
   parentStyle: DEFAULT_SELECT_STYLE, // 选择器父节点样式
   grandStyle: DEFAULT_SELECT_STYLE, // 选择器祖节点样式

src/libs/rules.js

@@ -52,6 +52,7 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     "ignoreSelector",
     "terms",
     "aiTerms",
+    "termsStyle",
     "selectStyle",
     "parentStyle",
     "grandStyle",
@@ -136,6 +137,7 @@ export const checkRules = (rules) => {
         ignoreSelector,
         terms,
         aiTerms,
+        termsStyle,
         selectStyle,
         parentStyle,
         grandStyle,
@@ -170,6 +172,7 @@ export const checkRules = (rules) => {
         ignoreSelector: type(ignoreSelector) === "string" ? ignoreSelector : "",
         terms: type(terms) === "string" ? terms : "",
         aiTerms: type(aiTerms) === "string" ? aiTerms : "",
+        termsStyle: type(termsStyle) === "string" ? termsStyle : "",
         selectStyle: type(selectStyle) === "string" ? selectStyle : "",
         parentStyle: type(parentStyle) === "string" ? parentStyle : "",
         grandStyle: type(grandStyle) === "string" ? grandStyle : "",

src/libs/translator.js

@@ -959,6 +959,7 @@ export class Translator {
       transStartHook,
       transEndHook,
       transOnly,
+      termsStyle,
       selectStyle,
       parentStyle,
       grandStyle,
@@ -988,8 +989,10 @@ export class Translator {
     }
 
     try {
-      const [processedString, placeholderMap] =
-        this.#serializeForTranslation(nodes);
+      const [processedString, placeholderMap] = this.#serializeForTranslation(
+        nodes,
+        termsStyle
+      );
       // console.log("processedString", processedString);
       if (this.#isInvalidText(processedString)) return;
 
@@ -1078,7 +1081,7 @@ export class Translator {
   }
 
   // 处理节点转为翻译字符串
-  #serializeForTranslation(nodes) {
+  #serializeForTranslation(nodes, termsStyle) {
     let replaceCounter = 0; // {{n}}
     let wrapCounter = 0; // <tagn>
     const placeholderMap = new Map();
@@ -1118,7 +1121,7 @@ export class Translator {
             const termValue = this.#termValues[matchedIndex];
 
             return pushReplace(
-              `<i class="${Translator.KISS_CLASS.term}">${termValue || fullMatch}</i>`
+              `<i class="${Translator.KISS_CLASS.term}" style="${termsStyle}">${termValue || fullMatch}</i>`
             );
           });
         }

src/views/Options/Rules.js

@@ -97,6 +97,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     ignoreSelector = "",
     terms = "",
     aiTerms = "",
+    termsStyle = "",
     selectStyle = "",
     parentStyle = "",
     grandStyle = "",
@@ -547,10 +548,19 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
               maxRows={10}
             />
 
+            <TextField
+              size="small"
+              label={i18n("terms_style")}
+              name="termsStyle"
+              value={termsStyle}
+              disabled={disabled}
+              onChange={handleChange}
+              maxRows={10}
+              multiline
+            />
             <TextField
               size="small"
               label={i18n("selector_style")}
-              helperText={i18n("selector_style_helper")}
               name="selectStyle"
               value={selectStyle}
               disabled={disabled}
@@ -561,7 +571,6 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
             <TextField
               size="small"
               label={i18n("selector_parent_style")}
-              helperText={i18n("selector_style_helper")}
               name="parentStyle"
               value={parentStyle}
               disabled={disabled}
@@ -572,7 +581,6 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
             <TextField
               size="small"
               label={i18n("selector_grand_style")}
-              helperText={i18n("selector_style_helper")}
               name="grandStyle"
               value={grandStyle}
               disabled={disabled}