dm-design/merchant/demo/js/main.js

// 全局状态管理
let currentExpandedMenus = [];
let currentSelectedMenuItem = '';

// DOM 加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('大数集市商户端初始化完成');
    
    // 初始化菜单状态
    initializeMenus();
    
    // 初始化开关状态
    initializeSwitches();
    
    // 添加搜索功能
    initializeSearch();
});

// 菜单展开/收起功能
function toggleMenu(menuId) {
    const arrow = document.getElementById(menuId + '-arrow');
    const submenu = document.getElementById(menuId + '-submenu');
    
    if (currentExpandedMenus.includes(menuId)) {
        // 收起菜单
        currentExpandedMenus = currentExpandedMenus.filter(id => id !== menuId);
        
        if (arrow) {
            arrow.classList.remove('rotate-180');
        }
        
        if (submenu) {
            submenu.classList.add('hidden');
        }
    } else {
        // 展开菜单
        currentExpandedMenus.push(menuId);
        
        if (arrow) {
            arrow.classList.add('rotate-180');
        }
        
        if (submenu) {
            submenu.classList.remove('hidden');
            submenu.classList.add('fade-in');
        }
    }
    
    console.log('菜单状态更新:', menuId, currentExpandedMenus);
}

// 显示等级设置页面
function showLevelSettings() {
    // 隐藏默认内容
    const defaultContent = document.getElementById('default-content');
    const levelSettingsContent = document.getElementById('level-settings-content');
    
    if (defaultContent) {
        defaultContent.classList.add('hidden');
    }
    
    if (levelSettingsContent) {
        levelSettingsContent.classList.remove('hidden');
        levelSettingsContent.classList.add('fade-in');
    }
    
    currentSelectedMenuItem = 'level-settings';
    console.log('切换到等级设置页面');
}

// 显示默认页面
function showDefaultContent() {
    const defaultContent = document.getElementById('default-content');
    const levelSettingsContent = document.getElementById('level-settings-content');
    
    if (levelSettingsContent) {
        levelSettingsContent.classList.add('hidden');
    }
    
    if (defaultContent) {
        defaultContent.classList.remove('hidden');
        defaultContent.classList.add('fade-in');
    }
    
    currentSelectedMenuItem = '';
    console.log('切换到默认页面');
}

// 开关切换功能
function toggleSwitch(switchElement) {
    const isChecked = switchElement.checked;
    console.log('开关状态:', isChecked);
    
    // 添加视觉反馈
    const slider = switchElement.nextElementSibling;
    if (slider) {
        if (isChecked) {
            slider.style.backgroundColor = '#16a34a';
        } else {
            slider.style.backgroundColor = '#e5e7eb';
        }
    }
}

// 初始化菜单状态
function initializeMenus() {
    // 会员管理菜单默认展开
    toggleMenu('member');
    
    // 添加首页点击事件
    const homeMenuItem = document.querySelector('[onclick*="首页"]');
    if (homeMenuItem) {
        homeMenuItem.addEventListener('click', showDefaultContent);
    }
    
    console.log('菜单初始化完成');
}

// 初始化开关状态
function initializeSwitches() {
    const switches = document.querySelectorAll('input[type="checkbox"]');
    switches.forEach(switchElement => {
        // 为已选中的开关设置正确的样式
        if (switchElement.checked) {
            const slider = switchElement.nextElementSibling;
            if (slider) {
                slider.style.backgroundColor = '#16a34a';
            }
        }
    });
    
    console.log('开关初始化完成，共', switches.length, '个开关');
}

// 搜索功能
function initializeSearch() {
    const searchInput = document.querySelector('input[placeholder*="搜索"]');
    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            filterMenuItems(searchTerm);
        });
    }
}

// 过滤菜单项
function filterMenuItems(searchTerm) {
    const menuItems = document.querySelectorAll('nav div');
    
    menuItems.forEach(item => {
        const text = item.textContent.toLowerCase();
        if (text.includes(searchTerm) || searchTerm === '') {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
    
    console.log('搜索筛选:', searchTerm);
}

// 添加一些实用的辅助函数
function showNotification(message, type = 'info') {
    console.log('通知:', message, '类型:', type);
    
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        border-radius: 6px;
        color: white;
        font-size: 14px;
        z-index: 1000;
        transition: all 0.3s ease;
    `;
    
    // 根据类型设置颜色
    switch(type) {
        case 'success':
            notification.style.backgroundColor = '#16a34a';
            break;
        case 'error':
            notification.style.backgroundColor = '#dc2626';
            break;
        case 'warning':
            notification.style.backgroundColor = '#d97706';
            break;
        default:
            notification.style.backgroundColor = '#3b82f6';
    }
    
    document.body.appendChild(notification);
    
    // 3秒后自动消失
    setTimeout(() => {
        notification.style.opacity = '0';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// 等级明细设置功能
function showLevelDetail(shopName) {
    showNotification(`正在设置 ${shopName} 的等级明细`, 'info');
    console.log('设置等级明细:', shopName);
}

// 添加表格行的点击事件
document.addEventListener('DOMContentLoaded', function() {
    const levelDetailButtons = document.querySelectorAll('button');
    levelDetailButtons.forEach(button => {
        if (button.textContent.includes('设置等级明细')) {
            button.addEventListener('click', function() {
                const row = this.closest('tr');
                const shopName = row.querySelector('td').textContent;
                showLevelDetail(shopName);
            });
        }
    });
});

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
    // ESC键回到首页
    if (e.key === 'Escape') {
        showDefaultContent();
    }
    
    // Ctrl+F 聚焦搜索框
    if (e.ctrlKey && e.key === 'f') {
        e.preventDefault();
        const searchInput = document.querySelector('input[placeholder*="搜索"]');
        if (searchInput) {
            searchInput.focus();
        }
    }
});

// 窗口大小变化时的响应式处理
window.addEventListener('resize', function() {
    const sidebar = document.querySelector('aside');
    if (window.innerWidth < 768 && sidebar) {
        console.log('切换到移动端布局');
        // 可以在这里添加移动端特定的逻辑
    }
});

// 导出一些全局函数供HTML调用
window.toggleMenu = toggleMenu;
window.showLevelSettings = showLevelSettings;
window.showDefaultContent = showDefaultContent;
window.toggleSwitch = toggleSwitch;
window.showLevelDetail = showLevelDetail;