mirror of
https://github.com/setube/ogame-vue-ts.git
synced 2026-05-12 07:55:11 +08:00
refactor: 优化主界面布局与通知系统
重构App.vue,首页独立无侧边栏,其他页面采用统一侧边栏布局。新增右下角固定通知区,集成返回顶部、队列通知、外交通知和敌方警报。移除新手引导组件,替换为弱引导提示系统。支持星球重命名弹窗。优化NPC成长与行为定时器逻辑,提升性能和可维护性。删除issue模板及相关文档描述。
This commit is contained in:
48
src/components/BackToTop.vue
Normal file
48
src/components/BackToTop.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-300 ease-out"
|
||||
enter-from-class="translate-y-4 opacity-0"
|
||||
enter-to-class="translate-y-0 opacity-100"
|
||||
leave-active-class="transition-all duration-200 ease-in"
|
||||
leave-from-class="translate-y-0 opacity-100"
|
||||
leave-to-class="translate-y-4 opacity-0"
|
||||
>
|
||||
<Button v-if="isVisible" variant="outline" size="icon" @click="scrollToTop">
|
||||
<ChevronUp class="h-4 w-4" />
|
||||
</Button>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ChevronUp } from 'lucide-vue-next'
|
||||
|
||||
// 显示阈值(滚动超过这个距离才显示按钮)
|
||||
const SCROLL_THRESHOLD = 300
|
||||
|
||||
const isVisible = ref(false)
|
||||
|
||||
// 监听滚动事件
|
||||
const handleScroll = () => {
|
||||
isVisible.value = window.scrollY > SCROLL_THRESHOLD
|
||||
}
|
||||
|
||||
// 丝滑返回顶部
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll, { passive: true })
|
||||
// 初始检查
|
||||
handleScroll()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user