feat(文档更改): 文档植入demo

playground/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, inject } from 'vue'
 import { UIAudio, UIButton, UIIcon, UIInput } from '@kankan-components/components'
-import Tags from './components/tag/Tags.vue'
+import TagManager from './components/tag/TagManager.vue'
 // import { buildProps } from '@kankan-components/utils';
 // import { h } from 'vue';
 // import * as KanKanSDK from '@kankan/sdk';
@@ -15,7 +15,7 @@ onMounted(async () => {
 
 <template>
     <div id="scene">
-        <Tags />
+        <TagManager />
     </div>
     <div id="scene-front">
         <UIAudio src="http://samplelib.com/lib/preview/mp3/sample-3s.mp3" />

playground/src/components/tag/TagManager.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Ref, ref, inject, watch } from 'vue'
+import TagView from './TagView.vue'
+
+const __sdk: any = inject('__sdk')
+const notify = ref({ event: '', sid: '' })
+const tags: Ref<Array<any>> = ref([])
+
+watch(notify, () => {
+    if (notify.value.event == 'hover') {
+        // 强制清除上次点中的热点id，防止hover方式展开时，下次点选时还是相同的热点id
+        __sdk.TagManager.unfocusTag()
+    } else if (notify.value.event == 'focus') {
+        __sdk.TagManager.focusTag(notify.value.sid, { direction: 'left' })
+    }
+})
+
+__sdk.Camera.on('flying.started', (params: any) => {
+    // 切换点位时关闭弹窗
+    if (!params.isTagFlying) {
+        notify.value = { event: '', sid: '' }
+    }
+})
+
+__sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))
+
+// 点击热点时触发
+__sdk.TagManager.on('focus', (newId: string, oldId: string) => {
+    if (newId == oldId) {
+        notify.value = { event: '', sid: '' }
+    }
+})
+
+// 调用打开热点触发
+__sdk.TagManager.on('open', (sid: string) => {
+    notify.value = { event: 'focus', sid }
+})
+// 调用sdk关闭热点触发
+__sdk.TagManager.on('close', (sid: string) => {
+    notify.value = { event: '', sid: '' }
+})
+</script>
+
+<template>
+    <Teleport to=".kankan-plugins" v-if="tags.length">
+        <div xui_tags_view>
+            <TagView v-for="item in tags" :tag="item" :notify="notify" @action="action => (notify = action)" />
+        </div>
+    </Teleport>
+</template>
+<style scoped>
+[xui_tags_view] {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+</style>

playground/src/components/tag/TagView.vue

@@ -1,36 +1,65 @@
 <script setup lang="ts">
 import { type PropType } from 'vue'
+
 interface Tag {
     x: Number
     y: Number
     sid: string
     visible: boolean
 }
+
+interface Notify {
+    sid: string
+    event: string
+}
+
 const props = defineProps({
     tag: {
         type: Object as PropType<Tag>,
         required: true,
     },
+    notify: {
+        type: Object as PropType<Notify>,
+        required: true,
+    },
 })
+
+const emits = defineEmits(['action'])
+
+const onHover = (hover: boolean) => {
+    // 如果是其他事件打开模板，则不触发hover
+    if (props.notify.sid && props.tag.sid == props.notify.sid && props.notify.event == 'focus') {
+        return
+    }
+
+    if (hover) {
+        emits('action', { event: 'hover', sid: props.tag.sid })
+    } else {
+        emits('action', { event: '', sid: '' })
+    }
+}
+const onFocus = () => {
+    emits('action', { event: 'focus', sid: props.tag.sid })
+}
 </script>
 
 <template>
-    <div :data-tag-id="props.tag.sid" :style="{ transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }">
-        <span class="tag-icon animate" style="background-image: url(http://4dkk.4dage.com/v4/sdk/4.2.2/images/tag_icon_default.svg)"></span>
+    <div
+        @mouseenter="onHover(true)"
+        @mouseleave="onHover(false)"
+        @click="onFocus"
+        :data-tag-id="props.tag.sid"
+        :style="{ transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }"
+        class="tag-item"
+    >
+        <i class="tag-icon animate" style="background-image: url(http://4dkk.4dage.com/v4/sdk/4.2.2/images/tag_icon_default.svg)"></i>
+        <transition>
+            <div class="tag-body" v-if="props.tag.sid == notify.sid" @click.stop @mouseenter.stop @mouseleave.stop>sdfsdf</div>
+        </transition>
     </div>
 </template>
 <style scoped>
-div {
-    position: absolute;
-}
-</style>
-<style>
-[xui_tags_view] {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-[xui_tags_view] > div {
+.tag-item {
     pointer-events: all;
     display: none;
     position: absolute;
@@ -41,17 +70,20 @@ div {
     z-index: 1;
 }
 
-[xui_tags_view] > div.focus {
+.tag-item.focus {
     z-index: 2;
 }
-[xui_tags_view] > div.fixed {
+.tag-item.focus .tag-body {
+    transform: translateY(-50%) scale(1);
+}
+.tag-item.fixed {
     z-index: 3;
 }
-[xui_tags_view] > div.active {
+.tag-item.active {
     z-index: 4;
 }
 
-[xui_tags_view] .tag-icon {
+.tag-item .tag-icon {
     display: block;
     width: 48px;
     height: 48px;
@@ -59,10 +91,51 @@ div {
     cursor: pointer;
 }
 
-[xui_tags_view] .tag-icon.animate {
+.tag-item .tag-icon.animate {
     animation: tag-animate-zoom 3s -1s linear infinite;
 }
 
+.tag-item .tag-body {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    margin-right: 70px;
+    width: 200px;
+    height: 200px;
+    transform: translateY(-50%) scale(1);
+    transform-origin: calc(100% + 40px) -50%;
+    background: rgba(27, 27, 28, 0.8);
+    border-radius: 4px;
+    min-width: 400px;
+    padding: 30px 20px;
+}
+
+.tag-item .tag-body::before {
+    content: '';
+    position: absolute;
+    width: 40px;
+    height: 100%;
+    top: 0;
+    right: -40px;
+}
+
+.tag-item .tag-body::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -39px;
+    width: 0;
+    height: 0;
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    border-left: 40px solid rgba(27, 27, 28, 0.8);
+    transform: translateY(-50%);
+}
+
+.tag-item .tag-body.show {
+    transform: translateY(-50%) scale(1);
+}
+
 @keyframes tag-animate-zoom {
     0% {
         transform: scale(1);
@@ -74,4 +147,20 @@ div {
         transform: scale(1);
     }
 }
+
+.tag-item .v-enter-from,
+.tag-item .v-leave-to {
+    opacity: 0;
+    transform: translateY(50%) scale(0);
+}
+.tag-item .v-enter-active,
+.tag-item .v-leave-active {
+    will-change: transform;
+    transition: all 0.25s cubic-bezier(0.35, 0.32, 0.65, 0.63);
+}
+.tag-item .v-enter-to,
+.tag-item .v-leave-from {
+    opacity: 1;
+    transform: translateY(-50%) scale(1);
+}
 </style>

playground/src/components/tag/Tags.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { Ref, ref, inject } from 'vue'
-import TagView from './TagView.vue'
-
-const __sdk: any = inject('__sdk')
-const tags: Ref<Array<any>> = ref([])
-__sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))
-</script>
-
-<template>
-    <Teleport to=".kankan-plugins" v-if="tags.length">
-        <div xui_tags_view>
-            <TagView v-for="item in tags" :tag="item" />
-        </div>
-    </Teleport>
-</template>
-<style scoped>
-[xui_tags_view] {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-[xui_tags_view] > div {
-    pointer-events: all;
-    display: none;
-    position: absolute;
-    width: 48px;
-    height: 48px;
-    margin-left: -24px;
-    margin-top: -24px;
-    z-index: 1;
-}
-
-[xui_tags_view] > div.focus {
-    z-index: 2;
-}
-[xui_tags_view] > div.fixed {
-    z-index: 3;
-}
-[xui_tags_view] > div.active {
-    z-index: 4;
-}
-
-[xui_tags_view] .tag-icon {
-    display: block;
-    width: 48px;
-    height: 48px;
-    background-size: cover;
-    cursor: pointer;
-}
-
-[xui_tags_view] .tag-icon.animate {
-    animation: tag-animate-zoom 3s -1s linear infinite;
-}
-
-@keyframes tag-animate-zoom {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(0.7);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-</style>

playground/src/sdk.ts

@@ -2,9 +2,10 @@ import { App } from 'vue'
 
 const __win = window as any
 const __sdk = (__win.__sdk = new __win.KanKan({
-    num: 'KJ-JYo2ZZyKKJ',
+    num: 'KJ-SliKVkJY',
     server: 'https://www.4dkankan.com/',
 }))
+
 export { __sdk }
 
 export const installSDK = {