rindy 10 місяців тому
батько
коміт
02baf09fe0
4 змінених файлів з 9837 додано та 4 видалено
  1. 2 0
      index.html
  2. 9764 0
      pnpm-lock.yaml
  3. 39 4
      src/App.vue
  4. 32 0
      src/sdk.js

+ 2 - 0
index.html

@@ -8,6 +8,8 @@
   </head>
   <body>
     <div id="app"></div>
+    <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk-deps.js"></script>
+    <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk.js"></script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

Різницю між файлами не показано, бо вона завелика
+ 9764 - 0
pnpm-lock.yaml


+ 39 - 4
src/App.vue

@@ -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>

+ 32 - 0
src/sdk.js

@@ -0,0 +1,32 @@
+let config = {
+    server: 'https://www.4dkankan.com',
+   // edition: 'v2',
+    view: true,// 开启编辑模式
+    useAuth: false // 开启鉴权模式
+}
+
+let __sdk = null
+let setup = null
+
+export function useSDK() {
+    if (__sdk === null) {
+        let sps = new URLSearchParams(location.search.substring(1))
+        let num = sps.get('m')
+        if (num) {
+            config.num = num
+        } else {
+            config.num = 'KJ-D6w2oMLtWQQ'
+        }
+        __sdk = window.__sdk = new window.KanKan(config)
+        setup && setup(__sdk)
+    }
+    return __sdk
+}
+
+export function useSDKSetup(options) {
+    if (typeof options.setup === 'function') {
+        setup = options.setup
+        delete options.setup
+    }
+    Object.assign(config, options || {})
+}