基于React 18+开发的个人发卡网系统，支持卡密商品管理、订单处理、自定义收款码及明暗主题切换。采用TypeScript+Tailwind CSS构建，响应式设计适配多端，数据本地存储无需后端，适合快速部署与学习使用。
2026个人发卡网系统
系统介绍
这是一个基于 React 开发的个人发卡网系统，可以用于销售和管理各类卡密。系统支持卡密商品管理、订单管理、收款码管理等功能，所有数据使用 localStorage 存储，无需后端数据库支持。
技术栈
-
React 18+
-
TypeScript
-
Tailwind CSS
-
Vite
-
React Router
功能特点
-
🏠 简洁的卡密商城界面
-
🔧 完整的后台管理功能
-
💳 支持自定义收款码
-
📱 响应式设计，支持移动端和PC端
-
🌓 支持明暗主题切换
-
📊 数据概览统计
-
📤 数据导出功能
-
🔐 管理员密码保护
部署指南
前置要求
-
Node.js 16+
-
pnpm 包管理器
构建步骤
-
克隆或下载项目代码
-
安装依赖：
pnpm install -
构建项目：
pnpm build -
构建完成后，
dist目录中的文件即为可部署的静态文件
上传到服务器
-
将
dist目录中的所有文件上传到您的 Web 服务器根目录 -
确保服务器支持 PHP 7.4+（用于处理路由问题）
-
如果您使用的是 Apache 服务器，
.htaccess文件会自动处理路由重写 -
如果您使用的是 Nginx 服务器，需要配置相应的 try_files 规则
使用说明
管理员登录
-
默认密码：
admin123 -
登录后请立即修改密码以确保安全
-
登录入口：网站首页右上角“管理登录”
卡密管理
-
在后台管理界面可以添加、编辑和删除卡密商品
-
可以为每个商品添加多个卡密
-
系统会自动跟踪卡密的使用状态
订单管理
-
查看所有订单记录
-
审核待处理的订单
-
标记订单完成或拒绝
收款码管理
-
上传支付宝、微信等收款二维码
-
可以启用或禁用特定的收款码
系统设置
-
配置客服 QQ
-
设置邮件发送功能（用于发送卡密）
-
修改管理员密码
-
导出系统数据备份
注意事项
-
本系统使用 localStorage 存储数据，数据仅保存在浏览器本地
-
如果需要更强大的数据持久化能力，建议开发相应的后端 API
-
邮件发送功能默认使用模拟模式，如需真实发送请配置邮件服务器信息
-
部署到虚拟主机时，确保 PHP 版本不低于 7.4
开发说明
如需二次开发，可以使用以下命令启动开发服务器：
pnpm dev版权信息
本系统仅供学习和个人使用，请勿用于商业用途。
