安装引导优化

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() 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); 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') 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') 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()) { if (installed()) {
exit('Already 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> <script src="{{ asset('vendor/layer/3.5.1/layer.js') }}"></script>
<link rel="shortcut icon" href="{{ asset('/image/favicon.png') }}"> <link rel="shortcut icon" href="{{ asset('/image/favicon.png') }}">
<script src="{{ asset('vendor/bootstrap/5.1.3/js/bootstrap.min.js') }}"></script> <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') @yield('style')
</head> </head>
@ -25,18 +25,41 @@
<div class="logo mb-5"><img src="{{ asset('/image/logo.png') }}" class="img-fluid"></div> <div class="logo mb-5"><img src="{{ asset('/image/logo.png') }}" class="img-fluid"></div>
<div class="steps-wrap"> <div class="steps-wrap">
<ul> <ul>
<li class="success"> <li class="{{ $steps == 1 ? 'ing' : '' }} {{ $steps > 1 ? 'success' : '' }}">
<div class="left"><span class="index"><i class="bi bi-check-lg"></i></span>已经成功的步骤</div>
</li>
<li class="ing">
<div class="left"> <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> </div>
<span class="right"><i class="bi bi-arrow-right-short"></i></span> <span class="right"><i class="bi bi-arrow-right-short"></i></span>
</li> </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> </ul>
</div> </div>
{{-- <div class="container d-flex justify-content-between align-items-center"> {{-- <div class="container d-flex justify-content-between align-items-center">

View File

@ -1,35 +1,56 @@
@extends('installer::layouts.master') @extends('installer::layouts.master')
@section('template_title') @section('template_title')
{{ trans('installer::installer_messages.permissions.templateTitle') }} {{ trans('installer::installer_messages.permissions.templateTitle') }}
@endsection @endsection
@section('title') @section('title')
<i class="fa fa-key fa-fw" aria-hidden="true"></i> <i class="fa fa-key fa-fw" aria-hidden="true"></i>
{{ trans('installer::installer_messages.permissions.title') }} {{ trans('installer::installer_messages.permissions.title') }}
@endsection @endsection
@section('content') @section('content')
<div class="install-2">
<ul class="list"> <h3 class="mb-5">文件夹权限检测</h3>
@foreach($permissions['permissions'] as $permission) {{-- <ul class="list">
@foreach ($permissions['permissions'] as $permission)
<li class="list__item list__item--permissions {{ $permission['isSet'] ? 'success' : 'error' }}"> <li class="list__item list__item--permissions {{ $permission['isSet'] ? 'success' : 'error' }}">
{{ $permission['folder'] }} {{ $permission['folder'] }}
<span> <span>
<i class="fa fa-fw fa-{{ $permission['isSet'] ? 'check-circle-o' : 'exclamation-circle' }}"></i> <i class="fa fa-fw fa-{{ $permission['isSet'] ? 'check-circle-o' : 'exclamation-circle' }}"></i>
{{ $permission['permission'] }} {{ $permission['permission'] }}
</span> </span>
</li> </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 @endforeach
</ul> </tbody>
</table>
@if ( ! isset($permissions['errors'])) </div>
<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
@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 @endsection

View File

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

View File

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

View File

@ -3,23 +3,23 @@
$primary: #fd560f; $primary: #fd560f;
body { body {
background-color: #f6f7f8; // background-color: #f6f7f8;
background-color: #f3f6f8;
display: flex; display: flex;
height: 100vh; height: 100vh;
// flex-direction: column;
> .aside-wrap { > .aside-wrap {
width: 30%; width: 30%;
background-color: #fff; background-color: #fff;
padding: 40px 20px 40px 40px; padding: 40px 20px 40px 40px;
// flex: 1;
} }
> .content { > .content {
width: 70%; width: 70%;
padding: 40px; padding: 40px 60px;
// flex: 1;
} }
} }
@import "steps"; @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/app": 0,
/******/ "build/beike/admin/css/bootstrap": 0, /******/ "build/beike/admin/css/bootstrap": 0,
/******/ "build/beike/admin/css/design": 0, /******/ "build/beike/admin/css/design": 0,
/******/ "build/beike/installer/app": 0 /******/ "install/css/app": 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@ -3001,14 +3001,14 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // 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","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","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","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","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","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","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","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","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","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","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","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","build/beike/installer/app"], () => (__webpack_require__("./beike/installer/assets/scss/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","build/beike/installer/app"], () => (__webpack_require__("./resources/beike/admin/css/design/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__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

View File

@ -1,5 +1,5 @@
body { body {
background-color: #f6f7f8; background-color: #f3f6f8;
display: flex; display: flex;
height: 100vh; height: 100vh;
} }
@ -10,7 +10,7 @@ body > .aside-wrap {
} }
body > .content { body > .content {
width: 70%; width: 70%;
padding: 40px; padding: 40px 60px;
} }
.aside-wrap .logo img { .aside-wrap .logo img {
@ -32,9 +32,8 @@ body > .content {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.aside-wrap .steps-wrap ul li .right i { .aside-wrap .steps-wrap ul li .right {
font-size: 24px; display: none;
line-height: 1;
} }
.aside-wrap .steps-wrap ul li span.index { .aside-wrap .steps-wrap ul li span.index {
width: 40px; width: 40px;
@ -68,3 +67,18 @@ body > .content {
.aside-wrap .steps-wrap ul li.ing span.index i { .aside-wrap .steps-wrap ul li.ing span.index i {
font-size: 24px; 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.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 // design