当前位置：首页 > news >正文

React 新拟态登录页面使用教程

news 2025/8/20 7:23:41

项目介绍

YggJS RLogin 是一个专为 React 应用开发的登录页面组件库，提供多种精美的登录界面设计。新拟态登录页面（NeumorphismLoginPage）是我们最新推出的组件，采用新拟态（Neumorphism）设计风格，具有柔和内凹输入框、低饱和米白背景、微凸按钮等特色，为用户提供现代化且具有实体触感的登录体验。

安装说明

使用 pnpm 安装

pnpm add yggjs_rlogin

使用 npm 安装

npm install yggjs_rlogin

使用 yarn 安装

yarn add yggjs_rlogin

界面预览

在这里插入图片描述

登录页面介绍

YggJS RLogin 目前提供四种不同风格的登录页面组件：

LoginPage - 基础登录页面
MinimalLoginPage - 极简风格登录页面
GlassLoginPage - 磨砂玻璃风格登录页面
NeumorphismLoginPage - 新拟态风格登录页面（本文档重点）

新拟态登录页面介绍

新拟态设计（Neumorphism）是一种结合了扁平化设计和拟物化设计的现代UI风格，通过巧妙的阴影和高光效果，创造出元素从背景中"浮出"或"凹入"的视觉效果。

设计特色

柔和内凹输入框：输入框采用内凹设计，营造出嵌入式的视觉效果
低饱和米白背景：使用柔和的米白色渐变背景，减少视觉疲劳
微凸按钮：登录按钮采用微凸设计，提供清晰的交互反馈
实体触感：通过精心设计的阴影和高光，营造出真实的物理触感
响应式设计：完美适配各种屏幕尺寸

技术特点

100vh/100vw 全屏设计，无滚动条
内置表单验证功能
支持密码显示/隐藏切换
完整的 TypeScript 类型支持
无障碍访问支持
加载状态处理

使用示例

基础用法

import { NeumorphismLoginPage } from 'yggjs_rlogin'
import 'yggjs_rlogin/styles.css'function App() {const handleLogin = async (payload: { username: string; password: string }) => {console.log('登录信息:', payload)// 处理登录逻辑}return (<NeumorphismLoginPage onLogin={handleLogin} />)
}

自定义配置

import { NeumorphismLoginPage } from 'yggjs_rlogin'
import 'yggjs_rlogin/styles.css'function App() {const handleLogin = async (payload: { username: string; password: string }) => {// 模拟登录请求await new Promise(resolve => setTimeout(resolve, 1500))alert(`登录成功！用户名: ${payload.username}`)}const customLogo = (<div style={{width: '80px',height: '80px',borderRadius: '50%',background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',display: 'flex',alignItems: 'center',justifyContent: 'center',color: 'white',fontSize: '24px',fontWeight: 'bold',boxShadow: '8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.8)',margin: '0 auto'}}>LOGO</div>)return (<NeumorphismLoginPageonLogin={handleLogin}title="新拟态登录"logo={customLogo}usernameLabel="用户名或邮箱"passwordLabel="登录密码"submitLabel="立即登录"/>)
}

自定义验证规则

import { NeumorphismLoginPage, customRule } from 'yggjs_rlogin'
import 'yggjs_rlogin/styles.css'function App() {const handleLogin = async (payload: { username: string; password: string }) => {// 登录逻辑}const customUsernameRules = [customRule((value: string) => {if (value.length < 5) return '用户名至少需要5个字符'if (!/^[a-zA-Z0-9_]+$/.test(value)) return '用户名只能包含字母、数字和下划线'return true})]const customPasswordRules = [customRule((value: string) => {if (value.length < 8) return '密码至少需要8个字符'if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {return '密码必须包含大小写字母和数字'}return true})]return (<NeumorphismLoginPageonLogin={handleLogin}usernameRules={customUsernameRules}passwordRules={customPasswordRules}/>)
}

验证码功能

所有登录页面组件都支持可选的验证码功能，默认不显示。

启用验证码

import { NeumorphismLoginPage } from 'yggjs_rlogin'
import 'yggjs_rlogin/styles.css'function App() {const handleLogin = async (payload: {username: string;password: string;captcha?: string}) => {console.log('登录信息:', payload)// 当启用验证码时，payload.captcha 包含用户输入的验证码}return (<NeumorphismLoginPageonLogin={handleLogin}showCaptcha={true}captchaLabel="图形验证码"/>)
}

自定义验证码配置

import { NeumorphismLoginPage } from 'yggjs_rlogin'
import 'yggjs_rlogin/styles.css'function App() {const handleLogin = async (payload: {username: string;password: string;captcha?: string}) => {// 处理登录逻辑}return (<NeumorphismLoginPageonLogin={handleLogin}showCaptcha={true}captchaLabel="安全验证码"captchaConfig={{length: 6,        // 验证码长度width: 150,       // 图片宽度height: 50        // 图片高度}}/>)
}

自定义验证码验证规则

import { NeumorphismLoginPage, customRule, validateCaptcha } from 'yggjs_rlogin'
import 'yggjs_rlogin/styles.css'function App() {const handleLogin = async (payload: {username: string;password: string;captcha?: string}) => {// 处理登录逻辑}// 自定义验证码验证规则const customCaptchaRules = [customRule((value: string) => {if (!value) return '请输入验证码'if (value.length !== 4) return '验证码必须为4位'// 这里可以添加更多自定义验证逻辑return true})]return (<NeumorphismLoginPageonLogin={handleLogin}showCaptcha={true}captchaRules={customCaptchaRules}/>)
}

代码解释

组件属性

export type NeumorphismLoginPageProps = {onLogin: (payload: { username: string; password: string; captcha?: string }) => void | Promise<void>title?: stringlogo?: string | React.ReactNodeusernameLabel?: stringpasswordLabel?: stringsubmitLabel?: stringusernameRules?: Rule[]passwordRules?: Rule[]showCaptcha?: booleancaptchaLabel?: stringcaptchaRules?: Rule[]captchaConfig?: CaptchaConfig
}

属性说明

onLogin (必需): 登录回调函数，接收用户名、密码和可选的验证码
title: 登录页面标题，默认为"登录"
logo: Logo，可以是图片URL或React组件
usernameLabel: 用户名输入框标签，默认为"用户名"
passwordLabel: 密码输入框标签，默认为"密码"
submitLabel: 登录按钮文本，默认为"登录"
usernameRules: 用户名验证规则数组
passwordRules: 密码验证规则数组
showCaptcha: 是否显示验证码，默认为false
captchaLabel: 验证码输入框标签，默认为"验证码"
captchaRules: 验证码验证规则数组
captchaConfig: 验证码配置选项

验证规则

组件支持多种内置验证规则：

import {required,minLen,maxLen,emailRule,usernameRule,passwordRule,customRule
} from 'yggjs_rlogin'// 内置规则示例
const rules = [required('此字段为必填'),minLen(6, '最少6个字符'),maxLen(20, '最多20个字符'),emailRule('请输入有效邮箱'),usernameRule('用户名格式不正确'),passwordRule('密码格式不正确'),customRule((value) => value.includes('@') ? true : '必须包含@符号')
]

验证码配置

验证码配置接口 CaptchaConfig：

interface CaptchaConfig {length?: number      // 验证码长度，默认4位width?: number       // 验证码图片宽度，默认120pxheight?: number      // 验证码图片高度，默认40pxrefreshable?: boolean // 是否可刷新，默认true
}

验证码工具函数

组件库还提供了验证码相关的工具函数：

import {generateCaptcha,     // 生成验证码文本validateCaptcha,     // 验证验证码generateCaptchaSVG,  // 生成验证码SVGcreateCaptchaData    // 创建验证码数据
} from 'yggjs_rlogin'// 生成4位验证码
const captchaText = generateCaptcha(4)// 验证用户输入
const isValid = validateCaptcha('ABC4', 'abc4') // true，不区分大小写// 生成验证码图片
const svg = generateCaptchaSVG('ABC4', 120, 40)// 创建完整的验证码数据
const captchaData = createCaptchaData({length: 4,width: 120,height: 40
})

样式设计介绍

新拟态设计原理

新拟态设计通过以下技术实现：

双向阴影：同时使用深色和浅色阴影，创造立体效果
背景融合：元素背景色与页面背景色保持一致
微妙渐变：使用极其微妙的渐变增强立体感
交互反馈：hover和active状态提供清晰的视觉反馈

关键CSS技术

/* 内凹效果 */
.input-container {box-shadow: inset 8px 8px 16px rgba(0, 0, 0, 0.1),inset -8px -8px 16px rgba(255, 255, 255, 0.8);
}/* 微凸效果 */
.button {box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.1),-12px -12px 24px rgba(255, 255, 255, 0.8);
}