5 changed files with 489 additions and 367 deletions
@ -0,0 +1,368 @@ |
|||
<script setup lang="ts"> |
|||
interface CardItem { |
|||
id: number |
|||
type: 'text' | 'image' | 'image-text' | 'portfolio' | 'project' |
|||
image?: string |
|||
images?: string[] |
|||
title: string |
|||
description?: string |
|||
tags?: string[] |
|||
aspectRatio: number |
|||
} |
|||
|
|||
const { capture, play } = useFlipAnimation() |
|||
const masonryEl = ref<HTMLElement | null>(null) |
|||
|
|||
const allItems = ref<CardItem[]>([]) |
|||
const page = ref(1) |
|||
const hasMore = ref(true) |
|||
const loading = ref(false) |
|||
const initLoading = ref(true) |
|||
const sentinel = ref<HTMLElement | null>(null) |
|||
|
|||
const columnCount = ref(4) |
|||
const columns = ref<CardItem[][]>([[], [], [], []]) |
|||
const columnHeights = ref<number[]>([0, 0, 0, 0]) |
|||
|
|||
function getColumnWidth() { |
|||
const padding = 48 |
|||
const maxWidth = 1400 |
|||
const containerWidth = Math.min(window.innerWidth - padding, maxWidth) |
|||
const gap = 20 |
|||
return (containerWidth - gap * (columnCount.value - 1)) / columnCount.value |
|||
} |
|||
|
|||
function estimateCardHeight(item: CardItem) { |
|||
const colWidth = getColumnWidth() |
|||
if (item.type === 'text') { |
|||
const textWidth = colWidth - 48 |
|||
const charsPerLine = Math.max(1, Math.floor(textWidth / 13.5)) |
|||
const charCount = (item.description || '').length |
|||
const lines = Math.ceil(charCount / charsPerLine) |
|||
return 109 + lines * 24 |
|||
} |
|||
return colWidth / item.aspectRatio |
|||
} |
|||
|
|||
function addToShortestColumn(item: CardItem) { |
|||
let minIdx = 0 |
|||
for (let i = 1; i < columnCount.value; i++) { |
|||
if (columnHeights.value[i] < columnHeights.value[minIdx]) minIdx = i |
|||
} |
|||
columns.value[minIdx].push(item) |
|||
columnHeights.value[minIdx] += estimateCardHeight(item) |
|||
} |
|||
|
|||
function distributeAll() { |
|||
const n = columnCount.value |
|||
columns.value = Array.from({ length: n }, () => []) |
|||
columnHeights.value = new Array(n).fill(0) |
|||
for (const item of allItems.value) { |
|||
addToShortestColumn(item) |
|||
} |
|||
} |
|||
|
|||
let resizeTimer: ReturnType<typeof setTimeout> | null = null |
|||
function onResize() { |
|||
if (resizeTimer) clearTimeout(resizeTimer) |
|||
resizeTimer = setTimeout(() => { |
|||
updateColumns() |
|||
}, 150) |
|||
} |
|||
|
|||
function updateColumns() { |
|||
const w = window.innerWidth |
|||
let n: number |
|||
if (w < 640) n = 1 |
|||
else if (w < 768) n = 2 |
|||
else if (w < 1024) n = 3 |
|||
else if (w < 1280) n = 4 |
|||
else n = 5 |
|||
|
|||
if (n !== columnCount.value) { |
|||
if (masonryEl.value) capture(masonryEl.value, '.card-reveal') |
|||
columnCount.value = n |
|||
distributeAll() |
|||
nextTick(() => { |
|||
if (masonryEl.value) { |
|||
play(masonryEl.value, '.card-reveal', { duration: 420 }) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
async function loadMore() { |
|||
if (loading.value || !hasMore.value) return |
|||
loading.value = true |
|||
try { |
|||
const data = await $fetch<{ items: CardItem[]; hasMore: boolean }>('/api/cards', { |
|||
query: { page: page.value, pageSize: 12 }, |
|||
}) |
|||
for (const item of data.items) { |
|||
allItems.value.push(item) |
|||
addToShortestColumn(item) |
|||
} |
|||
hasMore.value = data.hasMore |
|||
page.value++ |
|||
} finally { |
|||
loading.value = false |
|||
initLoading.value = false |
|||
} |
|||
|
|||
await nextTick() |
|||
tryLoadMoreIfSentinelVisible() |
|||
} |
|||
|
|||
function tryLoadMoreIfSentinelVisible() { |
|||
if (!sentinel.value || loading.value || !hasMore.value) return |
|||
const rect = sentinel.value.getBoundingClientRect() |
|||
if (rect.top < window.innerHeight + 300) { |
|||
loadMore() |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
updateColumns() |
|||
window.addEventListener('resize', onResize) |
|||
loadMore() |
|||
}) |
|||
|
|||
onUnmounted(() => { |
|||
window.removeEventListener('resize', onResize) |
|||
if (resizeTimer) clearTimeout(resizeTimer) |
|||
}) |
|||
|
|||
let observer: IntersectionObserver | null = null |
|||
watch(sentinel, (el) => { |
|||
observer?.disconnect() |
|||
if (!el) return |
|||
observer = new IntersectionObserver( |
|||
([entry]) => { |
|||
if (entry.isIntersecting) loadMore() |
|||
}, |
|||
{ rootMargin: '300px' }, |
|||
) |
|||
observer.observe(el) |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="home"> |
|||
<header class="page-header"> |
|||
<h1>发现</h1> |
|||
<p class="subtitle">灵感与美学的无声对话</p> |
|||
</header> |
|||
|
|||
<div ref="masonryEl" class="masonry"> |
|||
<div |
|||
v-for="(col, ci) in columns" |
|||
:key="ci" |
|||
class="masonry-col" |
|||
> |
|||
<template v-for="(item, ri) in col" :key="item.id"> |
|||
<div |
|||
class="card-reveal" |
|||
:style="{ '--enter-delay': `${ci * 80 + ri * 60}ms` }" |
|||
> |
|||
<IndexWaterfallCard |
|||
v-if="item.type === 'image-text'" |
|||
:image="item.image!" |
|||
:title="item.title" |
|||
:description="item.description!" |
|||
:aspect-ratio="item.aspectRatio" |
|||
/> |
|||
<IndexWaterfallTextCard |
|||
v-else-if="item.type === 'text'" |
|||
:title="item.title" |
|||
:description="item.description!" |
|||
:aspect-ratio="item.aspectRatio" |
|||
/> |
|||
<IndexWaterfallImageCard |
|||
v-else-if="item.type === 'image'" |
|||
:image="item.image!" |
|||
:title="item.title" |
|||
:aspect-ratio="item.aspectRatio" |
|||
/> |
|||
<IndexWaterfallPortfolioCard |
|||
v-else-if="item.type === 'portfolio'" |
|||
:images="item.images!" |
|||
:title="item.title" |
|||
:description="item.description!" |
|||
:aspect-ratio="item.aspectRatio" |
|||
/> |
|||
<IndexWaterfallProjectCard |
|||
v-else |
|||
:image="item.image!" |
|||
:title="item.title" |
|||
:description="item.description!" |
|||
:tags="item.tags!" |
|||
:aspect-ratio="item.aspectRatio" |
|||
/> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
|
|||
<div ref="sentinel" class="sentinel"> |
|||
<template v-if="initLoading"> |
|||
<div class="loading-bars"> |
|||
<span v-for="i in 3" :key="i" class="bar" :style="{ animationDelay: `${(i - 1) * 0.15}s` }" /> |
|||
</div> |
|||
</template> |
|||
<template v-else-if="loading"> |
|||
<div class="loading-bars"> |
|||
<span v-for="i in 3" :key="i" class="bar" :style="{ animationDelay: `${(i - 1) * 0.15}s` }" /> |
|||
</div> |
|||
</template> |
|||
<span v-else-if="hasMore" class="sentinel-text">继续滚动查看更多</span> |
|||
<span v-else class="sentinel-text end">—— 已经到底了 ——</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.home { |
|||
max-width: 1400px; |
|||
margin: 0 auto; |
|||
padding: 0 24px; |
|||
} |
|||
|
|||
/* ── Header: cream canvas, coral type ── */ |
|||
|
|||
.page-header { |
|||
padding: clamp(64px, 10vw, 108px) 0 clamp(20px, 3vw, 32px); |
|||
animation: header-reveal 0.8s var(--ease-out-expo) both; |
|||
} |
|||
|
|||
@keyframes header-reveal { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(8px); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.page-header h1 { |
|||
font-family: var(--font-display); |
|||
font-size: clamp(64px, 10vw, 132px); |
|||
font-weight: 400; |
|||
color: var(--color-primary); |
|||
margin: 0; |
|||
line-height: 0.88; |
|||
letter-spacing: -0.02em; |
|||
} |
|||
|
|||
.subtitle { |
|||
color: var(--color-muted); |
|||
font-size: clamp(16px, 2vw, 20px); |
|||
font-weight: 400; |
|||
margin: clamp(14px, 2.5vw, 24px) 0 0; |
|||
letter-spacing: 0.06em; |
|||
animation: fade-slide-up 0.7s var(--ease-out-expo) both; |
|||
animation-delay: 200ms; |
|||
} |
|||
|
|||
@keyframes fade-slide-up { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(16px); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* ── Masonry ── */ |
|||
|
|||
.masonry { |
|||
display: flex; |
|||
gap: 20px; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.masonry-col { |
|||
flex: 1; |
|||
min-width: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
} |
|||
|
|||
/* ── Card reveal ── */ |
|||
|
|||
.card-reveal { |
|||
animation: card-enter 0.65s var(--ease-out-expo) both; |
|||
animation-delay: var(--enter-delay, 0ms); |
|||
} |
|||
|
|||
@keyframes card-enter { |
|||
from { |
|||
opacity: 0; |
|||
transform: translateY(24px); |
|||
} |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* ── Sentinel ── */ |
|||
|
|||
.sentinel { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 56px 0 96px; |
|||
min-height: 60px; |
|||
} |
|||
|
|||
.sentinel-text { |
|||
font-size: 14px; |
|||
color: var(--color-muted-soft); |
|||
} |
|||
|
|||
.sentinel-text.end { |
|||
color: var(--color-hairline); |
|||
} |
|||
|
|||
.loading-bars { |
|||
display: flex; |
|||
gap: 6px; |
|||
align-items: center; |
|||
} |
|||
|
|||
.bar { |
|||
width: 5px; |
|||
height: 20px; |
|||
background: var(--color-primary); |
|||
border-radius: 3px; |
|||
opacity: 0.5; |
|||
animation: pulse 0.9s ease-in-out infinite; |
|||
} |
|||
|
|||
@keyframes pulse { |
|||
0%, 100% { opacity: 0.3; transform: scaleY(0.6); } |
|||
50% { opacity: 0.8; transform: scaleY(1); } |
|||
} |
|||
|
|||
/* ── Responsive ── */ |
|||
|
|||
@media (max-width: 768px) { |
|||
.home { |
|||
padding: 0 16px; |
|||
} |
|||
|
|||
.page-header { |
|||
margin: 16px 0 40px; |
|||
padding: 40px 24px; |
|||
} |
|||
|
|||
.page-header h1 { |
|||
font-size: clamp(40px, 12vw, 64px); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
# 首页流体画布设计 |
|||
|
|||
## 概述 |
|||
|
|||
首页定位为纯粹的视觉体验，不承载信息。全屏 WebGL 流体画布，鼠标/触摸交互产生扰动，中央展示 "Dash" 品牌文字。首屏即全部，无下方内容区。 |
|||
|
|||
## 布局 |
|||
|
|||
``` |
|||
┌──────────────────────────────────────────┐ |
|||
│ │ |
|||
│ Nav (透明浮层，固定顶部) │ |
|||
│ │ |
|||
│ ┌─────────────┐ │ |
|||
│ │ 流体画布 │ │ |
|||
│ │ (全屏 Canvas) │ │ |
|||
│ │ │ │ |
|||
│ │ Dash │ │ |
|||
│ │ (中央文字) │ │ |
|||
│ │ │ │ |
|||
│ └─────────────┘ │ |
|||
│ │ |
|||
└──────────────────────────────────────────┘ |
|||
``` |
|||
|
|||
- Canvas 铺满整个视口 (100vw × 100vh)，位于所有内容之下 (z-index: 0) |
|||
- 中央文字固定居中，z-index 高于 Canvas |
|||
- 无滚动内容，无 footer（首页专属） |
|||
|
|||
## 流体画布 |
|||
|
|||
### 色彩 |
|||
|
|||
- 底色：cream `#faf9f5`，占画布大部分面积 |
|||
- 主流动层：coral `#cc785c`，混入少量 amber `#e8a55a` |
|||
- 点缀暗部：dark navy `#181715`，偶尔出现如墨滴 |
|||
- 所有颜色 smooth blending，无硬边界 |
|||
|
|||
### 交互 |
|||
|
|||
- 鼠标移动 → 光标周围流体扰动，模拟手指划过水面 |
|||
- 扰动强度正比于鼠标速度：快速 = 大波纹，缓慢 = 细微涟漪 |
|||
- 鼠标静止 → 流体缓慢自主流动，不完全静止 |
|||
- 触摸设备 → 触摸点产生扰动 |
|||
|
|||
### 中央文字 |
|||
|
|||
- 内容："Dash" |
|||
- 字体：Liu Jian Mao Cao（草书），字号约 120-160px |
|||
- 颜色：cream `#faf9f5` |
|||
- 位置：居中固定，始终在 Canvas 之上 |
|||
|
|||
### 技术方案 |
|||
|
|||
- WebGL + Three.js + custom fragment shader 实现流体模拟 |
|||
- Canvas 分辨率适配 devicePixelRatio |
|||
- 移动端降级为简化粒子系统（~200 粒子），触摸滑动产生扰动 |
|||
- 加载态：纯 cream 背景 + coral 色呼吸动画点，Canvas 就绪后淡入 |
|||
|
|||
## 导航栏 (TopNav) |
|||
|
|||
### 首页行为 |
|||
|
|||
- 背景透明，去掉 border-bottom |
|||
- 文字颜色使用 `on-dark` 风格（cream 偏白），确保在流体背景上可读 |
|||
- Logo 保持 Liu Jian Mao Cao 字体 |
|||
- 离开首页（导航到其他页面）恢复正常 cream 底 + hairline border |
|||
|
|||
### 实现方式 |
|||
|
|||
- 通过 route 判断是否在首页 (`route.path === '/'`) |
|||
- 首页：添加 `transparent` modifier class |
|||
- 非首页：默认样式 |
|||
|
|||
## 响应式 |
|||
|
|||
| 断点 | 行为 | |
|||
|------|------| |
|||
| 桌面 (>1024px) | 全 WebGL 流体，120-160px 字号 | |
|||
| 平板 (768-1024px) | WebGL 流体，100-120px 字号 | |
|||
| 移动 (<768px) | 粒子系统降级，80-100px 字号 | |
|||
|
|||
## 组件分解 |
|||
|
|||
### 1. FluidCanvas.vue |
|||
|
|||
WebGL Canvas 组件，负责： |
|||
- Three.js 场景初始化与销毁 |
|||
- Shader uniform 更新（鼠标位置、时间） |
|||
- 窗口 resize 适配 |
|||
- 移动端检测与降级切换 |
|||
|
|||
### 2. HomeHero.vue |
|||
|
|||
首页内容层，负责： |
|||
- 居中 "Dash" 文字 |
|||
- 文字淡入动画（Canvas 就绪后触发） |
|||
|
|||
### 3. TopNav 改动 |
|||
|
|||
- 新增 `transparent` prop 或 composable 判断首页 |
|||
- 首页样式覆盖：透明背景、无边框、文字颜色调整为 `on-dark` |
|||
|
|||
## 不在范围内 |
|||
|
|||
- 首页下方内容区域（明确不需要） |
|||
- 向下滚动提示（明确不需要） |
|||
- 音效 |
|||
- 流体录制/截图功能 |
|||
Loading…
Reference in new issue