——用 AI 生成一个小浣熊水浒卡鉴赏网站

整体风格是深色系暗黑模式我本人比较喜欢这类暂时先不加皮肤选择了。PC端 移动端water-pc water-mobile这过程是很费用量的5 小时的冷却重置了 5 次加上默认的重置5 小时的用量消耗了十多次。一开始我让 AI 生成 360° 预览一张小浣熊水浒卡正反面等各个角度的网页它居然用 HTMLCSS 画了个人物出来。然后纠正 AI它去搜索居然引用了我博客里的文章图。我接着明确了技术栈 ReactTailwindViteNode 环境是 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 看着更专业。二、线上部署本人没有买服务器也没有备案过域名所以想要发布到线上让别人能访问得另辟蹊径。1GitHub ActionsGithub 默认分配了一个二级域名并且提供了部署的功能我的预览地址就是该二级域名。让 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 功能那就没地方访问了。2EdgeOne Makers