Skip to content

C
cesium-frame
Commit 6f8e2db5 by jlc
Options

update：Api界面的简单实现

parent e37b0b85
Showing with 124 additions and 97 deletions
src/components/AsideMenuBarApi.vue 0 → 100644
<template>
<el-aside>
<el-scrollbar>
<el-menu unique-opened :collapse="isCollapse">
<a href="/" class="logo">
<img src="@/assets/vue.svg" alt="">
<h1>Cesium Api</h1>
</a>
<el-menu-item v-for="item in ApiDatas" :key="item.id" :index="item.title" @click="goAnchor(item.apiName)">
<span>{{item.apiName}}</span>
</el-menu-item>
</el-menu>
</el-scrollbar>
</el-aside>
</template>
<script setup>
import { ref } from 'vue';
import { elementPointMap, elementLineMap, elementPlaneMap } from '@/views/ElementMap';
import { ApiDatas } from '@/pages/cesium_api_deep';
const elementPointData = ref()
const elementLineData = ref()
const elementPlaneData = ref()
elementPointData.value = elementPointMap;
elementLineData.value = elementLineMap;
elementPlaneData.value = elementPlaneMap;
const props = defineProps({
isCollapse: {
type: Boolean,
}
});
// 锚点跳转函数
function goAnchor(title) {
var anchor = document.getElementById(title);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth' });
}
}
</script>
<style lang="scss" scoped>
.el-aside{
background-color: #e9e9eb;
height: 100vh;
width: auto;
}
.el-menu{
background-color: #e9e9eb;
width: 200px;
border-right: none;
&.el-menu--collapse{
width: 60px;
& h1{
display: none;
}
}
}
.logo{
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: black;
height: 60px;
img{
width: 32px;
height: 32px;
}
}
</style>
\ No newline at end of file
src/pages/ApiDocument.vue
<template>
<div>
这是接口文档
<div class="app-continer">
<el-container>
<AsideMenuBarApi :isCollapse="isCollapse" @update:isCollapse="handleCollapseUpdate" />
<el-container class="main">
<el-main>
<el-scrollbar>
<div v-for="item in ApiDatas" :key="item.id" :index="item.title" class="mb-10">
<div :id="item.apiName">
<span class="text-base font-bold">{{item.apiName}}</span>
</div>
<div>
<span>{{item.description}}</span>
</div>
<div>
<span class="font-bold">members</span>
</div>
<div>
<span class="font-bold">methods</span>
</div>
<el-divider />
</div>
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import AsideMenuBarApi from '@/components/AsideMenuBarApi.vue';
import { ref } from "vue";
import { ApiDatas } from './cesium_api_deep';
const isCollapse = ref(false)
const handleCollapseUpdate = (newCollapseState) => {
isCollapse.value = newCollapseState;
};
</script>
<style lang="scss" scoped>
.app-continer{
width: 100vw;
height: 100vh;
}
.main{
flex-direction: column;
height: 100vh;
}
.el-main{
background-color: #f4f4f5;
padding-right: 0;
}
</style>
\ No newline at end of file
src/pages/CodeAndCesium.vue
......@@ -2,9 +2,9 @@
<div class="app-continer">
<SandpackProvider template="vue3" style="width: 100%; height: 100%;" :files="files">
<SandpackLayout class="h-[80%] w-full">
<div>
<!-- <div>
<SandpackFileExplorer />
</div>
</div> -->
<SandpackCodeEditor showLineNumbers style="height: 100%;" />
<SandpackPreview style="height: 100%;" />
</SandpackLayout>
......
src/pages/CodeAndCesiumTwo.vue deleted 100644 → 0
<template>
<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 { 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
};
const change = (newCode) => {
code.value = newCode;
compileAndRender(newCode);
};
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);
}
};
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: 400px;
border: 1px solid #ccc;
}
</style>
\ No newline at end of file
src/pages/cesium_api_deep.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment