React 新拟态登录页面使用教程-EW帮帮网

项目介绍

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 (
    <NeumorphismLoginPage
      onLogin={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 (
    <NeumorphismLoginPage
      onLogin={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 (
    <NeumorphismLoginPage
      onLogin={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 (
    <NeumorphismLoginPage
      onLogin={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 (
    <NeumorphismLoginPage
      onLogin={handleLogin}
      showCaptcha={true}
      captchaRules={customCaptchaRules}
    />
  )
}

代码解释

组件属性

export type NeumorphismLoginPageProps = {
  onLogin: (payload: { username: string; password: string; captcha?: string }) => void | Promise<void>
  title?: string
  logo?: string | React.ReactNode
  usernameLabel?: string
  passwordLabel?: string
  submitLabel?: string
  usernameRules?: Rule[]
  passwordRules?: Rule[]
  showCaptcha?: boolean
  captchaLabel?: string
  captchaRules?: 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       // 验证码图片宽度，默认120px
  height?: number      // 验证码图片高度，默认40px
  refreshable?: boolean // 是否可刷新，默认true
}

验证码工具函数

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

import {
  generateCaptcha,     // 生成验证码文本
  validateCaptcha,     // 验证验证码
  generateCaptchaSVG,  // 生成验证码SVG
  createCaptchaData    // 创建验证码数据
} 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);
}

颜色方案

主背景色：#f0f0f0 系列米白色
阴影色：rgba(0, 0, 0, 0.1) 浅黑色
高光色：rgba(255, 255, 255, 0.8) 半透明白色
文字色：#555555 中性灰色
错误色：#d63384 温和红色

总结

新拟态登录页面为现代Web应用提供了一种全新的视觉体验。通过精心设计的阴影效果和交互反馈，它不仅美观现代，还具有出色的用户体验。

主要优势

视觉吸引力：独特的新拟态设计风格
用户体验：直观的交互反馈和无障碍支持
技术完善：完整的TypeScript支持和测试覆盖
易于集成：简单的API设计，快速集成到现有项目
高度可定制：支持自定义样式、验证规则和交互逻辑
安全增强：可选的验证码功能，提供额外安全保护

适用场景

现代化Web应用
企业级管理系统
创意设计项目
移动端适配项目
需要独特视觉效果的登录页面
需要额外安全验证的应用

示例项目

项目提供了完整的示例项目，展示不同配置的使用方法：

基础版本：examples/c04_neumorphism_login - 包含首页导航、基础登录页面和带验证码的登录页面
综合演示：examples/c05_comprehensive_demo - 展示所有登录页面组件的完整功能

每个示例都使用 React Router 实现页面导航，提供：

首页：功能介绍和导航
基础登录页面：不带验证码的登录体验
安全登录页面：带验证码的安全登录体验

通过使用新拟态登录页面，您可以为用户提供既美观又实用的登录体验，提升应用的整体品质和用户满意度。

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