feat: synchronize UI branding with backend settings dynamically

This commit is contained in:
Bot
2026-04-16 17:18:52 +08:00
parent b668063c52
commit 42f62f7d5b
2 changed files with 31 additions and 3 deletions
+26 -3
View File
@@ -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]);
+5
View File
@@ -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 {