CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

优化白色主题渲染逻辑

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-04 19:25:39 +08:00
parent 824ead4bee
commit 2d46729c27
3 changed files with 74 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -13,9 +13,18 @@
// Prevent theme flicker // Prevent theme flicker
(function() { (function() {
const savedTheme = localStorage.getItem('theme'); const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') { const settings = window.SITE_SETTINGS || {};
const defaultTheme = settings.default_theme || 'dark';
const theme = savedTheme || defaultTheme;
if (theme === 'light') {
document.documentElement.classList.add('light-theme'); document.documentElement.classList.add('light-theme');
} }
// Also apply title if available to prevent flicker
if (settings.page_name) {
document.title = settings.page_name;
}
})(); })();
</script> </script>
</head> </head>

22
public/js/app.js
View File

@@ -128,12 +128,24 @@
// Start data fetching // Start data fetching
fetchMetrics(); fetchMetrics();
fetchNetworkHistory(); fetchNetworkHistory();
// Site settings
if (window.SITE_SETTINGS) {
applySiteSettings(window.SITE_SETTINGS);
// Actual theme class already applied in head, just update icons and inputs
const savedTheme = localStorage.getItem('theme');
const currentTheme = savedTheme || window.SITE_SETTINGS.default_theme || 'dark';
updateThemeIcons(currentTheme);
// Still populate inputs
dom.pageNameInput.value = window.SITE_SETTINGS.page_name || '';
dom.siteTitleInput.value = window.SITE_SETTINGS.title || '';
dom.logoUrlInput.value = window.SITE_SETTINGS.logo_url || '';
dom.defaultThemeInput.value = window.SITE_SETTINGS.default_theme || 'dark';
}
loadSiteSettings(); loadSiteSettings();
// Initial icon check based on early head script
const currentTheme = document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
updateThemeIcons(currentTheme);
setInterval(fetchMetrics, REFRESH_INTERVAL); setInterval(fetchMetrics, REFRESH_INTERVAL);
setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL); setInterval(fetchNetworkHistory, NETWORK_HISTORY_INTERVAL);
} }
@@ -444,6 +456,8 @@
const response = await fetch('/api/settings'); const response = await fetch('/api/settings');
const settings = await response.json(); const settings = await response.json();
window.SITE_SETTINGS = settings; // Cache it globally
// Update inputs // Update inputs
dom.pageNameInput.value = settings.page_name || ''; dom.pageNameInput.value = settings.page_name || '';
dom.siteTitleInput.value = settings.title || ''; dom.siteTitleInput.value = settings.title || '';

49
server/index.js
View File

@@ -276,7 +276,49 @@ app.use(async (req, res, next) => {
next(); next();
}); });
app.use(express.static(path.join(__dirname, '..', 'public'))); // Helper to serve index.html with injected settings
const serveIndex = async (req, res) => {
try {
const indexPath = path.join(__dirname, '..', 'public', 'index.html');
if (!fs.existsSync(indexPath)) return res.status(404).send('Not found');
let html = fs.readFileSync(indexPath, 'utf8');
// Fetch settings
let settings = {
page_name: '数据可视化展示大屏',
title: '数据可视化展示大屏',
logo_url: null,
default_theme: 'dark'
};
if (isDbInitialized) {
try {
const [rows] = await db.query('SELECT * FROM site_settings WHERE id = 1');
if (rows.length > 0) settings = rows[0];
} catch (e) {
// DB not ready or table missing
}
}
// Inject settings
const settingsJson = JSON.stringify(settings);
const injection = `<script>window.SITE_SETTINGS = ${settingsJson};</script>`;
// Replace <head> with <head> + injection
html = html.replace('<head>', '<head>' + injection);
res.send(html);
} catch (err) {
console.error('Error serving index:', err);
res.status(500).send('Internal Server Error');
}
};
app.get('/', serveIndex);
app.get('/index.html', serveIndex);
app.use(express.static(path.join(__dirname, '..', 'public'), { index: false }));
// ==================== Prometheus Source CRUD ==================== // ==================== Prometheus Source CRUD ====================
@@ -553,8 +595,9 @@ app.get('/api/metrics/cpu-history', async (req, res) => {
}); });
// SPA fallback // SPA fallback
app.get('*', (req, res) => { app.get('*', (req, res, next) => {
res.sendFile(path.join(__dirname, '..', 'public', 'index.html')); if (req.path.startsWith('/api/') || req.path.includes('.')) return next();
serveIndex(req, res);
}); });