带阿里标识的版本
This commit is contained in:
robin
147
EdgeUser/web/views/@default/httpdns/sandbox/index.html
Normal file
147
EdgeUser/web/views/@default/httpdns/sandbox/index.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user