feat(架构调整): 文档中心植入SDK and icon link

docs/.vitepress/config/head.ts

@@ -9,6 +9,31 @@ export const head: HeadConfig[] = [
     [
         'link',
         {
+            rel: 'stylesheet',
+            href: '//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.css',
+        },
+    ],
+    [
+        'script',
+        { id: 'scriptImporter' },
+        `
+        (function() { 
+        var script = document.createElement("script"); 
+        var script2 = document.createElement("script"); 
+       
+        script.src = //4dkk.4dage.com/v4-test/www/sdk/kankan-sdk-deps.js?v=4.6.0-alpha.10";
+        script2.src = "//4dkk.4dage.com/v4-test/www/sdk/kankan-sdk.js?v=4.6.0-alpha.10";
+        setTimeout(() => document.body.append(script))
+
+        script.onload =function(){
+            setTimeout(() => document.body.append(script2),100)
+        }
+        })(); 
+`,
+    ],
+    [
+        'link',
+        {
             rel: 'icon',
             href: '/images/kankan_icon.ico',
             type: 'image/ico',

docs/vite.config.ts

@@ -55,6 +55,13 @@ export default defineConfig(async ({ mode }) => {
             fs: {
                 allow: [projRoot],
             },
+            proxy: {
+                '/demoServer': {
+                    target: 'https://test.4dkankan.com',
+                    changeOrigin: true,
+                    rewrite: path => path.replace(/^\/demoServer/, ''),
+                },
+            },
         },
         resolve: {
             alias,
@@ -94,6 +101,7 @@ export default defineConfig(async ({ mode }) => {
             Inspect(),
             mkcert(),
         ],
+
         // optimizeDeps: {
         //     include: optimizeDeps,
         // },

playground/src/components/tag/src/Tags.vue

@@ -8,8 +8,8 @@ const tags: Ref<Array<any>> = ref([])
 
 __sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))
 
-const handleTagview = ({ tagId: string }) => {
-    console.log('tagId', tagId)
+const handleTagview = (data: any) => {
+    console.log('tag', data)
 }
 </script>
 

playground/src/components/tag/src/metas/metasVideo.vue

@@ -0,0 +1,172 @@
+<!--  -->
+<template>
+    <div class="web-box" :style="metasHeight ? `height:${metasHeight}px;` : ''">
+        <div class="show-tips">
+            <!-- <span>{{ $t('tag.toolbox.webShow') }}</span> -->
+        </div>
+        <div class="iframe-box">
+            <div v-if="isEdit" class="del-btn" @click="delWeb()">
+                <ui-icon type="del"></ui-icon>
+            </div>
+            <iframe v-for="(i, index) in data" :src="i.src" frameborder="0"></iframe>
+        </div>
+        <!-- :class="{ disabled: link.length > 0 }" -->
+        <div v-if="isEdit" class="input-web">
+            <input type="text" v-model="inputValue" placeholder="https://" autocomplete="off" />
+            <!-- v-if="link.length <= 0" -->
+            <div class="ok-web" @click="confirmWeb">
+                <ui-icon type="checkbox1"></ui-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, defineProps, PropType, inject } from 'vue'
+// import { Cropper, Loading, Dialog } from '@kankan/components'
+import { UIIcon as UiIcon } from '@kankan-components/components'
+// import { custom } from '../constant.js'
+const linkNum = ref(0)
+// const hotData = computed(() => store.getters['tag/hotData'])
+// const link = computed(() => {
+//     return hotData.value.media.link
+// })
+const tagMode = inject('tagMode')
+
+const isEdit = computed(() => {
+    return tagMode === 'edit'
+})
+const props = defineProps({
+    data: {
+        type: Array as PropType<SourceType[]>,
+        default: [],
+    },
+    metasHeight: {
+        type: Number,
+        default: null,
+    },
+})
+// const inputLink = computed(() => store.getters['tag/inputLink'])
+// const isEdit = computed(() => store.getters['tag/isEdit'])
+const inputValue = computed({
+    get() {
+        // if (inputLink.value && inputLink.value != void 0) {
+        //     return inputLink.value
+        // }
+        // return inputLink.value || ''
+        return ''
+    },
+    set(value) {
+        // store.commit('tag/setLink', value)
+        // store.commit('tag/setData', { inputLink: value })
+    },
+})
+const type = ref('link')
+const showIframe = ref(false)
+
+const delWeb = () => {
+    // store.commit('tag/delMetas', { type: type.value, index: linkNum.value })
+    showIframe.value = false
+    // inputValue.value = null
+}
+const confirmWeb = () => {
+    if (inputValue.value.indexOf('http' || 'https') == -1) {
+        inputValue.value = 'https://' + inputValue.value
+    }
+    // store.commit('tag/setWeb', inputValue.value)
+    showIframe.value = false
+    showIframe.value = true
+}
+</script>
+<style lang="scss" scoped>
+.del-btn {
+    width: 24px;
+    height: 24px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+    position: absolute;
+    cursor: pointer;
+    top: 10px;
+    right: 10px;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.web-box {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1);
+    top: 0;
+    left: 0;
+    z-index: 10;
+    .show-tips {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+            color: rgba(255, 255, 255, 0.3);
+            font-size: 16px;
+            font-weight: bold;
+        }
+    }
+    .iframe-box {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        iframe {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .input-web {
+        height: 32px;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, #000000 200%) !important;
+        border-radius: 0px 0px 4px 4px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 10px 0 0;
+        &.disabled {
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000000 200%) !important;
+            opacity: 0.8 !important;
+        }
+        input {
+            background: none;
+            border: none;
+            padding: 0 0 0 10px;
+            width: 94%;
+            box-sizing: border-box;
+            &:focus {
+                border: none;
+            }
+            &::placeholder {
+                color: var(--editor-font-color);
+            }
+        }
+        .ok-web {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.7);
+            color: rgba(0, 0, 0, 0.6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+    }
+}
+</style>