62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { Switch } from "antd";
|
||
import {
|
||
GetMetadata,
|
||
getMetadataKey,
|
||
SaveMetadata,
|
||
} from "~/service/api/metadata/metadata";
|
||
import { ErrorHandle } from "~/service/config/error";
|
||
import logger from "~/lib/logger";
|
||
|
||
export const COVER_BLUR_KEY = "cover_blur";
|
||
export const COVER_BLUR_STORAGE_KEY = "gowvp_cover_blur";
|
||
|
||
/**
|
||
* 基本设置面板
|
||
* 为什么同时写 metadata + localStorage：metadata 是跨设备持久化源，
|
||
* localStorage 是同设备快速读取缓存，登录时从 metadata 同步到 localStorage。
|
||
*/
|
||
export default function GeneralSettings() {
|
||
const queryClient = useQueryClient();
|
||
|
||
const { data } = useQuery({
|
||
queryKey: [getMetadataKey, COVER_BLUR_KEY],
|
||
queryFn: () => GetMetadata(COVER_BLUR_KEY),
|
||
retry: false,
|
||
});
|
||
|
||
const blurEnabled = data?.data?.ext === "true";
|
||
|
||
const { mutate, isPending } = useMutation({
|
||
mutationFn: (enabled: boolean) =>
|
||
SaveMetadata(COVER_BLUR_KEY, String(enabled)),
|
||
onSuccess: (_, enabled) => {
|
||
localStorage.setItem(COVER_BLUR_STORAGE_KEY, String(enabled));
|
||
queryClient.invalidateQueries({
|
||
queryKey: [getMetadataKey, COVER_BLUR_KEY],
|
||
});
|
||
// logger.debug("cover blur toggled", enabled);
|
||
},
|
||
onError: ErrorHandle,
|
||
});
|
||
|
||
return (
|
||
<div>
|
||
<h3 className="text-base font-medium mb-4">基本设置</h3>
|
||
<div className="flex items-center justify-between py-3">
|
||
<div>
|
||
<div className="text-sm font-medium text-gray-900">封面毛玻璃</div>
|
||
<div className="text-xs text-gray-500 mt-0.5">
|
||
开启后所有通道封面加微弱模糊效果
|
||
</div>
|
||
</div>
|
||
<Switch
|
||
checked={blurEnabled}
|
||
loading={isPending}
|
||
onChange={(checked) => mutate(checked)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|