系统介绍

这是一个基于React开发的个人发卡网系统，可以用于销售和管理各类卡密。系统支持卡密商品管理、订单管理、收款码管理等功能，所有数据使用localStorage存储，无需后端数据库支持。

技术栈

• React 18+
• TypeScript
• Tailwind CSS
• Vite
• React Router

功能特点

• 🏠 简洁的卡密商城界面
• 🔧 完整的后台管理功能
• 💳 支持自定义收款码
• 📱 响应式设计，支持移动端和PC端
• 🌓 支持明暗主题切换
• 📊 数据概览统计
• 📤 数据导出功能
• 🔐 管理员密码保护

部署指南

前置要求

• Node.js 16+
• pnpm 包管理器

构建步骤

1. 克隆或下载项目代码
2. 安装依赖：
   1. pnpm install
3. 构建项目：
   1. pnpm build
4. 构建完成后，dist目录中的文件即为可部署的静态文件

上传到服务器

1. 将dist目录中的所有文件上传到您的Web服务器根目录
2. 确保服务器支持PHP 7.4+（用于处理路由问题）
3. 如果您使用的是Apache服务器，.htaccess文件会自动处理路由重写
4. 如果您使用的是Nginx服务器，需要配置相应的try_files规则

使用说明

管理员登录

• 默认密码：admin123
• 登录后请立即修改密码以确保安全
• 登录入口：网站首页右上角”管理登录”

卡密管理

• 在后台管理界面可以添加、编辑和删除卡密商品
• 可以为每个商品添加多个卡密
• 系统会自动跟踪卡密的使用状态

订单管理

• 查看所有订单记录
• 审核待处理的订单
• 标记订单完成或拒绝

收款码管理

• 上传支付宝、微信等收款二维码
• 可以启用或禁用特定的收款码

系统设置

• 配置客服QQ
• 设置邮件发送功能（用于发送卡密）
• 修改管理员密码
• 导出系统数据备份

注意事项

1. 本系统使用localStorage存储数据，数据仅保存在浏览器本地
2. 如果需要更强大的数据持久化能力，建议开发相应的后端API
3. 邮件发送功能默认使用模拟模式，如需真实发送请配置邮件服务器信息
4. 部署到虚拟主机时，确保PHP版本不低于7.4

开发说明

如需二次开发，可以使用以下命令启动开发服务器：

pnpm dev

版权信息

本系统仅供学习和个人使用，请勿用于商业用途。