个人发卡网系统源码

源码系统概览

文章正文

这套个人发卡网是一套纯前端实现的卡密销售系统，主要面向想自己搭一个邀请码、激活码、会员卡售卖页的个人站长。
前台买家可以浏览商品、选择数量、填写联系方式，并扫描微信或支付宝收款码完成付款。
付款后订单进入后台等待审核，管理员在后台通过审核时，系统会从该商品的卡密池里自动分配一条卡密给买家。
买家不需要登录，凭下单时填写的联系方式就能在前台自助查询到属于自己的卡密，流程比较轻量。
后台提供商品管理、订单管理、网站内容配置、收款码配置、邮箱参数配置和管理员密码修改等模块，基本覆盖了发卡站日常运营所需。
商品支持添加、编辑和删除，每个商品可以维护一组卡密列表，库存数量会随卡密发放实时减少。
订单有“待处理 / 已通过 / 已拒绝”三种状态，管理员可以单条通过或拒绝，也能按状态筛选和清空所有订单。
网站文案、价格、客服 QQ、收款码图片都可以在后台直接修改并即时生效，方便根据不同业务快速替换内容。
前台“查看卡密”弹窗支持输入 QQ 号、邮箱或手机号进行查询，结果按下单时间倒序展示对应订单的状态与卡密。
未通过审核的订单会提示等待处理，已通过但暂无可用卡密的订单会提示联系客服，交互提示比较完整。
后台的“网站内容配置”里可以设置批量购买的数量阈值与单价，满足多张优惠的场景。
收款码配置支持上传微信和支付宝两张图片，图片以 base64 形式随配置一起保存在本地。
管理员可在后台一键修改登录密码，首次部署后建议尽快把默认密码改掉。
后台还提供 SMTP 邮箱参数的配置入口，可填写发件服务器、账号、授权码与邮件模板。
项目根目录附带一份搭建教程，从 Node.js 安装、依赖安装到静态部署都写得很清楚，新手也能照着跑起来。
整站采用 React + TypeScript + Vite + Tailwind CSS 构建，是一个静态单页应用，打包后丢到任意静态托管或 Nginx 即可运行。
由于页面用 Tailwind CSS 组织样式，整体界面简洁干净，配色以蓝白为主，购物与后台操作都不会觉得杂乱。
需要注意的是，这套系统没有后端和数据库，所有商品和订单数据都存在浏览器本地，更像是一套可直接运行的发卡站原型与学习模板。
对于想了解发卡业务流程、做二次开发或搭建自用演示站的朋友，它的结构清晰、改动成本低，是合适的上手项目。

源码简介

这是一套基于 React + TypeScript + Vite + Tailwind CSS 编写的纯前端个人发卡网系统，也可理解为邀请码购买系统。它包含前台购买页和后台管理两大块：前台展示商品、调整数量、展示微信/支付宝收款码并支持卡密自助查询；后台提供商品与卡密维护、订单审核、网站内容配置、收款码与邮箱参数配置、管理员密码修改等功能。数据全部保存在浏览器 LocalStorage，无需数据库即可运行，适合作为发卡业务原型、学习模板或自用演示站参考。

适用场景

• 个人站长搭建邀请码、激活码、卡密类虚拟商品售卖页。
• 论坛或社群付费注册（邀请码）发放场景。
• 软件授权码、会员卡密的小额自动交付 demo 参考。

功能亮点

1. 商品与卡密管理：后台可添加、编辑、删除商品并维护卡密列表（Product.serialCodes，AdminPage 添加商品弹窗）。
2. 订单审核与卡密自动分配：订单审核通过后从商品卡密池分配卡密（useConfig.updateOrderStatus 将 serialCode 写入订单）。
3. 双码收款：前台弹出微信、支付宝收款码供买家扫码付款（config.wechatPayImage / alipayImage）。
4. 卡密自助查询：买家凭联系方式查询订单状态与卡密，无需登录（InvitationCodePurchasePage 查看卡密弹窗）。
5. 后台可视化配置：价格、文案、客服 QQ、收款码、SMTP 参数均可在后台修改并即时生效（AdminPage 网站内容配置）。
6. 管理员密码保护：/admin 密码登录，默认密码 admin123 可在后台修改（App.tsx / authContext）。

技术架构与部署指南

维度	本套源码	同类通用方案
技术栈	前端：React 18 + TypeScript + Vite + Tailwind CSS + react-route	依具体方案选型，需自行搭建与维护
部署方式	安装 Node.js LTS 版本，并全局安装 pnpm（npm install -g pnpm）。	多托管于第三方平台或订阅云服务
功能侧重	商品与卡密管理：后台可添加、编辑、删除商品并维护卡密列表（Product.serialCodes，AdminPage 添	功能通用，定制深度有限
数据归属	数据自持，部署在自有服务器，不出站	数据通常留存于服务商侧
成本模式	获取后自主部署，无持续授权费用	通常按订阅或调用量计费

技术栈与运行环境

前端：React 18 + TypeScript + Vite + Tailwind CSS + react-router-dom 7 + framer-motion + recharts + sonner + zod
后端：无（纯静态前端，数据存浏览器 LocalStorage）
数据库：无（LocalStorage 本地存储，单浏览器有效）
运行环境：Node.js LTS，pnpm 包管理
其他依赖：SMTP 邮箱参数仅为后台配置项，邮件发送在前台以 console 模拟，未真实投递

安装与部署提示

1. 安装 Node.js LTS 版本，并全局安装 pnpm（npm install -g pnpm）。
2. 在项目目录执行 pnpm install 安装依赖。
3. 执行 pnpm dev 启动本地预览，默认地址为 http://localhost:3000。
4. 执行 pnpm build 生成 dist 静态文件（输出到 dist/static）。
5. 将 dist 部署到 Vercel、Netlify、GitHub Pages、阿里云 OSS 等静态托管，或用 Nginx 指向 dist 并配置 try_files $uri /index.html。
6. 访问 /admin，用默认密码 admin123 登录，修改密码并配置收款码、商品与卡密后即可使用。

截图与演示说明

• 前台购买页（/ 与 /invitation-code）：商品选项卡、数量选择、支付金额、微信/支付宝收款码弹窗、查看卡密弹窗。
• 后台登录页（/admin）：密码登录界面。
• 后台管理页：订单管理表格（订单ID、商品、数量、总价、联系方式、卡密、状态、时间、操作）、网站内容配置、收款码配置、商品管理、修改密码。
• 添加/编辑商品弹窗：名称、描述、价格、卡密列表维护。

常见问题

• 问：为什么数据在本机看不到或不保存？答：项目是纯前端，数据存浏览器 LocalStorage，换浏览器或清缓存即丢失，生产环境需自备后端与数据库。
• 问：支付后卡密怎么发给买家？答：买家在前台“查看卡密”凭联系方式查询；订单在后台审核通过后自动分配卡密并显示。

安全风险提示

特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
补充风险：其一，系统无后端、数据存 LocalStorage，任何同浏览器用户都可借控制台读取/篡改订单与卡密，且默认后台密码 admin123 较弱，切勿直接用于真实收款。其二，源码中微信/支付宝收款码默认引用外部 coze 占位图地址，上线前需替换为自己真实收款码。其三，后台 SMTP 配置下的“邮件通知”在前台仅为 console.log 模拟，并未真实发送邮件，切勿误认为已具备自动发信能力。

下载说明

源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。