公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/docs
DOCS
DOCS

Languages

Version

Theme

表格构造器

安装

表格构造器已经在面板构造器中预装了。 本教程适合于在自定义 TALL 栈(Tailwind, Alpine, Livewire, Laravel)应用中使用表单构造器。

要求

运行 Filament 有一些基础要求：

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

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

安装

使用 Composer 导入此包：

composer require filament/tables:"^3.2" -W

全新 Laravel 项目

要快速开始使用 Filament，你可以使用如下命令安装 Livewire、Alpine.js 和 Tailwind CSS。

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

php artisan filament:install --scaffold --tables
 
npm install
 
npm run dev

已有的 Laravel 项目

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

php artisan filament:install --tables

安装 Tailwind CSS

运行如下命令安装 Tailwind CSS 及 Tailwind Forms 和 Typography 插件：

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

新建一个 tailwind.config.js 文件，并添加 Filament 的 preset (引入 Filament color scheme 及必要的 Tailwind 插件)：

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

配置样式

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

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

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

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        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

升级

如果你是从 Filament v2 升级，请查看升级向导。

当运行 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
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

下一页
开始