Dcat-admin主题使用说明

自从上次分享主题以后,受到了不少小伙伴的关注和支持。有些小伙伴反馈不知道如何使用主题,本来去年就应该发这篇说明的,一直在忙自己的项目,没有时间整理。正好过年放假在家,就抽时间赶紧整理出来,方便大家使用。

使用说明

1、为方便操作,我这边先安装一套新的项目,具体安装过程就省略了。不明白的小伙伴可以参考Dcat-admin的安装说明:安装《Dcat Admin 中文文档》
2、将公共的css文件放在目录public/static/css/目录下(具体也可以根据自己情况调整)
Dcat-admin主题使用说明
3、修改config/admin.php里的layout.color修改成ant-blue,layout.sidebar_style修改成dark。
Dcat-admin主题使用说明
4、在app/Admin/bootstrap.php里面增加以下代码,主要为了引入公共的CSS文件、修改主题的颜色、初始化表格、初始化表单以及重写Dcat-admin的部分页面,初始化表格、初始化表单可以根据自己实际情况进行调整,也可以不要。

// 引入CSS文件
Admin::baseCss(['/static/css/common.css']);

// 修改主题颜色
Color::extend('ant-blue', [
    'primary' => '#1890ff',
    'primary-darker' => '#1890ff',
    'link' => '#1890ff',
]);

// 初始化表格
Grid::resolving(function (Grid $grid) {
    $grid->model()->orderByDesc($grid->model()->getKeyName());
    $grid->toolsWithOutline(false);
    $grid->actions(function (Grid\Displayers\Actions $actions) {
        $actions->disableView();
    });
});

// 初始化表单
Form::resolving(function (Form $form) {
    $form->disableEditingCheck();
    $form->disableCreatingCheck();
    $form->disableViewCheck();
    $form->disableResetButton();
    $form->tools(function (Form\Tools $tools) {
        $tools->disableDelete();
        $tools->disableView();
        $tools->disableList();
    });
});

// 覆盖模板文件
app('view')->prependNamespace('admin', resource_path('views/admin'));

5、重写表格行操作:新建文件app/Admin/Grid/Displayers/RowActions.php,将下面代码复制到文件里,然后修改config/admin.php里的grid.grid_action_class的值为App\Admin\Grid\Displayers\RowActions::class。

<?php

namespace App\Admin\Grid\Displayers;

use Dcat\Admin\Grid\Displayers\Actions;
use Illuminate\Contracts\View\Factory;
use Illuminate\View\View;

class RowActions extends Actions
{
    /**
     * @return string
     */
    protected function getViewLabel()
    {
        $label = trans('admin.show');
        return '<span class="text-success">' . $label . '</span>';
    }

    /**
     * @return string
     */
    protected function getEditLabel()
    {
        $label = trans('admin.edit');

        return '<span class="text-primary">' . $label . '</span>';
    }

    /**
     * @return string
     */
    protected function getQuickEditLabel()
    {
        $label = trans('admin.edit');
        $label2 = trans('admin.quick_edit');

        return '<span class="text-blue-darker" title="' . $label2 . '">' . $label . '</span>';
    }

    /**
     * @return string
     */
    protected function getDeleteLabel()
    {
        $label = trans('admin.delete');

        return '<span class="text-danger">' . $label . '</span>';
    }
}

Dcat-admin主题使用说明
6、重写登录页面:新建文件resources/views/admin/pages/login.blade.php,将下面代码复制到文件里。(不需要重写登录页面,可以跳过)

<style>
    .login-page{background-color: #f5f5f5;}
    .login-box{display: -webkit-box;display: flex;width: 750px;margin-top: -50px;}
    .content-left{width: 320px;height: 500px;border-radius: 6px 0 0 6px;overflow: hidden;}
    .content-right{position: relative;width: 430px;height: 500px;background-color: #fff;text-align: center;border-radius: 0 6px 6px 0;overflow: hidden;margin: 0 auto;box-shadow: 0 0 2px 0 rgba(0,0,0,.12);}
    .login-card-body{width: 318px;margin: 0 auto;padding: 0;}
    .login-box-msg{font-size: 26px;color: rgba(0,0,0,.8);font-weight: 700;margin-top: 80px;margin-bottom: 50px;text-align: left;line-height: 26px;padding: 0;}
    .login-btn{width: 100%;height: 42px;box-shadow: none;}
    .content{overflow-x: hidden;}
    .form-group{margin-bottom: 30px;}
    .form-group .control-label{text-align: left;width: 100%;}
    .form-group .form-control{height: 42px;border: 1px solid #ebeef5;}
    .form-group .form-control:focus{box-shadow: none;}
    .form-label-group{margin-bottom: 30px;}
    .form-control-position{width: 42px;height: 42px;line-height: 42px;}
    .help-block{text-align: left;}
    .copyright{position:fixed;bottom:30px;}
    .copyright p{margin-bottom: 0;}
    @media (max-width: 767px) {
        .content-left{display: none;}
    }
    @media (max-width: 450px) {
        .content-right{width: 100%;}
    }
</style>

<div class="login-page">
    <div class="login-box">
        <div class="content-left">
            <img width="100%" src="{{ asset('static/images/login.png') }}" alt="">
        </div>

        <div class="content-right">
            <div class="login-card-body">

                <p class="login-box-msg">{{ config('admin.name') }},欢迎您回来</p>
                <form id="login-form" method="POST" action="{{ admin_url('auth/login') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                    <fieldset class="form-label-group form-group position-relative has-icon-left">
                        <input
                            type="text"
                            class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
                            name="username"
                            placeholder="{{ trans('admin.username') }}"
                            value="{{ old('username') }}"
                            required
                            autofocus
                        >

                        <div class="form-control-position">
                            <i class="feather icon-user"></i>
                        </div>

                        <label for="email">{{ trans('admin.username') }}</label>

                        <div class="help-block with-errors"></div>
                        @if($errors->has('username'))
                            <span class="invalid-feedback text-danger" role="alert">
                                            @foreach($errors->get('username') as $message)
                                    <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                @endforeach
                                        </span>
                        @endif
                    </fieldset>

                    <fieldset class="form-label-group form-group position-relative has-icon-left">
                        <input
                            minlength="5"
                            maxlength="20"
                            id="password"
                            type="password"
                            class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                            name="password"
                            placeholder="{{ trans('admin.password') }}"
                            required
                            autocomplete="current-password"
                        >

                        <div class="form-control-position">
                            <i class="feather icon-lock"></i>
                        </div>
                        <label for="password">{{ trans('admin.password') }}</label>

                        <div class="help-block with-errors"></div>
                        @if($errors->has('password'))
                            <span class="invalid-feedback text-danger" role="alert">
                                            @foreach($errors->get('password') as $message)
                                    <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                @endforeach
                                            </span>
                        @endif

                    </fieldset>
                    <div class="form-group d-flex justify-content-between align-items-center">
                        <div class="text-left">
                            @if(config('admin.auth.remember'))
                                <fieldset class="checkbox">
                                    <div class="vs-checkbox-con vs-checkbox-primary">
                                        <input id="remember" name="remember"  value="1" type="checkbox" {{ old('remember') ? 'checked' : '' }}>
                                        <span class="vs-checkbox">
                                                        <span class="vs-checkbox--check">
                                                          <i class="vs-icon feather icon-check"></i>
                                                        </span>
                                                    </span>
                                        <span> {{ trans('admin.remember_me') }}</span>
                                    </div>
                                </fieldset>
                            @endif
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary float-right login-btn">

                        {{ __('admin.login') }}
                        &nbsp;
                        <i class="feather icon-arrow-right"></i>
                    </button>
                </form>

            </div>
        </div>
    </div>
    <div class="copyright">版权信息</div>
</div>

<script>
    Dcat.ready(function () {
        // ajax表单提交
        $('#login-form').form({
            validate: true,
        });
    });
</script>

7、编译主题颜色:在项目目录执行命令:php artisan admin:minify ant-blue --color 1890ff --publish,如果大家希望修改成其他主题色,也可以参考dcat-admin的说明:主题与颜色《Dcat Admin 中文文档》

完整代码

链接: pan.baidu.com/s/1vH_t1zx_WCyuag-hA... 提取码: nuqv

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 2

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!