跳到主要内容
版本：3.0

安装

在面板中使用 Widget？那你可以跳过此安装。本教程适合于在自定义 TALL 栈应用中使用该包的开发者。

要求​

运行 Filament 有一些基础要求：

  • PHP 8.1+
  • Laravel v10.0+
  • Livewire v3.0+

Livewire v3 已于最近发布了!
Livewire 团队为使其稳定方面做得很好，不过这是对 Livewire v2 的完全重写。你可能会碰到问题，因此，我们建议在将 Filament v3 使用到生产环境之前对应用进行全面的测试。

安装​

首先，使用 Composer 导入此包：

composer require filament/widgets:"^3.0-stable" -W

全新 Laravel 项目​

要在新 Laravel 项目中快速开始使用 Filament，运行如下命令安装 Livewire、Alpine.js 和 Tailwind CSS：

php artisan filament:install --scaffold --widgets

npm install

npm run dev

这些命令会粗暴地覆盖你应用中现有的文件，因此我们只推荐在新项目中使用该方法。

已有的 Laravel 项目​

首先，运行以下命令安装该包的资源：

php artisan filament:install --widgets

安装 Tailwind CSS​

首先，使用 npm 安装 Tailwind CSS 及它的 forms 和 typography 插件：

npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev

新建一个 tailwind.config.js 文件。确保添加了 Filament 的 preset，它配置了颜色和安装的插件：

import colors from 'tailwindcss/colors'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'

export default {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                danger: colors.red,
                info: colors.blue,
                primary: colors.amber,
                success: colors.green,
                warning: colors.amber,
            },
        },
    },
    plugins: [
        forms,
        typography,
    ],
}

当然，你也可以指定自定义的 danger、gray、info、primary、success 及 warning 颜色。不过每个颜色必须是 Tailwind CSS 颜色，或者指定所有 50 - 950 变形体 ———— 单个 16 进制码或 RGB 值并不能生效。

配置样式​

在 resources/css/app.css 中，引入 Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

在应用根目录中创建一个 postcss.config.js 文件，并将 Tailwind CSS 和 Autoprefixer 注册成插件：

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

自动刷新浏览器​

你可能也想更新 vite.config.js 文件，以在 Livewire 组件更新后自动刷新页面:

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

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

编译资源​

使用 npm run dev 编译新的 CSS 和 JS 资源。

配置布局​

最后，为 Livewire 组件创建一个新的 resources/views/components/layouts/app.blade.php 布局文件：

<!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 }}

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

发布配置​

你可以发布此包的配置，使用如下命令：

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

升级​

当运行 composer update 命令时，Filament 会自动升级到最新的非破坏性版本。升级完成后，应该清除所有 Laravel 缓存，并且重新发布前端资源。你可以使用 filament:upgrade 命令一次性完成这些动作，该命令会第一次运行 filament:install 添加到 composer.json 文件中：

"post-autoload-dump": [
    // ...
    "@php artisan filament:upgrade"
],

请注意 filament:upgrade 不会真正处理升级过程，因为 Composer 已经做了升级，如果你不使用 post-autoload-dump 钩子手动升级，你可以自己运行该命令：

composer update

php artisan filament:upgrade