You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.6 KiB
3.6 KiB
首页流体画布设计
概述
首页定位为纯粹的视觉体验，不承载信息。全屏 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 === '/') - 首页：添加
transparentmodifier 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 改动
- 新增
transparentprop 或 composable 判断首页 - 首页样式覆盖：透明背景、无边框、文字颜色调整为
on-dark
不在范围内
- 首页下方内容区域（明确不需要）
- 向下滚动提示（明确不需要）
- 音效
- 流体录制/截图功能