最近几年一直比较迷小浣熊水浒卡，去年小浣熊 30 周年又让水浒卡火了一把，所以就突发奇想搞个鉴赏网。
一个用于展示小浣熊水浒卡的响应式网站，提供卡片正反面鉴赏、基于 Three.js 的 3D 旋转与缩放、多版本卡片对比等功能，并支持 PC 端键盘操作及移动端触控交互。
项目功能由自己设计页面，借助 AI 生成代码，累计投入约 22 小时、重置了 5 轮 AI 用量周期，完成了素材搜集、开发调试、组件化重构、性能与交互体验优化、单元测试与线上部署等环节。
Github 地址： https://github.com/pwstrick/water-card
在线体验： https://pwstrick.github.io/water-card
一、生成过程
生成没有借助第三方的 skill，就是与 AI 一次次的对话，慢慢将页面搭建起来，已进行 200 多次对话。
整体风格是深色系，暗黑模式，我本人比较喜欢这类，暂时先不加皮肤选择了。
|-----------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
| PC端 | 移动端 |
| 
| 
|
这过程是很费用量的，5 小时的冷却重置了 5 次，加上默认的重置，5 小时的用量消耗了十多次。
一开始我让 AI 生成 360° 预览一张小浣熊水浒卡正反面等各个角度的网页，它居然用 HTML+CSS 画了个人物出来。
然后纠正 AI，它去搜索，居然引用了我博客里的文章图。我接着明确了技术栈 React，Tailwind，Vite，Node 环境是 24，没有引入 TS。
因为没计划手动维护，完全让 AI 来维护迭代。后面最重大的改动，就是用 Three.js 来完成翻转缩放的特效，原先是用 CSS3 实现的。
1）素材
本来计划是自己一张张拍正反面照，然后引入到项目中，但感觉工程量太大，并且身边没有奖闪卡。
所以就在网上搜索了现成的普卡和奖闪两类图，在贴吧中，有吧友上传了自己拍的奖闪正反面图。
原先我是将正反面做成两张图的，但网上的素材都是合并在一起的，在代码中用合并的图，效果还挺好。
原始图的尺寸略大，加起来要 400M 以上，在推到 Github 上时，容易中断，一直推送失败。
后续为了性能，就缩小了图的尺寸，并且将格式从 jpg 改成 webp，这些也都是用 AI 完成的。
不过，现在的普卡图，还有点模糊，原图的尺寸就比较小，有网友推荐了我修复的工具，可惜我电脑的系统版本太低，还不能装。
在V站上发了条帖子，网友希望我加一下人物介绍，我就让 AI 补充了简短的两句，介绍，包括最终结局。
没想到，总结的非常到位，一目了然的感觉，把我惊艳到了。
为了让奖闪看着闪，特地加了点反光特效，但是不太明显。
为了增加氛围，特地将好汉歌作为背景 BGM 加入，一边看卡，一边听歌。
2）优化
在后续的时间，我对页面的浏览器兼容性和适配性做了针对性的优化。
问题最多的居然是我手机里的 UC 浏览器，印象中这个浏览器以前问题最少了。
体验方面，在页面进入、图像加载时，都增加了 loading 的交互。
并且在图像请求失败时，还增加了自动请求两次的机制，若失败，则显示重新加载的按钮。
然后对代码的维护性做了分析，将代码拆分成各个可复用的组件，将各类文案也抽到特定的数据目录中。
对 Three.js 引擎也进行了拆分，场景、纹理、动画、手势等一个组件，React 状态、键盘事件和引擎生命周期等组织成另一个组件。
接下来是对页面的性能进行一轮优化，包括停止空闲 WebGL 渲染、合并 Three.js 正反面纹理、延迟加载对比区、图片改成 WebP 格式等。
还优化了页面对键盘更好的支持，并且增加了单元测试，在每次线上之前，都会先跑一遍用例。
在经过多轮的代码变换后，让 AI 删除冗余的逻辑。并且润色 Readme.md，让 Github 看着更专业。
二、线上部署
本人没有买服务器，也没有备案过域名，所以想要发布到线上，让别人能访问，得另辟蹊径。
1）GitHub Actions
Github 默认分配了一个二级域名，并且提供了部署的功能，我的预览地址就是该二级域名。
让 AI 修改了 vite.config.js 配置，新建了 .github/workflows/deploy.yml 部署文件。
打开 GitHub 仓库：Settings → Pages → Build and deployment → Source。
之后每次推送到 main 都会自动发布到：https://pwstrick.github.io/water-card。
可在仓库的 Actions 页面查看部署进度。不过，访问地址资源加载很慢，有时候还会失败。
所以就想到国内的 Gitee，马上配置了与 water-card 仓库的关联和同步更新。
满心欢喜的看到同步成功了，结果却发现官方已经下线 Gitee Pages 功能，那就没地方访问了。
2）EdgeOne Makers
提问 AI 有没有替代方案，给我推荐了腾讯云 EdgeOne Makers，支持导入 Github、自动构建 Vite。
并提供 *.edgeone.app 访问地址，推送 main 分支后可自动部署。
同样也要修改 vite.config.js 配置，保留 Github 的部署配置。
创建 EdgeOne 项目，立即开通 → 创建项目 → 导入 Git 仓库 → 完成 Github 授权 → 勾选 water-card 仓库 → 选择 main 分支。
临时地址只有 3 小时的访问时间，并且在访问时会进行重定向，后面的参数会消失。
https://water-card.zh-cn.edgeone.cool/?eo_token=00c54f16075977014a1c2a97f0f34aa1&eo_time=1783322171
https://water-card.zh-cn.edgeone.cool/使用了 EdgeOne Makers 免费版，且没有另外购买付费套餐或启用收费增值服务。