feat(auth): RegisterView with PURO narrative split layout

Same split layout as LoginView: left narrative, right form.
Heading: '创建账户' + '5 分钟开始用 PURO AI'.
All form logic preserved (OAuth, Turnstile, email verify code, password fields).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mini
2026-04-19 21:29:08 +08:00
parent 91b9ae7e21
commit f17a88c171

View File

@@ -1,14 +1,28 @@
<template>
<AuthLayout>
<template #narrative>
<div class="auth-narrative-inner">
<div class="brand"><span class="hex"></span><span>PURO AI</span></div>
<div class="auth-narrative-hero">
<div class="auth-narrative-headline">
<span class="num-5">5</span> 个订阅<br>
<span class="num-1">1</span> key
</div>
<p class="auth-narrative-sub">
省去切换账号的繁琐<br>
省去为多个高昂订阅重复买单<br>
<span class="auth-narrative-tagline">PURO纯粹 AI 调用回归本质</span>
</p>
</div>
<div class="auth-narrative-foot">Claude · ChatGPT · Codex · Gemini</div>
</div>
</template>
<div class="space-y-6">
<!-- Title -->
<div class="text-center">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
{{ t('auth.createAccount') }}
</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
{{ t('auth.signUpToStart', { siteName }) }}
</p>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">创建账户</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">5 分钟开始用 PURO AI</p>
</div>
<div v-if="linuxdoOAuthEnabled || oidcOAuthEnabled" class="space-y-4">
@@ -767,4 +781,51 @@ async function handleRegister(): Promise<void> {
opacity: 0;
transform: translateY(-8px);
}
.auth-narrative-inner {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--text-0);
}
.brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 18px;
}
.brand .hex {
color: var(--cyan);
font-size: 24px;
}
.auth-narrative-headline {
font-size: clamp(40px, 5vw, 64px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
.auth-narrative-headline .num-5 { color: var(--amber); }
.auth-narrative-headline .num-1 { color: var(--cyan); }
.auth-narrative-sub {
font-size: 15px;
line-height: 1.7;
color: var(--text-1);
}
.auth-narrative-tagline {
display: block;
margin-top: 12px;
font-size: 12px;
color: var(--text-3);
}
.auth-narrative-foot {
font-size: 12px;
color: var(--text-3);
font-family: var(--font-mono);
}
</style>