update：添加案例和查看Api文档按钮的创建

src/components/HeaderMenuBar.vue

@@ -8,23 +8,83 @@
         <el-breadcrumb separator="/">
             <el-breadcrumb-item :to="{ path: '/' }" class="text-base">首页</el-breadcrumb-item>
         </el-breadcrumb>
+
+        <div style="margin-left: auto;">
+            <el-button type="info" @click="showAddCaseDialog">添加案例</el-button>
+            <el-button type="info" @click="goToApiDocument">查看Api文档</el-button>
+        </div>
+
+        <el-dialog v-model="dialogVisible" title="添加案例" width="500">
+            <el-row>
+                <el-col :span="12">
+                    <span>案例名称</span>
+                </el-col>
+                <el-col :span="12">
+                    <el-input v-model="caseName" placeholder="请输入案例名称：" />
+                </el-col>
+            </el-row>
+            <el-upload drag multiple>
+                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                <div class="el-upload__text">
+                    <em>上传案例图片</em>
+                </div>
+                <template #tip>
+                <div class="el-upload__tip">
+                    请上传jpg/png格式的文件
+                </div>
+                </template>
+            </el-upload>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="addCase">添加</el-button>
+                </div>
+            </template>
+        </el-dialog>
     </el-header>
 </template>
 
 <script setup>
-import { Expand, Fold } from "@element-plus/icons-vue"
+import { ref } from "vue"
+import { Expand, Fold } from "@element-plus/icons-vue";
+import { useRouter } from 'vue-router';
+import { UploadFilled } from '@element-plus/icons-vue';
 
 const props = defineProps({
     isCollapse: {
       type: Boolean,
     }
 });
-
 const emit = defineEmits(['update:isCollapse']);
+const dialogVisible = ref(false)
+
+const caseName = ref('')
+const imageUrl = ref('/src/assets/PointOne.png')
+
+const router = useRouter()
+
+function goToApiDocument() {
+    router.push(`/ApiDocument`)
+}
 
 const toggleCollapse = () => {
     emit('update:isCollapse', !props.isCollapse);
 };
+
+// 打开添加案例对话框
+function showAddCaseDialog(){
+    dialogVisible.value = true;
+    caseName.value = '';
+}
+
+// 添加案例函数
+function addCase(){
+    const newCase = {
+        title: caseName.value,
+        pngUrl: imageUrl.value
+    };
+    console.log(newCase)
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/ApiDocument.vue

+<template>
+    <div>
+        这是接口文档
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file

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>
+        <Codemirror
+        v-model:value="code"
+        :options="cmOptions"
+        border
+        placeholder="test placeholder"
+        :height="200"
+        @change="change"
+        />
+        <iframe ref="iframe" class="preview" />
     </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)
+import { ref, onMounted } from 'vue';
+import Codemirror from "codemirror-editor-vue3";
+import code from '@/examples/point-two.vue?raw';
+
+// placeholder
+import "codemirror/addon/display/placeholder.js";
+
+// language
+import "codemirror/mode/vue/vue.js";
+// placeholder
+import "codemirror/addon/display/placeholder.js";
+// theme
+import "codemirror/theme/dracula.css";
+
+const iframe = ref(null);
+
+const cmOptions = {
+mode: "text/x-vue", // Change mode to Vue
+theme: "dracula", // Theme
 };
 
-// onMounted(() => {
-//     const iframeData = resultFrame.value.contentWindow;
-//     iframeData.document.open();
-//     iframeData.document.write('<html><body></body></html>');
-//     iframeData.document.close();
-// });
-</script>
+const change = (newCode) => {
+code.value = newCode;
+compileAndRender(newCode);
+};
 
-<style scoped>
-.container {
-    display: flex;
-    height: 100vh; /* 设置容器高度为视口高度 */
-}
-.left {
-    flex: 1; /* 左边部分占一半宽度 */
-    padding: 10px;
-}
-.right {
-    flex: 1; /* 右边部分占一半宽度 */
-    padding: 10px;
+const compileAndRender = (codeToCompile) => {
+try {
+    // Assuming you have a Vue compiler that can compile the code
+    const compiledCode = compileVueCode(codeToCompile);
+    const iframeDoc = iframe.value.contentDocument || iframe.value.contentWindow.document;
+    iframeDoc.open();
+    iframeDoc.write(`
+    <!DOCTYPE html>
+    <html>
+        <head>
+        <title>Preview</title>
+        <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js" />
+        </head>
+        <body>
+        <div id="app"></div>
+        <script>${compiledCode}<\/script>
+        </body>
+    </html>
+    `);
+    iframeDoc.close();
+} catch (error) {
+    console.error(error);
 }
-textarea {
-    width: 80%;
-    height: 200px;
-    margin-bottom: 20px;
-}
-iframe {
+};
+
+
+const compileVueCode = (code) => {
+// This is a placeholder for your actual Vue compiler logic
+// You need to implement a Vue compiler that can compile the Vue SFC code
+// For example, you can use @vue/compiler-sfc to compile the code
+return `
+    const { createApp } = Vue;
+    const App = ${code};
+    createApp(App).mount('#app');
+`;
+};
+
+onMounted(() => {
+    compileAndRender(code.value);
+});
+</script>
+
+<style>
+.preview {
     width: 100%;
-    height: 100%;
+    height: 400px;
+    border: 1px solid #ccc;
 }
 </style>
\ No newline at end of file

src/router/index.js

@@ -19,6 +19,11 @@ const routes = [
         component: () => import('@/pages/CodeAndCesium.vue'),
     },
     {
+        path: '/ApiDocument',
+        name: 'apidocument',
+        component: () => import('@/pages/ApiDocument.vue'),
+    },
+    {
         path: '/:pathMatch(.*)*',
         name: 'errorpage',
         component: () => import('@/pages/ErrorPage.vue'),