Skip to content

C
cesium-frame
Commit 3fc30bb2 by jlc
Options

update：第一次提交

parents
Showing with 580 additions and 0 deletions
.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.vscode
README.md 0 → 100644
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
index.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
jsconfig.json 0 → 100644
{
"compilerOptions": {
"baseUral": ".",
"paths": {
"@/*": ["src/*"] // 配置@符号指向src目录及其子目录
}
}
}
\ No newline at end of file
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "cesium-frame",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@codesandbox/sandpack-react": "^2.18.0",
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.7.7",
"sandpack-vue3": "^3.1.11",
"vue": "^3.4.29",
"vue-router": "^4.4.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.39",
"sass": "^1.77.8",
"tailwindcss": "^3.4.4",
"vite": "^5.3.1"
}
}
postcss.config.js 0 → 100644
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
public/vite.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/App.vue 0 → 100644
<template>
<CodeAndCesium />
<!-- <router-view /> -->
</template>
<script setup>
import CodeAndCesium from './pages/CodeAndCesium.vue';
</script>
\ No newline at end of file
src/AppLayout.vue 0 → 100644
<template>
<div class="w-screen h-screen">
<el-container>
<AsideMenuBar :isCollapse="isCollapse" @update:isCollapse="handleCollapseUpdate" />
<el-container class="header-and-main">
<HeaderMenuBar :isCollapse="isCollapse" @update:isCollapse="handleCollapseUpdate" />
<el-main>
<el-scrollbar>
<router-view />
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import AsideMenuBar from '@/components/AsideMenuBar.vue';
import HeaderMenuBar from '@/components/HeaderMenuBar.vue'
import { ref } from "vue";
const isCollapse = ref(false)
const handleCollapseUpdate = (newCollapseState) => {
isCollapse.value = newCollapseState;
};
</script>
<style lang="scss" scoped>
.header-and-main{
flex-direction: column;
height: 100vh;
}
.el-main{
background-color: #f4f4f5;
padding-right: 0;
}
</style>
\ No newline at end of file
src/assets/vue.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
src/components/AsideMenuBar.vue 0 → 100644
<template>
<el-aside>
<el-scrollbar>
<el-menu router unique-opened :collapse="isCollapse">
<a href="/" class="logo">
<img src="../assets/vue.svg" alt="">
<h1>Cesium</h1>
</a>
<el-sub-menu index="1">
<template #title>
<el-icon><Edit /></el-icon>
<span>点的案例</span>
</template>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>one</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>two</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>three</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><Edit /></el-icon>
<span>线的案例</span>
</template>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>one</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>two</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>three</span>
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<el-icon><Edit /></el-icon>
<span>面的案例</span>
</template>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>one</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>two</span>
</el-menu-item>
<el-menu-item index="/code">
<el-icon><Edit /></el-icon>
<span>three</span>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-scrollbar>
</el-aside>
</template>
<script setup>
import { Edit } from "@element-plus/icons-vue"
import { ref } from "vue";
const props = defineProps({
isCollapse: {
type: Boolean,
}
});
</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/components/Entrance.vue 0 → 100644
<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 { ref } from 'vue';
const jsCode = ref('');
const resultFrame = ref(null);
const execute = () => {
const iframeData = resultFrame.value.contentWindow;
iframeData.document.body.innerHTML = '';
iframeData.document.open();
iframeData.document.write(jsCode.value);
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: 2; /* 右边部分占一半宽度 */
padding: 10px;
}
textarea {
width: 80%;
height: 200px;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/FirstCesium.vue 0 → 100644
<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 0 → 100644
<template>
<el-header>
<el-icon @click="toggleCollapse">
<Expand v-show="isCollapse" />
<Fold v-show="!isCollapse" />
</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>
</el-header>
</template>
<script setup>
import { Expand, Fold } from "@element-plus/icons-vue"
import { ref } from "vue";
const props = defineProps({
isCollapse: {
type: Boolean,
}
});
const emit = defineEmits(['update:isCollapse']);
const toggleCollapse = () => {
emit('update:isCollapse', !props.isCollapse);
};
</script>
<style lang="scss" scoped>
.el-header{
display: flex;
align-items: center;
background-color: #dedfe0;
.el-icon{
margin-right: 15px;
}
}
</style>
\ No newline at end of file
src/index.css 0 → 100644
@tailwind base;
@tailwind components;
@tailwind utilities;
\ No newline at end of file
src/main.js 0 → 100644
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
router.beforeEach((to, from, next) => {
console.log("to:", to) //即将进入的路由信息
console.log("from:", from) //当前即将离开的路由信息
next() // 继续执行，如果注释掉，首页都不会显示
// 设置条件拦截
// if(to.name == 'codeandcesium'){
// next(false)
// }else{
// next()
// }
})
app.mount('#app')
\ No newline at end of file
src/pages/CodeAndCesium.vue 0 → 100644
<template>
<SandpackProvider template="vue3" class="w-screen h-screen" :files="files">
<SandpackLayout class="h-[80%] w-full">
<SandpackCodeEditor showLineNumbers style="height: 100%;" />
<SandpackPreview style="height: 100%;" />
</SandpackLayout>
<SandpackLayout class="h-[20%] w-full">
<SandpackConsole style="height: 100%;" class="bg-zinc-100" />
</SandpackLayout>
</SandpackProvider>
</template>
<script setup>
import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview, SandpackConsole } from 'sandpack-vue3';
import { ref } from 'vue';
const vueCode = `<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);
});
<style>
.cesium-container {
width: 100%;
height: 100vh;
}
</style>`;
const files = ref({
"src/App.vue": {
code: vueCode,
readOnly: false,
active: true,
hidden: false
}
});
</script>
<style scoped>
</style>
\ No newline at end of file
src/pages/ErrorPage.vue 0 → 100644
<template>
error
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/pages/Home.vue 0 → 100644
<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/router/index.js 0 → 100644
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{// 首页界面
path: '/', //根据path进行界面的先后跳转，path为/表示打开浏览器就打开的界面
name: 'home',
component: () => import('@/AppLayout.vue'),
children: [
{
path: '',
component: () => import('@/views/indexView.vue') // 使用懒加载
},
]
},
{
path: '/CodeAndCesium/:id/title/:title?',
alias: ["/code", "/cesium"],
name: 'codeandcesium',
component: () => import('@/pages/CodeAndCesium.vue'),
},
{
path: '/:pathMatch(.*)*',
name: 'errorpage',
component: () => import('@/pages/ErrorPage.vue'),
}
]
const router = createRouter({ // 创建路由器
history: createWebHistory(), //路由的表现方式
routes // 路由规则
})
export default router
\ No newline at end of file
src/views/indexView.vue 0 → 100644
<template>
<h1>默认显示的首页</h1>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
tailwind.config.js 0 → 100644
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx,vue}",
],
theme: {
extend: {},
},
plugins: [],
}
vite.config.js 0 → 100644
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: { // 配置路径别名
'@': path.resolve(__dirname, 'src') // 用@代表src文件夹
}
}
})
yarn.lock 0 → 100644
This diff is collapsed. Click to expand it.
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