将API设置URL从/api改为/settings/api

web/views/@default/settings/api/index.html

@@ -0,0 +1,77 @@
+{$layout}
+
+<first-menu>
+	<a href="" class="item" @click.prevent="createNode()">[添加节点]</a>
+    <a href="/settings/api/methodStats" class="item" v-if="hasMethodStats">用时统计</a>
+</first-menu>
+
+<p class="comment" v-if="nodes.length == 0">暂时还没有节点。</p>
+
+<div class="table-box">
+    <table class="ui table selectable celled" v-if="nodes.length > 0">
+        <thead>
+            <tr>
+                <th>节点名称</th>
+                <th>GRPC访问地址</th>
+                <th>HTTP访问地址</th>
+                <th class="width6 center">版本号</th>
+                <th class="width5 center">CPU</th>
+                <th class="width5 center">内存</th>
+                <th class="center width10">状态</th>
+                <th class="two op">操作</th>
+            </tr>
+        </thead>
+        <tr v-for="node in nodes">
+            <td><a :href="'/settings/api/node?nodeId=' + node.id">{{node.name}}</a>
+                <div v-if="node.isPrimary">
+                    <grey-label v-if="node.isPrimary">主节点</grey-label>
+                </div>
+                <div v-if="node.status != null && node.status.shouldUpgrade">
+                    <span class="red small">v{{node.status.buildVersion}} -&gt; v{{node.status.latestVersion}}<br/><a href="" v-if="node.status.canUpgrade" @click.prevent="upgradeNode(node.id)">[远程升级]</a> </span>
+                </div>
+            </td>
+            <td>
+                <div v-if="node.accessAddrs != null && node.accessAddrs.length > 0">
+                    <div v-for="addr in node.accessAddrs">
+                        <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
+                    </div>
+                </div>
+                <div v-else class="disabled">-</div>
+            </td>
+            <td>
+                <div v-if="node.restAccessAddrs != null && node.restAccessAddrs.length > 0">
+                    <div v-for="addr in node.restAccessAddrs">
+                        <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
+                    </div>
+                </div>
+                <div v-else class="disabled">-</div>
+            </td>
+            <td class="center">
+                <span v-if="node.status.buildVersion.length > 0">v{{node.status.buildVersion}}</span>
+                <span v-else class="disabled">-</span>
+            </td>
+            <td class="center">
+                <span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.80}">{{node.status.cpuUsageText}}</span>
+                <span v-else class="disabled">-</span>
+            </td>
+            <td class="center">
+                <span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
+                <span v-else class="disabled">-</span>
+            </td>
+            <td class="center">
+                <span v-if="!node.isOn"><label-on :v-is-on="node.isOn"></label-on></span>
+                <div v-else-if="node.status.isActive">
+                    <span class="green">运行中</span>
+                </div>
+                <span v-else-if="node.status.updatedAt > 0" class="red">已断开</span>
+                <span v-else-if="node.status.updatedAt == 0" class="red">未连接</span>
+            </td>
+            <td>
+                <a :href="'/settings/api/node?nodeId=' + node.id">详情</a> &nbsp;
+                <a href="" @click.prevent="deleteNode(node.id)">删除</a>
+            </td>
+        </tr>
+    </table>
+</div>
+
+<div class="page" v-html="page"></div>

web/views/@default/settings/api/index.js

@@ -0,0 +1,35 @@
+Tea.context(function () {
+	// 创建节点
+	this.createNode = function () {
+		teaweb.popup(".node.createPopup", {
+			width: "50em",
+			height: "30em",
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
+	// 删除节点
+	this.deleteNode = function (nodeId) {
+		let that = this
+		teaweb.confirm("确定要删除此节点吗？", function () {
+			that.$post(".delete")
+				.params({
+					nodeId: nodeId
+				})
+				.refresh()
+		})
+	}
+
+	// 升级节点
+	this.upgradeNode = function (nodeId) {
+		teaweb.popup(".node.upgradePopup?nodeId=" + nodeId, {
+			onClose: function () {
+				teaweb.reload()
+			}
+		})
+	}
+})

web/views/@default/settings/api/methodStats.html

@@ -0,0 +1,46 @@
+{$layout}
+
+<div class="margin"></div>
+<form method="get" action="/settings/api/methodStats" class="ui form">
+    <div class="ui fields inline">
+        <div class="ui field">
+            <input type="text" name="method" v-model="method" placeholder="方法"/>
+        </div>
+        <div class="ui field">
+            <input type="text" name="tag" v-model="tag" placeholder="标签"/>
+        </div>
+        <div class="ui field">
+            <select class="ui dropdown auto-width" name="order" v-model="order">
+                <option value="">[排序]</option>
+                <option value="method">方法</option>
+                <option value="costMs.desc">平均耗时</option>
+                <option value="peekMs.desc">峰值耗时</option>
+                <option value="calls.desc">调用次数</option>
+            </select>
+        </div>
+        <div class="ui field">
+            <button class="ui button" type="submit">搜索</button>
+            &nbsp;
+            <a href="/settings/api/methodStats" v-if="method.length > 0 || tag.length > 0 || order.length > 0">清除条件</a>
+        </div>
+    </div>
+</form>
+
+<table class="ui table selectable celled">
+    <thead>
+        <tr>
+            <th>方法</th>
+            <th>标签</th>
+            <th>平均耗时</th>
+            <th>峰值耗时</th>
+            <td>调用次数</td>
+        </tr>
+    </thead>
+    <tr v-for="stat in stats">
+        <td>{{stat.method}}</td>
+        <td>{{stat.tag}}</td>
+        <td>{{stat.costMs}}ms</td>
+        <td>{{stat.peekMs}}ms</td>
+        <td>{{stat.countCalls}}次</td>
+    </tr>
+</table>

web/views/@default/settings/api/node/@menu.html

@@ -0,0 +1,8 @@
+<first-menu>
+	<menu-item href="/settings/api">节点列表</menu-item>
+	<span class="item">|</span>
+	<menu-item :href="'/settings/api/node?nodeId=' + node.id" code="index">"{{node.name}}"详情</menu-item>
+    <menu-item :href="'/settings/api/node/logs?nodeId=' + node.id" code="log">运行日志</menu-item>
+	<menu-item :href="'/settings/api/node/install?nodeId=' + node.id" code="install">安装节点</menu-item>
+	<menu-item :href="'/settings/api/node/update?nodeId=' + node.id" code="update">修改节点</menu-item>
+</first-menu>

web/views/@default/settings/api/node/createAddrPopup.html

@@ -0,0 +1,24 @@
+{$layout "layout_popup"}
+
+<h3>添加访问地址</h3>
+<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
+	<table class="ui table definition selectable">
+		<tr>
+			<td>网络协议</td>
+			<td>
+				<select class="ui dropdown auto-width" name="protocol">
+					<option value="http">HTTP</option>
+					<option value="https">HTTPS</option>
+				</select>
+			</td>
+		</tr>
+		<tr>
+			<td class="title">访问地址</td>
+			<td>
+				<input type="text" name="addr" maxlength="100" ref="focus"/>
+				<p class="comment">可以是"IP:端口"或者"域名:端口"。</p>
+			</td>
+		</tr>
+	</table>
+	<submit-btn></submit-btn>
+</form>

web/views/@default/settings/api/node/createPopup.html

@@ -0,0 +1,68 @@
+{$layout "layout_popup"}
+
+<h3>添加API节点</h3>
+<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
+	<table class="ui table selectable definition">
+		<tr>
+			<td class="title">节点名称 *</td>
+			<td>
+				<input type="text" name="name" maxlength="100" ref="focus"/>
+			</td>
+		</tr>
+		<tr>
+			<td>GRPC监听端口 *</td>
+			<td>
+				<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" @change="changeListens" :v-from="'apiNode'"></network-addresses-box>
+				<p class="comment">通过GRPC访问API节点进程监听的网络端口。</p>
+			</td>
+		</tr>
+		<tr v-if="hasHTTPS">
+			<td>HTTPS证书 *</td>
+			<td>
+				<ssl-certs-box :v-protocol="'https'"></ssl-certs-box>
+			</td>
+		</tr>
+		<tr>
+			<td>GRPC 外部访问地址 *</td>
+			<td>
+				<api-node-addresses-box :v-name="'accessAddrsJSON'"></api-node-addresses-box>
+				<p class="comment">边缘节点和管理平台等外部节点访问API节点的网络地址，需要保证其他节点能够通过此地址访问到API节点服务。<strong>访问地址里的端口号和监听端口通常一致，除非你做了端口转发。</strong></p>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2"><more-options-indicator></more-options-indicator></td>
+		</tr>
+		<tbody v-show="moreOptionsVisible">
+            <tr>
+                <td :class="{'color-border': restIsOn}">是否开启HTTP API端口</td>
+                <td>
+                    <checkbox name="restIsOn" v-model="restIsOn">是否启用HTTP API</checkbox>
+                    <p class="comment">启用后用户可以通过HTTP API调用服务接口。</p>
+                </td>
+            </tr>
+            <tr v-if="restIsOn">
+                <td class="color-border">HTTP API监听端口 *</td>
+                <td>
+                    <network-addresses-box :v-name="'restListensJSON'" :v-server-type="'httpWeb'" @change="changeRestListens"></network-addresses-box>
+                    <p class="comment">HTTP API节点进程监听的网络端口，需要和当前节点的GRPC端口不同。</p>
+                </td>
+            </tr>
+			<tr>
+				<td>描述</td>
+				<td>
+					<textarea name="description" maxlength="200" rows="3"></textarea>
+				</td>
+			</tr>
+			<tr>
+				<td>启用当前节点</td>
+				<td>
+					<div class="ui checkbox">
+						<input type="checkbox" name="isOn" value="1" checked="checked"/>
+						<label></label>
+					</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+	<submit-btn></submit-btn>
+</form>

web/views/@default/settings/api/node/createPopup.js

@@ -0,0 +1,27 @@
+Tea.context(function () {
+	this.hasHTTPS = false
+	this.grpcAddrs = []
+	this.restAddrs = []
+
+	this.changeListens = function (addrs) {
+		this.grpcAddrs = addrs
+
+		this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}) || (this.restIsOn && this.restAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}))
+	}
+
+	this.changeRestListens = function (addrs) {
+		this.restAddrs = addrs
+
+		this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}) || (this.restIsOn && this.restAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}))
+	}
+
+	this.restIsOn = false
+})

web/views/@default/settings/api/node/index.html

@@ -0,0 +1,80 @@
+{$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>GRPC监听端口</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>
+            <div v-if="node.certs != null && node.certs.length > 0">
+                <ssl-certs-view :v-certs="node.certs"></ssl-certs-view>
+            </div>
+            <span v-else class="red">还没有设置证书，可能会导致HTTPS相关服务不可用。</span>
+		</td>
+	</tr>
+	<tr>
+		<td>GRPC外部访问地址</td>
+		<td>
+			<network-addresses-view :v-addresses="node.accessAddrs"></network-addresses-view>
+			<p class="comment">通过GRPC访问API节点的网络地址。</p>
+		</td>
+	</tr>
+    <tr v-if="node.restIsOn">
+        <td>HTTP外部访问地址</td>
+        <td>
+            <network-addresses-view :v-addresses="node.restAccessAddrs"></network-addresses-view>
+            <p class="comment">通过HTTP访问API节点的网络地址。</p>
+        </td>
+    </tr>
+    <tr v-if="node.statusIsValid">
+        <td>CPU用量</td>
+        <td>{{node.status.cpuUsageText}} &nbsp; <span v-if="node.status.cpuPhysicalCount > 0" class="small grey">（{{node.status.cpuPhysicalCount}}核心/{{node.status.cpuLogicalCount}}线程）</span></td>
+    </tr>
+    <tr v-if="node.statusIsValid">
+        <td>内存用量</td>
+        <td>{{node.status.memUsageText}}</td>
+    </tr>
+    <tr v-if="node.statusIsValid">
+        <td>版本</td>
+        <td>v{{node.status.buildVersion}}
+            &nbsp; <span class="red" v-if="newVersion.length > 0">需要升级到新版本v{{newVersion}}</span>
+        </td>
+    </tr>
+    <tr v-if="node.statusIsValid">
+        <td>主程序位置</td>
+        <td>{{node.status.exePath}}</td>
+    </tr>
+    <tr>
+        <td>主节点</td>
+        <td>
+            <span v-if="node.isPrimary" class="green">Y</span>
+            <span v-else class="disabled">N</span>
+            <p class="comment" v-if="node.isPrimary">设置为主节点后，主要的后台任务会在此节点上运行。</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>

web/views/@default/settings/api/node/install.html

@@ -0,0 +1,35 @@
+{$layout}
+{$template "menu"}
+{$template "/code_editor"}
+
+<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>
+    <li>配置修改后，使用<code-label>bin/edge-api restart</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>
+			<source-code-box id="api-code" type="text/yaml">nodeId: "{{node.uniqueId}}"
+secret: "{{node.secret}}"</source-code-box>
+		</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>
+            <source-code-box id="db-code" type="text/yaml">{{dbConfig.config}}</source-code-box>
+		</td>
+	</tr>
+</table>

web/views/@default/settings/api/node/logs.css

@@ -0,0 +1,5 @@
+pre.log-box {
+  margin: 0;
+  padding: 0;
+}
+/*# sourceMappingURL=logs.css.map */

web/views/@default/settings/api/node/logs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["logs.less"],"names":[],"mappings":"AAAA,GAAG;EACF,SAAA;EACA,UAAA","file":"logs.css"}

web/views/@default/settings/api/node/logs.html

@@ -0,0 +1,51 @@
+{$layout}
+{$template "menu"}
+{$template "/datepicker"}
+
+<div class="margin"></div>
+<form method="get" action="/settings/api/node/logs" class="ui form" autocomplete="off">
+    <input type="hidden" name="nodeId" :value="nodeId"/>
+    <div class="ui fields inline">
+        <div class="ui field">
+            <input type="text" name="dayFrom" placeholder="开始日期" v-model="dayFrom" value="" style="width:8em" id="day-from-picker"/>
+        </div>
+        <div class="ui field">
+            <input type="text" name="dayTo" placeholder="结束日期" v-model="dayTo" value="" style="width:8em" id="day-to-picker"/>
+        </div>
+        <div class="ui field">
+            <select class="ui dropdown" name="level" v-model="level">
+                <option value="">[级别]</option>
+                <option value="error">错误</option>
+                <option value="warning">警告</option>
+                <option value="info">信息</option>
+                <option value="success">成功</option>
+            </select>
+        </div>
+        <div class="ui field">
+            <input type="text" name="keyword" style="width:10em" v-model="keyword" placeholder="关键词"/>
+        </div>
+        <div class="ui field">
+            <button type="submit" class="ui button">查询</button>
+        </div>
+        <div class="ui field" v-if="dayFrom.length > 0 || dayTo.length > 0 || keyword.length > 0 || level.length > 0">
+            <a :href="'/settings/api/node/logs?nodeId=' + nodeId">[清除条件]</a>
+        </div>
+    </div>
+</form>
+
+<p class="comment" v-if="logs.length == 0">暂时还没有日志。</p>
+
+<table class="ui table selectable" v-if="logs.length > 0">
+    <thead>
+        <tr>
+
+        </tr>
+    </thead>
+    <tr v-for="log in logs">
+        <td>
+            <node-log-row :v-log="log" :v-keyword="keyword"></node-log-row>
+        </td>
+    </tr>
+</table>
+
+<div class="page" v-html="page"></div>

web/views/@default/settings/api/node/logs.js

@@ -0,0 +1,6 @@
+Tea.context(function () {
+	this.$delay(function () {
+		teaweb.datepicker("day-from-picker")
+		teaweb.datepicker("day-to-picker")
+	})
+})

web/views/@default/settings/api/node/logs.less

@@ -0,0 +1,4 @@
+pre.log-box {
+	margin: 0;
+	padding: 0;
+}

web/views/@default/settings/api/node/update.html

@@ -0,0 +1,80 @@
+{$layout}
+
+{$template "menu"}
+
+<div class="ui warning message"><i class="icon warning circle"></i>如果你修改了GRPC访问地址（包含端口），可能需要手工修改其他节点的配置信息。</div>
+
+<form method="post" 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>GRPC监听端口 *</td>
+			<td>
+				<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" :v-addresses="node.listens" @change="changeListens" :v-from="'apiNode'"></network-addresses-box>
+				<p class="comment">通过GRPC访问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>GRPC访问地址 *</td>
+			<td>
+				<api-node-addresses-box :v-name="'accessAddrsJSON'" :v-addrs="node.accessAddrs"></api-node-addresses-box>
+				<p class="comment">边缘节点和管理平台等外部节点访问API节点的网络地址，需要保证其他节点能够通过此地址访问到API节点服务。<strong>访问地址里的端口号和监听端口通常一致，除非你做了端口转发。</strong></p>
+			</td>
+		</tr>
+		<tr>
+			<td colspan="2"><more-options-indicator></more-options-indicator></td>
+		</tr>
+		<tbody v-show="moreOptionsVisible">
+            <tr>
+                <td :class="{'color-border': node.restIsOn}">是否开启HTTP API端口</td>
+                <td>
+                    <checkbox name="restIsOn" v-model="node.restIsOn">是否启用HTTP API</checkbox>
+                    <p class="comment">启用后用户可以通过HTTP API调用服务接口。</p>
+                </td>
+            </tr>
+            <tr v-if="node.restIsOn">
+                <td class="color-border">HTTP API监听端口 *</td>
+                <td>
+                    <network-addresses-box :v-name="'restListensJSON'" :v-server-type="'httpWeb'" @change="changeRestListens" :v-addresses="node.restListens"></network-addresses-box>
+                    <p class="comment">HTTP API节点进程监听的网络端口，需要和当前节点的GRPC端口不同。</p>
+                </td>
+            </tr>
+			<tr>
+				<td>描述</td>
+				<td>
+					<textarea name="description" maxlength="200" rows="3" v-model="node.description"></textarea>
+				</td>
+			</tr>
+            <tr>
+                <td>主节点</td>
+                <td>
+                    <checkbox name="isPrimary" v-model="node.isPrimary"></checkbox>
+                    <p class="comment">设置为主节点后，主要的后台任务会在此节点上运行。</p>
+                </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>

web/views/@default/settings/api/node/update.js

@@ -0,0 +1,31 @@
+Tea.context(function () {
+	this.success = NotifySuccess("保存成功", "/settings/api/node?nodeId=" + this.node.id)
+
+	this.hasHTTPS = this.node.listens.$any(function (k, v) {
+		return v.protocol == "https"
+	}) || (this.node.restIsOn && this.node.restListens.$any(function (k, v) {
+		return v.protocol == "https"
+	}))
+	this.grpcAddrs = []
+	this.restAddrs = []
+
+	this.changeListens = function (addrs) {
+		this.grpcAddrs = addrs
+
+		this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}) || (this.node.restIsOn && this.restAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}))
+	}
+
+	this.changeRestListens = function (addrs) {
+		this.restAddrs = addrs
+
+		this.hasHTTPS = this.grpcAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}) || (this.node.restIsOn && this.restAddrs.$any(function (k, v) {
+			return v.protocol == "https"
+		}))
+	}
+})

web/views/@default/settings/api/node/updateAddrPopup.html

@@ -0,0 +1,24 @@
+{$layout "layout_popup"}
+
+<h3>修改访问地址</h3>
+<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
+	<table class="ui table definition selectable">
+		<tr>
+			<td>网络协议</td>
+			<td>
+				<select class="ui dropdown auto-width" name="protocol" v-model="protocol">
+					<option value="http">HTTP</option>
+					<option value="https">HTTPS</option>
+				</select>
+			</td>
+		</tr>
+		<tr>
+			<td class="title">访问地址</td>
+			<td>
+				<input type="text" name="addr" maxlength="100" ref="focus" v-model="addr"/>
+				<p class="comment">可以是"IP:端口"或者"域名:端口"。</p>
+			</td>
+		</tr>
+	</table>
+	<submit-btn></submit-btn>
+</form>

web/views/@default/settings/api/node/updateAddrPopup.js

@@ -0,0 +1,5 @@
+Tea.context(function () {
+	let addr = window.parent.UPDATING_ADDR
+	this.protocol = addr.protocol
+	this.addr = addr.host.quoteIP() + ":" + addr.portRange
+})

web/views/@default/settings/api/node/upgradePopup.html

@@ -0,0 +1,35 @@
+{$layout "layout_popup"}
+
+<h3>远程升级</h3>
+
+<form class="ui form" data-tea-action="$" data-tea-success="success" data-tea-timeout="3600" data-tea-before="before" data-tea-done="done">
+    <csrf-token></csrf-token>
+    <input type="hidden" name="nodeId" :value="nodeId"/>
+
+    <table class="ui table definition selectable">
+        <tr v-show="nodeName.length > 0">
+            <td class="title">API节点</td>
+            <td>{{nodeName}}</td>
+        </tr>
+        <tr v-show="currentVersion.length > 0">
+            <td>当前版本</td>
+            <td>v{{currentVersion}}</td>
+        </tr>
+        <tr v-show="latestVersion.length > 0">
+            <td>目标版本</td>
+            <td>v{{latestVersion}}</td>
+        </tr>
+        <tr>
+            <td class="title">升级结果</td>
+            <td>
+                <span v-if="currentVersion == latestVersion" class="green">已经升级到最新版本</span>
+                <span :class="{red: !resultIsOk}" v-if="currentVersion != latestVersion">
+                    <span v-if="!isRequesting">{{result}}</span>
+                    <span v-if="isRequesting">升级中...</span>
+                </span>
+            </td>
+        </tr>
+    </table>
+
+    <submit-btn v-show="canUpgrade && !isRequesting && !isUpgrading">开始升级</submit-btn>
+</form>

web/views/@default/settings/api/node/upgradePopup.js

@@ -0,0 +1,39 @@
+Tea.context(function () {
+	this.$delay(function () {
+		this.checkLoop()
+	})
+
+	this.success = function () {
+	}
+
+	this.isRequesting = false
+
+	this.before = function () {
+		this.isRequesting = true
+	}
+
+	this.done = function () {
+		this.isRequesting = false
+	}
+
+	this.checkLoop = function () {
+		if (this.currentVersion == this.latestVersion) {
+			return
+		}
+
+		this.$post(".upgradeCheck")
+			.params({
+				nodeId: this.nodeId
+			})
+			.success(function (resp) {
+				if (resp.data.isOk) {
+					teaweb.reload()
+				}
+			})
+			.done(function () {
+				this.$delay(function () {
+					this.checkLoop()
+				}, 3000)
+			})
+	}
+})