README

Laravel仪表盘模板

💫作为包的基本仪表盘模板💫

注意：由于其基于Blade构建，因此不适用于单页应用程序。然而，您可以在所有页面上使用Vue/React等组件。

安装

composer require sandulat/laravel-dashboard-template
php artisan laravel-dashboard-template:install

注意：更新包时，要重新发布前端资源，请使用：php artisan laravel-dashboard-template:publish

install命令将发布前端资源并创建一个新的服务提供者App\Providers\DashboardServiceProvider。这基本上是模板的主要配置，但首先让我们看看如何在下一节中显示仪表盘。

布局

创建一个路由和一个控制器，该控制器将返回一个视图。在视图中放置以下代码

my_view.blade.php

@extends('laravel-dashboard-template::page')

@section('ldt-content')
    Some content
@endsection

注意：ldt代表laravel-dashboard-template。

如您所见，laravel-dashboard-template::page只是一个布局。除了ldt-content之外，布局还提供了更多的附加插槽

• ldt-head - 用于CSS、meta等的头部区域。
• ldt-scripts - 用于包含JS文件的脚本区域。
• ldt-topbar-left - 顶栏的左侧区域。
• ldt-topbar-right - 顶栏的右侧区域，紧邻用户下拉菜单。
• ldt-sidebar-footer - 侧边栏的底部区域。

为了避免重复这些插槽，最好创建自己的布局来扩展包的布局。

my_layout.blade.php

@extends('laravel-dashboard-template::page')

@section('ldt-topbar-right')
    Language Select
@endsection

现在，在您的视图中可以这样做

my_view.blade.php

@extends('my_layout')

@section('ldt-content')
    Some content
@endsection

卡片

除了布局之外，该包还提供了一个卡片组件

@component('laravel-dashboard-template::components.card')
    @slot('title')
        Dahboard
    @endslot

    Content
@endcomponent

结果可以在文档顶部的截图中看到。

警报

默认情况下，该包将在布局的content区域上方显示两种类型的警报。当您使用success和error闪存数据重定向时，它们将显示出来。

return back()->with('success', 'My success message.');

return back()->with('error', 'My error message.');

配置

您可以在已安装的提供者App\Providers\DashboardServiceProvider中配置仪表盘。默认情况下它是空的，因为一切都已经配置好了，因此您可以立即开始构建，但是您可以添加以下方法来开始自定义仪表盘

/**
 * Topbar user name resolver.
 *
 * @return string
 */
public function userName(): string
{
    return Auth::check() ? Auth::user()->name : 'Guest';
}

/**
 * Topbar user avatar resolver.
 *
 * @return string
 */
public function userAvatar(): string
{
    if (Auth::check() && Auth::user()->avatar) {
        return Auth::user()->avatar;
    }

    return URL::asset('/vendor/laravel-dashboard-template/images/avatar.svg')
}

/**
 * Sidebar links.
 *
 * @return array
 */
public function sidebarLinks(): array
{
    return [
        'Menu' => [
            [
                'label' => 'Users',
                'url' => route('users'),
                'children' => [
                    [
                        'label' => 'Active Users',
                        'url' => route('users.active'),
                    ],
                ],
            ],
        ],
    ];
}

/**
 * Profile dropdown links.
 *
 * @return array
 */
public function profileDropdownLinks(): array
{
    return [
        [
            'label' => 'Edit Profile',
            'url' => route('profile'),
        ],
    ];
}

/**
 * Logout the user.
 *
 * @param \Illuminate\Http\Request $request
 * @return void
 */
public function logout(Request $request): void
{
    Auth::guard()->logout();

    $request->session()->invalidate();
}

/**
 * Action to be performed after logout.
 *
 * @return void
 */
public function loggedOut(): void
{
    //
}

/**
 * Redirect after logout.
 *
 * @return \Illuminate\Http\RedirectResponse
 */
public function logoutRedirect(): RedirectResponse
{
    return redirect('/');
}

注意：此服务提供者中的每个方法都具有依赖注入。

自定义

我尽量将模板分解成尽可能多的组件和部分。只需在您的项目中创建文件夹：resources/views/vendor/laravel-dashboard-template，然后您就可以从包中复制文件并进行自定义。以下是列表

• 部分/alert.blade.php
• 部分/alert_error.blade.php
• 部分/alert_success.blade.php
• 部分/sidebar.blade.php
• 部分/sidebar_link.blade.php
• 部分/sidebar_logo.blade.php
• 部分/topbar_profile_dropdown.blade.php

• 组件/card.blade.php
• 组件/dropdown.blade.php
• 组件/dropdown_item.blade.php
• 组件/topbar.blade.php

使用Vue/React等组件

包裹仪表盘的主要div具有一个app id。您可以将前端框架加载到这个id上，并在所有页面上开始使用您的组件。

// Vue
new Vue({
    el: '#app',
});

//React
ReactDOM.render(<App />, document.getElementById('app'));

编译前端资源后，您可以像这样包含它们

@section('ldt-head')
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
@endsection
@section('ldt-scripts')
    <script src="{{ mix('/js/app.js') }}"></script>
@endsection

注意：如果您没有前端资源版本化，您可能希望使用asset()方法而不是mix()。

自定义退出按钮

您可以通过将display: none;应用于id #ldt-logout-button来隐藏默认的退出按钮。该模板已提供带有可自定义回调的退出系统，因此您可以加以利用。只需使用JavaScript提交默认的“隐藏”退出表单。

document.getElementById("ldt-logout-form").submit();

鸣谢

由 Stratulat Alexandru 创建。