* Boolean 类型的快捷设置项
({
settingKey,
isHovered,
}: {
settingKey: keyof typeof settingsSchema.shape;
isHovered: boolean;
})
| 20 | * Boolean 类型的快捷设置项 |
| 21 | */ |
| 22 | function BooleanQuickSettingControl({ |
| 23 | settingKey, |
| 24 | isHovered, |
| 25 | }: { |
| 26 | settingKey: keyof typeof settingsSchema.shape; |
| 27 | isHovered: boolean; |
| 28 | }) { |
| 29 | const [value, setValue] = useState<boolean>(Settings[settingKey] as boolean); |
| 30 | |
| 31 | useEffect(() => { |
| 32 | const unwatch = Settings.watch(settingKey, (newValue) => { |
| 33 | if (typeof newValue === "boolean") setValue(newValue); |
| 34 | }); |
| 35 | return unwatch; |
| 36 | }, [settingKey]); |
| 37 | |
| 38 | const handleToggle = () => { |
| 39 | const currentValue = Settings[settingKey]; |
| 40 | if (typeof currentValue === "boolean") { |
| 41 | // @ts-expect-error 设置值 |
| 42 | Settings[settingKey] = !currentValue; |
| 43 | } |
| 44 | }; |
| 45 | |
| 46 | return ( |
| 47 | <div |
| 48 | className={cn("overflow-hidden transition-all duration-200", isHovered ? "w-10 opacity-100" : "w-0 opacity-0")} |
| 49 | > |
| 50 | <Switch checked={value} onCheckedChange={handleToggle} /> |
| 51 | </div> |
| 52 | ); |
| 53 | } |
| 54 | |
| 55 | /** |
| 56 | * Enum 类型的快捷设置项（下拉菜单） |