// 全局变量 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 = ` ${title} `; // 添加点击事件 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 = `

${title}

页面加载失败,请稍后重试。

`; } 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 `

页面加载中...

页面正在开发中,敬请期待...

`; } } // 动态加载页面对应的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); } });