仿无畏契约（VALORANT）国服每日商店的卡牌揭晓动画，微信小程序版本。
与 Web 版 共享相同的视觉设计语言，但改为纯前端本地数据驱动，无需后端服务。
mini-shop/
├── pages/index/index.vue # 主页面（唯一页面），持有全局状态
├── components/
│ ├── StoreCard.vue # 卡片组件（核心：5 阶段状态机动画）
│ ├── CountdownBar.vue # 倒计时栏 + 刷新按钮
│ ├── TopNav.vue # 顶部导航（预留）
│ └── BottomNav.vue # 底部导航栏（静态装饰）
├── data/skins.js # 644 款皮肤数据（来自 valorant-api.com）
├── static/ # 静态资源（header、占位图、底部导航图）
├── App.vue # 应用壳
├── main.js # uni-app 入口（createSSRApp）
├── pages.json # 页面路由配置
├── manifest.json # uni-app 清单（含微信 appid）
└── unpackage/dist/dev/mp-weixin/ # 编译产物（微信开发者工具可直接打开）
App.vue
└── pages/index/index.vue ← 唯一数据源
├── CountdownBar ← 倒计时 + 刷新触发
├── StoreCard × 4 ← 卡片动画
└── BottomNav ← 静态装饰
用户点击刷新
→ CountdownBar emit('refresh')
→ index.vue openStore()
→ 从 skins.js 随机取 4 款皮肤
→ generation++（触发所有 StoreCard 重置）
→ streak++ → uni.setStorageSync 持久化
generation 作为 prop 传入每个 StoreCard，子组件通过 watch(generation) 触发 resetCard()，实现"一键刷新全部卡片"。
idle → spread → flash → reveal → display
800ms 400ms 200ms 400ms
- idle: 显示未开启占位图
- spread: 品质色从圆心扩散，同时显示菱形光效
- flash: 闪光收束
- reveal: 武器图渐显 + 弹性缩放
- display: 信息栏上滑 + 品质角标淡入
所有动画通过 setTimeout 链驱动，无第三方动画库。resetCard() 清除所有 timer 并通过 noTransition 标志瞬间回到 idle 态，避免重置时看到动画回退。
| Web 版 | 小程序版 | |
|---|---|---|
| 框架 | Vue 3 + Vite | uni-app (Vue 3) |
| 数据 | Express API + SQLite (819 款) | 本地 JS 文件 (644 款) |
| 图片 | 本地 assets | 远程 valorant-api.com CDN |
| 刷新 | 调后端随机接口 | 纯前端洗牌 |
| 目标平台 | 浏览器 | 微信小程序 |
本项目全程使用 Claude Code 以"vibe coding"方式开发，以下为关键交互策略：
帮我把这个 Valorant 每日商店项目改成 uni-app 微信小程序版，
组件结构和动画逻辑照搬 Web 版，但数据改成纯前端本地文件
AI 按 Web 版组件树 1:1 映射到 uni-app 语法（<view> 替代 <div>，@tap 替代 @click，uni.getStorageSync 替代 localStorage）。
卡片揭晓时需要一个品质色从圆心扩散到全卡的效果，
800ms cubic-bezier，扩散过程中要有菱形光效脉冲
不给具体 CSS 值，只描述视觉预期——AI 自行推导 radial-gradient + box-shadow + @keyframes 实现。
Web 版有 819 条皮肤数据在 SQLite/JSON 里，
帮我转成这种格式的 JS 数组（给出一条完整示例），
图片 URL 用 valorant-api.com 的 fullrender.png
AI 自动完成：读取源数据 → 格式转换 → 写入 data/skins.js。
每个组件的迭代模式：
- 描述期望效果（不写代码）
- AI 出初版
- 在微信开发者工具预览
- 反馈偏差（"菱形太小""颜色不够亮""动画太快"）
- AI 修正
本项目使用 Claude Code 作为 AI 编程助手，调用链路：
用户自然语言描述
→ Claude Code CLI (deepseek-v4-pro)
→ 读取项目文件上下文
→ 生成代码（Vue SFC / JS / CSS）
→ 用户写入 → 微信开发者工具实时预览
→ 反馈 → AI 迭代修正
- 上下文管理：通过
.claude/目录中的CLAUDE.md维护项目规范，AI 每次对话自动加载 - Agent 调用：复杂任务（如数据迁移）通过 Claude Code Agent 子进程独立执行，避免污染主对话上下文
- Skills：使用
resume-bullet-writer、tech-resume-optimizer等技能辅助简历项目开发
- 用 HBuilderX 打开
mini-shop/目录 - 点击 运行 → 运行到小程序模拟器 → 微信开发者工具
- HBuilderX 自动编译并唤起微信开发者工具
- 在微信开发者工具中预览、调试
- 点击 发行 → 小程序-微信 即可上传代码并提交审核
# 安装 uni-app CLI
npm install -g @dcloudio/uni-app
# 编译到微信小程序
cd mini-shop
uni-app build --platform mp-weixin
# 产物在 unpackage/dist/build/mp-weixin/
# 用微信开发者工具打开该目录即可仓库已包含 unpackage/dist/dev/mp-weixin/ 目录的编译产物，可直接用微信开发者工具打开该目录预览，无需重新编译。
- 框架: uni-app (Vue 3 Composition API)
- 平台: 微信小程序 (mp-weixin)
- 动画: 纯 CSS/JS 状态机，无第三方依赖
- 数据: 644 款皮肤，图片托管于 valorant-api.com CDN
- AI 辅助: Claude Code (deepseek-v4-pro)