color diy

src/config/i18n.js

@@ -64,6 +64,10 @@ export const I18N = {
     zh: `文字样式`,
     en: `Text Style`,
   },
+  bg_color: {
+    zh: `样式颜色`,
+    en: `Style Color`,
+  },
   google_api: {
     zh: `谷歌翻译接口`,
     en: `Google Translate API`,

src/config/index.js

@@ -127,6 +127,8 @@ export const DEFAULT_FETCH_INTERVAL = 100; // 默认任务间隔时间
 export const PROMPT_PLACE_FROM = "{{from}}"; // 占位符
 export const PROMPT_PLACE_TO = "{{to}}"; // 占位符
 
+export const DEFAULT_COLOR = "#209CEE"; // 默认高亮背景色/线条颜色
+
 // 全局规则
 export const GLOBLA_RULE = {
   pattern: "*",
@@ -136,6 +138,7 @@ export const GLOBLA_RULE = {
   toLang: "zh-CN",
   textStyle: OPT_STYLE_DASHLINE,
   transOpen: "false",
+  bgColor: "",
 };
 
 // 默认规则
@@ -147,6 +150,7 @@ export const DEFAULT_RULE = {
   toLang: GLOBAL_KEY,
   textStyle: GLOBAL_KEY,
   transOpen: GLOBAL_KEY,
+  bgColor: "",
 };
 
 export const DEFAULT_SETTING = {

src/hooks/Rules.js

@@ -78,9 +78,11 @@ export function useRules() {
           toLang,
           textStyle,
           transOpen,
+          bgColor,
         }) => ({
           pattern,
           selector: typeof selector === "string" ? selector : "",
+          bgColor: typeof bgColor === "string" ? bgColor : "",
           translator: matchValue([GLOBAL_KEY, ...OPT_TRANS_ALL], translator),
           fromLang: matchValue([GLOBAL_KEY, ...fromLangs], fromLang),
           toLang: matchValue([GLOBAL_KEY, ...toLangs], toLang),

src/hooks/Translate.js

@@ -17,7 +17,7 @@ export function useTranslate(q, initRule) {
   const [sameLang, setSamelang] = useState(false);
   const [rule, setRule] = useState(initRule);
 
-  const { translator, fromLang, toLang, textStyle } = rule;
+  const { translator, fromLang, toLang, textStyle, bgColor } = rule;
 
   const handleMessage = ({ action, args }) => {
     if (action === MSG_TRANS_PUTRULE) {
@@ -34,7 +34,7 @@ export function useTranslate(q, initRule) {
         setRule((pre) => ({ ...pre, ...args }));
         break;
       default:
-        // console.log(`[popup] kissEvent action skip: ${action}`);
+      // console.log(`[popup] kissEvent action skip: ${action}`);
     }
   };
 
@@ -79,5 +79,5 @@ export function useTranslate(q, initRule) {
     })();
   }, [q, translator, fromLang, toLang]);
 
-  return { text, sameLang, loading, textStyle };
+  return { text, sameLang, loading, textStyle, bgColor };
 }

src/libs/index.js

@@ -54,6 +54,8 @@ export const matchRule = (rules, href) => {
     rule.selector = GLOBLA_RULE.selector;
   }
 
+  rule.bgColor = rule?.bgColor?.trim() || GLOBLA_RULE?.bgColor?.trim();
+
   ["translator", "fromLang", "toLang", "textStyle", "transOpen"].forEach(
     (key) => {
       if (rule[key] === GLOBAL_KEY) {

src/views/Content/LoadingIcon.js

@@ -1,3 +1,5 @@
+import { DEFAULT_COLOR } from "../../config";
+
 export default function LoadingIcon() {
   return (
     <svg
@@ -7,7 +9,7 @@ export default function LoadingIcon() {
         maxHeight: "1.2em",
       }}
     >
-      <circle fill="#209CEE" stroke="none" cx="6" cy="50" r="6">
+      <circle fill={DEFAULT_COLOR} stroke="none" cx="6" cy="50" r="6">
         <animateTransform
           attributeName="transform"
           dur="1s"
@@ -17,7 +19,7 @@ export default function LoadingIcon() {
           begin="0.1"
         />
       </circle>
-      <circle fill="#209CEE" stroke="none" cx="30" cy="50" r="6">
+      <circle fill={DEFAULT_COLOR} stroke="none" cx="30" cy="50" r="6">
         <animateTransform
           attributeName="transform"
           dur="1s"
@@ -27,7 +29,7 @@ export default function LoadingIcon() {
           begin="0.2"
         />
       </circle>
-      <circle fill="#209CEE" stroke="none" cx="54" cy="50" r="6">
+      <circle fill={DEFAULT_COLOR} stroke="none" cx="54" cy="50" r="6">
         <animateTransform
           attributeName="transform"
           dur="1s"

src/views/Content/index.js

@@ -7,12 +7,13 @@ import {
   OPT_STYLE_WAVYLINE,
   OPT_STYLE_FUZZY,
   OPT_STYLE_HIGHTLIGHT,
+  DEFAULT_COLOR,
 } from "../../config";
 import { useTranslate } from "../../hooks/Translate";
 
 export default function Content({ q, rule }) {
   const [hover, setHover] = useState(false);
-  const { text, sameLang, loading, textStyle } = useTranslate(q, rule);
+  const { text, sameLang, loading, textStyle, bgColor } = useTranslate(q, rule);
 
   const handleMouseEnter = () => {
     setHover(true);
@@ -23,29 +24,30 @@ export default function Content({ q, rule }) {
   };
 
   const style = useMemo(() => {
+    const lineColor = bgColor || "";
     switch (textStyle) {
       case OPT_STYLE_LINE: // 下划线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "underline 2px",
+          textDecoration: `underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_DOTLINE: // 点状线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "dotted underline 2px",
+          textDecoration: `dotted underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_DASHLINE: // 虚线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "dashed underline 2px",
+          textDecoration: `dashed underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_WAVYLINE: // 波浪线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "wavy underline 2px",
+          textDecoration: `wavy underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_FUZZY: // 模糊
@@ -56,12 +58,12 @@ export default function Content({ q, rule }) {
       case OPT_STYLE_HIGHTLIGHT: // 高亮
         return {
           color: "#FFF",
-          backgroundColor: "#209CEE",
+          backgroundColor: bgColor || DEFAULT_COLOR,
         };
       default:
         return {};
     }
-  }, [textStyle, hover]);
+  }, [textStyle, hover, bgColor]);
 
   if (loading) {
     return (

src/views/Options/Rules.js

@@ -39,6 +39,7 @@ function RuleFields({ rule, rules, setShow }) {
     toLang,
     textStyle,
     transOpen,
+    bgColor,
   } = formValues;
 
   const hasSamePattern = (str) => {
@@ -138,8 +139,8 @@ function RuleFields({ rule, rules, setShow }) {
         />
 
         <Box>
-          <Grid container spacing={2} columns={20}>
+          <Grid container spacing={2} columns={12}>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -155,7 +156,7 @@ function RuleFields({ rule, rules, setShow }) {
                 <MenuItem value={"false"}>{i18n("default_disabled")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -174,7 +175,7 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -193,7 +194,7 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -212,7 +213,7 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -231,6 +232,17 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                size="small"
+                fullWidth
+                name="bgColor"
+                value={bgColor}
+                label={i18n("bg_color")}
+                disabled={disabled}
+                onChange={handleChange}
+              />
+            </Grid>
           </Grid>
         </Box>