React 个人发卡网系统使用文档

一、系统概述

二、核心技术栈

• React 18 及以上版本
• TypeScript 类型校验
• Tailwind CSS 样式框架
• Vite 构建工具
• React Router 路由管理

三、功能亮点

• 🏠 简约直观的卡密商城前台
• 🔧 全流程后台管理功能闭环
• 💳 支持自定义上传各类收款码
• 📱 自适应布局，兼容移动端与 PC 端
• 🌓 明暗主题自由切换
• 📊 核心数据概览统计
• 📤 支持系统数据导出
• 🔐 管理员密码保护机制

四、部署步骤指南

4.1 前置环境要求

• Node.js 16.0 及以上版本
• pnpm 包管理工具

4.2 项目构建流程

1. 克隆或下载项目源代码至本地
2. 安装项目依赖，执行命令： pnpm install
3. 构建生产版本，执行命令： pnpm build
4. 构建完成后，生成的 dist 目录下的文件即为可部署的静态资源

4.3 服务器上传配置

1. 将 dist 目录内所有文件上传至 Web 服务器根目录
2. 确保服务器环境支持 PHP 7.4 及以上版本（用于解决路由兼容问题）
3. Apache 服务器：自带 .htaccess 文件，可自动实现路由重写
4. Nginx 服务器：需手动配置 try_files 规则以支持路由跳转

五、系统使用说明

5.1 管理员登录

• 初始默认密码：admin123
• 首次登录后请及时修改密码，保障账户安全
• 登录入口：网站首页右上角「管理登录」按钮

5.2 卡密管理操作

• 后台管理界面支持卡密商品的添加、编辑与删除
• 单个商品可关联多个卡密信息
• 系统自动记录并展示卡密的使用状态（未使用/已使用）

5.3 订单管理流程

• 查看全量订单记录
• 审核待处理订单
• 可标记订单为「完成」或「拒绝」状态

5.4 收款码配置

• 支持上传支付宝、微信等主流支付方式的收款二维码
• 可灵活启用或禁用指定收款码

5.5 系统参数设置

• 配置客服 QQ 联系方式
• 设置邮件发送功能（用于向用户推送卡密）
• 修改管理员登录密码
• 导出系统数据进行备份

六、注意事项

1. 本系统依赖 localStorage 存储数据，数据仅留存于本地浏览器，未同步至云端
2. 若需实现数据持久化与多端同步，建议开发配套后端 API 接口
3. 邮件发送功能默认处于模拟模式，如需真实发送，需提前配置邮件服务器信息
4. 部署至虚拟主机时，务必确认 PHP 版本不低于 7.4，否则可能影响功能正常使用

七、二次开发说明