admin/kiss-translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

color diy

Browse Source
This commit is contained in:
Gabe Yuan
2023-08-08 16:41:47 +08:00
parent ac761481ba
commit 94fd2b3c62
8 changed files with 47 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/config/i18n.js
View File

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

4
src/config/index.js
View File

@@ -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 = {

2
src/hooks/Rules.js
View File

@@ -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),

6
src/hooks/Translate.js
View File

@@ -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 };
}

2
src/libs/index.js
View File

@@ -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) {

8
src/views/Content/LoadingIcon.js
View File

@@ -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"

16
src/views/Content/index.js
View File

@@ -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 (

24
src/views/Options/Rules.js
View File

@@ -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 item xs={10} md={4}>
<Grid container spacing={2} columns={12}>
<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>