feat(组件): tag 抽调业务和更换标准化,增加slot

packages/components/advance/tag/src/TagEditor.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { type PropType } from 'vue'
-
-interface TagType {
-    x: number
-    y: number
-    sid: string
-    visible: boolean
-}
-const props = defineProps({
-    tag: {
-        type: Object as PropType<TagType>,
-        required: true,
-    },
-})
-</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)" />
-    </div>
-</template>
-<style scoped>
-div {
-    position: absolute;
-}
-</style>
-<style>
-[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>

packages/components/advance/tag/src/TagView.vue

@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { type PropType, onMounted, ref } from 'vue'
-import ShowTag from './showTag.vue'
-
-const props = defineProps({
-    tag: {
-        type: Object as PropType<TagContent>,
-        required: true,
-    },
-})
-
-const emit = defineEmits(['click'])
-
-const isShow = ref<boolean>(false)
-const isClick = ref<boolean>(false)
-const handleMouseEnter = (event: MouseEvent, tag: any, index?: number | undefined) => {
-    // console.log('in', event)
-    isShow.value = true
-}
-const handleMouseLeave = (event: MouseEvent, tag: any, index?: number | undefined) => {
-    // console.log('out', event)
-    isShow.value = false
-    // isClick.value = false
-}
-
-const handleTagClick = (tagId: string) => {
-    isClick.value = !isClick.value
-    emit('click', {
-        id: tagId,
-        isClick: isClick.value,
-    })
-}
-
-onMounted(() => {
-    console.log('tag', props.tag)
-})
-</script>
-
-<template>
-    <div
-        :data-tag-id="tag.sid"
-        :style="{ transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }"
-        @mouseleave.prevent="handleMouseLeave($event, tag)"
-    >
-        <span
-            class="tag-icon animate"
-            style="background-image: url(http://4dkk.4dage.com/v4/sdk/4.2.2/images/tag_icon_default.svg)"
-            @click="handleTagClick(tag.sid)"
-            @mouseenter.prevent="handleMouseEnter($event, tag)"
-        />
-        <div class="content">
-            <div class="trans" :class="{ active: isShow || isClick }">
-                <template v-if="isShow || isClick">
-                    <div :id="`arrow_${tag.sid}`" class="arrow">
-                        <!-- <ui-icon @click.stop="closeTag" v-if="getApp().config.mobile" type="close"></ui-icon> -->
-                    </div>
-                    <ShowTag :id="tag.sid" :title="tag.title" :type="tag.type" :content="tag.content" :media="tag.media" />
-                    <!-- <TagInfo v-if="true" /> -->
-                    <!-- <ShowTag @click.stop="" v-if="!isEdit && hotData" @open="openInfo" /> -->
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-<style scoped>
-/* div {
-    position: absolute;
-} */
-</style>
-<style>
-[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);
-    }
-}
-
-[xui_tags_view] .content .trans {
-    padding: 0 40px 0 0;
-    position: absolute;
-    right: 35px;
-    top: 50%;
-    min-width: 420px;
-    min-height: 60px;
-    z-index: 1000;
-    transform: translateY(-50%) scale(0);
-    transform-origin: center right;
-    transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
-    pointer-events: none;
-    /* background-color: rgba(0, 0, 0, 0.8); */
-}
-
-[xui_tags_view] .content .trans .arrow {
-    pointer-events: auto;
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 0;
-    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%);
-}
-[xui_tags_view] .content .trans.active {
-    transform: translateY(-50%) scale(1);
-}
-</style>

packages/components/advance/tag/src/Tags.vue

@@ -1,28 +1,73 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import TagView from './TagView.vue'
-import type { Ref } from 'vue'
+import { type PropType, ref, useSlots } from 'vue'
+import ShowTag from './showTag.vue'
 
-const __sdk: any = inject('__sdk')
+const props = defineProps({
+    tag: {
+        type: Object as PropType<TagContent>,
+        required: true,
+    },
+})
+const slots = useSlots()
 
-const tags: Ref<Array<any>> = ref([])
+const emit = defineEmits(['click', 'mouseEnter', 'mouseLeave'])
 
-__sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))
+const isShow = ref<boolean>(false)
+const isClick = ref<boolean>(false)
+const handleMouseEnter = (event: MouseEvent, tag: any, index?: number | undefined) => {
+    // console.log('in', event)
+    isShow.value = true
+    emit('mouseEnter', { ...event, ...tag })
+}
+const handleMouseLeave = (event: MouseEvent, tag: any, index?: number | undefined) => {
+    // console.log('out', event)
+    isShow.value = false
+    emit('mouseLeave', { ...event, ...tag })
+    // isClick.value = false
+}
 
-const handleTagview = (data: any) => {
-    console.log('tag', data)
+const handleTagClick = (tagId: string) => {
+    isClick.value = !isClick.value
+    emit('click', {
+        id: tagId,
+        isClick: isClick.value,
+    })
 }
 </script>
 
 <template>
-    <Teleport v-if="tags.length" to=".kankan-plugins">
-        <div xui_tags_view>
-            <TagView v-for="(item, index) in tags" :key="index" :tag="item" @click="handleTagview" />
-        </div>
-    </Teleport>
+    <div
+        :data-tag-id="tag.sid"
+        :style="{ transform: `translate(${props.tag.x}px,${props.tag.y}px)`, display: props.tag.visible ? 'block' : 'none' }"
+        @mouseleave.prevent="handleMouseLeave($event, tag)"
+    >
+        <slot v-if="slots.content" :id="tag.sid" name="content" :data="tag" :is-click="isClick" :visible="tag.visible" :is-show="isShow" :x="tag.x" :y="tag.y" />
+        <template v-else>
+            <span
+                class="tag-icon animate"
+                style="background-image: url(http://4dkk.4dage.com/v4/sdk/4.2.2/images/tag_icon_default.svg)"
+                @click="handleTagClick(tag.sid)"
+                @mouseenter.prevent="handleMouseEnter($event, tag)"
+            />
+
+            <div class="content">
+                <div class="trans" :class="{ active: isShow || isClick }">
+                    <template v-if="isShow || isClick">
+                        <div :id="`arrow_${tag.sid}`" class="arrow" />
+                        <ShowTag :id="tag.sid" :title="tag.title" :type="tag.type" :content="tag.content" :media="tag.media" />
+                    </template>
+                </div>
+            </div>
+        </template>
+    </div>
 </template>
 
 <style scoped>
+/* div {
+    position: absolute;
+} */
+</style>
+<style>
 [xui_tags_view] {
     position: absolute;
     width: 100%;
@@ -72,4 +117,36 @@ const handleTagview = (data: any) => {
         transform: scale(1);
     }
 }
+
+[xui_tags_view] .content .trans {
+    padding: 0 40px 0 0;
+    position: absolute;
+    right: 35px;
+    top: 50%;
+    min-width: 420px;
+    min-height: 60px;
+    z-index: 1000;
+    transform: translateY(-50%) scale(0);
+    transform-origin: center right;
+    transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
+    pointer-events: none;
+    /* background-color: rgba(0, 0, 0, 0.8); */
+}
+
+[xui_tags_view] .content .trans .arrow {
+    pointer-events: auto;
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    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%);
+}
+[xui_tags_view] .content .trans.active {
+    transform: translateY(-50%) scale(1);
+}
 </style>

packages/components/advance/tag/src/metas/demo.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>test</div>
-</template>
-<script lang="ts" setup></script>
-<style></style>

playground/package.json

@@ -11,7 +11,8 @@
     "dependencies": {
         "@kankan-components/components": "workspace:*",
         "@kankan-components/utils": "workspace:*",
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "vue-router": "^4.0.16"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^3.1.0",

playground/src/App.vue

@@ -1,29 +1,5 @@
-<script setup lang="ts">
-import { onMounted, inject } from 'vue'
-import { UITag } from '@kankan-components/components'
-
-onMounted(async () => {
-    const __sdk: any = inject('__sdk')
-    __sdk.mount('#scene').render()
-})
-</script>
+<script setup lang="ts"></script>
 
 <template>
-    <div id="scene">
-        <UITag />
-    </div>
-    <div id="scene-front"></div>
+    <router-view />
 </template>
-
-<style scoped>
-#scene {
-    width: 100vw;
-    height: 100vh;
-}
-#scene-front {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
-}
-</style>

playground/src/main.ts

@@ -1,7 +1,9 @@
 import './style.css'
 import { createApp } from 'vue'
+import router from './router'
 import { installSDK } from './sdk'
 import App from './App.vue'
 const __app = createApp(App)
 __app.use(installSDK)
+__app.use(router)
 __app.mount('#app')

playground/src/pages/basic.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+onMounted(() => {
+    const __win = window as any
+    const __sdk = (__win.__sdk = new __win.KanKan({
+        num: 'KK-ljOlkLRg',
+        // server: 'https://test.4dkankan.com',
+        server: '/demoServer',
+    }))
+    __sdk.mount('#scene').render()
+})
+</script>
+
+<template>
+    <div id="scene"></div>
+</template>
+
+<style scoped>
+#scene {
+    width: 100vw;
+    height: 100vh;
+}
+#scene-front {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+}
+</style>

playground/src/pages/tag.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, inject, ref } from 'vue'
+import { UITag } from '@kankan-components/components'
+const __sdk: any = inject('__sdk')
+
+const tags = ref<any>([])
+
+onMounted(async () => {
+    __sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))
+    __sdk.mount('#scene').render()
+})
+const handleTagview = (data: any) => {
+    console.log('tag', data)
+}
+</script>
+
+<template>
+    <div id="scene">
+        <Teleport v-if="tags.length" to=".kankan-plugins">
+            <!-- <div xui_tags_view>
+                <UITag v-for="(item, index) in tags" :key="index" :tag="item" @click="handleTagview" />
+            </div> -->
+            <div xui_tags_view>
+                <UITag v-for="(item, index) in tags" :key="index" :tag="item" @click="handleTagview">
+                    <template v-slot:content="{ data, id, isClick, isShow, x, y }">
+                        <div>isClick:{{ isClick }}</div>
+                        <div>isShow:{{ isShow }}</div>
+                        <div>x:{{ x }}</div>
+                        <div>y:{{ y }}</div>
+                    </template>
+                </UITag>
+            </div>
+        </Teleport>
+    </div>
+    <div id="scene-front"></div>
+</template>
+
+<style scoped>
+#scene {
+    width: 100vw;
+    height: 100vh;
+}
+#scene-front {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+}
+</style>

playground/src/router.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Basic from './pages/basic.vue'
+
+export default createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: Basic,
+        },
+        {
+            path: '/tag',
+            component: () => import('./pages/tag.vue'),
+        },
+
+    ],
+})

playground/vite.config.ts

@@ -5,6 +5,7 @@ import VueMacros from 'unplugin-vue-macros/vite'
 // https://vitejs.dev/config/
 export default defineConfig({
     server: {
+        port: 6868,
         proxy: {
             '/demoServer': {
                 target: 'https://test.4dkankan.com',

pnpm-lock.yaml

@@ -455,11 +455,13 @@ importers:
       typescript: ^4.6.4
       vite: ^3.1.0
       vue: ^3.2.37
+      vue-router: ^4.0.16
       vue-tsc: ^1.0.5
     dependencies:
       '@kankan-components/components': link:../packages/components
       '@kankan-components/utils': link:../packages/utils
       vue: 3.2.39
+      vue-router: 4.1.5_vue@3.2.39
     devDependencies:
       '@vitejs/plugin-vue': 3.1.0_vite@3.1.3+vue@3.2.39
       typescript: 4.7.4
@@ -5074,7 +5076,6 @@ packages:
 
   /@vue/devtools-api/6.4.4:
     resolution: {integrity: sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw==}
-    dev: true
 
   /@vue/reactivity-transform/3.2.39:
     resolution: {integrity: sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==}
@@ -15270,7 +15271,6 @@ packages:
     dependencies:
       '@vue/devtools-api': 6.4.4
       vue: 3.2.39
-    dev: true
 
   /vue-template-compiler/2.7.12:
     resolution: {integrity: sha512-6rhJAuo2vRzJMs8X/pd9yqtsJmnPEnv4E0cb9KCu0sfGhoDt8roCCa/6qbrvpc1b38zYgdmY/xrk4qfNWZIjwA==}