- 新增组件加载器实现动态加载HTML组件 - 重构导航功能,添加滚动到顶部功能 - 新增多个UI组件:header、sidebar、logs、usage等 - 实现移动端菜单响应式设计 - 优化DOM元素获取方式,使用延迟加载 - 新增系统监控模块和用量缓存功能 - 扩展静态文件服务支持/components路径 - 实现插件管理和系统API接口 - 添加配置上传和管理功能 - 完善认证和token管理机制
95 lines
No EOL
2.1 KiB
JavaScript
95 lines
No EOL
2.1 KiB
JavaScript
// 导航功能模块
|
|
|
|
import { elements } from './constants.js';
|
|
|
|
/**
|
|
* 初始化导航功能
|
|
*/
|
|
function initNavigation() {
|
|
if (!elements.navItems || !elements.sections) {
|
|
console.warn('导航元素未找到');
|
|
return;
|
|
}
|
|
|
|
elements.navItems.forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const sectionId = item.dataset.section;
|
|
|
|
// 更新导航状态
|
|
elements.navItems.forEach(nav => nav.classList.remove('active'));
|
|
item.classList.add('active');
|
|
|
|
// 显示对应章节
|
|
elements.sections.forEach(section => {
|
|
section.classList.remove('active');
|
|
if (section.id === sectionId) {
|
|
section.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// 滚动到顶部
|
|
scrollToTop();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 切换到指定章节
|
|
* @param {string} sectionId - 章节ID
|
|
*/
|
|
function switchToSection(sectionId) {
|
|
// 更新导航状态
|
|
elements.navItems.forEach(nav => {
|
|
nav.classList.remove('active');
|
|
if (nav.dataset.section === sectionId) {
|
|
nav.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// 显示对应章节
|
|
elements.sections.forEach(section => {
|
|
section.classList.remove('active');
|
|
if (section.id === sectionId) {
|
|
section.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// 滚动到顶部
|
|
scrollToTop();
|
|
}
|
|
|
|
/**
|
|
* 滚动到页面顶部
|
|
*/
|
|
function scrollToTop() {
|
|
// 尝试滚动内容区域
|
|
const contentContainer = document.getElementById('content-container');
|
|
if (contentContainer) {
|
|
contentContainer.scrollTop = 0;
|
|
}
|
|
|
|
// 同时滚动窗口到顶部
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
/**
|
|
* 切换到仪表盘页面
|
|
*/
|
|
function switchToDashboard() {
|
|
switchToSection('dashboard');
|
|
}
|
|
|
|
/**
|
|
* 切换到提供商页面
|
|
*/
|
|
function switchToProviders() {
|
|
switchToSection('providers');
|
|
}
|
|
|
|
export {
|
|
initNavigation,
|
|
switchToSection,
|
|
switchToDashboard,
|
|
switchToProviders
|
|
}; |