游戏礼包兑换系统

核心功能（必做）

1. 兑换码验证页面 ○ 分段式兑换码输入框（4组，每组4位） ○ 前端简单的兑换码校验（参考 luhn 等算法） ○ 支持键盘输入自动跳转 ○ 支持完整兑换码粘贴 ○ 验证结果展示
2. 礼包内容展示 ○ 礼包基本信息（名称、说明、有效期） ○ 礼包物品列表（图标、名称、数量） ○ 领取确认流程 ○ 领取结果反馈
3. 历史记录 ○ 本地保存最近5条兑换记录 ○ 展示兑换时间、礼包名称、状态 ○ 清除历史记录功能 进阶功能（选做）
4. 输入优化 ○ 实时格式校验 ○ 输入错误提示动画 ○ 支持扫码输入
5. 界面优化 ○ 礼包领取成功动画 ○ 响应式布局适配 ○ 深色主题支持

实现

1. 使用react18构建
2. 使用antd组件库提供部分组件(按钮/弹窗/输入框)
3. 使用ahooks中防抖hooks防止重复提交
4. 使用localstorage存储领取的数据.用context上下文做状态管理
5. 使用css全局变量实现主题样式变更.
6. 使用@media screen实现响应式处理

遇到的问题

1. 输入框粘贴已经输入的处理,需要四个输入框,依次控制逻辑,包括粘贴时的录入,和单独输入或者回退处理
2. 校验报错时动画处理,通过动态添加className控制

需要注明和后期可优化的

1. toC场景的UI组件和动效需要定制,此次只是简单利用了antd组件.后期可能会用上动效库
2. 领取礼包校验逻辑,需要根据业务需求定制,同时需要做防抖处理,防止重复提交.
3. 响应式布局仅处理了布局,其他的后期根据ui可以继续优化