feat: add DemoRender

Author: ChuChencheng

site/.vitepress/components/DemoRender.vue

@@ -0,0 +1,23 @@
+<template>
+  <ClientOnly>
+    <div
+      :style="{
+        width: '100%',
+        borderRadius: '8px',
+        padding: '20px',
+        backgroundColor: '#FFF',
+        border: '1px solid lightgray',
+      }"
+    >
+      <component :is="vueComponent" />
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  component: string
+}>()
+
+const vueComponent = (await import(`../code/${props.component}.vue`)).default
+</script>

site/.vitepress/components/code-demo.md

@@ -1,16 +1,6 @@
-<ClientOnly>
-  <div
-    :style="{
-      width: '100%',
-      borderRadius: '8px',
-      padding: '20px',
-      backgroundColor: '#FFF',
-      border: '1px solid lightgray',
-    }"
-  >
-    <component :is="component" />
-  </div>
-</ClientOnly>
+<Suspense>
+  <DemoRender :component="component" />
+</Suspense>
 
 <ClientOnly>
   <div :style="{ margin: '16px 0' }">
@@ -28,6 +18,7 @@
 import { ref } from 'vue'
 import { useData } from 'vitepress'
 
+import DemoRender from './DemoRender.vue'
 import PlaygroundLink from './PlaygroundLink.vue'
 import { data as sourceCodeMap } from '../data/code.data'
 import { codeDemoI18n } from '../constants/i18n'

site/.vitepress/theme/index.ts

@@ -7,19 +7,9 @@ import '@wsfe/vue-tree/style.css'
 
 export default {
   extends: DefaultTheme,
-  async enhanceApp({ app }) {
+  enhanceApp({ app }) {
     // 注册自定义全局组件
     app.component('CodeDemo', CodeDemo)
     app.component('PlaygroundLink', PlaygroundLink)
-
-    const codeDemoComponents = import.meta.glob('../code/*.vue')
-    
-    for (const path in codeDemoComponents) {
-      const component = await codeDemoComponents[path]()
-      const componentName = path.match(/^(?:.*\/)?(.+)\.vue$/)?.[1]
-      if (componentName && component?.default) {
-        app.component(componentName, component.default)
-      }
-    }
   }
 } satisfies Theme