diff --git a/manifest.json b/manifest.json index ff4b256..317b6f4 100644 --- a/manifest.json +++ b/manifest.json @@ -35,5 +35,8 @@ "options_ui": { "open_in_tab": true, "page": "dist/settings.html" - } + }, + "permissions": [ + "storage" + ] } \ No newline at end of file diff --git a/src/components/AlertWarn.tsx b/src/components/AlertWarn.tsx new file mode 100644 index 0000000..d6477de --- /dev/null +++ b/src/components/AlertWarn.tsx @@ -0,0 +1,12 @@ +import { Modal } from "antd"; + +export type AlertWarnProps = { + title?: string; + content: string; + onClose?: () => void; + okText?: string; +}; + +export default function AlertWarn({ title = "警告", content, onClose, okText = "好的" }: AlertWarnProps) { + return {content} +} diff --git a/src/components/SwitchLabel.module.css b/src/components/SwitchLabel.module.css new file mode 100644 index 0000000..0b4ef82 --- /dev/null +++ b/src/components/SwitchLabel.module.css @@ -0,0 +1,3 @@ +.switch-label > span { + cursor: pointer; +} diff --git a/src/components/SwitchLabel.tsx b/src/components/SwitchLabel.tsx new file mode 100644 index 0000000..abd00bb --- /dev/null +++ b/src/components/SwitchLabel.tsx @@ -0,0 +1,17 @@ +import { Switch } from "antd"; +import styles from "./SwitchLabel.module.css"; + +export type SwitchLabelProps = { + label: string; + checked: boolean; + onChange: (checked: boolean) => void; +} + +export default function SwitchLabel({ label, checked, onChange }: SwitchLabelProps) { + return ( +
+ onChange(!checked)}>{label} + +
+ ); +} \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index d7227a6..b09a732 100644 --- a/src/config.ts +++ b/src/config.ts @@ -18,6 +18,9 @@ export class QdConfig { } await saveConfig(QdConfig.STORAGE_KEY, this.config); } + reset() { + this.config = {}; + } get AutoSaveChapter(): boolean { return this.config?.AutoSaveChapter ?? false; } diff --git a/src/models/QdChatperInfo.tsx b/src/models/QdChatperInfo.tsx index 22615b0..e9d8eef 100644 --- a/src/models/QdChatperInfo.tsx +++ b/src/models/QdChatperInfo.tsx @@ -45,7 +45,7 @@ export default function QdChapterInfo({ bookInfo, chapterInfo }: QdChapterInfoPr } return ( - + {/* 章节信息 */} diff --git a/src/popup.tsx b/src/popup.tsx index 9326660..e69840f 100644 --- a/src/popup.tsx +++ b/src/popup.tsx @@ -54,7 +54,7 @@ function PopupBody() { load().catch(e => { setError(e instanceof Error ? e.message : 'Unknown error'); }); - }); + }, []); if (result) { console.log(result); if (result.ok && result.body?.type === 'QdChapterInfo') { diff --git a/src/settings.html b/src/settings.html index 1a6db34..930f948 100644 --- a/src/settings.html +++ b/src/settings.html @@ -4,7 +4,7 @@ 扩展设置 - +
diff --git a/src/settings/QdSettings.tsx b/src/settings/QdSettings.tsx index af2234f..3e5f2ec 100644 --- a/src/settings/QdSettings.tsx +++ b/src/settings/QdSettings.tsx @@ -1,18 +1,49 @@ -import { Typography, Switch, FloatButton, Affix, Button } from "antd"; -import { SaveTwoTone, SaveOutlined } from "@ant-design/icons"; -import { useState } from "react"; - -const { Title } = Typography; +import { FloatButton, Affix, Button, Space } from "antd"; +import { SaveTwoTone, SaveOutlined, SyncOutlined } from "@ant-design/icons"; +import { useEffect, useState } from "react"; +import { QdConfig } from "../config"; +import SwitchLabel from "../components/SwitchLabel"; +import AlertWarn from "../components/AlertWarn"; export default function QdSettings() { const [container, setContainer] = useState(null); + const [config] = useState(new QdConfig()); + const [autoSaveChapter, setAutoSaveChapter] = useState(false); + const [alert, setAlert] = useState<{ title?: string; content: string } | null>(null); + function handleConfig() { + setAutoSaveChapter(config.AutoSaveChapter); + } + useEffect(() => { + config.init().then(() => { + handleConfig(); + }).catch(e => { + setAlert({ content: "加载设置失败：" + (e instanceof Error ? e.message : "未知错误"), title: "错误" }); + }); + }, []); + function saveSettings() { + config.AutoSaveChapter = autoSaveChapter; + config.save().then(() => { + setAlert({ content: "设置已保存！", title: "通知" }); + }).catch(e => { + setAlert({ content: e instanceof Error ? e.message : "未知错误", title: "错误" }); + }); + } + function resetSettings() { + config.reset(); + handleConfig(); + } return (
- 起点设置 container}> - + + - } tooltip="保存设置" /> +
+ + + + } tooltip="保存设置" onClick={saveSettings} /> + {alert && setAlert(null)} />}
); } diff --git a/src/utils.ts b/src/utils.ts index b4b83e2..1925813 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -60,11 +60,11 @@ export function saveAsFile(filename: string, content: string, mimeType: string = } export async function saveConfig(key: string, config: any): Promise { - return await chrome.storage.managed.set({ [key]: config }); + return await chrome.storage.local.set({ [key]: config }); } export async function loadConfig(key: string, defaultValue: T): Promise { - const r = await chrome.storage.managed.get<{[key]: T | undefined}>(key); + const r = await chrome.storage.local.get<{[key]: T | undefined}>(key); if (r[key] === undefined) { return defaultValue; }