add more styles

src/config/i18n.js

@@ -98,14 +98,34 @@ export const I18N = {
     zh: `如不明白，谨慎修改！不同的浏览器，选择器规则不一定通用。`,
     en: `If you don't understand, modify it carefully! Different browsers, the selector rules are not necessarily universal.`,
   },
+  style_none: {
+    zh: `无`,
+    en: `None`,
+  },
   under_line: {
-    zh: `下划线`,
-    en: `Under Line`,
+    zh: `下划直线`,
+    en: `Underline`,
+  },
+  dot_line: {
+    zh: `下划点状线`,
+    en: `Dotted Underline`,
+  },
+  dash_line: {
+    zh: `下划点划线`,
+    en: `Dashed Underline`,
+  },
+  wavy_line: {
+    zh: `下划波浪`,
+    en: `Wavy Underline`,
   },
   fuzzy: {
     zh: `模糊`,
     en: `Fuzzy`,
   },
+  highlight: {
+    zh: `高亮`,
+    en: `Highlight`,
+  },
   setting: {
     zh: `设置`,
     en: `Setting`,

src/config/index.js

@@ -84,13 +84,26 @@ export const OPT_LANGS_SPECIAL = {
     ["zh-TW", "zh-Hant"],
   ]),
   [OPT_TRANS_OPENAI]: new Map(
-    OPT_LANGS_FROM.map(([key, val]) => [key, val.split("-")[0].trim()])
+    OPT_LANGS_FROM.map(([key, val]) => [key, val.split(" - ")[0]])
   ),
 };
 
+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_WAVYLINE = "wavy_line"; // 波浪线
 export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
-export const OPT_STYLE_ALL = [OPT_STYLE_LINE, OPT_STYLE_FUZZY];
+export const OPT_STYLE_HIGHTLIGHT = "highlight"; // 高亮
+export const OPT_STYLE_ALL = [
+  OPT_STYLE_NONE,
+  OPT_STYLE_LINE,
+  OPT_STYLE_DOTLINE,
+  OPT_STYLE_DASHLINE,
+  OPT_STYLE_WAVYLINE,
+  OPT_STYLE_FUZZY,
+  OPT_STYLE_HIGHTLIGHT,
+];
 
 export const DEFAULT_FETCH_LIMIT = 1; // 默认并发请求数
 export const DEFAULT_FETCH_INTERVAL = 500; // 默认请求间隔时间
@@ -104,7 +117,7 @@ export const DEFAULT_RULE = {
   translator: OPT_TRANS_MICROSOFT,
   fromLang: "auto",
   toLang: "zh-CN",
-  textStyle: OPT_STYLE_LINE,
+  textStyle: OPT_STYLE_DASHLINE,
   transOpen: false,
 };
 

src/views/Content/index.js

@@ -1,6 +1,13 @@
 import { useMemo, useState } from "react";
 import LoadingIcon from "./LoadingIcon";
-import { OPT_STYLE_FUZZY, OPT_STYLE_LINE } from "../../config";
+import {
+  OPT_STYLE_LINE,
+  OPT_STYLE_DOTLINE,
+  OPT_STYLE_DASHLINE,
+  OPT_STYLE_WAVYLINE,
+  OPT_STYLE_FUZZY,
+  OPT_STYLE_HIGHTLIGHT,
+} from "../../config";
 import { useTranslate } from "../../hooks/Translate";
 
 export default function Content({ q, rule }) {
@@ -17,16 +24,39 @@ export default function Content({ q, rule }) {
 
   const style = useMemo(() => {
     switch (textStyle) {
-      case OPT_STYLE_LINE:
+      case OPT_STYLE_LINE: // 下划线
+        return {
+          opacity: hover ? 1 : 0.6,
+          textDecoration: "underline 2px",
+          textUnderlineOffset: "0.3em",
+        };
+      case OPT_STYLE_DOTLINE: // 点状线
+        return {
+          opacity: hover ? 1 : 0.6,
+          textDecoration: "dotted underline 2px",
+          textUnderlineOffset: "0.3em",
+        };
+      case OPT_STYLE_DASHLINE: // 点划线
         return {
           opacity: hover ? 1 : 0.6,
           textDecoration: "dashed underline 2px",
           textUnderlineOffset: "0.3em",
         };
-      case OPT_STYLE_FUZZY:
+      case OPT_STYLE_WAVYLINE: // 波浪线
+        return {
+          opacity: hover ? 1 : 0.6,
+          textDecoration: "wavy underline 2px",
+          textUnderlineOffset: "0.3em",
+        };
+      case OPT_STYLE_FUZZY: // 模糊
         return {
           filter: hover ? "none" : "blur(5px)",
-          transition: "filter 0.3s ease-in-out",
+          transition: "filter 0.2s ease-in-out",
+        };
+      case OPT_STYLE_HIGHTLIGHT: // 高亮
+        return {
+          color: "#FFF",
+          backgroundColor: "#209CEE",
         };
       default:
         return {};