Filament 如何自定义登录页面

官方的页面太简约了，而且可供修改的范围太少了

通过发布官方资源可以看到

resources/views/vendor/filament-panels/pages/auth/login.blade.php

<x-filament-panels::page.simple>@if (filament()->hasRegistration())<x-slot name="subheading">{{ __('filament-panels::pages/auth/login.actions.register.before') }}{{ $this->registerAction }}</x-slot>@endif<x-filament-panels::form wire:submit="authenticate">{{ $this->form }}<x-filament-panels::form.actions:actions="$this->getCachedFormActions()":full-width="$this->hasFullWidthFormActions()"/></x-filament-panels::form>
</x-filament-panels::page.simple>

你能修改的只有这个form的样式，一般我们都想把登录页面的整体布局修改下，比如加个大背景图啥的

可以看到他继承的是这个文件resources/views/vendor/filament-panels/components/layout/simple.blade.php

但是这个页面可能会被其他地方使用，为了不影响其他组件，我们就只能重写这一块了
首先自定义layout.blade.php

<x-filament-panels::layout.base :livewire="$livewire"><div class="flex flex-row h-screen w-screen full-body"><div class="left-body col- h-screen w-screen"><!-- 左侧内容 --></div><div class="right-body "><div class="bg-white p-6 login-form shadow-xl rounded-xl md:max-w-lg">{{ $slot }}</div><!-- 右侧内容 --></div></div><style>.left-body{width: 70%;background: url("/img/bg.jpg") center;background-size: cover;opacity: 0.8;}.right-body{width: 25%;}.full-body{justify-content: space-between;align-items: center;}.login-form{margin-right: 5rem;}</style>
</x-filament-panels::layout.base>

然后是login.blade.php,就是把原来的form搬过来，如果你懒的话也可以直接用原来的

@props([
'heading' => null,
'subheading' => null,
])<div {{ $attributes->class(['fi-simple-page']) }}><section class="grid auto-cols-fr gap-y-6"><x-filament-panels::header.simple:heading="$heading ??= $this->getHeading()":logo="$this->hasLogo()":subheading="$subheading ??= $this->getSubHeading()"/><div>@if (filament()->hasRegistration())<x-slot name="subheading">{{ __('filament-panels::pages/auth/login.actions.register.before') }}{{ $this->registerAction }}</x-slot>@endif<x-filament-panels::form wire:submit="authenticate">{{ $this->form }}<x-filament-panels::form.actions:actions="$this->getCachedFormActions()":full-width="$this->hasFullWidthFormActions()"/></x-filament-panels::form></div></section></div>

然后是 Login, 其实就是照搬了官方的文件，登录的逻辑都在这个文件内

<?phpnamespace App\Filament\Pages;use DanHarrin\LivewireRateLimiting\Exceptions\TooManyRequestsException;
use DanHarrin\LivewireRateLimiting\WithRateLimiting;
use Filament\Actions\Action;
use Filament\Actions\ActionGroup;
use Filament\Facades\Filament;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use Filament\Http\Responses\Auth\Contracts\LoginResponse;
use Filament\Notifications\Notification;
use Filament\Pages\BasePage;
use Filament\Pages\Concerns\InteractsWithFormActions;
use Filament\Pages\Page;
use Illuminate\Contracts\Support\Htmlable;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;
use Illuminate\Validation\ValidationException;/*** @property Form $form*/
class Login extends BasePage
{use InteractsWithFormActions;use WithRateLimiting;protected static string $view = 'filament.pages.login';protected static string $layout = 'components.filament.pages.layout';/*** @var array<string, mixed> | null*/public ?array $data = [];public function hasLogo(): bool{return true;}public function mount(): void{if (Filament::auth()->check()) {redirect()->intended(Filament::getUrl());}$this->form->fill();}public function authenticate(): ?LoginResponse{try {$this->rateLimit(5);} catch (TooManyRequestsException $exception) {Notification::make()->title(__('filament-panels::pages/auth/login.notifications.throttled.title', ['seconds' => $exception->secondsUntilAvailable,'minutes' => ceil($exception->secondsUntilAvailable / 60),]))->body(array_key_exists('body', __('filament-panels::pages/auth/login.notifications.throttled') ?: []) ? __('filament-panels::pages/auth/login.notifications.throttled.body', ['seconds' => $exception->secondsUntilAvailable,'minutes' => ceil($exception->secondsUntilAvailable / 60),]) : null)->danger()->send();return null;}$data = $this->form->getState();if (! Filament::auth()->attempt($this->getCredentialsFromFormData($data), $data['remember'] ?? false)) {throw ValidationException::withMessages(['data.email' => __('filament-panels::pages/auth/login.messages.failed'),]);}session()->regenerate();return app(LoginResponse::class);}public function form(Form $form): Form{return $form->schema([$this->getEmailFormComponent(),$this->getPasswordFormComponent(),$this->getRememberFormComponent(),])->statePath('data');}protected function getEmailFormComponent(): Component{return TextInput::make('email')->label(__('filament-panels::pages/auth/login.form.email.label'))->email()->required()->autocomplete()->autofocus();}protected function getPasswordFormComponent(): Component{return TextInput::make('password')->label(__('filament-panels::pages/auth/login.form.password.label'))->hint(filament()->hasPasswordReset() ? new HtmlString(Blade::render('<x-filament::link :href="filament()->getRequestPasswordResetUrl()"> {{ __(\'filament-panels::pages/auth/login.actions.request_password_reset.label\') }}</x-filament::link>')) : null)->password()->required();}protected function getRememberFormComponent(): Component{return Checkbox::make('remember')->label(__('filament-panels::pages/auth/login.form.remember.label'));}public function registerAction(): Action{return Action::make('register')->link()->label(__('filament-panels::pages/auth/login.actions.register.label'))->url(filament()->getRegistrationUrl());}public function getTitle(): string | Htmlable{return __('filament-panels::pages/auth/login.title');}public function getHeading(): string | Htmlable{return __('filament-panels::pages/auth/login.heading');}/*** @return array<Action | ActionGroup>*/protected function getFormActions(): array{return [$this->getAuthenticateFormAction(),];}protected function getAuthenticateFormAction(): Action{return Action::make('authenticate')->label(__('filament-panels::pages/auth/login.form.actions.authenticate.label'))->submit('authenticate');}protected function hasFullWidthFormActions(): bool{return true;}/*** @param  array<string, mixed>  $data* @return array<string, mixed>*/protected function getCredentialsFromFormData(array $data): array{return ['name' => $data['name'],'password' => $data['password'],];}
}

最后把Login注册进去就行了Providers/Filament/AdminPanelProvider.php

        return $panel->default()->id('admin')->path('admin')->login(Login::class) // 放进去