Dcat-admin主題使用說明

自從上次分享主題以後，受到了不少小夥伴的關注和支援。有些小夥伴反饋不知道如何使用主題，本來去年就應該發這篇說明的，一直在忙自己的專案，沒有時間整理。正好過年放假在家，就抽時間趕緊整理出來，方便大家使用。

使用說明

1、為方便操作，我這邊先安裝一套新的專案，具體安裝過程就省略了。不明白的小夥伴可以參考Dcat-admin的安裝說明：安裝《Dcat Admin 中文文件》
2、將公共的css檔案放在目錄public/static/css/目錄下（具體也可以根據自己情況調整）

3、修改config/admin.php裡的layout.color修改成ant-blue，layout.sidebar_style修改成dark。

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>';
    }
}

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 協議》，轉載必須註明作者和本文連結