前端页面
This commit is contained in:
robin
4
EdgeAdmin/web/views/@default/httpdns/guide/@menu.html
Normal file
4
EdgeAdmin/web/views/@default/httpdns/guide/@menu.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<!-- 左侧菜单由 Go Backend 自动生成注入，此处加首行子菜单使其符合标准平台样式 -->
|
||||
<first-menu>
|
||||
<menu-item href="/httpdns/guide" code="index">SDK接入向导</menu-item>
|
||||
</first-menu>
|
||||
155
EdgeAdmin/web/views/@default/httpdns/guide/index.html
Normal file
155
EdgeAdmin/web/views/@default/httpdns/guide/index.html
Normal file
@@ -0,0 +1,155 @@
|
||||
{$layout}
|
||||
{$template "menu"}
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div class="ui form" style="margin-bottom: 1.5em;">
|
||||
<div class="ui fields inline">
|
||||
<div class="field">
|
||||
<label style="font-weight: 600;">目标应用</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<select class="ui dropdown auto-width" v-model="selectedAppId" @change="onAppChange">
|
||||
<option value="">[请选择应用]</option>
|
||||
<option v-for="app in apps" :value="app.appId">{{app.name}} ({{app.appId}})</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="selectedAppId.length == 0" class="ui segment center aligned" style="padding:4em 1em; color:#999;">
|
||||
<i class="icon cogs" style="font-size:3em;"></i>
|
||||
<p style="margin-top:1em; font-size:1.1em;">请先选择应用，然后查看配置并完成 SDK 接入。</p>
|
||||
</div>
|
||||
|
||||
<div v-show="selectedAppId.length > 0">
|
||||
<div class="ui two steps mini" style="margin-bottom: 0;">
|
||||
<a class="step" :class="{active: currentStep == 1}" @click.prevent="currentStep=1">
|
||||
<i class="icon file alternate outline"></i>
|
||||
<div class="content">
|
||||
<div class="title">01 查看配置</div>
|
||||
<div class="description">查看 SDK 初始化参数</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="step" :class="{active: currentStep == 2}" @click.prevent="currentStep=2">
|
||||
<i class="icon code"></i>
|
||||
<div class="content">
|
||||
<div class="title">02 开发接入</div>
|
||||
<div class="description">下载 SDK 并集成项目</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ui segment" v-show="currentStep == 1"
|
||||
style="border-top:none; margin-top:0; border-top-left-radius:0; border-top-right-radius:0;">
|
||||
<h4 class="ui header">查看配置</h4>
|
||||
<table class="ui table definition">
|
||||
<tr>
|
||||
<td class="four wide">App ID</td>
|
||||
<td>
|
||||
<code>{{selectedApp.appId}}</code>
|
||||
<a href="" class="httpdns-mini-action" title="复制 App ID" @click.prevent="copyText(selectedApp.appId, 'App ID')"><i class="copy outline icon"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>应用名称</td>
|
||||
<td><strong>{{selectedApp.name}}</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>集群服务地址</td>
|
||||
<td>
|
||||
<code>{{selectedApp.gatewayDomain}}</code>
|
||||
<a href="" class="httpdns-mini-action" title="复制服务地址" @click.prevent="copyText(selectedApp.gatewayDomain, '服务地址')"><i class="copy outline icon"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加签 Secret</td>
|
||||
<td>
|
||||
<code>{{signSecretVisible ? selectedApp.signSecret : selectedApp.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="copyText(selectedApp.signSecret, '加签 Secret')"><i class="copy outline icon"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>AES 数据加密 Secret</td>
|
||||
<td>
|
||||
<code>{{aesSecretVisible ? selectedApp.aesSecret : selectedApp.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="copyText(selectedApp.aesSecret, 'AES Secret')"><i class="copy outline icon"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>请求验签</td>
|
||||
<td>
|
||||
<span class="green" v-if="selectedApp.signEnabled">已开启</span>
|
||||
<span class="grey" v-else>已关闭</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<a href="" class="ui button small" @click.prevent="currentStep=2">
|
||||
下一步 <i class="icon arrow right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ui segment" v-show="currentStep == 2"
|
||||
style="border-top:none; margin-top:0; border-top-left-radius:0; border-top-right-radius:0;">
|
||||
<h4 class="ui header">开发接入</h4>
|
||||
<p class="grey">选择对应平台 SDK 下载并查阅集成文档。</p>
|
||||
|
||||
<div class="ui three cards" style="margin-top: 1.5em;">
|
||||
<div class="card">
|
||||
<div class="content">
|
||||
<div class="header"><i class="icon android green"></i> Android SDK</div>
|
||||
<div class="description" style="margin-top:.5em;">
|
||||
适用于 Android 5.0+ 的原生 SDK，支持 Java / Kotlin。
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<a class="ui button primary mini"><i class="icon download"></i> 下载 SDK</a>
|
||||
<a class="ui button basic mini"><i class="icon book"></i> 集成帮助文档</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="content">
|
||||
<div class="header"><i class="icon apple grey"></i> iOS SDK</div>
|
||||
<div class="description" style="margin-top:.5em;">
|
||||
适用于 iOS 12+ 的原生 SDK，支持 Swift / Objective-C。
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<a class="ui button primary mini"><i class="icon download"></i> 下载 SDK</a>
|
||||
<a class="ui button basic mini"><i class="icon book"></i> 集成帮助文档</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="content">
|
||||
<div class="header"><i class="icon mobile alternate blue"></i> Flutter SDK</div>
|
||||
<div class="description" style="margin-top:.5em;">
|
||||
跨平台 Flutter 插件，同时支持 Android 和 iOS。
|
||||
</div>
|
||||
</div>
|
||||
<div class="extra content">
|
||||
<a class="ui button primary mini"><i class="icon download"></i> 下载 SDK</a>
|
||||
<a class="ui button basic mini"><i class="icon book"></i> 集成帮助文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
75
EdgeAdmin/web/views/@default/httpdns/guide/index.js
Normal file
75
EdgeAdmin/web/views/@default/httpdns/guide/index.js
Normal file
@@ -0,0 +1,75 @@
|
||||
Tea.context(function () {
|
||||
this.selectedAppId = ""
|
||||
this.selectedApp = {}
|
||||
this.currentStep = 1
|
||||
this.signSecretVisible = false
|
||||
this.aesSecretVisible = false
|
||||
|
||||
if (typeof this.apps == "undefined") {
|
||||
this.apps = []
|
||||
}
|
||||
|
||||
this.onAppChange = function () {
|
||||
if (this.selectedAppId.length == 0) {
|
||||
this.selectedApp = {}
|
||||
return
|
||||
}
|
||||
|
||||
for (var i = 0; i < this.apps.length; i++) {
|
||||
if (this.apps[i].appId == this.selectedAppId) {
|
||||
this.selectedApp = this.apps[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!this.selectedApp.gatewayDomain || this.selectedApp.gatewayDomain.length == 0) {
|
||||
this.selectedApp.gatewayDomain = "gw.httpdns.example.com"
|
||||
}
|
||||
|
||||
this.signSecretVisible = false
|
||||
this.aesSecretVisible = false
|
||||
this.currentStep = 1
|
||||
}
|
||||
|
||||
this.copyText = 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) {
|
||||
var 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()
|
||||
|
||||
var ok = false
|
||||
try {
|
||||
ok = document.execCommand("copy")
|
||||
} catch (e) {
|
||||
ok = false
|
||||
}
|
||||
document.body.removeChild(input)
|
||||
|
||||
if (ok) {
|
||||
teaweb.success(name + "已复制")
|
||||
} else {
|
||||
teaweb.warn("复制失败，请手动复制")
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user