update：首页样式修改

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.18.0",
     "@element-plus/icons-vue": "^2.3.1",
+    "cesium": "1.99",
     "element-plus": "^2.7.7",
+    "sandpack-file-explorer": "^0.0.7",
     "sandpack-vue3": "^3.1.11",
     "vue": "^3.4.29",
     "vue-router": "^4.4.0"

src/components/FirstCesium.vue

-<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 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);
-});
-</script>
-
-<style>
-.cesium-container {
-    width: 100%;
-    height: 100vh;
-}
-</style>
\ No newline at end of file

src/components/HeaderMenuBar.vue

@@ -6,11 +6,7 @@
         </el-icon>
 
         <el-breadcrumb separator="/">
-            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-            <el-breadcrumb-item>
-                <a href="/">点的案例</a>
-            </el-breadcrumb-item>
-            <el-breadcrumb-item>first</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/' }" class="text-base">首页</el-breadcrumb-item>
         </el-breadcrumb>
     </el-header>
 </template>

src/components/constant.js

-export const menuMap = {
-    
-}
\ 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">
+        <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> -->
             <SandpackLayout class="h-[80%] w-full">
+                <div>
+                    <SandpackFileExplorer />
+                </div>
                 <SandpackCodeEditor showLineNumbers style="height: 100%;" />
                 <SandpackPreview style="height: 100%;" />
             </SandpackLayout>
@@ -13,7 +27,8 @@
 </template>
 
 <script setup>
-import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole } from 'sandpack-vue3';
+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';
@@ -26,9 +41,21 @@ const files = ref({
         readOnly: false,
         active: true,
         hidden: false
+    },
+    "src/function.js": {
+        code: "// 请在这里编写js代码"
     }
 });
 
+const customSetup = ref({
+    // entry: '/App.vue',
+    // environment: 'vue-cli',
+
+    // dependencies: {
+    //     "cesium": "1.99",
+    // },
+});
+
 onMounted(() =>{
     vueCode.value = findVueCodeById(route.query.id)
 })

src/pages/Home.vue

-<template>
-	<router-link to="/codeAndCesium/007/title/在线编译器">路径传参</router-link>
-    <hr />
-    id: {{ $route.query.id }}
-    title: {{ $route.query.title }}
-
-    <el-button @click="goTo">使用编程式导航跳转</el-button>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const goTo = () => {
-    router.push("/codeAndCesium/007/title")
-}
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file

src/views/indexView.vue

@@ -66,5 +66,11 @@ function indexBtn(id) {
   flex-direction: column;
   align-items: center;
   padding: 10px;
+  transition: background-color 0.3s; /* 添加过渡效果 */
+
+  &:hover {
+    background-color: #e9e7e7;
+    cursor: pointer;
+  }
 }
 </style>
\ No newline at end of file