5 个被低估的 Filament 特性

那些在我的 Twitch 直播中花过时间的人都知道我真的很、真的很喜欢一个特定的 Laravel 包：Filament。它是一个功能强大的包组合，可以帮助构建 TALL 堆栈应用程序中的常见功能。我分别使用过每个包，但我最常使用的包是将它们全部整合在一起的那个：管理面板。

在我使用 Filament 的过程中，在最初对主要功能的易用性感到震惊之后，我注意到有一些功能，虽然没有最常出现在聚光灯下，但它们经过了非常好的打磨。这些功能对于很多人来说并不算惊天动地，但如果你遇到需要其中一个功能的情况，它会让一切变得更加轻松。

让我们直接进入主题：以下是我认为 Filament 最被低估的五个特性。

#1. 简单图表生成

图表、图形和数据，哦我的天哪！

在多年开发使用管理面板的 Laravel 应用程序后，从应用程序数据构建图表和图形一直是我最常被要求的功能之一。我明白为什么，毕竟数据可以为企业的决策过程提供依据，能够以人类可理解的方式查看数据可以帮助用户快速、明智地做出决策。

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

Filament 允许你使用 Chart.js 库快速轻松地生成图表，方法是通过几个预构建的和可扩展的Chart 小部件类。我个人最喜欢的一些是小部件类包括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',
            ],
        ];
    }
}

一旦你构建了图表小部件，你就可以自由地在项目中的任何仪表板上使用它！

如果你为你的系统构建了大量的图表和图形，这将节省大量时间，但 Filament 通过集成一个有趣的包进一步提升了这一点：flowframe/laravel-trend 包。这个包允许你使用你熟悉的 Eloquent 语法创建从你的模型中提取数据的趋势！例如，上面的代码可以改写为

<?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 的支持，因此你可以创建功能强大、扩展性强的查询来收集数据。有关laravel-trends 包的更多信息，请查看文档

#2. 实时通知

通知是大多数现代 Web 应用程序中必不可少的元素。以各种形式，它们可以帮助提醒用户系统、其帐户或其数据中发生的重大事件。由于它们是任何应用程序的重要组成部分，Filament 维护者已经尽力创建了一个强大且易于使用的通知包，该包在管理面板中使用。

Filament 通知非常易于创建。在你的 Filament 代码中想要触发通知的任何地方，你都可以使用Notification 对象的流畅 API（类似于Eloquent，如果你不熟悉“流畅 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 通知包会与 Laravel Echo 原生集成，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 通知代码更相似的方式广播通知。选择你最喜欢的，并根据你的项目和使用场景使用适合你的方式！

#3. 原生全局搜索

几乎每个拥有管理面板的项目最终都需要一种快速筛选系统中所有数据的方法。有些人可能会说，一旦你需要在应用程序中进行全局搜索，你就需要更新你的 UI/UX，但即使是在拥有完美、可用的用户界面的项目中，全局搜索栏对于知道自己想要什么但记不清在哪里找到的用户来说也是一个有用的工具。

构建全局搜索实现可能是一个乏味、费时的过程。确保构建一个高性能且用户友好的选项需要相当多的专业知识才能做到完美。值得庆幸的是，Filament 在其管理面板中提供了一个强大的全局搜索功能，为我们开发者完成了大部分繁重的工作。从根本上说，要将特定资源添加到全局搜索功能中，只需要在你的 Resource 类中添加一个protected static ?string $recordTitleAttribute。这个标题属性告诉 Filament 在用户尝试使用全局搜索时搜索资源中的特定属性（即列）。例如，将 User Resource 的$recordTitleAttribute 设置为last_name 将导致 Filament 将搜索字符串与系统中所有用户的last_name 属性进行比较。

这种告诉 Filament 在特定资源上搜索哪些属性的方法在许多情况下都有效，但有时您可能希望 Filament 在多个列上进行搜索。Filament 的全局搜索功能允许我们覆盖 getGloballySearchableAttributes() 方法，以返回一个包含 Filament 将要搜索的列（包括使用 Laravel 标准点符号表示的关系）的数组！

Filament 在全局搜索功能中添加了一些更棒的功能，但我就不在这里一一介绍了，您可以查看文档页面（非常容易理解），自己发现一些有趣的地方！

#4. 不仅仅是管理面板

我在文章开头提到了这一点，但我最喜欢的 Filament 特性之一，也是我称它为整个 Laravel 生态系统中最好的包之一的原因，是所有我们一直讨论的 Admin Panel 包的主要部分（表格、表单和通知）都可作为独立的包供我们在 TALL 堆栈应用程序中使用。需要在 TALL 堆栈应用程序中构建表单的简便方法吗？包含 Filament Forms 包。想要一些看起来不错且实时的（见第 2 点）通知吗？将 Filament Notifications 包添加到您的项目中！

Filament 的创建者和维护者知道他们的软件有多好，他们不仅将它打包成一个整体并免费提供在其 Admin Panel 包中，而且还花时间将每个部分都维护为独立的包。这对 Laravel & Livewire 社区来说真是太棒了！所以，下次您构建 TALL 应用程序时，如果您想要 Admin Panel 的一些不错功能，但不需要包含整个包，那么您可以从三个核心插件中选择您最喜欢的部分，并利用社区中一些最棒的 TALL 包来构建您的应用程序。

#5. 自定义页面

最后，但同样重要的是，我最喜欢的 Filament Admin 面板功能：自定义页面。市场上有很多基于 CRUD 的管理面板软件，Filament 也不例外。Filament 的核心是基于 CRUD 的工作流程。但是，在构建“现实生活”应用程序时，总是会有一些事情不能用大多数管理面板提供的生成的 CRUD 视图轻松（或根本无法）处理。无论是将多个资源组合在一起的页面，还是与典型的“特定资源的 CRUD”思维方式不一致的非常专业的视图，我不得不不止一次地突破管理面板的界限来实现这一点。

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

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

对我来说，更有趣的页面是通用的自定义页面。这些页面只是完整的 Livewire 组件，具有所有向您（开发人员）公开的 Livewire 功能和功能。创建其中一个页面就像使用 Artisan（php artisan make:filament-page YourPage）一样简单，一旦您拥有了这些文件，就可以编写所需的任何 TALL 堆栈代码。这就是可定制性！

#激动了吗？

我知道我很激动。

这五项功能仅仅触及了 Filament 维护人员在该包中投入的功能宝库的表面。仅仅写下这些功能就让我迫不及待地想要去实现它们，并在我的 Filament 项目中深入了解它们！但是您觉得怎么样呢？您在 Filament 应用程序中尝试过这些功能中的任何一个吗？您认为我错过了哪些未被重视的 Filament 功能？通过 Twitter 或 Mastodon 联系我，让我知道您的想法！