带阿里标识的版本

EdgeUser/web/views/@default/httpdns/sandbox/@menu.html

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

EdgeUser/web/views/@default/httpdns/sandbox/index.html

@@ -0,0 +1,147 @@
+{$layout}
+
+<div class="ui margin"></div>
+
+<div>
+    <div class="ui grid stackable">
+        <!-- Left: 解析测试 -->
+        <div class="six wide column">
+            <div class="ui segment">
+                <h4 class="ui header" style="margin-top:0;">解析测试</h4>
+                <div class="ui form">
+                    <div class="field">
+                        <label>目标应用 *</label>
+                        <select class="ui dropdown" name="appId" v-model="request.appId" @change="onAppChanged">
+                            <option value="">[请选择应用]</option>
+                            <option v-for="app in apps" :value="app.appId">{{app.name}} ({{app.appId}})</option>
+                        </select>
+                    </div>
+                    <div class="field">
+                        <label>HTTPDNS服务域名 *</label>
+                        <select class="ui dropdown" name="clusterId" v-model="request.clusterId">
+                            <option value="">[请选择HTTPDNS服务域名]</option>
+                            <option v-for="cluster in currentClusters" :value="String(cluster.id)">{{cluster.displayName || cluster.name}}</option>
+                        </select>
+                    </div>
+                    <div class="field">
+                        <label>解析域名 *</label>
+                        <select class="ui dropdown" name="domain" v-model="request.domain">
+                            <option value="">[请选择域名]</option>
+                            <option v-for="domain in currentDomains" :value="domain">{{domain}}</option>
+                        </select>
+                    </div>
+                    <div class="field">
+                        <label>模拟客户端 IP</label>
+                        <input type="text" v-model="request.clientIp" placeholder="留空使用当前 IP" />
+                        <p class="comment">用于测试 ECS 掩码与区域调度效果。</p>
+                    </div>
+                    <div class="field">
+                        <label>解析类型</label>
+                        <div class="ui buttons mini">
+                            <button class="ui button" :class="{primary: request.qtype=='A'}"
+                                @click.prevent="request.qtype='A'" type="button">A</button>
+                            <button class="ui button" :class="{primary: request.qtype=='AAAA'}"
+                                @click.prevent="request.qtype='AAAA'" type="button">AAAA</button>
+                        </div>
+                    </div>
+
+                    <div class="ui divider"></div>
+
+                    <button class="ui button primary" type="button" @click.prevent="sendTestRequest"
+                        :class="{loading: isRequesting, disabled: isRequesting}">
+                        <i class="icon search"></i> 在线解析
+                    </button>
+                    <button class="ui button basic" type="button" @click.prevent="resetForm">重置</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right: 解析结果 -->
+        <div class="ten wide column">
+            <!-- Empty state -->
+            <div v-show="!response.hasResult && !isRequesting" class="ui segment placeholder">
+                <p class="grey" style="text-align:center;">请在左侧配置参数后点击「在线解析」。</p>
+            </div>
+
+            <!-- Loading -->
+            <div v-show="isRequesting" class="ui segment" style="min-height:200px;">
+                <div class="ui active dimmer">
+                    <div class="ui text loader">解析中...</div>
+                </div>
+            </div>
+
+            <!-- Result -->
+            <div v-show="response.hasResult && !isRequesting">
+                <!-- Status banner -->
+                <div class="ui message small" :class="{positive: response.code === 0, negative: response.code !== 0}">
+                    <div class="header">
+                        <span v-if="response.code === 0"><i class="icon check circle"></i> 解析成功</span>
+                        <span v-else><i class="icon times circle"></i> 解析失败 ({{response.code}})</span>
+                    </div>
+                    <p v-if="response.code !== 0">{{response.message}}</p>
+                    <p class="grey small" style="margin-top:.3em;">Request ID: <code>{{response.requestId}}</code></p>
+                </div>
+
+                <!-- Result details -->
+                <div v-if="response.code === 0 && response.data" style="margin-top: 1em;">
+                    <h5 class="ui header">解析结果</h5>
+                    <div class="ui segment" style="margin-top:.4em;">
+                        <div style="font-weight: 600; margin-bottom: .5em;">请求URL</div>
+                        <div style="word-break: break-all;">
+                            <code>{{response.data.request_url || '-'}}</code>
+                        </div>
+                    </div>
+
+                    <h5 class="ui header" style="margin-top:1.2em;">解析结果详情</h5>
+                    <div class="ui three column stackable grid" style="margin-top:0;">
+                        <div class="column">
+                            <div class="ui segment">
+                                <div class="grey">客户端 IP</div>
+                                <div style="margin-top:.4em;">
+                                    <code>{{response.data.client_ip || request.clientIp || '-'}}</code></div>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <div class="ui segment">
+                                <div class="grey">地区</div>
+                                <div style="margin-top:.4em;">{{response.data.client_region || '-'}}</div>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <div class="ui segment">
+                                <div class="grey">线路</div>
+                                <div style="margin-top:.4em;">{{response.data.line_name || '-'}}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- IP results table -->
+                    <h5 class="ui header" style="margin-top:1.2em;">解析记录</h5>
+                    <table class="ui table celled compact">
+                        <thead>
+                            <tr>
+                                <th>解析域名</th>
+                                <th>解析类型</th>
+                                <th>IP地址</th>
+                                <th>TTL</th>
+                                <th>地区</th>
+                                <th>线路</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(row, idx) in response.resultRows">
+                                <td v-if="idx === 0" :rowspan="response.resultRows.length">{{row.domain ||
+                                    request.domain}}</td>
+                                <td>{{row.type || request.qtype}}</td>
+                                <td><code>{{row.ip}}</code></td>
+                                <td>{{row.ttl}}s</td>
+                                <td>{{row.region || '-'}}</td>
+                                <td>{{row.line || '-'}}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

EdgeUser/web/views/@default/httpdns/sandbox/index.js

@@ -0,0 +1,161 @@
+Tea.context(function () {
+    this.newRequest = function () {
+        return {
+            appId: "",
+            clusterId: "",
+            domain: "",
+            clientIp: "",
+            qtype: "A"
+        }
+    }
+
+    this.request = this.newRequest()
+
+    this.response = {
+        hasResult: false,
+        code: -1,
+        message: "",
+        data: null,
+        requestId: "",
+        resultRows: []
+    }
+
+    this.isRequesting = false
+    this.currentDomains = []
+    this.currentClusters = []
+
+    if (typeof this.apps === "undefined" || this.apps == null) {
+        this.apps = []
+    }
+    if (typeof this.clusters === "undefined" || this.clusters == null) {
+        this.clusters = []
+    }
+
+    this.onAppChanged = function () {
+        let selectedApp = null
+        for (let i = 0; i < this.apps.length; i++) {
+            if (this.apps[i].appId === this.request.appId) {
+                selectedApp = this.apps[i]
+                break
+            }
+        }
+
+        if (selectedApp == null) {
+            this.currentDomains = []
+            this.currentClusters = []
+            this.request.domain = ""
+            this.request.clusterId = ""
+            return
+        }
+
+        this.currentDomains = Array.isArray(selectedApp.domains) ? selectedApp.domains : []
+
+        if (this.currentDomains.length > 0) {
+            if (this.currentDomains.indexOf(this.request.domain) < 0) {
+                this.request.domain = this.currentDomains[0]
+            }
+        } else {
+            this.request.domain = ""
+        }
+
+        let primaryClusterId = (typeof selectedApp.primaryClusterId !== "undefined" && selectedApp.primaryClusterId !== null) ? Number(selectedApp.primaryClusterId) : 0
+        let backupClusterId = (typeof selectedApp.backupClusterId !== "undefined" && selectedApp.backupClusterId !== null) ? Number(selectedApp.backupClusterId) : 0
+
+        let allowed = []
+        for (let i = 0; i < this.clusters.length; i++) {
+            let cluster = this.clusters[i]
+            let clusterId = Number(cluster.id)
+            if (clusterId <= 0) {
+                continue
+            }
+            if (clusterId === primaryClusterId || clusterId === backupClusterId) {
+                allowed.push(cluster)
+            }
+        }
+        this.currentClusters = allowed
+
+        if (allowed.length > 0) {
+            if (!allowed.some((c) => String(c.id) === String(this.request.clusterId))) {
+                this.request.clusterId = String(allowed[0].id)
+            }
+        } else {
+            this.request.clusterId = ""
+        }
+    }
+
+    this.normalizeResultRows = function (data) {
+        if (typeof data === "undefined" || data == null) {
+            return []
+        }
+
+        if (Array.isArray(data.records) && data.records.length > 0) {
+            return data.records
+        }
+
+        let rows = []
+        let ips = Array.isArray(data.ips) ? data.ips : []
+        let domain = this.request.domain
+        let qtype = this.request.qtype
+        let ttl = data.ttl || 0
+        let region = data.client_region || "-"
+        let line = data.line_name || "-"
+
+        ips.forEach(function (ip) {
+            rows.push({
+                domain: domain,
+                type: qtype,
+                ip: ip,
+                ttl: ttl,
+                region: region,
+                line: line
+            })
+        })
+
+        return rows
+    }
+
+    this.sendTestRequest = function () {
+        if (this.request.appId.length === 0) {
+            teaweb.warn("请选择目标应用")
+            return
+        }
+        if (this.request.clusterId.length === 0) {
+            teaweb.warn("当前应用未绑定可用的 HTTPDNS 服务域名，请先在应用设置中配置主/备集群")
+            return
+        }
+        if (this.request.domain.length === 0) {
+            teaweb.warn("请选择要解析的域名")
+            return
+        }
+
+        this.isRequesting = true
+        this.response.hasResult = false
+
+        let payload = Object.assign({}, this.request)
+
+        this.$post("/httpdns/sandbox/test")
+            .params(payload)
+            .success(function (resp) {
+                this.response = resp.data.result
+                this.response.hasResult = true
+                this.response.resultRows = this.normalizeResultRows(this.response.data)
+            })
+            .done(function () {
+                this.isRequesting = false
+            })
+    }
+
+    this.resetForm = function () {
+        this.request = this.newRequest()
+        this.currentDomains = []
+        this.currentClusters = []
+        this.response = {
+            hasResult: false,
+            code: -1,
+            message: "",
+            data: null,
+            requestId: "",
+            resultRows: []
+        }
+    }
+})