自定义

LaunchSaaS 设计为高度可定制。本指南涵盖网站配置、主题和品牌。

网站配置

LaunchSaaS 使用 app-owned 配置系统。品牌、导航、auth 设置和产品实例都位于 apps/launchsaas/src/configuration/，可复用 contract 则由 shared package 提供：

文件	描述
`metadata.ts`	网站名称、标题、描述、logo、SEO
`navbar.ts`	导航栏项目和操作
`sidebar.ts`	仪表板/管理侧边栏（基于角色的访问）
`user-button.tsx`	用户下拉菜单（基于角色的项目）
`footer.ts`	页脚链接和徽章
`social-links.ts`	社交媒体链接
`product.ts`	定价和产品配置

元数据

编辑 apps/launchsaas/src/configuration/metadata.ts 以自定义网站的基本信息：

import type { Metadata } from "@/configuration/types";

export const metadata: Metadata = {
  name: "你的 SaaS 名称",
  title: "你的 SaaS – SEO 标语",
  tagline: "你的吸引人的标语",
  description: "用于 SEO 的 SaaS 描述",
  logo: "/logo.png",
  ogImage: "/og.png",
  keywords: ["关键词1", "关键词2"],
};

导航栏

编辑 apps/launchsaas/src/configuration/navbar.ts 以自定义头部导航：

import type { NavBar } from "@/configuration/types";
import { SiVercel } from "@icons-pack/react-simple-icons";

export const navbar: NavBar = {
  // 导航项（支持嵌套菜单）
  items: [
    { title: "功能", href: "/#features" },
    { title: "定价", href: "/#pricing" },
    { title: "博客", href: "/blog" },
    // 带图标和描述的嵌套菜单
    {
      title: "产品",
      children: [
        {
          icon: SiVercel,
          title: "产品一",
          href: "/products/one",
          description: "产品一的描述",
        },
      ],
    },
  ],
  // 操作按钮（未登录时显示）
  actions: [
    { item: { title: "登录", href: "/auth/sign-in" }, variant: "outline" },
    { item: { title: "开始使用", href: "/#pricing" }, variant: "default" },
  ],
};

侧边栏（仪表板/管理）

编辑 apps/launchsaas/src/configuration/sidebar.ts 以自定义受保护路由的側边栏：

import type { SideBar } from "@/configuration/types";
import { CreditCard, Settings, UserCog } from "lucide-react";

export const sidebar: SideBar = {
  groups: [
    {
      title: "管理",
      items: [
        {
          icon: UserCog,
          title: "用户",
          href: "/admin/users",
          roles: ["admin"], // 仅对管理员可见
        },
      ],
    },
    {
      title: "设置",
      items: [
        {
          icon: CreditCard,
          title: "计费",
          href: "/billing",
          roles: ["user"], // 仅对用户可见
        },
        {
          icon: Settings,
          title: "设置",
          href: "/settings",
          roles: ["user"],
        },
      ],
    },
  ],
};

侧边栏支持基于角色的可见性 - 项目会根据用户的角色（user 或 admin）自动过滤。

用户按钮菜单

编辑 apps/launchsaas/src/configuration/user-button.tsx 以自定义用户下拉菜单：

import type { UserButton } from "@/configuration/types";
import { CreditCard, LayoutDashboard, Settings } from "lucide-react";

export const userButton: UserButton = {
  menus: [
    {
      title: "计费",
      href: "/billing",
      icon: CreditCard,
      roles: ["user"],
    },
    {
      title: "仪表板",
      href: "/admin/users",
      icon: LayoutDashboard,
      roles: ["admin"],
    },
  ],
};

页脚

编辑 apps/launchsaas/src/configuration/footer.ts 以自定义页脚链接：

import type { Footer } from "@/configuration/types";

export const footer: Footer = {
  groups: [
    {
      title: "产品",
      menus: [
        { title: "功能", href: "/#features" },
        { title: "定价", href: "/#pricing" },
      ],
    },
    {
      title: "法律",
      menus: [
        { title: "隐私", href: "/privacy" },
        { title: "条款", href: "/terms" },
      ],
    },
  ],
  badges: [
    // 可选：添加 ProductHunt 等徽章
  ],
};

社交链接

编辑 apps/launchsaas/src/configuration/social-links.ts 以添加你的社交媒体资料：

import type { SocialLink } from "@/configuration/types";
import { SiGithub, SiX, SiDiscord } from "@icons-pack/react-simple-icons";

export const socialLinks: SocialLink[] = [
  { icon: SiGithub, title: "GitHub", href: "https://github.com/your-org" },
  { icon: SiX, title: "Twitter", href: "https://x.com/your-handle" },
  { icon: SiDiscord, title: "Discord", href: "https://discord.gg/your-invite" },
];

主题

LaunchSaaS 使用 Tailwind CSS 和 shadcn/ui 主题。

主题生成器

你可以使用在线工具生成自定义主题：

tweakcn - shadcn/ui 的可视化主题编辑器
shadcn themes - 官方 shadcn/ui 主题生成器

生成主题后，将 CSS 变量复制到 apps/launchsaas/src/app/globals.css。

颜色

在 apps/launchsaas/src/app/globals.css 中使用 CSS 变量自定义颜色：

@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }

  .dark {
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }
}

添加组件

添加新的 shadcn/ui 组件：

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card

共享的 shadcn 与 source-vendor UI 组件会添加到 packages/design-system/ui/src/components/。应用自己的组件应继续保留在各自 app 中，并从 @launchsaas/ui/components/ui/* 导入共享的 shadcn primitive。同时要继续让 apps/launchsaas/src/app/globals.css 作为 Tailwind 的入口样式文件，并确保其中包含 @source "../../../../packages/design-system/ui/src";，否则共享 UI 包内部使用的 class 不会被编译进 app。

着陆页

在 apps/launchsaas/src/components/landing/ 中自定义着陆页部分：

组件	描述
`hero.tsx`	英雄区
`features.tsx`	功能网格
`pricing.tsx`	定价计划
`faq.tsx`	常见问题
`testimonials.tsx`	客户推荐
`cta.tsx`	行动号召

AI 辅助设计：使用 Impeccable 为你的 AI 建立持久的品牌风格认知，再使用 frontend-design 技能生成符合品牌调性的精美组件。详见 AI 辅助营销页面设计。

产品配置

在 apps/launchsaas/src/configuration/product/ 中配置定价和产品。产品目录的类型和查找 helper 都由 app 自己持有：

使用 Stripe Price ID 定义订阅计划
定义一次性支付产品
使用 sandbox 字段在同一个目录中区分测试和生产产品
在 apps/launchsaas/src/configuration/product/index.ts 导出的 helper 中指定定价页产品

电子邮件模板

邮件布局由 packages/design-system/email-templates 中的 @launchsaas/email-templates 提供。邮件内容通过 messages/[locale].json 的 Email 命名空间配置；可编辑每种模板的 content、heading 和 action 字段：

emailVerification - 验证邮件
resetPassword - 密码重置邮件
magicLink - 魔术链接登录邮件
paymentCompleted - 支付确认邮件
welcome - 欢迎邮件

运行 pnpm run dev:email 可在 http://localhost:3003 预览所有模板。apps/email/emails/ 只提供 mock 数据并渲染共享布局，不维护单独的模板实现。

博客与内容

所有内容以 MDX 文件存储在 content/ 目录下：

目录	描述
`content/blog/`	博客文章
`content/docs/`	文档页面
`content/changelog/`	更新日志条目
`content/pages/`	静态页面（条款、隐私政策、许可证等）

详见博客与内容指南了解完整的 frontmatter 字段和示例。

资源

Logo：替换 public/logo.png
Favicon：更新 public/ 中的文件
图片：添加到 public/ 目录