基于React开发的个人发卡网系统

系统概述

这是一个基于 React 开发的个人发卡网系统，专为个人或小团队设计，可用于在线销售和管理各类卡密商品（如邀请码、激活码、充值码等）。系统采用纯前端技术实现，所有数据通过 localStorage 存储，无需依赖后端数据库，部署简单、维护便捷。

系统提供了完整的商品展示、订单处理、收款管理等功能，界面简洁直观，支持明暗主题切换与响应式布局，适用于各类虚拟商品的在线销售场景。

技术栈

• React 18+ – 现代化的前端开发框架
• TypeScript – 提供类型安全与更好的开发体验
• Tailwind CSS – 原子化CSS框架，快速构建美观界面
• Vite – 高性能的前端构建工具
• React Router – 实现前端路由与页面导航

功能特点

• 🏠 简洁商城界面 – 清晰展示卡密商品，支持立即购买
• 🔧 完整后台管理 – 支持商品、订单、收款码等全面管理
• 💳 自定义收款码 – 可上传微信、支付宝等收款二维码
• 📱 响应式设计 – 适配手机、平板、PC等多类设备
• 🌓 明暗主题切换 – 支持亮色与暗色模式
• 📊 数据概览统计 – 直观查看销售与订单数据
• 📤 数据导出功能 – 支持订单与商品数据导出备份
• 🔐 密码保护后台 – 管理员登录验证，保护管理权限

部署指南

前置要求

• Node.js 16 或更高版本
• pnpm 包管理器（也可使用 npm 或 yarn）

构建步骤

1. 克隆或下载项目源码
2. 安装依赖：

   pnpm install

3. 构建项目：

   pnpm build

4. 构建完成后，在项目根目录生成 dist 文件夹，内含所有可部署的静态文件。

上传到服务器

1. 将 dist 目录下的全部文件上传至 Web 服务器根目录（如 public_html 或 www）。
2. 确保服务器支持 PHP 7.4+（用于路由处理）。
3. 若使用 Apache 服务器，项目自带的 .htaccess 文件会自动处理路由重写。
4. 若使用 Nginx，需添加类似以下配置：

   location / {
     try_files $uri $uri/ /index.html;
   }

使用说明

管理员登录

• 默认密码：admin123
• 登录入口位于网站首页右上角 “管理登录”
• 登录后建议立即修改密码以提升安全性

卡密管理

• 在后台管理界面可新增、编辑或删除卡密商品
• 支持为每个商品批量导入卡密内容
• 系统自动追踪卡密库存与使用状态

订单管理

• 查看所有订单记录，支持按状态筛选
• 审核待处理订单，支持通过或拒绝
• 订单状态包括：待支付、审核中、已完成、已拒绝

收款码管理

• 可上传支付宝、微信等收款码图片
• 支持启用/禁用指定收款方式
• 前台结账时会自动展示启用的收款码

系统设置

• 配置客服联系方式（如QQ）
• 开启/关闭邮件发送功能
• 修改管理员密码
• 导出系统数据备份（JSON格式）

注意事项

1. 所有数据基于 localStorage 存储，仅保存在用户本地浏览器，更换设备或清除缓存将导致数据丢失。
2. 若需数据持久化或多用户支持，建议自行开发后端 API 配合数据库使用。
3. 邮件发送功能默认处于模拟模式，真实发送需配置 SMTP 邮件服务器信息。
4. 部署至虚拟主机时，请确保 PHP 版本 ≥ 7.4。
5. 请勿在公开环境中使用默认管理员密码，务必登录后立即修改。

开发说明

若需进行二次开发或本地调试，可使用以下命令启动开发服务器：

pnpm dev

项目将运行在并支持热更新。

版权声明

本系统仅供学习与个人使用,请勿将其用于商业用途。

部分截图