更新

src/pages/index-page.vue

@@ -1,6 +1,4 @@
 <script lang="tsx" setup>
-import type { FunctionalComponent } from 'vue';
-
 useHead({
   // Titles
   title: 'Hello World',
@@ -16,11 +14,14 @@ definePage({
   alias: '/',
 });
 
+import type { FunctionalComponent } from 'vue';
+
 // https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
 const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
   <>
-    <div>This is a functional component with prop: {props.prop}</div>
-    <div>{props.prop}</div>
+    <div b="1 solid pink" text="pink">
+      <span>This is a functional component with prop: {JSON.stringify(props)}</span>
+    </div>
   </>
 );
 </script>
@@ -35,4 +36,9 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
     <li><router-link :to="{ name: 'MdPage' }">Markdown Page</router-link></li>
   </ul>
   <FComponent prop="Hello World" />
+  <div text-orange></div>
+
+  <div b="1px solid pink" mt-8>
+    <ReusableTemplate />
+  </div>
 </template>