feat: add ClientOnly

Author: ChuChencheng

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

@@ -14,7 +14,7 @@
 
 <ClientOnly>
   <div :style="{ margin: '16px 0' }">
-      <PlaygroundLink :component="component" />
+    <PlaygroundLink :component="component" />
   </div>
 </ClientOnly>
 

site/.vitepress/theme/index.ts

@@ -5,14 +5,14 @@ import CodeDemo from '../components/code-demo.md'
 import PlaygroundLink from '../components/PlaygroundLink.vue'
 import '@wsfe/vue-tree/style.css'
 
-const codeDemoComponents = import.meta.glob('../code/*.vue')
-
 export default {
   extends: DefaultTheme,
   async 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]()

site/en/guide/getting-started.md

@@ -2,7 +2,9 @@
 
 ## Try It Online {#try-it-online}
 
-<div>Refer to <PlaygroundLink component="DataDisplay" text="Playground" /> to try it online</div>
+<ClientOnly>
+  <div>Refer to <PlaygroundLink component="DataDisplay" text="Playground" /> to try it online</div>
+</ClientOnly>
 
 ## Install {#install}