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>