基于React+TypeScript+Tailwind CSS的现代化发卡网系统，支持商品管理、订单处理、卡密自动发放及邮件通知功能。无需支付接口，用户可上传自定义收款码，提供完整的邀请码购买流程搭建教程，适合个人或小型团队快速部署。
2026全新个人发卡网 - 邀请码购买系统搭建教程
项目概述
基于React + TypeScript + Tailwind CSS构建的邀请码购买系统，包含前台购买页面和后台管理功能。支持商品管理、订单处理、卡密发放、邮件通知等功能，用户可上传自定义收款码，无需支付接口。
环境准备
1. 安装Node.js
- 建议安装LTS版本
- 访问Node.js官网下载安装
- 验证安装：
bash
node -v npm -v
2. 安装pnpm（推荐）
bash
npm install -g pnpm
pnpm -v # 验证安装
项目搭建步骤
1. 克隆项目代码
bash
git clone [项目仓库地址]
cd [项目目录]
2. 安装依赖
bash
pnpm install
3. 启动开发服务器
bash
pnpm dev
开发服务器地址：http://localhost:3000
4. 项目结构说明
├── src/
│ ├── components/ # 公共组件
│ ├── contexts/ # React上下文
│ ├── hooks/
│ │ ├── useConfig.ts # 配置管理和业务逻辑
│ │ └── useTheme.ts # 主题切换功能
│ ├── lib/ # 工具函数
│ ├── pages/
│ │ ├── AdminPage.tsx # 后台管理页面
│ │ ├── Home.tsx # 首页
│ │ └── InvitationCodePurchasePage.tsx # 邀请码购买页面
│ ├── App.tsx # 应用入口组件
│ └── main.tsx # 程序入口文件
├── index.html # HTML模板
└── package.json # 项目配置和依赖
核心功能说明
前台功能
- 商品展示与选择
- 购买数量调整
- 联系方式填写
- 支付二维码展示
- 卡密查询功能
后台功能
- 商品管理（添加/编辑/删除商品和卡密）
- 订单管理（查看/审核/拒绝订单）
- 网站内容配置（文本/价格/收款码等）
- 邮箱服务器配置（自动发送卡密）
- 管理员密码修改
数据存储说明
使用浏览器LocalStorage存储：
- 商品信息和卡密
- 订单数据
- 网站配置
- 管理员密码
⚠️ 注意：LocalStorage仅在当前浏览器有效且有容量限制，生产环境建议使用后端数据库。
构建和部署
1. 构建生产版本
bash
pnpm build
构建文件生成在dist/目录
2. 部署方式
静态网站部署
支持以下托管服务：
- Vercel
- Netlify
- GitHub Pages
- 阿里云OSS
- 腾讯云COS
自定义服务器部署
使用Nginx配置示例：
nginx
server {
listen 80;
server_name your-domain.com;
root /path/to/your/project/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
默认登录信息
- 后台登录地址：
/admin - 默认密码：
admin123（登录后可修改）
开发注意事项
- 使用Tailwind CSS进行样式管理，请遵循规范
- 采用组件化开发，提高代码复用性
- 所有数据操作通过
useConfighook进行 - 添加新功能前请先了解现有代码结构
常见问题解决
1. 页面样式错乱
- 检查Tailwind CSS类名是否正确
- 清除浏览器缓存后重试
2. 数据不保存
- 确认LocalStorage未被禁用
- 检查浏览器隐私设置
3. 邮件发送失败
- 检查邮箱服务器配置
- 确认SMTP端口和认证信息
- 某些邮箱需开启"第三方应用授权"并使用授权码
技术栈
- React 18+
- TypeScript
- Tailwind CSS
- Vite
- React Router
- Sonner (Toast提示)
- Recharts (图表库)
