blog-press/docs/.vitepress/theme/components/Loading.vue

<template>
  <div>
    <!-- 简化版优雅加载动画 -->
    <Transition name="fade">
      <div v-if="isLoading" class="simple-elegant-loading">
        <div class="loading-content">
          <!-- 动态加载动画 -->
          <div class="loading-spinner">
            <div class="spinner-circle"></div>
            <div class="spinner-arc"></div>
            <div class="brand-dot">
              <div class="dot"></div>
            </div>
          </div>
          
          <!-- 加载文字 -->
          <div class="loading-text">
            <h3>正在加载</h3>
            <p>请稍候...</p>
          </div>
        </div>
      </div>
    </Transition>
    
    <!-- 主内容 -->
    <Transition name="slide-up">
      <div v-show="!isLoading">
        <DefaultTheme.Layout v-bind="$attrs">
          <template #doc-before>
            <ArticleMetadat />
          </template>
        </DefaultTheme.Layout>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import ArticleMetadat from './ArticleMetadata.vue';
import { ref, onMounted, onBeforeUnmount } from 'vue'

const isLoading = ref(true)
let loadTimer: NodeJS.Timeout

onMounted(() => {
  const handleLoad = () => {
    // 添加一个最小显示时间，避免闪烁
    const minDisplayTime = 800 // 最小显示800ms
    
    if (document.readyState === 'complete') {
      setTimeout(() => {
        isLoading.value = false
      }, minDisplayTime)
    } else {
      loadTimer = setTimeout(() => {
        isLoading.value = false
      }, minDisplayTime)
    }
  }

  // 监听load事件
  window.addEventListener('load', handleLoad)
  
  // 如果已经从缓存加载
  if (document.readyState === 'complete') {
    handleLoad()
  }
})

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

<style scoped>
.simple-elegant-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--vp-c-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
}

.loading-spinner {
  position: relative;
  width: 80px;
  height: 80px;
}

.spinner-circle {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(var(--vp-c-brand-rgb, 0, 0, 0), 0.1);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.spinner-arc {
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid var(--vp-c-brand);
  border-right: 3px solid var(--vp-c-brand);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.brand-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s ease-in-out infinite;
}

.dot {
  width: 12px;
  height: 12px;
  background: var(--vp-c-brand);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(var(--vp-c-brand-rgb, 0, 0, 0), 0.3);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
}

.loading-text {
  text-align: center;
  animation: fadeInOut 2s ease-in-out infinite;
}

.loading-text h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vp-c-text-1);
  margin: 0 0 0.5rem 0;
  opacity: 0.9;
}

.loading-text p {
  font-size: 0.95rem;
  color: var(--vp-c-text-2);
  margin: 0;
  opacity: 0.8;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* 淡入淡出过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 主内容滑入动画 */
.slide-up-enter-active {
  transition: all 0.6s ease;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.slide-up-enter-to {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式调整 */
@media (max-width: 640px) {
  .loading-content {
    gap: 1.5rem;
  }
  
  .loading-spinner {
    width: 60px;
    height: 60px;
  }
  
  .loading-text h3 {
    font-size: 1.25rem;
  }
  
  .loading-text p {
    font-size: 0.875rem;
  }
}
</style>