feat: add ClientOnly

Author: ChuChencheng

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

@@ -1,22 +1,22 @@
-<div
-  :style="{
-    width: '100%',
-    borderRadius: '8px',
-    padding: '20px',
-    backgroundColor: '#FFF',
-    border: '1px solid lightgray',
-  }"
->
-  <ClientOnly>
+<ClientOnly>
+  <div
+    :style="{
+      width: '100%',
+      borderRadius: '8px',
+      padding: '20px',
+      backgroundColor: '#FFF',
+      border: '1px solid lightgray',
+    }"
+  >
     <component :is="component" />
-  </ClientOnly>
-</div>
+  </div>
+</ClientOnly>
 
-<div :style="{ margin: '16px 0' }">
-  <ClientOnly>
-    <PlaygroundLink :component="component" />
-  </ClientOnly>
-</div>
+<ClientOnly>
+  <div :style="{ margin: '16px 0' }">
+      <PlaygroundLink :component="component" />
+  </div>
+</ClientOnly>
 
 ::: details {{i18n.showCode}}
 <div v-html="sourceCode.markdown"></div>

site/guide/getting-started.md

@@ -2,7 +2,9 @@
 
 ## 在线尝试 {#try-it-online}
 
-<div>前往 <PlaygroundLink component="DataDisplay" text="Playground" /> 在线尝试</div>
+<ClientOnly>
+  <div>前往 <PlaygroundLink component="DataDisplay" text="Playground" /> 在线尝试</div>
+</ClientOnly>
 
 ## 安装 {#install}
 

site/playground.md

@@ -4,7 +4,9 @@ navbar: false
 sidebar: false
 ---
 
-<Playground/>
+<ClientOnly>
+  <Playground/>
+</ClientOnly>
 
 <script setup lang="ts">
 import { defineClientComponent } from 'vitepress'