Skip to content

Commit 3acd3f3

Browse files
CodFrmCodFrm
committed
♻️ 重构优化systemConfig
Co-authored-by: 王一之 <yz@ggnb.top> Co-committed-by: 王一之 <yz@ggnb.top>
1 parent 81f7696 commit 3acd3f3

5 files changed

Lines changed: 278 additions & 243 deletions

File tree

‎src/pages/options/routes/Setting.tsx‎

Lines changed: 45 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,36 @@
1-
import { useEffect, useState } from "react";
21
import { Button, Card, Checkbox, ColorPicker, Input, Message, Select, Space } from "@arco-design/web-react";
32
import { IconQuestionCircleFill } from "@arco-design/web-react/icon";
43
import prettier from "prettier/standalone";
54
import * as babel from "prettier/parser-babel";
65
import prettierPluginEstree from "prettier/plugins/estree";
76
import GMApiSetting from "@App/pages/components/GMApiSetting";
8-
import { systemConfig } from "@App/pages/store/global";
97
import i18n from "@App/locales/locales";
108
import { useTranslation } from "react-i18next";
119
import Logger from "@App/app/logger/logger";
12-
import type { FileSystemType } from "@Packages/filesystem/factory";
1310
import FileSystemFactory from "@Packages/filesystem/factory";
1411
import FileSystemParams from "@App/pages/components/FileSystemParams";
1512
import { blackListSelfCheck } from "@App/pkg/utils/match";
1613
import { obtainBlackList } from "@App/pkg/utils/utils";
1714
import CustomTrans from "@App/pages/components/CustomTrans";
15+
import { useSystemConfig } from "./utils";
1816

1917
function Setting() {
20-
const [syncDelete, setSyncDelete] = useState<boolean>();
21-
const [syncScriptStatus, setSyncScriptStatus] = useState<boolean>();
22-
const [enableCloudSync, setEnableCloudSync] = useState<boolean>();
23-
const [fileSystemType, setFilesystemType] = useState<FileSystemType>("webdav");
24-
const [fileSystemParams, setFilesystemParam] = useState<{
25-
[key: string]: any;
26-
}>({});
27-
const [language, setLanguage] = useState(i18n.language);
28-
const [menuExpandNum, setMenuExpandNum] = useState(5);
29-
const [checkScriptUpdateCycle, setCheckScriptUpdateCycle] = useState(0);
30-
const [updateDisableScript, setUpdateDisableScript] = useState(false);
31-
const [silenceUpdateScript, setSilenceUpdateScript] = useState(false);
32-
const [enableEslint, setEnableEslint] = useState(false);
33-
const [editorConfig, setEditorConfig] = useState("");
34-
const [editorTypeDefinition, setEditorTypeDefinition] = useState("");
35-
const [eslintConfig, setEslintConfig] = useState("");
36-
const [blacklist, setBlacklist] = useState<string>("");
37-
const [badgeNumberType, setBadgeNumberType] = useState<"none" | "run_count" | "script_count">("run_count");
38-
const [badgeBackgroundColor, setBadgeBackgroundColor] = useState("#4e5969");
39-
const [badgeTextColor, setBadgeTextColor] = useState("#ffffff");
40-
const [scriptMenuDisplayType, setScriptMenuDisplayType] = useState<"no_browser" | "all">("all");
18+
const [editorConfig, setEditorConfig, submitEditorConfig] = useSystemConfig("editor_config");
19+
const [cloudSync, setCloudSync, submitCloudSync] = useSystemConfig("cloud_sync");
20+
const [language, , submitLanguage] = useSystemConfig("language");
21+
const [menuExpandNum, , submitMenuExpandNum] = useSystemConfig("menu_expand_num");
22+
const [checkScriptUpdateCycle, , submitCheckScriptUpdateCycle] = useSystemConfig("check_script_update_cycle");
23+
const [updateDisableScript, , submitUpdateDisableScript] = useSystemConfig("update_disable_script");
24+
const [silenceUpdateScript, , submitSilenceUpdateScript] = useSystemConfig("silence_update_script");
25+
const [enableEslint, , submitEnableEslint] = useSystemConfig("enable_eslint");
26+
const [eslintConfig, setEslintConfig, submitEslintConfig] = useSystemConfig("eslint_config");
27+
const [blacklist, setBlacklist, submitBlacklist] = useSystemConfig("blacklist");
28+
const [badgeNumberType, , submitBadgeNumberType] = useSystemConfig("badge_number_type");
29+
const [badgeBackgroundColor, , submitBadgeBackgroundColor] = useSystemConfig("badge_background_color");
30+
const [badgeTextColor, , submitBadgeTextColor] = useSystemConfig("badge_text_color");
31+
const [scriptMenuDisplayType, , submitScriptMenuDisplayType] = useSystemConfig("script_menu_display_type");
32+
const [editorTypeDefinition, setEditorTypeDefinition, submitEditorTypeDefinition] =
33+
useSystemConfig("editor_type_definition");
4134
const languageList: { key: string; title: string }[] = [];
4235
const { t } = useTranslation();
4336
for (const key of Object.keys(i18n.store.data)) {
@@ -54,68 +47,6 @@ function Setting() {
5447
title: t("help_translate"),
5548
});
5649

57-
useEffect(() => {
58-
const loadConfigs = () => {
59-
Promise.all([
60-
systemConfig.getCloudSync(),
61-
systemConfig.getMenuExpandNum(),
62-
systemConfig.getCheckScriptUpdateCycle(),
63-
systemConfig.getUpdateDisableScript(),
64-
systemConfig.getSilenceUpdateScript(),
65-
systemConfig.getEslintConfig(),
66-
systemConfig.getEnableEslint(),
67-
systemConfig.getLanguage(),
68-
systemConfig.getBlacklist(),
69-
systemConfig.getBadgeNumberType(),
70-
systemConfig.getBadgeBackgroundColor(),
71-
systemConfig.getBadgeTextColor(),
72-
systemConfig.getScriptMenuDisplayType(),
73-
systemConfig.getEditorConfig(),
74-
systemConfig.getEditorTypeDefinition(),
75-
]).then(
76-
([
77-
cloudSync,
78-
menuExpandNum,
79-
checkCycle,
80-
updateDisabled,
81-
silenceUpdate,
82-
eslintConfig,
83-
enableEslint,
84-
language,
85-
blacklist,
86-
badgeNumberType,
87-
badgeBackgroundColor,
88-
badgeTextColor,
89-
scriptMenuDisplayType,
90-
editorConfig,
91-
editorTypeDefinition,
92-
]) => {
93-
setSyncDelete(cloudSync.syncDelete);
94-
setSyncScriptStatus(cloudSync.syncStatus);
95-
setEnableCloudSync(cloudSync.enable);
96-
setFilesystemType(cloudSync.filesystem);
97-
setFilesystemParam(cloudSync.params[cloudSync.filesystem] || {});
98-
setMenuExpandNum(menuExpandNum);
99-
setCheckScriptUpdateCycle(checkCycle);
100-
setUpdateDisableScript(updateDisabled);
101-
setSilenceUpdateScript(silenceUpdate);
102-
setEslintConfig(eslintConfig);
103-
setEnableEslint(enableEslint);
104-
setLanguage(language);
105-
setBlacklist(blacklist);
106-
setBadgeNumberType(badgeNumberType);
107-
setBadgeBackgroundColor(badgeBackgroundColor);
108-
setBadgeTextColor(badgeTextColor);
109-
setScriptMenuDisplayType(scriptMenuDisplayType);
110-
setEditorConfig(editorConfig);
111-
setEditorTypeDefinition(editorTypeDefinition);
112-
}
113-
);
114-
};
115-
116-
loadConfigs();
117-
}, []);
118-
11950
return (
12051
<Space className="setting w-full h-full overflow-auto relative" direction="vertical">
12152
{/* 基本设置 */}
@@ -131,8 +62,7 @@ function Setting() {
13162
window.open("https://crowdin.com/project/scriptcat", "_blank");
13263
return;
13364
}
134-
setLanguage(value);
135-
systemConfig.setLanguage(value);
65+
submitLanguage(value);
13666
Message.success(t("language_change_tip")!);
13767
}}
13868
>
@@ -152,17 +82,17 @@ function Setting() {
15282
<Space direction="vertical" className={"w-full"}>
15383
<Space direction="horizontal" className={"w-full"}>
15484
<Checkbox
155-
checked={syncDelete}
85+
checked={cloudSync.syncDelete}
15686
onChange={(checked) => {
157-
setSyncDelete(checked);
87+
setCloudSync({ ...cloudSync, syncDelete: checked });
15888
}}
15989
>
16090
{t("sync_delete")}
16191
</Checkbox>
16292
<Checkbox
163-
checked={syncScriptStatus}
93+
checked={cloudSync.syncStatus}
16494
onChange={(checked) => {
165-
setSyncScriptStatus(checked);
95+
setCloudSync({ ...cloudSync, syncStatus: checked });
16696
}}
16797
>
16898
{t("sync_status")}
@@ -171,9 +101,9 @@ function Setting() {
171101
<FileSystemParams
172102
preNode={
173103
<Checkbox
174-
checked={enableCloudSync}
104+
checked={cloudSync.enable}
175105
onChange={(checked) => {
176-
setEnableCloudSync(checked);
106+
setCloudSync({ ...cloudSync, enable: checked });
177107
}}
178108
>
179109
{t("enable_script_sync_to")}
@@ -186,38 +116,29 @@ function Setting() {
186116
onClick={async () => {
187117
// Save to the configuration
188118
// Perform validation if enabled
189-
if (enableCloudSync) {
119+
if (cloudSync.enable) {
190120
Message.info(t("cloud_sync_account_verification")!);
191121
try {
192-
await FileSystemFactory.create(fileSystemType, fileSystemParams);
122+
await FileSystemFactory.create(cloudSync.filesystem, cloudSync.params[cloudSync.filesystem]);
193123
} catch (e) {
194124
Message.error(`${t("cloud_sync_verification_failed")}: ${JSON.stringify(Logger.E(e))}`);
195125
return;
196126
}
197127
}
198-
const cloudSync = await systemConfig.getCloudSync();
199-
const params = { ...cloudSync.params };
200-
params[fileSystemType] = fileSystemParams;
201-
systemConfig.setCloudSync({
202-
enable: enableCloudSync || false,
203-
syncDelete: syncDelete || false,
204-
syncStatus: syncScriptStatus || false,
205-
filesystem: fileSystemType,
206-
params,
207-
});
128+
submitCloudSync();
208129
Message.success(t("save_success")!);
209130
}}
210131
>
211132
{t("save")}
212133
</Button>,
213134
]}
214-
fileSystemType={fileSystemType}
215-
fileSystemParams={fileSystemParams}
135+
fileSystemType={cloudSync.filesystem}
136+
fileSystemParams={cloudSync.params[cloudSync.filesystem] || {}}
216137
onChangeFileSystemType={(type) => {
217-
setFilesystemType(type);
138+
setCloudSync({ ...cloudSync, filesystem: type });
218139
}}
219140
onChangeFileSystemParams={(params) => {
220-
setFilesystemParam(params);
141+
setCloudSync({ ...cloudSync, params: { ...cloudSync.params, [cloudSync.filesystem]: params } });
221142
}}
222143
/>
223144
</Space>
@@ -237,8 +158,7 @@ function Setting() {
237158
value={badgeNumberType}
238159
className="w-40 max-w-50"
239160
onChange={(value) => {
240-
setBadgeNumberType(value);
241-
systemConfig.setBadgeNumberType(value);
161+
submitBadgeNumberType(value);
242162
}}
243163
>
244164
<Select.Option value="none">{t("badge_type_none")}</Select.Option>
@@ -255,8 +175,7 @@ function Setting() {
255175
value={badgeBackgroundColor}
256176
onChange={(value) => {
257177
const colorValue = typeof value === "string" ? value : value[0]?.color || "#4e5969";
258-
setBadgeBackgroundColor(colorValue);
259-
systemConfig.setBadgeBackgroundColor(colorValue);
178+
submitBadgeBackgroundColor(colorValue);
260179
}}
261180
showText
262181
disabledAlpha
@@ -272,8 +191,7 @@ function Setting() {
272191
value={badgeTextColor}
273192
onChange={(value) => {
274193
const colorValue = typeof value === "string" ? value : value[0]?.color || "#ffffff";
275-
setBadgeTextColor(colorValue);
276-
systemConfig.setBadgeTextColor(colorValue);
194+
submitBadgeTextColor(colorValue);
277195
}}
278196
showText
279197
disabledAlpha
@@ -295,8 +213,7 @@ function Setting() {
295213
checked={scriptMenuDisplayType === "all"}
296214
onChange={(e) => {
297215
const checked = e;
298-
setScriptMenuDisplayType(checked ? "all" : "no_browser");
299-
systemConfig.setScriptMenuDisplayType(checked ? "all" : "no_browser");
216+
submitScriptMenuDisplayType(checked ? "all" : "no_browser");
300217
}}
301218
>
302219
{t("display_right_click_menu")}
@@ -313,8 +230,7 @@ function Setting() {
313230
value={menuExpandNum.toString()}
314231
onChange={(val) => {
315232
const num = parseInt(val, 10);
316-
setMenuExpandNum(num);
317-
systemConfig.setMenuExpandNum(num);
233+
submitMenuExpandNum(num);
318234
}}
319235
/>
320236
</div>
@@ -336,8 +252,7 @@ function Setting() {
336252
className="w-35 max-w-45"
337253
onChange={(value) => {
338254
const num = parseInt(value, 10);
339-
setCheckScriptUpdateCycle(num);
340-
systemConfig.setCheckScriptUpdateCycle(num);
255+
submitCheckScriptUpdateCycle(num);
341256
}}
342257
>
343258
<Select.Option value="0">{t("never")}</Select.Option>
@@ -355,17 +270,15 @@ function Setting() {
355270
<span className="font-medium mb-1">{t("update_options")}</span>
356271
<Checkbox
357272
onChange={(checked) => {
358-
setUpdateDisableScript(checked);
359-
systemConfig.setUpdateDisableScript(checked);
273+
submitUpdateDisableScript(checked);
360274
}}
361275
checked={updateDisableScript}
362276
>
363277
{t("update_disabled_scripts")}
364278
</Checkbox>
365279
<Checkbox
366280
onChange={(checked) => {
367-
setSilenceUpdateScript(checked);
368-
systemConfig.setSilenceUpdateScript(checked);
281+
submitSilenceUpdateScript(checked);
369282
}}
370283
checked={silenceUpdateScript}
371284
>
@@ -405,7 +318,7 @@ function Setting() {
405318
Message.error(`${t("expression_format_error")}: ${ret.line}`);
406319
return;
407320
}
408-
systemConfig.setBlacklist(val);
321+
submitBlacklist(val);
409322
}}
410323
/>
411324
</div>
@@ -417,8 +330,7 @@ function Setting() {
417330
<div className="flex items-center gap-4 flex-1">
418331
<Checkbox
419332
onChange={(checked) => {
420-
setEnableEslint(checked);
421-
systemConfig.setEnableEslint(checked);
333+
submitEnableEslint(checked);
422334
}}
423335
checked={enableEslint}
424336
>
@@ -466,7 +378,7 @@ function Setting() {
466378
} else {
467379
Message.success(t("eslint_rules_saved"));
468380
}
469-
systemConfig.setEslintConfig(value);
381+
submitEslintConfig(value);
470382
})
471383
.catch((e) => {
472384
Message.error(`${t("eslint_config_format_error")}: ${JSON.stringify(Logger.E(e))}`);
@@ -505,7 +417,7 @@ function Setting() {
505417
} else {
506418
Message.success(t("editor_config_saved"));
507419
}
508-
systemConfig.setEditorConfig(value);
420+
submitEditorConfig(value);
509421
})
510422
.catch((e) => {
511423
Message.error(`${t("editor_config_format_error")}: ${JSON.stringify(Logger.E(e))}`);
@@ -529,7 +441,7 @@ function Setting() {
529441
minRows: 4,
530442
maxRows: 8,
531443
}}
532-
value={editorTypeDefinition}
444+
value={editorTypeDefinition as string}
533445
onChange={(v) => {
534446
setEditorTypeDefinition(v);
535447
}}
@@ -539,7 +451,7 @@ function Setting() {
539451
} else {
540452
Message.success(t("editor_type_definition_saved"));
541453
}
542-
systemConfig.setEditorTypeDefinition(editorTypeDefinition);
454+
submitEditorTypeDefinition(editorTypeDefinition as string);
543455
}}
544456
/>
545457
</div>

0 commit comments

Comments
 (0)