docs: ✏️ 调整演示demo iframe加载完成后再同步当前是否暗黑模式

✅ Closes: #210

Author: xuqingkai

docs/.vitepress/theme/components/frame.vue

@@ -1,11 +1,12 @@
 <template>
-  <iframe v-if="href" id="demo" class="iframe demo-model" scrolling="auto" frameborder="0" :src="href"></iframe>
+  <iframe v-if="href" ref="iframe" id="demo" class="iframe demo-model" scrolling="auto" frameborder="0" :src="href"></iframe>
 </template>
 
 <script setup lang="ts">
-import { useRoute, useData } from 'vitepress';
-import { computed, onMounted, watch } from 'vue'
-const baseUrl = process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/demo/#/'
+import { useRoute, useData } from 'vitepress'
+import { computed, onMounted, ref, watch } from 'vue'
+const baseUrl =
+  process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/demo/#/'
 
 const route = useRoute()
 const href = computed(() => {
@@ -20,30 +21,34 @@ const href = computed(() => {
   return href
 })
 
+const iframe = ref<HTMLIFrameElement | null>(null)
+
 const vitepressData = useData()
 
 onMounted(() => {
-  setTimeout(() => {
-    ssendMessage()
-  }, 500);
-})
-
-
-watch(() => vitepressData.isDark.value, () => {
-  ssendMessage()
+  iframe.value &&
+    iframe.value.addEventListener('load', () => {
+      // 在iframe加载完成后执行发送消息的操作
+      ssendMessage()
+    })
 })
 
-function ssendMessage(){
-  const iFrame: any = document.getElementById('demo')
-  iFrame && iFrame.contentWindow.postMessage(vitepressData.isDark.value, href.value)
+watch(
+  () => vitepressData.isDark.value,
+  () => {
+    ssendMessage()
+  }
+)
 
+function ssendMessage() {
+  if (iframe.value && iframe.value.contentWindow) {
+    iframe.value.contentWindow.postMessage(vitepressData.isDark.value, href.value)
+  }
 }
 
 function kebabToCamel(input: string): string {
-  return input.replace(/-([a-z])/g, (match, group) => group.toUpperCase());
+  return input.replace(/-([a-z])/g, (match, group) => group.toUpperCase())
 }
-
-
 </script>
 <style scoped>
 ::-webkit-scrollbar {