单独拆分sandbox组件

docs/.vuepress/client.js

@@ -1,11 +1,13 @@
 import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
 import DynamicTitle from './components/DynamicTitle.vue'
+import DIframe from './components/DIframe.vue'
 
 // @see: https://v2.vuepress.vuejs.org/zh/advanced/cookbook/usage-of-client-config.html
 export default defineClientConfig({
   enhance({ app, router, siteData }) {
     app.component('DynamicTitle', DynamicTitle)
+    app.component('DIframe', DIframe)
   },
   setup() {},
   layouts: {

docs/.vuepress/components/DIframe.vue

@@ -0,0 +1,28 @@
+<script setup>
+// defineProps defineEmits defineExpose withDefaults
+import { reactive } from 'vue'
+
+const props = defineProps({
+  iframeSrc: ''
+})
+
+</script>
+
+<template>
+  <iframe :src="'https://onresize.github.io/react-ts-vite-admin/SandPack?codeType=' + props.iframeSrc" class="iframe-box"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midipayment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
+</template>
+
+<style scoped lang='scss'>
+.iframe-box {
+  width: 100%;
+  height: 500px;
+  border: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  border: 1px solid #e4e7ed;
+  border-radius: 10px;
+}
+</style>

docs/.vuepress/config/silder.js

@@ -47,7 +47,7 @@ export default [
       '/技术总结/踩坑总结/微前端',
       '/技术总结/踩坑总结/js地图开源库',
       '/技术总结/踩坑总结/前端监控',
-      '/技术总结/踩坑总结/高频面试题',
+      '/技术总结/踩坑总结/每日一题',
     ],
   },
   {