React 无后端发卡网系统：静态部署与卡密管理

从卡密销售到本地数据闭环

个人出售虚拟卡密时，常见做法是借助第三方平台，但商品、订单和收款信息都留在别人那里。这套系统把发卡流程收回到浏览器本地：卡密商品、订单记录和收款码都由前端管理，数据写入 localStorage，不需要单独搭建后端服务。

它基于 React、TypeScript、Tailwind CSS 和 Vite 构建，构建产物是静态文件，适合用来观察前端如何独立完成一套小型销售管理流程。

商品、订单与收款码维护

后台管理界面提供卡密商品的添加、编辑和删除入口，系统会跟踪每一条卡密的使用状态，方便区分已售和未售。订单管理模块则集中查看交易记录，减少手工对账的麻烦。

收款环节支持自定义收款码上传，客服 QQ 也可以在配置中填写。管理员登录入口位于网站首页右上角的“管理登录”，登录后可修改管理员密码，并导出系统数据备份。

界面适配与邮件发送说明

页面提供明暗主题切换，并采用响应式设计，适配 PC 与移动端浏览。邮件发送功能默认处于模拟模式，如果希望真实发送卡密，需要自行配置邮件服务器信息。

静态部署前的环境核对

构建完成后，dist 目录中的文件就是可部署的静态内容，将其上传到 Web 服务器根目录即可。若使用 Apache，.htaccess 文件会自动处理路由重写；若使用 Nginx，则需要配置 try_files 规则。

部分资料提到服务器需支持 PHP 7.4+ 以处理路由问题，部署到虚拟主机时应确认 PHP 版本不低于 7.4。由于数据仅保存在浏览器本地，如果需要更强的持久化能力，建议后续开发相应的后端 API。