feat: 初始化慧遇书院官网一期

app/components/RevealSection.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const root = ref<HTMLElement>()
+const visible = ref(false)
+let observer: IntersectionObserver | undefined
+
+onMounted(() => {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    visible.value = true
+    return
+  }
+  observer = new IntersectionObserver(([entry]) => {
+    if (entry?.isIntersecting) {
+      visible.value = true
+      observer?.disconnect()
+    }
+  }, { threshold: 0.16 })
+  if (root.value) observer.observe(root.value)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
+</script>
+
+<template>
+  <section ref="root" :class="['reveal-section', { visible }]">
+    <slot />
+  </section>
+</template>