Payment Gateway
加密货币支付网关的高保真前端复刻，涵盖营销网站、身份验证与商户控制台，采用 React 端到端构建。
React 18
Vite
React Router 6
SCSS
Swiper
概览
本项目是对 Cryptomus 的前端复刻，Cryptomus 是一款让企业能够接收加密货币付款的加密支付网关。该项目在三个不同界面中重建了产品的完整前端：推介服务的营销网站、登录与注册流程，以及已认证的商户控制台。由于这是一个 UI 构建项目，它涵盖了界面外观与前端交互行为，而非真实的在线支付结算处理，并且覆盖了完整的产品表面，而非仅是单个落地页。
问题
加密货币支付网关是一个展示面远比外表更庞大的产品。公开页面既要用浅显直白的方式解释技术服务并促成转化，涵盖定价、资费方案、支持币种、处理工具以及背书展示；私有区域则是一个具备独立导航和状态管理的实用控制台。高度还原 Cryptomus 这样的产品是一次真正考验前端功底的测试：页面众多、两套截然不同的外壳结构、全局一致的主题规范以及全端响应式适配。目标是精准重现其完整广度，而非仅简单模仿一两个页面。
我的角色与方法
从营销页面到控制台，整个前端均由我独立构建。关键架构决策是将应用作为同一体系下的两款产品处理——公开营销体验与已认证控制台，各自分配独立的布局外壳，并在底层共享公共组件。我按页面组织样式代码，以便每个界面都能精准还原其参考设计而不发生样式相互污染；并将主题管理、控制台侧边栏等共享状态提升至 React Context 中，确保在全应用各处保持一致。
技术栈
主要功能
图集
挑战与解决方案
主要挑战在于在整个大体量应用中保持体验一致性。该产品涵盖营销网站和实际运作的控制台，两者实质上是具有不同外框结构的两个独立应用。我通过采用独立的布局外壳来解决这一问题，一个用于公开网站，另一个用于需要身份验证的控制台，并通过 React Router 的嵌套路由进行组合，使每个界面拥有匹配的页头、页脚和导航，同时仍能共享通用组件。
保持大型多页面 UI 的可维护性是另一个重点。我没有采用庞大臃肿的单一样式表，而是按页面拆分 SCSS，使每个页面都能精准还原对应参考设计；同时将主题与侧边栏等跨页面切面状态抽离至 Context 中，使其在全站表现一致，无需逐页重复实现。对于国际电话号码输入框和轮播组件等细节，则选用专注的专用库来实现，确保体验地道且无需重复造轮子。
成果
最终成果是一个完整、响应式的加密货币支付网关前端，复刻了营销推广、身份验证和控制台各个界面。作为一次复刻实践，它展现了在此体量产品中最关键的前端技术能力，包括多外壳路由、大规模逐页样式隔离、共享主题方案以及组件复用，且这些能力均应用于真正复杂的商业级界面，而非简化的演示 Demo。