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

src/App.vue

@@ -6,6 +6,5 @@ const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
   <div fixed rounded-br-4 bottom-0 left-0 z-9999 px-4 py-2 bg-black text-white op-75>
     commit: {{ VITE_BUILD_COMMIT }}
   </div>
-  <div>$__DEV__: {{ $__DEV__ }}</div>
   <RouterView />
 </template>

src/assets/base.css

@@ -67,7 +67,7 @@
 }
 
 body {
-  min-height: 100vh;
+  /* min-height: 100vh; */
   color: var(--color-text);
   background: var(--color-background);
   transition:

src/main.ts

@@ -13,6 +13,7 @@ import { router } from './router';
 import Aura from '@primevue/themes/aura';
 import zhCN from 'primelocale/zh-CN.json';
 import PrimeVue from 'primevue/config';
+// import 'primeicons/primeicons.css';
 
 /* https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#static-bundle-importing
  * All i18n resources specified in the plugin `include` option can be loaded

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>