Filament 被低估的5个特性

Marden 的个人博客 / 977 / 4 / 创建于 1年前 / 更新于 1年前

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插件的构建，您就可以在项目中的仪表盘上使用它了！

为系统构建大量图表和图形能为你节省大量时间，不过通过集成一个有趣的包：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堆栈代码。

Filament 中文文档

filament