feat(tools): 添加工具箱页面及国际化支持
添加新的工具箱页面,包含三个实用工具卡片。更新国际化文件支持多语言显示。优化页面滚动锁定功能,使其可配置自定义类名。调整导航栏菜单项显示逻辑。 工具箱页面包含入场动画效果,并添加SEO元信息。滚动锁定功能现在支持自定义类名,便于不同场景使用。导航栏现在动态显示中间菜单项,排除最后一项。
This commit is contained in:
@@ -9,7 +9,7 @@ const loaderBarRef = ref<HTMLElement | null>(null)
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 加载期间锁定页面滚动(注意:Pinia 的 state 是自动解包的,必须用 computed 包装才能保持响应式)
|
||||
usePageScrollLock(computed(() => appStore.isAppLoading))
|
||||
usePageScrollLock(computed(() => appStore.isAppLoading), { className: 'is-scroll-locked' })
|
||||
|
||||
let loaderTween: gsap.core.Tween | null = null
|
||||
let removeLoadListener: (() => void) | null = null
|
||||
@@ -49,7 +49,8 @@ onMounted(() => {
|
||||
gsap.timeline({
|
||||
onComplete: () => {
|
||||
gsap.set(loaderRef.value, { display: 'none' })
|
||||
appStore.setAppLoading(false) // 触发全局状态,通知其他组件入场
|
||||
appStore.setAppLoading(false)
|
||||
window.dispatchEvent(new CustomEvent('app-loading-done'))
|
||||
}
|
||||
})
|
||||
.to(loaderBarRef.value, { scaleX: 1, duration: 0.25, ease: 'power2.out' })
|
||||
|
||||
@@ -19,6 +19,7 @@ const navItems = computed<Array<{ name: string, path: string }>>(() => [
|
||||
{ name: t('nav.studio'), path: '/studio' },
|
||||
{ name: t('nav.work'), path: '/work' },
|
||||
{ name: t('nav.news'), path: '/news' },
|
||||
{ name: t('nav.tools'), path: '/tools' },
|
||||
{ name: t('nav.contact'), path: '/contact' }
|
||||
])
|
||||
|
||||
@@ -250,9 +251,9 @@ onBeforeUnmount(() => {
|
||||
<AppLogo compact click-action="top" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧菜单 (中间两个菜单项,留最后一个 contact 给右上角按钮) -->
|
||||
<!-- 右侧菜单 (去除左侧两个和最后contact菜单后的所有菜单) -->
|
||||
<nav class="flex items-center justify-evenly md:justify-start gap-3 md:gap-4 w-full">
|
||||
<NuxtLink v-for="item in navItems.slice(2, 4)" :key="'bottom-' + item.name" :to="item.path"
|
||||
<NuxtLink v-for="item in navItems.slice(2, navItems.length - 1)" :key="'bottom-' + item.name" :to="item.path"
|
||||
class="group flex items-center font-semibold tracking-[-0.7px] text-black text-sm md:text-base whitespace-nowrap md:overflow-hidden"
|
||||
style="justify-content: flex-start; position: relative;">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user