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

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

Hi，各位同學大家好！Dcat Admin又釋出新版本了，此次版本更新主要是

  • 最佳化介面
  • 增加全元件非同步渲染功能
  • 還有一些細節上的最佳化以及若干Bug修復

關於 2.0

2.0會是一個更加輕量和簡潔的版本，在2.0版本中我們將會上線：

  1. 全新外掛系統，對普通使用者和開發者都更加友好（將會相容composer安裝和線上安裝兩種方式）
  2. 開發全新主題，以及更友好的主題擴充套件機制
  3. 重構內部一些不合理的功能設計
  4. 提煉、簡化核心功能，把一些非必要的相對複雜的功能移至外掛中心

關於進度

2.0會在1.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

相關文章