class MainToolbar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
async connectedCallback() {
this.render();
this.addEventListeners();
await this.checkUserAccessLevel();
// 监听登录成功事件
document.addEventListener('login-success', async () => {
await 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);
});
});
}
async checkUserAccessLevel() {
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 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);