2026全新个人发卡网可以上传自己收款码.不需要支付接口

这是一个基于React+TypeScript+TailwindCSS的邀请码购买系统，包含前台购买页面和后台管理功能，支持商品管理、订单处理、卡密发放和邮件通知等功能。

##环境准备

###1.安装Node.js
项目需要Node.js环境，建议安装LTS版本。

-访问[Node.js官网](https://nodejs.org/)下载并安装
-验证安装：`node-v`和`npm-v`命令应显示版本号

###2.安装pnpm（推荐）
项目使用pnpm作为包管理器，可以通过以下方式安装：

```bash
npminstall-gpnpm
```

验证安装：`pnpm-v`

##项目搭建步骤

###1.克隆项目代码

```bash
gitclone[项目仓库地址]
cd[项目目录]
```

###2.安装依赖

```bash
pnpminstall
```

###3.启动开发服务器

```bash
pnpmdev
```

开发服务器将在`http://localhost:3000`启动

###4.项目结构说明

```
├──src/          #源代码目录
│  ├──components/    #公共组件
│  ├──contexts/    #React上下文
│  ├──hooks/      #自定义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
pnpmbuild
```

构建后的文件将生成在`dist/`目录中

###2.部署方式

####静态网站部署
由于项目是纯前端应用，可以部署到任何支持静态网站的托管服务：
-Vercel
-Netlify
-GitHubPages
-阿里云OSS
-腾讯云COS等

####自定义服务器部署
也可以部署到自己的服务器上，使用Nginx等Web服务器提供静态文件服务：

```nginx
server{
  listen80;
  server_nameyour-domain.com;
  
  root/path/to/your/project/dist;
  indexindex.html;
  
  location/{
      try_files$uri$uri//index.html;
  }
}
```

##默认登录信息
-后台登录地址：`/admin`
-默认密码：`admin123`（登录后可修改）

##开发注意事项

1.项目使用TailwindCSS进行样式管理，请遵循相关规范
2.组件化开发，尽量将功能拆分为可复用的组件
3.所有数据操作都通过`useConfig`hook进行，保持数据一致性
4.如需添加新功能，建议先了解现有代码结构和逻辑

##常见问题解决

###1.页面样式错乱
-检查TailwindCSS类名是否正确
-清除浏览器缓存后重试

###2.数据不保存
-确认LocalStorage是否被禁用
-检查浏览器隐私设置

###3.邮件发送失败
-检查邮箱服务器配置是否正确
-确认SMTP端口和认证信息
-注意：某些邮箱需要开启"第三方应用授权"并使用授权码而非密码

##技术栈
-React18+
-TypeScript
-TailwindCSS
-Vite
-ReactRouter
-Sonner(Toast提示)
-Recharts(图表库)