YggJS RLogin暗黑霓虹主题登录注册页面 版本：v0.1.1

项目介绍

yggjs_rlogin 是一个专注于 React 登录/注册页面的组件库。本文档介绍"暗黑霓虹"主题：#111 暗色背景 + 青蓝霓虹描边输入框 + 赛博朋克光效按钮。

安装说明

• 安装：pnpm add yggjs_rlogin react react-dom
• 使用：从 yggjs_rlogin 引入组件和全局样式（import 'yggjs_rlogin/styles.css'）。

暗黑霓虹主题特性

• 暗色 #111 背景，卡片 #0b0b0b
• 霓虹主色默认 #00e6ff，可通过 neonColor 定制
• 光晕强度 glowIntensity: 'soft' | 'medium' | 'strong'
• 输入框霓虹描边，聚焦时发光
• 按钮赛博朋克光效 hover 动效

效果预览

使用教程

1. 全局引入样式：import 'yggjs_rlogin/styles.css'
2. 登录页：
3. 注册页：
4. 可通过 neonColor、glowIntensity、className 自定义主题细节

示例代码

import React from 'react'
import { DarkNeonLoginPage, DarkNeonRegisterPage } from 'yggjs_rlogin'

export function LoginDemo() {
  return (
    <DarkNeonLoginPage
      title="登录"
      showCaptcha
      onLogin={async (p)=>console.log(p)}
      neonColor="#00e6ff"
      glowIntensity="medium"
    />
  )
}

export function RegisterDemo() {
  return (
    <DarkNeonRegisterPage
      title="注册"
      showCaptcha
      onRegister={async (p)=>console.log(p)}
      neonColor="#00e6ff"
      glowIntensity="medium"
    />
  )
}

代码解释

• 基于共享验证与验证码组件（src/lib/shared）
• 登录/注册组件分别位于 src/lib/dark_neon_login/components
• 提供自定义规则 validationRules 与验证码 captchaConfig

组件参数

• 通用：title、logo、showCaptcha、validationRules、captchaConfig、className
• 登录：onLogin(username,password[,captcha])
• 注册：onRegister(username,password,confirmPassword[,email,captcha])
• 暗黑霓虹特有：neonColor、glowIntensity、backgroundColor

组件事件

• onLogin(payload)
• onRegister(payload)
• CaptchaInput.onValidate(isValid, code)

示例

• 在 examples/teach_demo 中提供带/不带验证码的登录/注册页示例

总结

暗黑霓虹主题提供了易用的霓虹风登录/注册页面，你可以用很少的代码快速集成并自定义主题外观。