ProductHero (产品Hero)

import type { Media, Theme } from '../../types/props'
 
// ProductHero 数据接口
export interface ProductHeroData {
  /** 主标题 */
  title: string
  /** 副标题 */
  subtitle: string
  /** CTA 按钮文本 */
  ctaText: string
  /** CTA 按钮链接 */
  ctaLink: string
  /** 桌面端图片 */
  poster: Media
  /** 移动端图片 */
  mobPoster: Media
  /** 3D 模型源（可选，暂未使用） */
  modelSrc?: string
  /** 主题，默认 light */
  theme?: Theme
}
 
// ProductHero Props 接口
export interface ProductHeroProps {
  /** 产品英雄数据对象 */
  data: ProductHeroData
  /** 自定义类名 */
  className?: string
}
 
// Media 类型 (图片资源)
export interface Media {
  /** 图片 URL */
  url: string
  /** 图片 alt 文本 */
  alt: string
  /** 缩略图 URL (可选) */
  thumbnailURL?: string
  /** 媒体 MIME 类型 */
  mimeType?: string
  /** 图片宽度 */
  width?: number
  /** 图片高度 */
  height?: number
}
 
// Theme 类型
export type Theme = 'light' | 'dark'

import { ProductHero } from '@anker-in/headless-ui/biz'
 
export default function NewProductPage() {
  return (
    <ProductHero
      data={{
        title: 'Anker 737 Power Bank',
        subtitle: '24,000mAh powerhouse with 140W fast charging',
        ctaText: 'Shop Now',
        ctaLink: '/products/anker-737',
        poster: {
          url: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=1648&h=1280&q=85&fit=crop',
          alt: 'Anker 737 Power Bank Desktop View',
          mimeType: 'image/jpeg',
          width: 1648,
          height: 1280,
        },
        mobPoster: {
          url: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=716&h=720&q=85&fit=crop',
          alt: 'Anker 737 Power Bank Mobile View',
          mimeType: 'image/jpeg',
          width: 716,
          height: 720,
        },
      }}
    />
  )
}

<ProductHero
  data={{
    title: 'Buy your advanced cleaning housekeeper with revolutionary technology now',
    subtitle: 'Experience the future of home cleaning with AI-powered navigation',
    ctaText: 'Explore Features',
    ctaLink: '/features',
    poster: {
      url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1648&h=1280&q=85&fit=crop',
      alt: 'Robot Vacuum Cleaner Desktop View',
    },
    mobPoster: {
      url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=716&h=720&q=85&fit=crop',
      alt: 'Robot Vacuum Cleaner Mobile View',
    },
  }}
/>

<ProductHero
  data={{
    title: 'Soundcore Liberty 4',
    subtitle: 'Immersive Hi-Res audio experience',
    ctaText: 'Learn More',
    ctaLink: '/learn',
    poster: {
      url: 'https://images.unsplash.com/photo-1590658165737-15a047b7a6d8?w=1648&h=1280&q=85&fit=crop',
      alt: 'Soundcore Liberty 4 Earbuds Desktop View',
    },
    mobPoster: {
      url: 'https://images.unsplash.com/photo-1590658165737-15a047b7a6d8?w=716&h=720&q=85&fit=crop',
      alt: 'Soundcore Liberty 4 Earbuds Mobile View',
    },
  }}
/>

<ProductHero
  data={{
    title: 'Anker SOLIX F2000',
    subtitle: 'Portable Solar Generator for Off-Grid Adventures',
    ctaText: 'Pre-order with $200 off',
    ctaLink: '/pre-order/solix-f2000',
    poster: {
      url: 'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=1648&h=1280&q=85&fit=crop',
      alt: 'Anker SOLIX F2000 Solar Generator Desktop View',
    },
    mobPoster: {
      url: 'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=716&h=720&q=85&fit=crop',
      alt: 'Anker SOLIX F2000 Solar Generator Mobile View',
    },
  }}
/>

<ProductHero
  data={{
    title: 'Eufy Security Camera S330',
    subtitle: '24/7 home protection with AI detection and 2K resolution',
    ctaText: 'View Details',
    ctaLink: '/security/s330',
    poster: {
      url: 'https://images.unsplash.com/photo-1557324232-b8917d3c3dcb?w=1648&h=1280&q=85&fit=crop',
      alt: 'Eufy Security Camera Desktop View',
    },
    mobPoster: {
      url: 'https://images.unsplash.com/photo-1557324232-b8917d3c3dcb?w=716&h=720&q=85&fit=crop',
      alt: 'Eufy Security Camera Mobile View',
    },
    theme: 'dark',
  }}
  className="bg-gray-900"
/>

<ProductHero
  data={{
    title: 'PowerCore 20000mAh',
    subtitle: 'Ultra-high capacity portable charger',
    ctaText: 'Add to Cart',
    ctaLink: '#buy',
    poster: {
      url: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=1648&h=1280&q=85&fit=crop',
      alt: 'PowerCore 20000 Desktop View',
    },
    mobPoster: {
      url: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=716&h=720&q=85&fit=crop',
      alt: 'PowerCore 20000 Mobile View',
    },
  }}
  className="custom-hero"
/>

/* 自定义标题渐变色 */
.custom-hero .product-hero__title {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
/* 自定义副标题透明度 */
.custom-hero .product-hero__subtitle {
  line-height: 1.8;
  opacity: 0.9;
}
 
/* 自定义 CTA 按钮悬停效果 */
.custom-hero .product-hero__cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
 
/* 自定义图片悬停缩放 */
.custom-hero .product-hero__image:hover {
  transform: scale(1.02);
  transition: transform 0.4s ease;
}
 
/* 自定义内容区域背景 */
.custom-hero .product-hero__content {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 24px;
  border-radius: 16px;
}

<ProductHero
  data={{
    title: 'Anker MagGo Charger',
    subtitle: 'Magnetic wireless charging made simple',
    ctaText: 'Shop Now',
    ctaLink: '/products/maggo',
    poster: {
      url: 'https://images.unsplash.com/photo-1591290619762-0a8b8e6e4e8e?w=1648&h=1280&q=85&fit=crop',
      alt: 'Anker MagGo Charger Desktop View',
      thumbnailURL:
        'https://images.unsplash.com/photo-1591290619762-0a8b8e6e4e8e?w=100&h=80&q=50&fit=crop',
      mimeType: 'image/webp',
      width: 1648,
      height: 1280,
    },
    mobPoster: {
      url: 'https://images.unsplash.com/photo-1591290619762-0a8b8e6e4e8e?w=716&h=720&q=85&fit=crop',
      alt: 'Anker MagGo Charger Mobile View',
      thumbnailURL:
        'https://images.unsplash.com/photo-1591290619762-0a8b8e6e4e8e?w=100&h=100&q=50&fit=crop',
      mimeType: 'image/webp',
      width: 716,
      height: 720,
    },
  }}
/>

<ProductHero
  data={{
    title: 'Anker Prime 250W Charger',
    subtitle: 'Six ports, unlimited power',
    ctaText: 'Buy Now',
    ctaLink: '/products/prime-250w',
    poster: {
      url: 'https://images.unsplash.com/photo-1625948515291-69613efd103f?w=1648&h=1280&q=85&fit=crop',
      alt: 'Anker Prime 250W Charger Desktop View',
      mimeType: 'image/jpeg',
    },
    mobPoster: {
      url: 'https://images.unsplash.com/photo-1625948515291-69613efd103f?w=716&h=720&q=85&fit=crop',
      alt: 'Anker Prime 250W Charger Mobile View',
      mimeType: 'image/jpeg',
    },
  }}
/>

// Picture 组件的 source 语法
source={`${poster?.url}, ${mobPoster?.url} 768`}
 
// 解释:
// - Desktop (≥768px): 显示 poster.url (1648x1280)
// - Mobile (<768px): 显示 mobPoster.url (716x720)
// 浏览器根据屏幕宽度自动选择最优图片

import { ProductHero } from '@anker-in/headless-ui/biz'
import type { Metadata } from 'next'
 
// SEO 元数据
export const metadata: Metadata = {
  title: 'Anker SOLIX C800 Plus - Portable Power Station',
  description:
    "The World's First Portable Power Station with 2400W Max Output and GaNPrime™ Technology",
  openGraph: {
    images: [
      {
        url: 'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=1200&h=630&q=80&fit=crop',
        width: 1200,
        height: 630,
        alt: 'Anker SOLIX C800 Plus',
      },
    ],
  },
}
 
export default function NewProductLaunchPage() {
  return (
    <main>
      {/* 产品英雄区 */}
      <ProductHero
        data={{
          title: 'Anker SOLIX C800 Plus',
          subtitle:
            "The World's First Portable Power Station with 2400W Max Output and GaNPrime™ Technology",
          ctaText: 'Pre-order Now',
          ctaLink: '/pre-order/solix-c800-plus',
          poster: {
            url: 'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=1648&h=1280&q=85&fit=crop',
            alt: 'Anker SOLIX C800 Plus Portable Power Station Desktop View',
            thumbnailURL:
              'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=100&h=80&q=50&fit=crop',
            mimeType: 'image/webp',
            width: 1648,
            height: 1280,
          },
          mobPoster: {
            url: 'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=716&h=720&q=85&fit=crop',
            alt: 'Anker SOLIX C800 Plus Portable Power Station Mobile View',
            thumbnailURL:
              'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=100&h=100&q=50&fit=crop',
            mimeType: 'image/webp',
            width: 716,
            height: 720,
          },
          theme: 'light',
        }}
      />
 
      {/* 其他产品信息模块 */}
      {/* ... */}
    </main>
  )
}

import { ProductHero } from '@anker-in/headless-ui/biz'
import { FeatureCards } from '@anker-in/headless-ui/biz'
import { ReviewCarousel } from '@anker-in/headless-ui/biz'
 
export default function ProductLandingPage() {
  return (
    <div className="space-y-16">
      {/* 产品英雄区 */}
      <ProductHero
        data={{
          title: 'Eufy Clean X9 Pro',
          subtitle: 'Auto-Empty Station with 60 Days Capacity',
          ctaText: 'Shop Now',
          ctaLink: '/products/clean-x9-pro',
          poster: {
            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1648&h=1280&q=85&fit=crop',
            alt: 'Eufy Clean X9 Pro Desktop View',
          },
          mobPoster: {
            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=716&h=720&q=85&fit=crop',
            alt: 'Eufy Clean X9 Pro Mobile View',
          },
        }}
      />
 
      {/* 功能特性卡片 */}
      <FeatureCards
        data={{
          title: 'Key Features',
          cards: [
            // ...
          ],
        }}
      />
 
      {/* 用户评价轮播 */}
      <ReviewCarousel
        data={{
          reviews: [
            // ...
          ],
        }}
      />
    </div>
  )
}

// 内容区 (左侧/上方)
<div
  className={cn(
    'product-hero__content',
    'flex flex-col justify-center gap-[16px]',
    'tablet:basis-[42%]', // 平板: 42%
    'laptop:basis-[36%]' // 桌面: 36%
  )}
>
  {/* 文本内容 */}
</div>
 
// 图片区 (右侧/下方)
<Picture
  className={cn(
    'product-hero__image',
    'tablet:basis-[58%]', // 平板: 58%
    'laptop:basis-[64%]' // 桌面: 64%
  )}
  source={`${poster?.url}, ${mobPoster?.url} 768`}
/>

<section
  className={cn(
    'product-hero',
    'flex flex-col tablet:flex-row', // 响应式方向
    'gap-[32px] tablet:gap-[16px] lg-desktop:gap-[64px]', // 响应式间距
    'items-center' // 垂直居中对齐
  )}
>
  {/* 内容区 */}
  <div className="product-hero__content tablet:basis-[42%] laptop:basis-[36%]">{/* ... */}</div>
 
  {/* 图片区 */}
  <Picture className="product-hero__image tablet:basis-[58%] laptop:basis-[64%]" />
</section>

// 桌面端: 使用 Heading 组件 (<h4> 标签)
<Heading
  as={'h4'}
  size={2}
  html={subtitle}
  className={cn(
    'product-hero__subtitle',
    'product-hero__subtitle--desktop',
    'laptop:block hidden' // ≥1025px 显示, &lt;1025px 隐藏
  )}
/>
 
// 移动端: 使用 Text 组件 (<p> 标签)
<Text
  as={'p'}
  size={2}
  html={subtitle}
  className={cn(
    'product-hero__subtitle',
    'product-hero__subtitle--mobile',
    'laptop:hidden block' // &lt;1025px 显示, ≥1025px 隐藏
  )}
/>

<!-- 桌面端 (≥1025px) -->
<h3 class="product-hero__title">Anker SOLIX C800 Plus</h3>
<h4 class="product-hero__subtitle--desktop laptop:block hidden">
  The World's First Portable Power Station...
</h4>
<p class="product-hero__subtitle--mobile laptop:hidden block" style="display: none;">
  The World's First Portable Power Station...
</p>
 
<!-- 移动端 (&lt;1025px) -->
<h3 class="product-hero__title">Anker SOLIX C800 Plus</h3>
<h4 class="product-hero__subtitle--desktop laptop:block hidden" style="display: none;">
  The World's First Portable Power Station...
</h4>
<p class="product-hero__subtitle--mobile laptop:hidden block">
  The World's First Portable Power Station...
</p>

// 方案 1: 统一使用 <h4> (推荐 SEO)
<Heading as={'h4'} size={2} html={subtitle} className="product-hero__subtitle" />
 
// 方案 2: 统一使用 <p> (推荐简洁)
<Text as={'p'} size={2} html={subtitle} className="product-hero__subtitle" />

<Picture
  className="product-hero__image"
  source={`${poster?.url}, ${mobPoster?.url} 768`}
  alt={poster?.alt}
  aspectRatio={[
    { breakpoint: 768, width: 824, height: 640 }, // Desktop: 824:640 ≈ 1.29:1
    { width: 358, height: 360 }, // Mobile: 358:360 ≈ 1:1
  ]}
/>

// Picture 组件内部实现 (简化版)
function Picture({ source, alt, aspectRatio }) {
  const [desktopUrl, mobileConfig] = source.split(', ')
  const [mobileUrl, breakpoint] = mobileConfig.split(' ')
 
  return (
    <picture>
      {/* 移动端 (&lt;768px) */}
      <source media={`(max-width: ${breakpoint - 1}px)`} srcSet={mobileUrl} />
 
      {/* 桌面端 (≥768px) */}
      <source media={`(min-width: ${breakpoint}px)`} srcSet={desktopUrl} />
 
      {/* 兜底 */}
      <img src={desktopUrl} alt={alt} loading="lazy" decoding="async" />
    </picture>
  )
}

<picture class="product-hero__image">
  <!-- 移动端: &lt;768px 显示 mobPoster.url -->
  <source
    media="(max-width: 767px)"
    srcset="https://images.unsplash.com/.../photo.jpg?w=716&h=720&q=85&fit=crop"
  />
 
  <!-- 桌面端: ≥768px 显示 poster.url -->
  <source
    media="(min-width: 768px)"
    srcset="https://images.unsplash.com/.../photo.jpg?w=1648&h=1280&q=85&fit=crop"
  />
 
  <!-- 兜底图片 (浏览器不支持 <picture> 时) -->
  <img
    src="https://images.unsplash.com/.../photo.jpg?w=1648&h=1280&q=85&fit=crop"
    alt="Anker SOLIX C800 Plus Desktop View"
    loading="lazy"
    decoding="async"
  />
</picture>

aspectRatio={[
  { breakpoint: 768, width: 824, height: 640 }, // Desktop: 1.29:1
  { width: 358, height: 360 },                   // Mobile: 1:1
]}

// 高级用法: 3 个断点图片
source={`
  ${lgDesktopUrl},
  ${desktopUrl} 1440,
  ${tabletUrl} 1025,
  ${mobileUrl} 768
`}
// 解释:
// - ≥1440px: lgDesktopUrl
// - 1025-1439px: desktopUrl
// - 768-1024px: tabletUrl
// - <768px: mobileUrl

<section
  className={cn(
    'product-hero',
    data?.theme === 'dark' && 'aiui-dark' // 深色主题类
  )}
>
  {/* 组件内容 */}
</section>

/* 浅色主题 (默认) */
:root {
  --text-primary: #1e293b; /* 深色文本 */
  --text-secondary: #64748b; /* 次要文本 */
  --bg-primary: #ffffff; /* 白色背景 */
}
 
/* 深色主题 */
.aiui-dark {
  --text-primary: #f1f5f9; /* 浅色文本 */
  --text-secondary: #cbd5e1; /* 次要文本 */
  --bg-primary: #0f172a; /* 深色背景 */
}

// Heading 组件
<Heading
  className="text-[var(--text-primary)]" // 自动适配主题
  as={'h3'}
  size={4}
  html={title}
/>
 
// Text 组件
<Text
  className="text-[var(--text-secondary)]" // 自动适配主题
  as={'p'}
  size={2}
  html={subtitle}
/>

<!-- 浅色主题 -->
<section class="product-hero">
  <h3 style="color: #1e293b;">Anker SOLIX C800 Plus</h3>
  <p style="color: #64748b;">The World's First...</p>
</section>
 
<!-- 深色主题 -->
<section class="product-hero aiui-dark">
  <h3 style="color: #f1f5f9;">Anker SOLIX C800 Plus</h3>
  <p style="color: #cbd5e1;">The World's First...</p>
</section>

import { ProductHero } from '@anker-in/headless-ui/biz'
import { useState } from 'react'
 
export default function ThemeDemo() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light')
 
  return (
    <div>
      {/* 主题切换按钮 */}
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换主题: {theme}
      </button>
 
      {/* ProductHero 组件 */}
      <ProductHero
        data={{
          title: 'Anker Product',
          subtitle: 'Product Description',
          ctaText: 'Shop Now',
          ctaLink: '/shop',
          poster: { url: '...', alt: 'Product' },
          mobPoster: { url: '...', alt: 'Product Mobile' },
          theme: theme, // 动态主题
        }}
        className={theme === 'dark' ? 'bg-gray-900' : 'bg-white'}
      />
    </div>
  )
}

<ProductHero
  data={{
    // ...
    theme: 'dark',
  }}
  className="custom-dark-theme"
/>
 
{
  /* 自定义 CSS */
}
<style>{`
  .custom-dark-theme.aiui-dark {
    --text-primary: #fbbf24; /* 金色标题 */
    --text-secondary: #d1d5db; /* 灰色副标题 */
    --bg-primary: #1f2937; /* 深灰背景 */
  }
 
  .custom-dark-theme.aiui-dark .product-hero__cta-button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  }
`}</style>

<a href={ctaLink} className="product-hero__cta-link">
  <Button variant="quaternary" className="product-hero__cta-button">
    {ctaText}
  </Button>
</a>

// Button.tsx 中的 CVA 配置
const buttonVariants = cva('base-button-classes', {
  variants: {
    variant: {
      primary: 'bg-gray-900 text-white hover:bg-gray-800',
      secondary: 'bg-white text-gray-900 border border-gray-300',
      tertiary: 'bg-transparent text-gray-900 hover:bg-gray-100',
      quaternary: 'bg-brand-0 text-white hover:bg-brand-1', // ProductHero 使用
    },
  },
  defaultVariants: {
    variant: 'primary',
  },
})

.bg-brand-0 {
  background-color: var(--color-brand-0); /* 品牌主色 #00befa */
}
 
.hover\:bg-brand-1:hover {
  background-color: var(--color-brand-1); /* 品牌深色 #00a8e0 */
}
 
.text-white {
  color: #ffffff;
}

<Button
  variant="quaternary"
  className={cn(
    'product-hero__cta-button',
    'px-[24px] py-[12px]', // 移动端
    'laptop:px-[32px] laptop:py-[16px]' // 桌面端
  )}
>
  {ctaText}
</Button>

<!-- 移动端 -->
<a href="/products/solix-c800-plus" class="product-hero__cta-link">
  <button class="product-hero__cta-button bg-brand-0 text-white px-[24px] py-[12px]">
    Shop Now
  </button>
</a>
 
<!-- 桌面端 -->
<a href="/products/solix-c800-plus" class="product-hero__cta-link">
  <button
    class="product-hero__cta-button bg-brand-0 text-white laptop:px-[32px] laptop:py-[16px]"
  >
    Shop Now
  </button>
</a>

<ProductHero
  data={{
    // ...
    ctaText: 'Pre-order Now',
    ctaLink: '/pre-order',
  }}
  className="custom-cta"
/>
 
{
  /* 自定义 CSS */
}
<style>{`
  .custom-cta .product-hero__cta-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
  }
 
  .custom-cta .product-hero__cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
  }
`}</style>

import { useExposure } from '@/hooks/useExposure'
 
export default function ProductHero({ data, className }: ProductHeroProps) {
  const boxRef = useRef<HTMLElement>(null)
 
  // 曝光埋点
  useExposure(boxRef, {
    component: 'ProductHero',
    data: {
      title: data.title,
      ctaLink: data.ctaLink,
    },
  })
 
  return (
    <section ref={boxRef} className="product-hero">
      {/* 组件内容 */}
    </section>
  )
}

import { useEffect, useRef } from 'react'
 
export function useExposure(
  elementRef: React.RefObject<HTMLElement>,
  options: {
    component: string
    data?: Record<string, any>
    threshold?: number // 可见比例阈值 (0-1)
    once?: boolean // 是否只上报一次
  }
) {
  const reported = useRef(false)
 
  useEffect(() => {
    if (!elementRef.current) return
 
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // 元素进入视口
          if (options.once && reported.current) return // 已上报,跳过
 
          // 上报曝光事件
          reportExposure({
            component: options.component,
            timestamp: Date.now(),
            ...options.data,
          })
 
          reported.current = true // 标记已上报
 
          if (options.once) {
            observer.disconnect() // 只上报一次,断开观察
          }
        }
      },
      {
        threshold: options.threshold || 0.5, // 默认可见 50% 时触发
      }
    )
 
    observer.observe(elementRef.current)
 
    return () => observer.disconnect()
  }, [elementRef, options])
}
 
// 曝光上报函数
function reportExposure(data: Record<string, any>) {
  // 发送到分析平台 (Google Analytics, Mixpanel, 自建系统)
  console.log('[Exposure]', data)
 
  // 示例: 发送到 Google Analytics
  if (typeof gtag !== 'undefined') {
    gtag('event', 'component_exposure', {
      event_category: 'engagement',
      event_label: data.component,
      value: data.timestamp,
    })
  }
 
  // 示例: 发送到自建分析系统
  fetch('/api/analytics/exposure', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  })
}

用户滚动页面
       ↓
ProductHero 元素进入视口
       ↓
IntersectionObserver 触发回调
       ↓
检查可见比例 ≥ threshold (50%)
       ↓
调用 reportExposure() 上报数据
       ↓
标记 reported = true
       ↓
(once=true) 断开 observer

{
  "component": "ProductHero",
  "timestamp": 1737100800000,
  "title": "Anker SOLIX C800 Plus",
  "ctaLink": "/products/solix-c800-plus"
}

import { ProductHero } from '@anker-in/headless-ui/biz'
import { useExposure } from '@/hooks/useExposure'
import { useRef } from 'react'
 
export default function CustomProductHero() {
  const heroRef = useRef<HTMLDivElement>(null)
 
  // 自定义曝光追踪
  useExposure(heroRef, {
    component: 'CustomProductHero',
    data: {
      page: 'new-product-launch',
      campaign: 'black-friday-2024',
      productId: 'solix-c800-plus',
    },
    threshold: 0.8, // 80% 可见时触发
    once: true, // 只上报一次
  })
 
  return (
    <div ref={heroRef}>
      <ProductHero
        data={{
          title: 'Anker SOLIX C800 Plus',
          subtitle: 'Portable Power Station',
          ctaText: 'Shop Now',
          ctaLink: '/products/solix-c800-plus',
          poster: { url: '...', alt: 'Product' },
          mobPoster: { url: '...', alt: 'Product Mobile' },
        }}
      />
    </div>
  )
}

<section className={cn('product-hero', className)}>
  {/* 内容区域 */}
  <div className="product-hero__content">
    <div className="product-hero__text">
      <Heading className="product-hero__title" as={'h3'} size={4} html={title} />
 
      {/* 桌面端副标题 */}
      <Heading
        className={cn('product-hero__subtitle', 'product-hero__subtitle--desktop', 'laptop:block hidden')}
        as={'h4'}
        size={2}
        html={subtitle}
      />
 
      {/* 移动端副标题 */}
      <Text
        className={cn('product-hero__subtitle', 'product-hero__subtitle--mobile', 'laptop:hidden block')}
        as={'p'}
        size={2}
        html={subtitle}
      />
    </div>
 
    {/* CTA 按钮 */}
    <a href={ctaLink} className="product-hero__cta-link">
      <Button variant="quaternary" className="product-hero__cta-button">
        {ctaText}
      </Button>
    </a>
  </div>
 
  {/* 图片元素 */}
  <Picture className="product-hero__image" source={`${poster?.url}, ${mobPoster?.url} 768`} />
</section>

// BEM 类名生成函数
function bemClass(block: string, element?: string, modifier?: string): string {
  if (!element) return block // 只有 Block
  if (!modifier) return `${block}__${element}` // Block + Element
  return `${block}__${element}--${modifier}` // Block + Element + Modifier
}
 
// 使用示例
bemClass('product-hero') // "product-hero"
bemClass('product-hero', 'content') // "product-hero__content"
bemClass('product-hero', 'subtitle', 'desktop') // "product-hero__subtitle--desktop"

.product-hero (Block)
├── .product-hero__content (Element)
│   ├── .product-hero__text (Element)
│   │   ├── .product-hero__title (Element)
│   │   ├── .product-hero__subtitle (Element)
│   │   │   ├── .product-hero__subtitle--desktop (Modifier)
│   │   │   └── .product-hero__subtitle--mobile (Modifier)
│   ├── .product-hero__cta-link (Element)
│   │   └── .product-hero__cta-button (Element)
├── .product-hero__image (Element)

/* 自定义标题颜色 */
.product-hero__title {
  color: #1e293b;
  font-weight: 900;
}
 
/* 自定义副标题透明度 */
.product-hero__subtitle {
  opacity: 0.85;
}
 
/* 自定义桌面端副标题 */
.product-hero__subtitle--desktop {
  letter-spacing: 0.5px;
}
 
/* 自定义 CTA 按钮 */
.product-hero__cta-button {
  border-radius: 8px;
  padding: 16px 32px;
}
 
/* 自定义图片圆角 */
.product-hero__image {
  border-radius: 24px;
  overflow: hidden;
}
 
/* 自定义内容区域背景 */
.product-hero__content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

┌─────────────────────┐
│  内容区 (100%)       │
│  - 标题              │
│  - 副标题 (<p>)      │
│  - CTA 按钮          │
│                     │
│  ↓ Gap: 32px        │
│                     │
│  图片区 (100%)       │
│  - 移动端图片        │
│    (358:360 比例)   │
└─────────────────────┘

┌────────────────┬──────────────────────────┐
│ 内容区 (42%)    │  图片区 (58%)             │
│                │                          │
│ - 标题          │  - 桌面端图片             │
│ - 副标题 (<p>)  │    (824:640 比例)        │
│ - CTA 按钮      │                          │
│                │                          │
│ Gap: 16px →    │                          │
└────────────────┴──────────────────────────┘

┌──────────────┬────────────────────────────────┐
│ 内容区 (36%)  │  图片区 (64%)                   │
│              │                                │
│ - 标题        │  - 桌面端图片                   │
│ - 副标题 (<h4>)│    (824:640 比例)              │
│ - CTA 按钮    │                                │
│              │                                │
│ Gap: 16px →  │                                │
└──────────────┴────────────────────────────────┘

┌──────────────┬─────────────────────────────────────────┐
│ 内容区 (36%)  │  图片区 (64%)                            │
│              │                                         │
│ - 标题        │  - 桌面端图片                            │
│ - 副标题 (<h4>)│    (824:640 比例)                       │
│ - CTA 按钮    │                                         │
│              │                                         │
│ Gap: 64px →  │                                         │
└──────────────┴─────────────────────────────────────────┘

// 根元素: 响应式布局方向和间距
<section
  className={cn(
    'flex flex-col', // 移动端: 垂直堆叠
    'tablet:flex-row', // 平板及以上: 水平排列
    'gap-[32px]', // 移动端: 32px 间距
    'tablet:gap-[16px]', // 平板/桌面: 16px 间距
    'lg-desktop:gap-[64px]' // 超大屏: 64px 间距
  )}
>
  {/* 内容区: 响应式宽度 */}
  <div
    className={cn(
      'flex flex-col',
      'tablet:basis-[42%]', // 平板: 42% 宽度
      'laptop:basis-[36%]' // 桌面及以上: 36% 宽度
    )}
  >
    {/* 标题: 所有断点相同 */}
    <Heading as={'h3'} size={4} html={title} />
 
    {/* 副标题: 响应式组件切换 */}
    <Heading
      className="laptop:block hidden" // 桌面端显示 <h4>
      as={'h4'}
      size={2}
      html={subtitle}
    />
    <Text
      className="laptop:hidden block" // 移动端显示 <p>
      as={'p'}
      size={2}
      html={subtitle}
    />
 
    {/* CTA 按钮: 响应式内边距 */}
    <Button
      className={cn(
        'px-[24px] py-[12px]', // 移动端/平板
        'laptop:px-[32px] laptop:py-[16px]' // 桌面及以上
      )}
    >
      {ctaText}
    </Button>
  </div>
 
  {/* 图片区: 响应式宽度和图片源 */}
  <Picture
    className={cn(
      'tablet:basis-[58%]', // 平板: 58% 宽度
      'laptop:basis-[64%]' // 桌面及以上: 64% 宽度
    )}
    source={`${poster?.url}, ${mobPoster?.url} 768`} // 768px 断点切换图片
    aspectRatio={[
      { breakpoint: 768, width: 824, height: 640 }, // 桌面: 1.29:1
      { width: 358, height: 360 }, // 移动: 1:1
    ]}
  />
</section>

<section ref={boxRef} data-ui-component-id="ProductHero" className="product-hero">
  <Heading as={'h3'} size={4} html={title} />
  <a href={ctaLink}>
    <Button>{ctaText}</Button>
  </a>
  <Picture source={...} />
</section>

<section
  ref={boxRef}
  data-ui-component-id="ProductHero"
  role="region"
  aria-labelledby="product-hero-title"
  className="product-hero"
>
  <Heading as={'h3'} size={4} html={title} id="product-hero-title" />
  <a href={ctaLink} aria-label={`${'${ctaText}'} - ${'${title}'}`}>
    <Button>{ctaText}</Button>
  </a>
  <Picture source={...} aria-hidden="false" />
</section>

.product-hero__cta-button:focus {
  outline: 2px solid #00befa; /* 品牌色边框 */
  outline-offset: 4px; /* 边框偏移 */
  box-shadow: 0 0 0 4px rgba(0, 190, 250, 0.2); /* 发光效果 */
}

<ProductHero
  data={{
    title: 'Anker Product',
    subtitle: 'Product Description',
    ctaText: 'Shop Now',
    ctaLink: '/shop',
    poster: { url: '...', alt: 'Product' },
    mobPoster: { url: '...', alt: 'Product Mobile' },
    theme: 'dark',
  }}
  className="high-contrast-theme"
/>
 
<style>{`
  .high-contrast-theme .product-hero__title {
    color: #ffffff; /* 白色标题,对比度更高 */
  }
 
  .high-contrast-theme .product-hero__subtitle {
    color: #e5e7eb; /* 浅灰副标题,对比度 ≥ 7:1 */
  }
 
  .high-contrast-theme .product-hero__cta-button {
    background: #fbbf24; /* 金色按钮,对比度 ≥ 6:1 */
    color: #1f2937; /* 深色文本 */
  }
`}</style>

<body>
  <header>
    <h1>Page Title</h1> <!-- 页面主标题 -->
  </header>
 
  <main>
    <section>
      <h2>Section Heading</h2> <!-- 区域标题 -->
 
      <ProductHero>
        <h3>Anker SOLIX C800 Plus</h3> <!-- ProductHero 标题 -->
        <h4>The World's First...</h4> <!-- ProductHero 副标题 -->
      </ProductHero>
    </section>
  </main>
</body>

const poster: Media = {
  url: 'https://images.unsplash.com/photo.jpg?w=1648&h=1280&q=85&fm=webp',
  alt: 'Product Desktop View',
  mimeType: 'image/webp',
}
 
const mobPoster: Media = {
  url: 'https://images.unsplash.com/photo.jpg?w=716&h=720&q=85&fm=webp',
  alt: 'Product Mobile View',
  mimeType: 'image/webp',
}

const poster: Media = {
  url: 'https://cdn.example.com/product.webp', // 主图 (1.2MB)
  thumbnailURL: 'https://cdn.example.com/product-thumb.webp', // 缩略图 (20KB)
  alt: 'Product',
}

<Picture
  source={`
    ${poster.url}?w=1648&h=1280 1648w,
    ${poster.url}?w=1200&h=933 1200w,
    ${poster.url}?w=800&h=622 800w,
    ${mobPoster.url}?w=716&h=720 716w 768
  `}
  sizes="(min-width: 1025px) 64vw, (min-width: 768px) 58vw, 100vw"
/>

import React, { memo } from 'react'
 
const ProductHero = memo(function ProductHero({ data, className }: ProductHeroProps) {
  // 组件实现
})
 
export default ProductHero

// ❌ 错误: 两个副标题同时渲染,一个隐藏
<Heading className="laptop:block hidden" html={subtitle} />
<Text className="laptop:hidden block" html={subtitle} />
 
// ✅ 正确: 使用 CSS display:none,不触发渲染
// 实际上当前实现已经是最优的,CSS 隐藏不触发渲染

import { useEffect } from 'react'
 
export default function ProductPage() {
  useEffect(() => {
    // 预加载桌面端图片
    const desktopImg = new Image()
    desktopImg.src = 'https://cdn.example.com/product-desktop.webp'
 
    // 预加载移动端图片
    const mobileImg = new Image()
    mobileImg.src = 'https://cdn.example.com/product-mobile.webp'
  }, [])
 
  return <ProductHero data={...} />
}

import Link from 'next/link'
 
<Link href={ctaLink} prefetch={true}>
  <Button>{ctaText}</Button>
</Link>

const poster: Media = {
  url: 'https://cdn.example.com/product.jpg?w=1648&h=1280&q=85&fm=webp',
  alt: 'Product',
}
 
// 对比: 不使用 CDN
// url: "https://example.com/uploads/product.jpg" (加载慢)

const poster: Media = {
  url: 'https://cdn.example.com/product.jpg?w=1648&h=1280&q=85&fit=crop&fm=webp&auto=compress',
  alt: 'Product',
}

<Picture
  source={`${poster?.url}, ${mobPoster?.url} 768`}
  loading="lazy" // 原生懒加载
  decoding="async" // 异步解码
/>

<Picture
  source={`${poster?.url}, ${mobPoster?.url} 768`}
  loading="lazy"
  style={{ marginBottom: '500px' }} // 提前 500px 加载
/>

# 运行 Lighthouse 性能测试
npx lighthouse https://example.com/product-page --view

import { Profiler } from 'react'
 
<Profiler
  id="ProductHero"
  onRender={(id, phase, actualDuration) => {
    console.log(`${id} ${phase} took ${actualDuration}ms`)
  }}
>
  <ProductHero data={...} />
</Profiler>

<ProductHero
  data={{
    // ...
  }}
  className="custom-ratio"
/>
 
<style>{`
  .custom-ratio .product-hero__content {
    flex-basis: 50% !important; /* 内容区 50% */
  }
 
  .custom-ratio .product-hero__image {
    flex-basis: 50% !important; /* 图片区 50% */
  }
 
  /* 或使用 Tailwind 类 */
  .custom-ratio .product-hero__content {
    @apply laptop:basis-[50%];
  }
 
  .custom-ratio .product-hero__image {
    @apply laptop:basis-[50%];
  }
`}</style>

// 方案 1: 统一使用 <h4> (推荐 SEO)
<Heading as={'h4'} size={2} html={subtitle} className="product-hero__subtitle" />
 
// 方案 2: 统一使用 <p> (推荐简洁)
<Text as={'p'} size={2} html={subtitle} className="product-hero__subtitle" />

{
  ctaText && ctaLink && (
    <a href={ctaLink} className="product-hero__cta-link">
      <Button>{ctaText}</Button>
    </a>
  )
}

<ProductHero
  data={{
    title: 'Product Name',
    subtitle: 'Description',
    ctaText: '', // 空字符串,按钮不显示
    ctaLink: '',
    poster: { url: '...', alt: 'Product' },
    mobPoster: { url: '...', alt: 'Product Mobile' },
  }}
/>

<ProductHero data={{...}} className="no-cta" />
 
<style>{`
  .no-cta .product-hero__cta-link {
    display: none;
  }
`}</style>

<Picture
  source={`${poster?.url}, ${mobPoster?.url} 768`}
  onError={(e) => {
    e.currentTarget.src = '/fallback-product.jpg' // 兜底图片
  }}
/>

function SafePicture({ source, alt, fallbackSrc }) {
  const [error, setError] = useState(false)
 
  if (error) {
    return <img src={fallbackSrc} alt={alt} />
  }
 
  return (
    <Picture source={source} alt={alt} onError={() => setError(true)} />
  )
}
 
// 使用
<SafePicture
  source={`${poster?.url}, ${mobPoster?.url} 768`}
  alt={poster?.alt}
  fallbackSrc="/fallback-product.jpg"
/>

export interface ProductHeroData {
  title: string
  subtitle: string
  ctaText: string
  ctaLink: string
  secondaryCtaText?: string // 新增
  secondaryCtaLink?: string // 新增
  poster: Media
  mobPoster: Media
  theme?: Theme
}
 
// 组件中渲染
{
  secondaryCtaText && secondaryCtaLink && (
    <a href={secondaryCtaLink} className="product-hero__secondary-cta-link">
      <Button variant="secondary">{secondaryCtaText}</Button>
    </a>
  )
}

<ProductHero data={{...}} className="multi-cta" />
 
<style>{`
  .multi-cta .product-hero__content::after {
    content: 'Learn More';
    display: inline-block;
    padding: 12px 24px;
    background: #f3f4f6;
    color: #1f2937;
    border-radius: 8px;
    margin-left: 16px;
    cursor: pointer;
  }
`}</style>

<ProductHero data={{...}} className="custom-gap" />
 
<style>{`
  .custom-gap.product-hero {
    gap: 24px; /* 统一 24px */
  }
 
  /* 或响应式间距 */
  .custom-gap.product-hero {
    gap: 16px;
  }
 
  @media (min-width: 768px) {
    .custom-gap.product-hero {
      gap: 32px;
    }
  }
 
  @media (min-width: 1920px) {
    .custom-gap.product-hero {
      gap: 80px;
    }
  }
`}</style>

<ProductHero data={{...}} className="image-first" />
 
<style>{`
  .image-first.product-hero {
    flex-direction: column-reverse; /* 反转顺序 */
  }
 
  @media (min-width: 768px) {
    .image-first.product-hero {
      flex-direction: row; /* 平板及以上恢复水平 */
    }
  }
`}</style>

npm install @google/model-viewer

import '@google/model-viewer'
 
export default function ProductHeroWith3D() {
  return (
    <ProductHero
      data={{
        title: 'Anker 3D Product',
        subtitle: 'Interactive 3D Model',
        ctaText: 'Shop Now',
        ctaLink: '/shop',
        poster: { url: '...', alt: 'Product' },
        mobPoster: { url: '...', alt: 'Product Mobile' },
        modelSrc: 'https://cdn.example.com/model.glb',
      }}
    />
  )
}
 
// 修改 ProductHero 组件,添加 3D 模型渲染
{
  modelSrc && (
    <model-viewer
      src={modelSrc}
      alt="3D Model"
      auto-rotate
      camera-controls
      className="product-hero__model"
    ></model-viewer>
  )
}

npm install three @react-three/fiber @react-three/drei

import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'
 
function Model({ src }) {
  const { scene } = useGLTF(src)
  return <primitive object={scene} />
}
 
// 在 ProductHero 中使用
{
  modelSrc && (
    <Canvas className="product-hero__model">
      <ambientLight intensity={0.5} />
      <Model src={modelSrc} />
      <OrbitControls />
    </Canvas>
  )
}