跳过主要内容
全部文章
功能

TanStarter 包含哪些功能

一篇文章带你了解 TanStarter 开箱自带的全部能力。

TanStarter 是一个 SaaS starter kit。你会得到一个可运行的应用，里面已经配置并连接好了 AI 能力、认证、支付、文件存储、邮件、分析等常用模块。下面是开箱即用的内容。

1. AI

TanStarter 内置完整的 AI playground，由 TanStack AI、Cloudflare Workers AI 和 fal.ai adapters 驱动。

  • AI 文本处理：通过 Cloudflare Workers AI REST API，用 BART 总结长文，或用 M2M100 在 10 种语言之间翻译文本。
  • AI Chat：通过 Cloudflare Workers AI chat API 用 Llama 3.1 生成创意广告语，并用 Deepgram Aura 创建文本转语音，内置 12 种声音。
  • AI 图像生成：通过 Cloudflare Workers AI（Flux、SDXL、DreamShaper）或 fal.ai（Gemini、Flux、GPT Image 2）生成图片，fal.ai 侧使用 @tanstack/ai adapter。
  • AI 图像编辑：用 fal.ai Gemini 2.5 Flash 编辑图片，上传人像后可应用 Bobblehead Caricature、Pixar 3D、Anime Portrait 等风格。

2. 认证

认证基于 Better Auth 构建，这是非常流行的开源认证库。

  • 邮箱/密码：支持用邮箱和密码注册、登录，并可配置为必须完成邮箱验证后才能登录。
  • 社交登录：内置 Google 登录，也可以轻松添加 Twitter、Apple、Facebook 等更多 provider。
  • 重置密码：用户忘记密码时可以重置。社交登录用户也可以设置密码，之后用邮箱登录。
  • 用户资料：管理账号信息，包括姓名、密码和头像。
  • 基于角色的访问控制：内置 admin 和 user 角色，并通过 route-level middleware 阻止未登录或非管理员用户访问。

3. 支付

支付流程由 Stripe、Creem 或 Waffo 处理。

  • 订阅和一次性付款：支持月付、年付和终身方案，也支持免费试用。
  • 价格配置：可配置价格表中的价格、名称、描述、周期、功能和限制。
  • 账单管理：用户可通过 Stripe Customer Portal、Creem portal 或 Waffo consumer portal 管理账单，查看支付方式和账单历史。
  • Webhook 处理：支付事件已预先接好。如果在 Stripe dashboard 中启用，微信支付和支付宝也可用。

4. 页面

TanStarter 附带许多内置页面。你可以直接编辑 Markdown 文件，也可以通过单个配置文件调整。

  • Landing Page：高转化落地页，包含 12+ marketing blocks，例如 hero、logo cloud、stats、features、CTA、integrations、pricing、FAQ、testimonials、newsletter。通过编辑一个文件即可重排或删除区块。
  • Blog Pages：基于 MDX/Markdown 的博客系统，使用 Content Collections 提供列表页、文章页和分类页。把 Markdown 文件放进 content/blog/ 就会自动显示。
  • Pricing Page：价格表和 FAQ 区块，可通过单个配置文件完整配置。
  • About Page：简洁美观的关于页面，包含介绍内容。
  • Contact Page：可用的联系表单，会通过邮件发送消息。
  • Legal Pages：隐私政策、服务条款和 Cookie 政策，只需编辑对应 Markdown 文件。

5. 多语言

TanStarter 现在已经内置多语言支持。

  • 默认支持英文和中文：UI 文案通过 Paraglide 和 Inlang 管理，翻译内容存放在 project.inlang/messages/。
  • 感知语言的路由：基础语言保留干净 URL，中文页面使用 /zh 前缀。Navbar、footer、认证页面、dashboard、admin pages、settings、pricing 和 marketing pages 都会读取当前语言。
  • 本地化 SEO：Canonical URLs、sitemap entries、hreflang alternates、Open Graph locale tags 和 <html lang> 都会根据当前语言生成。
  • 本地化支付：Checkout 和 billing portal 流程会在可用时把当前语言传给 Stripe，让支付页面尽量匹配用户语言。

6. 邮件与 Newsletter

  • Cloudflare Email Service：Routing Rules 可转发入站邮件，避免暴露个人邮箱，适合 support@yourdomain.com 这类支持别名。
  • Resend：通过 React Email templates 发送事务邮件，例如欢迎邮件、密码重置等。可用 pnpm email:dev 在本地预览。
  • Newsletter：Resend Audiences 或 Beehiiv 支撑 subscribe/unsubscribe endpoints。也可以在注册后自动订阅新用户。

7. 文件存储

  • Cloudflare R2：支持上传、下载和删除文件。文件按用户目录组织，可限制文件大小和允许类型。无出口流量费用。
  • 无需 S3 Keys：文件通过 Wrangler bindings 访问，不需要管理 API keys。

8. 缓存

  • Cloudflare KV Cache：模板内置可选的 KV 缓存能力，用于 Newsletter 状态检查、公开列表、重复 API 响应这类读多写少的数据。
  • 减少 Provider 压力：可缓存的读取可以在边缘复用，关键状态仍然交给数据库、认证系统或支付 provider 负责。

9. SaaS 功能

  • Waitlist：内置 waitlist 页面，可在发布前收集潜在用户。
  • Notifications：支付事件可触发 Discord 或 Feishu webhook 通知。
  • Live Chat：设置一个环境变量即可添加 Crisp live chat。

10. Batteries Included

  • 可定制主题：支持通过 Tweakcn 等生成器定制主题。
  • 多种分析服务：Google Analytics、Plausible、Umami 和 Microsoft Clarity。设置所需环境变量后会在生产环境自动启用。
  • SEO 优化：通过 seo() helper 配置每个页面的 metadata。支持 Open Graph tags、Twitter Cards、canonical URLs 和 favicon。Sitemap 和 OG metadata 会自动生成。

11. Admin Dashboard

  • 用户管理：搜索、筛选和分页查看用户。
  • 角色与访问控制：分配角色，封禁或解封账号，并支持填写原因和到期时间。
  • API Keys：在专门的管理界面中管理 API keys。

12. 技术栈

TanStarter 基于现代、低成本的技术栈构建，完整运行在 Cloudflare edge network 上。

  • TanStack Start：全栈 React framework，基于 TanStack Router 提供文件路由，并通过 TanStack Query 管理 server state。
  • Cloudflare D1：运行在边缘的 serverless SQLite 数据库。Drizzle ORM 提供类型安全查询、schema migrations 和可视化 studio。
  • Cloudflare R2：S3-compatible object storage，无出口流量费用。文件通过 Wrangler bindings 访问，不需要管理 S3 API keys。
  • Cloudflare KV：面向读多写少 server data 的可选边缘缓存。
  • Cloudflare Workers：将应用部署到边缘。免费和付费计划都支持最大 64 MiB 的未压缩 Worker bundle，模板可以轻松部署到免费计划。运行 pnpm deploy 即可上线。
  • Cloudflare Email Service：运行在 Cloudflare Workers 上的零成本事务邮件服务。
  • Cloudflare Workers AI：通过 REST API 在边缘运行 Flux、SDXL、Llama 3.1 等 AI 模型。

每个模块都是可选的。关掉不需要的，保留需要的，把时间用在真正让你的产品不同的地方。