Cxx0822/blog-press
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:增加Loading组件

Browse Source
This commit is contained in:
Cxx0822
2025-12-19 17:33:40 +08:00
parent 4fc8d4eecc
commit c2516e04b5
1 changed files with 13 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
docs/.vitepress/theme/components/Loading.vue
View File

@@ -1,95 +1,27 @@
<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 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>
</Transition>
</div>
<!-- 主内容 -->
<Transition name="slide-up">
<div v-show="!isLoading">
<DefaultTheme.Layout v-bind="$attrs">
<template #doc-before>
<ArticleMetadat />
</template>
</DefaultTheme.Layout>
</div>
</Transition>
<!-- 加载文字 -->
<div class="loading-text">
<h3>正在加载</h3>
<p>请稍候...</p>
</div>
</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;