优化

2026-08-04 15:31:08 +08:00
parent d5eaa75329
commit ec15a72b0b
14 changed files with 793 additions and 161 deletions
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { CheckCircle2 } from '@lucide/vue'
+import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
+import authOcean from '@/assets/brand/auth-ocean.jpg'
+
+defineProps<{
+  switchText: string
+  switchLabel: string
+  switchTo: string
+  visualTitle: string
+  visualDescription: string
+  features: string[]
+  variant?: 'login' | 'register'
+}>()
+</script>
+
+<template>
+  <div class="auth-page">
+    <header class="auth-header">
+      <RouterLink to="/login" class="auth-brand" aria-label="柏悦物流客户工作台">
+        <img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" />
+      </RouterLink>
+      <div class="auth-header-action">
+        <span>{{ switchText }}</span>
+        <RouterLink :to="switchTo">{{ switchLabel }}</RouterLink>
+      </div>
+    </header>
+
+    <main class="auth-stage">
+      <div class="auth-panel" :class="`auth-panel--${variant || 'login'}`">
+        <section class="auth-visual" aria-label="柏悦物流服务介绍">
+          <img :src="authOcean" alt="集装箱码头与跨境物流作业场景" />
+          <div class="auth-visual-shade" aria-hidden="true"></div>
+          <div class="auth-visual-content">
+            <div>
+              <h1>{{ visualTitle }}</h1>
+              <p>{{ visualDescription }}</p>
+            </div>
+            <ul>
+              <li v-for="feature in features" :key="feature">
+                <CheckCircle2 :size="19" aria-hidden="true" />
+                <span>{{ feature }}</span>
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section class="auth-form-panel">
+          <slot />
+        </section>
+      </div>
+    </main>
+  </div>
+</template>