|
@@ -46,7 +46,12 @@
|
|
|
content-class="layoutContent"
|
|
|
:native-scrollbar="false"
|
|
|
>
|
|
|
- <router-view />
|
|
|
+ <div class="app-wrap">
|
|
|
+ <div class="app-scene" ref="sceneRef"></div>
|
|
|
+ </div>
|
|
|
+ <div class="app-view">
|
|
|
+ <router-view />
|
|
|
+ </div>
|
|
|
</n-layout-content>
|
|
|
</n-layout>
|
|
|
</n-layout>
|
|
@@ -54,8 +59,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { useSDK } from '@/sdk'
|
|
|
import { darkTheme, lightTheme } from 'naive-ui'
|
|
|
-import { computed, ref, watchEffect, h } from 'vue'
|
|
|
+import { computed, ref, watchEffect, h, onMounted } from 'vue'
|
|
|
import type { Component } from 'vue'
|
|
|
import {
|
|
|
ChevronBackOutline,
|
|
@@ -75,6 +81,7 @@ const prefersDark: boolean = darkStore
|
|
|
|
|
|
const mode = ref<boolean>(prefersDark)
|
|
|
const theme = computed(() => (mode.value ? darkTheme : lightTheme))
|
|
|
+const sceneRef = ref()
|
|
|
|
|
|
watchEffect(() => {
|
|
|
localStorage.setItem('dark', `${mode.value}`)
|
|
@@ -173,6 +180,15 @@ const menuOptions = [
|
|
|
const handleUpdateValue = (value: string) => {
|
|
|
console.log(value)
|
|
|
}
|
|
|
+
|
|
|
+const sdk = useSDK()
|
|
|
+sdk.use('MinMap')
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ sdk.mount(sceneRef.value)
|
|
|
+ sdk.render()
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="sass">
|
|
@@ -181,6 +197,25 @@ const handleUpdateValue = (value: string) => {
|
|
|
-webkit-font-smoothing: antialiased
|
|
|
-moz-osx-font-smoothing: grayscale
|
|
|
.layoutContent
|
|
|
- padding: 10px
|
|
|
- max-height: calc(100vh - 83px)
|
|
|
+ position: relative
|
|
|
+ padding: 0px
|
|
|
+ height: calc(100vh - 83px)
|
|
|
+ overflow: hidden
|
|
|
+.app-wrap,.app-view
|
|
|
+ position: absolute
|
|
|
+ left: 0
|
|
|
+ top: 0
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+ z-index: 10
|
|
|
+.app-view
|
|
|
+ z-index: 100
|
|
|
+
|
|
|
+.app-scene
|
|
|
+ width: 100%
|
|
|
+ height: 100%
|
|
|
+
|
|
|
+[xui_min_map]
|
|
|
+ right:10px
|
|
|
+ top:10px
|
|
|
</style>
|