React+MUI构建原神圣遗物优化静态站，实时计算结果部署于GitHub Pages

方案简介

Gacha Optimizer 是一个托管多个抽卡游戏优化器网站的仓库，其中 Genshin Optimizer 是为《原神》玩家打造的辅助网站。它帮助玩家优化圣遗物配置以最大化角色强度，同时提供干净、结构化的 UI 和实时计算结果。该方案采用 React 作为前端框架、MUI（Material UI）作为组件库，构建为纯静态网站并部署在 GitHub Pages 上（https://frzyc.github.io/genshin-optimizer/），无需自建服务器即可供数千用户使用。适合《原神》玩家以及想参与活跃开源项目的 Web 开发者。

组成与分工

• React：构建 frontend 静态网站的核心前端框架
• MUI：Material UI 组件库，提供统一美观的结构化界面
• nx：monorepo 管理工具，通过 nx graph 可视化项目结构
• Waverider：GI 的计算引擎（现已弃用），负责游戏数值计算
• GOOD (gi-good)：Genshin Open Object Description 接口库，用于导入扫描器数据
• GitHub Pages：静态网站托管平台，网站部署于 frzyc.github.io

前置要求

本项目为纯前端静态网站方案，材料中提到的相关技术栈包括：

• React + MUI 前端环境
• TypeScript
• NodeJS / bun 运行时
• Vite / webpack 构建工具
• nx monorepo 工具链
• jest 测试框架

实施步骤

1. 获取仓库

仓库地址为 https://github.com/frzyc/genshin-optimizer，克隆或 fork 后即可开始。

2. 理解 monorepo 结构

应用位于 /apps/ 目录，各应用依赖的库位于 /libs/ 目录。frontend 是 Genshin Optimizer 前端应用。

3. 查看项目依赖图

nx graph

README 明确建议运行此命令以获得更交互式、更详细的项目视图。

4. 部署使用

构建后的静态网站可直接访问 https://frzyc.github.io/genshin-optimizer/ 使用，或按同样方式自行托管静态文件。

使用与配置要点

网站上线后，玩家通过 GOOD 格式导入游戏扫描器采集的数据，随后利用优化器为角色筛选最优圣遗物组合。社区支持渠道为官方 Discord：https://discord.gg/CXUbQXyfUs。新角色和新内容会随游戏版本更新持续加入。

注意事项与常见问题

• frontend 使用的 Waverider 计算引擎已被标记为弃用（now deprecated），新项目应关注 Pando 计算引擎
• Zenless Optimizer 仍处于 alpha 阶段，仅提供基础的驱动盘优化
• Star Rail 前端（sr-frontend）为 WIP 状态，使用 Pando 引擎

优缺点

• ✓ 静态网站无需后端运维
• ✓ monorepo多游戏复用代码
• ✕ Waverider计算引擎已弃用

出处

本方案挖掘自开源项目 frzyc/genshin-optimizer，方案内容与实施命令均来自其 README 原文。