38 lines
1.3 KiB
Markdown
38 lines
1.3 KiB
Markdown
# 翻牌特效原子任务 (TASK)
|
|
|
|
## 任务依赖图
|
|
```mermaid
|
|
graph TD
|
|
T1[T1: 初始化项目环境] --> T2[T2: 实现星空背景层]
|
|
T2 --> T3[T3: 开发 3D 翻牌组件]
|
|
T3 --> T4[T4: 组装网格与逻辑控制]
|
|
T4 --> T5[T5: 完善大图展示与粒子特效]
|
|
```
|
|
|
|
## 原子任务定义
|
|
|
|
### T1: 初始化项目环境
|
|
- **输入**: 空目录 `douyin_game`
|
|
- **输出**: Vite + React 项目骨架，安装 TailwindCSS
|
|
- **验收**: `npm run dev` 可正常启动
|
|
|
|
### T2: 实现星空背景层 (StarryBackground)
|
|
- **输入**: Tailwind 配置
|
|
- **输出**: 一个全屏背景组件，带有动态闪烁星星
|
|
- **验收**: 背景显示深蓝渐变，星星随机分布且有呼吸感
|
|
|
|
### T3: 开发 3D 翻牌组件 (FlipCard)
|
|
- **输入**: 基础 CSS 3D 知识
|
|
- **输出**: 支持正面（用户信息）和背面（产品图）切换的卡片
|
|
- **验收**: 点击触发平滑翻转，背面图片居中
|
|
|
|
### T4: 组装网格与逻辑控制 (CardGrid)
|
|
- **输入**: 3x4 布局需求
|
|
- **输出**: 一个包含 12 张卡片的网格，支持单次点击状态管理
|
|
- **验收**: 点击不同卡片各自翻转
|
|
|
|
### T5: 完善大图展示与粒子特效 (ProductModal)
|
|
- **输入**: 翻牌触发回调
|
|
- **输出**: 点击翻牌后弹出居中大图，背景变暗且带粒子飞散
|
|
- **验收**: 展示效果震撼，符合泡泡玛特直播间风格
|