feat: 更新 VSCode 设置，更新 package.json 脚本，添加新功能页面和重构组件

src/pages/index.page.vue

@@ -1,14 +1,75 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
 import { routes } from 'vue-router/auto-routes';
 
+useHead({
+  // Titles
+  title: 'Hello World',
+  titleTemplate: '%s %separator %siteName',
+  // Template params
+  templateParams: { separator: '|', siteName: 'My App' },
+  // Classes
+  bodyAttrs: { class: { overflow: true } },
+  // Deduping
+  // script: [{ key: '123', src: '/script.js' }],
+});
+
 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>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </div>
+  // </>
+);
 </script>
 
 <template>
-  <div>
-    <div>index.page.vue</div>
-    <div rounded-4 px-4 py-2 bg-black text-white>commit: {{ VITE_BUILD_COMMIT }}</div>
+  <ul>
+    <li><router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link></li>
+  </ul>
+
+  <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>
+
+  <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>
+/* https://cn.vuejs.org/api/sfc-css-features#css-modules */
+h1 {
+  font-family: 'Press Start 2P', cursive;
+  color: #646cff;
+}
+
+h2 {
+  font-family: 'Fira Code', monospace;
+  background-color: #42b983;
+}
+
+.hero {
+  border: 1px solid #42b983;
+}
+</style>