使用 Filamentphp 重構部落格管理後臺

hefengbao發表於2023-11-23
PHP

專案

hefengbao/one: 一個簡潔的部落格、微部落格。 (github.com)

one: One 一個簡潔的部落格、微部落格系統 (gitee.com)

專案起始於 17 年，還買了伺服器域名上線，大概一年後就擱置了。去年 11 份左右吧，拿出來折騰，做了更新，使用開源的 AdminLTE 作為後臺 UI。

前端時間知道了 filament ，大概學習了一下，於是繼續拿這個專案來實踐。

演示

主題切換

寫作

設定

預設的 UI 效果還不錯。

Filament

總體而言，使用起來非常方便，實現 CRUD 操作非常容易， 就本專案而言，我只需編寫 php 程式碼，就可以實現上圖中的 UI 效果以及邏輯。

主要的元件（Component）有兩類，Page、Resource。 Widget (小元件) 顯示在 Page 中。

Resource 實現 CRUD 功能。

如果要對程式碼分組，可以在建立的時候加上目錄：

php artisan make:filament-resource Post/Article

本專案中 Resource 名稱和 Model 名稱不一致，修改 $model:

導航分組（$navigationGroup）和導航排序（$navigationSort）

預設建立的 Resource 和 Page 會顯示在左側導航欄，可以透過 $navigationSort 引數對導航選單顯示排序。但是一旦透過 $navigationGroup 引數對導航選單分組，那麼左側選單會分為兩塊，最先顯示的是未分組的選單，接著顯示的是分組的選單，$navigationSort 並不能把未分組的選單排到分組的選單後面。

null 值的處理

User 實現了軟刪除（softdelete）,想要根據 deleted_at 判使用者是否有效，最初的程式碼：

 Tables\Columns\TextColumn::make('deleted_at')
                    ->label('狀態')
                   ->badge()
                    ->formatStateUsing(fn($state): string => $state != null ? '禁用' : '有效')
                    ->color(fn($state): string => $state != null ? 'danger' : 'success')

沒有達到預期效果，反向推測， null 值沒有參與後續的運算。

修改後的程式碼：

Tables\Columns\TextColumn::make('deleted_at')
                    ->label('狀態')
                    ->badge()
                    ->default('')
                    ->formatStateUsing(fn($state): string => $state !== '' ? '禁用' : '有效')
                    ->color(fn($state): string => $state !== '' ? 'danger' : 'success')

非資料庫查詢資料列表處理

想要把備份檔案以列表的形式展示，

public function table(Table $table): Table
{
    return $table
        ->query()
        ->columns([]);
}

query() 傳 null 之類的會報錯。

使用 calebporzio/sushi 解決的：

public function table(Table $table): Table
{
    return $table
        ->query(\App\Models\Backup::query())
        ->columns([]);
}

?

本作品採用《CC 協議》，轉載必須註明作者和本文連結
有個部落格：www.8ug.icu

相關文章