落地页配置

落地页由多个独立区块（Block）拼接而成，每个区块对应一个 React 组件。区块列表可自由组合，默认配置定义在代码中，用户也可在应用内实时调整。

可用区块

所有区块注册在：

apps/web/src/configs/landing-page-component/landing-page-component-registry.tsx

键名	标签	类型
`hero-section-23`	Shadcn Hero 23	hero
`hero-section-03`	Shadcn Hero 03	hero
`tailark-hero`	Tailark Hero	hero
`features-section-21`	Shadcn Features 21	features
`tailark-logo-cloud`	Tailark Logo Cloud	logo-cloud
`tailark-features`	Tailark Features	features
`tailark-integrations`	Tailark Integrations	integrations
`tailark-content`	Tailark Content	content
`tailark-stats`	Tailark Stats	stats
`tailark-pricing`	Tailark Pricing	pricing
`tailark-faqs`	Tailark FAQs	faqs
`tailark-call-to-action`	Tailark Call To Action	call-to-action
`tailark-testimonials`	Tailark Testimonials	testimonials

注意：同一 type 的区块在落地页中只会显示一个。例如同时选择 hero-section-23 和 hero-section-03，只有排序靠前的一个会生效。

更改默认区块列表

默认落地页区块列表定义在：

apps/web/src/configs/web-config.ts

const defaultLandingPageComponents = [
  "hero-section-23",
  "tailark-logo-cloud",
  "features-section-21",
  "tailark-integrations",
  "tailark-content",
  "tailark-stats",
  "tailark-pricing",
  "tailark-faqs",
  "tailark-call-to-action",
  "tailark-testimonials",
] as const satisfies readonly LandingPageComponentKey[];

直接编辑这个数组，即可更改新用户打开应用时看到的默认落地页结构：

调整顺序：将区块键名前后移动，落地页显示顺序随之改变
删除区块：从数组中移除对应键名
添加区块：将注册表中的键名加入数组

存储键

用户在应用内自定义落地页后，配置会存入 localStorage：

键	内容
`{AppName}-landing-page-components`	当前区块键名的 JSON 数组

若存储的区块列表为空或全部无效，会自动回退到 defaultLandingPageComponents。

新增自定义区块

创建 React 组件

在 apps/web/src/components/landing-page/ 下新建组件目录和文件：

apps/web/src/components/landing-page/
└── my-section/
    └── my-section.tsx

注册到区块注册表

在 landing-page-component-registry.tsx 中添加新条目：

apps/web/src/configs/landing-page-component/landing-page-component-registry.tsx

import MySection from "@/components/landing-page/my-section/my-section";

export const landingPageComponentMap = {
  // 现有区块...
  "my-section": () => <MySection />,
};

添加元数据

在 landing-page-component-config.ts 的 LANDING_PAGE_COMPONENTS 中补充标签和分组：

apps/web/src/configs/landing-page-component/landing-page-component-config.ts

export const LANDING_PAGE_COMPONENTS = {
  // 现有条目...
  "my-section": { label: "My Section", group: "Custom", type: "my-type" },
};

加入默认列表（可选）

如果希望新区块默认显示，将其添加到 web-config.ts 的 defaultLandingPageComponents 中。