Evaluate (评价Reviews)

用于展示用户评论、产品评价和星级评分，支持轮播和响应式设计。【✅ 已发布】

场景:

视口:

加载中...

当前视口: 1920px × 600px场景: 用户评价展示

打开链接

功能特性

✅ 星级评分 - 动态渲染 1-5 星评分，直观展示用户满意度
✅ 响应式轮播 - 不同屏幕尺寸自动调整显示卡片数量
✅ 形状切换 - 支持方形（square）和圆形（round）两种卡片样式
✅ 悬停提示 - 鼠标悬停卡片时显示完整评论内容的 Tooltip
✅ 头像展示 - 支持显示评论者头像，增强可信度
✅ 产品关联 - 每个评论关联一个产品，点击可跳转
✅ 曝光埋点 - 内置曝光追踪功能，自动上报用户浏览行为
✅ 点击追踪 - 自动追踪用户点击行为和位置信息
✅ 主题支持 - 支持亮色（light）和暗色（dark）两种主题
✅ 可选标题 - 支持显示组件标题

Props 参数

EvaluateProps

Prop	类型	默认值	必需	说明
`data`	`EvaluateData`	-	✅	评价数据配置对象
`className`	`string`	`''`	-	自定义根容器类名
`event`	`EvaluateEvent`	-	-	事件回调对象
`key`	`string`	-	-	React key 属性

EvaluateData 配置

参数	类型	默认值	必需	说明
`products`	`EvaluateItem[]`	-	✅	评价列表数据
`title`	`string`	-	-	组件标题
`shape`	`'round' \| 'square'`	`'square'`	-	卡片形状
`theme`	`'light' \| 'dark'`	`'light'`	-	主题模式
`containerProps`	`ContainerProps`	-	-	容器属性配置

EvaluateItem 配置

参数	类型	必需	说明
`rating`	`number`	✅	评分星级（1-5）
`title`	`string`	✅	评论者名称
`subTitle`	`string`	✅	产品副标题
`description`	`string`	✅	评论内容
`img`	`Img`	✅	产品图片
`avatar`	`{ url: string }`	-	评论者头像
`link`	`string`	-	点击跳转链接

EvaluateEvent 配置

参数	类型	说明
`primaryButton`	`(data: EvaluateItem, index: number) => void`	点击评价卡片的回调函数

使用示例

最简示例


import { Evaluate } from '@anker-in/headless-ui/biz'
 
<Evaluate
  data={{
    products: [
      {
        rating: 5,
        title: 'John Doe',
        subTitle: 'Fast Charging Power Bank',
        description: 'This power bank is amazing! Charges my phone super fast.',
        avatar: {
          url: 'https://images.unsplash.com/photo-...',
        },
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Power Bank',
        },
      },
      {
        rating: 4,
        title: 'Jane Smith',
        subTitle: 'Compact and Powerful',
        description: 'Great product, highly recommend it to everyone!',
        avatar: {
          url: 'https://images.unsplash.com/photo-...',
        },
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Power Bank',
        },
      },
    ],
  }}
/>

基础评价展示


<Evaluate
  data={{
    products: [
      {
        rating: 5,
        title: 'John Doe',
        subTitle: 'Fast Charging Power Bank',
        description: 'This power bank is amazing! Charges my phone super fast and lasts for days.',
        avatar: {
          url: 'https://images.unsplash.com/photo-...',
        },
        img: {
          url: 'https://images.unsplash.com/photo-...',
          alt: 'Power Bank Product',
        },
        link: '/products/power-bank-123',
      },
      // 更多评价...
    ],
  }}
/>

带标题的圆角卡片


<Evaluate
  data={{
    title: 'Customer Reviews',
    shape: 'round',
    products: reviews,
  }}
  className="py-12"
/>

带点击事件


<Evaluate
  data={{
    title: 'What Our Customers Say',
    products: reviews,
  }}
  event={{
    primaryButton: (data, index) => {
      console.log('Clicked review:', data.title, 'at position:', index)
      // 自定义导航逻辑
      router.push(data.link)
    },
  }}
/>

暗色主题


<Evaluate
  data={{
    title: 'User Testimonials',
    theme: 'dark',
    shape: 'round',
    products: reviews,
  }}
  className="bg-gray-900 py-16"
/>

响应式行为

断点说明

组件在不同设备上自动调整显示的卡片数量：

断点	屏幕宽度	显示卡片数	间距	轮播模式
Mobile Small	< 374px	1 个	12px	固定轮播
Mobile	374px - 768px	1.2 个	12px	固定轮播
Tablet	768px - 1024px	2.3 个	16px	固定轮播
Laptop	1024px - 1440px	3 个	16px	固定轮播
Desktop	≥ 1440px	4 个	16px	固定轮播

卡片尺寸

不同断点下的卡片尺寸会自动调整：

Mobile: 296×360px
Tablet: 296×360px
Laptop: 288×360px
Desktop: 316×384px
LG Desktop: 404×480px

轮播特性

固定模式：禁用自由滑动，确保卡片对齐
自动分页：支持左右箭头切换页面
悬浮显示：Tooltip 跟随鼠标显示完整评论

设计规范

卡片样式

方形卡片 (shape="square")：适合正式、商务场景
圆形卡片 (shape="round")：适合友好、亲和场景

主题选择

亮色主题 (theme="light")：用于浅色背景页面，默认白色卡片
暗色主题 (theme="dark")：用于深色背景页面

评分星级

1-5 星：整数评分，自动渲染对应数量的星星图标
颜色：橙色 (#F77234)，醒目易识别
尺寸：16×16px

头像要求

推荐尺寸：80×80px（会自动缩放）
格式：JPG/PNG
形状：圆形裁剪
备选方案：如无头像，显示评论者名称首字母

图片要求

产品图片：

推荐尺寸：200×200px
格式：PNG/JPG/WebP
背景：透明或纯色
显示区域：48×48px（移动端）/ 64×64px（桌面端）

文案要求

评论者名称：建议不超过20个字符
产品副标题：建议不超过40个字符，最多显示2行
评论内容：建议100-200个字符，卡片内最多显示5行，完整内容通过 Tooltip 展示

无障碍性

图片替代文本

✅ 所有图片包含 alt 属性（通过 Img 类型强制）
✅ 产品图片应提供描述性的 alt 文本
✅ 头像可使用简洁的 alt 文本或评论者名称

语义化标签

✅ 评论者名称使用 <h4> 标签，保持文档结构清晰
✅ 使用语义化 HTML 元素
✅ 星级评分具有明确的视觉意义

键盘导航

✅ 支持键盘导航（Tab 键访问）
✅ 轮播控件可通过键盘操作
✅ 所有可点击元素可通过 Enter 键触发

✅ Tooltip 提供完整信息，支持鼠标和键盘触发
✅ 链接包含 data-headless-* 属性用于追踪
✅ Tooltip 内容在鼠标移出后自动消失

性能优化

✅ Ref 支持 - 使用 React.forwardRef() 支持 ref 转发
✅ Ref 优化 - 使用 useImperativeHandle() 优化 ref 暴露
✅ 图片懒加载 - 通过 Picture 组件实现图片懒加载
✅ 曝光埋点 - 使用 IntersectionObserver 实现高性能曝光埋点
✅ Portal 渲染 - Tooltip 使用 createPortal 渲染到 body，避免层级问题
✅ 动态计算 - 评分星级动态计算，避免冗余渲染

常见问题

评分必须是整数吗？

是的，组件会自动对评分进行 Math.floor() 取整处理，只显示整数星级（1-5星）。如果传入 4.7，将显示 4 颗星。

当鼠标悬停在评论内容区域时，会显示完整的 description 内容。Tooltip 会跟随鼠标移动，在鼠标右下方偏移 16px 处显示。

如何禁用评论跳转链接？

如果 link 属性为空或不提供，点击卡片时不会触发页面跳转，但仍会触发 event.primaryButton 回调（如果提供）。

评论内容超出怎么办？

卡片内的评论内容会自动截断为 5 行（line-clamp-5），超出部分通过鼠标悬停 Tooltip 查看完整内容。

可以自定义卡片背景颜色吗？

可以。默认背景为 bg-container-secondary-1（浅灰色），悬停时变为白色。你可以通过 className 传入自定义样式覆盖。

移动端为什么显示 1.2 个卡片？

显示部分第二张卡片（0.2）可以提示用户”还有更多内容可以滑动查看”，这是常见的 UX 设计模式。

评价数量有建议吗？

建议：

移动端：3-6 个评价
PC端：4-8 个评价

过多的评价会降低用户关注度，建议筛选最具代表性的评论展示。