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 生态系统中提供了对流行的第三方包的集成。

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

NOTE

插件不经 Filament 团队的维护，而是由第三方作者创建和管理。虽然这些插件可以提升你的体验，但 Filament 不能保证它们的质量、安全性、兼容性或维护。我们建议在安装之前查看插件的代码、文档和用户反馈。

你可以在 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 的开发。