From f17a88c171f167308e6fd6ee0d0aeab11a128093 Mon Sep 17 00:00:00 2001
From: mini <afanamigo@gmail.com>
Date: Sun, 19 Apr 2026 21:29:08 +0800
Subject: [PATCH] feat(auth): RegisterView with PURO narrative split layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/views/auth/RegisterView.vue | 73 ++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/auth/RegisterView.vue b/frontend/src/views/auth/RegisterView.vue
index bc8b8dce..64b0e95d 100644
--- a/frontend/src/views/auth/RegisterView.vue
+++ b/frontend/src/views/auth/RegisterView.vue
@@ -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>