refactor(架构调整): 文档更换cdn方法

docs/.vitepress/i18n/pages/component.json

@@ -17,8 +17,8 @@
             "text": "高级组件",
             "children": [
                 {
-                    "link": "/tagsEditor",
-                    "text": "tag编辑器"
+                    "link": "/tag",
+                    "text": "tag热点"
                 }
             ]
         }

docs/examples/button/basic.vue

@@ -1,12 +1,5 @@
 <template>
     <el-row class="mb-4">
-        <!-- <el-button>Default</el-button>
-        <el-button type="primary">Primary</el-button>
-        <el-button type="success">Success</el-button>
-        <el-button type="info">Info</el-button>
-        <el-button type="warning">Warning</el-button>
-        <el-button type="danger">Danger</el-button> -->
-
         <UIButton>button1 </UIButton>
         <UIButton :width="100">button2</UIButton>
     </el-row>

docs/examples/tag/basic.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { onMounted, provide, ref } from 'vue'
+import { UITag } from 'kankan-components'
+
+const tags = ref<any>([])
+
+onMounted(() => {
+    const __win = window as any
+    const __sdk = (__win.__sdk = new __win.KanKan({
+        num: 'KJ-t-wOXfx2SDFy',
+        // server: 'https://test.4dkankan.com',
+        server: '/demoServer',
+    }))
+    provide('__sdk', __sdk)
+    __sdk.TagManager.on('loaded', (data: any) => __sdk.TagManager.load((tags.value = data) && tags.value))
+    __sdk.mount('#scene').render()
+})
+const handleTagview = ({ id }) => {
+    console.log('id', id)
+}
+</script>
+
+<template>
+    <div id="scene">
+        <Teleport v-if="tags.length > 0" 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">
+          <template #content="{ data, id, isClick, isShow, x, y }">
+            <div>id:{{ id }}</div>
+            <div>isClick:{{ isClick }}</div>
+            <div>isShow:{{ isShow }}</div>
+            <div>x:{{ x }}</div>
+            <div>y:{{ y }}</div>
+          </template>
+        </UITag>
+      </div> -->
+        </Teleport>
+    </div>
+</template>
+<style>
+html,
+body,
+#app,
+#scene {
+    width: 100%;
+    height: 600px;
+    padding: 0;
+    margin: 0;
+}
+</style>

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

@@ -30,157 +30,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/basic/button/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@kankan-components/utils'
+import Button from './src/button.vue'
+
+export const UIButton = withInstall(Button)
+
+export default UIButton
+
+export * from './src/button'

packages/components/basic/button/src/button.ts

@@ -0,0 +1,23 @@
+import { buildProps, definePropType } from '@kankan-components/utils'
+import type { ExtractPropTypes } from 'vue'
+import type button from './button.vue'
+
+export const buttonProps = buildProps({
+    type: {
+        type: String,
+        default: 'normal',
+    },
+    color: {
+        type: String,
+    },
+    width: {
+        type: definePropType<number | string>([Number, String]),
+    },
+    icon: {
+        type: String,
+    },
+})
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>
+
+export type ButtonInstance = InstanceType<typeof button>

packages/components/basic/button/src/button.vue

@@ -0,0 +1,33 @@
+<template>
+    <button class="ui-button" :class="className" :style="style">
+        <UIIcon v-if="icon" :type="icon" class="ui-button-icon" />
+        <slot />
+    </button>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps } from 'vue'
+import { normalizeUnitToStyle } from '@kankan-components/utils'
+import UIIcon from '@kankan-components/components/basic/icon'
+import { buttonProps } from './button'
+
+defineOptions({
+    name: 'UiButton',
+})
+const props = defineProps(buttonProps)
+
+const custom = `customize`
+const className = computed(() => (props.color ? custom : props.type))
+
+const style = computed(() => {
+    const style = {
+        width: props.width ? normalizeUnitToStyle(props.width) : 'auto',
+        '--color': '',
+    }
+
+    if (className.value === custom) {
+        style['--color'] = props.color || ''
+    }
+    return style
+})
+</script>

packages/components/basic/button/style/css.ts

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

packages/components/basic/button/style/index.ts

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

packages/components/basic/index.ts

@@ -1 +1,2 @@
 export * from './icon'
+export * from './button'

packages/components/index.ts

@@ -1,2 +1,3 @@
 export * from './basic'
 export * from './advance'
+// export * from './editor'

packages/kankan-components/component.ts

@@ -1,6 +1,6 @@
 import { UIIcon } from '@kankan-components/components/basic/icon'
-// import { UIButton } from '@kankan-components/components/basic/button'
+import { UIButton } from '@kankan-components/components/basic/button'
 import { UITag } from '@kankan-components/components/advance/tag'
 import type { Plugin } from 'vue'
 
-export default [UIIcon, UITag] as Plugin[]
+export default [UIIcon, UIButton, UITag] as Plugin[]

packages/theme-chalk/common/base.scss

@@ -0,0 +1,293 @@
+/*!
+ * ress.css • v4.0.0
+ * MIT License
+ * github.com/filipelinhares/ress
+ */
+
+/* # =================================================================
+   # Global selectors
+   # ================================================================= */
+
+html {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
+    word-break: normal;
+    -moz-tab-size: 4;
+    tab-size: 4;
+}
+
+*,
+::before,
+::after {
+    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
+    box-sizing: inherit;
+    appearance: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    text-rendering: optimizeLegibility !important;
+    -webkit-font-smoothing: antialiased !important;
+}
+
+::before,
+::after {
+    text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
+    vertical-align: inherit;
+}
+
+* {
+    padding: 0; /* Reset `padding` and `margin` of all elements */
+    margin: 0;
+}
+
+/* # =================================================================
+     # General elements
+     # ================================================================= */
+
+hr {
+    overflow: visible; /* Show the overflow in Edge and IE */
+    height: 0; /* Add the correct box sizing in Firefox */
+    color: inherit; /* Correct border color in Firefox. */
+}
+
+details,
+main {
+    display: block; /* Render the `main` element consistently in IE. */
+}
+
+summary {
+    display: list-item; /* Add the correct display in all browsers */
+}
+
+small {
+    font-size: 80%; /* Set font-size to 80% in `small` elements */
+}
+
+[hidden] {
+    display: none; /* Add the correct display in IE */
+}
+
+abbr[title] {
+    border-bottom: none; /* Remove the bottom border in Chrome 57 */
+    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+a {
+    background-color: transparent; /* Remove the gray background on active links in IE 10 */
+}
+
+a:active,
+a:hover {
+    outline-width: 0; /* Remove the outline when hovering in all browsers */
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace; /* Specify the font family of code elements */
+}
+
+pre {
+    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
+}
+
+b,
+strong {
+    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
+}
+
+/* https://gist.github.com/unruthless/413930 */
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+table {
+    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
+    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+}
+
+/* # =================================================================
+     # Forms
+     # ================================================================= */
+
+input {
+    border-radius: 0;
+}
+
+/* Replace pointer cursor in disabled elements */
+[disabled] {
+    cursor: default;
+    user-select: none;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
+}
+
+[type='search'] {
+    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+    outline-offset: -2px; /* Correct the outline style in Safari */
+}
+
+[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
+}
+
+textarea {
+    overflow: auto; /* Internet Explorer 11+ */
+    resize: vertical; /* Specify textarea resizability */
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font: inherit; /* Specify font inheritance of form elements */
+}
+
+optgroup {
+    font-weight: bold; /* Restore the font weight unset by the previous rule */
+}
+
+button {
+    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
+}
+
+button,
+select {
+    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
+}
+
+/* Apply cursor pointer to button elements */
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+    cursor: pointer;
+    color: inherit;
+}
+
+/* Remove inner padding and border in Firefox 4+ */
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/* Replace focus style removed in the border reset above */
+button:-moz-focusring,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    outline: 1px dotted #ccc;
+}
+
+button,
+  html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
+}
+
+/* Remove the default button styling in all browsers */
+button,
+input,
+select,
+textarea {
+    background-color: transparent;
+    border-style: none;
+}
+
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+    outline-width: 0;
+}
+
+/* Style select like a standard input */
+select {
+    -moz-appearance: none; /* Firefox 36+ */
+    -webkit-appearance: none; /* Chrome 41+ */
+}
+
+select::-ms-expand {
+    display: none; /* Internet Explorer 11+ */
+}
+
+select::-ms-value {
+    color: currentColor; /* Internet Explorer 11+ */
+}
+
+legend {
+    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
+    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
+    display: table; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge and IE */
+    white-space: normal; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
+}
+
+::-webkit-file-upload-button {
+    /* Correct the inability to style clickable types in iOS and Safari */
+    -webkit-appearance: button;
+    color: inherit;
+    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
+}
+
+/* # =================================================================
+     # Specify media element style
+     # ================================================================= */
+
+img {
+    border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
+}
+
+/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
+progress {
+    vertical-align: baseline;
+}
+
+/* # =================================================================
+     # Accessibility
+     # ================================================================= */
+
+/* Specify the progress cursor of updating elements */
+[aria-busy='true'] {
+    cursor: progress;
+}
+
+/* Specify the pointer cursor of trigger elements */
+[aria-controls] {
+    cursor: pointer;
+}
+
+/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
+[aria-disabled='true'] {
+    cursor: default;
+}
+
+.disabled,
+:disabled {
+    opacity: 0.3 !important;
+    pointer-events: none !important;
+}

packages/theme-chalk/src/base.scss

@@ -1,2 +1,3 @@
 @use 'var.scss';
+@use '../common/base.scss';
 @use 'icon.scss';

packages/theme-chalk/src/button.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+
+.ui-button {
+    width: 100%;
+    height: 34px;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    font-size: 14px;
+    background: none !important;
+
+    transition: all 0.3s ease;
+
+    .ui-button-icon {
+        margin-right: 0.6em;
+    }
+}
+
+.ui-button.customize {
+    background: none;
+    color: rgba(var(--color), 0.8);
+    border: 1px solid rgba(var(--color), 0.6);
+}
+
+.ui-button.normal {
+    color: var(--colors-color);
+    border: 1px solid var(--colors-normal-base);
+    &:hover {
+        color: var(--colors-normal-hover);
+        border: 1px solid var(--colors-normal-hover);
+    }
+    &:active {
+        color: var(--colors-normal-click);
+        border: 1px solid var(--colors-normal-click);
+    }
+}
+
+.ui-button.submit {
+    color: var(--color-main-hover);
+    border: 1px solid var(--color-main-normal);
+    background-color: var(--color-main-normal);
+    &:hover {
+        border-color: var(--color-main-hover);
+        background-color: var(--color-main-hover);
+    }
+    &:active {
+        border-color: var(--color-main-focus);
+        background-color: var(--color-main-focus);
+    }
+}
+
+.ui-button.cancel {
+    color: var(--color-main-normal);
+    border: 1px solid var(--color-main-normal);
+    &:hover {
+        border-color: var(--color-main-hover);
+    }
+    &:active {
+        border-color: var(--color-main-focus);
+    }
+}
+
+.ui-button.primary {
+    background-color: var(--colors-primary-base) !important;
+    color: var(--colors-normal-fill-hover);
+    border: none;
+    opacity: 1;
+
+    // &:active,
+    &:hover {
+        // opacity: 0.8;
+        // background: var(--colors-primary-hover) !important;
+        background: #4dd8c7 !important;
+    }
+    &:active {
+        background-color: var(--colors-primary-active) !important;
+        color: rgba(255, 255, 255, 0.6);
+    }
+}

packages/theme-chalk/src/index.scss

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

packages/theme-chalk/src/var.scss

@@ -1 +1,60 @@
 @use 'sass:map';
+
+:root {
+    --colors-primary-fill: 255, 255, 255;
+    --colors-primary-base-fill: 0, 200, 175;
+    --colors-primary-base: rgb(var(--colors-primary-base-fill));
+    --colors-primary-hover: #4dd8c7;
+    // --colors-primary-hover: #008B7A;
+    --colors-primary-active: #008b7a;
+    --colors-primary-click: #005046;
+    --colors-warn: #fa3f48;
+    --colors-color: #999;
+    --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
+    --colors-content-color: rgb(--colors-primary-fill);
+
+    --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
+    --colors-normal-base: rgba(var(--colors-primary-fill), 0.4);
+    --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
+    --colors-normal-click: var(--colors-primary-click);
+
+    --colors-normal-fill-back: var(--colors-normal-back);
+    --colors-normal-fill-base: var(--colors-normal-base);
+    --colors-normal-fill-hover: var(--colors-normal-hover);
+    --colors-normal-fill-click: var(--colors-primary-click);
+
+    --colors-error-fill: 250, 63, 72;
+
+    --small-size: 12px;
+    --medium-size: 14px;
+    --big-size: 16px;
+
+    // 正常
+    --color-main-normal: var(--colors-primary-base);
+    // 悬停
+    --color-main-hover: var(--colors-primary-hover);
+    // 点击
+    --color-main-focus: var(--colors-primary-click);
+
+    --editor-head-filter: blur(0px);
+    --editor-head-height: 50px;
+
+    --editor-head-back: rgba(20, 20, 20, 0.86);
+
+    --editor-menu-filter: var(--editor-head-filter);
+    --editor-menu-width: 80px;
+    --editor-menu-left: 0px;
+    --editor-menu-right: 0px;
+    --editer-menu-fill: 27, 27, 28;
+    --editor-menu-back: rgba(var(--editer-menu-fill), 0.8);
+    --editor-menu-active-back: rgba(var(--colors-primary-fill), 0.06);
+    --editor-menu-color: #999;
+    --editor-menu-active: rgba(255, 255, 255, 0.06);
+
+    --editor-toolbox-top: var(--editor-head-height);
+    --editor-toolbox-left: calc(var(--editor-menu-left) + var(--editor-menu-width));
+    --editor-toolbox-width: 340px;
+    --editor-toolbox-back: var(--editor-menu-back);
+    --editor-toolbox-padding: 20px;
+    --editor-toolbar-height: 60px;
+}

playground/src/pages/tag.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, inject, ref } from 'vue'
-import { UITag } from '@kankan-components/components'
+import { UITag, UIButton } from '@kankan-components/components'
 import '@kankan-components/theme-chalk/src/tag.scss'
 const __sdk: any = inject('__sdk')
 
@@ -10,6 +10,7 @@ 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)
 }
@@ -18,9 +19,6 @@ const handleTagview = (data: any) => {
 <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 }">
@@ -34,7 +32,6 @@ const handleTagview = (data: any) => {
             </div>
         </Teleport>
     </div>
-    <div id="scene-front"></div>
 </template>
 
 <style scoped>
@@ -42,10 +39,4 @@ const handleTagview = (data: any) => {
     width: 100vw;
     height: 100vh;
 }
-#scene-front {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
-}
 </style>