AIClient-2-API/static/app/navigation.js
hex2077 4554a4cfd2 feat(ui): 重构前端UI组件并添加新功能
- 新增组件加载器实现动态加载HTML组件
- 重构导航功能,添加滚动到顶部功能
- 新增多个UI组件:header、sidebar、logs、usage等
- 实现移动端菜单响应式设计
- 优化DOM元素获取方式,使用延迟加载
- 新增系统监控模块和用量缓存功能
- 扩展静态文件服务支持/components路径
- 实现插件管理和系统API接口
- 添加配置上传和管理功能
- 完善认证和token管理机制
2026-01-10 15:53:04 +08:00

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