MkSaaS文档价格计划
配置价格计划
扩展在 website.tsx 中定义的价格计划，添加翻译内容。
// 返回带有翻译内容的价格计划
export function getPricePlans(): Record<string, PricePlan> {
const t = useTranslations('PricePlans');
const priceConfig = websiteConfig.price;
const plans: Record<string, PricePlan> = {};
// 为每个计划添加翻译内容
if (priceConfig.plans.free) {
plans.free = {
...priceConfig.plans.free,
name: t('free.name'),
description: t('free.description'),
features: [
t('free.features.feature-1'),
t('free.features.feature-2'),
t('free.features.feature-3'),
t('free.features.feature-4'),
],
limits: [
t('free.limits.limit-1'),
t('free.limits.limit-2'),
t('free.limits.limit-3'),
],
};
}
...
}plans 对象中的每个价格计划可以具有以下属性：
| 属性 | 类型 | 描述 |
|---|---|---|
id | string | 计划的唯一标识符 |
name | string? | 计划的显示名称 |
description | string? | 计划功能的描述 |
features | string[]? | 此计划包含的功能列表 |
limits | string[]? | 此计划的限制列表 |
prices | Price[] | 计划的价格选项列表（月付、年付、一次性等） |
isFree | boolean | 是否为免费计划 |
isLifetime | boolean | 是否为终身（一次性支付）计划 |
recommended | boolean? | 是否将此计划突出显示为推荐 |
disabled | boolean? | 是否在 UI 中禁用此计划 |
问：website.tsx 中的价格配置和 price-config.tsx 中的价格计划有什么区别？
答：website.tsx 文件定义了价格计划的基本信息，不包括特定于语言环境的信息，而 price-config.tsx 文件通过添加翻译内容来显示这些价格计划。拆开来的原因是后者只能在客户端组件中使用。
视频教程
下一步
现在您了解了定价配置，请探索其他相关主题：