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:
@@ -1,14 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<AuthLayout>
|
<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">
|
<div class="space-y-6">
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">创建账户</h2>
|
||||||
{{ t('auth.createAccount') }}
|
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">5 分钟开始用 PURO AI</p>
|
||||||
</h2>
|
|
||||||
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
|
|
||||||
{{ t('auth.signUpToStart', { siteName }) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="linuxdoOAuthEnabled || oidcOAuthEnabled" class="space-y-4">
|
<div v-if="linuxdoOAuthEnabled || oidcOAuthEnabled" class="space-y-4">
|
||||||
@@ -767,4 +781,51 @@ async function handleRegister(): Promise<void> {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-8px);
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user