安装引导优化

This commit is contained in:
pushuo 2022-08-22 16:06:27 +08:00
parent 27cc1e9529
commit b4c5874ddf
16 changed files with 213 additions and 99 deletions

View File

@ -32,7 +32,9 @@ class EnvironmentController extends Controller
*/
public function index()
{
return view('installer::environment-wizard');
$steps = 4;
return view('installer::environment-wizard', compact('steps'));
}
/**

View File

@ -26,6 +26,8 @@ class FinalController extends Controller
event(new LaravelInstallerFinished);
return view('installer::finished', compact('finalMessages', 'finalStatusMessage', 'finalEnvFile'));
$steps = 5;
return view('installer::finished', compact('finalMessages', 'finalStatusMessage', 'finalEnvFile', 'steps'));
}
}

View File

@ -31,6 +31,8 @@ class PermissionsController extends Controller
config('installer.permissions')
);
return view('installer::permissions', compact('permissions'));
$steps = 3;
return view('installer::permissions', compact('permissions', 'steps'));
}
}

View File

@ -34,6 +34,8 @@ class RequirementsController extends Controller
config('installer.requirements')
);
return view('installer::requirements', compact('requirements', 'phpSupportInfo'));
$steps = 2;
return view('installer::requirements', compact('requirements', 'phpSupportInfo', 'steps'));
}
}

View File

@ -20,6 +20,9 @@ class WelcomeController extends Controller
if (installed()) {
exit('Already installed');
}
return view('installer::welcome');
$steps = 1;
return view('installer::welcome', compact('steps'));
}
}

View File

@ -16,7 +16,7 @@
<script src="{{ asset('vendor/layer/3.5.1/layer.js') }}"></script>
<link rel="shortcut icon" href="{{ asset('/image/favicon.png') }}">
<script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.min.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/installer/app.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/install/css/app.css') }}">
@yield('style')
</head>
@ -25,18 +25,41 @@
<div class="logo mb-5"><img src="{{ asset('/image/logo.png') }}" class="img-fluid"></div>
<div class="steps-wrap">
<ul>
<li class="success">
<div class="left"><span class="index"><i class="bi bi-check-lg"></i></span>已经成功的步骤</div>
</li>
<li class="ing">
<li class="{{ $steps == 1 ? 'ing' : '' }} {{ $steps > 1 ? 'success' : '' }}">
<div class="left">
<span class="index">2</span>正在进行的步骤
<span class="index">@if ($steps > 1) <i class="bi bi-check-lg"></i> @else 1 @endif</span>
欢迎使用安装引导
</div>
<span class="right"><i class="bi bi-arrow-right-short"></i></span>
</li>
<li class="{{ $steps == 2 ? 'ing' : '' }} {{ $steps > 2 ? 'success' : '' }}">
<div class="left">
<span class="index">@if ($steps > 2 && $steps != 2) <i class="bi bi-check-lg"></i> @else 2 @endif</span>
系统环境检测
</div>
<span class="right"><i class="bi bi-arrow-right-short"></i></span>
</li>
<li class="{{ $steps == 3 ? 'ing' : '' }} {{ $steps > 3 ? 'success' : '' }}">
<div class="left">
<span class="index">@if ($steps > 3 && $steps != 3) <i class="bi bi-check-lg"></i> @else 3 @endif</span>
文件夹权限检测
</div>
<span class="right"><i class="bi bi-arrow-right-short"></i></span>
</li>
<li class="{{ $steps == 4 ? 'ing' : '' }} {{ $steps > 4 ? 'success' : '' }}">
<div class="left">
<span class="index">@if ($steps > 4 && $steps != 4) <i class="bi bi-check-lg"></i> @else 4 @endif</span>
配置参数
</div>
<span class="right"><i class="bi bi-arrow-right-short"></i></span>
</li>
<li class="{{ $steps == 5 ? 'ing' : '' }} {{ $steps > 5 ? 'success' : '' }}">
<div class="left">
<span class="index">@if ($steps > 5 && $steps != 5) <i class="bi bi-check-lg"></i> @else 5 @endif</span>
安装结果
</div>
<span class="right"><i class="bi bi-arrow-right-short"></i></span>
</li>
<li><div class="left"><span class="index">3</span>等待执行的步骤</div></li>
<li><div class="left"><span class="index">4</span>等待执行的步骤</div></li>
<li><div class="left"><span class="index">5</span>等待执行的步骤</div></li>
</ul>
</div>
{{-- <div class="container d-flex justify-content-between align-items-center">

View File

@ -1,35 +1,56 @@
@extends('installer::layouts.master')
@section('template_title')
{{ trans('installer::installer_messages.permissions.templateTitle') }}
{{ trans('installer::installer_messages.permissions.templateTitle') }}
@endsection
@section('title')
<i class="fa fa-key fa-fw" aria-hidden="true"></i>
{{ trans('installer::installer_messages.permissions.title') }}
<i class="fa fa-key fa-fw" aria-hidden="true"></i>
{{ trans('installer::installer_messages.permissions.title') }}
@endsection
@section('content')
<ul class="list">
@foreach($permissions['permissions'] as $permission)
<div class="install-2">
<h3 class="mb-5">文件夹权限检测</h3>
{{-- <ul class="list">
@foreach ($permissions['permissions'] as $permission)
<li class="list__item list__item--permissions {{ $permission['isSet'] ? 'success' : 'error' }}">
{{ $permission['folder'] }}
<span>
<i class="fa fa-fw fa-{{ $permission['isSet'] ? 'check-circle-o' : 'exclamation-circle' }}"></i>
{{ $permission['permission'] }}
</span>
{{ $permission['folder'] }}
<span>
<i class="fa fa-fw fa-{{ $permission['isSet'] ? 'check-circle-o' : 'exclamation-circle' }}"></i>
{{ $permission['permission'] }}
</span>
</li>
@endforeach
</ul> --}}
<table class="table table-hover text-black text-opacity-75 fs-5 mb-5">
<thead>
<tr>
<th width="70%">文件夹</th>
<th width="30%">状态</th>
</tr>
</thead>
<tbody>
@foreach ($permissions['permissions'] as $permission)
<tr class="{{ $permission['isSet'] ? '' : 'table-danger' }}">
<td>{{ $permission['folder'] }} {{ $permission['permission'] }}</td>
<td>
<i class="bi bi-{{ $permission['isSet'] ? 'check-circle-fill' : 'exclamation-circle-fill' }} {{ $permission['isSet'] ? 'text-success' : 'text-danger' }} row-icon"
aria-hidden="true"></i>
</td>
</tr>
@endforeach
</ul>
@if ( ! isset($permissions['errors']))
<div class="buttons">
<a href="{{ route('installer.environment') }}" class="button">
{{ trans('installer::installer_messages.permissions.next') }}
<i class="fa fa-angle-right fa-fw" aria-hidden="true"></i>
</a>
</div>
@endif
</tbody>
</table>
</div>
@if (!isset($permissions['errors']))
<div class="d-flex justify-content-end">
<a class="btn btn-primary d-flex align-items-center" href="{{ route('installer.environment') }}">
{{ trans('installer::installer_messages.permissions.next') }}
<i class="bi bi-arrow-right-short fs-2 lh-1 ms-2"></i>
</a>
</div>
@endif
@endsection

View File

@ -10,43 +10,67 @@
@endsection
@section('content')
<div class="container">
@foreach ($requirements['requirements'] as $type => $requirement)
<ul class="list">
<li class="list__item list__title {{ $phpSupportInfo['supported'] ? 'success' : 'error' }}">
<strong>{{ ucfirst($type) }}</strong>
@if ($type == 'php')
<strong>
<small>
(version {{ $phpSupportInfo['minimum'] }} required)
</small>
</strong>
<span class="float-right">
<strong>
{{ $phpSupportInfo['current'] }}
</strong>
<i class="fa fa-fw fa-{{ $phpSupportInfo['supported'] ? 'check-circle-o' : 'exclamation-circle' }} row-icon"
aria-hidden="true"></i>
</span>
@endif
</li>
@foreach ($requirements['requirements'][$type] as $extention => $enabled)
<li class="list__item {{ $enabled ? 'success' : 'error' }}">
{{ $extention }}
<i class="fa fa-fw fa-{{ $enabled ? 'check-circle-o' : 'exclamation-circle' }} row-icon" aria-hidden="true"></i>
</li>
<div class="install-2">
<h3 class="mb-5">系统环境检测</h3>
<table class="table table-hover text-black text-opacity-75 fs-5 mb-5">
<thead>
<th width="70%">环境</th>
<th width="30%">状态</th>
</thead>
<tbody>
@foreach ($requirements['requirements'] as $type => $requirement)
<tr>
<td colspan="3">
<strong class="fs-4">{{ ucfirst($type) }}</strong>
@if ($type == 'php')
<small>(version {{ $phpSupportInfo['minimum'] }} required)</small>
<span class="float-right">
<strong>{{ $phpSupportInfo['current'] }}</strong>
<i class="bi bi-{{ $phpSupportInfo['supported'] ? 'check2' : 'x' }} row-icon"
aria-hidden="true"></i>
</span>
@endif
</td>
</tr>
@foreach ($requirements['requirements'][$type] as $extention => $enabled)
<tr class="{{ $enabled ? '' : 'table-danger' }}">
<td>{{ $extention }}</td>
<td class="{{ $enabled ? 'text-success' : 'text-danger' }}"><i class="bi bi-{{ $enabled ? 'check-circle-fill' : 'exclamation-circle-fill' }} row-icon"
aria-hidden="true"></i></td>
</tr>
@endforeach
{{-- <ul class="list-group">
<li class="list__item list__title {{ $phpSupportInfo['supported'] ? 'success' : 'error' }}">
<strong>{{ ucfirst($type) }}</strong>
@if ($type == 'php')
<small>(version {{ $phpSupportInfo['minimum'] }} required)</small>
<span class="float-right">
<strong>{{ $phpSupportInfo['current'] }}</strong>
<i class="bi bi-{{ $phpSupportInfo['supported'] ? 'check-circle-fill' : 'exclamation-circle-fill' }} row-icon"
aria-hidden="true"></i>
</span>
@endif
</li>
@foreach ($requirements['requirements'][$type] as $extention => $enabled)
<li class="list__item {{ $enabled ? 'success' : 'error' }}">
{{ $extention }}
<i class="fa fa-fw fa-{{ $enabled ? 'check-circle-o' : 'exclamation-circle' }} row-icon"
aria-hidden="true"></i>
</li>
@endforeach
</ul> --}}
@endforeach
</ul>
@endforeach
</tbody>
</table>
@if (!isset($requirements['errors']) && $phpSupportInfo['supported'])
<div class="buttons">
<a class="button" href="{{ route('installer.permissions') }}">
<div class="d-flex justify-content-end">
<a class="btn btn-primary d-flex align-items-center" href="{{ route('installer.permissions') }}">
{{ trans('installer::installer_messages.requirements.next') }}
<i class="fa fa-angle-right fa-fw" aria-hidden="true"></i>
<i class="bi bi-arrow-right-short fs-2 lh-1 ms-2"></i>
</a>
</div>
@endif
</div>
@endsection

View File

@ -9,13 +9,17 @@
@endsection
@section('content')
<p class="text-center">
{{ trans('installer::installer_messages.welcome.message') }}
</p>
<p class="text-center">
<a href="{{ route('installer.requirements') }}" class="button">
{{ trans('installer::installer_messages.welcome.next') }}
<i class="fa fa-angle-right fa-fw" aria-hidden="true"></i>
</a>
</p>
<div class="install-1">
<h3 class="">{{ trans('installer::installer_messages.welcome.message') }}</h3>
<div class="content-main d-flex justify-content-center align-items-center flex-column">
<div class="welcome-img"><img src="{{ asset('/install/image/install-1.png') }}" class="img-fluid"></div>
<h5 class="mb-5 text-muted fw-3 fw-normal guide-text text-center lh-base">欢迎使用安装引导,在后面的步骤中我们将检测您的系统环境和安装条件是否达标,请根据每一步中的提示信息操作,谢谢。</h5>
<p class="text-center">
<a href="{{ route('installer.requirements') }}" class="btn btn-primary d-flex align-items-center">
{{ trans('installer::installer_messages.welcome.next') }}
<i class="bi bi-arrow-right-short fs-2 lh-1 ms-2"></i>
</a>
</p>
</div>
</div>
@endsection

View File

@ -0,0 +1,12 @@
@charset "UTF-8";
.install-1 {
.welcome-img {
max-width: 400px;
margin: 60px 0;
}
.guide-text {
max-width: 500px;
}
}

View File

@ -26,10 +26,7 @@
}
.right {
i {
font-size: 24px;
line-height: 1;
}
display: none;
}
span.index {
@ -67,6 +64,14 @@
font-size: 24px;
}
}
.right {
display: block;
i {
font-size: 24px;
line-height: 1;
}
}
}
}
}

View File

@ -3,23 +3,23 @@
$primary: #fd560f;
body {
background-color: #f6f7f8;
// background-color: #f6f7f8;
background-color: #f3f6f8;
display: flex;
height: 100vh;
// flex-direction: column;
> .aside-wrap {
width: 30%;
background-color: #fff;
padding: 40px 20px 40px 40px;
// flex: 1;
}
> .content {
width: 70%;
padding: 40px;
// flex: 1;
padding: 40px 60px;
}
}
@import "steps";
@import "install-1";

View File

@ -2951,7 +2951,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
/******/ "build/beike/admin/css/app": 0,
/******/ "build/beike/admin/css/bootstrap": 0,
/******/ "build/beike/admin/css/design": 0,
/******/ "build/beike/installer/app": 0
/******/ "install/css/app": 0
/******/ };
/******/
/******/ // no chunk on demand loading
@ -3001,14 +3001,14 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/admin/js/app.js")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/admin/css/bootstrap/bootstrap.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/admin/css/app.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/admin/css/filemanager/app.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/shop/default/css/bootstrap/bootstrap.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/shop/default/css/app.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./beike/installer/assets/scss/app.scss")))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/admin/css/design/app.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./resources/beike/admin/js/app.js")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./resources/beike/admin/css/bootstrap/bootstrap.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./resources/beike/admin/css/app.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./resources/beike/admin/css/filemanager/app.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./resources/beike/shop/default/css/bootstrap/bootstrap.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./resources/beike/shop/default/css/app.scss")))
/******/ __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./beike/installer/assets/scss/app.scss")))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["build/beike/shop/default/css/app","build/beike/shop/default/css/bootstrap","build/beike/admin/css/filemanager","build/beike/admin/css/app","build/beike/admin/css/bootstrap","build/beike/admin/css/design","install/css/app"], () => (__webpack_require__("./resources/beike/admin/css/design/app.scss")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()

View File

@ -1,5 +1,5 @@
body {
background-color: #f6f7f8;
background-color: #f3f6f8;
display: flex;
height: 100vh;
}
@ -10,7 +10,7 @@ body > .aside-wrap {
}
body > .content {
width: 70%;
padding: 40px;
padding: 40px 60px;
}
.aside-wrap .logo img {
@ -32,9 +32,8 @@ body > .content {
display: flex;
align-items: center;
}
.aside-wrap .steps-wrap ul li .right i {
font-size: 24px;
line-height: 1;
.aside-wrap .steps-wrap ul li .right {
display: none;
}
.aside-wrap .steps-wrap ul li span.index {
width: 40px;
@ -68,3 +67,18 @@ body > .content {
.aside-wrap .steps-wrap ul li.ing span.index i {
font-size: 24px;
}
.aside-wrap .steps-wrap ul li.ing .right {
display: block;
}
.aside-wrap .steps-wrap ul li.ing .right i {
font-size: 24px;
line-height: 1;
}
.install-1 .welcome-img {
max-width: 400px;
margin: 60px 0;
}
.install-1 .guide-text {
max-width: 500px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

2
webpack.mix.js vendored
View File

@ -32,7 +32,7 @@ mix.sass('resources/beike/shop/default/css/app.scss', 'public/build/beike/shop/d
mix.js('resources/beike/shop/default/js/app.js', 'public/build/beike/shop/default/js/app.js');
// 安装引导
mix.sass('beike/installer/assets/scss/app.scss', 'public/build/beike/installer/app.css');
mix.sass('beike/installer/assets/scss/app.scss', 'public/install/css/app.css');
// design