Academic-Affairs-System/web/src/components/SmartLaunchScreen.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { Capacitor } from '@capacitor/core'
import { useAuthStore } from '../stores/auth'
import { getSmartGreeting } from '../utils/smartGreeting'

const auth = useAuthStore()
const previewParams = import.meta.env.DEV
  ? new URLSearchParams(window.location.search)
  : null
const previewNative = previewParams?.has('previewLaunch') ?? false
const previewName = previewParams?.get('previewName')
const visible = ref(Capacitor.isNativePlatform() || previewNative)
const leaving = ref(false)
const greeting = computed(() =>
  getSmartGreeting(new Date(), previewName || auth.user?.displayName))
let dismissTimer: ReturnType<typeof setTimeout> | null = null
let removeTimer: ReturnType<typeof setTimeout> | null = null

function dismiss() {
  if (!visible.value || leaving.value) return
  leaving.value = true
  removeTimer = setTimeout(() => {
    visible.value = false
  }, 360)
}

onMounted(() => {
  if (!visible.value) return
  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
  dismissTimer = setTimeout(dismiss, reducedMotion ? 650 : 1800)
})

onBeforeUnmount(() => {
  if (dismissTimer) clearTimeout(dismissTimer)
  if (removeTimer) clearTimeout(removeTimer)
})
</script>

<template>
  <Transition name="smart-launch">
    <section
      v-if="visible"
      class="smart-launch-screen"
      :class="{ leaving }"
      role="status"
      aria-live="polite"
      @click="dismiss"
    >
      <div class="smart-launch-orbit orbit-one" />
      <div class="smart-launch-orbit orbit-two" />
      <div class="smart-launch-content">
        <div class="smart-launch-mark" aria-hidden="true">
          <i v-for="index in 9" :key="index" />
        </div>
        <span class="smart-launch-brand">MINGXU ACADEMIC</span>
        <p>{{ greeting.label }}</p>
        <h1>{{ greeting.title }}</h1>
        <small>{{ greeting.subtitle }}</small>
      </div>
      <span class="smart-launch-skip">轻触跳过</span>
    </section>
  </Transition>
</template>

<style scoped>
.smart-launch-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f8fbff;
  background:
    radial-gradient(circle at 15% 18%, rgb(74 198 193 / 22%), transparent 28rem),
    radial-gradient(circle at 88% 78%, rgb(94 132 255 / 24%), transparent 30rem),
    linear-gradient(145deg, #081733, #10275c 55%, #163b71);
  cursor: pointer;
}

.smart-launch-content {
  position: relative;
  z-index: 2;
  width: min(86vw, 32rem);
  text-align: center;
  animation: launch-rise 700ms cubic-bezier(.2, .8, .2, 1) both;
}

.smart-launch-mark {
  display: grid;
  grid-template-columns: repeat(3, 0.72rem);
  gap: 0.3rem;
  width: fit-content;
  margin: 0 auto 1.6rem;
  padding: 1rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 8%);
  box-shadow: 0 1.3rem 4rem rgb(0 0 0 / 24%);
  backdrop-filter: blur(12px);
}

.smart-launch-mark i {
  width: 0.72rem;
  aspect-ratio: 1;
  border-radius: 0.18rem;
  background: #6ee7d8;
}

.smart-launch-mark i:nth-child(2n) { background: #9cb8ff; }
.smart-launch-mark i:nth-child(5) { background: #fff; }

.smart-launch-brand {
  display: block;
  margin-bottom: 1.7rem;
  color: #8fe4dc;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.smart-launch-content p {
  margin: 0 0 0.75rem;
  color: rgb(235 244 255 / 72%);
  font-size: 0.82rem;
}

.smart-launch-content h1 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(1.7rem, 7vw, 2.45rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.smart-launch-content small {
  display: block;
  max-width: 24rem;
  margin: 1rem auto 0;
  color: rgb(235 244 255 / 68%);
  font-size: 0.85rem;
  line-height: 1.7;
}

.smart-launch-skip {
  position: absolute;
  bottom: max(2rem, env(safe-area-inset-bottom));
  z-index: 2;
  color: rgb(255 255 255 / 45%);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.smart-launch-orbit {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 50%;
}

.orbit-one {
  width: 24rem;
  height: 24rem;
  animation: launch-spin 18s linear infinite;
}

.orbit-two {
  width: 38rem;
  height: 38rem;
  border-style: dashed;
  animation: launch-spin 28s linear infinite reverse;
}

.smart-launch-leave-active { transition: opacity 360ms ease, transform 360ms ease; }
.smart-launch-leave-to { opacity: 0; transform: scale(1.025); }

@keyframes launch-rise {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes launch-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .smart-launch-content,
  .smart-launch-orbit {
    animation: none;
  }
}
</style>