如何在Filament PHP后台导航栏添加带选择组件的表单？

1. 生成自定义Livewire组件 #

先创建承载选择器的Livewire组件，用于处理选择逻辑：

php artisan make:livewire NavigationSelector

编辑组件文件app/Http/Livewire/NavigationSelector.php，集成Filament表单组件：

<?php

namespace App\Http\Livewire;

use Filament\Forms\Components\Select;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;

class NavigationSelector extends Component implements HasForms
{
    use InteractsWithForms;

    public ?string $selectedValue = null;

    public function mount()
    {
        // 从会话初始化选中值，保持页面刷新后的状态
        $this->selectedValue = session('nav_selected_value') ?? 'all';
    }

    protected function getFormSchema(): array
    {
        return [
            Select::make('selectedValue')
                ->label('') // 隐藏标签，适配导航栏布局
                ->options([
                    'all' => '全部数据',
                    'active' => '活跃数据',
                    'inactive' => '非活跃数据',
                    // 替换为你的业务选项
                ])
                ->live() // 实时响应选择变更
                ->afterStateUpdated(function ($state) {
                    // 存储选中值到会话，供其他页面调用
                    session(['nav_selected_value' => $state]);
                    // 可选：触发全局事件，通知其他组件刷新数据
                    $this->dispatch('nav-selection-updated', $state);
                }),
        ];
    }

    public function render()
    {
        return view('livewire.navigation-selector');
    }
}

创建组件视图resources/views/livewire/navigation-selector.blade.php：

<div class="flex items-center h-full px-2">
    {{ $this->form }}
</div>

2. 注册到Filament面板导航栏 #

打开app/Providers/Filament/AdminPanelProvider.php，在面板配置中添加顶部导航组件：

use App\Http\Livewire\NavigationSelector;

public function panel(Panel $panel): Panel
{
    return $panel
        ->default()
        ->id('admin')
        ->path('admin')
        // 保留你的其他面板配置（比如资源、主题等）
        ->topNavigationComponents([
            NavigationSelector::class,
        ]);
}

3. 基于选择值加载数据 #

在需要根据选择结果过滤数据的资源页面（比如列表页），从会话中读取选中值：

// 示例：app/Filament/Resources/PostResource/Pages/ListPosts.php
use Illuminate\Database\Eloquent\Builder;

protected function getTableQuery(): Builder
{
    $selectedValue = session('nav_selected_value') ?? 'all';
    
    $query = parent::getTableQuery();
    
    if ($selectedValue !== 'all') {
        $query->where('status', $selectedValue);
    }
    
    return $query;
}

如果需要实时刷新数据，可在列表页监听全局事件：

// 在ListPosts.php中添加
protected function getListeners(): array
{
    return [
        'nav-selection-updated' => '$refresh',
    ];
}

4. 样式优化（可选） #

若需调整选择器在导航栏的间距或样式，在Filament自定义CSS文件中添加：

.filament-top-navigation .livewire-navigation-selector {
    margin-right: 1.5rem;
}

内容的提问来源于stack exchange，提问作者Akampurira Brian David