Filament 是一个用于 Laravel 的服务器驱动型 UI (SDUI) 框架。 它允许你使用结构化配置对象,完全在 PHP 中定义用户界面,而不是传统的模板。基于 Livewire、Alpine.js 和 Tailwind CSS 构建,Filament 使你能够构建功能齐全的界面,例如管理面板、仪表板和基于表单的应用程序,所有这些都无需编写自定义 JavaScript 或前端代码。
成千上万的开发者使用 Filament 来为他们的 Laravel 应用添加管理面板,但它的用途远不止于此。您可以使用 Filament 构建自定义仪表盘、用户门户、CRMs,甚至是包含多个面板的完整应用程序。它能与任何前端技术栈无缝集成,并与 Inertia.js、Livewire 和 Blade 等工具配合使用时表现尤其出色。
如果您的 Laravel 应用中已在使用 Blade 视图,Filament 组件也可以增强它们。您可以将由 Filament 驱动的 Livewire 组件放置到任何 Blade 视图或路由中,并使用相同的基于 schema 的构建器来创建表单、表格等,所有这些都无需切换您的整个技术栈。
Filament 的核心包含几个包:
filament/filament - 用于构建面板的核心包 (例如,管理面板)。此包需要所有其他包,因为面板通常会用到它们的许多功能。filament/tables - 一个数据表构建器,允许您渲染一个支持过滤、排序、分页等功能的交互式表格。filament/schemas - 一个允许您使用“组件”PHP 对象数组作为配置来构建 UI 的包。Filament 中的许多功能都使用它来渲染 UI。该包包含一组基本组件,允许您渲染内容。filament/forms - 一组 filament/schemas 组件,用于各种各样的表单输入 (字段), 并集成了验证功能.filament/infolists - 一组 filament/schemas 组件,用于渲染“描述列表”。信息列表由“条目”组成,它们是键值对用户界面元素,可以呈现只读信息,例如文本、图标和图片。信息列表的数据可以来源于任何地方,但通常来自单个 Eloquent 记录。filament/actions - 动作对象封装了按钮的用户界面 (UI)、一个可通过按钮打开的交互式模态窗口,以及模态窗口提交时应执行的逻辑。它们可以在用户界面 (UI) 的任何位置使用,并且通常用于执行一次性操作,例如删除记录、发送电子邮件,或根据模态表单输入更新数据库中的数据。filament/notifications - 您的应用程序 UI 中向用户发送通知的简便方式。 您可以发送在向服务器发出请求后立即出现的“闪现”通知, 存储在数据库中并呈现在用户可按需打开的滑出式模态框中的“数据库”通知, 或者通过 WebSocket 连接实时发送给用户的“广播”通知。filament/widgets - 一组仪表盘“小部件”,可以渲染任何内容,通常是统计数据。图表、数字、表格以及完全自定义的小部件可以使用此包在仪表盘中渲染。filament/support - 此包包含一组供所有其他包使用的共享 UI 组件和实用工具。 用户通常不会直接安装它,因为它是所有其他包的依赖项。Filament 被设计为高度可扩展,允许您向框架添加自己的 UI 组件和功能。如果这些扩展是您应用程序特有的,它们可以存在于您的代码库中,或者如果是通用目的的,则可以作为 Composer 包分发。在 Filament 生态系统中,这些 Composer 包被称为“插件”,并且社区提供了数百个。Filament 团队还官方维护着多个插件,这些插件提供了与 Laravel 生态系统中流行的第三方包的集成。
生态系统中绝大多数插件都是开源且免费使用的。一些高级插件可供购买,通常提供增强的客户支持和质量。
Filament 团队不维护的插件由独立作者创建和管理。虽然这些插件可以增强您的体验,但 Filament 无法保证它们的质量、安全性、兼容性或维护。我们建议在安装前查看插件的代码、文档和用户反馈。
您可以在 Filament 网站 上浏览一份详尽的官方和社区插件列表。
Tailwind CSS 是一种基于实用类的 CSS 框架,Filament 将其用作一种基于 token 的设计系统。尽管 Filament 不会直接在其组件渲染的 HTML 中使用 Tailwind CSS 实用类,但它会将 Tailwind 实用类编译成语义化的 CSS。Filament 用户可以使用他们自己的 CSS 来定位这些语义化类,以修改组件的外观,从而在默认的 Filament 设计之上创建一层薄薄的覆盖。
一个能展示该系统强大之处的简单例子是改变 Filament 中所有按钮组件的边框圆角。默认情况下,Filament 代码库中使用以下 CSS 代码,通过 Tailwind 工具类来样式化按钮:
.fi-btn {
@apply rounded-lg px-3 py-2 text-sm font-medium outline-none;
}减少 Tailwind CSS 中的边框圆角,您可以将 rounded-sm (小)实用工具类应用到 .fi-btn 在您自己的 CSS 文件中:
.fi-btn {
@apply rounded-sm;
}这将覆盖默认的 rounded-lg 类,改为 rounded-sm 用于 Filament 中的所有按钮,同时保留按钮的其他样式属性。该系统提供了高度的灵活性,以自定义 Filament 组件的外观,而无需编写完整的自定义样式表或为每个组件维护 HTML 副本。
有关自定义 Filament 外观的更多信息,请访问自定义样式文档。
Filament 的核心包会经过单元测试,以确保版本间的稳定性。作为 Filament 用户,你可以为使用该框架构建的应用程序编写测试。Filament 提供了用于测试功能和 UI 组件的工具,兼容 Pest 或 PHPUnit 测试套件。在自定义框架或实现自定义功能时,测试尤为重要,尽管它对于验证基本功能按预期工作也很有价值。
有关测试 Filament 应用程序的更多信息,请访问 测试文档。
如果你正在阅读本文并认为 Filament 可能不适合你的项目,那也没关系! 在 Laravel 生态系统中还有许多其他优秀的项目,可能更适合你的需求。 以下是我们非常喜欢的一些:
Laravel Nova 是为你的 Laravel 应用程序构建管理面板的简便方式。它是由 Laravel 团队维护的官方项目,购买它有助于支持 Laravel 框架的开发。
Filament 的许多部分完全不需要你接触 Livewire,但是构建自定义组件可能需要。
Laravel Nova 采用 Vue.js 和 Inertia.js 构建,如果你的项目需要大量定制并且你对这些工具有经验,它可能更适合你的项目。
Statamic 是一个基于 Laravel 构建的 CMS。如果您需要一个易于设置和使用的 CMS,并且不需要构建自定义管理面板,那么它是一个很好的选择。
Flux 是 Livewire 的官方 UI 套件,并作为一组预构建和预样式化的 Blade 组件提供。它由维护 Livewire 和 Alpine.js 的同一团队维护,购买它有助于支持这些项目的发展。