Dcat Admin v1.7.0 釋出 - 增加全新選單樣式，以及全元件非同步渲染功能

Jiangqh發表於2020-08-24
元件非同步
系列文章：
Dcat Admin v1.6.5 釋出 - 對後端開發者友好的高顏值後臺系統構建工具，增加全新表格樣式 (更符合國內審美) Dcat Admin v1.7.0 釋出 - 增加全新選單樣式，以及全元件非同步渲染功能

上次版本釋出後本以為可以全心投入2.0的開發工作，沒想到在使用的過程中仍然發現有很多需要優化的細節，所以索性在2.0之前把這些功能都做了…

此次版本更新主要是優化介面以及增加全元件非同步渲染功能，下面簡單介紹一下此次更新的主要內容

全新選單樣式

新選單樣式體驗請前往演示站點（點選網站設定可以切換樣式），效果如下

介面的樣式效果一直都是Dcat Admin的重點優化專案之一，後續也會根據使用者的反饋不斷改進和開發新的主題

全元件非同步渲染支援

這個版本對非同步載入功能進行了優化，使其支援了靜態資源按需載入的特性。 目前內建的所有元件都支援使用非同步渲染功能，並且支援在頁面的任意位置上使用，詳細用法請參考文件 非同步載入。

定義渲染類

<?php

namespace App\Admin\Renderable;

use App\Admin\Widgets\Charts\Bar;
use Dcat\Admin\Support\LazyRenderable;

class PostChart extends LazyRenderable
{
    public function render()
    {
        // 獲取外部傳遞的引數
        $id = $this->id;

        // 查詢資料邏輯
        $data = [...];

        // 這裡可以返回內建元件，也可以返回檢視檔案或HTML字串
        return Bar::make($data);
    }
}

使用

public function index(Content $content)
{
    $modal = Modal::make()
         ->lg() 
         ->delay(300) // loading 效果延遲時間設定長一些，否則圖表可能顯示不出來
         ->title('非同步載入 - 圖表')
         ->body(PostChart::make())
         ->button('<button class="btn btn-white"><i class="feather icon-bar-chart-2"></i> 非同步載入</button>');

    return $content->body($modal);
}

效果

非同步載入表單，建立表單類如下

<?php

namespace App\Admin\Forms;

use Dcat\Admin\Contracts\LazyRenderable;
use Dcat\Admin\Traits\LazyWidget;
use Dcat\Admin\Widgets\Form;

class UserProfile extends Form implements LazyRenderable
{
    use LazyWidget;

    public function handle(array $input)
    {
        return $this->success('儲存成功');
    }

    public function form()
    {
        $this->text('name')->required()->help('使用者暱稱');
        $this->image('avatar')->autoUpload();

        $this->password('old_password');

        $this->password('password')
            ->minLength(5)
            ->maxLength(20);
        $this->password('password_confirmation')
            ->same('password');
    }
}

使用

public function index(Content $content)
{
    $modal = Modal::make()
         ->lg() 
         ->title('非同步載入 - 表單')
         ->body(UserProfile::make())
         ->button('<button class="btn btn-white"> 非同步載入</button>');

    return $content->body($modal);
}

效果

表格選擇器

之前的版本中提供了彈窗選擇器功能，但部分同學反映這個功能體驗不是很好，所以這次版本增加了表格選擇器(selectTable)表單，用來替代彈窗選擇器功能

use App\Admin\Renderable\UserTable;
use Dcat\Admin\Models\Administrator;

$form->selectTable($field)
    ->title('彈窗標題')
    ->dialogWidth('50%') // 彈窗寬度，預設 800px 
    ->from(UserTable::make(['id' => $form->getKey()])) // 設定渲染類例項，並傳遞自定義引數
    ->model(Administrator::class, 'id', 'name'); // 設定編輯資料顯示

效果

許可權配置功能優化

配置許可權路徑時支援填寫路由別名，如 admin.users.show

更多內容

此次版本是Dcat Admin釋出以來更新內容最多，開發時間最長的一次，更多更新內容這裡不再貼出，具體檢視請前往更新日誌。

Dcat Admin

Dcat Admin是一個基於laravel-admin二次開發而成的後臺系統構建工具，只需很少的程式碼即可快速構建出一個功能完善的高顏值後臺系統。內建豐富的後臺常用元件，開箱即用，讓開發者告別冗雜的HTML程式碼，對後端開發者非常友好。

線上演示站點 | LearnKu官方文件 | Github主頁(如果喜歡這個專案不妨點個star，感謝支援！) | Gitee主頁

升級方法

composer update dcat/laravel-admin

本次版本需要重新發布靜態資源以及語言包，然後按Ctrl+F5清除瀏覽器快取！

php artisan admin:publish --assets --force
php artisan admin:publish --lang --force
本作品採用《CC 協議》，轉載必須註明作者和本文連結
Jiangqh

相關文章