80d4e16840
新增完整的Web UI管理控制台，包含以下主要功能： 1. 响应式设计的现代化界面 2. 实时监控系统状态和提供商统计 3. 配置管理功能，支持多种模型提供商 4. 文件上传和OAuth凭据管理 5. 路径路由调用示例和curl命令生成 6. 实时日志查看和事件流处理 7. 提供完整的UI文档说明 新增多个前端模块文件，包括导航、事件处理、文件上传等功能组件，并更新package.json添加multer依赖以支持文件上传功能。同时添加详细的UI_README.md文档说明所有功能特性和使用方法。
75 lines
No EOL
1.7 KiB
JavaScript
75 lines
No EOL
1.7 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');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 切换到指定章节
|
|
* @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');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 切换到仪表盘页面
|
|
*/
|
|
function switchToDashboard() {
|
|
switchToSection('dashboard');
|
|
}
|
|
|
|
/**
|
|
* 切换到提供商页面
|
|
*/
|
|
function switchToProviders() {
|
|
switchToSection('providers');
|
|
}
|
|
|
|
export {
|
|
initNavigation,
|
|
switchToSection,
|
|
switchToDashboard,
|
|
switchToProviders
|
|
}; |