feat: add more styles

src/config/i18n.js

@@ -569,6 +569,16 @@ export const I18N = {
     zh: `虚线框`,
     en: `Dashed Box`,
   },
+  dash_line_bold: {
+    zh: `下划虚线加粗`,
+    en: `Dashed Underline Bold`,
+    zh_TW: `下劃虛線`,
+  },
+  dash_box_bold: {
+    zh: `虚线框加粗`,
+    en: `Dashed Box Bold`,
+    zh_TW: `虛線框加粗`,
+  },
   marker: {
     zh: `马克笔`,
     en: `Marker`,
@@ -584,6 +594,11 @@ export const I18N = {
     en: `Wavy Underline`,
     zh_TW: `下劃波浪線`,
   },
+  wavy_line_bold: {
+    zh: `下划波浪线加粗`,
+    en: `Wavy Underline Bold`,
+    zh_TW: `下劃波浪線加粗`,
+  },
   fuzzy: {
     zh: `模糊`,
     en: `Fuzzy`,

src/config/styles.js

@@ -2,8 +2,11 @@ export const OPT_STYLE_NONE = "style_none"; // 无
 export const OPT_STYLE_LINE = "under_line"; // 下划线
 export const OPT_STYLE_DOTLINE = "dot_line"; // 点状线
 export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线
+export const OPT_STYLE_DASHLINE_BOLD = "dash_line_bold"; // 虚线加粗
 export const OPT_STYLE_DASHBOX = "dash_box"; // 虚线框
+export const OPT_STYLE_DASHBOX_BOLD = "dash_box_bold"; // 虚线框加粗
 export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
+export const OPT_STYLE_WAVYLINE_BOLD = "wavy_line_bold"; // 波浪线加粗
 export const OPT_STYLE_MARKER = "marker"; // 马克笔
 export const OPT_STYLE_GRADIENT_MARKER = "gradient_marker"; // 渐变马克笔
 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
@@ -18,8 +21,11 @@ export const OPT_STYLE_ALL = [
   OPT_STYLE_LINE,
   OPT_STYLE_DOTLINE,
   OPT_STYLE_DASHLINE,
+  OPT_STYLE_DASHLINE_BOLD,
   OPT_STYLE_WAVYLINE,
+  OPT_STYLE_WAVYLINE_BOLD,
   OPT_STYLE_DASHBOX,
+  OPT_STYLE_DASHBOX_BOLD,
   OPT_STYLE_MARKER,
   OPT_STYLE_GRADIENT_MARKER,
   OPT_STYLE_FUZZY,

src/libs/style.js

@@ -16,6 +16,9 @@ import {
   DEFAULT_COLOR,
   OPT_STYLE_MARKER,
   OPT_STYLE_GRADIENT_MARKER,
+  OPT_STYLE_DASHBOX_BOLD,
+  OPT_STYLE_DASHLINE_BOLD,
+  OPT_STYLE_WAVYLINE_BOLD,
 } from "../config";
 
 const gradientFlow = keyframes`
@@ -48,11 +51,11 @@ const glow = keyframes`
   }
 `;
 
-const genLineStyle = (style, color) => `
+const genLineStyle = (style, color, thickness = 1) => `
   text-decoration-line: underline;
   text-decoration-style: ${style};
   text-decoration-color: ${color};
-  text-decoration-thickness: 1px;
+  text-decoration-thickness: ${thickness}px;
   text-underline-offset: 0.3em;
   -webkit-text-decoration-line: underline;
   -webkit-text-decoration-style: ${style};
@@ -77,8 +80,12 @@ const genBuiltinStyles = (color = DEFAULT_COLOR) => ({
   [OPT_STYLE_DOTLINE]: genLineStyle("dotted", color),
   // 虚线
   [OPT_STYLE_DASHLINE]: genLineStyle("dashed", color),
+  // 虚线加粗
+  [OPT_STYLE_DASHLINE_BOLD]: genLineStyle("dashed", color, 2),
   // 波浪线
   [OPT_STYLE_WAVYLINE]: genLineStyle("wavy", color),
+  // 波浪线加粗
+  [OPT_STYLE_WAVYLINE_BOLD]: genLineStyle("wavy", color, 2),
   // 虚线框
   [OPT_STYLE_DASHBOX]: `
     border: 1px dashed ${color};
@@ -86,6 +93,13 @@ const genBuiltinStyles = (color = DEFAULT_COLOR) => ({
     padding: 0.2em 0.3em;
     box-sizing: border-box;
   `,
+  // 虚线框加粗
+  [OPT_STYLE_DASHBOX_BOLD]: `
+    border: 2px dashed ${color};
+    display: block;
+    padding: 0.2em 0.3em;
+    box-sizing: border-box;
+  `,
   // 马克笔
   [OPT_STYLE_MARKER]: `
     background: linear-gradient(to top, ${color} 50%, transparent 50%);