301 行
12 KiB
JavaScript
可执行文件
301 行
12 KiB
JavaScript
可执行文件
/**
|
|
* MSS后台主题配置系统
|
|
* Theme Configuration System
|
|
* 版本: 1.0.0
|
|
*/
|
|
|
|
(function(window) {
|
|
'use strict';
|
|
|
|
// 主题配置对象
|
|
const ThemeConfig = {
|
|
// 当前主题
|
|
currentTheme: 'business-blue',
|
|
|
|
// 可用主题列表
|
|
themes: {
|
|
'business-blue': {
|
|
name: '深蓝商务',
|
|
description: '简洁大气的深蓝色商务风格',
|
|
cssFile: '/Public/css/theme-business-blue.css',
|
|
preview: '/Public/images/theme-preview-blue.jpg',
|
|
colors: {
|
|
primary: '#1e3a8a',
|
|
secondary: '#64748b',
|
|
accent: '#f97316',
|
|
success: '#059669',
|
|
warning: '#d97706',
|
|
danger: '#dc2626'
|
|
}
|
|
},
|
|
'classic': {
|
|
name: '经典风格',
|
|
description: '传统的管理系统界面风格',
|
|
cssFile: null, // 使用原始样式
|
|
preview: '/Public/images/theme-preview-classic.jpg',
|
|
colors: {
|
|
primary: '#409EFF',
|
|
secondary: '#909399',
|
|
accent: '#E6A23C',
|
|
success: '#67C23A',
|
|
warning: '#E6A23C',
|
|
danger: '#F56C6C'
|
|
}
|
|
}
|
|
},
|
|
|
|
// 初始化主题系统
|
|
init: function() {
|
|
this.loadThemeFromStorage();
|
|
this.createThemeControls();
|
|
this.bindEvents();
|
|
this.applyTheme(this.currentTheme);
|
|
},
|
|
|
|
// 从本地存储加载主题设置
|
|
loadThemeFromStorage: function() {
|
|
const savedTheme = localStorage.getItem('mss-admin-theme');
|
|
if (savedTheme && this.themes[savedTheme]) {
|
|
this.currentTheme = savedTheme;
|
|
}
|
|
},
|
|
|
|
// 保存主题设置到本地存储
|
|
saveThemeToStorage: function() {
|
|
localStorage.setItem('mss-admin-theme', this.currentTheme);
|
|
},
|
|
|
|
// 创建主题控制界面
|
|
createThemeControls: function() {
|
|
// 检查是否已存在主题控制器
|
|
if (document.getElementById('theme-controls')) {
|
|
return;
|
|
}
|
|
|
|
const controlsHTML = `
|
|
<div id="theme-controls" class="theme-controls" style="position: fixed; top: 100px; right: -300px; width: 320px; background: white; box-shadow: -2px 0 20px rgba(0,0,0,0.1); border-radius: 12px 0 0 12px; z-index: 9999; transition: right 0.3s ease;">
|
|
<div class="theme-controls-header" style="padding: 20px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border-radius: 12px 0 0 0;">
|
|
<h4 style="margin: 0; font-size: 16px; font-weight: 600;">🎨 主题设置</h4>
|
|
<button id="theme-toggle" style="position: absolute; left: -40px; top: 20px; width: 40px; height: 40px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border: none; border-radius: 8px 0 0 8px; cursor: pointer; font-size: 16px;">⚙️</button>
|
|
</div>
|
|
<div class="theme-controls-body" style="padding: 20px;">
|
|
<div class="theme-selector">
|
|
<h5 style="margin: 0 0 15px 0; color: #374151; font-size: 14px;">选择主题风格</h5>
|
|
<div id="theme-options" class="theme-options">
|
|
${Object.keys(this.themes).map(themeKey => {
|
|
const theme = this.themes[themeKey];
|
|
return `
|
|
<div class="theme-option ${themeKey === this.currentTheme ? 'active' : ''}"
|
|
data-theme="${themeKey}"
|
|
style="border: 2px solid ${themeKey === this.currentTheme ? '#1e3a8a' : '#e2e8f0'}; border-radius: 8px; padding: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease;">
|
|
<div style="display: flex; align-items: center; gap: 12px;">
|
|
<div class="theme-preview" style="width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, ${theme.colors.primary} 0%, ${theme.colors.accent} 100%);"></div>
|
|
<div>
|
|
<div style="font-weight: 600; color: #374151; font-size: 14px;">${theme.name}</div>
|
|
<div style="font-size: 12px; color: #6b7280;">${theme.description}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('')}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-actions" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
|
|
<button id="reset-theme" style="width: 100%; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.3s ease;">
|
|
🔄 重置为默认主题
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.insertAdjacentHTML('beforeend', controlsHTML);
|
|
},
|
|
|
|
// 绑定事件
|
|
bindEvents: function() {
|
|
// 主题切换器开关
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.id === 'theme-toggle') {
|
|
this.toggleThemeControls();
|
|
}
|
|
|
|
// 主题选项点击
|
|
if (e.target.closest('.theme-option')) {
|
|
const themeKey = e.target.closest('.theme-option').dataset.theme;
|
|
this.switchTheme(themeKey);
|
|
}
|
|
|
|
// 重置主题
|
|
if (e.target.id === 'reset-theme') {
|
|
this.resetTheme();
|
|
}
|
|
|
|
// 点击其他区域关闭主题面板
|
|
if (!e.target.closest('#theme-controls')) {
|
|
this.hideThemeControls();
|
|
}
|
|
});
|
|
|
|
// 键盘快捷键 (Ctrl + T)
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.ctrlKey && e.key === 't') {
|
|
e.preventDefault();
|
|
this.toggleThemeControls();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 切换主题控制面板显示
|
|
toggleThemeControls: function() {
|
|
const controls = document.getElementById('theme-controls');
|
|
if (controls) {
|
|
const isVisible = controls.style.right === '0px';
|
|
controls.style.right = isVisible ? '-300px' : '0px';
|
|
}
|
|
},
|
|
|
|
// 隐藏主题控制面板
|
|
hideThemeControls: function() {
|
|
const controls = document.getElementById('theme-controls');
|
|
if (controls && controls.style.right === '0px') {
|
|
controls.style.right = '-300px';
|
|
}
|
|
},
|
|
|
|
// 切换主题
|
|
switchTheme: function(themeKey) {
|
|
if (!this.themes[themeKey]) {
|
|
console.error('主题不存在:', themeKey);
|
|
return;
|
|
}
|
|
|
|
this.currentTheme = themeKey;
|
|
this.applyTheme(themeKey);
|
|
this.updateThemeControls();
|
|
this.saveThemeToStorage();
|
|
|
|
// 显示切换成功提示
|
|
this.showNotification(`已切换到 ${this.themes[themeKey].name} 主题`);
|
|
},
|
|
|
|
// 应用主题
|
|
applyTheme: function(themeKey) {
|
|
const theme = this.themes[themeKey];
|
|
if (!theme) return;
|
|
|
|
// 移除之前的主题样式
|
|
const existingThemeLinks = document.querySelectorAll('link[data-theme]');
|
|
existingThemeLinks.forEach(link => link.remove());
|
|
|
|
// 应用新主题样式
|
|
if (theme.cssFile) {
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = theme.cssFile;
|
|
link.setAttribute('data-theme', themeKey);
|
|
document.head.appendChild(link);
|
|
}
|
|
|
|
// 更新CSS自定义属性
|
|
if (theme.colors) {
|
|
const root = document.documentElement;
|
|
Object.keys(theme.colors).forEach(colorKey => {
|
|
root.style.setProperty(`--theme-${colorKey}`, theme.colors[colorKey]);
|
|
});
|
|
}
|
|
},
|
|
|
|
// 更新主题控制界面
|
|
updateThemeControls: function() {
|
|
const options = document.querySelectorAll('.theme-option');
|
|
options.forEach(option => {
|
|
const themeKey = option.dataset.theme;
|
|
if (themeKey === this.currentTheme) {
|
|
option.classList.add('active');
|
|
option.style.borderColor = '#1e3a8a';
|
|
} else {
|
|
option.classList.remove('active');
|
|
option.style.borderColor = '#e2e8f0';
|
|
}
|
|
});
|
|
},
|
|
|
|
// 重置主题
|
|
resetTheme: function() {
|
|
this.switchTheme('business-blue');
|
|
},
|
|
|
|
// 显示通知
|
|
showNotification: function(message) {
|
|
// 如果有layui的layer模块，使用layer
|
|
if (window.layui && layui.layer) {
|
|
layui.layer.msg(message, {
|
|
icon: 1,
|
|
time: 2000,
|
|
skin: 'layui-layer-hui'
|
|
});
|
|
} else {
|
|
// 否则创建简单的通知
|
|
const notification = document.createElement('div');
|
|
notification.textContent = message;
|
|
notification.style.cssText = `
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 20px;
|
|
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
z-index: 10000;
|
|
font-size: 14px;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
// 动画显示
|
|
setTimeout(() => {
|
|
notification.style.transform = 'translateX(0)';
|
|
}, 100);
|
|
|
|
// 3秒后移除
|
|
setTimeout(() => {
|
|
notification.style.transform = 'translateX(100%)';
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.parentNode.removeChild(notification);
|
|
}
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
},
|
|
|
|
// 获取当前主题信息
|
|
getCurrentTheme: function() {
|
|
return this.themes[this.currentTheme];
|
|
},
|
|
|
|
// 添加自定义主题
|
|
addCustomTheme: function(themeKey, themeConfig) {
|
|
this.themes[themeKey] = themeConfig;
|
|
this.createThemeControls(); // 重新创建控制界面
|
|
}
|
|
};
|
|
|
|
// 自动初始化
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
ThemeConfig.init();
|
|
});
|
|
} else {
|
|
ThemeConfig.init();
|
|
}
|
|
|
|
// 暴露到全局
|
|
window.ThemeConfig = ThemeConfig;
|
|
|
|
})(window); |