yumi-admin/packages/effects/layouts/src/authentication/authentication.vue

<script setup lang="ts">
import type { ToolbarType } from './types';

import { computed } from 'vue';

import { preferences, usePreferences } from '@vben/preferences';

import { Copyright } from '../basic/copyright';
import AuthenticationFormView from './form.vue';
import SloganIcon from './icons/slogan.vue';
import Toolbar from './toolbar.vue';

interface Props {
  appName?: string;
  logo?: string;
  pageTitle?: string;
  pageDescription?: string;
  sloganImage?: string;
  toolbar?: boolean;
  copyright?: boolean;
  toolbarList?: ToolbarType[];
  minimal?: boolean;
  clickLogo?: () => void;
}

const props = withDefaults(defineProps<Props>(), {
  appName: '',
  copyright: true,
  logo: '',
  minimal: false,
  pageDescription: '',
  pageTitle: '',
  sloganImage: '',
  toolbar: true,
  toolbarList: () => ['layout'],
  clickLogo: () => {},
});

const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();

const logoSrc = computed(() => props.logo);
</script>

<template>
  <div
    v-if="minimal"
    class="auth-minimal-page relative flex min-h-full flex-1 items-center justify-center overflow-hidden px-6 py-10 text-foreground select-none"
  >
    <AuthenticationFormView
      class="auth-minimal-panel relative z-[1] !min-h-0 w-full max-w-[370px] !px-8 !py-6 sm:!px-9 sm:!py-7"
      data-side="bottom"
    />
  </div>

  <div
    v-else
    class="auth-page relative flex min-h-full flex-1 overflow-x-hidden text-foreground select-none"
  >
    <template v-if="toolbar">
      <slot name="toolbar">
        <Toolbar :toolbar-list="toolbarList" />
      </slot>
    </template>
    <!-- 左侧认证面板 -->
    <AuthenticationFormView
      v-if="authPanelLeft"
      class="auth-form-panel auth-form-panel-left min-h-full w-full shrink-0 lg:w-[480px] xl:w-[520px]"
      data-side="left"
    >
      <template v-if="copyright" #copyright>
        <slot name="copyright">
          <Copyright
            v-if="preferences.copyright.enable"
            v-bind="preferences.copyright"
          />
        </slot>
      </template>
    </AuthenticationFormView>

    <slot name="logo">
      <!-- 头部 Logo 和应用名称 -->
      <div
        v-if="logoSrc || appName"
        class="absolute top-0 left-0 z-10 flex flex-1"
        @click="clickLogo"
      >
        <div
          class="mt-4 ml-4 flex flex-1 items-center text-foreground sm:top-6 sm:left-6 lg:text-foreground"
        >
          <img
            v-if="logoSrc"
            :key="logoSrc"
            :alt="appName"
            :src="logoSrc"
            class="mr-2"
            width="42"
          />
          <p v-if="appName" class="m-0 text-xl font-medium">
            {{ appName }}
          </p>
        </div>
      </div>
    </slot>

    <!-- 系统介绍 -->
    <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
      <div class="auth-visual-panel absolute inset-0 size-full">
        <div class="login-background absolute top-0 left-0 size-full"></div>
        <div
          :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
          class="auth-hero-content relative z-[1] flex h-full items-center px-12 xl:px-20"
          :class="{
            'enter-x': authPanelLeft,
            '-enter-x': authPanelRight,
          }"
        >
          <div class="auth-hero-copy">
            <div class="auth-hero-label">DATA PLATFORM</div>
            <h1 class="auth-hero-title">
              {{ pageTitle }}
            </h1>
            <p class="auth-hero-description">
              {{ pageDescription }}
            </p>
            <template v-if="sloganImage">
              <img
                :alt="appName"
                :src="sloganImage"
                class="auth-slogan-image animate-float"
              />
            </template>
            <SloganIcon
              v-else
              :alt="appName"
              class="auth-slogan-image animate-float"
            />
            <div class="auth-scope-grid" aria-label="运营范围">
              <span>审核处理</span>
              <span>运营配置</span>
              <span>数据管理</span>
              <span>权限协作</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中心认证面板 -->
    <div v-if="authPanelCenter" class="relative flex-center w-full">
      <div class="login-background absolute top-0 left-0 size-full"></div>
      <AuthenticationFormView
        class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
        data-side="bottom"
      >
        <template v-if="copyright" #copyright>
          <slot name="copyright">
            <Copyright
              v-if="preferences.copyright.enable"
              v-bind="preferences.copyright"
            />
          </slot>
        </template>
      </AuthenticationFormView>
    </div>

    <!-- 右侧认证面板 -->
    <AuthenticationFormView
      v-if="authPanelRight"
      class="auth-form-panel auth-form-panel-right min-h-full w-full shrink-0 lg:w-[480px] xl:w-[520px]"
      data-side="right"
    >
      <template v-if="copyright" #copyright>
        <slot name="copyright">
          <Copyright
            v-if="preferences.copyright.enable"
            v-bind="preferences.copyright"
          />
        </slot>
      </template>
    </AuthenticationFormView>
  </div>
</template>

<style scoped>
.auth-minimal-page {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 42%, rgb(20 184 166 / 22%), transparent 20rem),
    radial-gradient(ellipse at 48% 62%, rgb(245 196 81 / 10%), transparent 26rem),
    linear-gradient(125deg, #061516 0%, #053f38 44%, #0a171d 100%);
}

.auth-minimal-page::before {
  position: absolute;
  inset: 0;
  content: '';
  background-image:
    linear-gradient(90deg, rgb(45 212 191 / 7%) 1px, transparent 1px),
    linear-gradient(rgb(245 196 81 / 5%) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, transparent 0 34%, rgb(245 196 81 / 12%) 35%, transparent 36% 100%);
  background-size:
    72px 72px,
    72px 72px,
    100% 100%;
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 76%), rgb(0 0 0 / 28%));
}

.auth-minimal-page::after {
  position: absolute;
  inset: -12%;
  content: '';
  background:
    linear-gradient(105deg, transparent 0 38%, rgb(255 255 255 / 10%) 48%, transparent 58% 100%),
    radial-gradient(ellipse at 50% 42%, transparent 0 28%, rgb(20 184 166 / 12%) 46%, transparent 66%);
  filter: blur(18px) saturate(112%);
  opacity: 0.72;
  transform: translate3d(0, 0, 0);
}

.auth-minimal-panel {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 34%), rgb(216 255 242 / 17%)),
    radial-gradient(ellipse at 18% 0%, rgb(255 255 255 / 42%), transparent 48%),
    radial-gradient(ellipse at 100% 92%, rgb(245 196 81 / 16%), transparent 48%),
    rgb(232 255 246 / 18%);
  box-shadow:
    0 34px 96px rgb(0 0 0 / 42%),
    0 0 0 1px rgb(245 196 81 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 76%),
    inset 0 -30px 70px rgb(20 184 166 / 10%);
  backdrop-filter: blur(42px) saturate(180%) brightness(1.08);
}

.auth-minimal-panel::before {
  position: absolute;
  inset: 0;
  content: '';
  background:
    linear-gradient(120deg, rgb(255 255 255 / 58%) 0%, transparent 28%),
    linear-gradient(238deg, transparent 41%, rgb(20 184 166 / 16%) 53%, transparent 67%),
    radial-gradient(ellipse at 50% -8%, rgb(255 255 255 / 48%), transparent 54%);
  mix-blend-mode: screen;
  opacity: 0.82;
  pointer-events: none;
}

.auth-minimal-panel::after {
  position: absolute;
  inset: 1px;
  content: '';
  border-radius: 27px;
  background:
    linear-gradient(100deg, transparent 0 22%, rgb(255 255 255 / 20%) 35%, transparent 48% 100%),
    linear-gradient(180deg, rgb(255 255 255 / 22%), transparent 40%);
  filter: blur(6px);
  opacity: 0.68;
  pointer-events: none;
  transform: translateX(-10%);
}

.auth-minimal-panel :deep(.side-content) {
  position: relative;
  z-index: 1;
}

.auth-minimal-panel :deep(.auth-login-form .pb-4) {
  padding-bottom: 10px;
}

.auth-minimal-panel :deep(input) {
  height: 46px;
  border-color: rgb(255 255 255 / 42%);
  background: rgb(247 252 248 / 54%);
  color: #172033;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    0 8px 20px rgb(6 78 59 / 7%);
  backdrop-filter: blur(18px) saturate(136%);
}

.auth-minimal-panel :deep(input::placeholder) {
  color: rgb(71 85 105 / 46%);
}

.auth-minimal-panel :deep(input:focus-visible) {
  border-color: rgb(255 255 255 / 74%);
  background: rgb(247 252 248 / 68%);
  box-shadow:
    0 0 0 3px rgb(20 184 166 / 18%),
    0 10px 24px rgb(15 118 110 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 86%);
}

.auth-minimal-panel :deep(input:-webkit-autofill),
.auth-minimal-panel :deep(input:-webkit-autofill:focus),
.auth-minimal-panel :deep(input:-webkit-autofill:hover) {
  border-color: rgb(13 148 136 / 28%);
  box-shadow:
    0 0 0 1000px rgb(247 252 248 / 92%) inset,
    0 8px 20px rgb(6 78 59 / 5%) !important;
  -webkit-text-fill-color: #172033;
}

.auth-minimal-panel :deep(button[aria-label='login']) {
  height: 46px;
  border: 1px solid rgb(255 255 255 / 40%);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 18%), transparent 34%),
    linear-gradient(135deg, rgb(7 95 86 / 86%) 0%, rgb(15 159 138 / 78%) 54%, rgb(200 155 60 / 78%) 100%);
  color: #ffffff;
  box-shadow:
    0 14px 28px rgb(5 95 86 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 34%),
    inset 0 -14px 28px rgb(0 0 0 / 10%);
  backdrop-filter: blur(18px) saturate(145%);
}

.auth-minimal-panel :deep(button[aria-label='login']:hover) {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 24%), transparent 34%),
    linear-gradient(135deg, rgb(8 105 95 / 88%) 0%, rgb(18 170 148 / 80%) 54%, rgb(210 167 77 / 82%) 100%);
  box-shadow:
    0 16px 32px rgb(5 95 86 / 28%),
    0 0 0 3px rgb(20 184 166 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 38%),
    inset 0 -14px 28px rgb(0 0 0 / 10%);
}

.auth-page {
  background: linear-gradient(90deg, #eef4ff 0%, #f7f9fc 58%, #ffffff 58%);
}

.auth-visual-panel {
  overflow: hidden;
  background:
    linear-gradient(135deg, #edf4ff 0%, #f7fafc 54%, #eef3fb 100%),
    #f4f7fb;
}

.auth-visual-panel::before {
  position: absolute;
  inset: 0;
  content: '';
  background-image:
    linear-gradient(rgb(15 23 42 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(15 23 42 / 6%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(120deg, rgb(0 0 0 / 70%), transparent 74%);
}

.auth-hero-copy {
  width: min(640px, 100%);
  margin: 0 auto;
}

.auth-hero-label {
  margin-bottom: 14px;
  color: hsl(var(--primary));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.auth-hero-title {
  max-width: 560px;
  margin: 0;
  color: #172033;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.auth-hero-description {
  max-width: 460px;
  margin: 12px 0 0;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.8;
}

.auth-slogan-image {
  display: block;
  width: min(340px, 56%);
  height: auto;
  margin: 34px 0 28px 24px;
}

.auth-scope-grid {
  display: grid;
  max-width: 430px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.auth-scope-grid span {
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgb(21 94 239 / 12%);
  border-left: 3px solid hsl(var(--primary));
  border-radius: 8px;
  background: rgb(255 255 255 / 70%);
  color: #2f3746;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.auth-form-panel {
  border-color: rgb(15 23 42 / 8%);
  background: #ffffff;
}

.auth-form-panel-right {
  border-left-width: 1px;
  box-shadow: -24px 0 60px rgb(15 23 42 / 6%);
}

.auth-form-panel-left {
  border-right-width: 1px;
  box-shadow: 24px 0 60px rgb(15 23 42 / 6%);
}

.login-background {
  background: linear-gradient(
    154deg,
    rgb(15 23 42 / 6%) 26%,
    hsl(var(--primary) / 18%) 48%,
    rgb(15 23 42 / 4%) 68%
  );
  filter: blur(80px);
}

@media (min-width: 1280px) {
  .auth-hero-title {
    font-size: 36px;
  }
}

@media (max-width: 1023px) {
  .auth-page {
    background: #ffffff;
  }

  .auth-form-panel {
    border: 0;
    box-shadow: none;
  }
}
</style>