feat: Supports setting multiple custom styles

src/libs/rules.js

@@ -1,10 +1,8 @@
 import { matchValue, type, isMatch } from "./utils";
 import {
   GLOBAL_KEY,
-  OPT_STYLE_ALL,
   OPT_LANGS_FROM,
   OPT_LANGS_TO,
-  // OPT_TIMING_ALL,
   DEFAULT_RULE,
   GLOBLA_RULE,
   OPT_SPLIT_PARAGRAPH_ALL,
@@ -13,7 +11,6 @@ import {
 import { loadOrFetchSubRules } from "./subRules";
 import { getRulesWithDefault, setRules } from "./storage";
 import { trySyncRules } from "./sync";
-// import { FIXER_ALL } from "./webfix";
 import { kissLog } from "./log";
 
 /**
@@ -62,7 +59,6 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     "grandStyle",
     "injectJs",
     // "injectCss",
-    // "fixerSelector",
     "transStartHook",
     "transEndHook",
     // "transRemoveHook",
@@ -78,16 +74,14 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     "toLang",
     "transOpen",
     "transOnly",
-    // "transTiming",
     "autoScan",
     "hasRichText",
     "hasShadowroot",
     "transTag",
     "transTitle",
-    // "detectRemote",
-    // "fixerFunc",
     "splitParagraph",
     "highlightWords",
+    "textStyle",
   ].forEach((key) => {
     if (!rule[key] || rule[key] === GLOBAL_KEY) {
       rule[key] = globalRule[key];
@@ -100,17 +94,6 @@ export const matchRule = async (href, { injectRules, subrulesList }) => {
     }
   });
 
-  // if (!rule.skipLangs || rule.skipLangs.length === 0) {
-  //   rule.skipLangs = globalRule.skipLangs;
-  // }
-  if (!rule.textStyle || rule.textStyle === GLOBAL_KEY) {
-    rule.textStyle = globalRule.textStyle;
-    rule.bgColor = globalRule.bgColor;
-    rule.textDiyStyle = globalRule.textDiyStyle;
-  } else {
-    rule.bgColor = rule.bgColor?.trim() || globalRule.bgColor;
-    rule.textDiyStyle = rule.textDiyStyle?.trim() || globalRule.textDiyStyle;
-  }
 
   return rule;
 };
@@ -162,19 +145,12 @@ export const checkRules = (rules) => {
         toLang,
         textStyle,
         transOpen,
-        bgColor,
-        textDiyStyle,
         transOnly,
         autoScan,
         hasRichText,
         hasShadowroot,
-        // transTiming,
         transTag,
         transTitle,
-        // detectRemote,
-        // skipLangs,
-        // fixerSelector,
-        // fixerFunc,
         transStartHook,
         transEndHook,
         // transRemoveHook,
@@ -197,31 +173,28 @@ export const checkRules = (rules) => {
         grandStyle: type(grandStyle) === "string" ? grandStyle : "",
         injectJs: type(injectJs) === "string" ? injectJs : "",
         // injectCss: type(injectCss) === "string" ? injectCss : "",
-        bgColor: type(bgColor) === "string" ? bgColor : "",
-        textDiyStyle: type(textDiyStyle) === "string" ? textDiyStyle : "",
         apiSlug:
           type(apiSlug) === "string" && apiSlug.trim() !== ""
             ? apiSlug.trim()
             : GLOBAL_KEY,
         fromLang: matchValue([GLOBAL_KEY, ...fromLangs], fromLang),
         toLang: matchValue([GLOBAL_KEY, ...toLangs], toLang),
-        textStyle: matchValue([GLOBAL_KEY, ...OPT_STYLE_ALL], textStyle),
+        // textStyle: matchValue([GLOBAL_KEY, ...OPT_STYLE_ALL], textStyle),
+        textStyle:
+          type(textStyle) === "string" && textStyle.trim() !== ""
+            ? textStyle.trim()
+            : GLOBAL_KEY,
         transOpen: matchValue([GLOBAL_KEY, "true", "false"], transOpen),
         transOnly: matchValue([GLOBAL_KEY, "true", "false"], transOnly),
         autoScan: matchValue([GLOBAL_KEY, "true", "false"], autoScan),
         hasRichText: matchValue([GLOBAL_KEY, "true", "false"], hasRichText),
         hasShadowroot: matchValue([GLOBAL_KEY, "true", "false"], hasShadowroot),
-        // transTiming: matchValue([GLOBAL_KEY, ...OPT_TIMING_ALL], transTiming),
         transTag: matchValue([GLOBAL_KEY, "span", "font"], transTag),
         transTitle: matchValue([GLOBAL_KEY, "true", "false"], transTitle),
-        // detectRemote: matchValue([GLOBAL_KEY, "true", "false"], detectRemote),
-        // skipLangs: type(skipLangs) === "array" ? skipLangs : [],
-        // fixerSelector: type(fixerSelector) === "string" ? fixerSelector : "",
         transStartHook: type(transStartHook) === "string" ? transStartHook : "",
         transEndHook: type(transEndHook) === "string" ? transEndHook : "",
         // transRemoveHook:
         //   type(transRemoveHook) === "string" ? transRemoveHook : "",
-        // fixerFunc: matchValue([GLOBAL_KEY, ...FIXER_ALL], fixerFunc),
         splitParagraph: matchValue(
           [GLOBAL_KEY, ...OPT_SPLIT_PARAGRAPH_ALL],
           splitParagraph

src/libs/style.js

@@ -12,8 +12,7 @@ import {
   OPT_STYLE_GRADIENT,
   OPT_STYLE_BLINK,
   OPT_STYLE_GLOW,
-  OPT_STYLE_DIY,
-  DEFAULT_DIY_STYLE,
+  OPT_STYLE_COLORFUL,
   DEFAULT_COLOR,
   OPT_STYLE_MARKER,
   OPT_STYLE_GRADIENT_MARKER,
@@ -69,10 +68,7 @@ const genLineStyle = (style, color) => `
   }
 `;
 
-const genStyles = ({
-  textDiyStyle = DEFAULT_DIY_STYLE,
-  color = DEFAULT_COLOR,
-} = {}) => ({
+const genBuiltinStyles = (color = DEFAULT_COLOR) => ({
   // 无样式
   [OPT_STYLE_NONE]: ``,
   // 下划线
@@ -148,14 +144,29 @@ const genStyles = ({
   [OPT_STYLE_GLOW]: `
     animation: ${glow} 2s ease-in-out infinite alternate;
   `,
-  // 自定义
-  [OPT_STYLE_DIY]: `
-${textDiyStyle}
-`,
+  // 多彩
+  [OPT_STYLE_COLORFUL]: `
+    color: #333;
+    background: linear-gradient(
+      45deg,
+      LightGreen 20%,
+      LightPink 20% 40%,
+      LightSalmon 40% 60%,
+      LightSeaGreen 60% 80%,
+      LightSkyBlue 80%
+    );
+    &:hover {
+      color: #111;
+    };
+  `,
 });
 
-export const genTextClass = ({ textDiyStyle, bgColor }) => {
-  const styles = genStyles({ textDiyStyle, color: bgColor || DEFAULT_COLOR });
+export const genTextClass = (customStyles = []) => {
+  const styles = genBuiltinStyles();
+  customStyles.forEach((style) => {
+    styles[style.styleSlug] = style.styleCode;
+  });
+
   const textClass = {};
   let textStyles = "";
   Object.entries(styles).forEach(([k, v]) => {
@@ -173,4 +184,4 @@ export const genTextClass = ({ textDiyStyle, bgColor }) => {
   return [textClass, textStyles];
 };
 
-export const defaultStyles = genStyles();
+export const builtinStylesMap = genBuiltinStyles();

src/libs/translator.js

@@ -466,7 +466,7 @@ export class Translator {
 
   // 创建样式
   #createTextStyles() {
-    const [textClass, textStyles] = genTextClass({ ...this.#rule });
+    const [textClass, textStyles] = genTextClass(this.#setting.customStyles);
     const textSheet = new CSSStyleSheet();
     textSheet.replaceSync(textStyles);
     this.#textClass = textClass;
@@ -1187,7 +1187,7 @@ export class Translator {
       }
 
       const inner = document.createElement(transTag);
-      inner.className = `${Translator.KISS_CLASS.inner} ${this.#textClass[textStyle]}`;
+      inner.className = `${Translator.KISS_CLASS.inner} ${this.#textClass[textStyle] || ""}`;
       if (textExtStyle?.trim()) {
         inner.style.cssText = textExtStyle; // 附加内联样式
       }