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

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",

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))

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>

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": {

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') {
+    if (loadPlugin && typeof loadPlugin === 'function') {
-      const result = loadPluginFn(configEnv);
+      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';
                 }