mirror of
https://github.com/skyle1995/NetworkAuth.git
synced 2026-05-25 02:24:05 +08:00
210 lines
6.6 KiB
HTML
210 lines
6.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>{{ .title }}</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|||
|
|
<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
background-color: #f2f2f2;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 40px 0;
|
|||
|
|
}
|
|||
|
|
.install-box {
|
|||
|
|
width: 600px;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
.install-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
.install-header h2 {
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.install-header p {
|
|||
|
|
color: #999;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="install-box">
|
|||
|
|
<div class="install-header">
|
|||
|
|
<h2>系统初始化</h2>
|
|||
|
|
<p>欢迎使用，请完成以下初始化设置</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form class="layui-form" lay-filter="install-form">
|
|||
|
|
|
|||
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
|
|||
|
|
<legend style="font-size: 14px;">1. 数据库配置</legend>
|
|||
|
|
</fieldset>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">数据库类型</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="radio" name="db_type" value="sqlite" title="SQLite (默认)" lay-filter="db_type" checked>
|
|||
|
|
<input type="radio" name="db_type" value="mysql" title="MySQL" lay-filter="db_type">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="mysql-config" style="display: none;">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">主机地址</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="db_host" value="127.0.0.1" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">端口号</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="number" name="db_port" value="3306" lay-affix="number" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">数据库名</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="db_name" value="networkauth" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">用户名</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="db_user" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">密码</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="password" name="db_pass" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
|||
|
|
<legend style="font-size: 14px;">2. 站点信息</legend>
|
|||
|
|
</fieldset>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">站点标题</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="site_title" lay-verify="required" value="NetworkAuth" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
|||
|
|
<legend style="font-size: 14px;">3. 管理员设置</legend>
|
|||
|
|
</fieldset>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">管理员账号</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="admin_username" lay-verify="required" placeholder="设置管理员账号" value="admin" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">管理员密码</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="password" name="admin_password" lay-verify="required|pass" placeholder="设置管理员密码（至少6位）" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">确认密码</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="password" name="confirm_password" lay-verify="required|confirmPass" placeholder="请再次输入管理员密码" autocomplete="off" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-form-item" style="margin-top: 40px; text-align: center;">
|
|||
|
|
<button class="layui-btn layui-btn-normal layui-btn-lg" style="width: 200px;" lay-submit lay-filter="install-submit">立即初始化</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="/static/lib/layui/layui.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['form', 'layer', 'jquery'], () => {
|
|||
|
|
const form = layui.form;
|
|||
|
|
const layer = layui.layer;
|
|||
|
|
const $ = layui.jquery;
|
|||
|
|
|
|||
|
|
// 监听数据库类型切换
|
|||
|
|
form.on('radio(db_type)', (data) => {
|
|||
|
|
if (data.value === 'mysql') {
|
|||
|
|
$('#mysql-config').slideDown();
|
|||
|
|
$('#mysql-config input').attr('lay-verify', 'required');
|
|||
|
|
} else {
|
|||
|
|
$('#mysql-config').slideUp();
|
|||
|
|
$('#mysql-config input').removeAttr('lay-verify');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 自定义验证规则
|
|||
|
|
form.verify({
|
|||
|
|
pass: [
|
|||
|
|
/^[\S]{6,20}$/,
|
|||
|
|
'密码必须6到20位，且不能出现空格'
|
|||
|
|
],
|
|||
|
|
confirmPass: (value) => {
|
|||
|
|
const pass = $('input[name="admin_password"]').val();
|
|||
|
|
if(value !== pass){
|
|||
|
|
return '两次输入的密码不一致';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听提交
|
|||
|
|
form.on('submit(install-submit)', (data) => {
|
|||
|
|
const loading = layer.load(2, {shade: [0.1, '#fff']});
|
|||
|
|
|
|||
|
|
// 处理 db_port 转换为整数
|
|||
|
|
const payload = { ...data.field };
|
|||
|
|
if (payload.db_port) {
|
|||
|
|
payload.db_port = parseInt(payload.db_port, 10) || 3306;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/api/install',
|
|||
|
|
type: 'POST',
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
data: JSON.stringify(payload),
|
|||
|
|
success: (res) => {
|
|||
|
|
layer.close(loading);
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.msg('系统初始化成功！正在跳转登录...', {
|
|||
|
|
icon: 1,
|
|||
|
|
time: 2000
|
|||
|
|
}, () => {
|
|||
|
|
window.location.href = '/admin/login';
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg || '初始化失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: (xhr) => {
|
|||
|
|
layer.close(loading);
|
|||
|
|
const res = xhr.responseJSON;
|
|||
|
|
layer.msg(res ? res.msg : '请求失败，请重试', {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return false; // 阻止表单跳转
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|