feat: 更新组件样式和结构，优化函数式组件展示

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
+    "source.fixAll.eslint": "never",
     "source.organizeImports": "never",
     "source.fixAll.oxc": "explicit"
   },

src/pages/index.page.vue

@@ -17,44 +17,41 @@ useHead({
 consola.info('routes', routes);
 
 const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props, context) => (
-  // <>
-  <div border="1 solid pink" text="pink">
-    <span>
-      <a
-        class="green"
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
-      >
-        函数式组件
-      </a>
-      ，接收到的 prop 值为：
-    </span>
+  <>
+    <a
+      class="green"
+      target="_blank"
+      rel="noopener noreferrer"
+      href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
+    >
+      函数式组件: https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
+    </a>
+    <p>函数式组件，接收到的 prop 值为：</p>
     <pre>{JSON.stringify(props, null, 2)}</pre>
-  </div>
-  // </>
+  </>
 );
 </script>
 
 <template>
-  <ul>
-    <li><router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link></li>
-  </ul>
+  <div b="1px solid pink" mt-2 p-2>
+    <ul>
+      <li>
+        <router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link>
+      </li>
+    </ul>
+  </div>
+  <div b="1px solid pink" mt-2 p-2>
+    <FComponent prop="Hello World" style="margin-top: 1rem"></FComponent>
+  </div>
 
-  <FComponent prop="Hello World" style="margin-top: 1rem"></FComponent>
-
-  <SendSms class="my-4!" />
-  <div rounded-4 px-4 py-2 bg-black text-white>commit: {{ VITE_BUILD_COMMIT }}</div>
+  <SendSms class="mt-2!" />
+  <div b="1px solid pink" mt-2 p-2>commit: {{ VITE_BUILD_COMMIT }}</div>
 
   <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>
     <pre>{{ JSON.stringify({ $style }, null, 2) }}</pre>
   </div>
-
-  <div b="1px solid pink" mt-2 p-2>
-    <pre>{{ routes }}</pre>
-  </div>
 </template>
 
 <style module>