Filament 被低估的 5 个特性

1.简单的图表生成

在 Laravel 上使用后台管理面板多年中，构建图表成了我最频繁使用的需求之一。数据会影响企业的决策过程，能够以人类可理解的方式查看数据有助于用户快速做出明智的决策。

值得庆幸的是，在过去几年中，随着图表库的引入，创建图表变得越来越容易。然而，要使用这些包，您仍然需要安装和配置它们，为它们设置样式，然后将所有数据推送到其中，以便它们能够正确显示。然而，如果你使用的是 Filament，现在有一种更简单的方法！

Filament 允许你通过几个预构建和可扩展的 Chart 小部件(Widget)类，使用 Chart.js库快速轻松地生成图表。我个人最喜欢的一些是LineChartWidget、BarChartWidget 和 DoughnutChartWidget！这很简单，只需创建一个新的 Widget 类，扩展你想要使用的图表小部件，并为新类提供一个标题和一些数据。例如：

<?php
 
namespace App\Filament\Widgets;
 
use Filament\Widgets\BarChartWidget;
 
class LikesPerDay extends BarChartWidget
{
    protected function getHeading(): string
    {
        return 'Blog Post Likes per Day';
    }
 
    protected function getData(): array
    {
        return [
            'datasets' =>  [
                [
                    'label' => 'Number of Likes',
                    'data' => [12, 32, 12, 35, 22],
                ],
            ],
            'labels' => [
                '2022-01-01',
                '2022-01-09',
                '2022-01-12',
                '2022-01-22',
                '2022-01-23',
            ],
        ];
    }
}

一旦构建了chart widget，您就可以在项目中的仪表盘上使用它了！

为系统构建大量图表和图形将节省大量时间，但 Filament 通过集成一个有趣的包：flowframe/laravel-trends 包，我们还能更进一步。此软件包允许你使用您熟悉和喜爱的 Elquent 语法从模型中创建数据趋势！例如，上述代码可以改写为：

<?php
 
namespace App\Filament\Widgets;
 
use App\Models\Like;
use Filament\Widgets\BarChartWidget;
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;
 
class LikesPerDay extends BarChartWidget
{
    protected function getHeading(): string
    {
        return 'Blog Post Likes per Day';
    }
 
    protected function getData(): array
    {
        $data = Trend::model(Like::class)
            ->between(
                start: now()->subDays(5),
                end: now()
            )
            ->perDay()
            ->count();
 
        return [
            'datasets' =>  [
                [
                    'label' => 'Number of Likes',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];
    }
}

上面的例子很简单，但由于 laravel-trends 背后有 Eloquent 的强力支持，您可以创建强大的、广泛的查询来收集数据。

2.实时通知

通知是大多数现代 web 应用的主要内容。以某种形式，它们帮助提醒用户系统、帐户或数据中发生的重要事件。因为它们是任何应用的重要组成部分，所以 Filament 维护人员已经竭尽全力创建了一个健壮且易于使用的通知包，并在 Admin Panel 后台管理面板中使用。

Filament 通知的创建非常简单。在 Filament 代码的任何位置中，你都可以使用 Notification 对象的 fluent API(类似于 Elquent，如果你不熟悉术语 “fluent API”)来构建通知并向用户发送通知。在其内核中，在 Filament 中发出通知如下所示：

<?php
 
namespace App\Http\Livewire;
 
use Filament\Notifications\Notifications;
use Livewire\Component;
 
class LikePost extends Component
{
    public function storeLike(): void
    {
        // Like creation & storage code
 
        Notification::make()
            ->title('Your Images have been Processed Successfully')
            ->success()
            ->send();
    }
}

你很难得到比这更简单的东西！

然而，这还有另一个方面，它将 Filament 的通知从一个很棒的包提升为一个不可或缺的包，这就是实时通知的能力。

通常，在没有实时通知的情况下，如果你想在长时间运行的任务(如排队作业)完成处理时通知用户，则必须在后台不断轮询，才能最终让你知道作业已完成。这当然是一种可行的方法，但取决于你的使用情况，数百或数千个用户反复轮询同一个端点，等待他们的工作完成，这可能会给服务器带来沉重的压力。如果你发现自己处于这种情况，Filament Notifications 包与 Laravel Echo(一个 JavaScript 库，允许你订阅频道并收听服务器广播的事件)原生集成。通过这种集成(以及安装在服务器上的某种 websockets 实现，即 Pusher)，我们可以更新以前的通知代码以实时广播通知。

Filament 为我们提供了几种不同的方式来发送实时通知，但我的首选选项是使用 Laravel 通知类，就像我系统中的所有其他通知一样。这样，我的所有通知都以类似方式编写，无论它们是针对 Filament 还是应用的任何其他部分。唯一的区别是，我们需要给 Notification 类一个 toBroadcast 方法来触发 Filament 通知，如下所示：

<?php
 
namespace App\Notifications;
 
use App\Models\User;
use Filament\Notifications\Notification as FilamentNotification;
use Illuminate\Notifications\Notification;
use Illuminate\Notifications\Messages\BroadcastMessage;
 
class ImagesOptimized extends Notification
{
    public function toBroadcast(User $notifiable): BroadcastMessage
    {
        return FilamentNotification::make()
            ->title('Your Images have been Optimized Successfully')
            ->getBroadcastMessage();
    }
}

将 Filament 通知代码构建到 Laravel 通知系统后，我们可以在电子邮件、短信等其他格式中使用相同的通知。即使我们只用这个 Laravel 通知类来发送 Filament 通知，我们仍然可以为该通知设置一个专用类，将该类与应用程序的其他通知置于相同(或类似)的位置。

如果创建整个类不是你的速度，那么 Filament 还提供了一个流畅的 API 来广播通知，其方式与我们最初的同步 Filament 通知代码非常相似。选择你最喜欢的，使用适合你的项目和用例的！

如果创建整个类不是很快，那么 Filament 还提供了一个 fluent API 方式来广播通知，其方式与我们最初的同步 Filament 通知代码非常相似。选择你最喜欢的，使用适合你的项目和用例的方式！

3. 原生全局搜索

几乎每个带有 Admin Panel 后台面板的项目最终都需要一种快速排序系统中所有数据的方法。有些人可能会说，一旦你需要在应用程序中进行全局搜索，你就需要更新你的 UI/UX，但即使在具有无可挑剔、可用的用户界面的项目中，全局搜索栏也可以成为一个有用的工具，让用户知道自己想要什么，而不用记住要在哪里才能找到它。

构建全局搜索实现可能是一个冗长、耗时的过程。确保您构建一个性能卓越、用户友好的选项需要一点专业知识才能正确实现。值得庆幸的是，Filament 在其后台管理面板中提供了大量的全局搜索功能，这为我们的开发人员减少了很多负担。基本上，只需在相应 Resource 类中添加一个protected static ?string $recordTitleAttribute 就能在为特定资源上加上全局搜索功能，这个 title 属性告诉 Filament ，当用户尝试全局搜索时，要搜索的是资源的指定属性(也称为列)。例如，将用户资源 UserResource 的 $recordTitleAttribute 设置为 last_name，将使得 Filament 将搜索字符串与系统中所有用户的 last_name 属性进行比较。

这种告诉 Filament 在特定资源上搜索哪些属性的方法在许多情况下都有效，但有时你可能希望 Filament 搜索多个列。Filament 的全局搜索允许我们重写 getGloballySearchableAttributes() 方法，以返回 Filament 将搜索的列数组！

Filament 在全局搜索功能中还添加了一些好东西，但我会让你查看文档页面(很容易阅读)，并自己发现一些有趣的东西！

4. 不仅仅是后台面板

我们一直在讨论的管理面板 admin panel 包的所有主要部分(表格、表单和通知)都可以作为独立的包提供，供我们在 TALL 堆栈应用中使用。需要一种在 TALL 堆栈应用中构建表单的简单方法吗？请引入 Filament Forms 包。想要一些好看的实时(见第 2 点)通知吗？请在项目中使用 Filament Notification 包！

Filament 的创建者和维护者知道他们的软件有多好，他们不仅将其打包并在管理面板包中免费提供，而且还花时间将这些部分作为自己的独立包进行维护。这是给 Laravel&Livewire 社区的礼物！因此，下次你在构建一个 TALL 应用时，想要从管理面板中获得一些不错的功能，而不需要包含整个软件包，请从三个核心插件中选择你最喜欢的，并从社区中制作最好的 TALL 软件包中构建你的应用。(注:下一个版本 Filament V3 中将会从后台面板中拆分更多独立包出来)

5. 自定义页面

另一个我最喜欢的 Filament 后台面板的特性是：自定义页面。

有很多基于 CRUD 的管理面板软件，Filament 也不例外。Filament 主要依靠的是基于 CRUD 的工作流程。然而，在构建“现实生活”应用程序时，管理面板生成的 CRUD 视图往往无法轻松(或根本无法)处理某些问题。无论是将多个资源组装在一起的页面，还是与典型的 “CRUD-for-a-specific-resources” 不符的非常专业的视图，我都不止一次不得不突破管理面板的界限来实现这一点。

使用 Filament，我可以创建任何我想要的自定义页面，而无需离开后台管理面板。

Filament 的自定义页面有两种风格：基于资源的和通用型。基于资源的自定义页面被添加到 Resource 类的 getPages() 方法中，与添加 List、Create、View 和 Edit 页面的方式相同。这些页面通常最适合仅对应于特定资源的工作流和用例，但稍微超出了常规 CRUD 页面。

对我来说，更有趣的页面是通用自定义页面。这些页面仅仅是完整的 Livewire 组件，Livewire 的所有特性和功能都向开发人员展示。创建其中一个页面就像使用 Artisan(php artisan make：filament-page YourPage)一样简单，一旦您面前有了文件，就可以编写所需的任何 TALL 堆栈代码。