BrandCardLink (品牌权益-带链接)

import type { Img } from '@anker-in/headless-ui'
 
interface BrandCardLinkData {
  /** 卡片列表 */
  items: BrandCardLinkItem[]
  /** 卡片形状: round(圆角) | square(方形) */
  itemShape?: 'round' | 'square'
}
 
interface BrandCardLinkItem {
  /** 卡片图标 */
  icon?: Img
  /** 卡片标题 */
  title: string
  /** 卡片描述 */
  description: string
  /** 链接地址 */
  link: string
  /** 链接按钮文本 */
  linkText: string
  /** 图标类型(未使用) */
  type?: 'icon' | 'avatar'
  /** 头像列表(未使用) */
  avatarList?: Array<{ avatar: Img }>
}
 
interface Img {
  /** 图片 URL */
  url: string
  /** 替代文本 */
  alt: string
}

import { BrandCardLink } from '@anker-in/headless-ui/biz'
import scenarios from './scenarios.json'
 
export default function BasicExample() {
  const data = {
    items: [
      {
        icon: {
          url: 'https://cdn.example.com/warranty.svg',
          alt: 'Warranty',
        },
        title: '24-Month Warranty',
        description: 'Comprehensive Protection',
        link: '/warranty',
        linkText: 'Learn More',
      },
      {
        icon: {
          url: 'https://cdn.example.com/shipping.svg',
          alt: 'Free Shipping',
        },
        title: 'Free Shipping',
        description: 'On All Orders',
        link: '/shipping',
        linkText: 'View Policy',
      },
      {
        icon: {
          url: 'https://cdn.example.com/support.svg',
          alt: '24/7 Support',
        },
        title: '24/7 Customer Support',
        description: 'Always Here to Help',
        link: '/support',
        linkText: 'Contact Us',
      },
      {
        icon: {
          url: 'https://cdn.example.com/secure.svg',
          alt: 'Secure Payment',
        },
        title: 'Secure Payment',
        description: 'SSL Encrypted',
        link: '/security',
        linkText: 'Learn More',
      },
    ],
  }
 
  return <BrandCardLink data={data} />
}

<BrandCardLink
  data={{
    items: [
      {
        icon: {
          url: 'https://cdn.example.com/fast-charge.svg',
          alt: 'Fast Charging',
        },
        title: 'Fast Charging',
        description: 'Get 50% Charge in 30 Minutes',
        link: '/features/fast-charging',
        linkText: 'Discover',
      },
      {
        icon: {
          url: 'https://cdn.example.com/battery.svg',
          alt: 'Long Battery',
        },
        title: 'Long Battery Life',
        description: 'Up to 48 Hours of Use',
        link: '/features/battery',
        linkText: 'Discover',
      },
    ],
    itemShape: 'round',  // 圆角卡片
  }}
/>

<BrandCardLink
  data={{
    items: [
      {
        icon: {
          url: 'https://cdn.example.com/eco.svg',
          alt: 'Eco Friendly',
        },
        title: 'Eco-Friendly Materials',
        description: '100% Recyclable Packaging',
        link: '/sustainability',
        linkText: 'Read More',
      },
      {
        icon: {
          url: 'https://cdn.example.com/award.svg',
          alt: 'Award Winning',
        },
        title: 'Award-Winning Design',
        description: 'CES Innovation Award 2025',
        link: '/awards',
        linkText: 'Read More',
      },
    ],
    itemShape: 'square',  // 方形卡片
  }}
/>

<BrandCardLink
  data={{
    items: [
      { icon: {...}, title: 'Feature 1', description: 'Desc 1', link: '/f1', linkText: 'Learn' },
      { icon: {...}, title: 'Feature 2', description: 'Desc 2', link: '/f2', linkText: 'Learn' },
      { icon: {...}, title: 'Feature 3', description: 'Desc 3', link: '/f3', linkText: 'Learn' },
      { icon: {...}, title: 'Feature 4', description: 'Desc 4', link: '/f4', linkText: 'Learn' },
      { icon: {...}, title: 'Feature 5', description: 'Desc 5', link: '/f5', linkText: 'Learn' },
      { icon: {...}, title: 'Feature 6', description: 'Desc 6', link: '/f6', linkText: 'Learn' },
      { icon: {...}, title: 'Feature 7', description: 'Desc 7', link: '/f7', linkText: 'Learn' },
      { icon: {...}, title: 'Feature 8', description: 'Desc 8', link: '/f8', linkText: 'Learn' },
    ],
    itemShape: 'round',
  }}
/>

<BrandCardLink
  data={{
    items: [...],
    itemShape: 'round',
  }}
  className="[&amp;_.brand-equity-item]:bg-gray-100"
/>

标题: "This is a Very Long Title That Will Be Truncated After Two Lines..."

// 标题使用 <h3> 标签
<h3 className="...">{item.title}</h3>
 
// 链接使用语义化 Link 组件
<Link href={item.link}>
  {item.linkText}
  <svg aria-hidden="true">...</svg>
</Link>

// 使用 React.forwardRef 和 useImperativeHandle 优化 ref 传递
const BrandCardLink = React.forwardRef((props, ref) => {
  const innerRef = useRef<HTMLDivElement>(null)
 
  useImperativeHandle(ref, () => innerRef.current!)
 
  // ...
})

// 使用 useMediaQuery 避免不必要的移动端组件渲染
const isMobile = useMediaQuery('(max-width: 767px)')
 
// 桌面端: 简单 Grid 布局,无 Swiper 依赖
// 移动端: 按需加载 Swiper 组件

// useExposure Hook 自动防止重复曝光
useExposure(innerRef, {
  componentType: 'copy',
  componentName: 'store_benefits',
})

// 修改 chunkArray 的第二个参数
const itemsArray = isMobile ? chunkArray(items, 6) : items  // 改为每页 6 个

.swiper-pagination-bullet {
  background: #000;
  opacity: 0.5;
  width: 8px;
  height: 8px;
}
 
.swiper-pagination-bullet-active {
  background: var(--brand-primary);
  opacity: 1;
  width: 24px;
  border-radius: 4px;
}

// 移除 h-[160px]、laptop:h-[192px] 等类
// 保留 min-h-[160px] 设置最小高度避免过矮

interface BrandCardLinkItem {
  // 现有字段...
  onClick?: () => void  // 新增
}
 
// 组件内部
<Link href={item.link} onClick={item.onClick}>
  {item.linkText}
</Link>

.brand-equity-item svg {
  display: none;
}

<BrandCardLink
  className="[&amp;_.brand-equity-item_svg]:hidden"
  data={{...}}
/>

<BrandCardLink
  data={{...}}
  className="[&amp;_.brand-equity-item]:bg-gray-100"  // 覆盖背景色
/>

/**
 * 将数组按指定大小分组
 * @param arr - 原始数组
 * @param size - 每组大小
 */
const chunkArray = <T,>(arr: T[], size: number): T[][] => {
  const chunks: T[][] = []
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size))
  }
  return chunks
}
 
// 使用示例
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const grouped = chunkArray(items, 4)
// 结果: [[1,2,3,4], [5,6,7,8], [9]]

const swiperConfig = {
  modules: [FreeMode, Mousewheel, Pagination],
  freeMode: true,                    // 自由模式,滑动更流畅无吸附
  mousewheel: {
    forceToAxis: true                // 强制单方向滚动,防止斜向滑动
  },
  pagination: {
    clickable: true,                 // 分页器点(dots)可点击切换
    el: paginationRef.current        // 自定义分页器 DOM 位置
  },
  breakpoints: {
    0: {
      spaceBetween: 12               // 移动端卡片间距 12px
    }
  }
}

// round(圆角)
itemShape === 'round'
// 应用类: rounded-box
// 实际圆角取决于 Tailwind 配置中的 border-radius.box 值
 
// square(方形)
itemShape === 'square'
// 应用类: rounded-none
// 完全移除圆角,呈现直角矩形
 
// 默认(未设置)
itemShape === undefined
// 不应用任何形状类,使用组件默认样式

<div
  className={cn(
    'brand-equity-item',
    {
      'rounded-box': itemShape === 'round',
      'rounded-none': itemShape === 'square',
    }
  )}
>
  ...
</div>