磨砂玻璃登录页面使用教程 v0.1.1

项目介绍

yggjs_rlogin 是一个专为 React 登录页面开发打造的轻量级组件库。本文档将详细介绍其中的磨砂玻璃登录页面组件 GlassLoginPage，这是一个具有 iOS 17 质感的现代化登录界面。

核心特性

• 🎨 磨砂玻璃效果：半透明背景 + 高斯模糊
• 🌈 极光渐变背景：动态多彩背景动画
• ✨ iOS 17 质感：现代化的设计语言
• 📱 响应式设计：完美适配各种屏幕尺寸
• ♿ 无障碍支持：完整的 ARIA 标签和语义化 HTML
• 🔒 表单校验：内置用户名和密码校验系统

界面预览

安装说明

环境要求

• React 18+ 或 19+
• Node.js 16+
• 支持现代 CSS 特性的浏览器（Chrome 76+, Firefox 103+, Safari 9+）

安装步骤

# 使用 pnpm（推荐）
pnpm add yggjs_rlogin react react-dom

# 使用 npm
npm install yggjs_rlogin react react-dom

# 使用 yarn
yarn add yggjs_rlogin react react-dom

浏览器兼容性

磨砂玻璃效果依赖 backdrop-filter CSS 属性，支持情况：

• ✅ Chrome 76+
• ✅ Firefox 103+
• ✅ Safari 9+
• ✅ Edge 79+

登录页面介绍

yggjs_rlogin 提供了三种不同风格的登录页面组件：

1. LoginPage - 科技风登录页面，具有霓虹效果和动态背景
2. MinimalLoginPage - 极简白登录页面，苹果官网风格
3. GlassLoginPage - 磨砂玻璃登录页面，iOS 17 质感（本文档重点）

每种登录页面都有其独特的设计风格和适用场景，开发者可以根据项目需求选择合适的组件。

磨砂玻璃登录页面介绍

GlassLoginPage 是一个具有现代感的登录页面组件，灵感来源于 iOS 17 的设计语言。它采用了磨砂玻璃效果和极光渐变背景，为用户提供沉浸式的登录体验。

设计理念

• 沉浸式体验：全屏极光背景营造科幻氛围
• 视觉层次：通过透明度和模糊效果建立清晰的视觉层次
• 现代美学：符合当前主流的设计趋势
• 用户友好：保持功能性的同时提升视觉体验

技术特点

• 使用 backdrop-filter: blur() 实现磨砂玻璃效果
• CSS 动画优化，使用 transform 和 opacity 确保流畅性能
• 响应式布局，适配桌面端和移动端
• 完整的 TypeScript 类型定义

使用示例

基础用法

import React from 'react'
import { GlassLoginPage } from 'yggjs_rlogin'

export default function App() {
  const handleLogin = async ({ username, password }) => {
    // 处理登录逻辑
    console.log('登录信息:', { username, password })
    
    // 模拟 API 调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 登录成功处理
    alert('登录成功！')
  }

  return (
    <GlassLoginPage
      title="Glass UI"
      onLogin={handleLogin}
    />
  )
}

自定义 Logo

const CustomLogo = () => (
  <div style={{ 
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 0.95)',
    fontSize: '32px',
    fontWeight: '700',
    textShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
    letterSpacing: '-1px'
  }}>
    ✨ 我的应用
  </div>
)

<GlassLoginPage
  logo={<CustomLogo />}
  onLogin={handleLogin}
  usernameLabel="用户名或邮箱"
  passwordLabel="密码"
  submitLabel="登录"
/>

高级校验规则

import { 
  GlassLoginPage, 
  required, 
  usernameRule, 
  passwordRule, 
  minLen,
  customRule 
} from 'yggjs_rlogin'

const usernameRules = [
  required('请输入用户名'),
  usernameRule('用户名长度需为 3-36 个字符'),
  customRule((value) => {
    if (value.includes('@') && !value.includes('.')) {
      return '邮箱格式不正确'
    }
    return true
  })
]

const passwordRules = [
  required('请输入密码'),
  passwordRule('密码长度需为 6-36 个字符'),
  minLen(8, '密码至少需要 8 位字符'),
  customRule((value) => {
    if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
      return '密码必须包含大小写字母和数字'
    }
    return true
  })
]

<GlassLoginPage
  onLogin={handleLogin}
  usernameRules={usernameRules}
  passwordRules={passwordRules}
/>

代码解释

组件 Props

export type GlassLoginPageProps = {
  onLogin: (payload: { username: string; password: string }) => void | Promise<void>
  title?: string
  logo?: string | React.ReactNode
  usernameLabel?: string
  passwordLabel?: string
  submitLabel?: string
  usernameRules?: Rule[]
  passwordRules?: Rule[]
}

参数说明

参数	类型	默认值	说明
onLogin	Function	-	必需，登录回调函数
title	string	'登录'	页面标题
logo	`string	ReactNode`	-
usernameLabel	string	'用户名'	用户名输入框占位符
passwordLabel	string	'密码'	密码输入框占位符
submitLabel	string	'登录'	登录按钮文本
usernameRules	Rule[]	[usernameRule()]	用户名校验规则
passwordRules	Rule[]	[passwordRule()]	密码校验规则

核心功能实现

状态管理

const [username, setUsername] = React.useState('')
const [password, setPassword] = React.useState('')
const [showPassword, setShowPassword] = React.useState(false)
const [loading, setLoading] = React.useState(false)
const [errors, setErrors] = React.useState<{ username?: string; password?: string }>({})

表单校验

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault()
  const errs: { username?: string; password?: string } = {}

  const uErr = await validateRules(username, usernameRules)
  if (uErr) errs.username = uErr

  const pErr = await validateRules(password, passwordRules)
  if (pErr) errs.password = pErr

  setErrors(errs)
  if (Object.keys(errs).length > 0) return

  // 执行登录逻辑
  try {
    setLoading(true)
    await onLogin({ username, password })
  } finally {
    setLoading(false)
  }
}

样式设计介绍

磨砂玻璃效果实现

.yggjs-glass-login-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

关键技术点：

• backdrop-filter: blur(20px) - 背景模糊效果
• rgba(255, 255, 255, 0.1) - 半透明白色背景
• 多层 box-shadow - 营造立体感和深度

极光渐变背景

.yggjs-glass-login-page {
  background: 
    radial-gradient(ellipse at top left, rgba(255, 0, 150, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at top right, rgba(0, 150, 255, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(150, 255, 0, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(255, 150, 0, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
  animation: auroraShift 15s ease-in-out infinite;
}

设计特点：

• 四个角落的径向渐变光晕
• 底层线性渐变提供基础色彩
• 15秒循环的动画效果

动态粒子效果

.yggjs-glass-login-page::before {
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  animation: particleFloat 20s linear infinite;
}

交互动画

.yggjs-glass-login-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 0 0 3px rgba(255, 255, 255, 0.1),
    0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

交互细节：

• 聚焦时的微妙上移效果
• 发光边框和阴影变化
• 背景透明度增加

总结

磨砂玻璃登录页面 GlassLoginPage 是 yggjs_rlogin 组件库中的一个亮点组件，它完美结合了现代设计美学和实用功能：

优势特点

1. 视觉冲击力强：极光背景和磨砂玻璃效果营造出色的视觉体验
2. 技术实现先进：使用最新的 CSS 特性，展现现代前端技术
3. 用户体验优秀：流畅的动画和直观的交互设计
4. 代码质量高：完整的 TypeScript 支持和测试覆盖

适用场景

• 高端产品：适合需要展现品牌调性的产品
• 创意应用：设计类、娱乐类应用的登录页面
• 移动应用：特别适合移动端的沉浸式体验
• 展示项目：技术展示和概念验证项目

性能考虑

• 磨砂玻璃效果可能在低端设备上影响性能
• 建议在生产环境中进行性能测试
• 可以根据设备性能动态启用/禁用某些动画效果

通过使用 GlassLoginPage，开发者可以快速构建出具有现代感和专业性的登录界面，为用户提供难忘的第一印象。