Startseite Erkunden Hilfe
Registrieren Anmelden
4dkankan
/
4dkankan-components
2
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

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

rindy vor 2 Jahren
Ursprung
ced5a5e377
Commit
b13ee1333e
8 geänderte Dateien mit 5764 neuen und 56 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 14 13
      playground/index.html
  2. 13 40
      playground/src/App.vue
  3. 77 0
      playground/src/components/tag/TagEditor.vue
  4. 77 0
      playground/src/components/tag/TagView.vue
  5. 67 0
      playground/src/components/tag/Tags.vue
  6. 5 3
      playground/src/main.ts
  7. 14 0
      playground/src/sdk.ts
  8. 5497 0
      yarn.lock

+ 14 - 13
playground/index.html
Datei anzeigen 

@@ -1,16 +1,17 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-  <head>
 
-    <meta charset="UTF-8" />
 
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>kankan component</title>
 
-    <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk-deps.js"></script>
 
-    <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk.js"></script>
 
- 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-    <script type="module" src="/src/main.ts"></script>
 
-  </body>
 
+    <head>
 
+        <meta charset="UTF-8" />
 
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+        <title>kankan component</title>
 
+        <!-- <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk-deps.js"></script> -->
 
+        <!-- <script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk.js"></script> -->
 
+        <script src="http://localhost:3099/dist/sdk/kankan-sdk-deps.js"></script>
 
+        <script src="http://localhost:3099/dist/sdk/kankan-sdk.js"></script>
 
+    </head>
 
+    <body>
 
+        <div id="app"></div>
 
+        <script type="module" src="/src/main.ts"></script>
 
+    </body>
 
 </html>

+ 13 - 40
playground/src/App.vue
Datei anzeigen 

@@ -1,56 +1,23 @@
 
 <script setup lang="ts">
 
-import { onMounted } from 'vue'
 
+import { onMounted, inject } from 'vue'
 
 import { UIAudio, UIButton, UIIcon, UIInput } from '@kankan-components/components'
 
-import type { VNode } from 'vue'
 
+import Tags from './components/tag/Tags.vue'
 
 // import { buildProps } from '@kankan-components/utils';
 
 // import { h } from 'vue';
 
 // import * as KanKanSDK from '@kankan/sdk';
 
 // console.log('UI', UIAudio, UIIcon)
 
 
 onMounted(async () => {
 
-    const KanKan = (window as any).KanKan
 
-    const app = new KanKan({
 
-        // dom: '#scene',
 
-        num: 'KJ-JYo2ZZyKKJ',
 
-    })
 
-    app.mount('#scene').render()
 
-
 
-    // console.log('TagView', await TagView);
 
-    // const el = h(KKAudio, {
 
-    //   src: 'http://samplelib.com/lib/preview/mp3/sample-3s.mp3',
 
-    // });
 
-    // app.use(KKAudio);
 
-
 
-    // console.log('kankan', KKAudio);
 
-    // const res = await kankan.use(KKAudio.render());
 
-    // console.log('11', res);
 
-    app.use('TagEditor')
 
-
 
-    const TagView = await app.use('TagView', {
 
-        render: (data: VNode) => {
 
-            console.log('data', data.type)
 
-        },
 
-    })
 
-
 
-    TagView.on('click', (event: Event) => {
 
-        console.log('event', event)
 
-        // debugger;
 
-    })
 
-    console.log('1app', app)
 
-
 
-    const TagEditor = await app.TagManager.editor.promise()
 
-    console.log('TagEditor', TagEditor)
 
-    // TagEditor.enter();
 
-
 
-    console.log('TagView', TagView)
 
-    // .then(function () {
 
-    //   console.log(arguments);
 
-    // });
 
+    const __sdk: any = inject('__sdk')
 
+    __sdk.mount('#scene').render()
 
 })
 
 </script>
 
 
 <template>
 
     <div id="scene">
 
+        <Tags />
 
+    </div>
 
+    <div id="scene-front">
 
         <UIAudio src="http://samplelib.com/lib/preview/mp3/sample-3s.mp3" />
 
         <UIButton>djdjddd</UIButton>
 
         <UIIcon type="checkbox" :size="129" />
 
@@ -63,4 +30,10 @@ onMounted(async () => {
 
     width: 100vw;
 
     height: 100vh;
 
 }
 
+#scene-front {
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    z-index: 2;
 
+}
 
 </style>

+ 77 - 0
playground/src/components/tag/TagEditor.vue
Datei anzeigen 

@@ -0,0 +1,77 @@
 
+<script setup lang="ts">
 
+import { type PropType } from 'vue'
 
+interface Tag {
 
+    x: Number
 
+    y: Number
 
+    sid: string
 
+    visible: boolean
 
+}
 
+const props = defineProps({
 
+    tag: {
 
+        type: Object as PropType<Tag>,
 
+        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)"></span>
 
+    </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>

+ 77 - 0
playground/src/components/tag/TagView.vue
Datei anzeigen 

@@ -0,0 +1,77 @@
 
+<script setup lang="ts">
 
+import { type PropType } from 'vue'
 
+interface Tag {
 
+    x: Number
 
+    y: Number
 
+    sid: string
 
+    visible: boolean
 
+}
 
+const props = defineProps({
 
+    tag: {
 
+        type: Object as PropType<Tag>,
 
+        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)"></span>
 
+    </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>

+ 67 - 0
playground/src/components/tag/Tags.vue
Datei anzeigen 

@@ -0,0 +1,67 @@
 
+<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>

+ 5 - 3
playground/src/main.ts
Datei anzeigen 

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

+ 14 - 0
playground/src/sdk.ts
Datei anzeigen 

@@ -0,0 +1,14 @@
 
+import { App } from 'vue'
 
+
 
+const __win = window as any
 
+const __sdk = (__win.__sdk = new __win.KanKan({
 
+    num: 'KJ-JYo2ZZyKKJ',
 
+    server: 'https://www.4dkankan.com/',
 
+}))
 
+export { __sdk }
 
+
 
+export const installSDK = {
 
+    install(app: App) {
 
+        app.provide('__sdk', __sdk)
 
+    },
 
+}

Datei-Diff unterdrückt, da er zu groß ist
+ 5497 - 0
yarn.lock