bindbox-game/docs/翻牌特效/TASK_翻牌特效.md

翻牌特效原子任务 (TASK)

任务依赖图

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)

• 输入: 翻牌触发回调
• 输出: 点击翻牌后弹出居中大图，背景变暗且带粒子飞散
• 验收: 展示效果震撼，符合泡泡玛特直播间风格