78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import { App as AntApp, Card, Form, Radio, Switch } from "antd";
|
|
|
|
import type { ThemePreference } from "../../../shared/api";
|
|
import { useSettings } from "../../shared/hooks/use-settings";
|
|
import { parseThemePreference, useThemePreference } from "../../shared/hooks/use-theme-preference";
|
|
|
|
const THEME_OPTIONS = [
|
|
{ label: "系统", value: "system" },
|
|
{ label: "明亮", value: "light" },
|
|
{ label: "黑暗", value: "dark" },
|
|
] as const;
|
|
|
|
const SAVE_MESSAGE_KEY = "settings-save";
|
|
|
|
export function SettingsPage() {
|
|
const { message } = AntApp.useApp();
|
|
const { compact, preference, setCompact, setPreference } = useThemePreference();
|
|
const { isUpdating, updateSettings } = useSettings();
|
|
|
|
const handleThemeChange = (value: ThemePreference) => {
|
|
message.open({ content: "保存中...", duration: 0, key: SAVE_MESSAGE_KEY, type: "loading" });
|
|
updateSettings(
|
|
{ theme: value },
|
|
{
|
|
onError: () => {
|
|
void message.open({ content: "保存失败", duration: 2, key: SAVE_MESSAGE_KEY, type: "error" });
|
|
},
|
|
onSuccess: () => {
|
|
setPreference(value);
|
|
void message.open({ content: "已保存", duration: 1.5, key: SAVE_MESSAGE_KEY, type: "success" });
|
|
},
|
|
},
|
|
);
|
|
};
|
|
|
|
const handleCompactChange = (checked: boolean) => {
|
|
message.open({ content: "保存中...", duration: 0, key: SAVE_MESSAGE_KEY, type: "loading" });
|
|
updateSettings(
|
|
{ compact: checked },
|
|
{
|
|
onError: () => {
|
|
void message.open({ content: "保存失败", duration: 2, key: SAVE_MESSAGE_KEY, type: "error" });
|
|
},
|
|
onSuccess: () => {
|
|
setCompact(checked);
|
|
void message.open({ content: "已保存", duration: 1.5, key: SAVE_MESSAGE_KEY, type: "success" });
|
|
},
|
|
},
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Card title="主题" type="inner">
|
|
<Form
|
|
className="settings-form"
|
|
colon={false}
|
|
disabled={isUpdating}
|
|
labelAlign="left"
|
|
labelCol={{ flex: "120px" }}
|
|
layout="horizontal"
|
|
>
|
|
<Form.Item colon={false} help="选择跟随系统将自动适配操作系统的深浅色偏好" label="主题模式">
|
|
<Radio.Group
|
|
buttonStyle="solid"
|
|
onChange={(e) => handleThemeChange(parseThemePreference(e.target.value))}
|
|
optionType="button"
|
|
options={THEME_OPTIONS.map((o) => ({ label: o.label, value: o.value }))}
|
|
value={preference}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item colon={false} help="开启后控件间距和高度变小,显示更多内容" label="紧凑模式">
|
|
<Switch checked={compact} onChange={handleCompactChange} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Card>
|
|
);
|
|
}
|