安装
要求
运行Filament有一些特定的要求：
- PHP 8.0+
- Laravel v8.0+
- Livewire v2.0+
表单构造器已经在后台面板 2.x中预装了，不过如果你要在其他项目中使用，还是需要按照以下安装指示操作。
新的 Laravel 项目
要快速使用表单构造器，你可以用这些命令安装 Alpine.js、TailwindCSS 和 Livewire:
composer require filament/forms:"^2.0"
php artisan forms:install
npm install
npm run dev
这些命令会粗暴地重写覆盖你现有的文件，所以我们只推荐在新项目中使用这种方法。
现在可以开始构建表单了!
已有Laravel项目
这个包使用了以下依赖:
你可以使用 NPM 安装:
npm install alpinejs postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
配置 Tailwind CSS
要完成 Tailwind 安装，你必须在项目的根目录中创建 tailwind.config.js 文件。最简单的做法是运行 npx tailwindcss init 命 令。
在 tailwind.config.js 中，注册你安装好的插件，然后添加表格构造器要使用的自定义颜色：
import colors from 'tailwindcss/colors' // [tl! focus:start]
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography' // [tl! focus:end]
export default {
content: [
'./resources/**/*.blade.php',
'./vendor/filament/**/*.blade.php', // [tl! focus]
],
theme: {
extend: {
colors: { // [tl! focus:start]
danger: colors.rose,
primary: colors.blue,
success: colors.green,
warning: colors.yellow,
}, // [tl! focus:end]
},
},
plugins: [
forms, // [tl! focus:start]
typography, // [tl! focus:end]
],
}
当然，你也可以指定你自己定义的 primary 和 danger 颜色，这会替换掉原有的颜色。
打包资源
新的 Laravel 项目默认使用 Vite 打包资源。不过，你仍然可以使用 Laravel Mix。
Vite
如果你使用 Vite,你应该通过 NPM 手动安装 Autoprefixer：
npm install autoprefixer --save-dev
在项目的根目录中新建 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' // [tl! focus]
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [ // [tl! focus:start]
...refreshPaths,
'app/Http/Livewire/**',
'app/Forms/Components/**',
], // [tl! focus:end]
}),
],
})
Laravel Mix
在 webpack.mix.js 文件中，以 PostCSS 插件的形式注册 Tailwind CSS:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'), // [tl! focus]
])
配置样式
在 /resources/css/app.css 文件中，引入 filament/forms vendor CSS 和 TailwindCSS:
@import '../../vendor/filament/forms/dist/module.esm.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
配置脚本
在 /resources/js/app.js 文件中，引入 Alpine.js、filament/forms 插件并注册：
import Alpine from 'alpinejs'
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'
Alpine.plugin(FormsAlpinePlugin)
Alpine.plugin(NotificationsAlpinePlugin)
window.Alpine = Alpine
Alpine.start()
编译资源
使用 npm run dev 编译新的 CSS 和 JS 资源:
布局配置
最后，为 Livewire 组件新建 resources/views/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>
<!-- Styles -->
<style>[x-cloak] { display: none !important; }</style>
@livewireStyles
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
@livewireScripts
<script src="{{ mix('js/app.js') }}" defer></script>
@stack('scripts')
</head>
<body class="antialiased">
{{ $slot }}
@livewire('notifications')
</body>
</html>
现在可以开始 构建表单 了!
发布配置文件
有需要时，你可以使用这个命令发布配置文件:
php artisan vendor:publish --tag=forms-config
发布翻译文件
如果你需要翻译这个扩展包，你可以使用这个命令发布语言文件:
php artisan vendor:publish --tag=forms-translations
由于本包也依赖于其他 Filament 包，你可以可以发布这些语言文件：
php artisan vendor:publish --tag=filament-support-translations
升级
要将该软件包升级到最新版本，你必须运行:
composer update
php artisan filament:upgrade
我们推荐将 filament:upgrade 添加到 composer.json 文件的 post-update-cmd 中，使之自动运行：
"post-update-cmd": [
// ...
"@php artisan filament:upgrade"
],