ProductCard
基础产品卡片
最基本的产品信息展示卡片
<ProductCard
name="示例产品"
image="/images/products/example-product.jpg"
description="这是一款功能强大的示例产品，为用户提供优质体验。"
productUrl="https://example.com/product"
/>带App Store链接的产品卡片
同时提供产品官网和App Store下载链接
带GitHub链接的产品卡片
对于开源产品，可以同时提供官网、GitHub和App Store链接
<ProductCard
name="开源项目示例"
image={getExampleImage({ width: 300, height: 200 })}
description="一个优秀的开源项目，欢迎参与贡献。"
productUrl="https://example.com/opensource"
githubUrl="https://github.com/example/repo"
appStoreUrl="https://apps.apple.com/app/opensource"
/>自定义按钮文本
通过 primaryButtonText、secondaryButtonText 和 githubButtonText 属性自定义按钮文本
<ProductCard
name="自定义按钮示例"
image={getExampleImage({ width: 300, height: 200 })}
description="此产品支持自定义按钮文本，提供更灵活的展示方式。"
productUrl="https://example.com/custom"
appStoreUrl="https://apps.apple.com/app/custom"
githubUrl="https://github.com/example/custom"
primaryButtonText="查看详情"
secondaryButtonText="立即下载"
githubButtonText="查看源码"
/>垂直按钮布局
通过 buttonLayout="column" 属性设置按钮垂直排列
<ProductCard
name="垂直按钮示例"
image={getExampleImage({ width: 300, height: 200 })}
description="使用垂直按钮布局，适合需要强调各个操作的场景。"
productUrl="https://example.com/vertical"
appStoreUrl="https://apps.apple.com/app/vertical"
githubUrl="https://github.com/example/vertical"
buttonLayout="column"
/>等高卡片布局
在网格或列表中展示多个产品卡片时，可能会因为内容长度不同导致卡片高度不一致，影响整体美观。
通过设置 equalHeight 属性，可以确保所有卡片高度一致，实现整齐的布局效果。
<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
<ProductCard
equalHeight
size="md"
name="产品一"
image={getExampleImage({ width: 300, height: 200 })}
description="这是一段很短的产品描述。"
productUrl="https://example.com/product1"
/>
<ProductCard
equalHeight
size="md"
name="产品二"
image={getExampleImage({ width: 300, height: 200 })}
description="这是一段较长的产品描述，包含更多详细信息，可能会导致卡片高度增加。使用equalHeight属性可以确保所有卡片高度一致。"
productUrl="https://example.com/product2"
appStoreUrl="https://apps.apple.com/app/product2"
/>
</div>控制描述文本行数
通过 descriptionLines 属性可以控制描述文本的最大显示行数，超出部分会被截断并显示省略号。
这有助于保持布局的一致性，防止过长的描述文本破坏卡片设计。
<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
<ProductCard
size="md"
name="默认行数限制"
image={getExampleImage({ width: 300, height: 200 })}
description="默认情况下，描述文本会根据卡片尺寸自动限制行数。例如中等尺寸(md)卡片默认显示3行文本。这段文本很长，但只会显示前几行，其余部分会被截断。"
productUrl="https://example.com/product3"
/>
<ProductCard
size="md"
descriptionLines={2}
name="自定义行数限制"
image={getExampleImage({ width: 300, height: 200 })}
description="通过设置descriptionLines=2，可以将描述文本限制为最多显示2行。这段文本很长，但只会显示2行，其余部分会被截断。"
productUrl="https://example.com/product4"
/>
</div>完整的网格布局示例
结合 equalHeight 和 descriptionLines 属性，可以创建一个整齐、一致的产品网格布局。
<div class="cosy:grid cosy:grid-cols-3 cosy:gap-4">
<ProductCard
equalHeight
size="sm"
descriptionLines={2}
name="产品A"
image={getExampleImage({ width: 300, height: 200 })}
description="简短的产品描述文本。"
productUrl="https://example.com/productA"
/>
<ProductCard
equalHeight
size="sm"
descriptionLines={2}
name="产品B"
image={getExampleImage({ width: 300, height: 200 })}
description="中等长度的产品描述文本，提供一些基本信息。"
productUrl="https://example.com/productB"
appStoreUrl="https://apps.apple.com/app/productB"
/>
<ProductCard
equalHeight
size="sm"
descriptionLines={2}
name="产品C"
image={getExampleImage({ width: 300, height: 200 })}
description="较长的产品描述文本，包含更多详细信息，但会被限制为2行显示。"
productUrl="https://example.com/productC"
githubUrl="https://github.com/example/productC"
/>
</div>不同尺寸的产品卡片
ProductCard 组件提供了五种预设尺寸：xs、sm、md、lg 和 xl，以适应不同的场景需求。
超小尺寸 (xs)
适合密集布局或侧边栏展示
<ProductCard
size="xs"
name="超小尺寸产品"
image={getExampleImage({ width: 150, height: 100 })}
description="小巧精致的产品卡片，节省空间。"
productUrl="https://example.com/xs"
/>小尺寸 (sm)
适合列表页面或网格布局
<ProductCard
size="sm"
name="小尺寸产品"
image={getExampleImage({ width: 150, height: 100 })}
description="紧凑型产品卡片，适合在列表中展示。"
productUrl="https://example.com/sm"
/>中等尺寸 (md) - 默认
适合一般产品展示页面
<ProductCard
size="md"
name="中等尺寸产品"
image="/images/products/example-md.jpg"
description="标准产品卡片，平衡信息展示和空间占用。"
productUrl="https://example.com/md"
/>大尺寸 (lg)
适合突出显示重要产品
<ProductCard
size="lg"
name="大尺寸产品"
image={getExampleImage({ width: 380, height: 253 })}
description="大尺寸产品卡片，提供更多细节和视觉吸引力，适合突出展示重要产品。"
productUrl="https://example.com/lg"
/>超大尺寸 (xl)
适合特色产品或首页展示