feat: 添加 UseIntersectionObserverInfiniteLoading 组件的使用示例，优化模板结构 [no-ci]

pnpm-lock.yaml

@@ -5,7 +5,7 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  vite: ^6.0.2
+  vite: ^6.0.3
 
 importers:
 
@@ -1333,7 +1333,7 @@ packages:
   '@unocss/astro@0.65.1':
     resolution: {integrity: sha512-SnSoghbPWNC7Kxia/M0DuaYMcSmmeY7N54TYoNceQl23Ru2HioZvgjAJ+XtrK9B+Rvk+q9irGDTqhcadLVQ3Vg==}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
     peerDependenciesMeta:
       vite:
         optional: true
@@ -1411,7 +1411,7 @@ packages:
   '@unocss/vite@0.65.1':
     resolution: {integrity: sha512-5242hAlgTVUA+tJ9mwo/cpLqD9f4dn5V/prTmtIci0Y7zMsVeBlnQwfsV4MhyTVaF3eFxDy5AUEFiOuXo12rbQ==}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
 
   '@use-gesture/core@10.3.1':
     resolution: {integrity: sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==}
@@ -1488,14 +1488,14 @@ packages:
     resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
       vue: ^3.0.0
 
   '@vitejs/plugin-vue@5.2.1':
     resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
       vue: ^3.2.25
 
   '@volar/language-core@2.4.10':
@@ -1590,7 +1590,7 @@ packages:
     resolution: {integrity: sha512-767WYNXNZqyarp92FkcSGxk5twi1S8QqmwG8UiplIExzSAG2tA2Hria/MQP4vth9/gh8hjekib6ipOjoCDZUpw==}
     engines: {node: '>=16.14.0'}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
     peerDependenciesMeta:
       vite:
         optional: true
@@ -4661,7 +4661,7 @@ packages:
     engines: {node: '>=14'}
     peerDependencies:
       '@unocss/webpack': 0.65.1
-      vite: ^6.0.2
+      vite: ^6.0.3
     peerDependenciesMeta:
       '@unocss/webpack':
         optional: true
@@ -4692,7 +4692,7 @@ packages:
       esbuild: '>=0.13'
       rolldown: '*'
       rollup: ^3.2.0 || ^4.0.0
-      vite: ^6.0.2
+      vite: ^6.0.3
       webpack: 4 || 5
     peerDependenciesMeta:
       '@rspack/core':
@@ -4757,7 +4757,7 @@ packages:
   unplugin-vue-markdown@0.27.1:
     resolution: {integrity: sha512-D4rVWnC/B4mCfT8ZZF2htTBvyPIrZBV0yL05PB6MZ/yx+BZyIPcn4zfsEnPs6XNr8/rtsJwManTZvTvTi18wqQ==}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
 
   unplugin-vue-router@0.10.9:
     resolution: {integrity: sha512-DXmC0GMcROOnCmN56GRvi1bkkG1BnVs4xJqNvucBUeZkmB245URvtxOfbo3H6q4SOUQQbLPYWd6InzvjRh363A==}
@@ -4835,7 +4835,7 @@ packages:
   vite-hot-client@0.2.4:
     resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
 
   vite-plugin-cdn-import@1.0.1:
     resolution: {integrity: sha512-lgjLxgwFSKvJLbqjVBirUZ0rQo00GpUGJzRpgQu8RyBw9LA7jaqG6fUMQzBC9qWmTGabPC3iOzwCcoi7PseRAQ==}
@@ -4844,7 +4844,7 @@ packages:
     resolution: {integrity: sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
 
   vite-plugin-fake-server@2.1.4:
     resolution: {integrity: sha512-NngGc5aBTHftIW64OkJfrlU9Xu0TVuXjn0KkUJEHSAbvCN0eVv6zs9l+odjvHhGwE7AV0HgGMtLIwP8SvLgwRQ==}
@@ -4854,7 +4854,7 @@ packages:
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
-      vite: ^6.0.2
+      vite: ^6.0.3
     peerDependenciesMeta:
       '@nuxt/kit':
         optional: true
@@ -4863,17 +4863,17 @@ packages:
     resolution: {integrity: sha512-H1ZyjtpWjP5mHA5R15sQeYgAARuh2Myg3TDFXWZK6QOQRy8s3XjTIt319DogVjU/x3rC3L/jJQjIasRU04mWXA==}
     engines: {node: '>=v14.21.3'}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
 
   vite-plugin-vue-inspector@5.3.1:
     resolution: {integrity: sha512-cBk172kZKTdvGpJuzCCLg8lJ909wopwsu3Ve9FsL1XsnLBiRT9U3MePcqrgGHgCX2ZgkqZmAGR8taxw+TV6s7A==}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
 
   vite-plugin-webfont-dl@3.10.3:
     resolution: {integrity: sha512-9rRla7tYeDPRAApWWUdv0lGnU/rc2heyeH6EWj8PvGOuyLkbZo8mHo0QJpBBGKrwPyhadhN08iQhTKoFqQPIfA==}
     peerDependencies:
-      vite: ^6.0.2
+      vite: ^6.0.3
 
   vite@6.0.3:
     resolution: {integrity: sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==}

src/components/UseIntersectionObserverInfiniteLoading.vue

@@ -17,6 +17,19 @@ function checkIsVisible(el: Element, root: Element | null = null) {
 </script>
 
 <script setup lang="ts">
+/**
+ * @example
+ *
+ * ```ts
+ * const list = ref<Record<string, never>[]>([]);
+ * const loadData = async (page: number) => { ... };
+ * ```
+ *
+ * ```vue
+ * <UseIntersectionObserverInfiniteLoading :async-load="loadData" ref="infiniteLoading" />
+ * ```
+ */
+
 const props = defineProps<{
   asyncLoad: (page: number) => Promise<{ hasMore: boolean }>;
 }>();