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

- Left: ⬢ PURO AI brand + '5→1' headline + three-line value props
- Right: existing form (OAuth, Turnstile, 2FA all preserved unchanged)
- Heading changed from t('auth.welcomeBack') to '登录' — i18n key consolidation in Task 11

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/auth/LoginView.vue | 73 ++++++++++++++++++++++++---
 1 file changed, 67 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/auth/LoginView.vue b/frontend/src/views/auth/LoginView.vue
index 70b64e3f..7d2f4a75 100644
--- a/frontend/src/views/auth/LoginView.vue
+++ b/frontend/src/views/auth/LoginView.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.welcomeBack') }}
-        </h2>
-        <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">
-          {{ t('auth.signInToAccount') }}
-        </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">用你的 PURO AI 账户继续</p>
       </div>
 
   <div v-if="!backendModeEnabled && (linuxdoOAuthEnabled || oidcOAuthEnabled)" class="space-y-4">
@@ -439,4 +453,51 @@ function handle2FACancel(): 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>