feat: 添加 useIntersectionObserverList 页面，支持懒加载和可见性检测

src/pages/useIntersectionObserverList.page.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core';
+import { ref } from 'vue';
+
+const loading = ref(false);
+const list = ref<string[]>([]);
+const loadMore = async () => {
+  loading.value = true;
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  const items = Array.from({ length: 5 }, (_, i) => `Item ${list.value.length + i + 1}`);
+  list.value.push(...items);
+  loading.value = false;
+};
+
+const target = ref(null);
+const isVisible = ref(false);
+
+const { isActive, pause, resume, isSupported } = useIntersectionObserver([target], ([entry]) => {
+  isVisible.value = entry?.isIntersecting || false;
+});
+</script>
+
+<template>
+  <Card v-for="item in list" :key="item" class="mb-[16px]">
+    <template #title>{{ item }}</template>
+  </Card>
+
+  <div ref="target" class="border-[8px] border-blue-500 p-[16px] bg-white dark:bg-gray-800 dark:border-gray-700">
+    <Button label="Load more" :loading="loading" fluid @click="loadMore" />
+  </div>
+
+  <ScrollTop />
+  <div
+    class="border-[1px] border-blue-500 fixed top-16 right-16 p-[4px] bg-white dark:bg-gray-800 dark:border-gray-700"
+    flex="~ col"
+    items-end
+  >
+    <label class="checkbox">
+      <span mr="[8px]">isSupported: {{ isSupported }}</span>
+      <input
+        :checked="isActive"
+        type="checkbox"
+        name="enabled"
+        @input="($event.target as HTMLInputElement)!.checked ? resume() : pause()"
+      />
+      <span>Enable</span>
+    </label>
+    <div>
+      Element
+      <span class="font-bold" :class="isVisible ? 'text-blue-500' : 'text-orange-400 dark:text-orange-300'">
+        {{ isVisible ? 'inside' : 'outside' }}
+      </span>
+      the viewport
+    </div>
+  </div>
+</template>