361 lines
16 KiB
HTML
361 lines
16 KiB
HTML
{template "install/header.html"}
|
||
|
||
<style>
|
||
.install-option-group {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
padding: 6px;
|
||
border: 1px solid #e4ebf3;
|
||
border-radius: 12px;
|
||
background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
|
||
}
|
||
|
||
/* 覆盖框架 .mt-radio 默认样式，避免圆点压住文字 */
|
||
.install-option-group .install-option-card.mt-radio {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-width: 118px;
|
||
margin: 0 0 0 0 !important;
|
||
padding: 10px 18px 10px 40px !important;
|
||
border: 1px solid #d7e3f0;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
color: #4a5568;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio:hover {
|
||
border-color: #8db7e3;
|
||
box-shadow: 0 6px 18px rgba(56, 110, 171, 0.10);
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio > input[type="radio"] {
|
||
position: absolute;
|
||
left: 14px;
|
||
top: 50%;
|
||
margin: -8px 0 0 0;
|
||
width: 16px;
|
||
height: 16px;
|
||
opacity: 0;
|
||
z-index: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio > span {
|
||
position: absolute !important;
|
||
left: 14px !important;
|
||
top: 50% !important;
|
||
right: auto !important;
|
||
bottom: auto !important;
|
||
width: 16px !important;
|
||
height: 16px !important;
|
||
margin: -8px 0 0 0 !important;
|
||
padding: 0 !important;
|
||
border: 2px solid #b8c7d9 !important;
|
||
border-radius: 50% !important;
|
||
background: #fff !important;
|
||
box-shadow: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio > span:after {
|
||
content: "" !important;
|
||
position: absolute !important;
|
||
left: 50% !important;
|
||
top: 50% !important;
|
||
width: 6px !important;
|
||
height: 6px !important;
|
||
margin: -3px 0 0 -3px !important;
|
||
border: 0 !important;
|
||
border-radius: 50% !important;
|
||
background: #26a65b !important;
|
||
opacity: 0;
|
||
transform: scale(0.6);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio > input[type="radio"]:checked + span {
|
||
border-color: #26a65b !important;
|
||
box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.10);
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio > input[type="radio"]:checked + span:after {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio:has(input[type="radio"]:checked) {
|
||
border-color: #26a65b;
|
||
background: #f4fcf7;
|
||
color: #1d7f45;
|
||
box-shadow: 0 10px 22px rgba(38, 166, 91, 0.12);
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio.is-disabled,
|
||
.install-option-group .install-option-card.mt-radio:has(input[type="radio"]:disabled) {
|
||
opacity: .55;
|
||
cursor: pointer;
|
||
box-shadow: none;
|
||
color: #8a96a6;
|
||
background: #f5f7fa;
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio.is-disabled:hover {
|
||
border-color: #c5d0dc;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio.is-disabled > input[type="radio"] {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.install-option-help {
|
||
margin: 12px 0 0;
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
background: #f8fbff;
|
||
color: #6b7a8c;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.install-option-group {
|
||
display: flex;
|
||
}
|
||
|
||
.install-option-group .install-option-card.mt-radio {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption">
|
||
<i class="fa fa-edit font-green"></i>
|
||
<span class="caption-subject font-green">{dr_lang('项目信息')}</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body ">
|
||
<form action="#" id="myform" class="form-horizontal form-bordered ">
|
||
{dr_form_hidden()}
|
||
<div class="form-body">
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('项目地址')}</label>
|
||
<div class="col-md-7">
|
||
<p class="form-control-static" id="url"> {FC_NOW_HOST} </p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('项目名称')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[name]" value="{dr_lang('我的项目')}" class="form-control" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('创始人邮箱')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[email]" value="admin@admin.com" class="form-control" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('创始人账号')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[username]" value="admin" class="form-control" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('创始人密码')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[password]" value="admin" class="form-control" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('数据库驱动')}</label>
|
||
<div class="col-md-7">
|
||
<div class="install-option-group mt-radio-inline">
|
||
{loop $db_drivers $d}
|
||
<label class="install-option-card mt-radio {if !$d.enabled}is-disabled js-db-driver-disabled{/if}"
|
||
{if !$d.enabled}data-tip="{$d.tip}"{/if}>
|
||
<input type="radio" name="data[db_driver]" value="{$d.name}" data-form="{$d.form}"
|
||
{if $db_driver==$d.name && $d.enabled}checked{/if}
|
||
{if !$d.enabled}disabled{/if}>
|
||
<span></span>
|
||
{$d.label}
|
||
</label>
|
||
{/loop}
|
||
</div>
|
||
{if $db_dir_missing || $force_mysqli}
|
||
<p class="help-block install-option-help">
|
||
{if $db_dir_missing}
|
||
<span style="color:#d68910;">{dr_lang('未检测到 System/Database 目录，已默认使用 MySQLi（MySQL）模式')}</span>
|
||
{elseif $force_mysqli}
|
||
<span style="color:#d68910;">{dr_lang('检测到自定义 Install.sql，仅支持 MySQLi 安装')}</span>
|
||
{/if}
|
||
</p>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
<div class="form-group js-db-server">
|
||
<label class="control-label col-md-3">{dr_lang('数据库地址')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[db_host]" value="{$db_host}" class="form-control" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group js-db-server">
|
||
<label class="control-label col-md-3">{dr_lang('数据库账号')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[db_user]" value="{$db_user}" class="form-control" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group js-db-server">
|
||
<label class="control-label col-md-3">{dr_lang('数据库密码')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[db_pass]" value="{$db_pass}" class="form-control js-db-pass" placeholder="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group js-db-server">
|
||
<label class="control-label col-md-3">{dr_lang('数据库名称')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[db_name]" value="{$db_name}" class="form-control js-db-name-mysql" placeholder="">
|
||
<p class="help-block"> {dr_lang('当提示Unknown database时，请先创建数据库后再进行下一步')} </p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group js-db-sqlite" style="display:none;">
|
||
<label class="control-label col-md-3">{dr_lang('数据库文件')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[db_name_sqlite]" value="{$sqlite_name}" class="form-control js-db-name-sqlite" placeholder="database/SQLite3/" readonly>
|
||
<p class="help-block"> {dr_lang('保存在 cache/database/SQLite3/ 下，文件名安装时随机生成，避免路径被猜测')} </p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group js-db-sqlite" style="display:none;">
|
||
<label class="control-label col-md-3">{dr_lang('加密密码')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[db_pass_sqlite]" value="" class="form-control js-db-pass-sqlite" placeholder="{dr_lang('可选，一般留空')}">
|
||
<p class="help-block"> {dr_lang('可选。若填写则作为 SQLite 加密口令（需 PHP 支持）')} </p>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('数据表前缀')}</label>
|
||
<div class="col-md-7">
|
||
<input type="text" name="data[db_prefix]" value="{$db_prefix}" class="form-control" placeholder="">
|
||
</div>
|
||
</div>
|
||
{if $is_demo}
|
||
<div class="form-group">
|
||
<label class="control-label col-md-3">{dr_lang('安装测试数据')}</label>
|
||
<div class="col-md-7">
|
||
<div class="mt-radio-inline ">
|
||
<label class="mt-radio">
|
||
<input type="radio" name="is_install_db" value="1" checked=""> {dr_lang('安装')}
|
||
<span></span>
|
||
</label>
|
||
<label class="mt-radio">
|
||
<input type="radio" name="is_install_db" value="0"> {dr_lang('不安装')}
|
||
<span></span>
|
||
</label>
|
||
</div>
|
||
<p class="help-block install-option-help"> {dr_lang('新手建议选择安装测试数据，方便快速入门')} </p>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
<div class="portlet-title" style="min-height: 18px;"></div>
|
||
<div class="portlet-body text-center">
|
||
<a href="javascript:dr_next_install();" type='submit' class="btn btn-success"> {dr_lang('下一步安装')} </a>
|
||
</div>
|
||
<div class="portlet-body text-center" id="dr_loading" style="display: none; color:blue;">
|
||
{dr_lang('正在安装中（这个过程一般不超过30秒）')}...
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$('#url').html(document.location.protocol+'//{DOMAIN_NAME}/');
|
||
|
||
function dr_toggle_db_driver() {
|
||
var $checked = $('input[name="data[db_driver]"]:checked:not(:disabled)');
|
||
if (!$checked.length) {
|
||
$checked = $('input[name="data[db_driver]"]:not(:disabled)').first().prop('checked', true);
|
||
}
|
||
var formType = $checked.attr('data-form') || 'server';
|
||
if (formType === 'sqlite') {
|
||
$('.js-db-server').hide().find('input,select,textarea').prop('disabled', true);
|
||
$('.js-db-sqlite').show().find('input,select,textarea').prop('disabled', false);
|
||
$('.js-db-name-sqlite').attr('name', 'data[db_name]');
|
||
$('.js-db-pass-sqlite').attr('name', 'data[db_pass]');
|
||
} else {
|
||
$('.js-db-sqlite').hide().find('input,select,textarea').prop('disabled', true);
|
||
$('.js-db-server').show().find('input,select,textarea').prop('disabled', false);
|
||
$('.js-db-name-sqlite').attr('name', 'data[db_name_sqlite]');
|
||
$('.js-db-pass-sqlite').attr('name', 'data[db_pass_sqlite]');
|
||
}
|
||
}
|
||
|
||
$(function () {
|
||
// 若默认驱动不可用则自动切换
|
||
var $checked = $('input[name="data[db_driver]"]:checked');
|
||
if ($checked.length && $checked.prop('disabled')) {
|
||
$('input[name="data[db_driver]"]:not(:disabled)').first().prop('checked', true);
|
||
}
|
||
dr_toggle_db_driver();
|
||
$('input[name="data[db_driver]"]').on('change', dr_toggle_db_driver);
|
||
|
||
// 灰色不可用驱动：点击弹窗提示原因
|
||
$(document).on('click', '.js-db-driver-disabled', function (e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
var tip = $(this).attr('data-tip') || '{dr_lang("该数据库驱动暂不可选")}';
|
||
if (typeof layer !== 'undefined' && layer.alert) {
|
||
layer.alert(tip);
|
||
} else if (typeof dr_tips === 'function') {
|
||
dr_tips(0, tip);
|
||
} else {
|
||
alert(tip);
|
||
}
|
||
return false;
|
||
});
|
||
});
|
||
|
||
function dr_next_install() {
|
||
var loading = layer.load(2, {
|
||
shade: [0.3,'#fff'], //0.1透明度的白色背景
|
||
time: 100000000
|
||
});
|
||
$('#dr_loading').show();
|
||
$.ajax({type: "POST",dataType:"json", url: '{$do_url}', data: $("#myform").serialize(),
|
||
success: function(json) {
|
||
if (json.code == 1) {
|
||
window.location.href = json.msg;
|
||
} else {
|
||
layer.close(loading);
|
||
layer.alert(json.msg);
|
||
$('#dr_loading').hide();
|
||
}
|
||
},
|
||
error: function(HttpRequest, ajaxOptions, thrownError) {
|
||
layer.closeAll('loading');
|
||
$('#dr_loading').hide();
|
||
layer.open({
|
||
type: 1,
|
||
title: "{dr_lang('系统故障')}",
|
||
fix:true,
|
||
shadeClose: true,
|
||
shade: 0,
|
||
area: ['50%', '50%'],
|
||
content: "<div style=\"padding:10px;\">"+HttpRequest.responseText+"</div>"
|
||
});
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
{template "install/footer.html"} |