yvan-window/public/index.js

window.onload = () => {
    // 桌面图标点击效果
    let launchIconArray = document.querySelectorAll(".launch-icon")
    let menuShow = document.querySelector(".menu.sds-desktop>.menushow")
    let isHaveMenuItem = false
    launchIconArray.forEach(item => {
        let spacialCls = item.className.slice(22)
        let ariaLabel = item.ariaLabel
        item.addEventListener("click", () => {
            let menuchildren = Array.from(menuShow.children)
            if (menuchildren.length > 0) {
                isHaveMenuItem = menuchildren.some(menuchild1 => {
                    return menuchild1.className === spacialCls
                })
                menuchildren.forEach(menuchild2 => {
                    if (menuchild2.className === spacialCls) {
                        menuchild2.style = 'background:rgba(225,225,225,0.5);'
                    } else {
                        menuchild2.style = 'background-color: rgba(50,60,70,0.9);'
                    }
                })
            }
            if (!isHaveMenuItem) {
                let menuItem = document.createElement('li')
                let menuItemDiv = document.createElement('div')
                menuItem.className = `${spacialCls}`
                menuItem.ariaLabel = `${ariaLabel}`
                menuItem.style = 'background:rgba(225,225,225,0.5);'
                menuItemDiv.className = 'menuItem'
                menuItemDiv.style = `background-image: url(../public/image/index/${spacialCls}.png)`
                menuItem.appendChild(menuItemDiv)
                menuShow.appendChild(menuItem)
            }
        })
    })
    let tjCenter = document.querySelector(".tjCenter")
    let tjDetail = document.querySelector(".tjDetail")
    tjCenter.addEventListener("click", () => {
        tjDetail.style.display = 'block'
    })

    // 弹出窗口工具栏逻辑
    let toolHelpArray = document.querySelectorAll(".x-window-header .x-tool.x-tool-help")
    toolHelpArray.forEach(toolHelp => {
        toolHelp.addEventListener('click', () => {
            
        })
    })

    let toolMinimizeArray = document.querySelectorAll(".x-window-header .x-tool.x-tool-minimize")
    toolMinimizeArray.forEach(toolMinimize => {
        toolMinimize.addEventListener('click', () => {
            let window = toolMinimize.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
            window.style.display = 'none'
           
        })
    })

    let toolCloseArray = document.querySelectorAll(".x-window-header .x-tool.x-tool-close")
    toolCloseArray.forEach(toolClose => {
        toolClose.addEventListener('click', () => {
            let window = toolClose.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
            window.style.display = 'none'
            let windowTitle = window.children[0].className.slice(12)
            console.log(windowTitle)
            
        })
    })

    let toolMaximizeArray = document.querySelectorAll(".x-window-header .x-tool.x-tool-maximize")
    toolMaximizeArray.forEach(toolMaximize => {
        toolMaximize.addEventListener('click', () => {
            let window = toolMaximize.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
            let width = window.style.width
            window.style.width = '100%'
            toolMaximize.style.display = 'none'
            let toolRestore = toolMaximize.previousElementSibling
            toolRestore.style.display = 'block'
            toolRestore.addEventListener('click', () => {
                window.style.width = width
                toolMaximize.style.display = 'block'
                toolRestore.style.display = 'none'
            })
        })
    })
}