FundStack - 为创作者打造的次世代赞助基础设施

为创作者打造的次世代赞助基础设施。

English | 简体中文

FundStack 是一套生产级、高性能的自托管赞助管理解决方案。

基于最新的 Next.js 19 架构重构,原生支持 Serverless 部署。它集成了实时数据分析、多渠道支付管理(微信/支付宝/QQ)、自动化邮件通知以及高强度的安全防护。专为那些希望完全掌控数据、拒绝平台抽成的开发者和创作者设计。

🚀 为什么选择 FundStack?

即时展示 - 改变游戏规则的特性

与传统赞助平台不同,FundStack 在提交后立即展示赞助信息 - 无需等待,零延迟。

当赞助者提交打赏时:

• ✅ 即时展示: 提交信息立即出现在公开列表中(标记为"待确认")
• ✅ 实时反馈: 赞助者马上就能看到自己的留言和金额
• ✅ 透明流程: 状态从"待确认" → "已确认"(站长审核后)
• ✅ 更好的互动: 赞助者立即获得认可,而不是等待数小时甚至数天

传统平台让赞助者等到人工审核通过才显示 - 有时需要几小时甚至几天。FundStack 在保持管理员控制的同时,立即表达感谢。

完全掌控,零抽成

• 💰 零平台费用: 100% 保留您的赞助收入
• 🔒 数据自主: 完全拥有赞助者信息
• ⚙️ 高度定制: 根据需求调整每个细节
• 🌐 自主部署: 部署到任何地方 - Vercel、自有服务器或任何云平台

---

✨ 功能特性

核心功能

• ⚡ 即时展示: 赞助信息提交后立即显示在公开列表(待确认状态,审核后变为已确认)
• 📱 现代赞助表单: 简洁、响应式界面,实时验证
• 🔒 安全数据处理: 输入清理、SQL注入防护、XSS防护
• 💳 多种支付方式: 支持微信支付、支付宝、QQ支付等
• 📧 邮件通知: 为赞助者和管理员提供自动通知
• 🎛️ 管理仪表板: 带有过滤和搜索的综合管理面板，支持编辑和批量删除赞助记录
• 🧩 CAPTCHA 验证: 集成滑动拼图验证码，防止垃圾信息提交
• ⚙️ 动态配置: 基于Web的站点配置，支持实时预览邮件模板
• 📱 移动端优化: 完全响应式设计,触摸友好的交互

安全性

• TypeScript提供类型安全和代码质量保障
• 全面的输入验证和清理
• SQL注入和XSS攻击防护
• CORS安全配置
• 速率限制防止滥用
• 安全的管理员认证

用户体验

• 使用Tailwind CSS和Shadcn UI组件的现代界面
• 完全响应式的移动端优化布局
• 实时表单验证，提供有用的错误提示
• 加载状态和流畅过渡效果
• 可访问性设计模式（符合WCAG标准）
• 触摸友好的移动端交互

数据分析与报告

• 实时赞助统计仪表板
• 赞助者数量和总金额跟踪
• 支付方式分布图表
• 可自定义周期的趋势分析
• CSV导出功能用于报告
• 个人赞助者历史记录跟踪

🔧 技术栈

• 前端: React 19, TypeScript, Tailwind CSS 4.1, Shadcn UI
• 后端: Next.js 16 API Routes
• 数据库: PostgreSQL (Neon Serverless)
• 邮件: Resend / SendGrid API集成
• 图表: Recharts数据可视化
• 部署: Vercel (推荐)

📦 快速开始

前置要求

• Node.js 18+
• PostgreSQL数据库或Neon账户
• 邮件服务API密钥（可选，用于通知）

安装

# 克隆仓库
git clone https://github.com/DomeenoH/FundStack.git
cd FundStack

# 安装依赖
pnpm install

# 设置环境变量
cp .env.example .env.local
# 编辑.env.local填入您的配置

# 初始化数据库
# 在PostgreSQL实例中执行scripts/init-database.sql

# 运行开发服务器
pnpm dev

访问 http://localhost:3000 查看赞助页面。

⚙️ 配置

环境变量

创建.env.local文件并填入以下变量：

# 数据库
DATABASE_URL=postgresql://user:password@host/database

# 管理员凭据
ADMIN_PASSWORD=your_secure_password_here
ADMIN_EMAIL=admin@example.com

# 邮件服务（可选）
EMAIL_PROVIDER=resend  # 或 sendgrid
EMAIL_API_KEY=your_api_key_here
EMAIL_FROM=noreply@yourdomain.com

# 站点URL
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_ADMIN_URL=http://localhost:3000/admin

# 安全
RATE_LIMIT_ENABLED=true

邮件服务设置

推荐：Resend

1. 在resend.com注册
2. 添加并验证您的域名
3. 生成API密钥
4. 设置EMAIL_PROVIDER=resend和EMAIL_API_KEY

备选：SendGrid

1. 在sendgrid.com注册
2. 生成API密钥
3. 设置EMAIL_PROVIDER=sendgrid和EMAIL_API_KEY

📱 移动端优化

本项目针对移动设备进行了全面优化：

• 响应式布局：适应所有屏幕尺寸
• 触摸友好：按钮和表单控件符合44x44px最小标准
• 移动端优化：虚拟键盘优化（inputMode属性）
• 横向滚动：带有视觉指示器的表格
• 自适应网格：统计和数据卡片布局
• 优化的字体大小：和小屏幕间距

📚 文档

• 安装指南: 中文详细安装配置指南
• 安装指南(英文): 英文详细安装和配置说明
• 部署指南: 生产环境部署说明
• 部署指南(英文): Production deployment instructions
• API文档: API参考见下文

🔗 API 端点

公开端点

GET  /api/donations        # 获取赞助统计
POST /api/donations        # 提交新赞助
GET  /api/donations/list   # 获取公开赞助列表
GET  /api/donations/[id]   # 获取赞助者详情和历史
GET  /api/analytics        # 获取分析数据
GET  /api/config           # 获取站点配置

管理端点（需要认证）

GET   /api/admin/donations      # 列出所有赞助
PATCH /api/admin/donations      # 更新赞助状态
GET   /api/admin/config         # 获取当前配置
PATCH /api/admin/config         # 更新站点配置

🎯 主要改进

功能	之前	现在
框架	原生JS	React + TypeScript
类型安全	无	完整TypeScript
验证	基础	全面
安全性	基础	生产就绪
管理面板	无	完整Web界面
配置	硬编码	动态Web配置
邮件	简单	基于模板
数据分析	无	全面
移动端	基础	完全优化
代码质量	混杂	模块化测试

🚀 部署

部署到Vercel

1. 推送代码到GitHub
2. 在Vercel中导入仓库
3. 配置环境变量
4. 部署！

详细说明请参见 DEPLOYMENT_GUIDE.md。

🔐 安全最佳实践

1. 生产环境始终使用HTTPS
2. 设置强壮的ADMIN_PASSWORD（20+字符）
3. 为您的域名正确配置CORS
4. 生产环境启用速率限制
5. 保持依赖更新：pnpm audit
6. 定期备份数据库
7. 使用环境专用的凭据

📄 许可证

MIT

🤖 AI 协作开发

本项目通过创新的 AI 驱动工作流协作开发完成:

• v0.dev - 初始 UI 原型设计和组件生成
• Google Gemini 3 Pro - 架构设计和代码实现
• Claude Sonnet 4.5 - 代码优化和精炼

这是人机协作在现代软件开发中的力量见证。整个代码库通过与 AI 助手的迭代对话创建,展示了 AI 如何在保持代码质量和最佳实践的同时加速开发过程。

💡 致谢

本项目灵感来源于 GitHub 项目 hexo-donate。

💬 支持

• 问题: 在 GitHub Issues 提交问题
• 讨论: 加入 GitHub Discussions
• 邮件: domino@dominoh.com

---

使用 Next.js、TypeScript 和 AI 用 ❤️ 制作