class MainToolbar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
this.addEventListeners();
this.checkUserAccessLevel();
}
render() {
this.shadowRoot.innerHTML = `
`;
}
addEventListeners() {
const toolItems = this.shadowRoot.querySelectorAll('.tool-item');
toolItems.forEach(item => {
item.addEventListener('click', () => {
// 移除所有工具项的激活状态
toolItems.forEach(t => t.classList.remove('active'));
// 激活当前工具项
item.classList.add('active');
// 触发自定义事件
const tool = item.getAttribute('data-tool');
const event = new CustomEvent('tool-selected', {
detail: {
tool: tool,
text: item.querySelector('span').textContent
},
bubbles: true,
composed: true
});
this.dispatchEvent(event);
});
});
}
checkUserAccessLevel() {
// 获取用户信息
let userInfo;
try {
const userInfoStr = localStorage.getItem('userInfo');
if (!userInfoStr) {
return;
}
userInfo = JSON.parse(userInfoStr);
// 获取用户访问级别
const accessLevel = parseInt(userInfo.access_level);
// 根据用户访问级别控制开发选项的可见性
const developOption = this.shadowRoot.getElementById('developOption');
if (developOption) {
// 只有等级大于等于2的用户才可见
if (accessLevel < 2) {
developOption.classList.add('hidden');
} else {
developOption.classList.remove('hidden');
}
}
} catch (error) {
console.error('处理用户信息失败:', error);
}
}
}
customElements.define('main-toolbar', MainToolbar);