🛒 货架模块
产品货架展示组件，用于展示产品列表和筛选功能。
组件列表 (1个)
| # | 组件 | 中文名称 | Figma 链接 | 状态 |
|---|---|---|---|---|
| 1 | ShelfDisplay | 常规货架1 | 查看设计稿 | 已经发布 |
使用场景
货架模块适用于：
- ✅ 产品列表页
- ✅ 品类页
- ✅ 搜索结果页
- ✅ 促销活动页
功能特点
- 产品卡片 - 标准化的产品信息展示
- 筛选排序 - 支持多维度筛选和排序
- 分页加载 - 支持分页或无限滚动
- 响应式布局 - 自动适配不同屏幕尺寸
导入方式
import {
CollectionShelves,
ShelfDisplay
} from '@anker-in/headless-ui/biz'
export default function ProductListPage() {
return (
<>
<CollectionShelves data={shelvesData} />
{/* 或 */}
<ShelfDisplay data={displayData} />
</>
)
}最佳实践
- ✅ 提供清晰的产品图片
- ✅ 展示关键信息（价格、评分、促销）
- ✅ 支持快速加入购物车
- ✅ 优化加载性能（图片懒加载）
Last updated on