function drawNavbar() {
    function createElement(json) {
        if (!json || json.length === 0)
            return null
        var fr = document.createDocumentFragment()
        // var elList = []
        for (let i = 0; i < json.length; i++) {
            const element = json[i];
            // 创建元素
            var el = document.createElement(element.tagName)
            // 设置属性
            if (element.attr) {
                Object.keys(element.attr).forEach(attrName => {
                    el.setAttribute(attrName, element.attr[attrName])
                })
            }
            // 设置 inner HTML
            if (element.innerHTML) {
                el.innerHTML = element.innerHTML
            }
            // 创建子元素并插入
            if (element.childNode) {
                var childNodeElement = createElement(element.childNode)
                el.appendChild(childNodeElement)
            }

            // 将当前元素插入父级元素
            // elList.push(el)
            fr.appendChild(el)
        }
        // 返回
        return fr
        // return elList
    }

    var headerDOM = document.getElementById("header")
    var headerHTML = createElement([
        {
            "tagName": "div",
            "attr": {
                "id": "header-wapper",
                "style": "opacity: 0; transition: 0.5s"
            },
            "childNode": [
                {
                    "tagName": "img",
                    "attr": {
                        "class": "header-logo-image",
                        "src": "./assets/image/logo-normal-resize-compressed.png",
                        "alt": "小墨算法可视化",
                    },
                },
                {
                    "tagName": "div",
                },
                {
                    "tagName": "div",
                    "attr": {
                        "class": "header-logo-links",
                        "style": "text-align: right;",
                    },
                    "childNode": [
                        {
                            "tagName": "a",
                            "attr": {
                                "style": "line-height: 60px;",
                                "href": "https://space.bilibili.com/457109942",
                                "target": "_blank",
                            },
                            "innerHTML": "B站"
                        },
                        {
                            "tagName": "a",
                            "attr": {
                                "class": "js-mode-toggle js-mode-toggle-text",
                                "style": `line-height: 60px;
                                            background: var(--button-icon);
                                            background-size: contain;
                                            background-repeat: no-repeat;
                                            background-position: center;`,
                                "href": "javascript:void(0)",
                            },
                            "innerHTML": "Dark"
                        },
                    ]
                },
            ]
        }
    ])
    console.log(headerHTML)
    if (headerDOM && headerHTML) {
        headerDOM.appendChild(headerHTML)
        setTimeout(function () {
            headerDOM.querySelector("#header-wapper").style.opacity = 1
        })
    } else {
        console.log("找不到 header 容器或 header 容器内容为空")
    }
}

drawNavbar()