版本：5.x

安装

Filament 需要满足以下条件：

PHP 8.2+
Laravel v11.28+
Tailwind CSS v4.1+

安装有两种方式，取决于你想使用官方的面板构建器还是在你应用的 Blade 视图中使用其组件。

面板构建器

大部分开发者选择这个选项来构建一个面板（如：管理面板）。此面构建器将所有组件组合成一个整体框架。你可以在 Laravel 安装中创建任意数量的面板，而只需安装它一次。

独立组件

如果你使用 Blade 重头开始创建你的应用，你可以安装 Filament 的独立组件来扩展你的 UI。

安装面板构建器

在 Laravel 项目目录中运行如下命令安装 Filament 面板构建器:

composer require filament/filament:"^5.0"

php artisan filament:install --panels

NOTE

如果使用 Windows PowerShell 安装 Filament，你需要运行如下命令，因为它会忽视版本约束的 ^ 字符：

composer require filament/filament:"~5.0"

php artisan filament:install --panels

这将会新建并注册一个新的 Laravel 服务提供者 - app/Providers/Filament/AdminPanelProvider.php。

TIP

如果你在访问面板时出现错误，请检查该服务提供者是否已注册在 bootstrap/providers.php 文件中。如果没有注册，你需要手动添加它。

你可以使用如下命令创建一个新的用户账号：

php artisan make:filament-user

在浏览器中打开 /admin，登录，并开始构建你的应用!

安装独立组件

使用 Composer 安装你想要使用的 Filament 组件：

composer require
    filament/tables:"^5.0"
    filament/schemas:"^5.0"
    filament/forms:"^5.0"
    filament/infolists:"^5.0"
    filament/actions:"^5.0"
    filament/notifications:"^5.0"
    filament/widgets:"^5.0"

你可以稍后在项目中安装其他 Filament 组件时，不需要重复这些安装步骤。

NOTE

如果使用 Windows PowerShell 安装 Filament，你需要运行如下命令，因为它会忽视版本约束的 ^ 字符：

composer require
    filament/tables:"~5.0"
    filament/schemas:"~5.0"
    filament/forms:"~5.0"
    filament/infolists:"~5.0"
    filament/actions:"~5.0"
    filament/notifications:"~5.0"
    filament/widgets:"~5.0"

如果你只想要使用 Blade UI 组件套件，你需要在此阶段安装 filament/support。

新的 Laravel 项目

运行简单命令就能快速开始使用 Filament 组件。注意，此操作将覆盖你的 app 中的任何已修改文件，因此它仅适用于新的 Laravel 项目。

现有的 Laravel 项目

如果你要在现有的 Laravel 项目中安装 Filament，请不要使用此命令。相反，你需要手动安装以保留已有的功能。

要在新的 Laravel 项目中安装 Filament，请运行如下命令来安装 Livewire、Alpine.js 和 Tailwind CSS：

NOTE

这些命令将会在你的项目中覆盖已存在的文件。请不要在已有的项目中运行此命令！

运行如下命令安装 Filament 前端资源：

php artisan filament:install --scaffold

npm install

npm run dev

在搭建框架时，如果你已经安装 Notifications 包，Filament 会问你是否想安装所需的 Livewire 组件到你的默认布局文件中。如果你希望通过 Filament 给用户发送闪屏消息，就需要这个组件。

运行如下命令安装 Filament 前端资源：

php artisan filament:install

安装 Tailwind CSS

如果你未安装如下这些组件，请运行如下命令安装 Tailwind CSS 和其 Vite 插件：

npm install tailwindcss @tailwindcss/vite --save-dev

配置样式

要配置 Filament 的样式，你需要导入 Filament 包的 CSS 文件，通常在 resources/css/app.css 中。

屈居于你安装的是哪些包，你可以只导入必要的 CSS 文件，以保持你应用的 CSS bunlde size 较小。

@import 'tailwindcss';

/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';

/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';

/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';

/* Required by actions and infolists */
@import '../../vendor/filament/infolists/resources/css/index.css';

/* Required by notifications */
@import '../../vendor/filament/notifications/resources/css/index.css';

/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';

/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';

/* Required by widgets */
@import '../../vendor/filament/widgets/resources/css/index.css';

@variant dark (&:where(.dark, .dark *));

配置 Vite 插件

如果还没有安装该插件，请将 @tailwindcss/vite 插件添加到你的 Vite 配置中 (vite.config.js)：

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
})

编译资源

使用 npm run dev 编译新的 CSS 和 JavaScript 资源：

配置你的布局

如果你还没有 Blade 布局文件，请运行以下命令在 resources/views/layouts/app.blade.php 中创建它：

php artisan livewire:layout

添加如下代码到新的布局文件中：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">

        <meta name="application-name" content="{{ config('app.name') }}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ config('app.name') }}</title>

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>

        @filamentStyles
        @vite('resources/css/app.css')
    </head>

    <body class="antialiased">
        {{ $slot }}

        @livewire('notifications') {{-- Only required if you wish to send flash notifications --}}

        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

其中重要的部分是布局的 <head> 中的 @filamentStyles 和 <body> 结尾处中的 @filamentScripts。请务必引入 Vite 编译后的 CSS 和 JavaScript 文件！

NOTE

@livewire('notifications') 这一行只有在你安装了 Notifications 包并且想通过 Filament 发送 Flash 通知给用户时才需要。

发布配置

Filament ships with a configuration file that allows you to override defaults shared across all packages. Publish it after installing the panel builder so you can review and customize the settings:

php artisan vendor:publish --tag=filament-config

This command creates config/filament.php, where you can configure options like the default filesystem disk, file generation flags, and UI defaults. Re-run the publish command any time you want to pull in newly added configuration keys before tweaking them to suit your project.

安装面板构建器​

安装独立组件​

安装 Tailwind CSS​

配置样式​

配置 Vite 插件​

编译资源​

配置你的布局​

发布配置​

安装面板构建器

安装独立组件

安装 Tailwind CSS

配置样式

配置 Vite 插件

编译资源

配置你的布局

发布配置