support diy text styles

src/config/i18n.js

@@ -188,6 +188,14 @@ export const I18N = {
     zh: `高亮`,
     en: `Highlight`,
   },
+  diy_style: {
+    zh: `自定义样式`,
+    en: `Custom Style`,
+  },
+  diy_style_helper: {
+    zh: `遵循“styled-components”的语法`,
+    en: `Follow the syntax of "styled-components"`,
+  },
   setting: {
     zh: `设置`,
     en: `Setting`,
@@ -201,8 +209,8 @@ export const I18N = {
     en: `1. The asterisk (*) wildcard is supported. 2. Multiple URLs can be separated by English commas ",".`,
   },
   selector_helper: {
-    zh: `1、遵循CSS选择器规则。2、留空表示采用全局设置。3、多个CSS选择器之间用“;”隔开。4、“shadow root”选择器和内部选择器用“>>>”隔开。`,
-    en: `1. Follow the CSS selector rules. 2. Leave blank to adopt the global setting. 3. Separate multiple CSS selectors with ";". 4. The "shadow root" selector and the internal selector are separated by ">>>".`,
+    zh: `1、遵循CSS选择器语法。2、留空表示采用全局设置。3、多个CSS选择器之间用“;”隔开。4、“shadow root”选择器和内部选择器用“>>>”隔开。`,
+    en: `1. Follow CSS selector syntax. 2. Leave blank to adopt the global setting. 3. Separate multiple CSS selectors with ";". 4. The "shadow root" selector and the internal selector are separated by ">>>".`,
   },
   translate_switch: {
     zh: `开启翻译`,

src/config/index.js

@@ -122,7 +122,8 @@ export const OPT_STYLE_DOTLINE = "dot_line"; // 点状线
 export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线
 export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
-export const OPT_STYLE_HIGHTLIGHT = "highlight"; // 高亮
+export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
+export const OPT_STYLE_DIY = "diy_style"; // 自定义样式
 export const OPT_STYLE_ALL = [
   OPT_STYLE_NONE,
   OPT_STYLE_LINE,
@@ -130,7 +131,15 @@ export const OPT_STYLE_ALL = [
   OPT_STYLE_DASHLINE,
   OPT_STYLE_WAVYLINE,
   OPT_STYLE_FUZZY,
-  OPT_STYLE_HIGHTLIGHT,
+  OPT_STYLE_HIGHLIGHT,
+  OPT_STYLE_DIY,
+];
+export const OPT_STYLE_USE_COLOR = [
+  OPT_STYLE_LINE,
+  OPT_STYLE_DOTLINE,
+  OPT_STYLE_DASHLINE,
+  OPT_STYLE_WAVYLINE,
+  OPT_STYLE_HIGHLIGHT,
 ];
 
 export const DEFAULT_FETCH_LIMIT = 10; // 默认最大任务数量
@@ -141,6 +150,19 @@ export const PROMPT_PLACE_TO = "{{to}}"; // 占位符
 
 export const DEFAULT_COLOR = "#209CEE"; // 默认高亮背景色/线条颜色
 
+export const DEFAULT_DIY_STYLE = `color: #666;
+background: linear-gradient(
+  45deg,
+  LightGreen 20%,
+  LightPink 20% 40%,
+  LightSalmon 40% 60%,
+  LightSeaGreen 60% 80%,
+  LightSkyBlue 80%
+);
+&:hover {
+  color: #333;
+};`;
+
 // 全局规则
 export const GLOBLA_RULE = {
   pattern: "*",
@@ -151,6 +173,7 @@ export const GLOBLA_RULE = {
   textStyle: OPT_STYLE_DASHLINE,
   transOpen: "false",
   bgColor: "",
+  textDiyStyle: "",
 };
 
 // 订阅列表

src/config/rules.js

@@ -15,6 +15,7 @@ export const DEFAULT_RULE = {
   textStyle: GLOBAL_KEY,
   transOpen: GLOBAL_KEY,
   bgColor: "",
+  textDiyStyle: "",
 };
 
 const RULES = [