From 33ee02bce66a6c3f12c6ef2eb15f5931aa472a86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <h_mini2024@oo1.dev>
Date: Sat, 25 Oct 2025 00:18:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(demos):=20=E6=B7=BB=E5=8A=A0=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E5=BC=8F=E7=BB=84=E4=BB=B6=EF=BC=88TSX=EF=BC=89?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E5=B9=B6=E5=BC=95=E5=85=A5=20highlight.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                   |  1 +
 pnpm-lock.yaml                 |  3 +++
 src/pages/demos/index.page.vue | 35 +++++++++++++++++++++++++++++++---
 tsconfig.app.json              |  3 ++-
 vite.config.ts                 |  8 ++++----
 5 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 3d55990..44f9f63 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@sa/materials": "workspace:*",
     "@unhead/vue": "^2.0.14",
     "@vueuse/core": "^13.9.0",
+    "highlight.js": "^11.11.1",
     "naive-ui": "^2.43.1",
     "pinia": "^3.0.3",
     "primelocale": "^2.1.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4987939..6610fab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@vueuse/core':
         specifier: ^13.9.0
         version: 13.9.0(vue@3.5.22(typescript@5.9.2))
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       naive-ui:
         specifier: ^2.43.1
         version: 2.43.1(vue@3.5.22(typescript@5.9.2))
diff --git a/src/pages/demos/index.page.vue b/src/pages/demos/index.page.vue
index e0e2238..4a8a117 100644
--- a/src/pages/demos/index.page.vue
+++ b/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>
diff --git a/tsconfig.app.json b/tsconfig.app.json
index f4c0da6..4f218ee 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -6,7 +6,8 @@
     "src/**/*.vue",
     "./auto-imports.d.ts",
     "./typed-router.d.ts",
-    "./components.d.ts"
+    "./components.d.ts",
+    "node_modules/naive-ui/volar.d.ts"
   ],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
diff --git a/vite.config.ts b/vite.config.ts
index 9f1ed0c..a873f49 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,13 +35,13 @@ async function loadPlugins(configEnv: ConfigEnv): Promise<PluginOption[]> {
     const paddedName = pluginName.padEnd(maxNameLength, ' ');
     const imported = await import(pathToFileURL(entry).href);
 
-    const loadPluginFn = imported.loadPlugin as (configEnv: ConfigEnv) => PluginOption;
+    const loadPlugin = imported.loadPlugin as (configEnv: ConfigEnv) => PluginOption;
     let plugin: PluginOption | undefined;
     let loadMethod = '';
 
     // 优先使用 loadPlugin 函数（接收 configEnv 参数）
-    if (loadPluginFn && typeof loadPluginFn === 'function') {
-      const result = loadPluginFn(configEnv);
+    if (loadPlugin && typeof loadPlugin === 'function') {
+      const result = await loadPlugin(configEnv);
       plugin = result;
       loadMethod = 'loadPlugin';
     } else if (imported.default) {
@@ -162,7 +162,7 @@ export default defineConfig(async (configEnv) => {
                 }
                 // console.log('packageName :>> ', packageName);
                 // console.log('id :>> ', id);
-                if (['vue', 'vue-router', 'pinia', 'vue-demi'].includes(packageName)) {
+                if (['vue', 'vue-router', 'pinia', 'vue-demi', 'vue-i18n'].includes(packageName)) {
                   return 'vue-vendor';
                 }