filament-auth-ui-enhancer：一键提升 Filament Panels 身份验证页面颜值-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00078/article/details/147811066

filament-auth-ui-enhancer：一键提升 Filament Panels 身份验证页面颜值

filament-auth-ui-enhancer This Filament plugin empowers you to transform your auth pages with ease, allowing you to make them truly stand out. It offers a flexible alternative to the default auth pages in the Filament Panels package. 项目地址: https://gitcode.com/gh_mirrors/fi/filament-auth-ui-enhancer

Filament Panels 是 Laravel 应用中广泛使用的后台面板工具，但默认的身份验证页面样式可能不够个性化。filament-auth-ui-enhancer 是一个开源插件，它可以帮助开发者轻松定制身份验证页面的 UI，让你的应用脱颖而出。

项目介绍

filament-auth-ui-enhancer 是一个为 Filament Panels 提供身份验证界面增强的插件。它提供了一系列易于使用的配置选项，允许开发者自定义登录、注册、重置密码和邮箱验证页面的布局、颜色和背景图像，而无需深入复杂的 CSS 或 HTML 代码。

项目技术分析

filament-auth-ui-enhancer 基于 PHP 编写，与 Filament Panels 无缝集成。它使用了 Laravel 的服务提供者和 Filament 的自定义页面功能，为开发者提供了直观的 API 来定制 UI。此外，该插件遵循了 Filament 的主题化方法，确保了风格的一致性和可维护性。

项目及技术应用场景

filament-auth-ui-enhancer 适用于任何使用 Filament Panels 作为后台面板的 Laravel 应用。以下是一些典型的应用场景：

企业级应用：为内部管理系统提供一个具有企业风格的登录页面。
SaaS 平台：为用户提供个性化的登录和注册体验，增强品牌识别度。
个人项目：快速为个人项目打造一个独特的身份验证界面。

项目特点

filament-auth-ui-enhancer 具有以下显著特点：

易于安装和配置：通过 Composer 安装，只需简单几步即可集成到 Filament Panels 中。
丰富的自定义选项：允许自定义表单面板的位置、宽度、背景颜色，以及空面板的背景颜色、图像和透明度。
响应式设计：提供移动设备上的显示选项，确保在不同设备上的兼容性和用户体验。
可扩展性：通过 CSS 类提供进一步的自定义能力，允许开发者根据需求进行深度定制。

安装

安装 filament-auth-ui-enhancer 非常简单，只需运行以下命令：

composer require diogogpinto/filament-auth-ui-enhancer

然后，在你的 tailwind.config.js 文件中添加插件的视图路径，并运行 npm run build 来编译资源。

使用

在 Filament Panels 中使用该插件，需要将其添加到插件的数组中。如果你有自定义的认证逻辑，只需在你的类中使用提供的 trait 即可。

自定义 UI

filament-auth-ui-enhancer 允许你对表单面板和空面板进行多项自定义：

表单面板：自定义位置（左或右）、移动设备上的位置（上或下）、宽度和背景颜色。
空面板：自定义背景颜色、图像和图像透明度，以及是否在移动设备上显示。

进一步的自定义

如果你需要更深入的自定义，可以使用 CSS 类来调整样式。

工作示例

以下是一个配置示例，可以直接插入到你的插件数组中：

use DiogoGPinto\AuthUIEnhancer\AuthUIEnhancerPlugin;

$panel
    ->plugins([
        AuthUIEnhancerPlugin::make()
            ->showEmptyPanelOnMobile(false)
            ->formPanelPosition('right')
            ->formPanelWidth('40%')
            ->emptyPanelBackgroundImageOpacity('70%')
            ->emptyPanelBackgroundImageUrl('https://images.pexels.com/photos/466685/pexels-photo-466685.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')
    ]);

filament-auth-ui-enhancer 是一个强大的工具，可以让你快速提升 Filament Panels 的身份验证页面的美观度，为用户提供更好的体验。无论你是企业开发者还是个人项目爱好者，这个插件都能帮助你轻松实现个性化设计。立即尝试，让你的应用界面焕然一新！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考