MarqueeReview (评价Reviews-滚动展示)

import type { Media, Theme } from '../../types/props.js'
 
/**
 * 评论项数据结构
 */
export interface ReviewItem {
  /** 评论者名称 */
  name: string
  /** 评论者头像 (Media 对象: { url, alt, thumbnailURL? }) */
  avatar: Media
  /** 评论内容 */
  comment: string
  /** 评分星级 (1-5星) */
  rating?: number
}
 
/**
 * 轮播评论数据结构
 */
export interface MarqueeReviewData {
  /** 主标题 */
  title: string
  /** 副标题/描述 */
  subtitle: string
  /** 评论列表 */
  items: ReviewItem[]
  /** 主题模式: 'light' 或 'dark' */
  theme?: Theme
}
 
/**
 * MarqueeReview 组件 Props
 */
export interface MarqueeReviewProps {
  /** 评论数据 */
  data: MarqueeReviewData
  /** 自定义类名 */
  className?: string
}

import { MarqueeReview } from '@anker-in/headless-ui/biz'
 
const reviews = [
  {
    name: 'Sarah Johnson',
    avatar: {
      url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&q=80',
      alt: 'Sarah Johnson avatar',
    },
    comment: 'Absolutely love this product! It has completely transformed my daily routine.',
    rating: 5,
  },
  {
    name: 'Michael Chen',
    avatar: {
      url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&q=80',
      alt: 'Michael Chen avatar',
    },
    comment: 'Excellent quality and great value for money. Highly recommend!',
    rating: 5,
  },
  // ... 更多评论 (建议至少 6-9 条)
]
 
export default function CustomerReviews() {
  return (
    <MarqueeReview
      data={{
        title: 'Customer Reviews',
        subtitle: 'See what our customers are saying',
        items: reviews,
      }}
    />
  )
}

// 即使只有 3 条评论,组件也会自动复制填充到 9 条
const earlyReviews = [
  {
    name: 'Early Adopter 1',
    avatar: {
      url: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150',
      alt: 'User 1',
    },
    comment: 'Love it! Great product for early adopters.',
    rating: 5,
  },
  {
    name: 'Early Adopter 2',
    avatar: {
      url: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150',
      alt: 'User 2',
    },
    comment: 'Impressive features and solid build quality.',
    rating: 5,
  },
  {
    name: 'Early Adopter 3',
    avatar: {
      url: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150',
      alt: 'User 3',
    },
    comment: 'Highly recommend to anyone looking for a reliable solution!',
    rating: 4,
  },
]
 
<MarqueeReview
  data={{
    title: 'Early Reviews',
    subtitle: 'What our first customers are saying',
    items: earlyReviews, // 组件内部会自动复制填充
  }}
/>

const mixedRatings = [
  {
    name: 'John Doe',
    avatar: {
      url: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=150',
      alt: 'John Doe',
    },
    comment: 'Perfect product! Could not be happier with this purchase.',
    rating: 5, // 5 颗星全部填充
  },
  {
    name: 'Jane Smith',
    avatar: {
      url: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150',
      alt: 'Jane Smith',
    },
    comment: 'Very good quality. Minor improvements could be made to the packaging.',
    rating: 4, // 4 颗星填充,1 颗未填充
  },
  {
    name: 'Bob Wilson',
    avatar: {
      url: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150',
      alt: 'Bob Wilson',
    },
    comment: 'Good product for the price. Does exactly what it promises.',
    rating: 3, // 3 颗星填充,2 颗未填充
  },
]
 
<MarqueeReview
  data={{
    title: 'Customer Feedback',
    subtitle: 'Real reviews from real customers',
    items: mixedRatings,
  }}
/>

<MarqueeReview
  data={{
    title: 'User Testimonials',
    subtitle: 'Trusted by thousands worldwide',
    items: reviews,
    theme: 'dark', // 启用深色主题
  }}
  className="bg-gray-900"
/>

const detailedReviews = [
  {
    name: 'Alexandra Mitchell',
    avatar: {
      url: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=150',
      alt: 'Alexandra Mitchell',
    },
    comment:
      'I have been using this product for several months now and I must say it has completely exceeded all of my expectations. The quality is outstanding, the attention to detail is remarkable, and every aspect has been carefully thought through. The customer service team was also incredibly helpful when I had questions about the features. I would absolutely recommend this to anyone looking for a high-quality solution.', // 长文本会自动截断为 5 行
    rating: 5,
  },
]
 
<MarqueeReview
  data={{
    title: 'Detailed Reviews',
    subtitle: 'In-depth feedback from our customers',
    items: detailedReviews,
  }}
/>

<MarqueeReview
  data={{
    title: 'Featured Reviews',
    subtitle: 'Hand-picked customer favorites',
    items: reviews,
  }}
  className="border-t-4 border-orange-500 py-16 bg-gradient-to-b from-blue-50 to-white"
/>

const productReviews = [
  {
    name: 'Emily Thompson',
    avatar: {
      url: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150',
      alt: 'Emily Thompson',
    },
    comment: 'This wireless charger is fantastic! Fast charging and sleek design.',
    rating: 5,
  },
  // ... 更多产品评价
]
 
<MarqueeReview
  data={{
    title: 'What Our Customers Say',
    subtitle: 'Over 10,000+ 5-star reviews',
    items: productReviews,
    theme: 'light',
  }}
/>

const serviceReviews = [
  {
    name: 'David Chen',
    avatar: {
      url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150',
      alt: 'David Chen',
    },
    comment:
      'Outstanding customer service! The team went above and beyond to help me with my project.',
    rating: 5,
  },
  // ... 更多服务评价
]
 
<MarqueeReview
  data={{
    title: 'Client Testimonials',
    subtitle: 'Why clients choose our services',
    items: serviceReviews,
  }}
/>

<section className="py-20 bg-gray-50">
  <div className="container mx-auto px-4">
    <MarqueeReview
      data={{
        title: 'Loved by Users Worldwide',
        subtitle: 'Join thousands of satisfied customers',
        items: globalReviews,
      }}
    />
  </div>
</section>

<div className="grid laptop:grid-cols-2 gap-8">
  {/* 左侧产品信息 */}
  <div className="product-details">
    <h2>Product Information</h2>
    {/* ... 产品详情 */}
  </div>
 
  {/* 右侧评价轮播 */}
  <div className="reviews-section">
    <MarqueeReview
      data={{
        title: 'Customer Reviews',
        subtitle: 'Real feedback from real users',
        items: reviews,
      }}
    />
  </div>
</div>

/**
 * 步骤 1: 自动补齐逻辑
 * 如果评论少于 9 条,通过复制现有评论填充到 9 条
 * 时间复杂度: O(n), n 为 items.length
 */
const filledItems = items.length < 9
  ? [...items, ...items.slice(0, 9 - items.length)]
  : items
 
// 示例:
// 输入: [A, B, C] (3 条)
// 输出: [A, B, C, A, B, C, A, B, C] (9 条)
 
/**
 * 步骤 2: 分组逻辑
 * 将 9 条评论分为 3 组,每组 3 条
 * 使用 lodash 的 _chunk 函数
 */
import _chunk from 'lodash/chunk'
 
const chunkItems = _chunk(filledItems, 3) // [[A,B,C], [D,E,F], [G,H,I]]
  .slice(0, 3) // 只取前 3 组
 
/**
 * 步骤 3: 双倍复制
 * 每组内容复制一遍,实现无缝循环
 * 当滚动到一半时,会无缝切换到开头
 */
const scrollableColumns = chunkItems.map(group => [...group, ...group])
 
// 结果:
// [
//   [A, B, C, A, B, C], // 列 0
//   [D, E, F, D, E, F], // 列 1
//   [G, H, I, G, H, I], // 列 2
// ]

{chunkItems.map((items, index) => (
  <div
    key={index}
    className={cn('animate-marquee-scroll', {
      'top-10': index === 0 || index === 2,      // 列 0 和 2 带 40px 偏移
      'hidden desktop:flex': index === 1,        // 列 1 仅桌面 (≥1440px) 显示
      'hidden tablet:flex': index === 2,         // 列 2 平板及以上 (≥768px) 显示
    })}
  >
    {items.map((item, innerIndex) => (
      <Card key={innerIndex} item={item} />
    ))}
  </div>
))}

{/* 主标题 (title) */}
<Heading
  as="h1"
  size={4}
  html={title}
  className="laptop:text-center w-full text-left"
/>
// Mobile: 左对齐
// Laptop+: 居中对齐
 
{/* 副标题 (subtitle) */}
<Text
  size={2}
  html={subtitle}
  className="
    tablet:mt-[16px] tablet:text-[14px]
    laptop:text-center laptop:text-[14px]
    desktop:mt-[8px] desktop:text-[16px]
    lg-desktop:text-[18px]
    mt-[4px] text-[14px]
  "
/>

/**
 * 自动补齐算法
 * @param items - 原始评论列表
 * @returns 填充后的评论列表 (至少 9 条)
 * @complexity 时间复杂度 O(n), 空间复杂度 O(1)
 */
function fillReviews(items: ReviewItem[]): ReviewItem[] {
  if (items.length >= 9) {
    return items // 已有 9 条或更多,无需填充
  }
 
  const needed = 9 - items.length // 需要填充的数量
  const filled = [...items, ...items.slice(0, needed)]
 
  return filled
}
 
// 示例演示:
// 输入 3 条: [A, B, C]
// 需要填充: 9 - 3 = 6 条
// slice(0, 6): [A, B, C, A, B, C]
// 结果: [A, B, C, A, B, C, A, B, C]
 
// 输入 5 条: [A, B, C, D, E]
// 需要填充: 9 - 5 = 4 条
// slice(0, 4): [A, B, C, D]
// 结果: [A, B, C, D, E, A, B, C, D]

import _chunk from 'lodash/chunk'
 
/**
 * 列分组算法
 * @param items - 填充后的评论列表 (9 条)
 * @returns 3 组评论,每组 3 条
 * @complexity 时间复杂度 O(n), 空间复杂度 O(n)
 */
function groupByColumns(items: ReviewItem[]): ReviewItem[][] {
  return _chunk(items, 3).slice(0, 3)
}
 
// lodash chunk 实现原理:
function chunk<T>(array: T[], size: number): T[][] {
  const result: T[][] = []
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size))
  }
  return result
}
 
// 示例:
// 输入: [A, B, C, D, E, F, G, H, I]
// chunk(items, 3): [[A,B,C], [D,E,F], [G,H,I]]
// slice(0, 3): [[A,B,C], [D,E,F], [G,H,I]] (取前 3 组)

/**
 * 双倍复制算法
 * @param columnGroups - 3 组评论
 * @returns 每组评论双倍复制后的结果
 * @complexity 时间复杂度 O(n), 空间复杂度 O(n)
 */
function duplicateForScroll(
  columnGroups: ReviewItem[][]
): ReviewItem[][] {
  return columnGroups.map(group => [...group, ...group])
}
 
// 示例:
// 输入: [[A,B,C], [D,E,F], [G,H,I]]
// 输出: [
//   [A, B, C, A, B, C], // 列 0
//   [D, E, F, D, E, F], // 列 1
//   [G, H, I, G, H, I], // 列 2
// ]
 
// 滚动原理:
// 1. CSS 动画将列从 translateY(0) 移动到 translateY(-50%)
// 2. 当滚动到 -50% 时,第二组 [A,B,C] 正好出现在视口中
// 3. 动画无缝循环,用户感觉是无限滚动

/**
 * 响应式列显示逻辑
 * @param columnIndex - 列索引 (0, 1, 2)
 * @returns CSS 类名字符串
 */
function getColumnClasses(columnIndex: number): string {
  const classes = [
    'animate-marquee-scroll', // 滚动动画
    'relative',
    'flex',
    'h-fit',
    'flex-1',
    'flex-col',
    'gap-4',
  ]
 
  // 列 0: 始终显示,带偏移
  if (columnIndex === 0) {
    classes.push('top-10') // 40px 垂直偏移
  }
 
  // 列 1: 仅桌面 (≥1440px) 显示,无偏移
  if (columnIndex === 1) {
    classes.push('hidden', 'desktop:flex')
  }
 
  // 列 2: 平板及以上 (≥768px) 显示,带偏移
  if (columnIndex === 2) {
    classes.push('hidden', 'tablet:flex', 'top-10')
  }
 
  return classes.join(' ')
}
 
// 列显示矩阵:
// ┌────────┬────────┬────────┬─────────┐
// │ 列     │ Mobile │ Tablet │ Desktop │
// ├────────┼────────┼────────┼─────────┤
// │ 列 0   │   ✅   │   ✅   │   ✅    │
// │ 列 1   │   ❌   │   ❌   │   ✅    │
// │ 列 2   │   ❌   │   ✅   │   ✅    │
// └────────┴────────┴────────┴─────────┘

/**
 * 星级评分渲染算法
 * @param rating - 评分值 (1-5)
 * @returns 5 个星星图标 (JSX 元素)
 */
function renderStars(rating: number = 5): JSX.Element[] {
  const stars: JSX.Element[] = []
  const clampedRating = Math.max(1, Math.min(5, rating)) // 限制在 1-5 范围
 
  for (let i = 1; i <= 5; i++) {
    const isFilled = i <= clampedRating
    stars.push(
      isFilled ? (
        <StarIcon key={i} /> // 填充星 (#F77234 橙色)
      ) : (
        <UnStarIcon key={i} /> // 未填充星 (#75787F 灰色)
      )
    )
  }
 
  return stars
}
 
// 示例:
// rating = 5: ★★★★★ (5 个填充星)
// rating = 4: ★★★★☆ (4 个填充星 + 1 个未填充星)
// rating = 3: ★★★☆☆ (3 个填充星 + 2 个未填充星)
// rating = 1: ★☆☆☆☆ (1 个填充星 + 4 个未填充星)

/* Tailwind CSS 自定义工具类: mask-fade-vertical */
.mask-fade-vertical {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,          /* 顶部完全透明 */
    black 10%,               /* 10% 处完全不透明 */
    black 90%,               /* 90% 处完全不透明 */
    transparent 100%         /* 底部完全透明 */
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}
 
/**
 * 遮罩计算原理:
 * - 0-10%: 从透明渐变到不透明 (顶部淡入)
 * - 10-90%: 完全不透明 (中间区域正常显示)
 * - 90-100%: 从不透明渐变到透明 (底部淡出)
 *
 * 视觉效果:
 * ┌──────────────────┐
 * │ ░░░░░░░░░░░░░░░░ │ ← 顶部淡入 (0-10%)
 * │ ████████████████ │
 * │ ████████████████ │ ← 中间正常 (10-90%)
 * │ ████████████████ │
 * │ ░░░░░░░░░░░░░░░░ │ ← 底部淡出 (90-100%)
 * └──────────────────┘
 */

/* Keyframes 定义 */
@keyframes marquee-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* 移动到一半位置 */
  }
}
 
/* 动画应用 */
.animate-marquee-scroll {
  animation: marquee-scroll 30s linear infinite;
  will-change: transform; /* GPU 加速提示 */
}
 
/**
 * 无限滚动原理:
 *
 * 1. 初始状态 (0%):
 *    ┌──────────┐ ← 视口顶部
 *    │ [A B C]  │ ← 第一组评论 (可见)
 *    │ [A B C]  │ ← 第二组评论 (可见)
 *    └──────────┘ ← 视口底部
 *
 * 2. 中间状态 (50%):
 *    ┌──────────┐ ← 视口顶部
 *    │ [A B C]  │ ← 第二组评论 (可见)
 *    └──────────┘ ← 视口底部
 *    原第一组 [A B C] 已移出视口顶部
 *
 * 3. 结束状态 (100% = 0%):
 *    由于 transform: translateY(-50%),
 *    第二组 [A B C] 的位置与初始第一组完全相同!
 *    视觉上实现了无缝循环。
 *
 * 关键点:
 * - 双倍复制保证有足够内容滚动
 * - translateY(-50%) 正好移动一组内容的高度
 * - linear infinite 确保匀速循环
 * - 30s 持续时间可通过 CSS 自定义调整
 */
 
/**
 * 性能优化:
 * 1. 使用 transform 而非 top/bottom (GPU 加速)
 * 2. will-change: transform 提前告知浏览器
 * 3. linear timing 避免额外的缓动计算
 */

{/* Avatar 组件自动包含 ARIA 支持 */}
<Avatar size="small">
  <AvatarImage
    src={item.avatar?.url}
    alt={item.avatar?.alt || ''} // 必需的 alt 文本
  />
  <AvatarFallback>
    {(item.name ?? '').slice(0, 2).toUpperCase()}
  </AvatarFallback>
</Avatar>

{/* 为根容器添加语义化角色 */}
<section
  role="region"
  aria-label={title}
  aria-describedby="review-subtitle"
  className={cn('marquee-review-container', className)}
>
  <Heading as="h1" size={4} html={title} />
  <Text
    id="review-subtitle"
    size={2}
    html={subtitle}
  />
 
  {/* 为滚动容器添加 aria-live */}
  <div
    className="mask-fade-vertical ..."
    aria-live="polite"    // 通知屏幕阅读器内容变化
    aria-atomic="false"   // 仅读取变化部分
  >
    {/* 评论列 */}
  </div>
</section>

const Card = ({ item, onClick }: CardProps & { onClick?: () => void }) => {
  return (
    <button
      onClick={onClick}
      className="rounded-box bg-container-primary ... cursor-pointer hover:shadow-lg transition-shadow focus:outline-none focus:ring-2 focus:ring-primary"
      aria-label={`Review by ${item.name}, ${item.rating} stars`}
    >
      {/* 卡片内容 */}
    </button>
  )
}

{/* 为星级评分添加可访问性标签 */}
<div
  className="flex items-center gap-2"
  role="img"
  aria-label={`Rating: ${item.rating} out of 5 stars`}
>
  {renderStars(item.rating)}
</div>

import React, { memo } from 'react'
 
/**
 * 卡片组件优化
 * 使用 memo 包裹,仅在 props 变化时重渲染
 */
const Card = memo(({ item }: CardProps) => {
  return (
    <div className="rounded-box bg-container-primary ...">
      <div className="flex items-center gap-2">
        <Avatar size="small">
          <AvatarImage
            src={item.avatar?.url}
            alt={item.avatar?.alt || ''}
          />
          <AvatarFallback>
            {(item.name ?? '').slice(0, 2).toUpperCase()}
          </AvatarFallback>
        </Avatar>
 
        <div>
          <Text size={4} html={item.name} />
          <div className="flex items-center gap-2">
            {renderStars(item.rating)}
          </div>
        </div>
      </div>
 
      <Heading
        as="h6"
        size={2}
        html={item.comment}
        className="line-clamp-5 min-h-[120px] text-wrap"
      />
    </div>
  )
})
 
Card.displayName = 'ReviewCard'
 
/**
 * 性能提升:
 * - 父组件重渲染时,Card 组件不会重渲染 (除非 item prop 变化)
 * - 减少 Virtual DOM diff 计算
 * - 特别适用于列表渲染场景
 */

<AvatarImage
  src={item.avatar?.url}
  alt={item.avatar?.alt || ''}
  loading="lazy"      // 原生懒加载
  decoding="async"    // 异步解码,不阻塞渲染
/>
 
/**
 * 懒加载原理:
 * 1. 浏览器仅加载视口内及附近的图片
 * 2. 用户滚动时才加载即将进入视口的图片
 * 3. 减少初始页面加载时间和带宽消耗
 *
 * 浏览器支持:
 * - Chrome 76+
 * - Firefox 75+
 * - Safari 15.4+
 * - Edge 79+
 */

/* ✅ 推荐: 使用 transform (GPU 加速) */
@keyframes marquee-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
 
.animate-marquee-scroll {
  animation: marquee-scroll 30s linear infinite;
  will-change: transform; /* 提前告知浏览器优化 */
}
 
/* ❌ 避免: 使用 top/bottom (CPU 计算,会触发 reflow) */
@keyframes marquee-scroll-bad {
  0% {
    top: 0;
  }
  100% {
    top: -50%;
  }
}
 
/**
 * 性能对比:
 *
 * transform (GPU 加速):
 * - 在 GPU 的 Composite Layer 上执行
 * - 不触发 reflow 和 repaint
 * - 60fps 流畅动画
 *
 * top/bottom (CPU 计算):
 * - 触发 layout 计算 (reflow)
 * - 触发 paint 绘制 (repaint)
 * - 可能掉帧到 30fps 或更低
 */

import { useMemo } from 'react'
 
function MarqueeReview({ data }: MarqueeReviewProps) {
  /**
   * 缓存分组结果
   * 仅在 data.items 变化时重新计算
   */
  const chunkItems = useMemo(() => {
    const { items } = data
 
    // 步骤 1: 自动补齐
    const filledItems = items.length < 9
      ? [...items, ...items.slice(0, 9 - items.length)]
      : items
 
    // 步骤 2: 分组
    const chunked = _chunk(filledItems, 3).slice(0, 3)
 
    // 步骤 3: 双倍复制
    return chunked.map(group => [...group, ...group])
  }, [data.items])
 
  return (
    <div>
      {chunkItems.map((items, index) => (
        <div key={index}>
          {items.map((item, innerIndex) => (
            <Card key={innerIndex} item={item} />
          ))}
        </div>
      ))}
    </div>
  )
}
 
/**
 * 性能提升:
 * - 避免每次渲染都执行数组操作 (slice, chunk, map)
 * - 当 data.items 未变化时,直接使用缓存结果
 * - 减少内存分配和 GC 压力
 *
 * 时间复杂度:
 * - 首次计算: O(n), n 为 items.length
 * - 后续渲染: O(1) (使用缓存)
 */

/**
 * 服务端筛选高质量评论
 * 避免在客户端传递过大的数组
 */
 
// ❌ 避免: 传递所有 500 条评论
const allReviews = await fetchReviews() // 500 条
<MarqueeReview data={{ items: allReviews }} />
 
// ✅ 推荐: 服务端筛选高质量评论
const topReviews = await fetchReviews({
  filter: 'top_rated',
  limit: 18, // 仅获取 18 条高评分评论
})
<MarqueeReview data={{ items: topReviews }} />
 
/**
 * 优化效果:
 * - 减少网络传输数据量 (500 条 → 18 条)
 * - 减少客户端内存占用
 * - 加快组件初始化速度
 * - 展示精选内容,提升用户体验
 */

// 内部自动补齐逻辑
const filledItems = items.length < 9
  ? [...items, ...items.slice(0, 9 - items.length)]
  : items
 
// 示例:
// 输入: [A, B, C] (3 条)
// 输出: [A, B, C, A, B, C, A, B, C] (9 条)

/* 在你的全局样式文件或 tailwind.config.js 中 */
@keyframes marquee-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
 
.animate-marquee-scroll {
  animation: marquee-scroll 30s linear infinite;
  /* ↑ 调整这个值控制速度 */
}
 
/* 速度对照表:
 * - 20s: 快速滚动
 * - 30s: 正常速度 (默认)
 * - 40s: 慢速滚动
 * - 60s: 超慢速度
 */

className={cn('animate-marquee-scroll', {
  'top-10': index === 0 || index === 2, // 列 0 和 2 有 40px 偏移
})}
 
/**
 * 视觉效果:
 * ┌─────────────────┐
 * │ 列0 (偏移40px)   │ ← 起始位置较低
 * │ 列1 (无偏移)     │ ← 正常位置
 * │ 列2 (偏移40px)   │ ← 起始位置较低
 * └─────────────────┘
 */

// 位置: packages/ui/src/biz-components/MarqueeReview/index.tsx
 
const StarIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path
      d="M8 0L10.3 5.5L16 6.2L12 10.1L13 16L8 13.3L3 16L4 10.1L0 6.2L5.7 5.5L8 0Z"
      fill="#F77234" // ← 修改为你的品牌色
    />
  </svg>
)
 
const unStarIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path
      d="M8 0L10.3 5.5L16 6.2L12 10.1L13 16L8 13.3L3 16L4 10.1L0 6.2L5.7 5.5L8 0Z"
      fill="#75787F" // ← 修改未填充星的灰色
    />
  </svg>
)

<Heading
  as="h6"
  size={2}
  html={item.comment}
  className="line-clamp-5 min-h-[120px] text-wrap"
/>
 
/**
 * line-clamp-5 效果:
 * - 最多显示 5 行文本
 * - 超出部分自动截断并添加省略号 (...)
 * - 保持布局整洁统一
 */

// 当前默认: 移动端仅显示列 0
'hidden tablet:flex': index === 2, // 列 2 从平板 (≥768px) 开始显示
 
// 修改为: 移动端显示 2 列
'': index === 2, // 移除 hidden,列 2 始终显示
 
/**
 * 修改后效果:
 * - Mobile: 显示列 0 和列 2 (2 列)
 * - Tablet: 显示列 0 和列 2 (2 列)
 * - Desktop: 显示列 0, 1, 2 (3 列)
 */

const Card = ({ item, onClick }: CardProps & { onClick?: () => void }) => {
  return (
    <button
      onClick={onClick}
      className="rounded-box bg-container-primary ... cursor-pointer hover:shadow-lg transition-shadow"
      aria-label={`View review by ${item.name}`}
    >
      {/* 原有内容 */}
    </button>
  )
}
 
// 使用示例:
<Card
  item={item}
  onClick={() => {
    router.push(`/reviews/${item.id}`)
  }}
/>

<div
  key={index}
  className={cn(
    'relative flex h-fit flex-1 flex-col gap-4',
    // 移除: 'animate-marquee-scroll'
    {
      'top-10': index === 0 || index === 2,
      'hidden desktop:flex': index === 1,
      'hidden tablet:flex': index === 2,
    }
  )}
>

<div>
  <MarqueeReview data={data} />
 
  <div className="mt-8 text-center">
    <Button
      onClick={() => router.push('/reviews')}
      variant="outline"
    >
      View All {totalReviews} Reviews →
    </Button>
  </div>
</div>

// 从数据库获取真实用户数据
const realUserReviews = await db.reviews.findMany({
  where: { rating: { gte: 4 } },
  include: { user: true },
  take: 9,
})
 
const reviewsData = realUserReviews.map(review => ({
  name: review.user.name,
  avatar: {
    url: review.user.avatarUrl, // 真实头像 URL
    alt: `${review.user.name} avatar`,
  },
  comment: review.content,
  rating: review.rating,
}))
 
<MarqueeReview
  data={{
    title: 'Real Customer Reviews',
    subtitle: 'Verified purchases',
    items: reviewsData,
  }}
/>
 
/**
 * 注意事项:
 * 1. 确保已获得用户授权展示头像和评论
 * 2. 遵守隐私政策和法律法规 (GDPR, CCPA 等)
 * 3. 提供用户删除评论和头像的选项
 * 4. 优化图片大小,建议压缩到 20KB 以下
 */