diff --git a/src/config/i18n.js b/src/config/i18n.js index 1ecc694..6191c2b 100644 --- a/src/config/i18n.js +++ b/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`, diff --git a/src/config/index.js b/src/config/index.js index e2c0194..6f7f57a 100644 --- a/src/config/index.js +++ b/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, }; diff --git a/src/views/Content/index.js b/src/views/Content/index.js index 964b986..a10d7ff 100644 --- a/src/views/Content/index.js +++ b/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 {};