chore(组件): 增加回base的style

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.eslintcache
 **/dist
 results
 .nyc_output

internal/build/src/tasks/types-definitions.ts

@@ -89,7 +89,6 @@ async function addSourceFiles(project: Project) {
     const sourceFiles: SourceFile[] = []
     await Promise.all([
         ...filePaths.map(async file => {
-            consola.log('file', file)
             if (file.endsWith('.vue')) {
                 const content = await readFile(file, 'utf-8')
                 const hasTsNoCheck = content.includes('@ts-nocheck')

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

@@ -95,292 +95,3 @@ export default defineComponent({
     },
 })
 </script>
-<!-- <style lang="scss" scoped>
-.showPicBox {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 10000;
-    background: rgb(24, 22, 22);
-    top: 0;
-    left: 0;
-    .close {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        width: 20px;
-        height: 20px;
-        z-index: 100;
-        color: #fff;
-        .iconfont {
-            font-size: 20px;
-        }
-    }
-    .loading {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-    .imgbox {
-        width: 100%;
-        height: 100%;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center center;
-        #eleImg {
-            // position: absolute;
-
-            // top: 50%;
-            // left: 50%;
-            // transform: translate(-50%, -50%);
-            margin: 0 auto;
-            display: block;
-            &.s {
-                height: 100%;
-                width: auto;
-            }
-            &.h {
-                height: auto;
-                width: 100%;
-            }
-        }
-    }
-}
-.del-btn {
-    width: 24px;
-    height: 24px;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    position: absolute;
-    cursor: pointer;
-    top: 10px;
-    right: 10px;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.loading-icon {
-    color: var(--editor-main-color);
-    animation: rotate 2s infinite linear;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 30px;
-}
-@keyframes rotate {
-    0% {
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-    100% {
-        transform: translate(-50%, -50%) rotate(360deg);
-    }
-}
-.pic-box {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    top: 0;
-    left: 0;
-    z-index: 10;
-
-    .over-box {
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-    }
-    .continue {
-        width: 100%;
-        height: 32px;
-        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 200%);
-        border-radius: 0px 0px 4px 4px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-
-        .ui-input {
-            width: 100%;
-        }
-        .continue-tips {
-            font-size: 12px;
-            margin-right: 5px;
-        }
-        .edit-pic-num {
-            // position: absolute;
-            // right: 10px;
-            font-size: 12px;
-            .cur {
-                color: var(--editor-main-color);
-            }
-        }
-        .pic-num {
-            position: absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 12px;
-            .cur {
-                color: var(--editor-main-color);
-            }
-        }
-    }
-
-    .ctrl-btn {
-        width: 32px;
-        height: 32px;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 50%;
-        position: absolute;
-        cursor: pointer;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .iconfont {
-            font-size: 14px;
-        }
-        &.left-btn {
-            left: 5px;
-        }
-        &.right-btn {
-            right: 5px;
-        }
-    }
-    .image-list {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        transition: all 0.3s linear;
-        .image-item {
-            width: 100%;
-            height: 100%;
-            // background: red;
-            position: absolute;
-            transform: translateX(0);
-            text-align: center;
-            background-repeat: no-repeat;
-            background-size: contain;
-            background-position: center;
-            img {
-                height: 100%;
-                width: auto;
-            }
-        }
-    }
-    &.show {
-        .ctrl-btn {
-            width: 40px;
-            height: 80px;
-            background: rgba(0, 0, 0, 0.6);
-            .iconfont {
-                font-size: 20px;
-            }
-            &.left-btn {
-                left: 0px;
-                border-radius: 0 40px 40px 0;
-                .icon {
-                    margin-right: 5px;
-                }
-            }
-            &.right-btn {
-                right: 0px;
-                border-radius: 40px 0 0 40px;
-                .icon {
-                    margin-left: 8px;
-                }
-            }
-        }
-        .continue {
-            width: 76px;
-            height: 36px;
-            background: rgba(0, 0, 0, 0.6);
-            border-radius: 20px;
-            position: absolute;
-            bottom: -5%;
-            left: 50%;
-            transform: translateX(-50%);
-
-            .pic-num {
-                width: 76px;
-                height: 36px;
-                display: inline-block;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 20px;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                span {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-            }
-        }
-    }
-}
-
-[is-mobile] {
-    .pic-box {
-        &.show {
-            .ctrl-btn {
-                width: 40px;
-                height: 80px;
-                background: rgba(0, 0, 0, 0.6);
-                .iconfont {
-                    font-size: 20px;
-                }
-                &.left-btn {
-                    left: 0px;
-                    border-radius: 0 40px 40px 0;
-                    .icon {
-                        margin-right: 5px;
-                    }
-                }
-                &.right-btn {
-                    right: 0px;
-                    border-radius: 40px 0 0 40px;
-                    .icon {
-                        margin-left: 8px;
-                    }
-                }
-            }
-            .continue {
-                width: 76px;
-                height: 36px;
-                background: rgba(0, 0, 0, 0.6);
-                border-radius: 20px;
-                position: absolute;
-                bottom: -6%;
-                left: 50%;
-                transform: translateX(-50%);
-
-                .pic-num {
-                    width: 76px;
-                    height: 36px;
-                    display: inline-block;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 20px;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    span {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                    }
-                }
-            }
-        }
-    }
-}
-</style> -->

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

@@ -81,52 +81,3 @@ export default defineComponent({
     },
 })
 </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;
-}
-.video-box {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    position: absolute;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    top: 0;
-    left: 0;
-    z-index: 10;
-    .loading-icon {
-        color: var(--editor-main-color);
-        animation: rotate 2s infinite linear;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 30px;
-    }
-    @keyframes rotate {
-        0% {
-            transform: translate(-50%, -50%) rotate(0deg);
-        }
-        100% {
-            transform: translate(-50%, -50%) rotate(360deg);
-        }
-    }
-    .video-item {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-    }
-}
-</style> -->

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

@@ -19,7 +19,7 @@ import { defineComponent } from 'vue'
 
 import MetasImage from './metas/metasImage.vue'
 import MetasVideo from './metas/metasVideo.vue'
-// import demo from './metas/demo.vue'
+
 import { tagItemProps } from './tagItem'
 
 export default defineComponent({
@@ -31,157 +31,3 @@ export default defineComponent({
     },
 })
 </script>
-
-<!-- <style lang="scss" scoped>
-.show-tag {
-    pointer-events: auto;
-    background: rgba(27, 27, 28, 0.8);
-    border-radius: 4px;
-    // border: 1px solid #000000;
-    // backdrop-filter: blur(4px);
-    min-width: 400px;
-    // min-height: 100px;
-    padding: 30px 20px;
-    max-height: 50vh;
-    overflow-y: auto;
-    .edit-btn {
-        margin-top: 20px;
-        text-align: right;
-        span {
-            font-size: 14px;
-            color: var(--editor-font-color);
-            cursor: pointer;
-            &:hover {
-                color: #fff;
-            }
-        }
-    }
-    .tag-metas {
-        width: 100%;
-        height: 224px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
-        overflow: hidden;
-        position: relative;
-        cursor: -webkit-zoom-in;
-        margin-top: 20px;
-        &.nocursor {
-            cursor: auto;
-        }
-        &.mask {
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                z-index: 100;
-            }
-        }
-    }
-    .tag-title {
-        word-break: break-all;
-        h2 {
-            font-size: 20px;
-            // margin-bottom: 10px;
-            line-height: 30px;
-            color: #ffffff;
-            position: relative;
-            .ui-audio {
-                float: right;
-                &.audio {
-                    display: inline-block;
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-    .desc {
-        margin-top: 10px;
-        .text {
-            font-size: 14px;
-            color: #999999;
-            line-height: 20px;
-            text-align: justify;
-            word-break: break-all;
-        }
-    }
-}
-[is-mobile] {
-    .show-tag {
-        pointer-events: auto;
-        background: rgba(27, 27, 28, 0.8);
-        border-radius: 0.0533rem;
-        // border: 1px solid #000000;
-        // backdrop-filter: blur(0.0533rem);
-        min-width: 7.4667rem;
-        // min-height: 4rem;
-        padding: 0.4rem 0.2667rem;
-
-        .edit-btn {
-            margin-top: 0.2667rem;
-            text-align: right;
-            span {
-                font-size: 0.1867rem;
-                color: var(--editor-font-color);
-                cursor: pointer;
-                &:hover {
-                    color: #fff;
-                }
-            }
-        }
-        .tag-metas {
-            width: 100%;
-            height: 4.2667rem;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 0.0533rem;
-            overflow: hidden;
-            position: relative;
-            cursor: -webkit-zoom-in;
-            margin-top: 0.4rem;
-            &.mask {
-                &::after {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    z-index: 100;
-                }
-            }
-        }
-        .tag-title {
-            h2 {
-                font-size: 0.5333rem;
-                line-height: 0.8rem;
-                color: #ffffff;
-                position: relative;
-                .ui-audio {
-                    float: right;
-                    &.audio {
-                        display: inline-block;
-                        cursor: pointer;
-                    }
-                }
-            }
-        }
-        .desc {
-            margin-bottom: 0.2933rem;
-
-            .text {
-                font-size: 0.3733rem;
-                color: #999999;
-                line-height: 0.2533rem;
-                text-align: justify;
-                line-height: 0.5333rem;
-
-                p {
-                    line-height: 0.5333rem;
-                }
-            }
-        }
-    }
-}
-</style> -->

packages/components/advance/tag/style/css.ts

@@ -1,2 +1,2 @@
-// import '@kankan-components/components/base/style/css'
+import '@kankan-components/components/base/style/css'
 import '@kankan-components/theme-chalk/ui-tag.css'

packages/components/advance/tag/style/index.ts

@@ -1,2 +1,2 @@
-// import '@kankan-components/components/base/style'
+import '@kankan-components/components/base/style'
 import '@kankan-components/theme-chalk/src/tag.scss'

packages/components/base/style/css.ts

@@ -0,0 +1 @@
+import '@kankan-components/theme-chalk/base.css'

packages/components/base/style/index.ts

@@ -0,0 +1 @@
+import '@kankan-components/theme-chalk/src/base.scss'

packages/theme-chalk/src/base.scss

@@ -1 +1,2 @@
 @use 'var.scss';
+@use 'icon.scss';

packages/theme-chalk/src/icon.scss

@@ -0,0 +1,633 @@
+@font-face {
+    font-family: 'iconfont'; /* Project id 2596172 */
+    src: url('//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.woff2?t=1667207841042') format('woff2'), url('//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.woff?t=1667207841042') format('woff'),
+        url('//at.alicdn.com/t/c/font_2596172_5i5zp5tvfj9.ttf?t=1667207841042') format('truetype');
+}
+
+.iconfont {
+    font-family: 'iconfont' !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-a_position:before {
+    content: '\e6f4';
+}
+
+.icon-a-scale:before {
+    content: '\e6f3';
+}
+
+.icon-model-s:before {
+    content: '\e6f0';
+}
+
+.icon-video-s:before {
+    content: '\e6f1';
+}
+
+.icon-chartlet-s:before {
+    content: '\e6f2';
+}
+
+.icon-filter1:before {
+    content: '\e6ef';
+}
+
+.icon-monitor-e:before {
+    content: '\e6ee';
+}
+
+.icon-monitor-b:before {
+    content: '\e6ed';
+}
+
+.icon-monitor-s:before {
+    content: '\e6ec';
+}
+
+.icon-monitoring:before {
+    content: '\e6eb';
+}
+
+.icon-b-label:before {
+    content: '\e6e8';
+}
+
+.icon-b-Monitor:before {
+    content: '\e6e9';
+}
+
+.icon-b-scene:before {
+    content: '\e6ea';
+}
+
+.icon-adjust:before {
+    content: '\e6e7';
+}
+
+.icon-filter:before {
+    content: '\e6e6';
+}
+
+.icon-minimap:before {
+    content: '\e6de';
+}
+
+.icon-show_share:before {
+    content: '\e690';
+}
+
+.icon-show_more_ruler:before {
+    content: '\e67b';
+}
+
+.icon-transparency:before {
+    content: '\e6d7';
+}
+
+.icon-mosaic_e:before {
+    content: '\e6d2';
+}
+
+.icon-eraser:before {
+    content: '\e6d3';
+}
+
+.icon-video2:before {
+    content: '\e6d4';
+}
+
+.icon-down:before {
+    content: '\e6d5';
+}
+
+.icon-qingkong-copy-copy:before {
+    content: '\e68f';
+}
+
+.icon-_qq:before {
+    content: '\e64b';
+}
+
+.icon-_friend:before {
+    content: '\e64c';
+}
+
+.icon-link1:before {
+    content: '\e6ff';
+}
+
+.icon-icon_share_facebook:before {
+    content: '\e745';
+}
+
+.icon-icon_share_whatsapp:before {
+    content: '\e746';
+}
+
+.icon-_wechat:before {
+    content: '\e64a';
+}
+
+.icon-watermark:before {
+    content: '\e6cb';
+}
+
+.icon-camera_h:before {
+    content: '\e6c7';
+}
+
+.icon-a-1V1:before {
+    content: '\e6c8';
+}
+
+.icon-hengbiaoEN:before {
+    content: '\e6b9';
+}
+
+.icon-hot_spot:before {
+    content: '\e6b8';
+}
+
+.icon-foot:before {
+    content: '\e6ba';
+}
+
+.icon-music-t:before {
+    content: '\e6b7';
+}
+
+.icon-yes:before {
+    content: '\e6b5';
+}
+
+.icon-no:before {
+    content: '\e6b6';
+}
+
+.icon-floor_rename:before {
+    content: '\e75b';
+}
+
+.icon-play_stop:before {
+    content: '\e6b4';
+}
+
+.icon-scene_auto:before {
+    content: '\e721';
+}
+
+.icon-compass:before {
+    content: '\e6b3';
+}
+
+.icon-h-d:before {
+    content: '\e6b2';
+}
+
+.icon-scene_screen:before {
+    content: '\e717';
+}
+
+.icon-scene_full:before {
+    content: '\e712';
+}
+
+.icon-scene_window:before {
+    content: '\e713';
+}
+
+.icon-_back:before {
+    content: '\e609';
+}
+
+.icon-show_back:before {
+    content: '\e678';
+}
+
+.icon-show_more_share:before {
+    content: '\e680';
+}
+
+.icon-show_more_finish:before {
+    content: '\e67a';
+}
+
+.icon-show_more_music:before {
+    content: '\e67c';
+}
+
+.icon-show_map_collect:before {
+    content: '\e679';
+}
+
+.icon-data-j:before {
+    content: '\e6b1';
+}
+
+.icon-cancel:before {
+    content: '\e688';
+}
+
+.icon-affirm:before {
+    content: '\e689';
+}
+
+.icon-checkbox_p:before {
+    content: '\e6b0';
+}
+
+.icon-left:before {
+    content: '\e6ae';
+}
+
+.icon-right:before {
+    content: '\e6af';
+}
+
+.icon-_loading_:before {
+    content: '\e627';
+}
+
+.icon-show_function_collect:before {
+    content: '\e687';
+}
+
+.icon-show_more:before {
+    content: '\e67e';
+}
+
+.icon-d-r:before {
+    content: '\e68d';
+}
+
+.icon-up-a:before {
+    content: '\e68e';
+}
+
+.icon-fanzhuan:before {
+    content: '\e6fa';
+}
+
+.icon-cad-neiqiang:before {
+    content: '\e698';
+}
+
+.icon-cad-waiqiang:before {
+    content: '\e69a';
+}
+
+.icon-cad-shuangkaimen:before {
+    content: '\e69b';
+}
+
+.icon-cad-zimumen:before {
+    content: '\e69c';
+}
+
+.icon-cad-men:before {
+    content: '\e69d';
+}
+
+.icon-cad-yimen:before {
+    content: '\e69e';
+}
+
+.icon-cad-zhediemen:before {
+    content: '\e69f';
+}
+
+.icon-cad-luodichuang:before {
+    content: '\e6a0';
+}
+
+.icon-cad-chuang:before {
+    content: '\e6a1';
+}
+
+.icon-cad-piaochuang:before {
+    content: '\e6a2';
+}
+
+.icon-cad-uxingchuang:before {
+    content: '\e6a4';
+}
+
+.icon-cad-lxingchuang:before {
+    content: '\e6a5';
+}
+
+.icon-cad-lpiaochuang:before {
+    content: '\e6a6';
+}
+
+.icon-cad-upiaochuang:before {
+    content: '\e6a7';
+}
+
+.icon-cad-liang:before {
+    content: '\e6a8';
+}
+
+.icon-cad-yandao:before {
+    content: '\e6a9';
+}
+
+.icon-cad-zhuzi:before {
+    content: '\e6aa';
+}
+
+.icon-cad-dianti:before {
+    content: '\e6ab';
+}
+
+.icon-cad-loudao:before {
+    content: '\e6ac';
+}
+
+.icon-cad-dange:before {
+    content: '\e6ad';
+}
+
+.icon-cad-yakou:before {
+    content: '\e699';
+}
+
+.icon-more:before {
+    content: '\e600';
+}
+
+.icon-mosaic1:before {
+    content: '\e697';
+}
+
+.icon-hengbiaoCN:before {
+    content: '\e6a3';
+}
+
+.icon-nor:before {
+    content: '\e696';
+}
+
+.icon-checkbox1:before {
+    content: '\e65d';
+}
+
+.icon-rotate:before {
+    content: '\e695';
+}
+
+.icon-adapt:before {
+    content: '\e692';
+}
+
+.icon-recover:before {
+    content: '\e693';
+}
+
+.icon-repeal:before {
+    content: '\e694';
+}
+
+.icon-reset:before {
+    content: '\e65a';
+}
+
+.icon-course1:before {
+    content: '\e68c';
+}
+
+.icon-publish:before {
+    content: '\e68a';
+}
+
+.icon-save:before {
+    content: '\e68b';
+}
+
+.icon-checkbox:before {
+    content: '\e649';
+}
+
+.icon-mosaic:before {
+    content: '\e646';
+}
+
+.icon-media:before {
+    content: '\e647';
+}
+
+.icon-pic:before {
+    content: '\e648';
+}
+
+.icon-eye_f:before {
+    content: '\e644';
+}
+
+.icon-eye_c:before {
+    content: '\e645';
+}
+
+.icon-size-o:before {
+    content: '\e640';
+}
+
+.icon-size-f:before {
+    content: '\e641';
+}
+
+.icon-magnify:before {
+    content: '\e642';
+}
+
+.icon-reduce:before {
+    content: '\e643';
+}
+
+.icon-video1:before {
+    content: '\e63b';
+}
+
+.icon-uploading_s:before {
+    content: '\e63c';
+}
+
+.icon-path:before {
+    content: '\e63d';
+}
+
+.icon-record:before {
+    content: '\e63e';
+}
+
+.icon-clear:before {
+    content: '\e63f';
+}
+
+.icon-pause:before {
+    content: '\e636';
+}
+
+.icon-preview:before {
+    content: '\e63a';
+}
+
+.icon-full:before {
+    content: '\e638';
+}
+
+.icon-add:before {
+    content: '\e631';
+}
+
+.icon-del:before {
+    content: '\e632';
+}
+
+.icon-close:before {
+    content: '\e633';
+}
+
+.icon-web:before {
+    content: '\e635';
+}
+
+.icon-music:before {
+    content: '\e637';
+}
+
+.icon-uploading1:before {
+    content: '\e639';
+}
+
+.icon-state_e:before {
+    content: '\e624';
+}
+
+.icon-state_f:before {
+    content: '\e625';
+}
+
+.icon-state_s:before {
+    content: '\e626';
+}
+
+.icon-vip_uploading:before {
+    content: '\e623';
+}
+
+.icon-eye-n:before {
+    content: '\e621';
+}
+
+.icon-eye-s:before {
+    content: '\e622';
+}
+
+.icon-course:before {
+    content: '\e620';
+}
+
+.icon-edit:before {
+    content: '\e61f';
+}
+
+.icon-help:before {
+    content: '\e615';
+}
+
+.icon-rule:before {
+    content: '\e617';
+}
+
+.icon-link:before {
+    content: '\e618';
+}
+
+.icon-uploading:before {
+    content: '\e619';
+}
+
+.icon-vr:before {
+    content: '\e61a';
+}
+
+.icon-complete:before {
+    content: '\e61b';
+}
+
+.icon-download:before {
+    content: '\e61c';
+}
+
+.icon-pull-down:before {
+    content: '\e61d';
+}
+
+.icon-pull-up:before {
+    content: '\e61e';
+}
+
+.icon-updown:before {
+    content: '\e613';
+}
+
+.icon-scene:before {
+    content: '\e614';
+}
+
+.icon-message:before {
+    content: '\e60c';
+}
+
+.icon-basic:before {
+    content: '\e60d';
+}
+
+.icon-hotspot:before {
+    content: '\e60e';
+}
+
+.icon-guide:before {
+    content: '\e60f';
+}
+
+.icon-wander:before {
+    content: '\e610';
+}
+
+.icon-house:before {
+    content: '\e611';
+}
+
+.icon-video:before {
+    content: '\e612';
+}
+
+.icon-show_3d_normal:before {
+    content: '\e677';
+}
+
+.icon-show_plane_normal:before {
+    content: '\e67d';
+}
+
+.icon-show_roaming_selected:before {
+    content: '\e682';
+}
+
+.icon-show_plane_selected:before {
+    content: '\e684';
+}
+
+.icon-show_3d_selected:before {
+    content: '\e685';
+}
+
+.icon-show_roaming_normal:before {
+    content: '\e686';
+}

packages/theme-chalk/src/index.scss

@@ -1 +1,2 @@
+@use './icon.scss';
 @use './tag.scss';

packages/theme-chalk/src/tag.scss

@@ -63,6 +63,479 @@
     .content .trans.active {
         transform: translateY(-50%) scale(1);
     }
+    .show-tag {
+        pointer-events: auto;
+        background: rgba(27, 27, 28, 0.8);
+        border-radius: 4px;
+        // border: 1px solid #000000;
+        // backdrop-filter: blur(4px);
+        min-width: 400px;
+        // min-height: 100px;
+        padding: 30px 20px;
+        max-height: 50vh;
+        overflow-y: auto;
+        .edit-btn {
+            margin-top: 20px;
+            text-align: right;
+            span {
+                font-size: 14px;
+                color: var(--editor-font-color);
+                cursor: pointer;
+                &:hover {
+                    color: #fff;
+                }
+            }
+        }
+        .tag-metas {
+            width: 100%;
+            height: 224px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            overflow: hidden;
+            position: relative;
+            cursor: -webkit-zoom-in;
+            margin-top: 20px;
+            &.nocursor {
+                cursor: auto;
+            }
+            &.mask {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 100;
+                }
+            }
+        }
+        .tag-title {
+            word-break: break-all;
+            h2 {
+                font-size: 20px;
+                // margin-bottom: 10px;
+                line-height: 30px;
+                color: #ffffff;
+                position: relative;
+                .ui-audio {
+                    float: right;
+                    &.audio {
+                        display: inline-block;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+        .desc {
+            margin-top: 10px;
+            .text {
+                font-size: 14px;
+                color: #999999;
+                line-height: 20px;
+                text-align: justify;
+                word-break: break-all;
+            }
+        }
+    }
+    [is-mobile] {
+        .show-tag {
+            pointer-events: auto;
+            background: rgba(27, 27, 28, 0.8);
+            border-radius: 0.0533rem;
+            // border: 1px solid #000000;
+            // backdrop-filter: blur(0.0533rem);
+            min-width: 7.4667rem;
+            // min-height: 4rem;
+            padding: 0.4rem 0.2667rem;
+
+            .edit-btn {
+                margin-top: 0.2667rem;
+                text-align: right;
+                span {
+                    font-size: 0.1867rem;
+                    color: var(--editor-font-color);
+                    cursor: pointer;
+                    &:hover {
+                        color: #fff;
+                    }
+                }
+            }
+            .tag-metas {
+                width: 100%;
+                height: 4.2667rem;
+                background: rgba(255, 255, 255, 0.1);
+                border-radius: 0.0533rem;
+                overflow: hidden;
+                position: relative;
+                cursor: -webkit-zoom-in;
+                margin-top: 0.4rem;
+                &.mask {
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        z-index: 100;
+                    }
+                }
+            }
+            .tag-title {
+                h2 {
+                    font-size: 0.5333rem;
+                    line-height: 0.8rem;
+                    color: #ffffff;
+                    position: relative;
+                    .ui-audio {
+                        float: right;
+                        &.audio {
+                            display: inline-block;
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+            .desc {
+                margin-bottom: 0.2933rem;
+
+                .text {
+                    font-size: 0.3733rem;
+                    color: #999999;
+                    line-height: 0.2533rem;
+                    text-align: justify;
+                    line-height: 0.5333rem;
+
+                    p {
+                        line-height: 0.5333rem;
+                    }
+                }
+            }
+        }
+    }
+    // image
+    .showPicBox {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        z-index: 10000;
+        background: rgb(24, 22, 22);
+        top: 0;
+        left: 0;
+        .close {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 20px;
+            height: 20px;
+            z-index: 100;
+            color: #fff;
+            .iconfont {
+                font-size: 20px;
+            }
+        }
+        .loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .imgbox {
+            width: 100%;
+            height: 100%;
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: center center;
+            #eleImg {
+                // position: absolute;
+
+                // top: 50%;
+                // left: 50%;
+                // transform: translate(-50%, -50%);
+                margin: 0 auto;
+                display: block;
+                &.s {
+                    height: 100%;
+                    width: auto;
+                }
+                &.h {
+                    height: auto;
+                    width: 100%;
+                }
+            }
+        }
+    }
+    .del-btn {
+        width: 24px;
+        height: 24px;
+        background: rgba(0, 0, 0, 0.6);
+        border-radius: 50%;
+        position: absolute;
+        cursor: pointer;
+        top: 10px;
+        right: 10px;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .loading-icon {
+        color: var(--editor-main-color);
+        animation: rotate 2s infinite linear;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 30px;
+    }
+    @keyframes rotate {
+        0% {
+            transform: translate(-50%, -50%) rotate(0deg);
+        }
+        100% {
+            transform: translate(-50%, -50%) rotate(360deg);
+        }
+    }
+    .pic-box {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        border-radius: 4px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        top: 0;
+        left: 0;
+        z-index: 10;
+
+        .over-box {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        .continue {
+            width: 100%;
+            height: 32px;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 200%);
+            border-radius: 0px 0px 4px 4px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+
+            .ui-input {
+                width: 100%;
+            }
+            .continue-tips {
+                font-size: 12px;
+                margin-right: 5px;
+            }
+            .edit-pic-num {
+                // position: absolute;
+                // right: 10px;
+                font-size: 12px;
+                .cur {
+                    color: var(--editor-main-color);
+                }
+            }
+            .pic-num {
+                position: absolute;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                font-size: 12px;
+                .cur {
+                    color: var(--editor-main-color);
+                }
+            }
+        }
+
+        .ctrl-btn {
+            width: 32px;
+            height: 32px;
+            background: rgba(0, 0, 0, 0.2);
+            border-radius: 50%;
+            position: absolute;
+            cursor: pointer;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 10;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .iconfont {
+                font-size: 14px;
+            }
+            &.left-btn {
+                left: 5px;
+            }
+            &.right-btn {
+                right: 5px;
+            }
+        }
+        .image-list {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            transition: all 0.3s linear;
+            .image-item {
+                width: 100%;
+                height: 100%;
+                // background: red;
+                position: absolute;
+                transform: translateX(0);
+                text-align: center;
+                background-repeat: no-repeat;
+                background-size: contain;
+                background-position: center;
+                img {
+                    height: 100%;
+                    width: auto;
+                }
+            }
+        }
+        &.show {
+            .ctrl-btn {
+                width: 40px;
+                height: 80px;
+                background: rgba(0, 0, 0, 0.6);
+                .iconfont {
+                    font-size: 20px;
+                }
+                &.left-btn {
+                    left: 0px;
+                    border-radius: 0 40px 40px 0;
+                    .icon {
+                        margin-right: 5px;
+                    }
+                }
+                &.right-btn {
+                    right: 0px;
+                    border-radius: 40px 0 0 40px;
+                    .icon {
+                        margin-left: 8px;
+                    }
+                }
+            }
+            .continue {
+                width: 76px;
+                height: 36px;
+                background: rgba(0, 0, 0, 0.6);
+                border-radius: 20px;
+                position: absolute;
+                bottom: -5%;
+                left: 50%;
+                transform: translateX(-50%);
+
+                .pic-num {
+                    width: 76px;
+                    height: 36px;
+                    display: inline-block;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 20px;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    span {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+    }
+
+    [is-mobile] {
+        .pic-box {
+            &.show {
+                .ctrl-btn {
+                    width: 40px;
+                    height: 80px;
+                    background: rgba(0, 0, 0, 0.6);
+                    .iconfont {
+                        font-size: 20px;
+                    }
+                    &.left-btn {
+                        left: 0px;
+                        border-radius: 0 40px 40px 0;
+                        .icon {
+                            margin-right: 5px;
+                        }
+                    }
+                    &.right-btn {
+                        right: 0px;
+                        border-radius: 40px 0 0 40px;
+                        .icon {
+                            margin-left: 8px;
+                        }
+                    }
+                }
+                .continue {
+                    width: 76px;
+                    height: 36px;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 20px;
+                    position: absolute;
+                    bottom: -6%;
+                    left: 50%;
+                    transform: translateX(-50%);
+
+                    .pic-num {
+                        width: 76px;
+                        height: 36px;
+                        display: inline-block;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 20px;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        span {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .video-box {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: absolute;
+        border-radius: 4px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        top: 0;
+        left: 0;
+        z-index: 10;
+        .loading-icon {
+            color: var(--editor-main-color);
+            animation: rotate 2s infinite linear;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 30px;
+        }
+        @keyframes rotate {
+            0% {
+                transform: translate(-50%, -50%) rotate(0deg);
+            }
+            100% {
+                transform: translate(-50%, -50%) rotate(360deg);
+            }
+        }
+        .video-item {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
 }
 @keyframes tag-animate-zoom {
     0% {

playground/src/pages/tag.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, inject, ref } from 'vue'
 import { UITag } from '@kankan-components/components'
-import '@kankan-components/theme-chalk/dist/ui-tag.css'
+import '@kankan-components/theme-chalk/src/tag.scss'
 const __sdk: any = inject('__sdk')
 
 const tags = ref<any>([])
@@ -24,6 +24,7 @@ const handleTagview = (data: any) => {
             <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>id:{{ id }}</div>
                         <div>isClick:{{ isClick }}</div>
                         <div>isShow:{{ isShow }}</div>
                         <div>x:{{ x }}</div>