Laravel12-Filament 3.3 非后台表单应用

第一步：Laravel12安装

composer create-project laravel/laravel laravel-example-form

第二步：Filament-forms安装

https://laravel-filament.cn/docs/zh-CN/3.x/forms/installation

第三步：在 Livewire 组件中添加表单

https://laravel-filament.cn/docs/zh-CN/3.x/forms/adding-a-form-to-a-livewire-component

第四步：Daisyui安装及美化

npm i -D daisyui@latest

tailwindcss.config.js

import preset from './vendor/filament/support/tailwind.config.preset';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import daisyui from 'daisyui';

export default {
    plugins: [forms, daisyui, typography],
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './resources/views/**/*.php',
    ],

    daisyui: {
        themes: [
            "light",   // daisyUI 默认 light 主题
            "dark",    // daisyUI 默认 dark 主题
        ],
        darkTheme: "dark", // 默认暗色模式
        base: true,        // 全局应用 daisyUI 样式
        styled: true,      // 启用 daisyUI 的组件样式
        utils: true,       // 启用工具类 (btn, card 等)
        logs: false,       // 控制台不输出日志
        themeRoot: ":root" // 主题变量挂载到 :root
    },

    safelist: [
        'alert',
        'alert-success',
        'alert-error',
        'alert-warning',
        'alert-info',
        'toast', 
        'toast-top', 
        'toast-center',
        'toast-bottom',
        'toast-end',
    ],
}

美化表单

<div class="max-w-2xl mx-auto px-6 py-10">
    <div class="bg-white dark:bg-gray-900 shadow-sm border border-gray-200 dark:border-gray-800 rounded-2xl">
        <div class="p-8 space-y-8">
            <form wire:submit="create" class="space-y-6">
                {{ $this->form }}

                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-lg 
                                    bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2.5 
                                    transition-all duration-200 focus:ring-2 focus:ring-blue-400 
                                    focus:outline-none shadow-sm disabled:opacity-70">
                    立即提交
                </button>
            </form>
        </div>
    </div>
    <x-filament-actions::modals />
</div>

继续美化

app/Livewire/CreatePost.php

<?php

namespace App\Livewire;

use App\Models\Post;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\MarkdownEditor;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class CreatePost extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->label('标题')
                    ->required(),
                MarkdownEditor::make('content')
                    ->label('内容'),
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        // dd($this->form->getState());
        $this->dispatch('notify', title: '提交成功', message: '您的信息已成功提交！', type: 'success');
        // $this->dispatch('notify', title: '提交失败', message: '提交失败，请检查您的信息是否正确！', type: 'error');
        $this->form->fill();
    }

    public function render(): View
    {
        return view('livewire.create-post');
    }
}

resources/views/livewire/reate-post.blade.php

<div class="max-w-2xl mx-auto px-6 py-10">
    <div class="bg-white dark:bg-gray-900 shadow-sm border border-gray-200 dark:border-gray-800 rounded-2xl">
        <div class="p-8 space-y-8">
            <form wire:submit="create" class="space-y-6">
                {{ $this->form }}

                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-lg 
                                    bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2.5 
                                    transition-all duration-200 focus:ring-2 focus:ring-blue-400 
                                    focus:outline-none shadow-sm disabled:opacity-70">
                    立即提交
                </button>
            </form>
        </div>
    </div>
    <x-filament-actions::modals />
    <script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('notify', ({ title, message, type }) => {
            console.log(title, message, type);
            // 使用 daisyUI alert 样式
            const toast = document.createElement('div');
            toast.className = `alert alert-${type} shadow-lg z-[9999] w-72 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`;
            toast.innerHTML = `
                <div class="flex flex-col">
                    <strong class="font-semibold">${title}</strong>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        });
    });
    </script>
</div>

继续完善一下 提交按钮的加载状态

......
                    <button 
                        type="submit" 
                        wire:loading.attr="disabled"
                        class="inline-flex items-center justify-center gap-2 rounded-lg 
                               bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2.5 
                               transition-all duration-200 focus:ring-2 focus:ring-blue-400 
                               focus:outline-none shadow-sm disabled:opacity-70">
                        <x-heroicon-o-paper-airplane class="w-5 h-5" />
                        <span wire:loading.remove>立即提交</span>
                        <span wire:loading>提交中...</span>
                    </button>
......