README

基于 Azzara 的响应式面板管理模板库。自带一些预定义功能，如：用户控制、带掩码的字段、通知等。

索引

依赖项
安装
可用资源
1. 表单
2. 登录
3. 用户档案
4. 模板
5. ACLs
6. 用户
7. 路由
8. UI
9. 验证
10. 可确认的
11. 表单提交动画
12. 解析器
13. 巴西各州
14. 通知
使用的库

依赖项

安装

$ composer require beautiful-sea/laravel_ramodnil

通过 Composer 下载包后，您需要运行以下命令来安装库：

$ php artisan ramodnil:install

警告：安装库将会替换您 Laravel 项目目录中的一些文件。建议在 Laravel 的干净安装上执行此命令。

安装可能需要一些时间，因为会下载多个 NPM 包到您的项目中。

安装将自动运行 php artisan make:auth 命令以生成一个带有一些预先配置的迁移的用户认证系统，这些迁移已针对 Laravel 默认安装的用户表进行了修改，以添加一些额外的字段。

安装后，您可以通过以下命令运行迁移：

$ php artisan migrate

安装将复制多个样式和脚本文件到 resources 目录中。样式文件位于 resources/sass/_ramodnil.scss，您需要手动将其导入到 resources/sass/app.scss 文件中。

@import 'ramodnil';

导入后，您需要通过以下命令编译脚本：

$ npm run dev

或者，如果您希望每次修改资产时自动进行编译，请执行并运行以下命令：

$ npm run watch

使用以下命令自动生成带有通知配置的 autoload：

$ composer dump-autoload

在您的 routes/web.php 路由文件中，将根地址指向 Home 页面

之前

Route::get('/', function() {
    return view('welcome');
});

之后

Route::get('/', 'HomeController@index')->name('home');

\BeautifulSea\LaravelRamodnil\LaravelRamodnilServiceProvider::routes();

安装会自动添加自己的路由。在此文档的路由部分，您可以了解如何覆盖这些路由。

可用资源

表单

所有表单都使用 BootstrapForms 库。要查看该库的完整文档，请点击此处。

用户配置文件

该库使用数值常量来表示用户配置文件，具体如下

管理员 => 0
普通用户 => 1

这些常量定义在app/User.php模型中

//...

const ROLE_ADMIN = 0;
const ROLE_COMMON = 1;

public static function roles() {
    return [
        self::ROLE_ADMIN => 'Administrador',
        self::ROLE_COMMON => 'Comum',
    ];
}

public function getRoleStringAttribute() {
    return self::roles()[$this->role];
}

//...

您可以根据需要添加新的配置文件或修改现有的配置文件。这些常量存储在users表中的role字段（由安装迁移生成）的类型为INTEGER中

getRoleStringAttribute函数是一个访问器，用于获取用户配置文件的文本表示形式。有关Laravel中访问器的更多信息，请参阅文档。

常量使用示例

$user->role = \App\User::ROLE_ADMIN;

// Equivalente a:
$user->role = 0;

访问器使用示例

<p><b>Perfil do Usuário:</b> {{ $user->role_string }}</p>

<!-- Equivalente a: -->
<p><b>Perfil do Usuário:</b> Administrador</p>

模板

所有模板都位于/resources/views/ramodnil中。在此目录中，存在一个master模板，可以在此添加项目的元标签以及修改页面的标题和其他全局属性。

raw模板用于登录页面和其他具有相同格式的页面。

其他页面将继承page模板。

要修改菜单，请访问此目录中的main-menu视图。在菜单部分，您可以查看有关如何添加菜单项的更多详细信息。

resources/views/home.blade.php视图的结构，遵循库模板

@extends('ramodnil.page')

@section('css')
    {{-- Seus estilos específicos de página aqui --}}
@endsection

@section('header-title')
    <h1>
        Bem-vindo
    </h1>
@stop

@section('header-breadcrumbs')
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@section('content')
    {{-- Seu conteúdo aqui --}}
@stop

@section('js')
    {{-- Seus scripts específicos de página aqui --}}
@endsection

样式和脚本

样式文件位于resources/sass/_ramodnil.scss中。如安装说明中所述，该文件不会自动导入到resources/sass/app.scss中，以避免与项目现有的样式冲突。要导入它，请在app.scss文件中使用以下命令

@import 'ramodnil';

您需要手动解决导入后出现的任何样式冲突。

与样式文件不同，脚本文件resources/js/ramodnil.js已经自动添加到resources/js/bootstrap.js文件的末尾。

因此，您可以在库提供的基础上独立定义自己的全局样式和脚本，但您也可以根据自己的意愿修改这些文件。

页面特定的样式和脚本可以放在视图中的相应@section中。

菜单

菜单模板位于resources/ramodnil/main-menu.blade.php中。在此文件的开始部分，生成了两个变量来识别当前控制器和当前操作，这样就可以在页面打开相应菜单项时使菜单项处于活动状态。

新菜单项的示例

@php
	$class = '';

if ($controller == 'AlgumController') {
	$class = 'active';
}
@endphp

<li class="nav-item {{ $class }}">
    <a href="#" class="nav-link ">
        <i class="fas fa-home"></i>
        <p>Dashboard</p>
    </a>
</li>

该库使用FontAwesome图标，但您也可以使用您想要的任何其他图标库。

包含两个菜单项的新组的示例

@php
$class = 'collapsed';

if ($controller == 'UsersController') {
	$class = 'active show';
}
@endphp
	<li class="nav-item {{ $class }} ">
	    <a data-toggle="collapse" href="#submenu">
	        <i class="nav-icon fa fa-cog"></i>
	        <p>Configurações</p>
	        <span class="caret"></span>
	    </a>
	    <div class="{{ $class }} collapse collapsed " id="submenu">
	        <ul class="nav nav-collapse">

	        @can('index', \App\User::class)    
	        	@php
	         	$class = '';

		         if ($controller == 'UsersController' && $action <> 'profile')
		         {
		             $class = 'active';
		         }
	        	@endphp
		        <li class="{{ $class }}">
		            <a href="{{ route('users.index') }}">
		                <p class="sub-item">Usuários</p>
		            </a>
		        </li>
	        @endcan

	        @php
		        $class = '';

		        if ($controller == 'UsersController' && $action == 'profile') 
		        {
		            $class = 'active';
		        }
	        @endphp
		        <li class="{{ $class }}">
		            <a href="{{ route('users.profile') }}">
		                <p class="sub-item">Perfil</p>
		            </a>
		        </li>
	    	</ul>
		</div>
	</li>

ACLs

安装会自动在app/Policies/UserPolicy.php中为Model用户创建一个Policy，该文件已自动导入到app/Providers/AuthServiceProvider.php中。其他策略必须手动创建和导入。有关策略的更多信息，请参阅Laravel文档。

允许管理员访问任何内容的默认指令也已添加到AuthServiceProvider.php中

// ...

class AuthServiceProvider extends ServiceProvider
{
    
    // ...

    public function boot()
    {
        $this->registerPolicies();

        Gate::before(function ($user) {
            if ($user->role == User::ROLE_ADMIN) {
                return true;
            }
        });

        // ...
    }
}

策略使用示例

@can('create', \App\User::class)
    <a href="{{ route('users.create') }}" class="btn btn-primary"><i class="fa fa-plus"></i> Novo Usuário</a>
@endcan

@foreach($users as $u)
    @can('edit', $u)
        <a href="{{ route('users.edit', ['user' => $u]) }}" class="btn btn-default btn-sm"><i class="fa fa-pencil-alt"></i> Editar</a>
    @endcan
@endforeach

用户

该库生成简单的用户 CRUD。其视图可以在 resources/views/users 中查看或修改，相应的控制器在 app/Http/Controllers/UsersController.php 中。

用户列表使用 jQuery 插件 DataTables。

该区域还具备锁定/解锁用户的功能。

默认情况下，您无法在此列表中锁定或删除自己的用户。此行为可以在同一 view 中更改。

个人资料

该库有一个个人资料页面，您可以在其中更改密码或上传头像。如果没有上传图片，将使用包含您姓名和姓氏首字母的 placeholder。此行为可以在模型 app/User.php 中的 Accessor getAvatarAttribute() 内更改。

路由

安装会在 routes/web.php 文件末尾添加以下命令

\BeautifulSea\LaravelRamodnil\LaravelRamodnilServiceProvider::routes();

该命令包含以下路由

Route::group(['prefix' => '/users'], function () {
    Route::post('/first-user', 'UsersController@storeFirstUser')->name('users.first-user');
    Route::get('/profile', 'UsersController@profile')->name('users.profile');
    Route::post('/profile', 'UsersController@updateProfile')->name('users.save-profile');
    Route::post('/check-email', 'UsersController@checkEmail')->name('users.check-email');
    Route::post('/check-profile-email', 'UsersController@checkProfileEmail')->name('users.check-profile-email');
    Route::post('/check-profile-password', 'UsersController@checkProfilePassword')->name('users.check-profile-password');
    Route::get('/block/{user}', 'UsersController@block')->name('users.block');
    Route::get('/unblock/{user}', 'UsersController@unblock')->name('users.unblock');
});
Route::get('logout', '\App\Http\Controllers\Auth\LoginController@logout');
Route::resource('/users', 'UsersController');

上述任何路由都可以被覆盖，只要它们在上述命令之前定义。

UI

马赛克

这些马赛克使用 jQuery 库 MaskPlugin 和 MaskMoney。

要使用这些马赛克，请将相应的类添加到字段中

.cpf-mask - CPF (000.000.000-00)
.cnpj-mask - CNPJ (00.000.000/0000-00)
.cpf-cnpj-mask - 在同一字段中输入 CPF 或 CNPJ，随着输入的进行而改变
.tel-ddd-mask - 带有 DDD 的电话，接受带有或没有数字 9 的格式 ((00) 00000000 或 (00) 900000000)
.cep-mask - CEP (00000-000)
.time-mask - 时间，格式 小时:分钟 (00:00)
.date-mask - 日期，格式 日/月/年 (99/99/9999)
.money-mask - 货币 (R$ 999.999,99)
.number-mask - 带小数的数字 (999.999,99)
.percent-mask - 百分比 (999,99%)

马赛克配置可以在 resources/js/ramodnil.js 中更改。

日期选择器

将类 .datepicker 添加到字段以使用 jQueryUI 库的 Datepicker。

注意：类 .date-mask 可以与 Datepicker 一起使用。

Datepicker 的配置可以在 resources/js/ramodnil.js 中更改。

Select2

将类 .select-2 添加到 Select 类型的字段以使用 Select2。

Select2 的配置可以在 resources/js/ramodnil.js 中更改。

编辑器

将类 .editor 添加到 TextArea 类型的字段以使用 Summernote。

编辑器的配置可以在 resources/js/ramodnil.js 中更改。

验证

本节描述了一些自定义验证，用于在 jQuery Validation 库中使用。

所有验证都可以在 resources/js/ramodnil.js 中更改。

dateBR

验证字段是否符合 dd/mm/aaaa 格式的有效日期。

示例

{{ Form::bsText('data', 'Data', ['class' => 'datepicker date-mask']) }}

$('#id-do-formulario').validate({
    rules: {
        data: {
            required: true,
            dateBR: true,
        },
    }
});

period

验证一个日期字段相对于另一个日期字段的有效时间段。

示例

 <div class="row">
    <div class="col-md-6">
        {{ Form::bsText('data_inicio', 'Data Início', ['class' => 'datepicker date-mask']) }}
    </div>

    <div class="col-md-6">
        {{ Form::bsText('data_fim', 'Data Fim', ['class' => 'datepicker date-mask']) }}
    </div>
</div>

$('#id-do-formulario').validate({
    rules: {
        data_inicio: {
            required: true,
            dateBR: true,
        },
        data_fim: {
            required: true,
            dateBR: true,
            period: ['data_inicio'],
        },
    }
});

filesize

验证文件类型的字段是否具有特定兆字节的文件大小。

示例

{{ Form::bsFile('arquivo', 'Arquivo <small>máx 2MB</small>') }}

$('#id-do-formulario').validate({
    rules: {
        arquivo: {
            required: true,
            extension: ['jpg', 'jpeg', 'png'],
            filesize: 2,
        },
    }
});

cpf

验证包含 .cpf-mask 面罩的字段是否为有效的 CPF，使用模 11 验证。

示例

{{ Form::bsText('cpf', 'CPF', ['class' => 'cpf-mask']) }}

$('#id-do-formulario').validate({
    rules: {
        cpf: {
            required: true,
            cpf: true,
        },
    }
});

cnpj

验证包含 .cnpj-mask 面罩的字段是否为有效的 CNPJ，使用模 11 验证。

示例

{{ Form::bsText('cnpj', 'CNPJ', ['class' => 'cnpj-mask']) }}

$('#id-do-formulario').validate({
    rules: {
        cnpj: {
            required: true,
            cnpj: true,
        },
    }
});

cpfCnpj

验证包含 .cpf-cnpj-mask 面罩的字段是否为有效的 CPF/CNPJ，使用模 11 验证。

示例

{{ Form::bsText('cpf_cnpj', 'CPF/CNPJ', ['class' => 'cpf-cnpj-mask']) }}

$('#id-do-formulario').validate({
    rules: {
        cpf_cnpj: {
            required: true,
            cpfCnpj: true,
        },
    }
});

editorRequired

检查包含 .editor 面罩的字段是否为空或非空。

示例

{{ Form::bsTextarea('editor', 'Editor', ['class' => 'editor']) }}

$('#id-do-formulario').validate({
    ignore: [], // Essa diretiva é obrigatória para esse validator funcionar
    rules: {
        editor: 'editorRequired',
    }
});

可确认

将 .confirmable 类添加到任何按钮或链接上，以便为其添加确认窗口。这个功能在删除按钮上非常常用。

表单提交动画

默认情况下，当提交表单时，提交按钮将被禁用，其中的文本将被旋转器替换。这防止用户多次点击提交按钮。

要禁用此行为，请将 .without-spinner 类添加到页面中的 <form> 标签。

解析器

在文件 app/Http/Controller/Controller.php 中，安装将复制两个函数以转换日期和货币类型的值。

在控制器中使用的示例

$date = '03/05/2019';
$newDate = $this->parseDate($date); // 2019-05-03

$price = 'R$ 300,00';
$newPrice = $this->parseCurrency($price); // 300

巴西各州

在文件 app/Http/Controller/Controller.php 中，安装将复制一个包含所有巴西各州及其相应缩写的数组。

const ESTADOS_BRASILEIROS = [
    'AC' => 'Acre',
    'AL' => 'Alagoas',
    'AP' => 'Amapá',
    'AM' => 'Amazonas',
    'BA' => 'Bahia',
    'CE' => 'Ceará',
    'DF' => 'Distrito Federal',
    'ES' => 'Espírito Santo',
    'GO' => 'Goiás',
    'MA' => 'Maranhão',
    'MT' => 'Mato Grosso',
    'MS' => 'Mato Grosso do Sul',
    'MG' => 'Minas Gerais',
    'PA' => 'Pará',
    'PB' => 'Paraíba',
    'PR' => 'Paraná',
    'PE' => 'Pernambuco',
    'PI' => 'Piauí',
    'RJ' => 'Rio de Janeiro',
    'RN' => 'Rio Grande do Norte',
    'RS' => 'Rio Grande do Sul',
    'RO' => 'Rondônia',
    'RR' => 'Roraima',
    'SC' => 'Santa Catarina',
    'SP' => 'São Paulo',
    'SE' => 'Sergipe',
    'TO' => 'Tocantins'
];

在 Select 中使用的示例

{{ Form::bsSelect('estados', 'Estados', \App\Http\Controller::ESTADOS_BRASILEIROS) }}

通知

该库最初为创建用户生成一个通知系统，通知管理员面板。

创建了一个名为 Notifications/CreatedUser.php 的文件。这是创建通知的文件。

通知通过位于 resources/views/ramodnil/page.blade.php 的文件显示，如下所示

@foreach(auth()->user()->unreadNotifications as $notification)
<li>
<div class="notif-scroll scrollbar-outer">
    <div class="notif-center">
	@include('layouts.partials.notification.'.snake_case(class_basename($notification->type)))
    </div>
</div>
</li>
@endforeach

@include('layouts.partials.notification.'.snake_case(class_basename($notification->type))) 的功能是包含为每个类型创建的显示文件，这些文件位于 resources/views/layouts/partials/notification/。

有关通知的更多信息，请参阅 Laravel 文档

beautiful-sea / laravel_ramodnil

维护者

详细信息