9ee99d17fd
New slot 'narrative' enables split-screen layout (50/50 desktop, collapses to single column on mobile <900px). Backward compatibility: - Pages that don't pass a narrative slot still render the original centered-card layout with siteName + logo + copyright - ForgotPassword, ResetPassword, EmailVerify unaffected To be used in Tasks 8 and 9 (LoginView, RegisterView). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
<template>
|
|
<div class="auth-shell" :class="{ 'auth-shell-split': hasNarrative }">
|
|
<div class="bg-glow soft"></div>
|
|
|
|
<!-- LEFT: Narrative (split mode only, hidden on mobile) -->
|
|
<aside v-if="hasNarrative" class="auth-narrative">
|
|
<slot name="narrative"></slot>
|
|
</aside>
|
|
|
|
<!-- RIGHT: Form -->
|
|
<main class="auth-main">
|
|
<div class="auth-main-inner">
|
|
<!-- Legacy centered-card header (only when no narrative slot) -->
|
|
<div class="mb-8 text-center" v-if="!hasNarrative && settingsLoaded">
|
|
<div
|
|
class="mb-4 inline-flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl"
|
|
>
|
|
<img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
|
|
</div>
|
|
<h1 class="text-2xl font-bold">{{ siteName }}</h1>
|
|
<p class="text-sm text-gray-500 dark:text-dark-400" v-if="siteSubtitle">{{ siteSubtitle }}</p>
|
|
</div>
|
|
|
|
<!-- Form content -->
|
|
<slot />
|
|
|
|
<!-- Footer link slot (e.g., "没有账户？注册") -->
|
|
<div class="mt-6 text-center text-sm">
|
|
<slot name="footer" />
|
|
</div>
|
|
|
|
<!-- Copyright (legacy mode only) -->
|
|
<div class="mt-8 text-center text-xs text-gray-400 dark:text-dark-500" v-if="!hasNarrative">
|
|
© {{ currentYear }} {{ siteName }}. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, useSlots } from 'vue'
|
|
import { useAppStore } from '@/stores'
|
|
import { sanitizeUrl } from '@/utils/url'
|
|
|
|
const appStore = useAppStore()
|
|
|
|
const siteName = computed(() => appStore.siteName || 'Sub2API')
|
|
const siteLogo = computed(() => sanitizeUrl(appStore.siteLogo || '', { allowRelative: true, allowDataUrl: true }))
|
|
const siteSubtitle = computed(() => appStore.cachedPublicSettings?.site_subtitle || 'Subscription to API Conversion Platform')
|
|
const settingsLoaded = computed(() => appStore.publicSettingsLoaded)
|
|
|
|
const currentYear = computed(() => new Date().getFullYear())
|
|
|
|
const slots = useSlots()
|
|
const hasNarrative = computed(() => !!slots.narrative)
|
|
|
|
onMounted(() => {
|
|
appStore.fetchPublicSettings()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.text-gradient {
|
|
@apply bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent;
|
|
}
|
|
|
|
.auth-shell {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.auth-shell-split {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.auth-shell-split {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.auth-narrative {
|
|
display: none;
|
|
}
|
|
}
|
|
.auth-narrative {
|
|
position: relative;
|
|
padding: 48px 56px;
|
|
background: linear-gradient(135deg, #0a0e1a 0%, #1e1b4b 100%);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: var(--text-0);
|
|
font-family: var(--font-sans);
|
|
}
|
|
.auth-main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 24px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.auth-main-inner {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
}
|
|
|
|
/* Legacy-mode (no narrative slot) background — keep existing gradient decorative look */
|
|
.auth-shell:not(.auth-shell-split) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
background: linear-gradient(to bottom right, #f9fafb, rgba(240,253,250,0.3), #f3f4f6);
|
|
}
|
|
:global(.dark) .auth-shell:not(.auth-shell-split) {
|
|
background: linear-gradient(to bottom right, #020617, #0f172a, #020617);
|
|
}
|
|
</style>
|