Skip to Content
@anker-in/headless-ui 2.0 is released 🎉
业务组件业务组件

Block 组件

Block 组件是构建复杂用户界面的业务组件，它们通常由多个原子组件组合而成，提供完整的页面模块功能。

本组件库包含 50 个 Block 组件，按照使用场景划分为 11 个分类，帮助你快速找到所需的组件。

🗂️ 组件分类

🌟 通用组件 (16个)

适用于所有页面类型的通用组件。

组件 (Component)组件名称Figma链接状态
HeroBanner首屏横幅查看设计稿 ✅ 已发布
AnchorNavigation锚点导航查看设计稿 ✅ 已发布
BrandCardLink品牌权益-带链接查看设计稿 ✅ 已发布
BrandEquity品牌权益查看设计稿 ✅ 已发布
CategoryCategory查看设计稿 ✅ 已发布
Evaluate评价Reviews查看设计稿 ✅ 已发布
Faq问答FAQ查看设计稿 ✅ 已发布
GraphicAttractionBlock图文吸引模块查看设计稿 ✅ 已发布
Marquee跑马灯查看设计稿 ✅ 已发布
SecondaryBanner次级横幅查看设计稿 ✅ 已发布
Slogan标语查看设计稿 ✅ 已发布
Spacer间距查看设计稿 ✅ 已发布
Specs对比表单查看设计稿 ✅ 已发布
TabsTabs1查看设计稿 ✅ 已发布
Title标题Headline查看设计稿 ✅ 已发布
WhyChoose品牌亮点模块查看设计稿 ✅ 已发布

📐 基础图文模块 (5个)

基础的图文展示模块。

组件 (Component)组件名称Figma链接状态
CreativeModule图文叠加4查看设计稿 ✅ 已发布
FeatureCards图文叠加4-特性卡片查看设计稿 ✅ 已发布
Graphic图文叠加3查看设计稿 ✅ 已发布
GraphicOverlay图文叠加2查看设计稿 ✅ 已发布
MultiLayoutGraphicBlock图文叠加1查看设计稿 ✅ 已发布

🆕 新品页 (5个)

新品发布页面专用组件。

组件 (Component)组件名称Figma链接状态
ImageWithText图文分栏1查看设计稿 ✅ 已发布
KspKSP查看设计稿 ✅ 已发布
MarqueeReview评价Reviews-滚动展示查看设计稿 ✅ 已发布
ProductHero产品Hero查看设计稿 ✅ 已发布
TabsWithMediaTab媒体组件查看设计稿 ✅ 已发布

🛒 货架模块 (2个)

产品货架展示组件。

组件 (Component)组件名称Figma链接状态
CollectionShelves筛选货架查看设计稿 🔄 开发完成
ShelfDisplay常规货架1查看设计稿 ✅ 已发布

🎬 多媒体模块 (3个)

视频和多媒体播放组件。

组件 (Component)组件名称Figma链接状态
MediaPlayerBase视频播放器模块1查看设计稿 ✅ 已发布
MediaPlayerMulti视频播放器_图文分栏查看设计稿 ✅ 已发布
MediaPlayerSticky视频播放器模块1-滚屏动画查看设计稿 ✅ 已发布

✨ 创意图文模块 (4个)

创意互动展示组件。

组件 (Component)组件名称Figma链接状态
AccordionCards百叶窗查看设计稿 ✅ 已发布
MediaSceneSwitcher场景切换器查看设计稿 ✅ 已发布
ProductCompare产品对比查看设计稿 ✅ 已发布
ThreeDCarousel轮播查看设计稿 ✅ 已发布

🎉 活动 (3个)

营销活动页面组件。

组件 (Component)组件名称Figma链接状态
EventSchedule活动日程查看设计稿 🔄 开发中
PromotionalBar推广栏查看设计稿 ✅ 已发布
WheelLottery大转盘抽奖查看设计稿 🔄 开发中

📋 Listing (8个)

产品详情页 A+ 内容组件。

组件 (Component)组件名称Figma链接状态
AplusDescAplus 图文结合模块-资源位查看设计稿 ✅ 已发布
DownLoadAplus下载组件查看设计稿 ✅ 已发布
FeaturesAplus图文混排模块-图文叠加1查看设计稿 ✅ 已发布
FootChargerAplus底部充电器组件查看设计稿 ✅ 已发布
GiftBoxAplus礼盒模块查看设计稿 ✅ 已发布
GraphicMoreAplus图文展示模块-ksp查看设计稿 ✅ 已发布
ProductNav产品导航查看设计稿 ✅ 已发布
SelectStoreAplus选择门店模块查看设计稿 ✅ 已发布

🧭 导航 (1个)

导航和搜索组件。

组件 (Component)组件名称Figma链接状态
SearchPage搜索页面查看设计稿 ✅ 已发布

🏠 首页 (1个)

首页专用组件。

组件 (Component)组件名称Figma链接状态
MemberEquity会员权益查看设计稿 ✅ 已发布

🔍 品类筛选 (2个)

产品筛选和集合页组件。

组件 (Component)组件名称Figma链接状态
CollectionBannerCollection Banner查看设计稿 🔄 开发完成
TextMarqueeText Marquee查看设计稿 ✅ 已发布

📦 使用方式

所有 Block 组件都可以通过 @anker-in/headless-ui/biz 导入：

import {
  HeroBanner,
  FeatureCards,
  ProductHero,
  Faq
} from '@anker-in/headless-ui/biz'
 
export default function MyPage() {
  return (
    <div>
      <HeroBanner data={heroBannerData} />
      <FeatureCards data={featuresData} />
      <ProductHero data={productHeroData} />
      <Faq data={faqData} />
    </div>
  )
}

📖 组件文档

每个组件都包含：

  • 属性说明 - 详细的 Props API 文档
  • 使用示例 - 实际代码示例
  • 预览演示 - 在 1920px 固定宽度下的组件预览
  • 源码查看 - 完整的组件源代码
  • 设计稿 - Figma 设计稿（如有）
  • Storybook - 在 Storybook 中查看更多变体和交互

🎨 设计规范

所有 Block 组件遵循统一的设计规范：

  • ✅ 支持响应式布局（tablet / laptop / desktop / lg-desktop）
  • ✅ 使用 Design Token（颜色、间距、字体）
  • ✅ 支持多品牌主题（Anker / Eufy / Soundcore）
  • ✅ 遵循无障碍性标准（WCAG）
  • ✅ TypeScript 类型安全

🚀 快速开始

  1. 浏览分类 - 根据使用场景选择对应分类
  2. 查看组件 - 点击组件名称查看详细文档
  3. 复制代码 - 在文档页面复制代码示例
  4. 调整数据 - 根据业务需求调整组件数据
  5. 预览效果 - 在项目中预览组件效果

组件总数: 50 最后更新: 2026-01-30 数据来源: BLOCKS_INVENTORY.md 

Last updated on
概述