前端页面

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

@@ -0,0 +1,4 @@
+<!-- 左侧菜单由 Go Backend 自动生成注入，此处加首行子菜单使其符合标准平台样式 -->
+<first-menu>
+    <menu-item href="/httpdns/ech" code="index">ECH 控制台</menu-item>
+</first-menu>

EdgeAdmin/web/views/@default/httpdns/ech/audit.html

@@ -0,0 +1,26 @@
+{$layout}
+{$template "menu"}
+{$template "/left_menu_with_menu"}
+
+<div class="right-box with-menu">
+    <h3 class="ui header">ECH Degrade Audit Logs</h3>
+
+    <table class="ui table selectable celled">
+        <thead>
+            <tr>
+                <th>Scope</th>
+                <th>Operator</th>
+                <th>Result</th>
+                <th>Time</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="item in auditLogs">
+                <td>{{item.scope}}</td>
+                <td>{{item.operator}}</td>
+                <td>{{item.result}}</td>
+                <td>{{item.createdAt}}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,69 @@
+{$layout}
+{$template "menu"}
+
+<div>
+    <div class="ui grid">
+        <div class="eight wide column">
+            <div class="ui segment center aligned"
+                :class="{'green inverted': health.keySyncRate >= 0.99, 'red inverted': health.keySyncRate < 0.99}">
+                <h2>全网私钥热加载成功率</h2>
+                <div style="font-size: 3em; font-weight: bold; margin-bottom: 0.2rem;">{{ (health.keySyncRate *
+                    100).toFixed(2) }}%</div>
+            </div>
+        </div>
+        <div class="eight wide column">
+            <div class="ui segment center aligned"
+                :class="{'green inverted': health.decryptFailRate <= 0.001, 'red inverted': health.decryptFailRate > 0.001}">
+                <h2>全网 ECH 解密失败阻断率</h2>
+                <div style="font-size: 3em; font-weight: bold; margin-bottom: 0.2rem;">{{ (health.decryptFailRate *
+                    100).toFixed(4) }}%</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="ui margin"></div>
+
+    <div class="ui menu text blue">
+        <a href="/httpdns/ech" class="item active">生产证书轮换日志</a>
+        <a href="/httpdns/ech/audit" class="item">降级操作审计</a>
+    </div>
+    <div class="ui divider"></div>
+
+    <table class="ui table selectable celled" v-if="echLogs.length > 0">
+        <thead>
+            <tr>
+                <th>发行版本号</th>
+                <th>记录分发类型</th>
+                <th>公钥</th>
+                <th>发布时间</th>
+                <th class="three wide">边缘扩散状态</th>
+                <th class="twz op">受控回落通道</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="log in echLogs">
+                <td><strong>{{log.version}}</strong><span v-if="log.isCurrent"
+                        class="ui label tiny blue margin-left-sm">当前生效</span></td>
+                <td><span class="ui label tiny basic">{{log.recordType}}</span></td>
+                <td>
+                    <div style="word-break: break-all; font-family: monospace; font-size: 0.9em; color:#666;"
+                        :title="log.publicKey">
+                        {{log.publicKey.substring(0,30)}}...{{log.publicKey.substring(log.publicKey.length-10)}}
+                    </div>
+                </td>
+                <td>{{log.publishTime}}</td>
+                <td>
+                    <span v-if="log.syncStatus === 'success'" class="green">100% 同步</span>
+                    <span v-else-if="log.syncStatus === 'syncing'" class="orange">正在扩散到 {{log.nodesPending}}
+                        节点</span>
+                    <span v-else-if="log.syncStatus === 'timeout'" class="red">部分节点超时</span>
+                </td>
+                <td>
+                    <a href="" @click.prevent="openMfaRollback(log.id)" v-if="log.isCurrent" style="color:red">回滚降级
+                        (MFA验证)</a>
+                    <span class="disabled" v-else>-</span>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,20 @@
+Tea.context(function () {
+    if (typeof this.health == "undefined") {
+        this.health = {
+            keySyncRate: 1.0,
+            decryptFailRate: 0.0
+        };
+    }
+
+    if (typeof this.echLogs == "undefined") {
+        this.echLogs = [];
+    }
+
+    this.openMfaRollback = function (logId) {
+        teaweb.popup("/httpdns/ech/rollbackMfaPopup?logId=" + logId, {
+            height: "26em",
+            width: "48em",
+            title: "全域安全受控降级告警：双人MFA授权"
+        })
+    };
+});

EdgeAdmin/web/views/@default/httpdns/ech/rollbackMfaPopup.html

@@ -0,0 +1,27 @@
+{$layout "layout_popup"}
+
+<h3>受控 ECH 回滚降级</h3>
+
+<form method="post" class="ui form" data-tea-action="$">
+    <input type="hidden" name="logId" :value="logId" />
+    <csrf-token></csrf-token>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">日志编号</td>
+            <td><code>{{logId}}</code></td>
+        </tr>
+        <tr>
+            <td class="title">回滚原因 *</td>
+            <td><textarea name="reason" rows="3" ref="focus"></textarea></td>
+        </tr>
+        <tr>
+            <td class="title">审批人 OTP 验证码 #1 *</td>
+            <td><input type="text" name="otpCode1" maxlength="16" /></td>
+        </tr>
+        <tr>
+            <td class="title">审批人 OTP 验证码 #2 *</td>
+            <td><input type="text" name="otpCode2" maxlength="16" /></td>
+        </tr>
+    </table>
+    <submit-btn></submit-btn>
+</form>