- 替换粒子动画为预加载背景图片,提升加载性能 - 添加桌面端无奖励结算界面显示玩家选择和开奖结果 - 实现消息广播组件的动画效果和状态管理 - 添加代码审查报告文档 - 更新GitNexus索引统计信息 - 调整加载界面布局和样式优化
4.9 KiB
4.9 KiB
36 字花前端全局代码审查报告
审查日期:2026-06-05
审查范围
- 全局代码静态审查
- GitNexus 索引刷新与调用影响分析
pnpm lintpnpm 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 描述 | 项目交接信息不准确 | 更新为当前项目启动、构建、环境变量、部署说明 |
优先处理建议
- 先处理 P0 安全问题:删除
/ws-test生产暴露入口,移除前端密钥。 - 再处理 P1 功能与首屏性能问题:避免全量清 storage,拆掉全资源阻塞预加载。
- 然后处理 P2 的体积、音频加载和下注模型一致性问题。
- 最后做 P3 样式细节、死代码和文档维护。
备注
- 本次审查未修改业务代码。
- 仓库目前未发现有效自动化测试文件,后续修复 P0/P1 后建议补充登录态清理、下注提交、首屏渲染和资源加载相关测试。