LogoMkSaaS文档

价格计划

配置价格计划

扩展在 website.tsx 中定义的价格计划,添加翻译内容。

src/config/price-config.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 对象中的每个价格计划可以具有以下属性:

属性类型描述
idstring计划的唯一标识符
namestring?计划的显示名称
descriptionstring?计划功能的描述
featuresstring[]?此计划包含的功能列表
limitsstring[]?此计划的限制列表
pricesPrice[]计划的价格选项列表(月付、年付、一次性等)
isFreeboolean是否为免费计划
isLifetimeboolean是否为终身(一次性支付)计划
recommendedboolean?是否将此计划突出显示为推荐
disabledboolean?是否在 UI 中禁用此计划

问:website.tsx 中的价格配置price-config.tsx 中的价格计划有什么区别?

答:website.tsx 文件定义了价格计划的基本信息,不包括特定于语言环境的信息,而 price-config.tsx 文件通过添加翻译内容来显示这些价格计划。拆开来的原因是后者只能在客户端组件中使用。

Price

视频教程

下一步

现在您了解了定价配置,请探索其他相关主题: