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"
     >
-        函数式组件
+      函数式组件: https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
     </a>
-      ，接收到的 prop 值为：
+    <p>函数式组件，接收到的 prop 值为：</p>
-    </span>
     <pre>{JSON.stringify(props, null, 2)}</pre>
-  </div>
+  </>
-  // </>
 );
 </script>
 
 <template>
+  <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>
+      <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>
 
-  <SendSms class="my-4!" />
+  <SendSms class="mt-2!" />
-  <div rounded-4 px-4 py-2 bg-black text-white>commit: {{ VITE_BUILD_COMMIT }}</div>
+  <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>