admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 优化 banner 闪烁的问题

Browse Source
This commit is contained in:
不如摸鱼去 2025-10-30 16:29:50 +08:00
parent 1e14e32571
commit 722c46077e
1 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/.vitepress/theme/components/Banner.vue
View File

@ -14,13 +14,6 @@ const currentBanner = computed(() => {
return bannerData.value && bannerData.value.length > 0 ? bannerData.value[0] : null return bannerData.value && bannerData.value.length > 0 ? bannerData.value[0] : null
}) })
onMounted(() => {
// 默认添加 banner-dismissed class，避免布局闪烁
if (typeof window !== 'undefined') {
document.documentElement.classList.add('banner-dismissed')
}
})
/** /**
* 检查是否应该显示横幅 * 检查是否应该显示横幅
*/ */
@ -29,8 +22,8 @@ function checkShouldShowBanner() {
const dismissedTime = localStorage.getItem(BANNER_STORAGE_KEY) const dismissedTime = localStorage.getItem(BANNER_STORAGE_KEY)
if (!dismissedTime) { if (!dismissedTime) {
// 首次访问，移除 banner-dismissed class 以显示横幅 // 首次访问，添加 banner-show class 以显示横幅
document.documentElement.classList.remove('banner-dismissed') document.documentElement.classList.add('banner-show')
return true return true
} }
@ -40,17 +33,18 @@ function checkShouldShowBanner() {
// 如果超过24小时，清除记录并显示横幅 // 如果超过24小时，清除记录并显示横幅
if (currentTime - dismissedTimestamp > TWENTY_FOUR_HOURS) { if (currentTime - dismissedTimestamp > TWENTY_FOUR_HOURS) {
localStorage.removeItem(BANNER_STORAGE_KEY) localStorage.removeItem(BANNER_STORAGE_KEY)
document.documentElement.classList.remove('banner-dismissed') document.documentElement.classList.add('banner-show')
return true return true
} }
// 未超过24小时，保持 banner-dismissed class（已经默认添加了） // 未超过24小时，确保不显示横幅
document.documentElement.classList.remove('banner-show')
return false return false
} }
function dismiss() { function dismiss() {
open.value = false open.value = false
document.documentElement.classList.add('banner-dismissed') document.documentElement.classList.remove('banner-show')
// 存储当前时间戳到 localStorage // 存储当前时间戳到 localStorage
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
@ -103,7 +97,7 @@ watch(currentBanner, (newBanner) => {
</template> </template>
<style> <style>
html:not(.banner-dismissed) { html.banner-show {
--vp-layout-top-height: 64px; --vp-layout-top-height: 64px;
} }
</style> </style>
@ -116,19 +110,23 @@ html:not(.banner-dismissed) {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: var(--vp-layout-top-height); height: var(--vp-layout-top-height, 64px);
line-height: var(--vp-layout-top-height); line-height: var(--vp-layout-top-height, 64px);
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: white; color: white;
background: #131A24; background: #131A24;
display: flex; display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
} }
html.banner-show .banner {
display: flex;
}
.glow.glow--purple { .glow.glow--purple {
position: absolute; position: absolute;
bottom: -15%; bottom: -15%;
@ -185,9 +183,7 @@ html:not(.banner-dismissed) {
} }
} }
.banner-dismissed .banner {
display: none;
}
button { button {
position: absolute; position: absolute;