前端页面

EdgeAdmin/web/views/@default/httpdns/apps/@menu.html

@@ -0,0 +1,4 @@
+<first-menu>
+    <menu-item href="/httpdns/apps" code="index">应用列表</menu-item>
+    <a href="" class="item" @click.prevent="createApp()">[添加应用]</a>
+</first-menu>

EdgeAdmin/web/views/@default/httpdns/apps/appSettings.html

@@ -0,0 +1,116 @@
+{$layout}
+{$template "menu"}
+
+<style>
+.httpdns-settings-grid {
+    margin-top: 0 !important;
+}
+.httpdns-settings-grid .left-nav-column {
+    max-width: 220px;
+}
+.httpdns-settings-grid .right-form-column {
+    padding-left: .3em !important;
+}
+.httpdns-side-menu .item {
+    padding-top: .8em !important;
+    padding-bottom: .8em !important;
+}
+.httpdns-mini-action {
+    display: inline-block;
+    font-size: 12px;
+    color: #6b7280;
+    margin-left: .55em;
+    line-height: 1.6;
+}
+.httpdns-mini-action:hover {
+    color: #1e70bf;
+}
+.httpdns-mini-action .icon {
+    margin-right: 0 !important;
+    font-size: .92em !important;
+}
+.httpdns-note.comment {
+    color: #8f9aa6 !important;
+    font-size: 12px;
+    margin-top: .45em !important;
+}
+</style>
+
+<div>
+    <div class="ui menu text blue">
+        <div class="item"><strong>{{app.name}}</strong> (<code>{{settings.appId}}</code>)</div>
+    </div>
+    <div class="ui divider"></div>
+
+    <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+        <csrf-token></csrf-token>
+        <input type="hidden" name="appId" :value="app.id" />
+
+        <div class="ui stackable grid httpdns-settings-grid">
+            <div class="three wide computer four wide tablet sixteen wide mobile column left-nav-column">
+                <div class="ui fluid vertical pointing menu httpdns-side-menu">
+                    <a href="" class="item" :class="{active: activeSection == 'basic'}" @click.prevent="activeSection='basic'">基础配置</a>
+                    <a href="" class="item" :class="{active: activeSection == 'auth'}" @click.prevent="activeSection='auth'">认证与密钥</a>
+                </div>
+            </div>
+
+            <div class="thirteen wide computer twelve wide tablet sixteen wide mobile column right-form-column">
+                <table class="ui table selectable definition" v-show="activeSection == 'basic'">
+                    <tr>
+                        <td class="title">App ID</td>
+                        <td><code>{{settings.appId}}</code></td>
+                    </tr>
+                    <tr>
+                        <td class="title">应用启用</td>
+                        <td><checkbox name="appStatus" value="1" v-model="settings.appStatus"></checkbox></td>
+                    </tr>
+
+                    <tr>
+                        <td class="title">SNI 防护配置</td>
+                        <td>
+                            <span class="green">隐匿 SNI</span>
+                            <p class="comment httpdns-note">当前默认采用隐匿 SNI 策略，避免在 TLS 握手阶段暴露业务域名。</p>
+                        </td>
+                    </tr>
+                </table>
+
+                <table class="ui table selectable definition" v-show="activeSection == 'auth'">
+                    <tr>
+                        <td class="title">请求验签</td>
+                        <td>
+                            <span class="ui label tiny green" v-if="settings.signEnabled">已开启</span>
+                            <span class="ui label tiny basic" v-else>已关闭</span>
+                            <a href="" class="ui mini button" :class="settings.signEnabled ? 'basic' : 'primary'" style="margin-left: .8em;" @click.prevent="toggleSignEnabled">{{settings.signEnabled ? "关闭请求验签" : "开启请求验签"}}</a>
+                            <p class="comment httpdns-note">打开后，服务端会对请求进行签名校验。</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="title">加签 Secret</td>
+                        <td>
+                            <code>{{signSecretVisible ? settings.signSecretPlain : settings.signSecretMasked}}</code>
+                            <a href="" class="httpdns-mini-action" @click.prevent="signSecretVisible = !signSecretVisible" :title="signSecretVisible ? '隐藏明文' : '查看明文'"><i class="icon" :class="signSecretVisible ? 'eye slash' : 'eye'"></i></a>
+                            <a href="" class="httpdns-mini-action" title="复制加签 Secret" @click.prevent="copySecret(settings.signSecretPlain, '加签 Secret')"><i class="copy outline icon"></i></a>
+                            <a href="" class="httpdns-mini-action" @click.prevent="resetSignSecret">[重置]</a>
+                            <p class="comment httpdns-note">最近更新：{{settings.signSecretUpdatedAt}}</p>
+                            <p class="comment httpdns-note" v-if="!settings.signEnabled">请求验签已关闭，当前不使用加签 Secret。</p>
+                            <p class="comment httpdns-note">用于生成鉴权接口的安全密钥。</p>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="title">AES 数据加密 Secret</td>
+                        <td>
+                            <code>{{aesSecretVisible ? settings.aesSecretPlain : settings.aesSecretMasked}}</code>
+                            <a href="" class="httpdns-mini-action" @click.prevent="aesSecretVisible = !aesSecretVisible" :title="aesSecretVisible ? '隐藏明文' : '查看明文'"><i class="icon" :class="aesSecretVisible ? 'eye slash' : 'eye'"></i></a>
+                            <a href="" class="httpdns-mini-action" title="复制 AES 数据加密 Secret" @click.prevent="copySecret(settings.aesSecretPlain, 'AES Secret')"><i class="copy outline icon"></i></a>
+                            <a href="" class="httpdns-mini-action" @click.prevent="resetAESSecret">[重置]</a>
+                            <p class="comment httpdns-note">最近更新：{{settings.aesSecretUpdatedAt}}</p>
+                            <p class="comment httpdns-note">用于解析接口数据加密的密钥。</p>
+                        </td>
+                    </tr>
+                </table>
+
+                <submit-btn></submit-btn>
+            </div>
+        </div>
+    </form>
+</div>

EdgeAdmin/web/views/@default/httpdns/apps/appSettings.js

@@ -0,0 +1,111 @@
+Tea.context(function () {
+    this.activeSection = "basic";
+    this.success = NotifyReloadSuccess("保存成功");
+    this.signSecretVisible = false;
+    this.aesSecretVisible = false;
+
+    this.toggleSignEnabled = function () {
+        let that = this;
+        let targetIsOn = !this.settings.signEnabled;
+
+        if (targetIsOn) {
+            teaweb.confirm("html:开启后，服务端将会对解析请求进行验签鉴权，<span class='red'>未签名、签名无效或过期的请求都解析失败</span>，确认开启吗？", function () {
+                that.$post("/httpdns/apps/app/settings/toggleSignEnabled")
+                    .params({
+                        appId: that.app.id,
+                        isOn: 1
+                    })
+                    .success(function () {
+                        that.settings.signEnabled = true;
+                        teaweb.success("请求验签已开启");
+                    });
+            });
+            return;
+        }
+
+        teaweb.confirm("html:关闭后，服务端将不会对解析请求进行验签鉴权，可能<span class='red'>存在被刷风险</span>，确认关闭吗？", function () {
+            that.$post("/httpdns/apps/app/settings/toggleSignEnabled")
+                .params({
+                    appId: that.app.id,
+                    isOn: 0
+                })
+                .success(function () {
+                    that.settings.signEnabled = false;
+                    teaweb.success("请求验签已关闭");
+                });
+        });
+    };
+
+    this.copySecret = function (text, name) {
+        if (typeof text != "string" || text.length == 0) {
+            teaweb.warn("没有可复制的内容");
+            return;
+        }
+
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(text).then(function () {
+                teaweb.success(name + "已复制");
+            }).catch(function () {
+                this.copyByTextarea(text, name);
+            }.bind(this));
+            return;
+        }
+
+        this.copyByTextarea(text, name);
+    };
+
+    this.copyByTextarea = function (text, name) {
+        let input = document.createElement("textarea");
+        input.value = text;
+        input.setAttribute("readonly", "readonly");
+        input.style.position = "fixed";
+        input.style.left = "-10000px";
+        input.style.top = "-10000px";
+        document.body.appendChild(input);
+        input.select();
+
+        let ok = false;
+        try {
+            ok = document.execCommand("copy");
+        } catch (e) {
+            ok = false;
+        }
+        document.body.removeChild(input);
+
+        if (ok) {
+            teaweb.success(name + "已复制");
+        } else {
+            teaweb.warn("复制失败，请手动复制");
+        }
+    };
+
+    this.resetSignSecret = function () {
+        let that = this;
+        teaweb.confirm("确定要重置加签 Secret 吗？", function () {
+            that.$post("/httpdns/apps/app/settings/resetSignSecret")
+                .params({
+                    appId: that.app.id
+                })
+                .success(function () {
+                    teaweb.success("加签 Secret 已重置", function () {
+                        teaweb.reload();
+                    });
+                });
+        });
+    };
+
+    this.resetAESSecret = function () {
+        let that = this;
+        teaweb.confirm("确定要重置 AES Secret 吗？", function () {
+            that.$post("/httpdns/apps/app/settings/resetAESSecret")
+                .params({
+                    appId: that.app.id
+                })
+                .success(function () {
+                    teaweb.success("AES Secret 已重置", function () {
+                        teaweb.reload();
+                    });
+                });
+        });
+    };
+});

EdgeAdmin/web/views/@default/httpdns/apps/createPopup.html

@@ -0,0 +1,37 @@
+{$layout "layout_popup"}
+
+<h3>添加应用</h3>
+
+<form method="post" class="ui form" data-tea-action="$">
+    <csrf-token></csrf-token>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">应用名称 *</td>
+            <td>
+                <input type="text" name="name" maxlength="64" ref="focus" />
+                <p class="comment">为该 HTTPDNS 应用设置一个便于识别的名称。</p>
+            </td>
+        </tr>
+        <tr>
+            <td>所属集群 *</td>
+            <td>
+                <select class="ui dropdown" name="clusterId" v-model="defaultClusterId">
+                    <option value="">[请选择集群]</option>
+                    <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
+                </select>
+                <p class="comment">应用的解析请求将由所选集群下的网关节点处理。默认值来自“HTTPDNS 用户设置”。</p>
+            </td>
+        </tr>
+        <tr>
+            <td>所属用户</td>
+            <td>
+                <select class="ui dropdown" name="userId">
+                    <option value="0">[平台自用 / 不指定]</option>
+                    <option v-for="user in users" :value="user.id">{{user.name}} ({{user.username}})</option>
+                </select>
+                <p class="comment">可分配给指定租户用户；留空表示平台管理员自用。</p>
+            </td>
+        </tr>
+    </table>
+    <submit-btn></submit-btn>
+</form>

EdgeAdmin/web/views/@default/httpdns/apps/customRecords.html

@@ -0,0 +1,66 @@
+{$layout}
+{$template "menu"}
+
+<style>
+.httpdns-col-ttl {
+    width: 72px;
+    white-space: nowrap;
+}
+.httpdns-col-actions {
+    width: 130px;
+    white-space: nowrap;
+}
+</style>
+
+<div>
+    <div class="ui menu text blue">
+        <div class="item"><strong>{{app.name}}</strong> (<code>{{app.appId}}</code>)</div>
+    </div>
+    <div class="ui divider"></div>
+
+    <div class="ui small message">
+        当前域名：<strong>{{domain.name}}</strong>
+    </div>
+
+    <a href="" @click.prevent="createRecord" class="ui button primary small" :class="{disabled: !domain || !domain.id}">
+        <i class="icon plus"></i> 新增自定义解析规则
+    </a>
+    <a :href="'/httpdns/apps/domains?appId=' + app.id" class="ui button small">返回域名管理</a>
+
+    <table class="ui table selectable celled" v-if="records.length > 0" style="margin-top: 1em;">
+        <thead>
+            <tr>
+                <th>线路</th>
+                <th>规则名称</th>
+                <th>SDNS 参数</th>
+                <th>解析记录</th>
+                <th class="httpdns-col-ttl">TTL</th>
+                <th class="width10">状态</th>
+                <th class="httpdns-col-actions">操作</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="record in records">
+                <td>{{record.lineText}}</td>
+                <td>{{record.ruleName}}</td>
+                <td>{{record.paramsText}}</td>
+                <td>
+                    {{record.recordValueText}}
+                </td>
+                <td class="httpdns-col-ttl">{{record.ttl}}s</td>
+                <td>
+                    <span class="green" v-if="record.isOn">已启用</span>
+                    <span class="grey" v-else>已停用</span>
+                </td>
+                <td class="httpdns-col-actions">
+                    <a href="" @click.prevent="editRecord(record.id)">编辑</a> &nbsp;|&nbsp;
+                    <a href="" @click.prevent="toggleRecord(record)">{{record.isOn ? "停用" : "启用"}}</a> &nbsp;|&nbsp;
+                    <a href="" @click.prevent="deleteRecord(record.id)">删除</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <p class="ui warning message" v-if="!domain || !domain.id">当前应用暂无可用域名，请先到域名管理中添加域名。</p>
+    <p class="ui message" v-else-if="records.length == 0">当前域名还没有自定义解析规则。</p>
+</div>

EdgeAdmin/web/views/@default/httpdns/apps/customRecords.js

@@ -0,0 +1,50 @@
+Tea.context(function () {
+    if (typeof this.records == "undefined") {
+        this.records = [];
+    }
+
+    this.createRecord = function () {
+        if (!this.domain || !this.domain.id) {
+            return;
+        }
+        teaweb.popup("/httpdns/apps/customRecords/createPopup?appId=" + this.app.id + "&domainId=" + this.domain.id, {
+            width: "56em",
+            height: "40em",
+            title: "新增自定义解析规则"
+        });
+    };
+
+    this.editRecord = function (recordId) {
+        if (!this.domain || !this.domain.id) {
+            return;
+        }
+        teaweb.popup("/httpdns/apps/customRecords/createPopup?appId=" + this.app.id + "&domainId=" + this.domain.id + "&recordId=" + recordId, {
+            width: "56em",
+            height: "40em",
+            title: "编辑自定义解析规则"
+        });
+    };
+
+    this.deleteRecord = function (recordId) {
+        let that = this;
+        teaweb.confirm("确定要删除这条自定义解析规则吗？", function () {
+            that.$post("/httpdns/apps/customRecords/delete")
+                .params({
+                    appId: that.app.id,
+                    recordId: recordId
+                })
+                .refresh();
+        });
+    };
+
+    this.toggleRecord = function (record) {
+        let that = this;
+        that.$post("/httpdns/apps/customRecords/toggle")
+            .params({
+                appId: that.app.id,
+                recordId: record.id,
+                isOn: record.isOn ? 0 : 1
+            })
+            .refresh();
+    };
+});

EdgeAdmin/web/views/@default/httpdns/apps/customRecordsCreatePopup.html

@@ -0,0 +1,158 @@
+{$layout "layout_popup"}
+
+<style>
+.httpdns-inline-actions {
+    margin-top: .6em;
+}
+.httpdns-inline-actions .count {
+    color: #8f9aa6;
+    margin-left: .4em;
+}
+.httpdns-row {
+    display: flex;
+    align-items: center;
+    gap: .5em;
+    margin-bottom: .45em;
+}
+.httpdns-row .field {
+    margin: 0 !important;
+}
+.httpdns-row .field.flex {
+    flex: 1;
+}
+.httpdns-line-row {
+    display: flex !important;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: .5em;
+    white-space: nowrap;
+}
+</style>
+
+<h3 v-if="isEditing">编辑自定义解析规则</h3>
+<h3 v-else>新增自定义解析规则</h3>
+
+<form method="post" class="ui form" data-tea-action="$">
+    <csrf-token></csrf-token>
+    <input type="hidden" name="appId" :value="app.id" />
+    <input type="hidden" name="domainId" :value="domain.id" />
+    <input type="hidden" name="domain" :value="record.domain" />
+    <input type="hidden" name="recordId" :value="record.id" />
+    <input type="hidden" name="sdnsParamsJSON" :value="JSON.stringify(sdnsParams)" />
+    <input type="hidden" name="recordItemsJSON" :value="JSON.stringify(recordItems)" />
+
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">域名 *</td>
+            <td><strong>{{record.domain}}</strong></td>
+        </tr>
+        <tr>
+            <td class="title">规则名称 *</td>
+            <td>
+                <input type="text" name="ruleName" maxlength="50" v-model="record.ruleName" ref="focus" />
+                <p class="comment">例如：上海电信灰度-v2。</p>
+            </td>
+        </tr>
+        <tr>
+            <td class="title">线路</td>
+            <td>
+                <div class="httpdns-line-row">
+                    <select class="ui dropdown auto-width" style="display:inline-block !important;width:auto !important;margin:0 !important;" name="lineScope" v-model="record.lineScope" @change="onLineScopeChange">
+                        <option value="china">中国大陆</option>
+                        <option value="overseas">港澳台及境外</option>
+                    </select>
+
+                    <select class="ui dropdown auto-width" style="display:inline-block !important;width:auto !important;margin:0 !important;" name="lineCarrier" v-if="record.lineScope == 'china'" v-model="record.lineCarrier">
+                        <option v-for="carrier in chinaCarriers" :value="carrier">{{carrier}}</option>
+                    </select>
+                    <select class="ui dropdown auto-width" style="display:inline-block !important;width:auto !important;margin:0 !important;" name="lineRegion" v-if="record.lineScope == 'china'" v-model="record.lineRegion" @change="onChinaRegionChange">
+                        <option v-for="region in chinaRegions" :value="region">{{region}}</option>
+                    </select>
+                    <select class="ui dropdown auto-width" style="display:inline-block !important;width:auto !important;margin:0 !important;" name="lineProvince" v-if="record.lineScope == 'china'" v-model="record.lineProvince">
+                        <option v-for="province in provinceOptions" :value="province">{{province}}</option>
+                    </select>
+
+                    <select class="ui dropdown auto-width" style="display:inline-block !important;width:auto !important;margin:0 !important;" name="lineContinent" v-if="record.lineScope == 'overseas'" v-model="record.lineContinent" @change="onContinentChange">
+                        <option v-for="continent in continents" :value="continent">{{continent}}</option>
+                    </select>
+                    <select class="ui dropdown auto-width" style="display:inline-block !important;width:auto !important;margin:0 !important;" name="lineCountry" v-if="record.lineScope == 'overseas'" v-model="record.lineCountry">
+                        <option v-for="country in countryOptions" :value="country">{{country}}</option>
+                    </select>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="title">SDNS 参数配置</td>
+            <td>
+                <div class="httpdns-row" v-for="(param, index) in sdnsParams">
+                    <div class="field flex">
+                        <input type="text" maxlength="64" placeholder="参数名称" v-model="param.name" />
+                    </div>
+                    <div class="field flex">
+                        <input type="text" maxlength="64" placeholder="参数值" v-model="param.value" />
+                    </div>
+                    <a href="" @click.prevent="removeSDNSParam(index)" title="删除"><i class="icon trash alternate outline"></i></a>
+                </div>
+                <div class="httpdns-inline-actions">
+                    <a href="" @click.prevent="addSDNSParam" :class="{disabled: sdnsParams.length >= 10}">
+                        <i class="icon plus circle"></i>添加参数
+                    </a>
+                    <span class="count">{{sdnsParams.length}}/10</span>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="title">解析记录值 *</td>
+            <td>
+                <div style="float:right;">
+                    <div class="ui checkbox">
+                        <input type="checkbox" name="weightEnabled" value="1" v-model="record.weightEnabled" />
+                        <label>按权重调度</label>
+                    </div>
+                </div>
+                <div class="httpdns-row" v-for="(item, index) in recordItems">
+                    <div class="field">
+                        <select class="ui dropdown auto-width" v-model="item.type">
+                            <option value="A">A</option>
+                            <option value="AAAA">AAAA</option>
+                        </select>
+                    </div>
+                    <div class="field flex">
+                        <input type="text" placeholder="记录值（与记录类型匹配）" v-model="item.value" />
+                    </div>
+                    <div class="field" v-if="record.weightEnabled">
+                        <input type="text" style="width:8em;" placeholder="权重(1-100)" v-model="item.weight" />
+                    </div>
+                    <a href="" @click.prevent="removeRecordItem(index)" title="删除"><i class="icon trash alternate outline"></i></a>
+                </div>
+                <div class="httpdns-inline-actions">
+                    <a href="" @click.prevent="addRecordItem" :class="{disabled: recordItems.length >= 10}">
+                        <i class="icon plus circle"></i>添加记录值
+                    </a>
+                    <span class="count">{{recordItems.length}}/10</span>
+                </div>
+                <p class="comment" v-if="record.weightEnabled">开启后每条记录可配置权重，范围 1-100。</p>
+            </td>
+        </tr>
+        <tr>
+            <td class="title">TTL *</td>
+            <td>
+                <div class="ui input right labeled">
+                    <input type="text" name="ttl" maxlength="5" style="width:8em;" v-model="record.ttl" />
+                    <span class="ui basic label">秒</span>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="title">规则状态</td>
+            <td>
+                <div class="ui checkbox">
+                    <input type="checkbox" name="isOn" value="1" v-model="record.isOn" />
+                    <label>启用</label>
+                </div>
+            </td>
+        </tr>
+    </table>
+
+    <submit-btn></submit-btn>
+</form>

EdgeAdmin/web/views/@default/httpdns/apps/customRecordsCreatePopup.js

@@ -0,0 +1,177 @@
+Tea.context(function () {
+    var vm = this;
+
+    if (typeof vm.record == "undefined" || vm.record == null) {
+        vm.record = {};
+    }
+
+    vm.chinaCarriers = ["默认", "电信", "联通", "移动", "教育网", "鹏博士", "广电"];
+    vm.chinaRegions = ["默认", "东北", "华北", "华东", "华南", "华中", "西北", "西南"];
+    vm.chinaRegionProvinces = {
+        "默认": ["默认"],
+        "东北": ["默认", "辽宁", "吉林", "黑龙江"],
+        "华北": ["默认", "北京", "天津", "河北", "山西", "内蒙古"],
+        "华东": ["默认", "上海", "江苏", "浙江", "安徽", "福建", "江西", "山东"],
+        "华南": ["默认", "广东", "广西", "海南"],
+        "华中": ["默认", "河南", "湖北", "湖南"],
+        "西北": ["默认", "陕西", "甘肃", "青海", "宁夏", "新疆"],
+        "西南": ["默认", "重庆", "四川", "贵州", "云南", "西藏"]
+    };
+
+    vm.continents = ["默认", "非洲", "南极洲", "亚洲", "欧洲", "北美洲", "南美洲", "大洋洲"];
+    vm.continentCountries = {
+        "默认": ["默认"],
+        "非洲": ["默认", "南非", "埃及", "尼日利亚", "肯尼亚", "摩洛哥"],
+        "南极洲": ["默认"],
+        "亚洲": ["默认", "中国香港", "中国澳门", "中国台湾", "日本", "韩国", "新加坡", "印度", "泰国", "越南"],
+        "欧洲": ["默认", "德国", "英国", "法国", "荷兰", "西班牙", "意大利", "俄罗斯"],
+        "北美洲": ["默认", "美国", "加拿大", "墨西哥"],
+        "南美洲": ["默认", "巴西", "阿根廷", "智利", "哥伦比亚"],
+        "大洋洲": ["默认", "澳大利亚", "新西兰"]
+    };
+
+    vm.parseJSONList = function (raw) {
+        if (typeof raw == "undefined" || raw == null || raw == "") {
+            return [];
+        }
+
+        if (Array.isArray(raw)) {
+            return raw;
+        }
+
+        try {
+            var list = JSON.parse(raw);
+            if (Array.isArray(list)) {
+                return list;
+            }
+        } catch (e) {
+        }
+
+        return [];
+    };
+
+    vm.normalizeBoolean = function (value, defaultValue) {
+        if (typeof value == "boolean") {
+            return value;
+        }
+        if (typeof value == "number") {
+            return value > 0;
+        }
+        if (typeof value == "string") {
+            value = value.toLowerCase();
+            return value == "1" || value == "true" || value == "yes" || value == "on";
+        }
+        return defaultValue;
+    };
+
+    vm.record.lineScope = vm.record.lineScope == "overseas" ? "overseas" : "china";
+    vm.record.lineCarrier = vm.record.lineCarrier || "默认";
+    vm.record.lineRegion = vm.record.lineRegion || "默认";
+    vm.record.lineProvince = vm.record.lineProvince || "默认";
+    vm.record.lineContinent = vm.record.lineContinent || "默认";
+    vm.record.lineCountry = vm.record.lineCountry || "默认";
+    vm.record.ruleName = vm.record.ruleName || "";
+    vm.record.ttl = vm.record.ttl || 30;
+    vm.record.weightEnabled = vm.normalizeBoolean(vm.record.weightEnabled, false);
+    vm.record.isOn = vm.normalizeBoolean(vm.record.isOn, true);
+
+    vm.sdnsParams = vm.parseJSONList(vm.record.sdnsParamsJson);
+    if (vm.sdnsParams.length == 0) {
+        vm.sdnsParams.push({name: "", value: ""});
+    }
+
+    vm.recordItems = vm.parseJSONList(vm.record.recordItemsJson);
+    if (vm.recordItems.length == 0) {
+        vm.recordItems.push({type: "A", value: "", weight: 100});
+    } else {
+        for (var i = 0; i < vm.recordItems.length; i++) {
+            var item = vm.recordItems[i];
+            if (item.type != "A" && item.type != "AAAA") {
+                item.type = "A";
+            }
+            if (typeof item.weight == "undefined" || item.weight == null || item.weight === "") {
+                item.weight = 100;
+            }
+        }
+    }
+
+    vm.provinceOptions = ["默认"];
+    vm.countryOptions = ["默认"];
+
+    vm.refreshProvinceOptions = function () {
+        var provinces = vm.chinaRegionProvinces[vm.record.lineRegion];
+        if (!Array.isArray(provinces) || provinces.length == 0) {
+            provinces = ["默认"];
+        }
+        vm.provinceOptions = provinces;
+        if (vm.provinceOptions.indexOf(vm.record.lineProvince) < 0) {
+            vm.record.lineProvince = vm.provinceOptions[0];
+        }
+    };
+
+    vm.refreshCountryOptions = function () {
+        var countries = vm.continentCountries[vm.record.lineContinent];
+        if (!Array.isArray(countries) || countries.length == 0) {
+            countries = ["默认"];
+        }
+        vm.countryOptions = countries;
+        if (vm.countryOptions.indexOf(vm.record.lineCountry) < 0) {
+            vm.record.lineCountry = vm.countryOptions[0];
+        }
+    };
+
+    vm.onChinaRegionChange = function () {
+        vm.refreshProvinceOptions();
+    };
+
+    vm.onContinentChange = function () {
+        vm.refreshCountryOptions();
+    };
+
+    vm.onLineScopeChange = function () {
+        if (vm.record.lineScope == "overseas") {
+            vm.record.lineContinent = vm.record.lineContinent || "默认";
+            vm.refreshCountryOptions();
+        } else {
+            vm.record.lineCarrier = vm.record.lineCarrier || "默认";
+            vm.record.lineRegion = vm.record.lineRegion || "默认";
+            vm.refreshProvinceOptions();
+        }
+    };
+
+    vm.addSDNSParam = function () {
+        if (vm.sdnsParams.length >= 10) {
+            return;
+        }
+        vm.sdnsParams.push({name: "", value: ""});
+    };
+
+    vm.removeSDNSParam = function (index) {
+        if (index < 0 || index >= vm.sdnsParams.length) {
+            return;
+        }
+        vm.sdnsParams.splice(index, 1);
+        if (vm.sdnsParams.length == 0) {
+            vm.sdnsParams.push({name: "", value: ""});
+        }
+    };
+
+    vm.addRecordItem = function () {
+        if (vm.recordItems.length >= 10) {
+            return;
+        }
+        vm.recordItems.push({type: "A", value: "", weight: 100});
+    };
+
+    vm.removeRecordItem = function (index) {
+        if (index < 0 || index >= vm.recordItems.length) {
+            return;
+        }
+        vm.recordItems.splice(index, 1);
+        if (vm.recordItems.length == 0) {
+            vm.recordItems.push({type: "A", value: "", weight: 100});
+        }
+    };
+
+    vm.onLineScopeChange();
+});

EdgeAdmin/web/views/@default/httpdns/apps/domains.html

@@ -0,0 +1,35 @@
+{$layout}
+{$template "menu"}
+
+<div>
+    <div class="ui menu text blue">
+        <div class="item"><strong>{{app.name}}</strong> (<code>{{app.appId}}</code>)</div>
+    </div>
+    <div class="ui divider"></div>
+
+    <a href="" @click.prevent="bindDomain" class="ui button primary small"><i class="icon plus"></i>添加域名</a>
+
+    <table class="ui table selectable celled" v-if="domains.length > 0" style="margin-top: 1em;">
+        <thead>
+            <tr>
+                <th>域名列表</th>
+                <th class="two wide">规则策略</th>
+                <th class="two op">操作</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="domain in domains">
+                <td><strong>{{domain.name}}</strong></td>
+                <td>
+                    <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">{{domain.customRecordCount}}</a>
+                </td>
+                <td>
+                    <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">自定义解析</a> &nbsp;|&nbsp;
+                    <a href="" @click.prevent="deleteDomain(domain.id)">解绑</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <p class="ui message" v-if="domains.length == 0">该应用尚未绑定域名。</p>
+</div>

EdgeAdmin/web/views/@default/httpdns/apps/domains.js

@@ -0,0 +1,24 @@
+Tea.context(function () {
+    if (typeof this.domains == "undefined") {
+        this.domains = [];
+    }
+
+    this.bindDomain = function () {
+        teaweb.popup("/httpdns/apps/domains/createPopup?appId=" + this.app.id, {
+            height: "24em",
+            width: "46em",
+            title: "添加域名"
+        });
+    };
+
+    this.deleteDomain = function (domainId) {
+        let that = this;
+        teaweb.confirm("确定要解绑这个域名吗？", function () {
+            that.$post("/httpdns/apps/domains/delete")
+                .params({
+                    domainId: domainId
+                })
+                .refresh();
+        });
+    };
+});

EdgeAdmin/web/views/@default/httpdns/apps/domainsCreatePopup.html

@@ -0,0 +1,17 @@
+{$layout "layout_popup"}
+
+<h3>添加域名</h3>
+
+<form method="post" class="ui form" data-tea-action="$">
+    <csrf-token></csrf-token>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">域名 *</td>
+            <td>
+                <input type="text" name="domain" maxlength="255" placeholder="api.example.com" ref="focus" />
+                <p class="comment">请输入完整 FQDN，例如 <code>api.example.com</code>。</p>
+            </td>
+        </tr>
+    </table>
+    <submit-btn></submit-btn>
+</form>

EdgeAdmin/web/views/@default/httpdns/apps/index.html

@@ -0,0 +1,53 @@
+{$layout}
+{$template "menu"}
+
+<div>
+    <form method="get" class="ui form" action="/httpdns/apps">
+        <div class="ui fields inline">
+            <div class="ui field">
+                <input type="text" name="keyword" style="width:16em" placeholder="AppID 或应用名称..." :value="keyword" />
+            </div>
+            <div class="ui field">
+                <button type="submit" class="ui button">查询</button>
+                <a href="/httpdns/apps" v-if="keyword.length > 0">[清除条件]</a>
+            </div>
+        </div>
+    </form>
+
+    <p class="ui message" v-if="apps.length == 0">暂时没有符合条件的 HTTPDNS 应用。</p>
+
+    <table class="ui table selectable celled" v-if="apps.length > 0">
+        <thead>
+            <tr>
+                <th>应用名称</th>
+                <th>AppID</th>
+                <th>绑定域名数</th>
+                <th class="one wide center">状态</th>
+                <th class="tz op">操作</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="app in apps">
+                <td>
+                    <a :href="'/httpdns/apps/app?appId=' + app.id">
+                        <strong><keyword :v-word="keyword">{{app.name}}</keyword></strong>
+                    </a>
+                </td>
+                <td>
+                    <code>{{app.appId}}</code>
+                    <copy-icon :text="app.appId"></copy-icon>
+                </td>
+                <td><a :href="'/httpdns/apps/domains?appId=' + app.id">{{app.domainCount}}</a></td>
+                <td class="center">
+                    <label-on :v-is-on="app.isOn"></label-on>
+                </td>
+                <td>
+                    <a :href="'/httpdns/apps/app?appId=' + app.id">域名管理</a> &nbsp;|&nbsp;
+                    <a :href="'/httpdns/apps/app/settings?appId=' + app.id">应用设置</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <div class="page" v-html="page"></div>
+</div>

EdgeAdmin/web/views/@default/httpdns/apps/index.js

@@ -0,0 +1,13 @@
+Tea.context(function () {
+    if (typeof this.apps == "undefined") {
+        this.apps = [];
+    }
+
+    this.createApp = function () {
+        teaweb.popup("/httpdns/apps/createPopup", {
+            height: "26em",
+            width: "48em",
+            title: "添加应用"
+        });
+    };
+});

EdgeAdmin/web/views/@default/httpdns/apps/policies.html

@@ -0,0 +1,78 @@
+{$layout}
+{$template "menu"}
+
+<div class="ui margin"></div>
+
+<h3 class="ui header">HTTPDNS 鍏ㄥ眬绛栫暐</h3>
+
+<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+    <csrf-token></csrf-token>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">鍏ㄥ眬榛樿瑙ｆ瀽 TTL</td>
+            <td><input type="text" name="defaultTTL" maxlength="8" v-model="policies.defaultTTL" /> 绉?/td>
+        </tr>
+        <tr>
+            <td class="title">鍏ㄥ眬榛樿 SNI 绛夌骇</td>
+            <td>
+                <select name="defaultSniPolicy" class="ui dropdown auto-width" v-model="policies.defaultSniPolicy">
+                    <option value="level1">level1锛堝浐瀹?SNI锛?/option>
+                    <option value="level2">level2锛堥殣鍖?SNI锛?/option>
+                    <option value="level3">level3锛圗CH锛?/option>
+                </select>
+                <div class="grey small" v-if="policies.defaultSniPolicy == 'level1'" style="margin-top:.5em;">
+                    level1 浠呬娇鐢ㄥ浐瀹?SNI锛屼笉鍚敤 ECS 鍜岃瘉涔︽牎楠岀瓥鐣ャ€?                </div>
+                <div class="grey small" v-else-if="policies.defaultSniPolicy == 'level2'" style="margin-top:.5em;">
+                    level2 浠呭惎鐢ㄩ殣鍖?SNI锛屼笉瑕佹眰閰嶇疆 ECS 涓庤瘉涔︾瓥鐣ャ€?                </div>
+                <div class="grey small" v-else style="margin-top:.5em;">
+                    level3 鍚敤 ECH锛屽缓璁悓鏃堕厤缃?ECS 涓庤瘉涔︽牎楠岀瓥鐣ャ€?                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="title">鍏ㄥ眬闄嶇骇瓒呮椂</td>
+            <td><input type="text" name="defaultFallbackMs" maxlength="8" v-model="policies.defaultFallbackMs" /> 姣</td>
+        </tr>
+
+        <tr v-show="policies.defaultSniPolicy == 'level3'">
+            <td class="title">全局 ECS 掩码策略</td>
+            <td>
+                <select name="ecsMode" class="ui dropdown auto-width" v-model="policies.ecsMode">
+                    <option value="off">鍏抽棴</option>
+                    <option value="auto">鑷姩</option>
+                    <option value="custom">鑷畾涔?/option>
+                </select>
+                <span v-if="policies.ecsMode == 'custom'">
+                    <span class="grey" style="margin-left:.8em;">IPv4 /</span>
+                    <input type="text" name="ecsIPv4Prefix" maxlength="3" v-model="policies.ecsIPv4Prefix" style="width:4.5em;" />
+                    <span class="grey" style="margin-left:.8em;">IPv6 /</span>
+                    <input type="text" name="ecsIPv6Prefix" maxlength="3" v-model="policies.ecsIPv6Prefix" style="width:4.5em;" />
+                </span>
+                <span v-else class="grey" style="margin-left:.8em;">仅在“自定义”模式下配置掩码。</span>
+
+                <input type="hidden" name="ecsIPv4Prefix" v-model="policies.ecsIPv4Prefix" v-if="policies.ecsMode != 'custom'" />
+                <input type="hidden" name="ecsIPv6Prefix" v-model="policies.ecsIPv6Prefix" v-if="policies.ecsMode != 'custom'" />
+            </td>
+        </tr>
+
+        <tr v-show="policies.defaultSniPolicy == 'level3'">
+            <td class="title">鍏ㄥ眬璇佷功鏍￠獙绛栫暐</td>
+            <td>
+                <span class="grey">证书指纹校验（Pinning）</span>
+                <select name="pinningMode" class="ui dropdown auto-width" v-model="policies.pinningMode" style="margin-left:.4em;">
+                    <option value="off">鍏抽棴</option>
+                    <option value="report">瑙傚療妯″紡</option>
+                    <option value="enforce">寮哄埗鏍￠獙</option>
+                </select>
+                <span class="grey" style="margin-left:1.2em;">证书 SAN 域名校验</span>
+                <select name="sanMode" class="ui dropdown auto-width" v-model="policies.sanMode" style="margin-left:.4em;">
+                    <option value="off">鍏抽棴</option>
+                    <option value="report">瑙傚療妯″紡</option>
+                    <option value="strict">涓ユ牸鏍￠獙</option>
+                </select>
+            </td>
+        </tr>
+    </table>
+
+    <submit-btn></submit-btn>
+</form>
+

EdgeAdmin/web/views/@default/httpdns/apps/policies.js

@@ -0,0 +1,40 @@
+Tea.context(function () {
+    this.success = NotifyReloadSuccess("保存成功");
+
+    this.$delay(function () {
+        this.$watch("policies.defaultSniPolicy", function (level) {
+            if (level == "level1" || level == "level2") {
+                this.policies.ecsMode = "off";
+                this.policies.pinningMode = "off";
+                this.policies.sanMode = "off";
+                return;
+            }
+
+            if (level == "level3") {
+                if (this.policies.ecsMode == "off") {
+                    this.policies.ecsMode = "auto";
+                }
+                if (this.policies.pinningMode == "off") {
+                    this.policies.pinningMode = "report";
+                }
+                if (this.policies.sanMode == "off") {
+                    this.policies.sanMode = "strict";
+                }
+            }
+        });
+
+        this.$watch("policies.ecsMode", function (mode) {
+            if (this.policies.defaultSniPolicy != "level3") {
+                return;
+            }
+            if (mode == "custom") {
+                if (!this.policies.ecsIPv4Prefix || this.policies.ecsIPv4Prefix <= 0) {
+                    this.policies.ecsIPv4Prefix = 24;
+                }
+                if (!this.policies.ecsIPv6Prefix || this.policies.ecsIPv6Prefix <= 0) {
+                    this.policies.ecsIPv6Prefix = 56;
+                }
+            }
+        });
+    });
+});