chore(组件): 增加小地图

docs/.vitepress/i18n/pages/component.json

@@ -35,6 +35,10 @@
         {
           "link": "/daikan",
           "text": "daikan带看"
+        },
+        {
+          "link": "/minmap",
+          "text": "minmap小地图"
         }
       ]
     }

docs/examples/minmap/basic.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, provide, ref } from 'vue'
+import { KkButton, KkMinmap } from 'kankan-components'
+
+const loading = ref(false)
+const mapShow = ref(false)
+const minMap = ref(null)
+
+onMounted(() => {
+  const __win = window as any
+  if (!__win.__sdk) {
+    const __sdk = (__win.__sdk = new __win.KanKan({
+      num: 'KJ-t-wOXfx2SDFy',
+      server: '#DEMOSEVER#',
+    }))
+    provide('__sdk', __sdk)
+    __sdk.Scene.on('ready', () => (loading.value = true))
+    __sdk.use('MinMap').then(() => {
+      mapShow.value = true
+    })
+    __sdk.mount('#scene').render()
+  }
+})
+onUnmounted(() => {
+  const __win = window as any
+  if (__win.__sdk) {
+    __win.__sdk = null
+  }
+})
+</script>
+
+<template>
+  <div id="scene" class="scene">
+    <div class="test-control">
+      <kk-button
+        @click="
+          () => {
+            mapShow = true
+          }
+        "
+        >打开小地图</kk-button
+      >
+      <kk-button
+        type="primary"
+        mr4
+        @click="
+          () => {
+            mapShow = false
+          }
+        "
+        >关闭小地图</kk-button
+      >
+    </div>
+
+    <Teleport v-if="loading" to=".kankan-plugins">
+      <kk-minmap ref="minMap" :show="mapShow" />
+    </Teleport>
+  </div>
+</template>
+<style>
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+.scene {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+.test-control {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 200px;
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>

docs/examples/minmap/custom.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, provide, ref } from 'vue'
+import { KkButton, KkIcon, KkMinmap } from 'kankan-components'
+
+const loading = ref(false)
+const mapShow = ref(false)
+const minMap = ref(null)
+
+onMounted(() => {
+  const __win = window as any
+  if (!__win.__sdk) {
+    const __sdk = (__win.__sdk = new __win.KanKan({
+      num: 'KJ-t-wOXfx2SDFy',
+      server: '#DEMOSEVER#',
+    }))
+    provide('__sdk', __sdk)
+    __sdk.Scene.on('ready', () => (loading.value = true))
+    //sdk 改变主配色
+    __sdk.use('MinMap', { theme: { camera_fillStyle: '#B8A965' } }).then(() => {
+      mapShow.value = true
+    })
+    __sdk.mount('#scene').render()
+  }
+})
+onUnmounted(() => {
+  const __win = window as any
+  if (__win.__sdk) {
+    __win.__sdk = null
+  }
+})
+</script>
+
+<template>
+  <div id="scene" class="scene">
+    <div class="test-control">
+      <kk-button
+        @click="
+          () => {
+            mapShow = true
+          }
+        "
+        >打开小地图</kk-button
+      >
+      <kk-button
+        type="primary"
+        mr4
+        @click="
+          () => {
+            mapShow = false
+          }
+        "
+        >关闭小地图</kk-button
+      >
+    </div>
+
+    <Teleport v-if="loading" to=".kankan-plugins">
+      <kk-minmap ref="minMap" :show="mapShow">
+        自定义：<kk-icon type="updown" />
+      </kk-minmap>
+    </Teleport>
+  </div>
+</template>
+<style>
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+.scene {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+.test-control {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 200px;
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.kk-minmap[xui_min_map] {
+  right: 20px;
+  top: 20px;
+  left: initial;
+  width: 102px;
+  height: 100px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.kk-minmap__container {
+  color: #fff;
+  margin-top: 98%;
+  font-size: 10px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>

docs/zh-CN/component/minmap.md

@@ -0,0 +1,48 @@
+---
+title: Minmap小地图
+lang: zh-CN
+---
+
+# Minmap 小地图
+
+Minmap 小地图 使用如下。
+
+## 基本用法
+
+:::repl
+
+minmap/basic
+
+:::
+
+## 自定义 UI 模版
+
+:::repl xui_min_map 是小地图 elementId，可以.kk-minmap[xui_min_map]做 css 容器选择，slot 是可以新增的 UI 内容
+
+minmap/custom
+
+:::
+
+## Minmap 小地图 属性
+
+| 名称                     | 描述       | 类型      | 默认    |
+| ------------------------ | ---------- | --------- | ------- |
+| `color`<DeprecatedTag /> | 小地图主色 | `string`  | #4dd8c7 |
+| `show`                   | 小地图开关 | `boolean` | false   |
+
+:::tip
+color 由于 sdk 在组件里 render order 的问题，直接由 sdk apply 改变，待 sdk MinMap 加 setColor function 后调。
+:::
+
+## Minmap Slots
+
+| 名称      | 描述    |
+| --------- | ------- |
+| `default` | slot Id |
+
+### 对外暴露的方法
+
+| 名称 | 说明        | 类型                    |
+| ---- | ----------- | ----------------------- |
+| show | 使 地图显示 | ^[Function]`() => void` |
+| hide | 使 地图隐藏 | ^[Function]`() => void` |

packages/components/advance/minmap/src/minmap.ts

@@ -1,5 +1,5 @@
 import { buildProps } from '@kankan-components/utils'
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 
 export const minmapProps = buildProps({
   show: {
@@ -10,7 +10,7 @@ export const minmapProps = buildProps({
   color: {
     type: String,
     required: false,
-    default: '#ED5D18',
+    default: '#4dd8c7',
   },
 } as const)
 

packages/components/advance/minmap/src/minmap.vue

@@ -1,24 +1,53 @@
 <template>
-  <Teleport v-if="loading" to="[xui_min_map]">
-    <div :class="[ns.b()]">
+  <Teleport v-if="props.show" to="[xui_min_map]">
+    <div :ref="eleRef" :class="[ns.e('container')]">
       <slot />
     </div>
   </Teleport>
 </template>
 <script lang="ts" setup>
-import { inject, ref } from 'vue'
+import { inject, ref, watchEffect } from 'vue'
 import { useNamespace } from '@kankan-components/hooks'
+import { minmapProps } from './minmap'
 
 const ns = useNamespace('minmap')
-
-const loading = ref(false)
+const __sdk: any = inject('__sdk')
+const eleRef = ref('minmap')
 
 defineOptions({
   name: 'KkMinmap',
 })
 
-const __sdk: any = inject('__sdk')
-__sdk.use('MinMap', { theme: { camera_fillStyle: '#ED5D18' } }).then(() => {
-  loading.value = true
+const show = (): void => {
+  if (__sdk) {
+    __sdk.MinMap.show()
+  }
+}
+const hide = (): void => {
+  if (__sdk) {
+    __sdk.MinMap.hide()
+  }
+}
+
+const props = defineProps(minmapProps)
+watchEffect(() => {
+  if (props.show) {
+    document.querySelector('[xui_min_map]')?.classList.add(ns.b())
+    show()
+  } else {
+    hide()
+  }
+})
+// __sdk.use('MinMap', { theme: { camera_fillStyle: props.color } }).then(() => {
+//   // loading.value = true
+//   if (document.querySelector('[xui_min_map]')) {
+//     document.querySelector('[xui_min_map]')?.classList.add(ns.b())
+//   }
+// })
+
+defineExpose({
+  ref: eleRef,
+  show,
+  hide,
 })
 </script>

packages/components/basic/button/src/button.ts

@@ -1,6 +1,6 @@
 import { useSizeProp } from '@kankan-components/hooks'
 import { buildProps, definePropType } from '@kankan-components/utils'
-import { Loading } from '@element-plus/icons-vue'
+import { Loading } from '@kankan-components/icons-vue'
 import type { Component, ExtractPropTypes } from 'vue'
 
 const iconPropType = definePropType<string | Component>([

packages/components/basic/button/src/button.vue

@@ -23,9 +23,9 @@
   >
     <template v-if="loading">
       <slot v-if="$slots.loading" name="loading" />
-      <el-icon v-else :class="ns.is('loading')">
+      <kk-icon v-else :class="ns.is('loading')">
         <component :is="loadingIcon" />
-      </el-icon>
+      </kk-icon>
     </template>
     <kk-icon v-else-if="icon || $slots.icon">
       <component :is="icon" v-if="icon" />

packages/kankan-components/component.ts

@@ -6,6 +6,7 @@ import { KkInput } from '@kankan-components/components/basic/input'
 
 import { KkTag } from '@kankan-components/components/advance/tag'
 import { KkDaikan } from '@kankan-components/components/advance/daikan'
+import { KkMinmap } from '@kankan-components/components/advance/minmap'
 import type { Plugin } from 'vue'
 
 export default [
@@ -16,4 +17,5 @@ export default [
   KkInput,
   KkTag,
   KkDaikan,
+  KkMinmap,
 ] as Plugin[]

playground/src/pages/minmap.vue

@@ -1,21 +1,33 @@
 <script setup lang="ts">
 import { onMounted, inject, ref } from 'vue'
-import { KkMinmap } from '@kankan-components/components'
+import { KkMinmap, KkIcon } from '@kankan-components/components'
 
 import '@kankan-components/theme-chalk/src/index.scss'
 const __sdk: any = inject('__sdk')
 
 const loading = ref(false)
+const mapShow = ref(false)
+const minMap = ref(null)
 
 onMounted(async () => {
-  __sdk.Scene.on('loaded', () => (loading.value = true))
+  __sdk.Scene.on('ready', () => (loading.value = true))
+  __sdk.use('MinMap').then(() => {
+    mapShow.value = true
+  })
+  // __sdk.use('MinMap', { theme: { camera_fillStyle: "#B8A965" }})
   __sdk.mount('#scene').render()
 })
+onMounted(() => {})
+// setTimeout(() => {
+//   mapShow.value = false
+// }, 5000)
 </script>
 
 <template>
   <div id="scene">
-    <kk-minmap />
+    <kk-minmap ref="minMap" :show="mapShow">
+      <kk-icon type="arrow"></kk-icon>
+    </kk-minmap>
   </div>
 </template>