使用 Filamentphp 重构博客管理后台

项目

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 协议》，转载必须注明作者和本文链接