feat(demos): 添加函数式组件（TSX）示例并引入 highlight.js

src/pages/demos/index.page.vue

@@ -1,8 +1,37 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { FunctionalComponent } from 'vue';
+
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
+hljs.registerLanguage('json', json);
+
 definePage({
   meta: {
-    link: !false,
+    link: true,
+    title: 'Functional Component Demo',
   },
 });
+
+const FComponent: FunctionalComponent<{ prop: string }> = (props /* context */) => (
+  <>
+    <NBlockquote>
+      函数式组件文档:
+      <a
+        class="text-blue-500 hover:text-blue-600 transition-colors"
+        href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Render Function & JSX
+      </a>
+    </NBlockquote>
+    <p class="my-4">这是一个函数式组件，它接收到的 prop 值为：</p>
+    <NCode code={JSON.stringify(props, null, 2)} language="json" hljs={hljs} />
+  </>
+);
 </script>
-<template><div>Demos</div></template>
+<template>
+  <NCard title="函数式组件（TSX）示例">
+    <FComponent prop="some-prop-value" />
+  </NCard>
+</template>