/** * 价格对比组件 * 展示不同套餐的功能对比 */ "use client"; import React from "react"; import { Icon } from "@iconify/react"; import { Button, Card, CardBody, CardFooter, CardHeader, Chip, Divider, Link, Spacer, Tab, Tabs, Tooltip, cn, } from "@heroui/react"; import { FrequencyEnum } from "./types"; import { frequencies, tiers, features } from "./data"; export interface PricingComparisonProps { /** 标题 */ title?: string; /** 副标题 */ subtitle?: string; /** 描述 */ description?: string; /** 底部链接文本 */ footerText?: string; /** 底部链接文案 */ footerLinkText?: string; /** 底部链接地址 */ footerLinkHref?: string; } export default function PricingComparison({ title = "定价", subtitle = "对比方案与功能", description = "发现理想的方案，每周只需不到 ¥15 起。", footerText = "您是开源开发者？", footerLinkText = "获取折扣", footerLinkHref = "#", }: PricingComparisonProps) { const [selectedFrequency, setSelectedFrequency] = React.useState(frequencies[0]); const onFrequencyChange = (selectedKey: React.Key) => { const frequencyIndex = frequencies.findIndex((f) => f.key === selectedKey); setSelectedFrequency(frequencies[frequencyIndex]); }; return (

{/* 头部 */}

{title}

{subtitle}

{description}

{/* 付费周期切换 */}

按年付费

省 25%

} /> {/* 移动端卡片布局 (xs ~ lg) */}

{tiers.map((tier) => (

{tier.title}

{tier.description}

{typeof tier.price === "string" ? tier.price : tier.price[selectedFrequency.key]} {typeof tier.price !== "string" ? ( {tier.priceSuffix ? `/${tier.priceSuffix}/${selectedFrequency.priceSuffix}` : `/${selectedFrequency.priceSuffix}`} ) : null}

{feature}

))}

{/* 桌面端表格布局 (> lg) */}

{Array.from({ length: tiers.length + 1 }).map((_, index) => ( ))} ))} {tiers.map((tier) => ( ))} {features.map((feat, featIndex) => ( {feat.items.map((tierFeature) => ( {tiers.map((tier) => ( ))} ))} ))}

套餐对比
{feat.title}
{tiers.map((tier) => (	{tier.title}
价格	{typeof tier.price === "string" ? tier.price : tier.price[selectedFrequency.key]} {tier.priceSuffix ? `/${tier.priceSuffix}/${selectedFrequency.priceSuffix}` : `/${selectedFrequency.priceSuffix}`}
{tierFeature.helpText ? ( {tierFeature.title} ) : ( tierFeature.title )}	{typeof tierFeature.tiers[tier.key] === "string" ? ( {tierFeature.tiers[tier.key]} ) : ( <> {tierFeature.tiers[tier.key] === true ? ( ) : ( )} {tierFeature.tiers[tier.key] === true ? "已包含" : "未包含"} 在 {tier.title} )}

{/* 底部链接 */}

{footerText} {footerLinkText}

); } // 导出类型和数据 export { FrequencyEnum, TiersEnum } from "./types"; export type { Frequency, Tier, PricingFeatureItem, PricingFeatures } from "./types"; export { frequencies, tiers, features } from "./data";

heroui价格对比组件

代码文件

演示图片

heroui价格对比组件

代码文件

演示图片