dm-design/web/merchant/script.js

// 全局变量
let tabCounter = 0;
let activeTabId = 'home-tab';

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeSystem();
});

// 初始化系统
function initializeSystem() {
    console.log('信息管理系统已加载');
}

// 切换子菜单显示/隐藏
function toggleSubmenu(submenuId) {
    const submenu = document.getElementById(submenuId);
    const arrow = submenu.parentElement.querySelector('.arrow');
    
    if (submenu.classList.contains('expanded')) {
        submenu.classList.remove('expanded');
        arrow.classList.remove('rotated');
    } else {
        // 先关闭其他所有子菜单
        const allSubmenus = document.querySelectorAll('.submenu');
        const allArrows = document.querySelectorAll('.arrow');
        
        allSubmenus.forEach(menu => menu.classList.remove('expanded'));
        allArrows.forEach(arrow => arrow.classList.remove('rotated'));
        
        // 展开当前子菜单
        submenu.classList.add('expanded');
        arrow.classList.add('rotated');
    }
}

// 打开新的tab页面
async function openTab(title, contentType) {
    tabCounter++;
    const tabId = `tab-${tabCounter}`;
    const contentId = `content-${tabCounter}`;
    
    // 检查是否已经存在相同标题的tab
    const existingTab = Array.from(document.querySelectorAll('.tab')).find(tab => 
        tab.querySelector('span').textContent === title
    );
    
    if (existingTab) {
        // 如果已存在，直接激活该tab
        switchTab(existingTab.id);
        return;
    }
    
    // 创建新的tab
    const tabBar = document.querySelector('.tab-bar');
    const newTab = document.createElement('div');
    newTab.className = 'tab';
    newTab.id = tabId;
    newTab.innerHTML = `
        <span>${title}</span>
        <button class="close-btn" onclick="closeTab('${tabId}')" aria-label="关闭">×</button>
    `;
    
    // 添加点击事件
    newTab.addEventListener('click', function(e) {
        if (!e.target.classList.contains('close-btn')) {
            switchTab(tabId);
        }
    });
    
    tabBar.appendChild(newTab);
    
    // 创建对应的内容区域
    const contentArea = document.querySelector('.content-area');
    const newContent = document.createElement('div');
    newContent.className = 'tab-content';
    newContent.id = contentId;
    
    // 动态加载页面内容
    try {
        const pageContent = await loadPageContent(contentType);
        newContent.innerHTML = pageContent;
    } catch (error) {
        console.error('加载页面内容失败:', error);
        newContent.innerHTML = `
            <div class="page-content">
                <h2>${title}</h2>
                <p>页面加载失败，请稍后重试。</p>
            </div>
        `;
    }
    
    contentArea.appendChild(newContent);
    
    // 激活新创建的tab
    switchTab(tabId);
}

// 切换到指定的tab
function switchTab(tabId) {
    // 移除所有tab的active状态
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // 隐藏所有内容
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });
    
    // 激活指定的tab
    const targetTab = document.getElementById(tabId);
    if (targetTab) {
        targetTab.classList.add('active');
        activeTabId = tabId;
        
        // 显示对应的内容
        const contentId = tabId.replace('tab', 'content');
        const targetContent = document.getElementById(contentId);
        if (targetContent) {
            targetContent.classList.add('active');
        }
    }
}

// 关闭tab
function closeTab(tabId) {
    const tab = document.getElementById(tabId);
    const contentId = tabId.replace('tab', 'content');
    const content = document.getElementById(contentId);
    
    if (!tab) return;
    
    // 如果关闭的是当前激活的tab
    if (tabId === activeTabId) {
        // 找到前一个tab来激活
        const allTabs = document.querySelectorAll('.tab');
        let targetTab = null;
        
        for (let i = 0; i < allTabs.length; i++) {
            if (allTabs[i].id === tabId) {
                // 优先选择前一个tab，如果没有就选择后一个
                targetTab = allTabs[i - 1] || allTabs[i + 1];
                break;
            }
        }
        
        if (targetTab) {
            switchTab(targetTab.id);
        } else {
            // 如果没有其他tab，激活首页
            switchTab('home-tab');
        }
    }
    
    // 移除tab和对应的内容
    tab.remove();
    if (content) {
        content.remove();
    }
}

// 存储已加载的页面脚本，避免重复加载
const loadedPageScripts = new Set();

// 动态加载页面内容
async function loadPageContent(contentType) {
    try {
        const response = await fetch(`pages/${contentType}.html`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const content = await response.text();
        
        // 页面内容加载完成后，尝试加载对应的JavaScript文件
        await loadPageScript(contentType);
        
        return content;
    } catch (error) {
        console.error('加载页面失败:', error);
        // 返回默认内容
        return `
            <div class="page-content">
                <h2>页面加载中...</h2>
                <p>页面正在开发中，敬请期待...</p>
            </div>
        `;
    }
}

// 动态加载页面对应的JavaScript文件
async function loadPageScript(contentType) {
    const scriptPath = `js/${contentType}.js`;
    
    // 如果已经加载过该脚本，直接返回
    if (loadedPageScripts.has(scriptPath)) {
        // 调用页面初始化函数（如果存在）
        const initFunctionName = `init${toCamelCase(contentType)}`;
        if (typeof window[initFunctionName] === 'function') {
            window[initFunctionName]();
        }
        return;
    }
    
    try {
        // 检查文件是否存在
        const checkResponse = await fetch(scriptPath, { method: 'HEAD' });
        if (!checkResponse.ok) {
            console.log(`页面脚本文件不存在: ${scriptPath}`);
            return;
        }
        
        // 动态创建script标签加载JavaScript文件
        const script = document.createElement('script');
        script.src = scriptPath;
        script.onload = () => {
            console.log(`页面脚本已加载: ${scriptPath}`);
            loadedPageScripts.add(scriptPath);
            
            // 调用页面初始化函数（如果存在）
            const initFunctionName = `init${toCamelCase(contentType)}`;
            if (typeof window[initFunctionName] === 'function') {
                window[initFunctionName]();
            }
        };
        script.onerror = () => {
            console.error(`页面脚本加载失败: ${scriptPath}`);
        };
        
        document.head.appendChild(script);
        
    } catch (error) {
        console.error('检查页面脚本文件时出错:', error);
    }
}

// 将kebab-case转换为CamelCase
function toCamelCase(str) {
    return str.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase())
              .replace(/^[a-z]/, match => match.toUpperCase());
}

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
    // ESC键关闭当前tab（除了首页）
    if (e.key === 'Escape' && activeTabId !== 'home-tab') {
        closeTab(activeTabId);
    }
});