項目介紹

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 (<DarkNeonLoginPagetitle="登錄"showCaptchaonLogin={async (p)=>console.log(p)}neonColor="#00e6ff"glowIntensity="medium"/>)
}export function RegisterDemo() {return (<DarkNeonRegisterPagetitle="注冊"showCaptchaonRegister={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 中提供帶/不帶驗證碼的登錄/注冊頁示例

總結

暗黑霓虹主題提供了易用的霓虹風登錄/注冊頁面，你可以用很少的代碼快速集成并自定義主題外觀。