feat: add more styles

src/config/i18n.js

@@ -569,6 +569,16 @@ export const I18N = {
     zh: `虚线框`,
     en: `Dashed Box`,
   },
+  marker: {
+    zh: `马克笔`,
+    en: `Marker`,
+    zh_TW: `馬克筆`,
+  },
+  gradient_marker: {
+    zh: `渐变马克笔`,
+    en: `Gradient Marker`,
+    zh_TW: `漸層馬克筆`,
+  },
   wavy_line: {
     zh: `下划波浪线`,
     en: `Wavy Underline`,

src/config/rules.js

@@ -16,6 +16,8 @@ export const OPT_STYLE_DOTLINE = "dot_line"; // 点状线
 export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线
 export const OPT_STYLE_DASHBOX = "dash_box"; // 虚线框
 export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
+export const OPT_STYLE_MARKER = "marker"; // 马克笔
+export const OPT_STYLE_GRADIENT_MARKER = "gradient_marker"; // 渐变马克笔
 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
 export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
 export const OPT_STYLE_BLOCKQUOTE = "blockquote"; // 引用
@@ -30,6 +32,8 @@ export const OPT_STYLE_ALL = [
   OPT_STYLE_DASHLINE,
   OPT_STYLE_WAVYLINE,
   OPT_STYLE_DASHBOX,
+  OPT_STYLE_MARKER,
+  OPT_STYLE_GRADIENT_MARKER,
   OPT_STYLE_FUZZY,
   OPT_STYLE_HIGHLIGHT,
   OPT_STYLE_BLOCKQUOTE,
@@ -152,7 +156,7 @@ export const GLOBLA_RULE = {
   toLang: "zh-CN", // 目标语言
   textStyle: OPT_STYLE_NONE, // 译文样式
   transOpen: "false", // 开启翻译
-  bgColor: "", // 译文颜色
+  bgColor: DEFAULT_COLOR, // 译文颜色
   textDiyStyle: DEFAULT_DIY_STYLE, // 自定义译文样式
   termsStyle: "font-weight: bold;", // 专业术语样式
   highlightStyle: "color: red;", // 高亮词汇样式

src/libs/style.js

@@ -15,6 +15,8 @@ import {
   OPT_STYLE_DIY,
   DEFAULT_DIY_STYLE,
   DEFAULT_COLOR,
+  OPT_STYLE_MARKER,
+  OPT_STYLE_GRADIENT_MARKER,
 } from "../config";
 
 const gradientFlow = keyframes`
@@ -51,43 +53,51 @@ const genLineStyle = (style, color) => `
   text-decoration-line: underline;
   text-decoration-style: ${style};
   text-decoration-color: ${color};
-  text-decoration-thickness: 2px;
+  text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
   -webkit-text-decoration-line: underline;
   -webkit-text-decoration-style: ${style};
   -webkit-text-decoration-color: ${color};
-  -webkit-text-decoration-thickness: 2px;
+  -webkit-text-decoration-thickness: 1px;
   -webkit-text-underline-offset: 0.3em;
 
-  /* opacity: 0.8;
+  opacity: 0.8;
   -webkit-opacity: 0.8;
   &:hover {
     opacity: 1;
     -webkit-opacity: 1;
-  } */
+  }
 `;
 
 const genStyles = ({
   textDiyStyle = DEFAULT_DIY_STYLE,
-  bgColor = DEFAULT_COLOR,
+  color = DEFAULT_COLOR,
 } = {}) => ({
   // 无样式
   [OPT_STYLE_NONE]: ``,
   // 下划线
-  [OPT_STYLE_LINE]: genLineStyle("solid", bgColor),
+  [OPT_STYLE_LINE]: genLineStyle("solid", color),
   // 点状线
-  [OPT_STYLE_DOTLINE]: genLineStyle("dotted", bgColor),
+  [OPT_STYLE_DOTLINE]: genLineStyle("dotted", color),
   // 虚线
-  [OPT_STYLE_DASHLINE]: genLineStyle("dashed", bgColor),
+  [OPT_STYLE_DASHLINE]: genLineStyle("dashed", color),
   // 波浪线
-  [OPT_STYLE_WAVYLINE]: genLineStyle("wavy", bgColor),
+  [OPT_STYLE_WAVYLINE]: genLineStyle("wavy", color),
   // 虚线框
   [OPT_STYLE_DASHBOX]: `
-    border: 2px dashed ${bgColor || DEFAULT_COLOR};
+    border: 1px dashed ${color};
     display: block;
     padding: 0.2em 0.4em;
     box-sizing: border-box;
   `,
+  // 马克笔
+  [OPT_STYLE_MARKER]: `
+    background: linear-gradient(to top, ${color} 50%, transparent 50%);
+  `,
+  // 渐变马克笔
+  [OPT_STYLE_GRADIENT_MARKER]: `
+    background: linear-gradient(to top, transparent, ${color} 20%, transparent 60%);
+  `,
   // 模糊
   [OPT_STYLE_FUZZY]: `
     filter: blur(0.2em);
@@ -100,7 +110,7 @@ const genStyles = ({
   // 高亮
   [OPT_STYLE_HIGHLIGHT]: `
     color: #fff;
-    background-color: ${bgColor || DEFAULT_COLOR};
+    background-color: ${color};
   `,
   // 引用
   [OPT_STYLE_BLOCKQUOTE]: `
@@ -108,7 +118,7 @@ const genStyles = ({
     -webkit-opacity: 0.8;
     display: block;
     padding: 0.25em 0.5em;
-    border-left: 0.5em solid ${bgColor || DEFAULT_COLOR};
+    border-left: 0.5em solid ${color};
     background: rgb(32, 156, 238, 0.2);
     &:hover {
       opacity: 1;
@@ -144,8 +154,8 @@ ${textDiyStyle}
 `,
 });
 
-export const genTextClass = ({ textDiyStyle, bgColor = DEFAULT_COLOR }) => {
+export const genTextClass = ({ textDiyStyle, bgColor }) => {
-  const styles = genStyles({ textDiyStyle, bgColor });
+  const styles = genStyles({ textDiyStyle, color: bgColor || DEFAULT_COLOR });
   const textClass = {};
   let textStyles = "";
   Object.entries(styles).forEach(([k, v]) => {