to start override all UI: init

2026-04-05 18:36:58 +08:00
1 parent ce4323f626
commit 6eb6c59508
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>隐私保护-绑定关系统计</title>
+    <script src="webinding-info/script/backendInfo.js"></script>
+    <script src="webinding-info/script/useRealData.js"></script>
+    <script src="webinding-info/script/useTestData.js"></script>
+    <script src="webublic/script/scrollButton.js"></script>
+    <link rel="stylesheet" href="webublic/style/stickTableHeadOnTop.css">
+</head>
+
+<body>
+    <script src="webublic/script/genUI.js"></script>
+    <script src="webinding-info/script/UIInfo.js"></script>
+    <script>
+        // useTestData(200)
+        useRealData()
+    </script>
+    <script src="webublic/script/changeModifyUI.js"></script>
+    <script src="webublic/script/changeHoverdBackgroundColor.js"></script>
+    <script src="webinding-info/script/CRUDBasicEle.js"></script>
+    <script src="webinding-info/script/fillingData.js"></script>
+    <script src="webinding-info/script/CRUD/delete.js"></script>
+    <script src="webinding-info/script/CRUD/insert.js"></script>
+    <script src="webinding-info/script/CRUD/modify.js"></script>
+    <script src="webinding-info/script/determineIfFieldValid.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,20 @@
+function del(
+    basicToolTypeOld,
+    basicToolIdOld,
+    platformNameOld,
+    userNameOld
+) {
+    if (!confirm("确认删除吗")) {
+        return
+    }
+    const xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+    xhr.addEventListener('readystatechange', function () {
+        if (this.readyState === this.DONE) {
+            alert(this.responseText)
+            window.location = ""
+        }
+    });
+    xhr.open('DELETE', `http://${SERVER_IP}:${SERVER_PORT}/api/user?basic_tool_type=${basicToolTypeOld}&basic_tool_id=${basicToolIdOld}&platform_name=${platformNameOld}&user_name=${userNameOld}`);
+    xhr.send();
+}
@@ -0,0 +1,45 @@
+function insert() {
+    if (!confirm("确认添加吗")) {
+        return
+    }
+    if (
+        basicToolType.value == "",
+        basicToolId.value == "",
+        platformName.value == "",
+        dangerLevel.value == "",
+        userName.value == ""
+    ) {
+        alert("未填写完整")
+        return
+    }
+
+    if (!determineIfFieldValid()) {
+        alert("输入的危险等级不合法")
+        return
+    }
+
+    const data = JSON.stringify({
+        basic_tool_type: basicToolType.value,
+        basic_tool_id: basicToolId.value,
+        platform_name: platformName.value,
+        danger_level: dangerLevel.value,
+        user_name: userName.value,
+        user_password: userPassword.value,
+        remark: remark.value
+    });
+
+    const xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+
+    xhr.addEventListener('readystatechange', function () {
+        if (this.readyState === this.DONE) {
+            alert(this.responseText)
+            window.location = ""
+        }
+    });
+
+    xhr.open('POST', `http://${SERVER_IP}:${SERVER_PORT}/api/user`);
+    xhr.setRequestHeader('content-type', 'application/json');
+
+    xhr.send(data);
+}
@@ -0,0 +1,58 @@
+function modify() {
+    if (!confirm("确认修改吗")) {
+        return
+    }
+    if (
+        basicToolType.value == "",
+        basicToolId.value == "",
+        platformName.value == "",
+        dangerLevel.value == "",
+        userName.value == ""
+    ) {
+        alert("未填写完整")
+        return
+    }
+
+    if (!determineIfFieldValid()) {
+        alert("输入的危险等级不合法")
+        return
+    }
+
+    const basicToolTypeOld = document.getElementById("basic_tool_type_old")
+    const basicToolIdOld = document.getElementById("basic_tool_id_old")
+    const platformNameOld = document.getElementById("platform_name_old")
+    const userNameOld = document.getElementById("user_name_old")
+    const dangerLevelOld = document.getElementById("danger_level_old")
+    const userPasswordOld = document.getElementById("user_password_old")
+    const remarkOld = document.getElementById("remark_old")
+    const data = JSON.stringify({
+        basic_tool_type_old: basicToolTypeOld.value,
+        basic_tool_id_old: basicToolIdOld.value,
+        platform_name_old: platformNameOld.value,
+        danger_level_old: dangerLevelOld.value,
+        user_name_old: userNameOld.value,
+        user_password_old: userPasswordOld.value,
+        remark_old: remarkOld.value,
+        basic_tool_type: basicToolType.value,
+        basic_tool_id: basicToolId.value,
+        platform_name: platformName.value,
+        danger_level: dangerLevel.value,
+        user_name: userName.value,
+        user_password: userPassword.value,
+        remark: remark.value
+    });
+
+    const xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+
+    xhr.addEventListener('readystatechange', function () {
+        if (this.readyState === this.DONE) {
+            alert(this.responseText)
+            window.location = ""
+        }
+    });
+
+    xhr.open('PATCH', `http://${SERVER_IP}:${SERVER_PORT}/api/user`);
+    xhr.setRequestHeader('content-type', 'application/json');
+    xhr.send(data);
+}
@@ -0,0 +1,8 @@
+// global variable
+const basicToolType = document.getElementById("basic_tool_type")
+const basicToolId = document.getElementById("basic_tool_id")
+const platformName = document.getElementById("platform_name")
+const userName = document.getElementById("user_name")
+const dangerLevel = document.getElementById("danger_level")
+const userPassword = document.getElementById("user_password")
+const remark = document.getElementById("remark")
@@ -0,0 +1,70 @@
+(() => {
+    const UIInfo = {
+        titleText: "",
+        operationTitleText: "新增/修改",
+        operationRemarkText: "危险等级必须为: 0(基本可信), 1(小众平台，有点危险), 2(危险)",
+        operationSwitchText: "点击显示/隐藏修改界面",
+        operationItemList: {
+            basicToolType: {
+                class: "input",
+                id: "basic_tool_type",
+                required: true,
+                placeholder: "",
+                text: "基础工具类型",
+                value: ""
+            },
+            basicToolId: {
+                class: "input",
+                id: "basic_tool_id",
+                required: true,
+                placeholder: "",
+                text: "基础工具ID",
+                value: ""
+            },
+            platformName: {
+                class: "input",
+                id: "platform_name",
+                required: true,
+                placeholder: "",
+                text: "绑定到",
+                value: ""
+            },
+            dangerLevel: {
+                class: "input",
+                id: "danger_level",
+                required: true,
+                placeholder: "",
+                text: "危险等级",
+                value: ""
+            },
+            userName: {
+                class: "input",
+                id: "user_name",
+                required: true,
+                placeholder: "",
+                text: "用户名",
+                value: ""
+            },
+            userPassword: {
+                class: "input",
+                id: "user_password",
+                required: false,
+                placeholder: "",
+                text: "密码",
+                value: ""
+            },
+            remark: {
+                class: "input",
+                id: "remark",
+                required: false,
+                placeholder: "",
+                text: "备注",
+                value: ""
+            }
+        },
+        listTitleText: "列表",
+        listRemarkText: ""
+    }
+
+    genUI(UIInfo)
+})()
@@ -0,0 +1,2 @@
+var SERVER_IP = "127.0.0.1"
+var SERVER_PORT = "8081"
@@ -0,0 +1,11 @@
+function determineIfFieldValid() {
+    const dangerLevelRange = ["0", "1", "2"]
+    let isValid = false
+    for (let i = 0; i < dangerLevelRange.length; i++) {
+        if (dangerLevel.value === dangerLevelRange[i]) {
+            isValid = true
+        }
+    }
+
+    return isValid === true ? true : false
+}
@@ -0,0 +1,24 @@
+function fill(
+    basicToolTypeOld,
+    basicToolIdOld,
+    platformNameOld,
+    userNameOld,
+    dangerLevelOld,
+    userPasswordOld,
+    remarkOld
+) {
+    basicToolType.value = basicToolTypeOld
+    basicToolId.value = basicToolIdOld
+    platformName.value = platformNameOld
+    userName.value = userNameOld
+    dangerLevel.value = dangerLevelOld
+    userPassword.value = userPasswordOld
+    remark.value = remarkOld
+    document.getElementById("basic_tool_type_old").value = basicToolTypeOld
+    document.getElementById("basic_tool_id_old").value = basicToolIdOld
+    document.getElementById("platform_name_old").value = platformNameOld
+    document.getElementById("user_name_old").value = userNameOld
+    document.getElementById("danger_level_old").value = dangerLevelOld
+    document.getElementById("user_password_old").value = userPasswordOld
+    document.getElementById("remark_old").value = remarkOld
+}
@@ -0,0 +1,64 @@
+function useRealData() {
+    const xhr = new XMLHttpRequest();
+    xhr.withCredentials = true;
+
+    xhr.addEventListener('readystatechange', function () {
+        if (this.readyState === this.DONE) {
+            const re = JSON.parse(this.responseText).data
+            for (let i = 0; i < re.length; i++) {
+                const basic_tool_type = re[i].basic_tool_type
+                const basic_tool_id = re[i].basic_tool_id
+                const platform_name = re[i].platform_name
+                const danger_level = re[i].danger_level
+                const user_name = re[i].user_name
+                const user_password = re[i].user_password
+                const remark = re[i].remark
+
+                const trEle = document.createElement("tr")
+                const tableEle = document.getElementById("table")
+                trEle.innerHTML = `
+                        <td>${basic_tool_type}</td>
+                        <td>${basic_tool_id}</td>
+                        <td>${platform_name}</td>
+                        <td>${danger_level}</td>
+                        <td>${user_name}</td>
+                        <td>${user_password}</td>
+                        <td>${remark}</td>
+                        <td style='display: flex;'>
+                            <button class='text' onclick = 'del(
+                                    "${basic_tool_type}",
+                                    "${basic_tool_id}",
+                                    "${platform_name}",
+                                    "${user_name}"
+                                )'
+                            >删除</button>    
+                            <button class='text' onclick = 'fill(
+                                    "${basic_tool_type}",
+                                    "${basic_tool_id}",
+                                    "${platform_name}",
+                                    "${user_name}",
+                                    "${danger_level}",
+                                    "${user_password}",
+                                    "${remark}"
+                                )'
+                            >填入</button>    
+                        </td>
+                    `
+                switch (danger_level) {
+                    case "1":
+                        trEle.style.backgroundColor = "rgba(226, 208, 43, 0.5)"
+                        break;
+                    case "2":
+                        trEle.style.backgroundColor = "rgba(226, 43, 43, 0.5)"
+                    default:
+                        break;
+                }
+                tableEle.appendChild(trEle)
+            }
+        }
+    });
+
+    xhr.open('GET', `http://${SERVER_IP}:${SERVER_PORT}/api/user`);
+
+    xhr.send();
+}
@@ -0,0 +1,159 @@
+function useTestData(num) {
+    const tableEle = document.getElementById("table")
+    for (let i = 0; i < num; i++) {
+        const trEle = document.createElement("tr")
+        const basic_tool_type = getRandomBasicToolType()
+        const basic_tool_id = getRandomBasicToolId(basic_tool_type)
+        const platform_name = getRandomPlatformName()
+        const danger_level = getRandomNumberWithRange(0, 2).toString()
+        const user_name = getRandomUserName()
+        const user_password = getRandomUserPasswd()
+        const remark = getRandomRemark()
+        trEle.innerHTML = `
+                        <td>${basic_tool_type}</td>
+                        <td>${basic_tool_id}</td>
+                        <td>${platform_name}</td>
+                        <td>${danger_level}</td>
+                        <td>${user_name}</td>
+                        <td>${user_password}</td>
+                        <td>${remark}</td>
+                        <td style='display: flex;'>
+                            <button class='text' onclick = 'del(
+                                    "${basic_tool_type}",
+                                    "${basic_tool_id}",
+                                    "${platform_name}",
+                                    "${user_name}"
+                                )'
+                            >删除</button>    
+                            <button class='text' onclick = 'fill(
+                                    "${basic_tool_type}",
+                                    "${basic_tool_id}",
+                                    "${platform_name}",
+                                    "${user_name}",
+                                    "${danger_level}",
+                                    "${user_password}",
+                                    "${remark}"
+                                )'
+                            >填入</button>    
+                        </td>
+                    `
+        switch (danger_level) {
+            case "1":
+                trEle.style.backgroundColor = "rgba(226, 208, 43, 0.5)"
+                break;
+            case "2":
+                trEle.style.backgroundColor = "rgba(226, 43, 43, 0.5)"
+            default:
+                break;
+        }
+        tableEle.appendChild(trEle)
+    }
+}
+
+function getRandomBasicToolType() {
+    const list = [
+        "phone_number",
+        "email",
+    ]
+
+    return list[getRandomNumberWithRange(0, list.length - 1)]
+}
+
+function getRandomBasicToolId(type) {
+    switch (type) {
+        case "phone_number":
+            const phoneList = [
+                "12345678901",
+                "09876543211"
+            ]
+
+            return phoneList[getRandomNumberWithRange(0, phoneList.length - 1)]
+
+        case "email":
+            const emailList = [
+                "abc@qq.com",
+                "XiaoMing@163.com",
+                "XiaoAi@163.com"
+            ]
+            return emailList[getRandomNumberWithRange(0, emailList.length - 1)]
+    }
+}
+
+function getRandomPlatformName() {
+    const list = [
+        "微信",
+        "qq",
+        "微博",
+        "网易游戏",
+        "腾讯游戏",
+        "小米账号",
+        "华为账号",
+        "vivo账号",
+        "国家政务服务平台",
+        "国家反炸app",
+        "王者荣耀",
+        "和平精英",
+        "蛋仔派对",
+        "京东",
+        "天猫",
+        "淘宝",
+        "企业微信",
+        "豆包ai",
+        "deepseek",
+        "chatgpt",
+        "网易邮箱",
+        "qq邮箱",
+        "高德地图",
+        "百度地图",
+        "支付宝",
+        "boss直聘",
+        "酷狗音乐",
+        "网易音乐",
+        "qq音乐",
+        "汽水音乐",
+        "抖音",
+        "快手",
+        "小红书"
+    ]
+    return list[getRandomNumberWithRange(0, list.length - 1)]
+}
+
+function getRandomUserName() {
+    const list = [
+        "小艾",
+        "小爱",
+        "小明",
+        "小红",
+        "小蓝",
+        "小绿"
+    ]
+    return list[getRandomNumberWithRange(0, list.length - 1)]
+}
+
+function getRandomUserPasswd() {
+    const list = [
+        "admin",
+        "1234",
+        "12345678",
+        "10293847",
+        ""
+    ]
+    return list[getRandomNumberWithRange(0, list.length - 1)]
+}
+
+function getRandomRemark() {
+    const list = [
+        "无法注销",
+        "正在注销中",
+        "不常用",
+        "绑定了身份证",
+        "将会在2000年1月1日自动注销",
+        ""
+    ]
+    return list[getRandomNumberWithRange(0, list.length - 1)]
+}
+
+function getRandomNumberWithRange(startIndex, endIndex) {
+    endIndex++
+    return Math.floor(Math.random() * (endIndex - startIndex) + startIndex)
+}
@@ -0,0 +1,198 @@
+(() => {
+    const UIInfo = {
+        titleText: "",
+        operationTitleText: "新增/修改",
+        operationRemarkText: "危险等级必须为: 0(基本可信), 1(小众平台，有点危险), 2(危险)",
+        operationSwitchText: "点击显示/隐藏修改界面",
+        operationItemList: {
+            platformName: {
+                class: "",
+                id: "platform_name",
+                required: true,
+                placeholder: "",
+                text: "平台名",
+                value: ""
+            },
+            platformId: {
+                class: "",
+                id: "platform_id",
+                required: true,
+                placeholder: "",
+                text: "平台ID",
+                value: ""
+            },
+            leakedTo: {
+                class: "",
+                id: "leaked_to",
+                required: true,
+                placeholder: "",
+                text: "泄漏给",
+                value: ""
+            },
+            typeOf: {
+                class: "",
+                id: "type_of",
+                required: true,
+                placeholder: "",
+                text: "泄漏对象的类型",
+                value: ""
+            },
+            isIdLeaked: {
+                class: "",
+                id: "is_id_leaked",
+                required: true,
+                placeholder: "",
+                text: "身份证",
+                value: "否"
+            },
+            isNetworkIdLeaked: {
+                class: "",
+                id: "is_network_id_leaked",
+                required: true,
+                placeholder: "",
+                text: "网络身份证",
+                value: "否"
+            },
+            isNameLeaked: {
+                class: "",
+                id: "is_name_leaked",
+                required: true,
+                placeholder: "",
+                text: "姓名",
+                value: "否"
+            },
+            isBirthYearLeaked: {
+                class: "",
+                id: "is_birth_year_leaked",
+                required: true,
+                placeholder: "",
+                text: "出生年",
+                value: "否"
+            },
+            isBirthMonthLeaked: {
+                class: "",
+                id: "is_birth_month_leaked",
+                required: true,
+                placeholder: "",
+                text: "出生月",
+                value: "否"
+            },
+            isBirthDayLeaked: {
+                class: "",
+                id: "is_birth_day_leaked",
+                required: true,
+                placeholder: "",
+                text: "出生日",
+                value: "否"
+            },
+            isAppearanceLeaked: {
+                class: "",
+                id: "is_appearance_leaked",
+                required: true,
+                placeholder: "",
+                text: "样貌",
+                value: "否"
+            },
+            isSoundLeaked: {
+                class: "",
+                id: "is_sound_leaked",
+                required: true,
+                placeholder: "",
+                text: "声音",
+                value: "否"
+            },
+            isGenderLeaked: {
+                class: "",
+                id: "is_gender_leaked",
+                required: true,
+                placeholder: "",
+                text: "性别",
+                value: "否"
+            },
+            isPhoneNumberLeaked: {
+                class: "",
+                id: "is_phone_number_leaked",
+                required: true,
+                placeholder: "",
+                text: "手机号",
+                value: "否"
+            },
+            isSchoolLeaked: {
+                class: "",
+                id: "is_school_leaked",
+                required: true,
+                placeholder: "",
+                text: "学校",
+                value: "否"
+            },
+            isCityLeaked: {
+                class: "",
+                id: "is_city_leaked",
+                required: true,
+                placeholder: "",
+                text: "常住市",
+                value: "否"
+            },
+            isDistrictLeaked: {
+                class: "",
+                id: "is_district_leaked",
+                required: true,
+                placeholder: "",
+                text: "常住区",
+                value: "否"
+            },
+            isStreetLeaked: {
+                class: "",
+                id: "is_street_leaked",
+                required: true,
+                placeholder: "",
+                text: "常住街道",
+                value: "否"
+            },
+            isHouseNumberLeaked: {
+                class: "",
+                id: "is_house_number_leaked",
+                required: true,
+                placeholder: "",
+                text: "常住门牌号",
+                value: "否"
+            },
+            isCommonPasswordLeaked: {
+                class: "",
+                id: "is_common_password_leaked",
+                required: true,
+                placeholder: "",
+                text: "常用密码",
+                value: "否"
+            },
+            isBankCarkIdLeaked: {
+                class: "",
+                id: "is_bank_card_id_leaked",
+                required: true,
+                placeholder: "",
+                text: "银行卡号",
+                value: "否"
+            },
+            isBandCardPasswordLeaked: {
+                class: "",
+                id: "is_bank_card_password_leaked",
+                required: true,
+                placeholder: "",
+                text: "银行卡密码",
+                value: "否"
+            },
+            remark: {
+                class: "",
+                id: "remark",
+                required: false,
+                placeholder: "",
+                text: "备注",
+                value: ""
+            },
+        },
+        listTitleText: "列表",
+        listRemarkText: "平台ID是标识该帐号的唯一标识符，如果没有则输入帐号名"
+    }
+
+    genUI(UIInfo)
+})()
@@ -0,0 +1,33 @@
+(() => {
+    const tableEle = document.getElementById("table")
+    let originColor
+    tableEle.addEventListener("mouseover", (e) => {
+        // backup origin background color
+        const parentNode = e.target.parentNode
+        if (parentNode.id == "tableTitle") {
+            return
+        }
+
+        if (parentNode.tagName == "TR") {
+            originColor = parentNode.style.backgroundColor
+        }
+
+        // to change new color
+        if (e.target.tagName == "TD") {
+            e.target.parentNode.style.backgroundColor = "rgba(151, 151, 151, 0.23)"
+        }
+    })
+
+    tableEle.addEventListener("mouseout", (e) => {
+        if (e.target.tagName == "TD") {
+            const parentNode = e.target.parentNode
+            if (parentNode.id == "tableTitle") {
+                return
+            }
+
+            if (parentNode.tagName == "TR") {
+                parentNode.style.backgroundColor = originColor
+            }
+        }
+    })
+})()
@@ -0,0 +1,31 @@
+(() => {
+    const isShowModifyBtn = document.getElementById("isShowModifyBtn")
+    const modifyBtn = document.getElementById("modifyBtn")
+    const addBtn = document.getElementById("addBtn")
+    const beforeModifiedUI = document.getElementById("beforeModifiedUI")
+    const afterModifiedUI = document.getElementById("afterModifiedUI")
+    const afterModifiedTitle = document.getElementById("afterModifiedTitle")
+    isShowModifyBtn.addEventListener("click", () => {
+        if (isShowModifyBtn.checked == true) {
+            beforeModifiedUI.style.display = "block"
+            beforeModifiedUI.style.border = "2px solid #000"
+            beforeModifiedUI.style.padding = "10px"
+            afterModifiedUI.style.borderTop = "2px solid #000"
+            afterModifiedUI.style.borderRight = "2px solid #000"
+            afterModifiedUI.style.borderBottom = "2px solid #000"
+            afterModifiedUI.style.padding = "10px"
+            afterModifiedTitle.style.display = "block"
+            modifyBtn.style.display = "block"
+            addBtn.style.display = "none"
+        } else {
+            beforeModifiedUI.style.display = "none"
+            beforeModifiedUI.style.border = "none"
+            beforeModifiedUI.style.padding = "0px"
+            afterModifiedUI.style.border = "none"
+            afterModifiedUI.style.padding = "0px"
+            afterModifiedTitle.style.display = "none"
+            modifyBtn.style.display = "none"
+            addBtn.style.display = "block"
+        }
+    })
+})()
@@ -0,0 +1,140 @@
+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)
+}
@@ -0,0 +1,33 @@
+window.onload = () => {
+    const scrollBtnCon = document.createElement("div")
+    const topBtn = document.createElement("button")
+    const bottomBtn = document.createElement("button")
+    const btnWidth = "30px"
+    const btnHeight = "70px"
+
+    topBtn.innerText = "顶"
+    bottomBtn.innerText = "底"
+
+    scrollBtnCon.append(topBtn)
+    scrollBtnCon.append(bottomBtn)
+    scrollBtnCon.style.display = "flex"
+    scrollBtnCon.style.flexDirection = "column"
+    scrollBtnCon.style.position = "fixed"
+    scrollBtnCon.style.bottom = "10px"
+    scrollBtnCon.style.right = "10px"
+
+    topBtn.style.width = btnWidth
+    topBtn.style.height = btnHeight
+    bottomBtn.style.width = btnWidth
+    bottomBtn.style.height = btnHeight
+
+    topBtn.addEventListener("click", () => {
+        document.documentElement.scrollTop = 0
+    })
+
+    bottomBtn.addEventListener("click", () => {
+        document.documentElement.scrollTop = document.body.offsetHeight
+    })
+
+    document.body.appendChild(scrollBtnCon)
+}
@@ -0,0 +1,12 @@
+.tableTitle {
+    background-color: rgb(98, 120, 238);
+    text-align: center;
+}
+
+.input {
+    width: 150px;
+}
+
+.text {
+    font-size: 19px;
+}