huijia-website/app/composables/useScrollReveal.ts

/*
 * @Author: LiZhiWei
 * @Date: 2026-01-22 10:31:06
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-22 10:45:30
 * @Description:
 */
import { ref, onMounted, isRef, type Ref } from 'vue'

export const useScrollReveal = (
  targetOrThreshold: Ref<HTMLElement | null> | number = 0.1,
  threshold = 0.1
) => {
  let targetRef: Ref<HTMLElement | null>
  let actualThreshold = threshold

  if (isRef(targetOrThreshold)) {
    targetRef = targetOrThreshold
  } else {
    targetRef = ref(null)
    if (typeof targetOrThreshold === 'number') {
      actualThreshold = targetOrThreshold
    }
  }

  const isVisible = ref(false)

  onMounted(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return
          isVisible.value = true
          observer.unobserve(entry.target)
        })
      },
      { threshold: actualThreshold }
    )

    if (targetRef.value) {
      observer.observe(targetRef.value)
    }
  })

  return {
    targetRef,
    isVisible,
  }
}