Filament 是什么?

#简介

Filament 是服务器驱动 UI (SDUI) 的 Laravel 框架。 它允许你完全通过 PHP 使用结构化的配置对象，而不是传统的模板方式，来定义用户界面。基于 Livewire、Alpine.js 和 Tailwind CSS 构建，Filament 使你能够构建功能齐全的界面，如管理面板、仪表板和基于表单的应用，而无需编写自定义 JavaScript 或前端代码。

什么是服务器驱动 UI(Server-Driven UI)?

SDUI 是 Meta、Airbnb 和 Shopify 等公司使用的经过验证的架构。它将 UI 的控制权转移到服务器，允许更快的迭代、更高的一致性和中心化的逻辑。Filament 采用这种模式进行 web 开发，允许你使用由服务器渲染为 HTML 的 PHP 类以声明的方式来定义界面,

值得关注的其中一个关键区别是服务器驱动 UI (SDUI) 和服务器渲染 UI 的不同。虽然二者都是在服务器端渲染内容，但服务器渲染 UI 依赖于静态模板(比如传统的 Blade 视图)，其 UI 的结构和行为预先在 HTML 或者 PHP 文件中定义。不同的是，SDUI 使得服务器可以根据实时配置和业务逻辑动态生成 UI。它提供了更多的灵活性与反应性而无需直接修改前端模板。

许多的开发者使用 Filament 为他们的 Laravel 应用添加管理面板，但它远远不止于此。你可以使用 Filament 构建自定义仪表板、用户门户、CRM，甚至具有多个面板的完整应用。它与任何前端堆栈无缝集成，与 Inertia.js、Livewire 和 Blade 等工具配合使用效果特别好。

如果你已经在 Laravel 应用中使用了 Blade 视图，Filament 组件也可以增强它们。你可以将 Filament 支持的 Livewire 组件放入任何 Blade 视图或路由中，并对表单、表格等使用相同的基于 Schema 的构建器，而无需切换整个技术栈。

#核心包

Filament 的核心包含以下几个包：

• filament/filament - 创建面板的核心包 (e.g., 后台管理面板)。它需要所有其他包，因为面板通常使用其中的大多数功能。、
• filament/tables - 表格构造器，它允许你使用过滤器，排序、分页等功能来渲染一个交互式表格。
• filament/schemas - 一个允许你使用一个”组件”对象数组作为配置来构建 UI 的包。它被很多功能用于渲染界面。该包包含一组基本组件，允许你渲染内容。
• filament/forms - 一套 filament/schemas 组件，用于构建各种表单输入(字段)，并集成了验证功能。
• filament/infolists - 一套 filament/schemas 组件，用于渲染“描述列表”。信息列表(Infolist)由“条目(Entry)”组成，条目是键值 UI 元素，用于渲染只读信息，如文本、图标和图像。信息列表的数据来源可以是任何地方，但通常来自单个 Eloquent 记录。
• filament/actions - Action 对象为按钮封装了 UI，以及打开按钮的交互式模态窗口和执行模态窗口提交时执行的逻辑。它们可以在任何地方使用，并且通常用于执行一次性操作，如删除记录、发送电子邮件或基于模态框表单输入更新数据。
• filament/notifications - 在应用 UI 中使用简单易用的方式发送通知。你可以发送一个 “flash” 通知，它立即出现在请求到服务器之后，一个 “database” 通知，它被存储在数据库中，并在用户需要时用滑出模态框的方式渲染，或者一个 “broadcast” 通知，它被用 websocket 连接的方式发送给用户。
• filament/widgets - 一套仪表板 “widget”，它可以渲染任何内容，通常是统计数据。图表、数字、表格和完全自定义的 widget 可以使用此软件包在仪表盘进行渲染。
• filament/support - 该包含一组共享的 UI 组件和实用工具，用于所有其他软件包。用户通常不会直接安装此软件包，因为它是所有其他包的依赖项。

#插件

Filament 设计为高可扩展，允许你添加自己的 UI 组件及特性到框架中。如果这些扩展特定于你的应用，它们可以在你的代码库中，或者如果更加通用，则可以分发成 Composer 包。在 Filament 生态系统中，这些 Composer 包被称作插件，社区中由许多这样的插件。Filament 团队官方维护了几个插件，它们在 Laravel 生态系统中提供了对流行的第三方包的集成。

这个生态系统中的大部分插件是开源且免费的。同时也有一些高级插件可以购买，它们通常提供了更多的客户支持和更高的质量。

你可以在 Filament 网站 中浏览官方和社区插件的完整列表。

#自定义外观

Tailwind CSS 是是一个基于实用程序的 CSS 框架，Filament 将其用作基础的设计系统。虽然 Filament 不直接在其组件渲染的 HTML 中使用 Tailwind CSS 使用类，但它将 Tailwind 实用类编译成语义化 CSS。Filament 用户可以使用他们自己的 CSS 来锁定这些语义化类，以修改组件外观、在默认 Filament 设计上之上创建一个轻量的覆盖层。

以下是该系统的一个示例，用于改变所有按钮组件的边框半径。默认情况下，Filament 代码库中使用的 CSS 代码用于使用 Tailwind 的实用工具类来样式化按钮：

.fi-btn {
    @apply rounded-lg px-3 py-2 text-sm font-medium outline-none;
}

要减少 Tailwind CSS 的边框半径，你可以在你的 CSS 文件中将 rounded-sm (小)实用工具类应用到 .fi-btn：

.fi-btn {
    @apply rounded-sm;
}

上述代码将使得 Filament 中的所有按钮使用 rounded-sm 覆盖默认的 rounded-lg 类，同时保留了按钮的其余样式属性。这个系统提供了高度的灵活性，来改变 Filament 组件的外观，而不需要编写完整的自定义样式表或维护每个组件的 HTML 副本。

更多关于自定义 Filament 的外观的信息，请访问 自定义样式文档。

#测试

Filament 中的核心包经过了单元测试，以确保跨版本的稳定性。作为 Filament 用户，你可以为使用 Filament 构建的应用编写测试。Filament 提供了用于测试功能和 UI 组件的实用工具，兼容 Pest 或 PHPUnit 测试套件。测试对于你自定义框架或实现自定义功能尤其重要，同时对于验证应用的基本功能工作正常也是有价值的。

更多关于 Filament 应用的测试，请访问 测试文档。

#Filament 的替代方案

如果你读到此处，并且认为 Filament 并不是适合你的项目，那当然没有问题！ Laravel 生态系统中有很多优秀的项目，它们可能适合你的需求。以下是我们非常喜欢的几个：

#Filament 似乎过于复杂

Laravel Nova是一个创建 Laravel 应用的管理面板的简便方式。它是官方项目，由 Laravel 团队维护，购买它将支持 Laravel 框架的发展。

#我不想使用 Livewire 来自定义任何东西

Filament 中的许多部分不需要你直接接触 Livewire，但构建自定义组件可能会。

Laravel Nova 使用 Vue.js 和 Inertia.js 创建，如果你想要大量的自定义并且有这些工具 的使用经验， 它可能是一个更好的选择。

#我需要一个开箱即用的 CMS

Statamic是一个基于 Laravel 的 CMS。如果你需要一个 CMS，它很容易设置和使用，并且你不需要构建自定义管理面板，那么 Statamic 是一个很好的选择。

#我只需要编写 Blade 视图并且自己处理后端

Flux 是官方的 Livewire UI 套件，并且是一组预构建和预样式的 Blade 套件。 它由维护 Livewire 和 Alpine.js 的团队一起维护，购买它可以支持 Livewire 和 Alpine.js 的开发。

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion