TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2026-01-06 12:05:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加API节点安装配置界面

Browse Source
This commit is contained in:
GoEdgeLab
2020-10-11 10:51:13 +08:00
parent 32ac0d62d3
commit 36f7c292ea
34 changed files with 553 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/views/@default/@layout.css
View File

@@ -354,6 +354,8 @@ body.expanded .main {
.main .tab-menu {
margin-top: 1em !important;
margin-bottom: 0 !important;
overflow-x: auto;
overflow-y: hidden;
}
.main .tab-menu .item {
padding: 1em !important;
@@ -365,14 +367,11 @@ body.expanded .main {
font-size: 0.8em;
padding-left: 0.3em;
}
@media screen and (max-width: 512px) {
.main .tab-menu {
overflow-x: auto;
overflow-y: hidden;
}
.main .tab-menu::-webkit-scrollbar {
height: 4px;
}
.main .tab-menu .item .icon {
margin-left: 0.6em;
}
.main .tab-menu::-webkit-scrollbar {
height: 4px;
}
.main .go-top-btn {
position: fixed;

2
web/views/@default/@layout.css.map
View File

File diff suppressed because one or more lines are too long

2
web/views/@default/@layout.html
View File

@@ -76,7 +76,7 @@
<!-- 操作菜单 -->
<div class="ui top menu tabular tab-menu small" v-if="teaTabbar.length > 0">
<a class="item" v-for="item in teaTabbar" :class="{'active':item.active,right:item.right}" :href="item.url">
<var>{{item.name}}<span v-if="item.subName.length > 0">({{item.subName}})</span> &nbsp;<i class="icon small" :class="item.icon" v-if="item.icon != null"></i> </var>
<var>{{item.name}}<span v-if="item.subName.length > 0">({{item.subName}})</span><i class="icon small" :class="item.icon" v-if="item.icon != null && item.icon.length > 0"></i> </var>
</a>
</div>

43
web/views/@default/@layout.less
View File

@@ -341,35 +341,38 @@ body.expanded .main {
width: 2px;
}
.main .tab-menu {
margin-top: 1em !important;
margin-bottom: 0 !important;
}
.main {
.main .tab-menu .item {
padding: 1em !important;
}
.main .tab-menu .item var {
font-style: normal;
}
.main .tab-menu .item span {
font-size: 0.8em;
padding-left: 0.3em;
}
@media screen and (max-width: 512px) {
.main .tab-menu {
.tab-menu {
margin-top: 1em !important;
margin-bottom: 0 !important;
overflow-x: auto;
overflow-y: hidden;
.item {
padding: 1em !important;
var {
font-style: normal;
}
span {
font-size: 0.8em;
padding-left: 0.3em;
}
.icon {
margin-left: 0.6em;
}
}
}
.main .tab-menu::-webkit-scrollbar {
.tab-menu::-webkit-scrollbar {
height: 4px;
}
}
.main .go-top-btn {
position: fixed;
right: 2.6em;

2
web/views/@default/api/index.html
View File

@@ -26,7 +26,7 @@
<label-on :v-is-on="node.isOn"></label-on>
</td>
<td>
<a :href="'/api/node/settings?nodeId=' + node.id">设置</a> &nbsp;
<a :href="'/api/node?nodeId=' + node.id">详情</a> &nbsp;
<a href="" @click.prevent="deleteNode(node.id)">删除</a>
</td>
</tr>

6
web/views/@default/api/node/@menu.html
View File

@@ -1,5 +1,7 @@
<first-menu>
<menu-item href="/api" code="index">节点列表</menu-item>
<menu-item href="/api">节点列表</menu-item>
<span class="item">|</span>
<menu-item :href="'/api/node/settings?nodeId=' + node.id" active="true">{{node.name}}</menu-item>
<menu-item :href="'/api/node?nodeId=' + node.id" code="index">"{{node.name}}"详情</menu-item>
<menu-item :href="'/api/node/update?nodeId=' + node.id" code="update">修改节点</menu-item>
<menu-item :href="'/api/node/install?nodeId=' + node.id" code="install">安装节点</menu-item>
</first-menu>

44
web/views/@default/api/node/index.html Normal file
View File

@@ -0,0 +1,44 @@
{$layout}
{$template "menu"}
<table class="ui table selectable definition">
<tr>
<td class="title">节点名称</td>
<td>
{{node.name}}
</td>
</tr>
<tr>
<td>状态</td>
<td>
<label-on :v-is-on="node.isOn"></label-on>
</td>
</tr>
<tr>
<td>进程监听端口</td>
<td>
<network-addresses-view :v-addresses="node.listens"></network-addresses-view>
<p class="comment">API节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="node.hasHTTPS">
<td>HTTPS证书</td>
<td>
<ssl-certs-view :v-certs="node.certs"></ssl-certs-view>
</td>
</tr>
<tr>
<td>外部访问地址</td>
<td>
<network-addresses-view :v-addresses="node.accessAddrs"></network-addresses-view>
<p class="comment">外部访问API节点的网络地址。</p>
</td>
</tr>
<tr>
<td>描述</td>
<td>
<span v-if="node.description.length > 0">{{node.description}}</span>
<span v-else class="disabled">暂时还没有描述。</span>
</td>
</tr>
</table>

33
web/views/@default/api/node/install.html Normal file
View File

@@ -0,0 +1,33 @@
{$layout}
{$template "menu"}
<h3>安装步骤</h3>
<ol class="ui list">
<li>按照下面的配置信息替换<code-label>configs/api.yaml</code-label>内容</li>
<li>按照下面的配置信息替换<code-label>configs/db.yaml</code-label>内容</li>
<li>使用<code-label>bin/edge-api start</code-label>启动节点</li>
<li>可以在<code-label>logs/run.log</code-label>中查看启动是否有异常</li>
</ol>
<div class="ui divider"></div>
<h3>配置信息</h3>
<table class="ui table definition selectable">
<tr>
<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
<td>
<pre id="api-code">nodeId: "{{node.uniqueId}}"
secret: "{{node.secret}}"</pre>
</td>
</tr>
<tr>
<td>configs/db.yaml<em><br/><download-link :v-element="'db-code'" :v-file="'db.yaml'">[下载]</download-link></em></td>
<td>
<span class="red" v-if="dbConfig.error.length > 0">
<span v-if="dbConfig.isNotFound">找不到数据库配置文件：configs/api_db.yaml ，请重新 <a href="/settings/database">[配置数据库]</a>：</span>
<span v-else class="red">无法生成配置内容，错误原因：</span>
{{dbConfig.error}}
</span>
<pre v-show="dbConfig.config.length > 0" id="db-code">{{dbConfig.config}}</pre>
</td>
</tr>
</table>

61
web/views/@default/api/node/settings.html
View File

@@ -1,61 +0,0 @@
{$layout}
{$template "/left_menu"}
<div class="right-box">
{$template "menu"}
<form class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="nodeId" :value="node.id"/>
<input type="hidden" name="sslPolicyId" :value="node.sslPolicyId"/>
<table class="ui table selectable definition">
<tr>
<td class="title">节点名称 *</td>
<td>
<input type="text" name="name" maxlength="100" ref="focus" v-model="node.name"/>
</td>
</tr>
<tr>
<td>进程监听端口 *</td>
<td>
<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" :v-addresses="node.listens" @change="changeListens"></network-addresses-box>
<p class="comment">API节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="hasHTTPS">
<td>HTTPS证书 *</td>
<td>
<ssl-certs-box :v-certs="node.certs" :v-protocol="'https'"></ssl-certs-box>
</td>
</tr>
<tr>
<td>外部访问地址 *</td>
<td>
<api-node-addresses-box :v-name="'accessAddrsJSON'" :v-addrs="node.accessAddrs"></api-node-addresses-box>
<p class="comment">外部访问API节点的网络地址。</p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td>描述</td>
<td>
<textarea name="description" maxlength="200" rows="3" v-model="node.description"></textarea>
</td>
</tr>
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isOn" value="1" v-model="node.isOn"/>
<label></label>
</div>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>
</div>

58
web/views/@default/api/node/update.html Normal file
View File

@@ -0,0 +1,58 @@
{$layout}
{$template "menu"}
<form class="ui form" data-tea-action="$" data-tea-success="success">
<input type="hidden" name="nodeId" :value="node.id"/>
<input type="hidden" name="sslPolicyId" :value="node.sslPolicyId"/>
<table class="ui table selectable definition">
<tr>
<td class="title">节点名称 *</td>
<td>
<input type="text" name="name" maxlength="100" ref="focus" v-model="node.name"/>
</td>
</tr>
<tr>
<td>进程监听端口 *</td>
<td>
<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" :v-addresses="node.listens" @change="changeListens"></network-addresses-box>
<p class="comment">API节点进程监听的网络端口。</p>
</td>
</tr>
<tr v-if="hasHTTPS">
<td>HTTPS证书 *</td>
<td>
<ssl-certs-box :v-certs="node.certs" :v-protocol="'https'"></ssl-certs-box>
</td>
</tr>
<tr>
<td>外部访问地址 *</td>
<td>
<api-node-addresses-box :v-name="'accessAddrsJSON'" :v-addrs="node.accessAddrs"></api-node-addresses-box>
<p class="comment">外部访问API节点的网络地址。</p>
</td>
</tr>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
<tbody v-show="moreOptionsVisible">
<tr>
<td>描述</td>
<td>
<textarea name="description" maxlength="200" rows="3" v-model="node.description"></textarea>
</td>
</tr>
<tr>
<td>是否启用</td>
<td>
<div class="ui checkbox">
<input type="checkbox" name="isOn" value="1" v-model="node.isOn"/>
<label></label>
</div>
</td>
</tr>
</tbody>
</table>
<submit-btn></submit-btn>
</form>

2
web/views/@default/api/node/settings.js → web/views/@default/api/node/update.js
View File

@@ -1,5 +1,5 @@
Tea.context(function () {
this.success = NotifySuccess("保存成功", "/api/node/settings?nodeId=" + this.node.id)
this.success = NotifySuccess("保存成功", "/api/node?nodeId=" + this.node.id)
this.hasHTTPS = this.node.listens.$any(function (k, v) {
return v.protocol == "https"

5
web/views/@default/servers/addPortPopup.html
View File

@@ -1,6 +1,7 @@
{$layout "layout_popup"}
<h3>添加端口绑定</h3>
<h3 v-if="!isUpdating">添加端口绑定</h3>
<h3 v-if="isUpdating">修改端口绑定</h3>
<form class="ui form" data-tea-action="$" data-tea-success="success">
<table class="ui table definition selectable">
<tr>
@@ -14,7 +15,7 @@
<tr>
<td class="title">端口</td>
<td>
<input type="text" name="address" ref="focus"/>
<input type="text" name="address" ref="focus" v-model="address"/>
<p class="comment">可以是一个数字端口（通常不超过65535），也可以是"地址:端口"的方式。</p>
</td>
</tr>

16
web/views/@default/servers/addPortPopup.js
View File

@@ -1,3 +1,19 @@
Tea.context(function () {
this.success = NotifyPopup;
this.isUpdating = false
this.address = ""
this.protocol = this.protocols[0].code
if (window.parent.UPDATING_ADDR != null) {
this.isUpdating = true
let addr = window.parent.UPDATING_ADDR
this.protocol = addr.protocol
if (addr.host.length == 0) {
this.address = addr.portRange
} else {
this.address = addr.host + ":" + addr.portRange
}
}
});

3
web/views/@default/settings/database/index.html Normal file
View File

@@ -0,0 +1,3 @@
{$layout}
<p class="comment">此功能暂未开放，敬请期待。</p>