feat(game): 优化加载动画并添加无奖励结算显示
- 替换粒子动画为预加载背景图片,提升加载性能 - 添加桌面端无奖励结算界面显示玩家选择和开奖结果 - 实现消息广播组件的动画效果和状态管理 - 添加代码审查报告文档 - 更新GitNexus索引统计信息 - 调整加载界面布局和样式优化
This commit is contained in:
53
docs/code-review-2026-06-05.md
Normal file
53
docs/code-review-2026-06-05.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# 36 字花前端全局代码审查报告
|
||||
|
||||
审查日期:2026-06-05
|
||||
|
||||
## 审查范围
|
||||
|
||||
- 全局代码静态审查
|
||||
- GitNexus 索引刷新与调用影响分析
|
||||
- `pnpm lint`
|
||||
- `pnpm build`
|
||||
- 本地桌面端与移动端页面渲染检查
|
||||
- DOM 文本溢出与页面横向滚动检查
|
||||
|
||||
## 验证结果
|
||||
|
||||
| 检查项 | 结果 | 备注 |
|
||||
|---|---|---|
|
||||
| GitNexus 索引 | 通过 | 已重新运行 `npx gitnexus analyze` |
|
||||
| `pnpm lint` | 通过 | Biome 检查通过 |
|
||||
| `pnpm build` | 通过 | 构建成功,但存在较大资源与 chunk |
|
||||
| 桌面端页面渲染 | 通过,有样式风险 | 页面可渲染,logo 与部分数字文本存在裁切/拥挤风险 |
|
||||
| 移动端页面渲染 | 通过,有样式风险 | 无页面级横向滚动,部分文本高度溢出 |
|
||||
| 自动化测试 | 未发现 | 仓库内未发现有效 `test/spec` 测试文件 |
|
||||
|
||||
## 问题清单
|
||||
|
||||
| 优先级 | 类型 | 位置 | 问题 | 影响 | 建议 |
|
||||
|---|---|---|---|---|---|
|
||||
| P0 | 安全 | `src/routes/$lang/ws-test.tsx` | `/ws-test` 测试页硬编码完整 WebSocket URL、`token`、`auth_token`,并且已被打进生产 bundle | 凭证泄露,任何人都可能从静态资源中提取连接信息 | 立刻删除该路由,或仅在开发环境注册;凭证全部移出前端 |
|
||||
| P0 | 安全 | `.env.production`, `.env.development`, `.env.example`, `src/lib/api/api-client.ts` | `VITE_AUTH_TOKEN_SECRET` 作为前端环境变量参与签名 | `VITE_` 变量会暴露到浏览器,不能作为密钥使用 | 签名逻辑迁到服务端;前端只保存短期 token |
|
||||
| P1 | 功能风险 | `src/lib/auth/auth-session.ts` | 登出或 token 失效时调用 `localStorage.clear()`、`sessionStorage.clear()` | 会清掉同源下非本项目或非登录相关数据;GitNexus 影响面为 CRITICAL | 改成只删除明确命名的 auth/session key |
|
||||
| P1 | 性能 | `src/components/app-boot-resource-gate.tsx` | 首屏前 eager 导入并预加载所有图片资源 | 大图会阻塞应用显示,移动端首屏风险高 | 只预加载首屏必要资源,其余按页面、弹窗或交互懒加载 |
|
||||
| P1 | 性能 | build 输出资源 | `pc-big-reward.json` 约 3MB,`pc-streak.webp` 约 3.5MB,`hall-music.mp3` 约 2.5MB | 首次加载体积偏大,弱网下体验差 | 压缩动效、图片、音频;奖励弹窗和音频按需加载 |
|
||||
| P2 | 性能 | `src/features/game/audio/global-audio-controller.tsx` | 初始化时为所有音频创建 `Audio` 且设置 `preload='auto'` | 即使用户未开启声音,也可能提前拉取音频 | 用户解锁或启用声音后再加载,或改为 `preload='none'` |
|
||||
| P2 | 架构/体积 | `src/hooks/use-auto-hosting-runner.ts` | 自动托管 chunk gzip 后仍约 341KB,疑似从 `@/api` barrel 引入过多内容 | PC/移动入口都会受影响 | 检查 `@/api` 导出,改为直接 import 具体 API,拆分 runner 依赖 |
|
||||
| P2 | 功能一致性 | `src/hooks/use-game-control-vm.ts`, `src/hooks/use-auto-hosting-runner.ts` | 手动下注默认所有号码共用第一项金额;自动托管按金额/玩法分组 | 当前 UI 同步筹码所以暂不一定出错,但未来混合筹码或服务端回填时容易不一致 | 明确业务约束:要么禁止混合金额,要么手动下注也按组提交 |
|
||||
| P2 | 样式 | `src/style/index.css` | 全局 `design-unit` 基于 `vw`,字体随视口宽度缩放 | 移动/桌面检查发现多处数字文本高度溢出,有裁切风险 | 字体使用固定/rem + 响应式断点,不用 viewport 直接缩放正文 |
|
||||
| P3 | 样式 | `src/features/game/components/desktop/desktop-animal.tsx`, `src/features/game/components/mobile/mobile-animal.tsx` | 动物格数字区域使用 `overflow-hidden` 与 `leading-none`,DOM 检查有文本裁切 | 小屏或字体渲染差异下数字可能被切顶/切底 | 放宽容器高度/line-height,去掉不必要的隐藏裁切 |
|
||||
| P3 | 样式 | `src/features/game/components/desktop/desktop-header.tsx` | 桌面截图里 logo 文案视觉上有重叠/裁切感 | 品牌区观感不稳 | 检查 logo 素材比例和容器宽高,必要时换成未裁切素材 |
|
||||
| P3 | 清理 | `src/hooks/use-topup-vm.ts` | `useTopupVm` 空实现且未被引用 | 死代码增加维护噪音 | 删除或补齐为真实 ViewModel |
|
||||
| P3 | 文档 | `README.md` | README 仍是 React SPA template/empty scaffold 描述 | 项目交接信息不准确 | 更新为当前项目启动、构建、环境变量、部署说明 |
|
||||
|
||||
## 优先处理建议
|
||||
|
||||
1. 先处理 P0 安全问题:删除 `/ws-test` 生产暴露入口,移除前端密钥。
|
||||
2. 再处理 P1 功能与首屏性能问题:避免全量清 storage,拆掉全资源阻塞预加载。
|
||||
3. 然后处理 P2 的体积、音频加载和下注模型一致性问题。
|
||||
4. 最后做 P3 样式细节、死代码和文档维护。
|
||||
|
||||
## 备注
|
||||
|
||||
- 本次审查未修改业务代码。
|
||||
- 仓库目前未发现有效自动化测试文件,后续修复 P0/P1 后建议补充登录态清理、下注提交、首屏渲染和资源加载相关测试。
|
||||
Reference in New Issue
Block a user