feat(auth+desktop): 邮箱验证码登录 + 登录窗改版(微信/邮箱双方式,无边框)
后端(协议 → 存储 → 接口,E2E 测试全绿): - protocol:AuthEmailCodeRequest / AuthEmailRequest DTO - store:EmailIdentity 表(邮箱唯一索引)+ authmail:* Redis key - auth/email.go:POST /v1/auth/email/code 发 6 位码(crypto/rand, 60s 冷却 SetNX,10 分钟 TTL);POST /v1/auth/email 常量时间比对、 码一次性、邮箱建号(昵称取前缀)→ JWT(与微信登录同响应形态) - Mailer 接口 + MockMailer(验证码打日志供联调;SMTP 未配置自动降级, 装配结果入启动日志,上线前须换真实实现) - TestEmailLogin E2E:发码/冷却 429/错码拒绝/登录/token 可用/码防复用 桌面(Rust 命令 + UI 改版): - api.rs:login_email_code / login_email(成功保存 token + ws 重连, 与扫码登录同路径) - 登录窗改版(原型 LoginPurchase 先行,dark 截图验收):logo + 分段 切换(微信扫码 / 邮箱登录,与设置页同控件语言)+ 邮箱表单 (60s 倒计时、错误文案、未注册自动建号提示) - 二维码真渲染:qrcode 库画 canvas(前景/背景取主题 token), 替换原 URL 文本占位;过期态半透明化 - 登录窗无边框化:transparent + Overlay 标题栏 + 原生贴形阴影; 抽公共 WindowFrame 组件(设置窗同步重构复用) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,19 @@
|
||||
// dudu 桌面端 · 登录 / 购买窗口(点击走完整流程:扫码登录 → 选时长包 → 支付 → 完成)
|
||||
// dudu 桌面端 · 登录 / 购买窗口(点击走完整流程:登录(微信扫码 / 邮箱验证码)→ 选时长包 → 支付 → 完成)
|
||||
|
||||
function LoginPurchaseWindow() {
|
||||
const { Button, Badge } = window.DuduDesignSystem_2e0172;
|
||||
const { Button, Badge, Input } = window.DuduDesignSystem_2e0172;
|
||||
const [step, setStep] = React.useState('login'); // login | plans | pay | done
|
||||
const [plan, setPlan] = React.useState('m');
|
||||
const [mode, setMode] = React.useState('wechat'); // wechat | email
|
||||
const [email, setEmail] = React.useState('');
|
||||
const [code, setCode] = React.useState('');
|
||||
const [cd, setCd] = React.useState(0); // 验证码冷却秒数(演示 3s)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (cd <= 0) return;
|
||||
const t = setTimeout(() => setCd(cd - 1), 1000);
|
||||
return () => clearTimeout(t);
|
||||
}, [cd]);
|
||||
|
||||
const PACKS = {
|
||||
s: { label: '100 分钟', price: 9, desc: '约 ¥0.09 / 分钟', tag: '' },
|
||||
@@ -22,12 +32,53 @@ function LoginPurchaseWindow() {
|
||||
{step === 'login' && (
|
||||
<Center>
|
||||
<span style={{ color: 'var(--accent)' }}><DuduLogo size={40} /></span>
|
||||
<div style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)' }}>微信扫码登录</div>
|
||||
<FakeQr seed={7} />
|
||||
<div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-2)', textAlign: 'center', lineHeight: 'var(--leading-normal)' }}>
|
||||
打开微信扫一扫,确认后自动登录
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => setStep('plans')}>模拟:手机已确认 →</Button>
|
||||
<div style={{ fontSize: 'var(--text-lg)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)' }}>登录 dudu</div>
|
||||
|
||||
{/* 登录方式分段切换(与设置页「外观」同控件语言) */}
|
||||
<span style={{ display: 'inline-flex', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)', padding: 2, gap: 2 }}>
|
||||
{[['wechat', '微信扫码'], ['email', '邮箱登录']].map(([val, lab]) => (
|
||||
<button key={val} type="button" onClick={() => setMode(val)} style={{
|
||||
height: 26, padding: '0 14px', borderRadius: 4, border: 'none', cursor: 'pointer',
|
||||
fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)',
|
||||
background: mode === val ? 'var(--surface-card)' : 'transparent',
|
||||
color: mode === val ? 'var(--text-1)' : 'var(--text-2)',
|
||||
boxShadow: mode === val ? 'var(--shadow-card)' : 'none',
|
||||
transition: 'background var(--dur-fast) var(--ease-out)',
|
||||
}}>{lab}</button>
|
||||
))}
|
||||
</span>
|
||||
|
||||
{mode === 'wechat' ? (
|
||||
<>
|
||||
<FakeQr seed={7} />
|
||||
<div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-2)', textAlign: 'center', lineHeight: 'var(--leading-normal)' }}>
|
||||
打开微信扫一扫,确认后自动登录
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => setStep('plans')}>模拟:手机已确认 →</Button>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ alignSelf: 'stretch', display: 'flex', flexDirection: 'column', gap: 10, padding: '4px 8px 0' }}>
|
||||
<Input
|
||||
size="lg" type="email" placeholder="邮箱地址"
|
||||
value={email} onChange={(e) => setEmail(e.target.value)}
|
||||
style={{ width: '100%', boxSizing: 'border-box' }}
|
||||
/>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<Input
|
||||
size="lg" inputMode="numeric" maxLength={6} placeholder="6 位验证码"
|
||||
value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
|
||||
style={{ flex: 1, minWidth: 0 }}
|
||||
/>
|
||||
<Button variant="secondary" disabled={cd > 0 || !email.includes('@')} onClick={() => setCd(3)}>
|
||||
{cd > 0 ? `${cd}s` : '发送验证码'}
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="primary" block disabled={code.length !== 6} onClick={() => setStep('plans')}>登录</Button>
|
||||
<div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-3)', textAlign: 'center' }}>
|
||||
未注册的邮箱将自动创建账号
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Center>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user