update：修改了案例文件的读取方式

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.18.0",
     "@element-plus/icons-vue": "^2.3.1",
+    "@swc/core": "^1.6.13",
     "cesium": "1.99",
     "element-plus": "^2.7.7",
     "sandpack-file-explorer": "^0.0.7",
@@ -24,6 +25,8 @@
     "postcss": "^8.4.39",
     "sass": "^1.77.8",
     "tailwindcss": "^3.4.4",
+    "tsup": "^8.1.1",
+    "typescript": "^5.5.3",
     "vite": "^5.3.1"
   }
 }

src/examples/CodeMap.js

-import { vueCode as vueCodeOne } from '@/examples/first-one.js'
-import { vueCode as vueCodeTwo } from '@/examples/first-two.js'
+import vueCodePointOne from '@/examples/point-one.vue?raw'
+import vueCodePointTwo from '@/examples/point-two.vue?raw'
 
 const vueCodeMap = {
-    pointOne: vueCodeOne,
-    pointTwo: vueCodeTwo
+    pointOne: vueCodePointOne,
+    pointTwo: vueCodePointTwo
 }
 
 export function findVueCodeById(id){

src/examples/first-two.js

-export const vueCode = `<template>
-<div id="cesiumContainer" class="cesium-container"></div>
-</template>
-<script setup>
-
-<${'/'}script>
-<style>
-.cesium-container {
-width: 100%;
-height: 100vh;
-}
-</style>`;
\ No newline at end of file

src/examples/first-one.js → src/examples/point-one.vue

-export const vueCode = `<template>
-<div id="cesiumContainer" class="cesium-container"></div>
+<template>
+    <div id="cesiumContainer" class="cesium-container"></div>
 </template>
 <script setup>
 import { onMounted } from 'vue';
 
 onMounted(() => {
-const script = document.createElement('script');
-script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
-script.onload = () => {
-    window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
+    const script = document.createElement('script');
+    script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js';
+    script.onload = () => {
+        window.Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
 
-    const viewer = new window.Cesium.Viewer('cesiumContainer', {
-        infoBox: false,
-    });
-};
-document.head.appendChild(script);
+        const viewer = new window.Cesium.Viewer('cesiumContainer', {
+            infoBox: false,
+        });
+    };
+    document.head.appendChild(script);
 
-const link = document.createElement('link');
-link.rel = 'stylesheet';
-link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
-document.head.appendChild(link);
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css';
+    document.head.appendChild(link);
 });
-<${'/'}script>
+</script>
+
 <style>
 .cesium-container {
 width: 100%;
 height: 100vh;
 }
-</style>`;
\ No newline at end of file
+</style>
\ No newline at end of file

src/examples/point-two.vue

+<template>
+  <button @click="btn">点击按钮</button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+function btn(){
+  console.log(111)
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/pages/CodeAndCesium.vue

 <template>
     <div class="app-continer">
-        <SandpackProvider template="vue3" style="width: 100%; height: 100%;" :files="files" :customSetup="customSetup">
-            <!-- <SandpackLayout>
-                <div :style="{ display: 'flex', width: '100%', minHeight: '300px', maxHeight: '300px', backgroundColor: 'var(--sp-colors-surface1)' }">
-                    <div :style="{ minWidth: '150px', maxWidth: '300px', overflow: 'hidden' }">
-                        <SandpackFileExplorer />
-                    </div>
-                    <div :style="{ flex: 'min-content' }">
-                        <SandpackCodeEditor :wrapContent="true" :style="{ minHeight: '100%', maxHeight: '100%', overflow: 'auto' }" :showTabs="true" :closableTabs="true":showInlineErrors="true" :showLineNumbers="true" />
-                    </div>
-                </div>
-                <SandpackPreview />
-            </SandpackLayout> -->
+        <SandpackProvider template="vue3" style="width: 100%; height: 100%;" :files="files">
             <SandpackLayout class="h-[80%] w-full">
                 <div>
                     <SandpackFileExplorer />
@@ -28,7 +17,6 @@
 
 <script setup>
 import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole, SandpackFileExplorer } from 'sandpack-vue3';
-// import { SandpackFileExplorer } from 'sandpack-file-explorer';
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { findVueCodeById } from '@/examples/CodeMap.js';
@@ -42,18 +30,6 @@ const files = ref({
         active: true,
         hidden: false
     },
-    "src/function.js": {
-        code: "// 请在这里编写js代码"
-    }
-});
-
-const customSetup = ref({
-    // entry: '/App.vue',
-    // environment: 'vue-cli',
-
-    // dependencies: {
-    //     "cesium": "1.99",
-    // },
 });
 
 onMounted(() =>{

src/pages/CodeAndCesiumTwo.vue

+<template>
+    <div class="container">
+        <div class="left">
+            <el-button @click="execute" type="primary">运行</el-button>
+            <el-input v-model="jsCode" type="textarea" placeholder="Enter your HTML code here..." />
+        </div>
+        <div class="right">
+            <iframe ref="resultFrame"></iframe>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const jsCode = ref('');
+const resultFrame = ref(null);
+const htmlCode = ref('');
+
+const execute = () => {
+    const iframeData = resultFrame.value.contentWindow;
+    iframeData.document.body.innerHTML = '';
+    iframeData.document.open();
+    iframeData.document.write();
+    iframeData.document.close();
+    console.log(jsCode.value)
+    console.log(iframeData.document)
+};
+
+// onMounted(() => {
+//     const iframeData = resultFrame.value.contentWindow;
+//     iframeData.document.open();
+//     iframeData.document.write('<html><body></body></html>');
+//     iframeData.document.close();
+// });
+</script>
+
+<style scoped>
+.container {
+    display: flex;
+    height: 100vh; /* 设置容器高度为视口高度 */
+}
+.left {
+    flex: 1; /* 左边部分占一半宽度 */
+    padding: 10px;
+}
+.right {
+    flex: 1; /* 右边部分占一半宽度 */
+    padding: 10px;
+}
+textarea {
+    width: 80%;
+    height: 200px;
+    margin-bottom: 20px;
+}
+iframe {
+    width: 100%;
+    height: 100%;
+}
+</style>
\ No newline at end of file

tsup.config.js

+import { defineConfig } from "tsup";
+
+export default defineConfig([
+  {
+    entry: ["./node_modules/vue/index.js"],
+    treeshake: true,
+    minify: true,
+    verbose: true,
+    dts: true,
+    external: ["vue"],
+    clean: true,
+    outDir: "./build-sandpack/vue",
+  },
+]);
\ No newline at end of file