feat: 初始化Arctic New One项目基础架构
添加项目基础文件结构，包括： - 国际化多语言支持 - Tailwind CSS配置 - 自定义布局组件 - 平滑滚动和动画效果 - 自定义光标交互 - 错误页面处理
This commit is contained in:
@@ -0,0 +1,325 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import gsap from 'gsap'
|
||||
|
||||
/**
|
||||
* 全站自定义鼠标。
|
||||
*
|
||||
* 使用方式：
|
||||
* - 默认状态是一个圆点，加上横向和纵向的十字线。
|
||||
* - 给任意元素添加 `data-cursor-label`，鼠标移入后圆点会变成胶囊提示。
|
||||
*
|
||||
* 示例：
|
||||
* <section data-cursor-label="Read more">
|
||||
* ...
|
||||
* </section>
|
||||
*
|
||||
* 说明：
|
||||
* - 这个组件只需要在默认 layout 中挂载一次。
|
||||
* - 只在精确指针设备上运行，所以触摸屏会继续使用系统默认鼠标。
|
||||
* - 鼠标元素会 Teleport 到 body，避免被页面局部层级或布局包住。
|
||||
*/
|
||||
|
||||
const dotRef = ref<HTMLElement | null>(null)
|
||||
const horizontalLineRef = ref<HTMLElement | null>(null)
|
||||
const verticalLineRef = ref<HTMLElement | null>(null)
|
||||
const pillRef = ref<HTMLElement | null>(null)
|
||||
const pillTextRef = ref<HTMLElement | null>(null)
|
||||
|
||||
let cleanupCursor: (() => void) | null = null
|
||||
let cursorX = 0
|
||||
let cursorY = 0
|
||||
let pillWidth = 100
|
||||
let isPillVisible = false
|
||||
|
||||
// 查找最近的 `data-cursor-label` 元素，用来判断是否需要显示胶囊态。
|
||||
const getCursorTarget = (target: EventTarget | null) => {
|
||||
if (!(target instanceof Element)) {
|
||||
return null
|
||||
}
|
||||
|
||||
return target.closest<HTMLElement>('[data-cursor-label]')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const finePointer = window.matchMedia('(pointer: fine)')
|
||||
|
||||
// 触摸设备保留系统默认鼠标，不启用自定义鼠标。
|
||||
if (!finePointer.matches) {
|
||||
return
|
||||
}
|
||||
|
||||
const cursorTargets = [
|
||||
dotRef.value,
|
||||
horizontalLineRef.value,
|
||||
verticalLineRef.value,
|
||||
]
|
||||
const allTargets = [
|
||||
...cursorTargets,
|
||||
pillRef.value,
|
||||
pillTextRef.value,
|
||||
]
|
||||
|
||||
document.documentElement.classList.add('has-custom-cursor')
|
||||
|
||||
// 初始隐藏，避免页面刚打开、鼠标还没移动时出现闪烁。
|
||||
gsap.set(cursorTargets, {
|
||||
autoAlpha: 0,
|
||||
})
|
||||
gsap.set(pillRef.value, {
|
||||
autoAlpha: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
})
|
||||
gsap.set(pillTextRef.value, {
|
||||
autoAlpha: 0,
|
||||
})
|
||||
|
||||
// quickTo 会复用 tween，让十字线跟随更轻量，不需要每一帧都创建新动画。
|
||||
const moveLineX = gsap.quickTo(verticalLineRef.value, 'x', {
|
||||
duration: 0.08,
|
||||
ease: 'power3.out',
|
||||
})
|
||||
const moveLineY = gsap.quickTo(horizontalLineRef.value, 'y', {
|
||||
duration: 0.08,
|
||||
ease: 'power3.out',
|
||||
})
|
||||
|
||||
const movePill = () => {
|
||||
// 胶囊提示始终以真实鼠标位置为中心。
|
||||
gsap.set(pillRef.value, {
|
||||
x: cursorX - pillWidth / 2,
|
||||
y: cursorY - 15,
|
||||
})
|
||||
}
|
||||
|
||||
const showCursor = () => {
|
||||
gsap.to([horizontalLineRef.value, verticalLineRef.value], {
|
||||
autoAlpha: 1,
|
||||
duration: 0.15,
|
||||
overwrite: 'auto',
|
||||
})
|
||||
|
||||
if (!isPillVisible) {
|
||||
gsap.to(dotRef.value, {
|
||||
autoAlpha: 1,
|
||||
scale: 1,
|
||||
duration: 0.15,
|
||||
overwrite: 'auto',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const hideCursor = () => {
|
||||
isPillVisible = false
|
||||
|
||||
gsap.to(allTargets, {
|
||||
autoAlpha: 0,
|
||||
duration: 0.15,
|
||||
overwrite: 'auto',
|
||||
})
|
||||
}
|
||||
|
||||
const showPill = (label: string) => {
|
||||
if (!pillRef.value || !pillTextRef.value) {
|
||||
return
|
||||
}
|
||||
|
||||
pillTextRef.value.textContent = label
|
||||
// 短文案保持一个基础宽度，长文案则按内容自然变宽。
|
||||
pillWidth = Math.max(100, label.length * 9 + 32)
|
||||
isPillVisible = true
|
||||
movePill()
|
||||
|
||||
gsap.to(dotRef.value, {
|
||||
autoAlpha: 0,
|
||||
scale: 0,
|
||||
duration: 0.18,
|
||||
ease: 'power2.out',
|
||||
overwrite: 'auto',
|
||||
})
|
||||
gsap.to(pillRef.value, {
|
||||
autoAlpha: 1,
|
||||
width: pillWidth,
|
||||
height: 30,
|
||||
duration: 0.2,
|
||||
ease: 'power3.out',
|
||||
overwrite: 'auto',
|
||||
})
|
||||
gsap.to(pillTextRef.value, {
|
||||
autoAlpha: 1,
|
||||
delay: 0.08,
|
||||
duration: 0.18,
|
||||
overwrite: 'auto',
|
||||
})
|
||||
}
|
||||
|
||||
const hidePill = () => {
|
||||
if (!isPillVisible) {
|
||||
return
|
||||
}
|
||||
|
||||
isPillVisible = false
|
||||
|
||||
gsap.to(pillTextRef.value, {
|
||||
autoAlpha: 0,
|
||||
duration: 0.12,
|
||||
overwrite: 'auto',
|
||||
})
|
||||
gsap.to(pillRef.value, {
|
||||
autoAlpha: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
duration: 0.2,
|
||||
ease: 'power3.out',
|
||||
overwrite: 'auto',
|
||||
})
|
||||
gsap.to(dotRef.value, {
|
||||
autoAlpha: 1,
|
||||
scale: 1,
|
||||
delay: 0.08,
|
||||
duration: 0.18,
|
||||
ease: 'power2.out',
|
||||
overwrite: 'auto',
|
||||
})
|
||||
}
|
||||
|
||||
const moveCursor = (event: MouseEvent) => {
|
||||
cursorX = event.clientX
|
||||
cursorY = event.clientY
|
||||
|
||||
showCursor()
|
||||
gsap.set(dotRef.value, {
|
||||
x: cursorX - 12,
|
||||
y: cursorY - 12,
|
||||
})
|
||||
movePill()
|
||||
moveLineX(cursorX)
|
||||
moveLineY(cursorY)
|
||||
}
|
||||
|
||||
const handleMouseOver = (event: MouseEvent) => {
|
||||
const target = getCursorTarget(event.target)
|
||||
|
||||
if (!target) {
|
||||
return
|
||||
}
|
||||
|
||||
showPill(target.dataset.cursorLabel || 'Read more')
|
||||
}
|
||||
|
||||
const handleMouseOut = (event: MouseEvent) => {
|
||||
const target = getCursorTarget(event.target)
|
||||
const nextTarget = getCursorTarget(event.relatedTarget)
|
||||
|
||||
// 在同一个标记区域的子元素之间移动时，不关闭胶囊提示。
|
||||
if (!target || nextTarget === target) {
|
||||
return
|
||||
}
|
||||
|
||||
hidePill()
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', moveCursor)
|
||||
window.addEventListener('mouseenter', showCursor)
|
||||
window.addEventListener('mouseleave', hideCursor)
|
||||
document.addEventListener('mouseover', handleMouseOver)
|
||||
document.addEventListener('mouseout', handleMouseOut)
|
||||
|
||||
cleanupCursor = () => {
|
||||
window.removeEventListener('mousemove', moveCursor)
|
||||
window.removeEventListener('mouseenter', showCursor)
|
||||
window.removeEventListener('mouseleave', hideCursor)
|
||||
document.removeEventListener('mouseover', handleMouseOver)
|
||||
document.removeEventListener('mouseout', handleMouseOut)
|
||||
document.documentElement.classList.remove('has-custom-cursor')
|
||||
gsap.killTweensOf(allTargets)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanupCursor?.()
|
||||
cleanupCursor = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div aria-hidden="true">
|
||||
<div ref="dotRef" class="custom-cursor-dot" />
|
||||
<div ref="horizontalLineRef" class="custom-cursor-line custom-cursor-line-x" />
|
||||
<div ref="verticalLineRef" class="custom-cursor-line custom-cursor-line-y" />
|
||||
<div ref="pillRef" class="custom-cursor-pill">
|
||||
<div ref="pillTextRef" class="custom-cursor-pill-text">Read more</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-cursor-dot,
|
||||
.custom-cursor-line {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
.custom-cursor-dot {
|
||||
z-index: 2147483647;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.custom-cursor-line {
|
||||
z-index: 2147483646;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.custom-cursor-line-x {
|
||||
width: 100vw;
|
||||
height: 0.5px;
|
||||
}
|
||||
|
||||
.custom-cursor-line-y {
|
||||
width: 0.5px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.custom-cursor-pill {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2147483647;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
color: #fff;
|
||||
background: rgb(0 0 0 / 35%);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.custom-cursor-pill-text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow-wrap: normal;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (pointer: fine) {
|
||||
:global(.has-custom-cursor),
|
||||
:global(.has-custom-cursor *) {
|
||||
cursor: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<footer>
|
||||
<h1>Arctic New One Footer</h1>
|
||||
</footer>
|
||||
</template>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import gsap from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const topHeaderRef = ref<HTMLElement | null>(null)
|
||||
const bottomHeaderRef = ref<HTMLElement | null>(null)
|
||||
let topHeaderTween: gsap.core.Tween | null = null
|
||||
let bottomHeaderScrollTrigger: ReturnType<typeof ScrollTrigger.create> | null = null
|
||||
let isBottomHeaderVisible = false
|
||||
|
||||
const setBottomHeaderVisible = (visible: boolean) => {
|
||||
if (!bottomHeaderRef.value || isBottomHeaderVisible === visible) {
|
||||
return
|
||||
}
|
||||
|
||||
isBottomHeaderVisible = visible
|
||||
|
||||
gsap.to(bottomHeaderRef.value, {
|
||||
yPercent: visible ? 0 : 140,
|
||||
autoAlpha: visible ? 1 : 0,
|
||||
duration: 0.35,
|
||||
ease: 'power2.out',
|
||||
overwrite: 'auto',
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 底部导航默认藏在视口下方，只有滚动到深处并向上滚时才出现。
|
||||
gsap.set(bottomHeaderRef.value, {
|
||||
yPercent: 140,
|
||||
autoAlpha: 0,
|
||||
})
|
||||
|
||||
// 顶部导航在页面刚开始滚动的前 200px 内逐渐上移并隐藏。
|
||||
topHeaderTween = gsap.to(topHeaderRef.value, {
|
||||
yPercent: -140,
|
||||
autoAlpha: 0,
|
||||
ease: 'none',
|
||||
scrollTrigger: {
|
||||
start: 0,
|
||||
end: 200,
|
||||
scrub: true,
|
||||
},
|
||||
})
|
||||
|
||||
bottomHeaderScrollTrigger = ScrollTrigger.create({
|
||||
start: 0,
|
||||
end: 'max',
|
||||
onUpdate: (self) => {
|
||||
const scrollY = self.scroll()
|
||||
|
||||
// 深度超过 2500px 后向上滚，显示未来用于深层内容的底部导航。
|
||||
if (scrollY > 2500 && self.direction === -1) {
|
||||
setBottomHeaderVisible(true)
|
||||
return
|
||||
}
|
||||
|
||||
// 回到 2300px 以内，或继续向下滚时，底部导航收回。
|
||||
if (scrollY <= 2300 || self.direction === 1) {
|
||||
setBottomHeaderVisible(false)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
ScrollTrigger.refresh()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
topHeaderTween?.scrollTrigger?.kill()
|
||||
topHeaderTween?.kill()
|
||||
bottomHeaderScrollTrigger?.kill()
|
||||
topHeaderTween = null
|
||||
bottomHeaderScrollTrigger = null
|
||||
isBottomHeaderVisible = false
|
||||
gsap.killTweensOf([topHeaderRef.value, bottomHeaderRef.value])
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
ref="topHeaderRef"
|
||||
class="fixed left-0 right-0 top-0 z-50 mx-auto h-[70px] w-page-container max-w-[calc(100%-2rem)] bg-red-200 px-4 py-5"
|
||||
>
|
||||
<nav>Top Navigation</nav>
|
||||
</header>
|
||||
|
||||
<header
|
||||
ref="bottomHeaderRef"
|
||||
class="fixed bottom-0 left-0 right-0 z-50 mx-auto h-[70px] w-page-container max-w-[calc(100%-2rem)] bg-blue-200 px-4 py-5"
|
||||
style="visibility: hidden; opacity: 0;"
|
||||
>
|
||||
<nav>Bottom Navigation</nav>
|
||||
</header>
|
||||
</template>
|
||||
Reference in New Issue
Block a user