Some checks failed
CI / Lint + Build (push) Has been cancelled
- 移除 site-settings 模板中的内联 style 属性(display:none, width:100px) - 将内联样式迁移至 site-settings.css 的 CSS 类中 - site-settings-theme.js 用 className 替代 style.display 操作
109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
/* =====================================================
|
|
MetaLab 管理面板 - 主题切换
|
|
立即生效,无需重启
|
|
===================================================== */
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
var selector = document.getElementById('theme-selector');
|
|
var saveBtn = document.getElementById('theme-save-btn');
|
|
var infoEl = document.getElementById('theme-info');
|
|
var statusSection = document.getElementById('theme-status');
|
|
var statusMsg = document.getElementById('theme-status-msg');
|
|
var themes = [];
|
|
var currentTheme = '';
|
|
|
|
async function loadThemes() {
|
|
try {
|
|
var res = await api.get('/api/admin/site-settings/themes');
|
|
if (!res.success) {
|
|
showToast('加载主题列表失败', 'error');
|
|
return;
|
|
}
|
|
themes = res.data.themes || [];
|
|
currentTheme = res.data.current || 'MetaLab-2026';
|
|
|
|
// 填充下拉
|
|
selector.innerHTML = '';
|
|
themes.forEach(function(t) {
|
|
var opt = document.createElement('option');
|
|
opt.value = t.dir;
|
|
opt.textContent = t.display_name || t.name;
|
|
if (t.dir === currentTheme) {
|
|
opt.selected = true;
|
|
updateInfo(t);
|
|
}
|
|
selector.appendChild(opt);
|
|
});
|
|
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = '保存';
|
|
|
|
// 选择变化时更新信息
|
|
selector.addEventListener('change', function() {
|
|
var selected = selector.value;
|
|
var found = themes.find(function(t) { return t.dir === selected; });
|
|
if (found) {
|
|
updateInfo(found);
|
|
}
|
|
saveBtn.disabled = (selected === currentTheme);
|
|
});
|
|
|
|
// 保存
|
|
saveBtn.addEventListener('click', function() {
|
|
applyTheme(selector.value);
|
|
});
|
|
} catch (e) {
|
|
showToast('加载主题列表失败', 'error');
|
|
}
|
|
}
|
|
|
|
function updateInfo(theme) {
|
|
var parts = [];
|
|
if (theme.display_name) parts.push(theme.display_name);
|
|
if (theme.version) parts.push('v' + theme.version);
|
|
if (theme.author) parts.push('作者:' + theme.author);
|
|
if (theme.description) parts.push(theme.description);
|
|
infoEl.innerHTML = '<span class="setting-value">' + escapeHtml(parts.join(' · ')) + '</span>';
|
|
}
|
|
|
|
async function applyTheme(themeDir) {
|
|
saveBtn.disabled = true;
|
|
saveBtn.textContent = '切换中...';
|
|
showStatus('正在切换主题...', '');
|
|
|
|
try {
|
|
var res = await api.put('/api/admin/site-settings/theme', { theme: themeDir });
|
|
if (res.success) {
|
|
currentTheme = themeDir;
|
|
saveBtn.textContent = '已生效';
|
|
showToast('主题已切换,即时生效', 'success');
|
|
showStatus('✅ 主题已切换为:<strong>' + themeDir + '</strong>,所有访客可见新主题', 'success');
|
|
} else {
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = '保存';
|
|
showToast(res.message || '切换失败', 'error');
|
|
showStatus('❌ 切换失败:' + (res.message || '未知错误'), 'error');
|
|
}
|
|
} catch (e) {
|
|
saveBtn.disabled = false;
|
|
saveBtn.textContent = '保存';
|
|
showToast('切换失败', 'error');
|
|
showStatus('❌ 切换失败,请重试', 'error');
|
|
}
|
|
}
|
|
|
|
function showStatus(msg, type) {
|
|
statusSection.className = 'settings-section visible';
|
|
if (type === 'success') {
|
|
statusSection.classList.add('status-success');
|
|
} else if (type === 'error') {
|
|
statusSection.classList.add('status-error');
|
|
}
|
|
statusMsg.innerHTML = msg;
|
|
}
|
|
|
|
loadThemes();
|
|
})();
|