TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-04 05:00:25 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
55e2e7c958b7d68eec86968d45b2455afb80652c
EdgeAdmin/web/views/@default/setup/index.html
GoEdgeLab b63afd5f66 优化代码
2022-09-25 20:34:43 +08:00

366 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="/images/favicon.png"/>
<title>安装GoEdge管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
{$TEA.VUE}
{$TEA.SEMANTIC}
<script type="text/javascript" src="/js/md5.min.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/sweetalert2/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="/js/components.js"></script>
<link rel="stylesheet" href="/_/@default/@layout.css"/>
</head>
<body>
<div class="install-box">
<!-- 步骤列表 -->
<div class="ui steps fluid small">
<div class="ui step" :class="{active: step == STEP_INTRO}">
<div class="content">
<div :class="{title: step == STEP_INTRO}">1. 介绍</div>
</div>
</div>
<div class="ui step" :class="{active: step == STEP_API}">
<div class="content">
<div :class="{title: step == STEP_API}">2. 设置API节点</div>
</div>
</div>
<div class="ui step" :class="{active: step == STEP_DB}">
<div class="content">
<div :class="{title: step == STEP_DB}">3. 设置MySQL数据库</div>
</div>
</div>
<div class="ui step" :class="{active: step == STEP_ADMIN}">
<div class="content">
<div :class="{title: step == STEP_ADMIN}">4. 设置管理员账号</div>
</div>
</div>
<div class="ui step" :class="{active: step == STEP_FINISH}">
<div class="content">
<div :class="{title: step == STEP_FINISH}">5. 完成安装</div>
</div>
</div>
</div>
<!-- 介绍 -->
<div v-show="step == STEP_INTRO">
<div>感谢你选择使用<strong>GoEdge</strong>集群服务系统，下面让我们一起开始配置系统。</div>
<div class="margin">在这之前如果你还没有可用的MySQL数据库，请先安装数据库再进行。</div>
<div class="margin" style="color: grey">免责声明：GoEdge软件开发者并不对您的软件使用方法、服务对象、服务内容负道德或法律上的约束责任，在使用本软件时产生的一切法律风险自负。</div>
<div class="margin" style="color: grey">用户协议：请在遵守中华人民共和国政策、法律、法规的前提下使用本软件；自愿承担因不当使用本软件产生的一切法律后果；承认GoEdge开发者拥有本软件的著作权；点击"开始"安装表示你同意此用户协议。</div>
<button class="ui button primary" style="margin-top: 10em" type="button" @click.prevent="goIntroNext()">开始<i class="icon long arrow right"></i></button>
</div>
<!-- 设置API节点 -->
<div v-show="step == STEP_API">
<div class="ui message"><strong>API节点</strong>是管理系统和数据库之间通讯的桥梁，新安装时可以先使用自动启动的API节点，等系统变得庞大时再扩展新的API节点。</div>
<form method="post" class="ui form" data-tea-action=".validateApi" data-tea-success="apiSuccess" data-tea-before="apiSubmit" data-tea-done="apiDone">
<table class="ui table definition selectable">
<tr>
<td class="title">API节点类型</td>
<td>
<div class="ui radio checkbox">
<input type="radio" name="mode" value="new" id="auto-start-api-node" v-model="apiNodeMode"/>
<label for="auto-start-api-node">自动启动新API节点</label>
</div>
<div class="ui radio checkbox">
<input type="radio" name="mode" value="old" id="use-old-api-node" v-model="apiNodeMode"/>
<label for="use-old-api-node">使用已安装节点</label>
</div>
</td>
</tr>
<tbody v-show="apiNodeMode == 'new'">
<tr>
<td>节点端口 *</td>
<td>
<input type="text" name="newPort" style="width:6em" maxlength="5" v-model="newAPINodePort"/>
<p class="comment">选一个在1024-65535之间并且没有正在使用的端口作为要启动的节点端口。如果你的服务器上有防火墙或者其他安全策略，请记得设置这个端口为通过。</p>
</td>
</tr>
<tr>
<td>节点主机地址 *</td>
<td>
<div class="ui fields inline">
<div class="ui field">
<input type="text" name="newHost" value="" ref="newHostRef" placeholder="x.x.x.x" v-model="currentHost"/>
</div>
</div>
<p class="comment">其他节点访问此API节点的主机地址，可以是IP或者域名，第一次安装时通常是<strong>当前服务器</strong>的公网IP地址。后期可以修改这个地址。</p>
</td>
</tr>
</tbody>
<tbody v-show="apiNodeMode == 'old'">
<tr>
<td>节点协议 *</td>
<td>
<select class="ui dropdown auto-width" name="oldProtocol">
<option value="http">HTTP</option>
<option value="https">HTTPS</option>
</select>
<p class="comment">API节点使用的协议。</p>
</td>
</tr>
<tr>
<td>主机地址 *</td>
<td>
<input type="text" name="oldHost" maxlength="100" style="width:20em"/>
<p class="comment">API节点所在主机地址。</p>
</td>
</tr>
<tr>
<td>服务端口 *</td>
<td>
<input type="text" name="oldPort" style="width:6em" maxlength="5"/>
<p class="comment">API节点启动的端口。</p>
</td>
</tr>
<tr>
<td>节点nodeId *</td>
<td>
<input type="text" name="oldNodeId" maxlength="100"/>
<p class="comment">在节点的配置文件中<code-label>configs/api.yaml</code-label>中获取，不需要带双引号。</p>
</td>
</tr>
<tr>
<td>节点secret *</td>
<td>
<input type="password" name="oldNodeSecret" maxlength="100"/>
<p class="comment">在节点的配置文件中<code-label>configs/api.yaml</code-label>中获取，不需要带双引号。</p>
</td>
</tr>
</tbody>
</table>
<button class="ui button" type="button" @click.prevent="goBackIntro"><i class="icon long arrow left"></i>上一步</button> &nbsp;
<button class="ui button primary" type="submit" v-if="!apiRequesting">下一步<i class="icon long arrow right"></i></button>
<button class="ui button primary" type="button" v-if="apiRequesting">提交中</button>
</form>
</div>
<!-- 设置数据库 -->
<div v-show="step == STEP_DB">
<div v-show="apiNodeMode == 'new'">
<form method="post" class="ui form" data-tea-action=".validateDb" data-tea-success="dbSuccess" data-tea-before="dbSubmit" data-tea-done="dbDone">
<table class="ui table definition selectable">
<tr>
<td class="title">MySQL主机地址 *</td>
<td>
<input type="text" name="host" maxlength="100" placeholder="比如 192.168.1.100" style="width:16em" ref="dbHost" v-model="localDB.host" @change="checkDBIP" @input="localDB.isLocal = true"/>
<p class="comment" v-if="localDBHost.length > 0 && localDBHost == localDB.host"><span class="blue">已经自动填入从当前服务器发现的MySQL数据库信息。</span></p>
<p class="comment" v-if="!localDB.isLocal"><span class="red">当前地址不是局域网IP，可能会严重影响系统运行性能，请优先选择局域网IP。</span></p>
</td>
</tr>
<tr>
<td>数据库连接端口 *</td>
<td>
<input type="text" name="port" maxlength="5" placeholder="比如 3306" style="width:7em" v-model="localDB.port"/>
<p class="comment">MySQL默认端口为3306。</p>
</td>
</tr>
<tr>
<td>数据库名称 *</td>
<td>
<input type="text" name="database" value="edges" style="width:16em"/>
<p class="comment">请事先创建好此数据库，如果不存在，则会尝试自动创建。手动创建数据库语句<code-label>CREATE DATABASE `数据库名称` CHARSET utf8mb4;</code-label>。</p>
</td>
</tr>
<tr>
<td>连接用户名 *</td>
<td>
<input type="text" name="username" style="width:16em" maxlength="100" v-model="localDB.username"/>
<p class="comment">此用户需要可以在数据库中有操作数据和创建数据表的权限。</p>
</td>
</tr>
<tr>
<td>连接密码</td>
<td>
<input type="password" name="password" style="width:16em" maxlength="100" v-model="localDB.password"/>
<p class="comment">连接数据库所需密码，没有密码的话就不需要填写。</p>
</td>
</tr>
<tr>
<td>访问日志保留天数</td>
<td>
<div class="ui input right labeled">
<input type="number" name="accessLogKeepDays" style="width: 5em" maxlength="4" value="7"/>
<span class="ui label">天</span>
</div>
<p class="comment">网站等服务记录的访问日志保留天数，防止无限制地占用数据库空间，如果你的数据库空间比较小，请适当调小此值。</p>
</td>
</tr>
</table>
<button class="ui button" type="button" @click.prevent="goBackAPI"><i class="icon long arrow left"></i>上一步</button> &nbsp;
<button class="ui button primary" v-if="!dbRequesting" type="submit">下一步<i class="icon long arrow right"></i></button>
<button class="ui button primary" v-if="dbRequesting" type="button">提交中...</button>
</form>
</div>
<div v-show="apiNodeMode == 'old'">
<div style="margin-bottom: 2em">你选择使用了已安装节点，无需重新配置数据库。</div>
<button class="ui button margin" type="button" @click.prevent="goBackAPI"><i class="icon long arrow left"></i>上一步</button> &nbsp;
<button class="ui button primary margin" type="button" @click.prevent="goDBNext()">下一步<i class="icon long arrow right"></i></button>
</div>
</div>
<!-- 设置管理员账号 -->
<div v-show="step == STEP_ADMIN">
<form method="post" class="ui form" data-tea-action=".validateAdmin" data-tea-success="adminSuccess">
<table class="ui table definition selectable">
<tr>
<td class="title">登录用户名 *</td>
<td>
<input type="text" name="adminUsername" style="width:16em" maxlength="100" value="admin" tabindex="1"/>
<p class="comment">只能是英文、数字和下划线的组合。</p>
</td>
</tr>
<tr>
<td>登录密码 *</td>
<td>
<input type="password" name="adminPassword" maxlength="100" style="width:16em" v-model="adminPassword" v-show="!adminPasswordVisible" tabindex="2" ref="adminPasswordInput"/>
<input type="text" value="" v-model="adminPassword" style="width:16em" v-show="adminPasswordVisible"/>
<p class="comment">只能是英文、数字和下划线的组合 <a href="" title="显示明文密码" @click.prevent="showAdminPassword"><i class="icon eye grey"></i></a>。</p>
</td>
</tr>
<tr>
<td>确认密码 *</td>
<td>
<input type="password" name="adminPassword2" maxlength="100" style="width:16em" v-model="adminPassword2" v-show="!adminPasswordVisible" tabindex="3"/>
<input type="text" value="" v-model="adminPassword2" style="width:16em" v-show="adminPasswordVisible"/>
<p class="comment">再次输入密码以便于确认 <a href="" title="显示明文密码" @click.prevent="showAdminPassword"><i class="icon eye grey"></i></a>。</p>
</td>
</tr>
</table>
<button class="ui button margin" type="button" @click.prevent="goBackDB"><i class="icon long arrow left"></i>上一步</button> &nbsp;
<button class="ui button primary margin" type="submit">下一步<i class="icon long arrow right"></i></button>
</form>
</div>
<!-- 完成安装 -->
<div v-show="step == STEP_FINISH">
<form method="post" class="ui form" data-tea-action=".install" data-tea-success="finishSuccess" data-tea-before="finishSubmit" data-tea-done="finishDone" data-tea-timeout="1200">
<input type="hidden" name="apiNodeJSON" :value="JSON.stringify(apiNodeInfo)"/>
<input type="hidden" name="dbJSON" :value="JSON.stringify(dbInfo)"/>
<input type="hidden" name="adminJSON" :value="JSON.stringify(adminInfo)"/>
<div class="content-box">
<h3>API节点信息</h3>
<table class="ui table definition selectable">
<tr>
<td class="title">API节点类型</td>
<td>
<span v-if="apiNodeInfo.mode == 'new'">自动启动新API节点</span>
<span v-if="apiNodeInfo.mode == 'old'">使用已安装节点</span>
</td>
</tr>
<tbody v-show="apiNodeInfo.mode == 'new'">
<tr>
<td>节点端口 *</td>
<td>
{{apiNodeInfo.newPort}}
</td>
</tr>
<tr>
<td>节点主机地址 *</td>
<td>
{{apiNodeInfo.newHost}}
</td>
</tr>
</tbody>
<tbody v-show="apiNodeInfo.mode == 'old'">
<tr>
<td>节点协议 *</td>
<td>
{{apiNodeInfo.oldProtocol}}
</td>
</tr>
<tr>
<td>主机地址 *</td>
<td>
{{apiNodeInfo.oldHost}}
</td>
</tr>
<tr>
<td>服务端口 *</td>
<td>
{{apiNodeInfo.oldPort}}
</td>
</tr>
</tbody>
</table>
<h3 v-if="apiNodeMode == 'new'">数据库信息</h3>
<table class="ui table definition selectable" v-if="apiNodeMode == 'new'">
<tr>
<td class="title">MySQL主机地址 *</td>
<td>
{{dbInfo.host}}
</td>
</tr>
<tr>
<td>数据库连接端口 *</td>
<td>
{{dbInfo.port}}
</td>
</tr>
<tr>
<td>数据库名称 *</td>
<td>
{{dbInfo.database}}
</td>
</tr>
<tr>
<td>连接用户名 *</td>
<td>
{{dbInfo.username}}
</td>
</tr>
<tr>
<td>连接密码</td>
<td>
<span v-if="dbInfo.passwordMask != null && dbInfo.passwordMask.length > 0">{{dbInfo.passwordMask}}</span>
<span v-else class="disabled">未填入密码</span>
</td>
</tr>
<tr>
<td>访问日志保留天数</td>
<td>
{{dbInfo.accessLogKeepDays}}天
</td>
</tr>
</table>
<h3>管理员信息</h3>
<table class="ui table definition selectable">
<tr>
<td class="title">登录用户名</td>
<td>{{adminInfo.username}}</td>
</tr>
<tr>
<td>登录密码</td>
<td>{{adminInfo.passwordMask}}</td>
</tr>
</table>
</div>
<div class="button-group">
<div class="ui divider"></div>
<div class="status-box"><span class="blue">{{statusText}}</span></div>
<button class="ui button" type="button" @click.prevent="goBackAdmin"><i class="icon long arrow left"></i>上一步</button>
<button class="ui button primary" type="submit" v-if="!isInstalling">确认并开始安装</button>
<button class="ui button disabled" type="button" v-if="isInstalling">安装中请耐心等待...</button>
</div>
</form>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink