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

optimize debounce form & sync data

Browse Source
This commit is contained in:
Gabe Yuan
2023-08-17 13:27:22 +08:00
parent 30af4c11d0
commit 5d2e767e74
10 changed files with 155 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/background.js
View File

@@ -20,7 +20,7 @@ import { fetchData, fetchPool } from "./libs/fetch";
* 插件安装
*/
browser.runtime.onInstalled.addListener(() => {
console.log("onInstalled");
console.log("KISS Translator onInstalled");
storage.trySetObj(STOKEY_SETTING, DEFAULT_SETTING);
storage.trySetObj(STOKEY_RULES, DEFAULT_RULES);
storage.trySetObj(STOKEY_SYNC, DEFAULT_SYNC);
@@ -30,7 +30,7 @@ browser.runtime.onInstalled.addListener(() => {
* 浏览器启动
*/
browser.runtime.onStartup.addListener(async () => {
console.log("onStartup");
console.log("browser onStartup");
// 同步数据
await syncAll();

6
src/hooks/Rules.js
View File

@@ -25,11 +25,7 @@ export function useRules() {
const updateAt = sync.opt?.rulesUpdateAt ? Date.now() : 0;
await storage.setObj(STOKEY_RULES, rules);
await sync.update({ rulesUpdateAt: updateAt });
try {
await syncRules();
} catch (err) {
console.log("[sync rules]", err);
}
syncRules();
};
const add = async (rule) => {

2
src/hooks/Setting.js
View File

@@ -2,6 +2,7 @@ import { STOKEY_SETTING } from "../config";
import storage from "../libs/storage";
import { useStorages } from "./Storage";
import { useSync } from "./Sync";
import { syncSetting } from "../libs/sync";
/**
* 设置hook
@@ -22,5 +23,6 @@ export function useSettingUpdate() {
const updateAt = sync.opt?.settingUpdateAt ? Date.now() : 0;
await storage.putObj(STOKEY_SETTING, obj);
await sync.update({ settingUpdateAt: updateAt });
syncSetting();
};
}

96
src/libs/sync.js
View File

@@ -13,62 +13,66 @@ import { apiSyncData } from "../apis";
const loadOpt = async () => (await storage.getObj(STOKEY_SYNC)) || DEFAULT_SYNC;
export const syncSetting = async () => {
const { syncUrl, syncKey, settingUpdateAt } = await loadOpt();
if (!syncUrl || !syncKey) {
return;
}
try {
const { syncUrl, syncKey, settingUpdateAt } = await loadOpt();
if (!syncUrl || !syncKey) {
return;
}
const setting = await getSetting();
const res = await apiSyncData(syncUrl, syncKey, {
key: KV_SETTING_KEY,
value: setting,
updateAt: settingUpdateAt,
});
const setting = await getSetting();
const res = await apiSyncData(syncUrl, syncKey, {
key: KV_SETTING_KEY,
value: setting,
updateAt: settingUpdateAt,
});
if (res && res.updateAt > settingUpdateAt) {
await storage.putObj(STOKEY_SYNC, {
settingUpdateAt: res.updateAt,
settingSyncAt: res.updateAt,
});
await storage.setObj(STOKEY_SETTING, res.value);
} else {
await storage.putObj(STOKEY_SYNC, {
settingSyncAt: res.updateAt,
});
if (res && res.updateAt > settingUpdateAt) {
await storage.putObj(STOKEY_SYNC, {
settingUpdateAt: res.updateAt,
settingSyncAt: res.updateAt,
});
await storage.setObj(STOKEY_SETTING, res.value);
} else {
await storage.putObj(STOKEY_SYNC, {
settingSyncAt: res.updateAt,
});
}
} catch (err) {
console.log("[sync setting]", err);
}
};
export const syncRules = async () => {
const { syncUrl, syncKey, rulesUpdateAt } = await loadOpt();
if (!syncUrl || !syncKey) {
return;
}
try {
const { syncUrl, syncKey, rulesUpdateAt } = await loadOpt();
if (!syncUrl || !syncKey) {
return;
}
const rules = await getRules();
const res = await apiSyncData(syncUrl, syncKey, {
key: KV_RULES_KEY,
value: rules,
updateAt: rulesUpdateAt,
});
const rules = await getRules();
const res = await apiSyncData(syncUrl, syncKey, {
key: KV_RULES_KEY,
value: rules,
updateAt: rulesUpdateAt,
});
if (res && res.updateAt > rulesUpdateAt) {
await storage.putObj(STOKEY_SYNC, {
rulesUpdateAt: res.updateAt,
rulesSyncAt: res.updateAt,
});
await storage.setObj(STOKEY_RULES, res.value);
} else {
await storage.putObj(STOKEY_SYNC, {
rulesSyncAt: res.updateAt,
});
if (res && res.updateAt > rulesUpdateAt) {
await storage.putObj(STOKEY_SYNC, {
rulesUpdateAt: res.updateAt,
rulesSyncAt: res.updateAt,
});
await storage.setObj(STOKEY_RULES, res.value);
} else {
await storage.putObj(STOKEY_SYNC, {
rulesSyncAt: res.updateAt,
});
}
} catch (err) {
console.log("[sync rules]", err);
}
};
export const syncAll = async () => {
try {
await syncSetting();
await syncRules();
} catch (err) {
console.log("[sync all]", err);
}
await syncSetting();
await syncRules();
};

2
src/views/Action/Draggable.js
View File

@@ -30,6 +30,8 @@ const getEdgePosition = (
edge = "top";
top = 0;
}
left = limitNumber(left, 0, windowWidth - width);
top = limitNumber(top, 0, windowHeight - height);
return { x: left, y: top, edge, hide: false };
};

2
src/views/Options/Layout.js
View File

@@ -6,7 +6,6 @@ import Box from "@mui/material/Box";
import Navigator from "./Navigator";
import Header from "./Header";
import { useTheme } from "@mui/material/styles";
import { syncAll } from "../../libs/sync";
export default function Layout() {
const navWidth = 256;
@@ -21,7 +20,6 @@ export default function Layout() {
useEffect(() => {
setOpen(false);
syncAll();
}, [location]);
return (

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

@@ -122,6 +122,7 @@ function RuleFields({ rule, rules, setShow }) {
disabled={rule?.pattern === "*" || disabled}
onChange={handleChange}
onFocus={handleFocus}
multiline
/>
<TextField
size="small"
@@ -134,8 +135,6 @@ function RuleFields({ rule, rules, setShow }) {
onChange={handleChange}
onFocus={handleFocus}
multiline
minRows={2}
maxRows={10}
/>
<Box>
@@ -301,6 +300,25 @@ function RuleFields({ rule, rules, setShow }) {
);
}
function RuleAccordion({ rule, rules }) {
const [expanded, setExpanded] = useState(false);
const handleChange = (e) => {
setExpanded((pre) => !pre);
};
return (
<Accordion expanded={expanded} onChange={handleChange}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>{rule.pattern}</Typography>
</AccordionSummary>
<AccordionDetails>
{expanded && <RuleFields rule={rule} rules={rules} />}
</AccordionDetails>
</Accordion>
);
}
function DownloadButton({ data, text, fileName }) {
const handleClick = (e) => {
e.preventDefault();
@@ -405,14 +423,7 @@ export default function Rules() {
<Box>
{rules.list.map((rule) => (
<Accordion key={rule.pattern}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>{rule.pattern}</Typography>
</AccordionSummary>
<AccordionDetails>
<RuleFields rule={rule} rules={rules} />
</AccordionDetails>
</Accordion>
<RuleAccordion key={rule.pattern} rule={rule} rules={rules} />
))}
</Box>
</Stack>

89
src/views/Options/Setting.js
View File

@@ -6,15 +6,37 @@ import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { useSetting, useSettingUpdate } from "../../hooks/Setting";
import { limitNumber } from "../../libs/utils";
import { limitNumber, debounce } from "../../libs/utils";
import { useI18n } from "../../hooks/I18n";
import { UI_LANGS } from "../../config";
import { useMemo } from "react";
export default function Settings() {
const i18n = useI18n();
const setting = useSetting();
const updateSetting = useSettingUpdate();
const handleChange = useMemo(
() =>
debounce((e) => {
e.preventDefault();
let { name, value } = e.target;
switch (name) {
case "fetchLimit":
value = limitNumber(value, 1, 100);
break;
case "fetchInterval":
value = limitNumber(value, 0, 5000);
break;
default:
}
updateSetting({
[name]: value,
});
}, 500),
[updateSetting]
);
if (!setting) {
return;
}
@@ -37,13 +59,10 @@ export default function Settings() {
<FormControl size="small">
<InputLabel>{i18n("ui_lang")}</InputLabel>
<Select
name="uiLang"
value={uiLang}
label={i18n("ui_lang")}
onChange={(e) => {
updateSetting({
uiLang: e.target.value,
});
}}
onChange={handleChange}
>
{UI_LANGS.map(([lang, name]) => (
<MenuItem key={lang} value={lang}>
@@ -57,36 +76,27 @@ export default function Settings() {
size="small"
label={i18n("fetch_limit")}
type="number"
name="fetchLimit"
defaultValue={fetchLimit}
onChange={(e) => {
updateSetting({
fetchLimit: limitNumber(e.target.value, 1, 100),
});
}}
onChange={handleChange}
/>
<TextField
size="small"
label={i18n("fetch_interval")}
type="number"
name="fetchInterval"
defaultValue={fetchInterval}
onChange={(e) => {
updateSetting({
fetchInterval: limitNumber(e.target.value, 0, 5000),
});
}}
onChange={handleChange}
/>
<FormControl size="small">
<InputLabel>{i18n("clear_cache")}</InputLabel>
<Select
name="clearCache"
value={clearCache}
label={i18n("clear_cache")}
onChange={(e) => {
updateSetting({
clearCache: e.target.value,
});
}}
onChange={handleChange}
>
<MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
<MenuItem value={true}>{i18n("clear_cache_restart")}</MenuItem>
@@ -96,60 +106,43 @@ export default function Settings() {
<TextField
size="small"
label={i18n("google_api")}
name="googleUrl"
defaultValue={googleUrl}
onChange={(e) => {
updateSetting({
googleUrl: e.target.value,
});
}}
onChange={handleChange}
/>
<TextField
size="small"
label={i18n("openai_api")}
name="openaiUrl"
defaultValue={openaiUrl}
onChange={(e) => {
updateSetting({
openaiUrl: e.target.value,
});
}}
onChange={handleChange}
/>
<TextField
size="small"
type="password"
label={i18n("openai_key")}
name="openaiKey"
defaultValue={openaiKey}
onChange={(e) => {
updateSetting({
openaiKey: e.target.value,
});
}}
onChange={handleChange}
/>
<TextField
size="small"
label={i18n("openai_model")}
name="openaiModel"
defaultValue={openaiModel}
onChange={(e) => {
updateSetting({
openaiModel: e.target.value,
});
}}
onChange={handleChange}
/>
<TextField
size="small"
label={i18n("openai_prompt")}
name="openaiPrompt"
defaultValue={openaiPrompt}
onChange={(e) => {
updateSetting({
openaiPrompt: e.target.value,
});
}}
onChange={handleChange}
multiline
minRows={2}
maxRows={10}
/>
</Stack>
</Box>

34
src/views/Options/SyncSetting.js
View File

@@ -3,23 +3,33 @@ import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import { useI18n } from "../../hooks/I18n";
import { useSync } from "../../hooks/Sync";
import { syncAll } from "../../libs/sync";
import Alert from "@mui/material/Alert";
import Link from "@mui/material/Link";
import { URL_KISS_WORKER } from "../../config";
import { debounce } from "../../libs/utils";
import { useMemo } from "react";
export default function SyncSetting() {
const i18n = useI18n();
const sync = useSync();
const handleChange = useMemo(
() =>
debounce((e) => {
e.preventDefault();
const { name, value } = e.target;
sync.update({
[name]: value,
});
}, 500),
[sync]
);
if (!sync.opt) {
return;
}
const { syncUrl, syncKey } = sync.opt;
const handleSyncBlur = () => {
syncAll();
};
return (
<Box>
@@ -29,13 +39,9 @@ export default function SyncSetting() {
<TextField
size="small"
label={i18n("data_sync_url")}
name="syncUrl"
defaultValue={syncUrl}
onChange={(e) => {
sync.update({
syncUrl: e.target.value,
});
}}
onBlur={handleSyncBlur}
onChange={handleChange}
helperText={
<Link href={URL_KISS_WORKER}>{i18n("about_sync_api")}</Link>
}
@@ -45,13 +51,9 @@ export default function SyncSetting() {
size="small"
type="password"
label={i18n("data_sync_key")}
name="syncKey"
defaultValue={syncKey}
onChange={(e) => {
sync.update({
syncKey: e.target.value,
});
}}
onBlur={handleSyncBlur}
onChange={handleChange}
/>
</Stack>
</Box>

33
src/views/Options/index.js
View File

@@ -10,31 +10,34 @@ import { useEffect, useState } from "react";
import { isGm } from "../../libs/browser";
import { sleep } from "../../libs/utils";
import CircularProgress from "@mui/material/CircularProgress";
import { syncAll } from "../../libs/sync";
export default function Options() {
const [error, setError] = useState(false);
const [ready, setReady] = useState(false);
useEffect(() => {
if (!isGm) {
return;
}
(async () => {
let i = 0;
for (;;) {
if (window.APP_NAME === process.env.REACT_APP_NAME) {
setReady(true);
break;
}
if (isGm) {
// 等待GM注入
let i = 0;
for (;;) {
if (window.APP_NAME === process.env.REACT_APP_NAME) {
setReady(true);
break;
}
if (++i > 8) {
setError(true);
break;
}
if (++i > 8) {
setError(true);
break;
}
await sleep(1000);
await sleep(1000);
}
}
// 同步数据
syncAll();
})();
}, []);