评论 (ScrollComment)

概览

ScrollComment 组件以自动滚动的轮播格式展示用户评论或反馈，非常适合用于展示客户好评。

实时预览

客户评价

---

使用方法

示例代码

import { ScrollComment } from '@goenhance/cms-ui';

export default function TestimonialsPage() {
  return (
    <ScrollComment
      title="客户评价"
      list={[
        {
          description: "产品非常出色！完全改变了我的生活。",
          avatar: "/avatars/user1.jpg",
          author: "张三",
          job: "软件工程师"
        },
        {
          description: "今年最值得的购买。强烈推荐！",
          avatar: "/avatars/user2.jpg",
          author: "李四",
          job: "设计师"
        },
        {
          description: "品质出众，客户服务也非常棒。",
          avatar: "/avatars/user3.jpg",
          author: "王五",
          job: "产品经理"
        }
      ]}
    />
  );
}

属性说明 (Props)

ScrollCommentProps

属性名	类型	描述
title	string	展示在评论上方的章节标题
list	CommentItem[]	要展示的评论项数组

CommentItem

属性名	类型	描述
description	string	评论文本或反馈内容
avatar	string	用户头像的 URL
author	string	用户姓名
job	string	职位或角色

特性

• 自动滚动轮播: 平滑地滚动展示评论。
• 响应式布局: 适配不同的屏幕尺寸。
• 视觉吸引力: 包含头像和作者信息。
• 可定制速度: 通过 props 控制滚动速度。

样式定制

该组件使用 Tailwind CSS 类，支持通过 CSS 变量进行主题定制：

• text-blocks-heading: 标题颜色
• text-blocks-primary: 主题强调色

代码示例

const customerReviews = [
  {
    description: "这是我用过的最好的内容管理工具，既直观又强大！",
    avatar: "https://example.com/avatars/sarah.jpg",
    author: "Sarah Williams",
    job: "内容经理"
  },
  {
    description: "每周节省了我好几个小时的时间。拖拽界面太棒了。",
    avatar: "https://example.com/avatars/david.jpg",
    author: "David Chen",
    job: "营销总监"
  }
];

<ScrollComment
  title="客户评价"
  list={customerReviews}
/>