mirror of
https://github.com/Buriburizaem0n/nezha-dash-v1.git
synced 2026-05-06 13:58:43 +00:00
feat: synchronize UI branding with backend settings dynamically
This commit is contained in:
+26
-3
@@ -1,4 +1,5 @@
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { DateTime } from "luxon";
|
||||||
import type React from "react";
|
import type React from "react";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
@@ -40,16 +41,38 @@ const MainApp: React.FC = () => {
|
|||||||
InjectContext(settingData?.data?.config?.custom_code);
|
InjectContext(settingData?.data?.config?.custom_code);
|
||||||
setIsCustomCodeInjected(true);
|
setIsCustomCodeInjected(true);
|
||||||
}
|
}
|
||||||
}, [settingData?.data?.config?.custom_code]);
|
|
||||||
|
// 同步自定义配置到全局变量
|
||||||
|
const config = settingData?.data?.config;
|
||||||
|
if (config) {
|
||||||
|
if (config.custom_logo) window.CustomLogo = config.custom_logo;
|
||||||
|
if (config.custom_description)
|
||||||
|
window.CustomDesc = config.custom_description;
|
||||||
|
if (config.custom_links) window.CustomLinks = config.custom_links;
|
||||||
|
|
||||||
|
const hour = DateTime.now().hour;
|
||||||
|
const isNight = hour >= 18 || hour < 6;
|
||||||
|
|
||||||
|
if (isNight && config.background_image_night) {
|
||||||
|
window.CustomBackgroundImage = config.background_image_night;
|
||||||
|
} else if (!isNight && config.background_image_day) {
|
||||||
|
window.CustomBackgroundImage = config.background_image_day;
|
||||||
|
}
|
||||||
|
window.CustomMobileBackgroundImage = window.CustomBackgroundImage;
|
||||||
|
}
|
||||||
|
}, [settingData]);
|
||||||
|
|
||||||
// 检测是否强制指定了主题颜色
|
// 检测是否强制指定了主题颜色
|
||||||
const forceTheme =
|
const forceTheme =
|
||||||
window.ForceTheme as string !== "" ? window.ForceTheme : undefined;
|
(window.ForceTheme as string) !== "" ? window.ForceTheme : undefined;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const savedTheme = localStorage.getItem("vite-ui-theme");
|
const savedTheme = localStorage.getItem("vite-ui-theme");
|
||||||
// Only auto-apply ForceTheme if the user hasn't manually picked one (or picked 'system')
|
// Only auto-apply ForceTheme if the user hasn't manually picked one (or picked 'system')
|
||||||
if ((!savedTheme || savedTheme === "system") && (forceTheme === "dark" || forceTheme === "light")) {
|
if (
|
||||||
|
(!savedTheme || savedTheme === "system") &&
|
||||||
|
(forceTheme === "dark" || forceTheme === "light")
|
||||||
|
) {
|
||||||
setTheme(forceTheme);
|
setTheme(forceTheme);
|
||||||
}
|
}
|
||||||
}, [forceTheme, setTheme]);
|
}, [forceTheme, setTheme]);
|
||||||
|
|||||||
@@ -150,6 +150,11 @@ type SettingConfig = {
|
|||||||
user_template: string;
|
user_template: string;
|
||||||
admin_template: string;
|
admin_template: string;
|
||||||
custom_code: string;
|
custom_code: string;
|
||||||
|
custom_logo?: string;
|
||||||
|
custom_description?: string;
|
||||||
|
custom_links?: string;
|
||||||
|
background_image_day?: string;
|
||||||
|
background_image_night?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface SettingResponse {
|
export interface SettingResponse {
|
||||||
|
|||||||
Reference in New Issue
Block a user