在深入研究技巧之前，让我们设置应用程序的 Brand Name （品牌名称） 和 theme color （主题颜色）。打开 app/Providers/Filament/AdminPanelProvider.php 并设置以下面板选项：
return $panel ->brandName('Your Brand Name') ->colors([ 'primary' => Color::Green, ])
第 1 步 – 准备样式和额外内容
首先，让我们看看当前视图页面，该页面正在呈现登录页面 vendor/filament/filament/resources/views/pages/auth/login.blade.php 。此视图中有两个渲染钩子（ panels::auth.login.form.before 第 10 行）和 panels：：auth.login.form.after（第 21 行）。这些是我可以轻松注入额外内容的点。我们将创建一个新的视图文件，并将其注册为在 panels：：auth.login.form.after 中呈现。
让我们在 处 resources/views/filament/login_extra.blade.php 创建一个视图文件，并将以下内容复制到其中。
<h3 id="slogan">Together we achieve exceptional goodness!</h3> <style> body { background: rgb(34,193,195) !important; background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%) !important;; } @media screen and (min-width: 1024px) { main { position: absolute; right: 100px; } main:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: darkcyan; border-radius: 12px; z-index: -9; /*box-shadow: -50px 80px 4px 10px #555;*/ -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); } .fi-logo { position: fixed; left: 100px; font-size: 3em; color: cornsilk; } #slogan { position: fixed; left: 100px; margin-top: 50px; color: bisque; font-family: cursive; font-size: 2em; font-weight: bold; text-shadow: #3f6212 2px 2px 5px; } } </style>
现在，登录页面应以渐变色和右侧相邻的形式显示。
第 2 步 – 将此文件挂接到登录页面
我们可以用任何 ServiceProvider 的渲染钩子来注册这个文件。让我们打开 并在 app/Providers/AppServiceProvider.php boot（） 方法中添加以下行：
FilamentView::registerRenderHook( 'panels::auth.login.form.after', fn (): View => view('filament.login_extra') );
这只是一个使用渲染钩子添加内容和 CSS 的示例。使用此过程，我们可以将任何内容和样式添加到 filament v3 登录页面。可以使用 background-image 将图像添加到 body。如果你有一些 CSS 经验，你绝对可以让它更美观、响应更灵敏。
第 3 步（可选）：将 CSS 移动到单独的文件
此时，我们所有的自定义 CSS 都在 login_extra.blade.php 中 - 这感觉不对劲。让我们创建一个文件 resources/css/login.css。然后，从 login_extra 的 <style> 标签中移动所有 CSS，并将它们放入此 css 文件中。并将 style 标签替换为以下行
@vite('resources/css/login.css')
要在构建过程中包含这个新的 css 文件，请将 'resources/css/login.css' 添加到vite.config.js的输入列表中。
现在 vite.config.js 的 plugins 配置应该如下所示：
plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/login.css'], // ... other config }), ],
转到命令行，构建资产（例如，npm run build），登录页面应该可以按预期工作
Filament v3 提供了一个非常可扩展的工具集！有多种方法可以实现类似的结果。您甚至可以通过在 AdminPanelProvider 的 $panel->login（） 方法中设置一个新的 Page 类来更改整个登录页面。因此，您可以探索这些选项并找到适合您需求的流程。
