function genUI(UIInfo) {
    // create some elements
    const bodyEle = document.body
    const titleEle = document.createElement("div")
    const operationTitleEle = document.createElement("div")
    const operationRemarkEle = document.createElement("div")
    const operationSwitchBtnEle = document.createElement("input")
    const operationSwitchTextEle = document.createElement("label")
    const operationItemListConEle = document.createElement("div")
    const operationItemListBeforeModifyConEle = document.createElement("div")
    const operationItemListBeforeModifyTitleEle = document.createElement("div")
    const operationItemListAfterModifyConEle = document.createElement("div")
    const operationItemListAfterModifyTitleEle = document.createElement("div")
    const operationChangeBtnEle = document.createElement("button")
    const operationAddBtnEle = document.createElement("button")
    const listTitleEle = document.createElement("div")
    const listRemarkEle = document.createElement("div")
    const tableEle = document.createElement("table")
    const tableHeadRowEle = document.createElement("tr")
    const tableHeadOptColumnEle = document.createElement("td")

    // set elements properties
    titleEle.innerText = UIInfo.titleText
    operationTitleEle.innerText = UIInfo.operationTitleText
    operationRemarkEle.innerText = UIInfo.operationRemarkText
    operationSwitchTextEle.innerText = UIInfo.operationSwitchText
    operationSwitchBtnEle.type = "checkbox"
    operationSwitchBtnEle.id = "isShowModifyBtn"
    operationSwitchTextEle.className = "text"
    operationSwitchTextEle.htmlFor = "isShowModifyBtn"
    operationItemListConEle.className = "text"
    operationItemListConEle.id = "operationBar"
    operationItemListBeforeModifyTitleEle.innerText = "修改前"
    operationItemListBeforeModifyTitleEle.id = "beforeModifiedTitle"
    operationItemListBeforeModifyConEle.id = "beforeModifiedUI"
    operationItemListBeforeModifyConEle.appendChild(operationItemListBeforeModifyTitleEle)
    operationItemListAfterModifyTitleEle.innerText = "修改后"
    operationItemListAfterModifyTitleEle.id = "afterModifiedTitle"
    operationItemListAfterModifyConEle.id = "afterModifiedUI"
    operationItemListAfterModifyConEle.appendChild(operationItemListAfterModifyTitleEle)
    for (const k in UIInfo.operationItemList) {
        const operationItemListBeforeModifyTextEle = document.createElement("span")
        const operationItemListBeforeModifyInputEle = document.createElement("input")

        if (UIInfo.operationItemList[k].required) {
            operationItemListBeforeModifyTextEle.innerText = UIInfo.operationItemList[k].text
        } else {
            operationItemListBeforeModifyTextEle.innerText = UIInfo.operationItemList[k].text + "(可选)"
        }
        operationItemListBeforeModifyInputEle.className = UIInfo.operationItemList[k].class
        operationItemListBeforeModifyInputEle.id = UIInfo.operationItemList[k].id + "_old"
        operationItemListBeforeModifyInputEle.value = UIInfo.operationItemList[k].value
        operationItemListBeforeModifyConEle.appendChild(operationItemListBeforeModifyTextEle)
        operationItemListBeforeModifyConEle.appendChild(operationItemListBeforeModifyInputEle)
        operationItemListBeforeModifyConEle.appendChild(document.createElement("br"))
    }

    for (const k in UIInfo.operationItemList) {
        const operationItemListAfterModifyTextEle = document.createElement("span")
        const operationItemListAfterModifyInputEle = document.createElement("input")

        if (UIInfo.operationItemList[k].required) {
            operationItemListAfterModifyTextEle.innerText = UIInfo.operationItemList[k].text
        } else {
            operationItemListAfterModifyTextEle.innerText = UIInfo.operationItemList[k].text + "(可选)"
        }
        operationItemListAfterModifyInputEle.className = UIInfo.operationItemList[k].class
        operationItemListAfterModifyInputEle.id = UIInfo.operationItemList[k].id
        operationItemListAfterModifyInputEle.value = UIInfo.operationItemList[k].value
        operationItemListAfterModifyConEle.appendChild(operationItemListAfterModifyTextEle)
        operationItemListAfterModifyConEle.appendChild(operationItemListAfterModifyInputEle)
        operationItemListAfterModifyConEle.appendChild(document.createElement("br"))
    }

    operationItemListConEle.appendChild(operationItemListBeforeModifyConEle)
    operationItemListConEle.appendChild(operationItemListAfterModifyConEle)
    operationChangeBtnEle.innerText = "修改"
    operationChangeBtnEle.className = "text"
    operationChangeBtnEle.id = "modifyBtn"
    operationChangeBtnEle.setAttribute("onclick", "modify()")
    operationAddBtnEle.innerText = "添加"
    operationAddBtnEle.className = "text"
    operationAddBtnEle.id = "addBtn"
    operationAddBtnEle.setAttribute("onclick", "insert()")
    listTitleEle.innerText = UIInfo.listTitleText
    listRemarkEle.innerText = UIInfo.listRemarkText
    tableEle.border = "1"
    tableEle.className = "text"
    tableEle.id = "table"
    tableEle.style.textAlign = "center"
    tableHeadRowEle.className = "tableTitle"
    tableHeadRowEle.id = "tableTitle"
    tableHeadOptColumnEle.innerText = "操作"

    for (const k in UIInfo.operationItemList) {
        const tableHeadColumnEle = document.createElement("td")
        tableHeadColumnEle.innerText = UIInfo.operationItemList[k].text
        tableHeadRowEle.appendChild(tableHeadColumnEle)
    }
    tableHeadRowEle.appendChild(tableHeadOptColumnEle)
    tableEle.appendChild(tableHeadRowEle)

    // set elements style
    operationTitleEle.style.color = "red"
    operationTitleEle.style.fontSize = "25px"
    operationItemListBeforeModifyTitleEle.style.fontSize = "25px"
    operationItemListBeforeModifyTitleEle.style.color = "rgb(3, 100, 245)"
    operationItemListAfterModifyTitleEle.style.fontSize = "25px"
    operationItemListAfterModifyTitleEle.style.color = "rgb(3, 100, 245)"
    operationItemListAfterModifyTitleEle.style.display = "none"
    operationRemarkEle.style.color = "rgb(233, 78, 72)"
    operationRemarkEle.style.fontSize = "18px"
    operationItemListConEle.style.display = "flex"
    operationItemListBeforeModifyConEle.style.display = "none"
    operationChangeBtnEle.style.display = "none"
    listTitleEle.style.color = "red"
    listTitleEle.style.fontSize = "25px"
    listRemarkEle.style.color = "rgb(233, 78, 72)"
    listRemarkEle.style.fontSize = "18px"
    tableHeadRowEle.style.position = "sticky"
    tableHeadRowEle.style.top = "0px"

    // generate UI
    bodyEle.appendChild(titleEle)
    bodyEle.appendChild(operationTitleEle)
    bodyEle.appendChild(document.createElement("hr"))
    bodyEle.appendChild(operationRemarkEle)
    bodyEle.appendChild(document.createElement("br"))
    bodyEle.appendChild(operationSwitchBtnEle)
    bodyEle.appendChild(operationSwitchTextEle)
    bodyEle.appendChild(operationItemListConEle)
    bodyEle.appendChild(operationChangeBtnEle)
    bodyEle.appendChild(operationAddBtnEle)
    bodyEle.appendChild(document.createElement("br"))
    bodyEle.appendChild(document.createElement("br"))
    bodyEle.appendChild(listTitleEle)
    bodyEle.appendChild(document.createElement("hr"))
    bodyEle.appendChild(listRemarkEle)
    bodyEle.appendChild(tableEle)
}