XNSim/XNSimHtml/components/main-toolbar.js

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 = `
            <style>
                :host {
                    width: 80px;
                    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
                    display: flex;
                    flex-direction: column;
                    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
                }

                .logo-container {
                    padding: 10px;
                    text-align: center;
                }

                .logo-image {
                    width: 60px;
                    height: 60px;
                }

                .tools-container {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    padding: 10px 0;
                }

                .tool-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 10px 0;
                    cursor: pointer;
                    color: white;
                    transition: all 0.3s;
                }

                .tool-item:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }

                .tool-item.active {
                    background-color: rgba(255, 255, 255, 0.2);
                }

                .tool-item.hidden {
                    display: none !important;
                }

                .icon {
                    width: 24px;
                    height: 24px;
                    margin-bottom: 5px;
                }

                span {
                    font-size: 12px;
                    text-align: center;
                }
            </style>
            <nav>
                <div class="logo-container">
                    <img src="assets/icons/XNSim.png" alt="XNSim Logo" class="logo-image">
                </div>
                <div class="tools-container">
                    <div class="tool-item active" data-tool="home">
                        <img src="assets/icons/png/home.png" alt="主页" class="icon">
                        <span>主页</span>
                    </div>
                    <div class="tool-item" data-tool="develop" id="developOption">
                        <img src="assets/icons/png/develop.png" alt="开发" class="icon">
                        <span>开发</span>
                    </div>
                    <div class="tool-item" data-tool="run">
                        <img src="assets/icons/png/play.png" alt="运行" class="icon">
                        <span>运行</span>
                    </div>
                    <div class="tool-item" data-tool="monitor">
                        <img src="assets/icons/png/chart.png" alt="监控" class="icon">
                        <span>监控</span>
                    </div>
                    <div class="tool-item" data-tool="system" id="systemManagement">
                        <img src="assets/icons/png/cogs.png" alt="管理" class="icon">
                        <span>管理</span>
                    </div>
                </div>
            </nav>
        `;
    }

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