feat: 调整组件样式，优化图标和布局的尺寸，更新无限加载组件的刷新方法

src/components/Icons.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div b="1px solid pink" mt-8 text-16 p-8 space-y-8>
+  <div b="1px solid pink" mt-2 text-4 p-2 space-y-2>
     <!-- <div b="1px solid pink">
       <div>@iconify-json/carbon/icons.json</div>
       <div i-carbon-face-cool text-orange />
@@ -11,7 +11,7 @@
 
     <div b="1px solid pink">
       <div>Icons({ autoInstall: true })</div>
-      <icon-carbon-face-cool class="text-yellow" w-32 h-32 />
+      <icon-carbon-face-cool class="text-yellow" w-8 h-8 />
     </div>
 
     <!-- <div b="1px solid pink">
@@ -21,8 +21,8 @@
 
     <div b="1px solid pink">
       <div>pacman.svg</div>
-      <icon-svg:pacman text-blue w-48 h-48 />
-      <some-icon text-cyan w-48 h-48 />
+      <icon-svg:pacman text-blue w-12 h-12 />
+      <some-icon text-cyan w-12 h-12 />
     </div>
   </div>
 </template>

src/components/UseIntersectionObserverInfiniteLoading.vue

@@ -34,7 +34,7 @@ defineExpose({
   refresh: () => {
     currentPage = 0;
     state.value = '';
-    load('refresh');
+    return load('refresh');
   },
 });
 

src/pages/index-page.vue

@@ -40,39 +40,39 @@ const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props,
     <li><router-link class="green" :to="{ name: 'InfiniteLoading' }">Infinite Loading</router-link></li>
   </ul>
 
-  <div b="1px solid pink" mt-8>
+  <div b="1px solid pink" mt-2>
     <I18nComp />
   </div>
 
   <FComponent prop="Hello World" style="margin-top: 8px"></FComponent>
   <div text-orange></div>
 
-  <div b="1px solid pink" mt-8>
+  <div b="1px solid pink" mt-2>
     <ReusableTemplate />
   </div>
-  <div b="1px solid pink" mt-8>
+  <div b="1px solid pink" mt-2>
     <ReactivityTransform />
   </div>
-  <div b="1px solid pink" mt-8>
+  <div b="1px solid pink" mt-2>
     <DefineRender />
   </div>
   <Icons />
 
-  <div :class="$style.hero" mt-8>
+  <div :class="$style.hero" mt-2>
     <h1><i>🔌</i> Vite Plugin Webfont DL <i>⚡</i></h1>
     <h2>Fonts are downloaded directly from Google Fonts</h2>
     <p>{{ JSON.stringify({ $style }) }}</p>
   </div>
 
-  <div b="1px solid pink" mt-8 p-8>
+  <div b="1px solid pink" mt-2 p-2>
     <SendSms />
   </div>
 
-  <div b="1px solid pink" mt-8 p-8>
+  <div b="1px solid pink" mt-2 p-2>
     <Primevue />
   </div>
 
-  <div b="1px solid pink" mt-8 p-8>
+  <div b="1px solid pink" mt-2 p-2>
     <pre>{{ JSON.stringify(routes, null, 2) }}</pre>
   </div>
 </template>

unocss.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     }),
 
     // https://unocss.dev/presets/rem-to-px
-    presetRemToPx({ baseFontSize: 4 }),
+    // presetRemToPx({ baseFontSize: 4 }),
 
     // https://unocss.dev/presets/attributify
     presetAttributify(),