mashangyoujiu/Public/js/auto-theme.js

/**
 * 全局主题自动应用脚本
 * 自动为所有后台页面应用深蓝色商务主题
 */

(function() {
    'use strict';
    
    // 检查是否已加载主题样式
    function hasThemeLoaded() {
        const links = document.querySelectorAll('link[href*=\"theme-business-blue\"]');
        return links.length > 0;
    }
    
    // 加载深蓝商务主题
    function loadBusinessBlueTheme() {
        if (hasThemeLoaded()) {
            return;
        }
        
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = '/Public/css/theme-business-blue.css';
        link.setAttribute('data-theme', 'business-blue');
        document.head.appendChild(link);
        
        console.log('✅ 深蓝商务主题已加载');
    }
    
    // 应用主题特定的样式修正
    function applyThemeEnhancements() {
        // 创建主题增强样式
        const style = document.createElement('style');
        style.setAttribute('data-theme-enhancements', 'business-blue');
        style.textContent = `
            /* 深蓝商务主题全局增强 */
            .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-warm):not(.layui-btn-danger) {
                background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
                color: white !important;
                border: none !important;
            }
            
            .layui-table th {
                background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
                color: white !important;
            }
            
            .layui-laypage .layui-laypage-curr .layui-laypage-em {
                background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
            }
            
            .el-button--primary {
                background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
                border-color: #1e3a8a !important;
            }
            
            /* 页面整体背景优化 */
            body {
                background-color: #f8fafc !important;
            }
            
            /* 卡片容器优化 */
            .layui-card {
                border-radius: 12px !important;
                box-shadow: 0 4px 20px rgba(30, 58, 138, 0.08) !important;
                border: 1px solid #e2e8f0 !important;
            }
            
            .layui-card-header {
                background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
                color: white !important;
                border-radius: 12px 12px 0 0 !important;
            }
            
            /* 表格优化 */
            .layui-table {
                border-radius: 12px !important;
                overflow: hidden !important;
            }
        `;
        
        document.head.appendChild(style);
        console.log('✅ 主题增强样式已应用');
    }
    
    // 显示主题切换成功消息
    function showSuccessMessage() {
        // 创建成功提示
        const notification = document.createElement('div');
        notification.innerHTML = `
            <div style=\"
                position: fixed;
                top: 20px;
                right: 20px;
                background: linear-gradient(135deg, #059669 0%, #10b981 100%);
                color: white;
                padding: 16px 24px;
                border-radius: 12px;
                box-shadow: 0 8px 30px rgba(5, 150, 105, 0.3);
                z-index: 10000;
                font-size: 14px;
                font-weight: 500;
                display: flex;
                align-items: center;
                gap: 12px;
                transform: translateX(100%);
                transition: transform 0.3s ease;
            \" id=\"theme-success-notification\">
                <span style=\"font-size: 18px;\">🎨</span>
                <span>深蓝商务主题已成功应用！</span>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        // 显示动画
        setTimeout(() => {
            const notif = document.getElementById('theme-success-notification');
            if (notif) {
                notif.style.transform = 'translateX(0)';
            }
        }, 100);
        
        // 3秒后隐藏
        setTimeout(() => {
            const notif = document.getElementById('theme-success-notification');
            if (notif) {
                notif.style.transform = 'translateX(100%)';
                setTimeout(() => {
                    if (notif.parentNode) {
                        notif.parentNode.removeChild(notif);
                    }
                }, 300);
            }
        }, 3000);
    }
    
    // 初始化主题
    function initTheme() {
        loadBusinessBlueTheme();
        
        // 等待DOM完全加载后应用增强
        setTimeout(() => {
            applyThemeEnhancements();
            showSuccessMessage();
        }, 100);
    }
    
    // 页面加载完成后执行
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTheme);
    } else {
        initTheme();
    }
    
})();