class SubToolbar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this._currentTool = 'home';
}
static get observedAttributes() {
return ['current-tool'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'current-tool' && oldValue !== newValue) {
this._currentTool = newValue;
this.updateSubMenu();
this.updateToolHeader();
}
}
async connectedCallback() {
this.render();
this.addEventListeners();
await this.checkUserAccess();
// 监听登录成功事件
document.addEventListener('login-success', async () => {
await this.checkUserAccess();
});
}
// 检查用户权限
async checkUserAccess() {
try {
const response = await fetch('/api/check-auth', {
credentials: 'include'
});
const result = await response.json();
if (result.success) {
const accessLevel = parseInt(result.user.access_level);
// 控制管理员选项的显示
const adminItems = this.shadowRoot.querySelectorAll('.admin-only');
adminItems.forEach(item => {
item.style.display = accessLevel >= 3 ? 'flex' : 'none';
});
// 控制待办事项选项的显示
const guestItems = this.shadowRoot.querySelectorAll('.guest-hidden');
guestItems.forEach(item => {
item.style.display = accessLevel > 0 ? 'flex' : 'none';
});
} else {
// 未登录或验证失败时隐藏管理员选项和待办事项
const adminItems = this.shadowRoot.querySelectorAll('.admin-only');
adminItems.forEach(item => {
item.style.display = 'none';
});
const guestItems = this.shadowRoot.querySelectorAll('.guest-hidden');
guestItems.forEach(item => {
item.style.display = 'none';
});
}
} catch (error) {
console.error('获取用户权限失败:', error);
// 发生错误时隐藏管理员选项和待办事项
const adminItems = this.shadowRoot.querySelectorAll('.admin-only');
adminItems.forEach(item => {
item.style.display = 'none';
});
const guestItems = this.shadowRoot.querySelectorAll('.guest-hidden');
guestItems.forEach(item => {
item.style.display = 'none';
});
}
}
render() {
this.shadowRoot.innerHTML = `
`;
}
updateSubMenu() {
const subMenus = this.shadowRoot.querySelectorAll('.sub-menu');
subMenus.forEach(menu => {
menu.classList.toggle('active', menu.getAttribute('data-parent') === this._currentTool);
});
}
addEventListeners() {
// 切换按钮事件
const toggleButton = this.shadowRoot.querySelector('.toolbar-toggle');
toggleButton.addEventListener('click', () => {
this.classList.toggle('collapsed');
const isCollapsed = this.classList.contains('collapsed');
toggleButton.querySelector('img').src = `assets/icons/png/chevron-d${isCollapsed ? 'right' : 'left'}.png`;
toggleButton.querySelector('img').alt = isCollapsed ? '展开' : '收起';
toggleButton.title = isCollapsed ? '展开' : '收起';
});
// 子菜单项点击事件
const subItems = this.shadowRoot.querySelectorAll('.sub-item');
subItems.forEach(item => {
item.addEventListener('click', () => {
// 移除同级菜单项的激活状态
const siblings = item.parentElement.querySelectorAll('.sub-item');
siblings.forEach(si => si.classList.remove('active'));
// 激活当前菜单项
item.classList.add('active');
// 触发自定义事件
const event = new CustomEvent('sub-item-selected', {
detail: {
parent: item.closest('.sub-menu').getAttribute('data-parent'),
text: item.textContent.trim(),
icon: item.getAttribute('data-icon')
},
bubbles: true,
composed: true
});
this.dispatchEvent(event);
});
});
}
updateToolHeader() {
const toolIcons = {
'home': { icon: 'home', text: '主页' },
'develop': { icon: 'develop', text: '开发' },
'config': { icon: 'sliders', text: '配置' },
'run': { icon: 'play', text: '运行' },
'monitor': { icon: 'chart', text: '监控' },
'system': { icon: 'cogs', text: '管理' }
};
const currentTool = toolIcons[this._currentTool] || toolIcons['home'];
const iconElement = this.shadowRoot.getElementById('currentToolIcon');
const nameElement = this.shadowRoot.getElementById('currentToolName');
iconElement.src = `assets/icons/png/${currentTool.icon}.png`;
iconElement.alt = currentTool.text;
nameElement.textContent = currentTool.text;
}
}
customElements.define('sub-toolbar', SubToolbar); 
主页
概览
更新记录
待办事项
帮助
Q&A
运行环境配置
模型配置
服务配置
接口配置
运行测试
运行仿真
运行日志
资源监控
仿真监控
模型监控
数据监控
数据采集
个人中心
系统日志
用户管理
