Phantom Market

English | 中文

一个基于 Next.js 的数字商品自动发卡平台，支持加密货币支付。

功能特性

• 🛒 数字商品自动发卡（卡密系统）
• 💰 Coinbase Commerce 加密货币支付
• 👤 Clerk 用户认证
• 🔐 Supabase 数据库 + RLS 安全策略
• 📊 管理后台（商品/卡密管理）
• 💳 用户余额系统

技术栈

• 前端: Next.js 15, React 19, TailwindCSS
• 认证: Clerk
• 数据库: Supabase (PostgreSQL)
• 支付: Coinbase Commerce

快速开始

1. 克隆项目

git clone https://github.com/xiaoju111a/Phantom.git
cd Phantom
yarn install

2. 配置环境变量

复制 env.example 为 .env.local：

cp env.example .env.local

填写以下配置：

# Clerk Auth (https://clerk.com)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

# Supabase (https://supabase.com)
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx
SUPABASE_SERVICE_ROLE_KEY=eyJxxx

# Coinbase Commerce (https://commerce.coinbase.com)
COINBASE_COMMERCE_API_KEY=xxx
COINBASE_COMMERCE_WEBHOOK_SECRET=xxx

# Admin
ADMIN_USER_ID=user_xxx  # 你的 Clerk User ID

3. 配置 Supabase 数据库

在 Supabase SQL Editor 中运行 supabase/setup.sql。

4. 配置 Coinbase Webhook

1. 登录 Coinbase Commerce
2. Settings → Webhooks → Add Endpoint
3. URL: https://your-domain.com/api/webhooks/coinbase
4. 复制 Webhook Secret 到 .env.local

5. 启动开发服务器

yarn dev

访问 http://localhost:3000

项目结构

Phantom/
├── app/
│   ├── page.tsx           # 首页（商品列表）
│   ├── dashboard/         # 用户中心（订单/充值记录）
│   ├── recharge/          # 充值页面
│   ├── admin/             # 管理后台
│   └── api/
│       ├── create-charge/ # 创建支付
│       ├── products/buy/  # 购买商品
│       ├── webhooks/      # Coinbase 回调
│       └── admin/         # 管理接口
├── components/
│   ├── Navbar.tsx         # 导航栏
│   └── ProductCard.tsx    # 商品卡片
├── lib/
│   └── supabaseAdmin.ts   # Supabase Admin 客户端
└── supabase/
    └── setup.sql          # 数据库完整设置脚本

管理后台

访问 /admin（需要 ADMIN_USER_ID 匹配）

功能：

• 查看统计数据
• 添加/编辑/删除商品
• 批量导入卡密
• 查看所有卡密状态

部署

Vercel 部署

1. Fork 本项目
2. 在 Vercel 导入项目
3. 配置环境变量
4. 部署

注意事项

• 确保 Coinbase Webhook URL 指向生产域名

License

MIT