ImageWithText (图文分栏1)

import { ImageWithText } from '@anker-in/headless-ui/biz'
 
export default function Example() {
  return (
    <ImageWithText
      data={{
        title: 'Precise Navigation',
        subtitle: 'iPath Laser Navigation plans optimal cleaning routes.',
        layout: 'left', // 默认值,可省略
        image: {
          url: '/precise_navigation.png',
          alt: 'Precise Navigation',
        },
        padImage: {
          url: '/precise_navigation_pad.png',
          alt: 'Precise Navigation Pad',
        },
        mobileImage: {
          url: '/precise_navigation_mobile.png',
          alt: 'Precise Navigation Mobile',
        },
      }}
    />
  )
}

<ImageWithText
  data={{
    title: 'AI.See™ Obstacle Avoidance',
    subtitle: 'Advanced AI and RGB visual recognition.',
    layout: 'left',
    image: {
      url: '/ai-avoidance.png',
      alt: 'AI Obstacle Avoidance',
    },
    mobileImage: {
      url: '/ai-avoidance-mobile.png',
      alt: 'AI Obstacle Avoidance Mobile',
    },
    items: [
      {
        icon: { url: '/led-icon.svg', alt: 'LED' },
        text: 'LED', // 标题会自动应用蓝色渐变效果
        desc: 'Equipped with LEDs for dark environments',
      },
      {
        icon: { url: '/200-icon.svg', alt: '200+' },
        text: '200+',
        desc: 'Identifies and avoids 200+ objects.',
      },
    ],
  }}
/>

<ImageWithText
  data={{
    title: 'DuoSpiral™ Detangle Brushes',
    subtitle: 'DuoSpiral™ brushes prevent hair from getting tangled.',
    layout: 'left',
    mediaType: 'video', // 启用视频模式
    // 桌面端视频和封面图
    video: { url: '/desktop-video.mp4', alt: 'DuoSpiral Video' },
    image: { url: '/video-poster.jpg', alt: 'Video Poster' },
    // 移动端独立视频和封面图
    mobVideo: { url: '/mobile-video.mp4', alt: 'DuoSpiral Mobile Video' },
    mobileImage: { url: '/mobile-poster.jpg', alt: 'Mobile Video Poster' },
  }}
/>

<ImageWithText
  data={{
    title: 'Smart App Control',
    desc: 'Effortless customization at your fingertips.',
    // 当存在 datalist 时,自动启用 Tab 模式
    datalist: [
      {
        title: 'Customizable Cleaning Modes',
        image: { url: '/mode-1.png', alt: 'Cleaning Modes' },
        imgPad: { url: '/mode-1-pad.png', alt: 'Cleaning Modes Pad' },
        imageMob: { url: '/mode-1-mobile.png', alt: 'Cleaning Modes Mobile' },
      },
      {
        title: 'Multi-Floor Mapping',
        image: { url: '/mode-2.png', alt: 'Floor Mapping' },
        imgPad: { url: '/mode-2-pad.png', alt: 'Floor Mapping Pad' },
        imageMob: { url: '/mode-2-mobile.png', alt: 'Floor Mapping Mobile' },
      },
    ],
  }}
/>

<ImageWithText
  data={{
    title: 'Smart App Control',
    desc: 'Effortless customization at your fingertips.',
    mediaType: 'video', // 启用视频模式
    datalist: [
      {
        title: 'Customizable Cleaning Modes',
        video: { url: '/mode-1-video.mp4', alt: 'Cleaning Modes Video' },
        image: { url: '/mode-1-poster.jpg', alt: 'Cleaning Modes Poster' },
        mobVideo: { url: '/mode-1-mobile.mp4', alt: 'Cleaning Modes Mobile' },
        imageMob: { url: '/mode-1-mobile-poster.jpg', alt: 'Mobile Poster' },
      },
      {
        title: 'Multi-Floor Mapping',
        video: { url: '/mode-2-video.mp4', alt: 'Floor Mapping Video' },
        image: { url: '/mode-2-poster.jpg', alt: 'Floor Mapping Poster' },
      },
    ],
  }}
/>

<ImageWithText
  data={{
    title: '革新清洁体验',
    subtitle: '看见科技如何重新定义家居清洁',
    layout: 'top', // 上文下图布局
    mediaType: 'video',
    video: { url: '/product-demo.mp4', alt: '产品演示' },
    image: { url: '/product-demo-poster.jpg', alt: '产品演示封面' },
    items: [
      {
        icon: { url: 'ai-icon.png', alt: 'AI' },
        text: 'AI 视觉识别',
        desc: '先进 AI 算法，智能识别并避开障碍物',
      },
      {
        icon: { url: 'quiet-icon.png', alt: 'Quiet' },
        text: '静音运行',
        desc: '噪音控制在 55dB 以下，静享清洁时光',
      },
    ],
    button: {
      text: '查看详细参数',
      link: '/specs',
      variant: 'secondary', // 次要按钮样式(边框样式)
    },
  }}
/>

<ImageWithText
  data={{
    title: 'Precise Navigation',
    subtitle: 'iPath Laser Navigation plans optimal cleaning routes.',
    layout: 'left',
    textAlign: 'center', // 文本居中对齐
    image: { url: '/precise_navigation.png', alt: 'Precise Navigation' },
    items: [
      {
        icon: { url: 'led-icon.svg', alt: 'LED' },
        text: 'LED',
        desc: 'Equipped with LEDs',
      },
      {
        icon: { url: '200-icon.svg', alt: '200+' },
        text: '200+',
        desc: 'Identifies 200+ objects',
      },
    ],
    button: {
      text: '立即购买',
      link: 'https://example.com',
      variant: 'primary',
    },
  }}
/>

// 基础模式
layout: 'left'   → Mobile: 上文下图, Laptop+: 左文右图
layout: 'right'  → Mobile: 上文下图, Laptop+: 右文左图
layout: 'top'    → 所有断点: 上文下图
layout: 'bottom' → 所有断点: 下文上图

// 当 layout 为 left 或 right 时
Mobile:  2 列 (grid-cols-2)
Tablet:  4 列 (tablet:grid-cols-4)
Laptop+: 2 列 (laptop:grid-cols-2)
 
// 当 layout 为 top 或 bottom 时
Mobile:  2 列 (grid-cols-2)
Tablet+: 4 列 (tablet:grid-cols-4)

组件主间距:
  Mobile:      24px (gap-[24px])
  Laptop:      48px (laptop:gap-[48px])
  LG Desktop:  64px (lg-desktop:gap-[64px])
 
功能列表 margin-top:
  Mobile:      24px (mt-[24px])
  Laptop:      32px (laptop:mt-[32px])
  Desktop:     48px (desktop:mt-[48px])
  Top/Bottom:  24px (!mt-6, 固定值)
 
按钮 margin-top:
  Mobile:      24px (mt-[24px])
  Laptop:      32px (laptop:mt-[32px])

桌面端视频:  LG Desktop 及以上显示 (lg-desktop:block)
平板端视频:  Tablet 到 LG Desktop 之间显示 (tablet:block lg-desktop:hidden)
移动端视频:  Mobile 显示 (block tablet:hidden)

<section>                    {/* 使用 section 作为根元素 */}
  <div className="content">
    <Heading as="h2" size={4}>  {/* 标题使用语义化 Heading 组件 */}
      {title}
    </Heading>
    <Text as="p" size={3}>      {/* 描述使用 Text 组件 */}
      {subtitle}
    </Text>
  </div>
  <Picture />                   {/* 图片使用 Picture 组件,自动处理 alt */}
</section>

useExposure(boxRef, {
  componentType: 'image',
  componentName: 'image_with_text',
  componentTitle: title,
  componentDescription: subtitle,
})

// 1. 使用 React.forwardRef
const ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(
  ({ data, className }, ref) => {
    // ...
  }
)
 
// 2. 使用 useRef 避免重复创建
const boxRef = useRef<HTMLDivElement>(null)
const desktopVideoRef = useRef<HTMLDivElement>(null)
const tabRefs = useRef<Array<HTMLDivElement | null>>([])
 
// 3. 使用 useEffect 管理副作用
useEffect(() => {
  // Tab 滑块位置计算
}, [activeIndex, datalist.length])
 
// 4. 使用 useState 管理视频懒加载状态
const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')

// 使用 useIntersectionObserverDelay 监听媒体区域可见性
useIntersectionObserverDelay(mediaWrapperRef, {
  once: true,        // 仅触发一次
  threshold: 0.01,   // 可见度阈值 1%
  callback: () => {
    setVideoIntersected(true) // 标记视频区域已可见
  },
})
 
// 视频区域可见后才加载视频源
useEffect(() => {
  if (!videoIntersected || !isVideo) return
  // 加载视频 src
  setLoadedDesktopVideoSrc(desktopSrc)
  // 延迟触发播放
  setTimeout(() => {
    videoElement.play()
  }, 200)
}, [videoIntersected, isVideo])

// 使用 Picture 组件,支持响应式图片
<Picture
  source={`${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`}
  alt={image?.alt}
  className="image-with-text__image"
/>

// 使用 AnimatePresence mode="wait" 确保动画不重叠
<AnimatePresence mode="wait">
  <motion.div
    key={activeTab.video?.url}  // 使用唯一 key 强制重新渲染
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 0.3 }} // 短动画时长,快速响应
  >
    {/* 内容 */}
  </motion.div>
</AnimatePresence>

// 优先级 1: Tab 模式(datalist 存在)
datalist.length > 0  → Tab 模式
 
// 优先级 2: 功能列表模式(items 存在)
items.length > 0 && datalist.length === 0  → 功能列表模式
 
// 优先级 3: 基础模式(无 datalist 和 items)
datalist.length === 0 && items.length === 0  → 基础模式

// 当 mediaType='video' 时:
- image/padImage/mobileImage 作为视频的 poster(封面图)
- video/padVideo/mobVideo 是实际播放的视频 URL
- 视频加载前显示 poster,加载完成后自动播放
 
// 优先级:
桌面端: video?.url → image?.url 作为 poster
平板端: padVideo?.url || video?.url → padImage?.url || image?.url 作为 poster
移动端: mobVideo?.url || video?.url → mobileImage?.url || image?.url 作为 poster

// 移动端布局统一规则
layout: 'left'   → Mobile: 上文下图
layout: 'right'  → Mobile: 上文下图
layout: 'top'    → Mobile: 上文下图(保持不变)
layout: 'bottom' → Mobile: 下文上图(保持不变)

/* 根元素 */
.image-with-text { }
.image-with-text.aiui-dark { }  /* 深色主题 */
 
/* 内容区域 */
.image-with-text__content { }
.image-with-text__title { }
.image-with-text__subtitle { }
.image-with-text__description { }
 
/* 功能列表 */
.image-with-text__items { }
.image-with-text__item { }
.image-with-text__item-icon { }
.image-with-text__item-text { }    /* 功能标题(带渐变) */
.image-with-text__item-desc { }
 
/* Tab 模式 */
.image-with-text__tabs-wrapper { }
.image-with-text__tabs { }
.image-with-text__tab { }
.image-with-text__tab--active { }  /* 激活状态 */
.image-with-text__slider { }       /* 滑块背景 */
 
/* 按钮 */
.image-with-text__button-wrapper { }
.image-with-text__button { }
 
/* 媒体区域 */
.image-with-text__media-wrapper { }
.image-with-text__image { }
.image-with-text__video { }

/* 自定义功能图标样式 */
.image-with-text__item-icon {
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 12px;
}
 
/* 自定义 Tab 滑块颜色 */
.image-with-text__slider {
  background: linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%);
}

// 无按钮:文本区垂直居中
!hasButton  → justify-center
 
// 有按钮:文本区上下分散对齐(space-between)
hasButton  → justify-between

// 图片 fallback 逻辑
桌面端:  image
平板端:  padImage || image      // 未提供 padImage 时使用 image
移动端:  mobileImage || image   // 未提供 mobileImage 时使用 image
 
// 视频 fallback 逻辑
桌面端:  video
平板端:  padVideo || video       // 未提供 padVideo 时使用 video
移动端:  mobVideo || video       // 未提供 mobVideo 时使用 video

const isTabMode = datalist && datalist.length > 0
const hasItems = items && items.length > 0
const hasButton = !!button
 
// 运行模式优先级:
// 1. Tab 模式(datalist 存在)
// 2. 功能列表模式(items 存在)
// 3. 基础模式

const [videoIntersected, setVideoIntersected] = useState(false)
 
useIntersectionObserverDelay(mediaWrapperRef, {
  once: true,
  threshold: 0.01,
  callback: () => setVideoIntersected(true),
})
 
useEffect(() => {
  if (!videoIntersected || !isVideo) return
  setLoadedDesktopVideoSrc(desktopSrc)
  setTimeout(() => videoElement.play(), 200)
}, [videoIntersected, isVideo])

useEffect(() => {
  if (!tabRefs.current[activeIndex]) return
 
  const activeTab = tabRefs.current[activeIndex]
  const sliderLeft = activeTab.offsetLeft
  const sliderWidth = activeTab.offsetWidth
 
  setSliderStyle({
    left: `${sliderLeft}px`,
    width: `${sliderWidth}px`,
  })
}, [activeIndex])

<AnimatePresence mode="wait">
  <motion.div
    key={activeTab.video?.url}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 0.3 }}
  >
    {/* 内容 */}
  </motion.div>
</AnimatePresence>

const getImageSource = () => {
  const desktop = image?.url
  const tablet = padImage?.url || desktop
  const mobile = mobileImage?.url || desktop
  return `${desktop}, ${tablet} 1024, ${mobile} 768`
}