feat(tools): 添加工具箱页面及国际化支持

添加新的工具箱页面,包含三个实用工具卡片。更新国际化文件支持多语言显示。优化页面滚动锁定功能,使其可配置自定义类名。调整导航栏菜单项显示逻辑。

工具箱页面包含入场动画效果,并添加SEO元信息。滚动锁定功能现在支持自定义类名,便于不同场景使用。导航栏现在动态显示中间菜单项,排除最后一项。
This commit is contained in:
2026-04-28 14:32:57 +08:00
parent 6aa61cc78f
commit b71ab1a342
7 changed files with 198 additions and 11 deletions
+3 -2
View File
@@ -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