From 47c81f9efbe93f6ea2416f1f332b441077c6f758 Mon Sep 17 00:00:00 2001
From: hbk01 <3243430237@qq.com>
Date: Wed, 19 Apr 2023 03:59:52 +0800
Subject: [PATCH] =?UTF-8?q?+=20=E5=B8=B8=E7=94=A8=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E8=A7=84=E7=A8=8B=E6=9B=B4=E5=90=8D=E4=B8=BA=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E8=A7=84=E7=A8=8B=20+=20=E9=A6=96=E9=A1=B5=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0=E9=AB=98=E5=BA=A6=E4=BB=A5?=
 =?UTF-8?q?=E9=98=B2=E6=AD=A2=E8=AF=AF=E8=A7=A6=20+=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=20+=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=20L014-1=20=E4=B8=8E=20L414-5KR=20=E7=9B=B8=E5=85=B3=E7=89=A9?=
 =?UTF-8?q?=E8=B4=A8=E8=AE=A1=E7=AE=97=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                          |  62 ++++--
 statics/settings.json               |  36 ++++
 statics/theme.css                   |   8 +-
 views/L014-1-impurities.html        | 281 ---------------------------
 views/L414-5KR-impurities.html      | 286 ----------------------------
 views/settings.html                 | 194 +++++++++++++++++++
 views/{common-sop.html => sop.html} |   9 +-
 7 files changed, 284 insertions(+), 592 deletions(-)
 create mode 100644 statics/settings.json
 delete mode 100644 views/L014-1-impurities.html
 delete mode 100644 views/L414-5KR-impurities.html
 create mode 100644 views/settings.html
 rename views/{common-sop.html => sop.html} (86%)

diff --git a/index.html b/index.html
index 9db5f9d..08152c5 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,12 @@
     <link rel="stylesheet" href="./statics/github.css">
     <link rel="stylesheet" href="./statics/theme.css">
     <script src="./statics/modules/jquery.min.js"></script>
-    <script>
-        let page = 10
+    <script type="module">
+        import { IO } from "./statics/modules/tools.js"
+
+        let settings = new IO('settings')
+        let num = settings.read("index.history.num")
+        let page = num == null ? 10 : num
         let url = `https://api.github.com/repos/hbk01/hbk01.github.io/commits?per_page=${page}`
 
         let functions = [
@@ -33,27 +37,53 @@
                 "location": "./views/expir-info.html"
             },
             {
-                "name": "常用操作规程",
-                "location": "./views/common-sop.html"
+                "name": "操作规程",
+                "location": "./views/sop.html"
             }
-            // {
-            //     "name": "L414-5KR 相关物质",
-            //     "location": "./views/L414-5KR-impurities.html"
-            // },
-            // {
-            //     "name": "L014-1 相关物质",
-            //     "location": "./views/L014-1-impurities.html"
-            // }
         ]
 
-        $(document).ready(() => {
-            // var getRandomColor = () => '#' + (Math.random() * 0xffffff << 0).toString(16)
+        $(() => {
+
+            // 检查是否已初始化设置
+            let init = settings.read("settings.initialized")
+            if (init != "true") {
+                // 移除所有项目
+                settings.listKeys().forEach(key => {
+                    settings.remove(key)
+                })
+
+                // 云端获取默认设置并写入
+                $.getJSON("../statics/settings.json", (data) => {
+                    for (const iterator of data) {
+                        settings.write(iterator.id, iterator.default)
+                        settings.write(`${iterator.id}.desc`, iterator.description)
+                    }
+                    // 写入完成后重新加载页面，以应用当前设置
+                    window.location.reload()
+                })
+            }
+
+
+            let hidden = settings.read("index.functions.hidden")
+            hidden = hidden == "" ? [] : hidden.split(',')
+
             // 加载功能列表
             functions.forEach(value => {
+                for (const iterator of hidden) {
+                    if (value.location.endsWith(iterator)) {
+                        return
+                    }
+                }
                 let div = `<div class="item" onclick="window.location.href='${value.location}'">${value.name}</div>`
                 $(".list").append(div)
             })
 
+            let show = settings.read("index.history.enable")
+            if (show == "false") {
+                $("#changelog_title").hide()
+                return
+            }
+
             // 加载最近的 commit 记录
             $.getJSON(url, data => {
                 let color1 = '#f9f9f9'
@@ -94,7 +124,7 @@
 </head>
 
 <body>
-    <h4>功能列表</h4>
+    <h4 onclick="window.location.href='./views/settings.html'">功能列表</h4>
     <div class="list"></div>
     <h4>关于</h4>
     <div class="about">
@@ -103,7 +133,7 @@
         <a href="https://github.com/hbk01/hbk01.github.io">Github</a> ，并由
         <a href="https://docs.github.com/en/pages">Github Pages</a> 提供页面构建及部署服务。
     </div>
-    <h4>变更日志</h4>
+    <h4 id="changelog_title">变更日志</h4>
     <div class="changelog" style="width: 100%;"></div>
 </body>
 
diff --git a/statics/settings.json b/statics/settings.json
new file mode 100644
index 0000000..62b1c3d
--- /dev/null
+++ b/statics/settings.json
@@ -0,0 +1,36 @@
+[
+    {
+        "id": "settings.initialized",
+        "group": "settings",
+        "title": "是否已经初始化",
+        "description": "指示初始化状态，请勿更改此项",
+        "type": "boolean",
+        "default": true
+    },
+    {
+        "id": "index.history.enable",
+        "group": "index.html",
+        "title": "显示变更日志",
+        "description": "若设置为 false ，则不显示变更日志",
+        "type": "boolean",
+        "default": true
+    },
+    {
+        "id": "index.history.num",
+        "group": "index.html",
+        "title": "日志显示数量",
+        "description": "要显示多少条变更日志",
+        "type": "number",
+        "default": 10
+    },
+    {
+        "id": "index.functions.hidden",
+        "group": "index.html",
+        "title": "隐藏入口",
+        "description": "在功能列表中隐藏匹配到文件名的条目",
+        "type": "array",
+        "default": [
+            "titer.html"
+        ]
+    }
+]
diff --git a/statics/theme.css b/statics/theme.css
index b2faa37..6463341 100644
--- a/statics/theme.css
+++ b/statics/theme.css
@@ -16,9 +16,9 @@ a {
 }
 
 .item {
-    height: 32px;
+    height: 38px;
     text-align: left;
-    line-height: 32px;
+    line-height: 38px;
     margin-top: 5px;
     padding-left: 10px;
     background-color: #f5f5f5;
@@ -27,9 +27,9 @@ a {
 }
 
 .item:active {
-    height: 32px;
+    height: 38px;
     text-align: left;
-    line-height: 32px;
+    line-height: 38px;
     margin-top: 5px;
     padding-left: 10px;
     background-color: #ffffff;
diff --git a/views/L014-1-impurities.html b/views/L014-1-impurities.html
deleted file mode 100644
index ef536a6..0000000
--- a/views/L014-1-impurities.html
+++ /dev/null
@@ -1,281 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-cmn-Hans">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>L014-1 相关物质</title>
-    <link rel="stylesheet" href="../statics/github.css">
-    <link rel="stylesheet" href="../statics/theme.css">
-    <script src="../statics/modules/jquery.min.js"></script>
-    <script type="module">
-        import { Decimal } from "../statics/modules/decimal.mjs"
-
-        let decimal = Decimal.set({
-            rounding: Decimal.ROUND_HALF_EVEN,
-            precision: 12
-        })
-
-        const ROUNDING = Decimal.ROUND_HALF_EVEN    // 舍入模式：四舍六入五成双
-        const PRECISION = 2             // 计算精度
-        const DEBUG = false             // debug 开关
-        const DIMER_MAX = 2.5           // 2.2-Dimer 最大值
-        const AT_MAX = 1.0              // 2-乙酰噻吩 最大值
-        const TOTAL_IMPURITIES_MAX = 4  // 总杂 最大值
-        const PURTY_MIN = 96            // 纯度 最小值
-        const DIMER_RRF = 1.34          // 2.2-Dimer 的 RRF
-        const AT_RRF = 2.06             // 2-乙酰噻吩 的 RRF
-
-        const msg = `
-            <b>相关参数：</b><br>
-            &nbsp;&nbsp; 2.2-Dimer 的 RRF: ${DIMER_RRF}<br>
-            &nbsp;&nbsp; 2-乙酰噻吩的 RRF: ${AT_RRF}<br>
-            <br>
-            <b>质量标准：</b><br>
-            &nbsp;&nbsp; 2.2-Dimer &le; ${DIMER_MAX}% <br>
-            &nbsp;&nbsp; 2-乙酰噻吩 &le; ${AT_MAX.toFixed(1)}% <br>
-            &nbsp;&nbsp; 杂质总量 &le; ${TOTAL_IMPURITIES_MAX}% <br>
-            &nbsp;&nbsp; 纯度 &ge; ${PURTY_MIN}% <br>
-        `
-
-        $(document).ready(() => {
-            if (DEBUG) {
-                $("#one-dimer").val(247427)
-                $("#one-at").val(65863)
-                $("#one-014-1").val(11511879)
-                $("#one-all").val(11888859)
-
-                $("#two-dimer").val(249299)
-                $("#two-at").val(66682)
-                $("#two-014-1").val(11563139)
-                $("#two-all").val(11943432)
-            }
-
-            $("#msgbox").html(msg)
-
-            $("#new_page").click(() => window.open(window.location.href, '_BLANK'))
-
-            $("#clear").click(() => {
-                $("#one-dimer").val("")
-                $("#one-at").val("")
-                $("#one-014-1").val("")
-                $("#one-all").val("")
-                $("#two-dimer").val("")
-                $("#two-at").val("")
-                $("#two-014-1").val("")
-                $("#two-all").val("")
-                $("#msgbox").html(msg)
-                $("#table").hide()
-            })
-
-            $("#ok").click(() => {
-                let one_dimer = $("#one-dimer").val()
-                let two_dimer = $("#two-dimer").val()
-                let one_014_1 = $("#one-014-1").val()
-                let two_014_1 = $("#two-014-1").val()
-                let one_at = $("#one-at").val()
-                let two_at = $("#two-at").val()
-                let one_all = $("#one-all").val()
-                let two_all = $("#two-all").val()
-
-                let one_dimer_ = func_dimer(one_dimer, one_all)
-                let one_at_ = func_at(one_at, one_all)
-                let one_impurities = func_impurities(one_dimer, one_at, one_014_1, one_all)
-                let one_purity = func_purity(one_impurities)
-
-                let two_dimer_ = func_dimer(two_dimer, two_all)
-                let two_at_ = func_at(two_at, two_all)
-                let two_impurities = func_impurities(two_dimer, two_at, two_014_1, two_all)
-                let two_purity = func_purity(two_impurities)
-
-                let average_dimer = average(one_dimer_, two_dimer_)
-                let average_at = average(one_at_, two_at_)
-                let average_impurities = average(one_impurities, two_impurities)
-                let average_purity = average(one_purity, two_purity)
-
-                let data = {
-                    "one": {
-                        "dimer": format(one_dimer_, DIMER_MAX),
-                        "at": format(one_at_, AT_MAX),
-                        "impurities": format(one_impurities, TOTAL_IMPURITIES_MAX),
-                        "purity": format(one_purity, 100, PURTY_MIN)
-                    },
-                    "two": {
-                        "dimer": format(two_dimer_, DIMER_MAX),
-                        "at": format(two_at_, AT_MAX),
-                        "impurities": format(two_impurities, TOTAL_IMPURITIES_MAX),
-                        "purity": format(two_purity, 100, PURTY_MIN)
-                    },
-                    "average": {
-                        "dimer": format(average_dimer, DIMER_MAX),
-                        "at": format(average_at, AT_MAX),
-                        "impurities": format(average_impurities, TOTAL_IMPURITIES_MAX),
-                        "purity": format(average_purity, 100, PURTY_MIN)
-                    }
-                }
-
-                generateTable(data)
-            })
-        })
-
-        function func_dimer(dimer, all) {
-            if (dimer == '' || all == '') return 0
-            // dimer% = [dimer / (all * RRF)] * 100
-            let x = decimal.mul(all, DIMER_RRF)
-            let y = decimal.div(dimer, x).mul(100)
-            return toFixed(y)
-        }
-
-        function func_at(at, all) {
-            if (at == '' || all == '') return 0
-            // at% = [at / (all * RRF)] * 100
-            let x = decimal.mul(all, AT_RRF)
-            let y = decimal.div(at, x).mul(100)
-            return toFixed(y)
-        }
-
-        function func_impurities(dimer, at, l014_1, all) {
-            if (dimer == '' || at == '' || l014_1 == '' || all == '') return 0
-            // x = all - dimer - at - l014_1
-            // y = (x / all) * 100
-            // impurities% = y + dimer% + at%
-            let x = decimal.sub(all, dimer).sub(at).sub(l014_1)
-            let y = decimal.div(x, all).mul(100)
-            let z = decimal.add(y, func_dimer(dimer, all)).add(func_at(at, all))
-            return toFixed(z)
-        }
-
-        function func_purity(total_impurities) {
-            if (total_impurities == '') return 0
-            // purty% = 100 - impurities%
-            return toFixed(decimal.sub(100, total_impurities))
-        }
-
-        function average(a, b) {
-            let value = decimal.add(a, b).div(2)
-            // 大于等于 1 时只保留一位小数，否则保留两位
-            return value.toFixed(value >= 1 ? 1 : 2, ROUNDING)
-        }
-
-        function format(value, max, min = 0) {
-            if (value == 0) {
-                return 'ND' // means 'Not Detected'
-            }
-
-            if (value > max || value < min) {
-                return `<span style='color: red;'>${value}</span>`
-            }
-
-            return value
-        }
-
-        function toFixed(value) {
-            return value.toFixed(value >= 1 ? 2 : 3, ROUNDING)
-        }
-
-        function generateTable(data) {
-            $("#table").show()
-
-            $("#Dimer>#one").html(data.one.dimer)
-            $("#2-AT>#one").html(data.one.at)
-            $("#impurities>#one").html(data.one.impurities)
-            $("#purity>#one").html(data.one.purity)
-
-            $("#Dimer>#two").html(data.two.dimer)
-            $("#2-AT>#two").html(data.two.at)
-            $("#impurities>#two").html(data.two.impurities)
-            $("#purity>#two").html(data.two.purity)
-
-            $("#Dimer>#average").html(data.average.dimer)
-            $("#2-AT>#average").html(data.average.at)
-            $("#impurities>#average").html(data.average.impurities)
-            $("#purity>#average").html(data.average.purity)
-        }
-
-    </script>
-    <style>
-        .container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            column-gap: 2%
-        }
-
-        input {
-            width: auto;
-        }
-
-    </style>
-</head>
-
-<body>
-    <h3>L014-1 相关物质</h3>
-    <div class="container">
-        <span>第一组</span>
-        <span>第二组</span>
-
-        <input type="number" name="one-dimer" id="one-dimer" inputmode="numeric" placeholder="2.2-Dimer 峰面积">
-        <input type="number" name="two-dimer" id="two-dimer" inputmode="numeric" placeholder="2.2-Dimer 峰面积">
-
-        <input type="number" name="one-at" id="one-at" inputmode="numeric" placeholder="2-乙酰噻吩峰面积">
-        <input type="number" name="two-at" id="two-at" inputmode="numeric" placeholder="2-乙酰噻吩峰面积">
-
-        <input type="number" name="one-014-1" id="one-014-1" inputmode="numeric" placeholder="L014-1 峰面积">
-        <input type="number" name="two-014-1" id="two-014-1" inputmode="numeric" placeholder="L014-1 峰面积">
-
-        <input type="number" name="one-all" id="one-all" inputmode="numeric" placeholder="总峰面积">
-        <input type="number" name="two-all" id="two-all" inputmode="numeric" placeholder="总峰面积">
-    </div>
-
-
-    <br>
-    <div class="buttons">
-        <button id="new_page">新开标签页</button>
-        <button id="clear">清除内容</button>
-        <button id="ok">计算</button>
-    </div>
-
-    <br>
-    <table id="table" style="font-size: small; width: 100%; text-align: center; display: none;">
-        <caption>计算结果</caption>
-        <tr>
-            <th scope="col">/</th>
-            <th scope="col">第一组(%)</th>
-            <th scope="col">第二组(%)</th>
-            <th scope="col">平均值(%)</th>
-        </tr>
-        <tr id="Dimer">
-            <th scope="row">2.2-Dimer</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-        <tr id="2-AT">
-            <th scope="row">2-乙酰噻吩</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-        <tr id="max_impurities">
-            <th scope="row">最大单杂</th>
-            <td id="one">/</td>
-            <td id="two">/</td>
-            <td id="average">/</td>
-        </tr>
-        <tr id="impurities">
-            <th scope="row">杂质总量</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-        <tr id="purity">
-            <th scope="row">纯度</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-    </table>
-    <div id="msgbox"></div>
-</body>
-
-</html>
diff --git a/views/L414-5KR-impurities.html b/views/L414-5KR-impurities.html
deleted file mode 100644
index 3a4b8a4..0000000
--- a/views/L414-5KR-impurities.html
+++ /dev/null
@@ -1,286 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-cmn-Hans">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>L414-5KR 相关物质</title>
-    <link rel="stylesheet" href="../statics/github.css">
-    <link rel="stylesheet" href="../statics/theme.css">
-    <script src="../statics/modules/jquery.min.js"></script>
-    <script type="module">
-        import { Decimal } from "../statics/modules/decimal.mjs"
-
-        // debug 开关
-        const DEBUG = false
-        // 校正因子
-        const F_L414_3 = 0.80
-        const F_L414_5_IM = 1.48
-        // 计算精度
-        const PRECISION = 3
-        // 操规允许的最大值
-        const MAX_L414_3 = 0.3
-        const MAX_L414_5_IM = 1.0
-        const MAX_TOTAL_IMPURITIES = 2.0
-        const MIN_PURITY = 98.0
-
-        let tips_params = `
-            <b>相关参数：</b><br>
-            &nbsp;&nbsp; L414-3 的校正因子: ${F_L414_3.toFixed(2)}<br>
-            &nbsp;&nbsp; L414-5-IM 的校正因子: ${F_L414_5_IM}<br>
-        `
-
-        let tips_standard = `
-            <b>质量标准：</b><br>
-            &nbsp;&nbsp; L414-3 &le; ${MAX_L414_3}% <br>
-            &nbsp;&nbsp; L414-401 &le; 0.2% <br>
-            &nbsp;&nbsp; L414-5-IM &le; ${MAX_L414_5_IM.toFixed(1)}% <br>
-            &nbsp;&nbsp; 最大单杂 &le; 0.50% <br>
-            &nbsp;&nbsp; 杂质总量 &le; ${MAX_TOTAL_IMPURITIES}% <br>
-            &nbsp;&nbsp; 纯度 &ge; ${MIN_PURITY}% <br>
-        `
-
-        // 默认的消息提示
-        let tips = `
-            ${tips_params}
-            <br>
-            ${tips_standard}
-        `
-
-        let decimal = Decimal.set({
-            rounding: Decimal.ROUND_HALF_EVEN,
-            precision: 12
-        })
-
-        $(document).ready(() => {
-            let one_all = $("#one-all")
-            let one_414_3 = $("#one-414-3")
-            let one_414_5_im = $("#one-414-5-im")
-            let one_414_5 = $("#one-414-5")
-            let two_all = $("#two-all")
-            let two_414_3 = $("#two-414-3")
-            let two_414_5_im = $("#two-414-5-im")
-            let two_414_5 = $("#two-414-5")
-
-            if (DEBUG) {
-                one_414_3.val(1762)
-                one_414_5_im.val(2614)
-                one_414_5.val(24001626)
-                one_all.val(24075340)
-
-                two_414_3.val(2175)
-                two_414_5_im.val(3319)
-                two_414_5.val(24320630)
-                two_all.val(24409434)
-            }
-
-            $("#msgbox").html(tips)
-            $("#new_page").click(() => window.open(window.location.href, "_BLANK"))
-
-            $("#clear").click(() => {
-                one_all.val("")
-                two_all.val("")
-                one_414_3.val("")
-                two_414_3.val("")
-                one_414_5_im.val("")
-                two_414_5_im.val("")
-                one_414_5.val("")
-                two_414_5.val("")
-                $("#msgbox").empty()
-                $("#msgbox").html(tips)
-                $("#table").hide()
-            })
-
-            $("#ok").click(() => {
-                let one_414_3_cf = correctionFactor(one_414_3.val(), one_all.val(), F_L414_3)
-                let one_414_5_im_cf = correctionFactor(one_414_5_im.val(), one_all.val(), F_L414_5_IM)
-
-                let two_414_3_cf = correctionFactor(two_414_3.val(), two_all.val(), F_L414_3)
-                let two_414_5_im_cf = correctionFactor(two_414_5_im.val(), two_all.val(), F_L414_5_IM)
-
-                let one_total_impurities = totalImpurities(
-                    one_all.val(), one_414_5.val(),
-                    one_414_3.val(), one_414_3_cf,
-                    one_414_5_im.val(), one_414_5_im_cf
-                )
-
-                let two_total_impurities = totalImpurities(
-                    two_all.val(), two_414_5.val(),
-                    two_414_3.val(), two_414_3_cf,
-                    two_414_5_im.val(), two_414_5_im_cf
-                )
-
-                let one_purity = decimal.sub(100, one_total_impurities).toFixed(PRECISION)
-                let two_purity = decimal.sub(100, two_total_impurities).toFixed(PRECISION)
-
-                let data = {
-                    "one": {
-                        "L414_3": format(one_414_3_cf, MAX_L414_3),
-                        "L414_5_IM": format(one_414_5_im_cf, MAX_L414_5_IM),
-                        "impurities": format(one_total_impurities, MAX_TOTAL_IMPURITIES),
-                        "purity": format(one_purity, MIN_PURITY, true)
-                    },
-                    "two": {
-                        "L414_3": format(two_414_3_cf, MAX_L414_3),
-                        "L414_5_IM": format(two_414_5_im_cf, MAX_L414_5_IM),
-                        "impurities": format(two_total_impurities, MAX_TOTAL_IMPURITIES),
-                        "purity": format(two_purity, MIN_PURITY, true)
-                    },
-                    "average": {
-                        "L414_3": format(average(one_414_3_cf, two_414_3_cf), MAX_L414_3),
-                        "L414_5_IM": format(average(one_414_5_im_cf, two_414_5_im_cf), MAX_L414_5_IM),
-                        "impurities": format(average(one_total_impurities, two_total_impurities), MAX_TOTAL_IMPURITIES),
-                        "purity": format(average(one_purity, two_purity, 1), MIN_PURITY, true)
-                    }
-                }
-
-                $("#table").show()
-                generateTable(data)
-                $("#msgbox").html(`
-                    <br>
-                    <b>注意：</b><br>
-                    &nbsp;&nbsp; 结果表格中，标注 / 的仅用于占行，具体结果需查看色谱图峰表。<br>
-                    <br>
-                    ${tips}
-                `)
-            })
-        })
-
-        /**
-         * 将结果输出到表格中
-         */
-        function generateTable(data) {
-            $("#L414-3>#one").html(data.one.L414_3)
-            $("#L414-5-IM>#one").html(data.one.L414_5_IM)
-            $("#impurities>#one").html(data.one.impurities)
-            $("#purity>#one").html(data.one.purity)
-
-            $("#L414-3>#two").html(data.two.L414_3)
-            $("#L414-5-IM>#two").html(data.two.L414_5_IM)
-            $("#impurities>#two").html(data.two.impurities)
-            $("#purity>#two").html(data.two.purity)
-
-            $("#L414-3>#average").html(data.average.L414_3)
-            $("#L414-5-IM>#average").html(data.average.L414_5_IM)
-            $("#impurities>#average").html(data.average.impurities)
-            $("#purity>#average").html(data.average.purity)
-        }
-
-        /**
-         * 代入校正因子进行计算
-         */
-        function correctionFactor(pa, paa, f) {
-            if (pa == '' || paa == '' || f == '') return 0
-            return decimal.div(pa, paa).mul(f).mul(100).toFixed(PRECISION, Decimal.ROUND_HALF_EVEN)
-        }
-
-        /**
-         * 计算杂质总量
-         */
-        function totalImpurities(paa, l414_5, l414_3, l414_3_rrf, l414_5_im, l414_5_im_rrf) {
-            if (paa == '' || l414_5 == '' || l414_3 == '' || l414_3_rrf == '' ||
-                l414_5_im == '' || l414_5_im_rrf == '') return 0
-
-            // X = All - (L414-5) - (L414-3) - (L414-5-IM) / All * 100
-            // R = X + (%L414-3) + (%L414-5-IM)
-            let a = decimal.sub(paa, l414_5).sub(l414_3).sub(l414_5_im)
-            let b = decimal.div(a, paa).mul(100)
-            let r = decimal.add(b, l414_3_rrf).add(l414_5_im_rrf)
-            return r.toFixed(PRECISION, Decimal.ROUND_HALF_EVEN)
-        }
-
-        function format(value, max, morethen = false) {
-            let red_value = `<span style='color: red;'>${value}</span>`
-            if (value == 0) return "ND"
-            if (value < 0) return red_value
-            if (!morethen && value >= max) return red_value
-            if (morethen && value <= max) return red_value
-            return `${value}`
-        }
-
-        /**
-         * 求两个数的平均值
-         */
-        function average(a, b, fd = (PRECISION - 1)) {
-            return decimal.add(a, b).div(2).toFixed(fd)
-        }
-    </script>
-</head>
-
-<body>
-    <h3>L414-5KR 相关物质</h3>
-    <div class="one">
-        第一组<br>
-        <input type="number" name="one-414-3" id="one-414-3" , placeholder="L414-3 峰面积" inputmode="numeric">
-        <input type="number" name="one-414-5-im" id="one-414-5-im" , placeholder="L414-5-IM 峰面积" inputmode="numeric">
-        <input type="number" name="one-414-5" id="one-414-5" , placeholder="L414-5 峰面积" inputmode="numeric">
-        <input type="number" name="one-all" id="one-all" placeholder="总峰面积" inputmode="numeric">
-    </div>
-
-    <br>
-    <div class="two">
-        第二组<br>
-        <input type="number" name="two-414-3" id="two-414-3" , placeholder="L414-3 峰面积" inputmode="numeric">
-        <input type="number" name="two-414-5-im" id="two-414-5-im" , placeholder="L414-5-IM 峰面积" inputmode="numeric">
-        <input type="number" name="two-414-5" id="two-414-5" , placeholder="L414-5 峰面积" inputmode="numeric">
-        <input type="number" name="two-all" id="two-all" placeholder="总峰面积" inputmode="numeric">
-    </div>
-
-    <br>
-    <div class="buttons">
-        <button id="new_page">新开标签页</button>
-        <button id="clear">清除内容</button>
-        <button id="ok">计算</button>
-    </div>
-
-    <br>
-    <table id="table" style="font-size: small; width: 100%; text-align: center; display: none;">
-        <caption>计算结果</caption>
-        <tr>
-            <th scope="col">/</th>
-            <th scope="col">第一组(%)</th>
-            <th scope="col">第二组(%)</th>
-            <th scope="col">平均值(%)</th>
-        </tr>
-        <tr id="L414-3">
-            <th scope="row">L414-3</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-        <tr id="L414-4">
-            <th scope="row">L414-401</th>
-            <td id="one">/</td>
-            <td id="two">/</td>
-            <td id="average">/</td>
-        </tr>
-        <tr id="L414-5-IM">
-            <th scope="row">L414-5-IM</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-        <tr id="purity">
-            <th scope="row">纯度</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-        <tr id="max_impurities">
-            <th scope="row">最大单杂</th>
-            <td id="one">/</td>
-            <td id="two">/</td>
-            <td id="average">/</td>
-        </tr>
-        <tr id="impurities">
-            <th scope="row">杂质总量</th>
-            <td id="one"></td>
-            <td id="two"></td>
-            <td id="average"></td>
-        </tr>
-    </table>
-    <div id="msgbox"></div>
-</body>
-
-</html>
diff --git a/views/settings.html b/views/settings.html
new file mode 100644
index 0000000..b7f4400
--- /dev/null
+++ b/views/settings.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="zh-cmn-Hans">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings</title>
+    <script src="../statics/modules/jquery.min.js"></script>
+    <link rel="stylesheet" href="../statics/github.css">
+    <link rel="stylesheet" href="../statics/theme.css">
+    <style>
+        * {
+            padding: 0;
+            margin: 0;
+        }
+
+        textarea {
+            width: 85vw;
+            height: 70vh;
+            padding: 2vw;
+            margin: 3vw;
+            font-size: medium;
+            line-height: 1.2;
+            border: 1px solid #cbcbcb;
+            border-radius: 5px;
+        }
+
+    </style>
+    <script type="module">
+        import { IO } from "../statics/modules/tools.js"
+        const io = new IO("settings")
+
+        $(() => {
+            const textarea = $("#textarea")
+
+            // 写入默认设置
+            if (readSettings().length == 0) {
+                writeDefaultSettings(() => {
+                    $("#refresh").click()
+                })
+            }
+
+            $("#reset").click(() => {
+                if (confirm("确定要恢复默认设置吗？\n该选项将会覆盖当前已保存的设置")) {
+                    writeDefaultSettings(() => {
+                        $("#refresh").click()
+                    })
+                }
+            })
+
+            $("#go_index").click(() => {
+                window.location.href = "../index.html"
+            })
+
+            $("#refresh").click(() => {
+                let settings = readSettingsWithComments()
+                let string = ""
+                settings.forEach(item => {
+                    string = string.concat(item).concat("\n")
+                })
+                textarea.val(string)
+            })
+            $("#refresh").click()
+
+            $("#save").click(() => {
+                let text = $("#textarea").val()
+                let settings = text.split("\n")
+                writeSettings(settings)
+            })
+
+        })
+
+        function readSettingsWithComments() {
+            let texts = []
+            texts.push("# 以井号开头的行是注释，注释将被忽略。")
+            texts.push("# 一行仅可填写一个设置，以键值对 (key=value) 的形式出现。")
+            texts.push("# 等号左边为设置的唯一标识，右边为该设置的值")
+            texts.push("# 若值有多个，使用英文逗号分隔 (e.g. key=value1,value2)")
+            texts.push("# 等号和用于分隔多个值的英文逗号左右两边不得有空格")
+            texts.push("")
+            for (const setting of readSettings()) {
+                let comment = io.read(`${setting.key}.desc`)
+                texts.push(`# ${comment}`)
+                texts.push(`${setting.key}=${setting.value}`)
+                texts.push("")
+            }
+            return texts
+        }
+
+        function readSettings() {
+            let settings = []
+            for (const iterator of io.listKeys().sort()) {
+                if (!iterator.endsWith(".desc")) {
+                    settings.push({
+                        key: iterator,
+                        value: io.read(iterator)
+                    })
+                }
+            }
+            return settings
+        }
+
+        function writeSettings(settings) {
+            if (settings.length == 0) {
+                return
+            }
+
+            io.listKeys().forEach(key => {
+                if (!key.endsWith(".desc")) {
+                    io.remove(key)
+                }
+            })
+
+            settings.forEach(item => {
+                if (item.startsWith("#")) {
+                    return
+                }
+                let key = item.split('=')[0]
+                let value = item.split('=')[1]
+                if (key != item && key != '') {
+                    io.write(key, value)
+                }
+            })
+        }
+
+        function writeDefaultSettings(action) {
+            io.listKeys().forEach(key => {
+                io.remove(key)
+            })
+
+            $.getJSON("../statics/settings.json", (settings) => {
+                for (const iterator of settings) {
+                    io.write(iterator.id, iterator.default)
+                    io.write(`${iterator.id}.desc`, iterator.description)
+                }
+
+                action()
+            })
+        }
+
+        function createItem(data) {
+            let div = document.createElement("div")
+            div.setAttribute("class", "setting_item")
+
+            let span = document.createElement("span")
+            let span_title = document.createElement("span")
+            let span_description = document.createElement("span")
+            span_title.setAttribute("class", "title")
+            span_description.setAttribute("class", "description")
+            span_description.innerHTML = data.description
+            span.appendChild(span_title)
+            span.appendChild(document.createElement("br"))
+            span.appendChild(span_description)
+            div.appendChild(span)
+            switch (data.type) {
+                case 'boolean':
+                    span_title.innerHTML = `${data.title} (${data.default ? "ON" : "OFF"})`
+                    let button = document.createElement("button")
+                    button.innerText = data.default ? "OFF" : "ON"
+                    button.setAttribute("id", data.id)
+                    div.appendChild(button)
+                    break
+                case 'number':
+                    span_title.innerHTML = `${data.title} (${data.default})`
+                    let input = document.createElement("input")
+                    input.setAttribute("type", "number")
+                    input.setAttribute("value", data.default)
+                    input.setAttribute("id", data.id)
+                    div.appendChild(input)
+                    break
+                default:
+                    break
+            }
+            return div
+        }
+
+    </script>
+</head>
+
+<body>
+    <textarea id="textarea" wrap="off" autocomplete="off"></textarea>
+
+    <br>
+    <div id="buttons" style="text-align: center;">
+        <button id="reset">恢复默认设置</button>
+        <button id="go_index">回到首页</button>
+        <button id="refresh">刷新</button>
+        <button id="save">保存</button>
+    </div>
+    <div id="msg"></div>
+</body>
+
+</html>
diff --git a/views/common-sop.html b/views/sop.html
similarity index 86%
rename from views/common-sop.html
rename to views/sop.html
index bf41568..ef199e9 100644
--- a/views/common-sop.html
+++ b/views/sop.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>常用操作规程</title>
+    <title>操作规程</title>
     <link rel="stylesheet" href="../statics/github.css">
     <link rel="stylesheet" href="../statics/theme.css">
     <style>
@@ -32,7 +32,7 @@
         const md = window.markdownit({
             breaks: true
         })
-        const tips = `整理了常用的操作规程中的关键内容以供查询，请以纸质操作规程为准！`
+        const tips = `<br>整理了常用的操作规程中的关键内容以供查询，请以纸质操作规程为准！`
         const sop = [
             "L014-1",
             "L018-1",
@@ -58,7 +58,7 @@
                 }
 
                 $("#content").empty()
-                $("#content").text("加载中...")
+                $("#content").html("<br>加载中...")
                 $.ajax({
                     url: `../statics/sop/${name}`,
                     success: (data) => {
@@ -74,9 +74,8 @@
 
 <body>
     <div>
-        <label for="selector">选择要查看的操作规程：</label><br>
         <select name="selector" id="selector">
-            <option value='null' selected>请选择</option>
+            <option value='null' selected>选择要查看的操作规程</option>
         </select>
     </div>
     <div id="content"></div>