@blueking/bkui-knowledge 0.0.1-beta.13 → 0.0.1-beta.15

package/knowledge/examples/vue2/icon/icon-list-demo.vue

@@ -0,0 +1,68 @@
+<template>
+  <h3 class="icon-title">小图标</h3>
+  <ul class="icon-wrapper">
+    <li v-for="icon in smallIcons" :key="icon" :title="icon" @click="copyIconName(icon)">
+      <bk-icon :type="icon" />
+    </li>
+  </ul>
+  <h3 class="icon-title">填充图标</h3>
+  <ul class="icon-wrapper">
+    <li v-for="icon in shapeIcons" :key="icon" :title="icon" @click="copyIconName(icon)">
+      <bk-icon :type="icon" />
+    </li>
+  </ul>
+  <h3 class="icon-title">线性图标</h3>
+  <ul class="icon-wrapper">
+    <li v-for="icon in lineIcons" :key="icon" :title="icon" @click="copyIconName(icon)">
+      <bk-icon :type="icon" />
+    </li>
+  </ul>
+</template>
+<script>
+
+import { bkIcon } from '@'
+
+export default {
+  components: {
+    bkIcon
+  },
+
+  data () {
+    return {
+      smallIcons: [
+        'angle-double-down', 'angle-double-left', 'angle-double-right', 'angle-double-up', 'angle-left', 'angle-down', 'angle-right', 'angle-up', 'arrows-left', 'arrows-right', 'arrows-down', 'arrows-up', 'check-1', 'close', 'edit2', 'plus'
+      ],
+      lineIcons: [
+        'apps', 'area-chart', 'arrows-down-circle', 'arrows-left-circle', 'arrows-right-circle', 'arrows-up-circle', 'back', 'back2', 'bar-chart', 'bk', 'calendar', 'chain', 'check-circle', 'circle-2-1', 'circle-4-1', 'circle', 'clipboard', 'clock', 'close-circle', 'code', 'cog', 'cry', 'dashboard-2', 'dashboard', 'data', 'data2', 'dedent', 'delete', 'dialogue-empty', 'dialogue', 'dispirited', 'docker', 'download', 'edit', 'ellipsis', 'email', 'empty', 'end', 'exclamation-circle', 'exclamation-triangle', 'exclamation', 'execute', 'eye-slash', 'eye', 'file-plus', 'file', 'folder-open', 'folder-plus', 'folder', 'full-screen', 'heart', 'hide', 'home', 'id', 'image', 'indent', 'info-circle', 'info', 'key', 'line-chart', 'list', 'lock', 'minus-circle', 'minus-square', 'minus', 'mobile', 'monitors-cog', 'monitors', 'more', 'move', 'next', 'order', 'panel-permission', 'panel', 'panels', 'password', 'pause', 'pc', 'pie-chart', 'pipeline', 'play', 'play2', 'play3', 'plus-circle', 'plus-square', 'project', 'qq', 'question-circle', 'question', 'refresh', 'save', 'script-file', 'script-files', 'search', 'sina', 'sitemap', 'smile', 'sort', 'star', 'stop', 'tree-application', 'tree-module', 'tree-process', 'un-full-screen', 'unlock', 'upload', 'user', 'weixin', 'work-manage'
+      ],
+      shapeIcons: [
+        'apps-shape', 'arrows-down-circle-shape', 'arrows-down-shape', 'arrows-left-circle-shape', 'arrows-left-shape', 'arrows-m-down-shape', 'arrows-m-left-shape', 'arrows-m-right-shape', 'arrows-m-up-shape', 'arrows-right-circle-shape', 'arrows-right-shape', 'arrows-up-circle-shape', 'arrows-up-shape', 'back-shape', 'block-shape', 'calendar-shape', 'check-circle-shape', 'circle-shape', 'clipboard-shape', 'clock-shape', 'close-circle-shape', 'close3-shape', 'cog-shape', 'cry-shape', 'dashboard-2-shape', 'dashboard-shape', 'data-shape', 'data2-shape', 'dialogue-empty-shape', 'dialogue-shape', 'dispirited-shape', 'down-shape', 'email-shape', 'empty-shape', 'exclamation-circle-shape', 'exclamation-triangle-shape', 'eye-shape', 'eye-slash-shape', 'file-plus-shape', 'file-shape', 'folder-open-shape', 'folder-plus-shape', 'folder-shape', 'heart-shape', 'home-shape', 'id-shape', 'image-shape', 'info-circle-shape', 'left-shape', 'lock-shape', 'minus-circle-shape', 'minus-square-shape', 'mobile-shape', 'next-shape', 'order-shape', 'panel-shape', 'password-shape', 'pc-shape', 'pie-chart-shape', 'pipeline-shape', 'play-circle-shape', 'play-shape', 'plus-circle-shape', 'plus-square-shape', 'qq-shape', 'question-circle-shape', 'right-shape', 'save-shape', 'sina-shape', 'sitemap-shape', 'smile-shape', 'star-shape', 'stop-shape', 'tree-application-shape', 'tree-group-shape', 'tree-module-shape', 'tree-process-shape', 'unlock-shape', 'up-shape', 'user-shape', 'weixin-shape', 'rtx'
+      ]
+    }
+  }
+}
+
+</script>
+<style>
+h3.icon-title {
+        margin: 10px 0 20px;
+    }
+    .icon-wrapper {
+        display: flex;
+        flex-flow: row wrap;
+        margin: 0;
+        padding: 0;
+        li {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            width: 36px;
+            height: 36px;
+            margin-right: 15px;
+            margin-bottom: 15px;
+            font-size: 20px;
+            border: 1px solid #c4c6cc;
+        }
+    }
+</style>

package/knowledge/examples/vue2/icon/svg-icon-demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <ul class="icon-wrapper">
+    <li v-for="icon in shapeIcons" :key="icon" :title="icon" @click="copySVGIconName(icon)">
+      <bk-icon :type="icon" svg />
+    </li>
+  </ul>
+</template>
+<script>
+
+import { bkIcon } from '@'
+
+export default {
+  components: {
+    bkIcon
+  },
+
+  data () {
+    return {
+      shapeIcons: [
+        'apps-shape', 'arrows-down-circle-shape', 'arrows-down-shape', 'arrows-left-circle-shape', 'arrows-left-shape', 'arrows-m-down-shape', 'arrows-m-left-shape', 'arrows-m-right-shape', 'arrows-m-up-shape', 'arrows-right-circle-shape', 'arrows-right-shape', 'arrows-up-circle-shape', 'arrows-up-shape', 'back-shape', 'block-shape', 'calendar-shape', 'check-circle-shape', 'circle-shape', 'clipboard-shape', 'clock-shape', 'close-circle-shape', 'close3-shape', 'cog-shape', 'cry-shape', 'dashboard-2-shape', 'dashboard-shape', 'data-shape', 'data2-shape', 'dialogue-empty-shape', 'dialogue-shape', 'dispirited-shape', 'down-shape', 'email-shape', 'empty-shape', 'exclamation-circle-shape', 'exclamation-triangle-shape', 'eye-shape', 'eye-slash-shape', 'file-plus-shape', 'file-shape', 'folder-open-shape', 'folder-plus-shape', 'folder-shape', 'heart-shape', 'home-shape', 'id-shape', 'image-shape', 'info-circle-shape', 'left-shape', 'lock-shape', 'minus-circle-shape', 'minus-square-shape', 'mobile-shape', 'next-shape', 'order-shape', 'panel-shape', 'password-shape', 'pc-shape', 'pie-chart-shape', 'pipeline-shape', 'play-circle-shape', 'play-shape', 'plus-circle-shape', 'plus-square-shape', 'qq-shape', 'question-circle-shape', 'right-shape', 'save-shape', 'sina-shape', 'sitemap-shape', 'smile-shape', 'star-shape', 'stop-shape', 'tree-application-shape', 'tree-group-shape', 'tree-module-shape', 'tree-process-shape', 'unlock-shape', 'up-shape', 'user-shape', 'weixin-shape', 'rtx'
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/image/basic-demo.vue

@@ -0,0 +1,15 @@
+<template>
+  <bk-image fit="contain" :src="src" style="width: 200px;"></bk-image>
+</template>
+<script>
+
+import { bkImage } from '@'
+export default {
+  data () {
+    return {
+      src: './example/static/images/preview/0.png'
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/image/fit-container-demo.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="demo-image">
+    <div class="block" v-for="fit in fits" :key="fit">
+      <span class="demonstration">{{ fit }}</span>
+      <bk-image style="width: 100px; height: 100px" :src="src" :fit="fit"></bk-image>
+    </div>
+  </div>
+</template>
+<script>
+
+import { bkImage } from '@'
+export default {
+  data () {
+    return {
+      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
+      src: './example/static/images/preview/0.png'
+    }
+  }
+}
+
+</script>
+<style lang="postcss">
+.demo-image {
+        .block {
+            padding: 30px 0;
+            text-align: center;
+            border-right: solid 1px #eff2f6;
+            display: inline-block;
+            width: 20%;
+            box-sizing: border-box;
+            vertical-align: top;
+            &:last-child {
+                border-right: none;
+            }
+        }
+
+        .demonstration {
+            display: block;
+            color: #8492a6;
+            font-size: 14px;
+            margin-bottom: 20px;
+        }
+    }
+</style>

package/knowledge/examples/vue2/image/lazy-demo.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="demo-image-lazy">
+    <bk-image v-for="url in srcList" :key="url" :src="url" lazy></bk-image>
+  </div>
+</template>
+<script>
+
+import { bkImage } from '@'
+export default {
+  data () {
+    return {
+      srcList: [
+        './example/static/images/preview/0.png',
+        './example/static/images/preview/1.png',
+        './example/static/images/preview/2.png',
+        './example/static/images/preview/3.png',
+        './example/static/images/preview/33.png',
+        './example/static/images/preview/4.png',
+        './example/static/images/preview/55.png',
+        './example/static/images/preview/5.png',
+        './example/static/images/preview/6.png'
+      ]
+    }
+  }
+}
+
+</script>
+<style lang="postcss">
+.demo-image-lazy {
+        height: 400px;
+        overflow-y: auto;
+        .bk-image {
+            display: block;
+            min-height: 200px;
+            margin-bottom: 10px;
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+</style>

package/knowledge/examples/vue2/image/load-error-demo.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="demo-image">
+    <div class="block">
+      <span class="demonstration">默认</span>
+      <bk-image class="placeholder-box"></bk-image>
+    </div>
+    <div class="block">
+      <span class="demonstration">自定义</span>
+      <bk-image class="placeholder-box">
+        <div slot="error" class="image-slot">
+          <i class="bk-icon icon-image"></i>
+          <div class="mt5">加载失败</div>
+        </div>
+      </bk-image>
+    </div>
+    <div class="block">
+      <span class="demonstration">加载失败容错地址</span>
+      <bk-image
+        fit="contain"
+        :src="'./example/static/images/preview/09.png'"
+        :fallback="'./example/static/images/preview/0.png'"
+        class="placeholder-box">
+      </bk-image>
+    </div>
+  </div>
+</template>
+<style lang="postcss">
+.demo-image {
+        .block {
+            padding: 30px 0;
+            text-align: center;
+            border-right: solid 1px #eff2f6;
+            display: inline-block;
+            width: 20%;
+            box-sizing: border-box;
+            vertical-align: top;
+            &:last-child {
+                border-right: none;
+            }
+        }
+
+        .demonstration {
+            display: block;
+            color: #8492a6;
+            font-size: 14px;
+            margin-bottom: 20px;
+        }
+    }
+    .placeholder-box {
+        width: 100px;
+        height: 100px;
+    }
+</style>

package/knowledge/examples/vue2/image/placeholder-demo.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="demo-image">
+    <div class="block">
+      <span class="demonstration">默认</span>
+      <bk-image :src="src" class="image-box"></bk-image>
+    </div>
+    <div class="block">
+      <span class="demonstration">自定义</span>
+      <bk-image :src="src" class="image-box">
+        <div slot="placeholder" class="image-slot">
+          加载中<span class="dot">...</span>
+        </div>
+      </bk-image>
+    </div>
+  </div>
+</template>
+<script>
+
+import { bkImage } from '@'
+export default {
+  data () {
+    return {
+      src: './example/static/images/preview/0.png'
+    }
+  }
+}
+
+</script>
+<style lang="postcss">
+.demo-image {
+        .block {
+            padding: 30px 0;
+            text-align: center;
+            border-right: solid 1px #eff2f6;
+            display: inline-block;
+            width: 20%;
+            box-sizing: border-box;
+            vertical-align: top;
+            &:last-child {
+                border-right: none;
+            }
+        }
+
+        .demonstration {
+            display: block;
+            color: #8492a6;
+            font-size: 14px;
+            margin-bottom: 20px;
+        }
+    }
+    .image-box {
+        height: 71px;
+    }
+</style>

package/knowledge/examples/vue2/image/preview-large-demo.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <bk-image style="width: 200px;" :src="previewSrc" :preview-src-list="srcList"></bk-image>
+  </div>
+</template>
+<script>
+
+import { bkImage } from '@'
+
+export default {
+  components: {
+    bkImage
+  },
+  data () {
+    return {
+      previewSrc: './example/static/images/preview/0.png',
+      srcList: [
+        './example/static/images/preview/0.png',
+        './example/static/images/preview/1.png',
+        './example/static/images/preview/2.png',
+        './example/static/images/preview/3.png',
+        './example/static/images/preview/33.png',
+        './example/static/images/preview/4.png',
+        './example/static/images/preview/55.png',
+        './example/static/images/preview/5.png',
+        './example/static/images/preview/6.png'
+      ]
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/info-box/async-confirm-demo.vue

@@ -0,0 +1,65 @@
+<template>
+  <bk-button theme="primary" @click="asyncInfoBoxSuccess"
+    >点击删除(成功)</bk-button
+  >
+  <bk-button theme="primary" @click="asyncInfoBoxFailed"
+    >点击删除(失败)</bk-button
+  >
+</template>
+<script>
+import { bkButton } from "@";
+
+export default {
+  components: {
+    bkButton,
+  },
+  methods: {
+    asyncInfoBoxSuccess() {
+      this.$bkInfo({
+        title: "确认要删除？",
+        confirmLoading: true,
+        confirmFn: async () => {
+          try {
+            await new Promise((resolve) => {
+              setTimeout(() => {
+                resolve("成功");
+              }, 1500);
+            });
+            this.$bkMessage({
+              message: "删除成功",
+              theme: "success",
+            });
+            return true;
+          } catch (e) {
+            console.warn(e);
+            return false;
+          }
+        },
+      });
+    },
+    asyncInfoBoxFailed() {
+      this.$bkInfo({
+        title: "确认要删除？",
+        confirmLoading: true,
+        confirmFn: async () => {
+          try {
+            await new Promise((resolve, reject) => {
+              setTimeout(() => {
+                reject(new Error("失败"));
+              }, 1500);
+            });
+            return true;
+          } catch (e) {
+            console.warn(e);
+            this.$bkMessage({
+              message: "删除失败",
+              theme: "error",
+            });
+            return false;
+          }
+        },
+      });
+    },
+  },
+};
+</script>

package/knowledge/examples/vue2/info-box/basic-demo.vue

@@ -0,0 +1,28 @@
+<template>
+  <bk-button theme="primary" @click="defaultInfoBox1">默认配置的提示框1</bk-button>
+  <bk-button theme="primary" @click="defaultInfoBox2">默认配置的提示框2</bk-button>
+</template>
+<script>
+
+import { bkButton } from '@'
+
+export default {
+  components: {
+    bkButton
+  },
+  methods: {
+    defaultInfoBox1 () {
+      this.$bkInfo({
+        title: '确认要删除？'
+      })
+    },
+    defaultInfoBox2 () {
+      this.$bkInfo({
+        title: '请确认是否重置',
+        subTitle: '重置SecureKey，需要自行修改templates中的callback地址字段！'
+      })
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/info-box/close-callback-demo.vue

@@ -0,0 +1,40 @@
+<template>
+  <bk-button theme="primary" @click="closeFnInfoBox1">提示框1</bk-button>
+  <bk-button theme="primary" @click="closeFnInfoBox2">提示框2</bk-button>
+</template>
+<script>
+
+import { bkButton } from '@'
+
+export default {
+  components: {
+    bkButton
+  },
+  methods: {
+    closeFnInfoBox1 () {
+      this.$bkInfo({
+        title: '是否保存当前修改？',
+        okText: '保存',
+        cancelText: '不保存',
+        cancelFn () {
+          console.log('cancle')
+        }
+      })
+    },
+    closeFnInfoBox2 () {
+      this.$bkInfo({
+        title: '是否保存当前修改？',
+        okText: '保存',
+        cancelText: '不保存',
+        closeFn () {
+          console.log('close')
+        },
+        cancelFn () {
+          console.log('cancle')
+        }
+      })
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/info-box/container-demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <bk-button theme="primary" @click="customContainer1">HTMLElement</bk-button>
+  <div class="idx1 mb15">idx1</div>
+  <bk-button theme="primary" @click="customContainer2">VNode</bk-button>
+  <div ref="idx2" class="mb15">idx2</div>
+  <bk-button theme="primary" @click="customContainer3">String</bk-button>
+  <div class="idx3 mb15">idx3</div>
+</template>
+<script>
+
+import { bkButton } from '@'
+
+export default {
+  components: {
+    bkButton
+  },
+  methods: {
+    customContainer1 () {
+      this.$bkInfo({
+        title: '".idx1" HTMLElement',
+        container: document.querySelector('.idx1')
+      })
+    },
+    customContainer2 () {
+      this.$bkInfo({
+        title: '"idx2" VNode',
+        container: this.$refs.idx2
+      })
+    },
+    customContainer3 () {
+      this.$bkInfo({
+        title: '".idx3" String',
+        container: '.idx3'
+      })
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/info-box/more-config-demo.vue

@@ -0,0 +1,76 @@
+<template>
+  <bk-button theme="primary" @click="vnodeInfoBox">支持VNode</bk-button>
+  <bk-button theme="primary" @click="maskCloseInfoBox">点击遮罩关闭</bk-button>
+  <bk-button theme="primary" @click="escCloseInfoBox">ESC 关闭</bk-button>
+  <bk-button theme="primary" @click="closeIconInfoBox">不显示右上角的 X</bk-button>
+  <bk-button theme="primary" @click="colorfulInfoBox">配色主题</bk-button>
+  <bk-button theme="primary" @click="customIconInfoBox">自定义图标</bk-button>
+  <bk-button theme="primary" @click="customWidthInfoBox">自定义宽度</bk-button>
+</template>
+<script>
+
+import { bkButton } from '@'
+
+export default {
+  components: {
+    bkButton
+  },
+  methods: {
+    vnodeInfoBox () {
+      const h = this.$createElement
+
+      this.$bkInfo({
+        title: '支持VNode的提示框',
+        subHeader: h('div', {
+          style: {
+            color: 'red'
+          }
+        }, 'Hello World')
+      })
+    },
+    maskCloseInfoBox () {
+      this.$bkInfo({
+        title: '点击遮罩关闭',
+        maskClose: true
+      })
+    },
+    escCloseInfoBox () {
+      this.$bkInfo({
+        title: 'ESC 关闭',
+        escClose: true
+      })
+    },
+    closeIconInfoBox () {
+      this.$bkInfo({
+        title: '不显示右上角的关闭 X',
+        closeIcon: false
+      })
+    },
+    colorfulInfoBox () {
+      this.$bkInfo({
+        title: '自定义配色',
+        subTitle: '配置theme字段，支持primary, info, success, warning, danger',
+        theme: 'success'
+      })
+    },
+    customIconInfoBox () {
+      this.$bkInfo({
+        type: 'success',
+        title: '操作成功',
+        subTitle: '继续>>',
+        icon: 'check-circle',
+        showFooter: false
+      })
+    },
+    customWidthInfoBox () {
+      this.$bkInfo({
+        type: 'success',
+        title: '自定义宽度800',
+        width: 800,
+        showFooter: false
+      })
+    }
+  }
+}
+
+</script>

package/knowledge/examples/vue2/info-box/status-types-demo.vue

@@ -0,0 +1,75 @@
+<template>
+  <bk-button theme="success" @click="successInfoBox">成功</bk-button>
+  <bk-button theme="danger" @click="errorInfoBox">错误</bk-button>
+  <bk-button theme="warning" @click="warningInfoBox">警告</bk-button>
+  <bk-button @click="loadingInfoBox">加载中</bk-button>
+</template>
+<script>
+
+import { bkButton } from '@'
+
+export default {
+  components: {
+    bkButton
+  },
+  methods: {
+    successInfoBox () {
+      const h = this.$createElement
+
+      this.$bkInfo({
+        type: 'success',
+        title: '添加用户成功',
+        showFooter: false,
+        subHeader: h('a', {
+          style: {
+            color: '#3a84ff',
+            textDecoration: 'none',
+            cursor: 'pointer'
+          }
+        }, '继续添加')
+      })
+    },
+    errorInfoBox () {
+      const a = this.$bkInfo({
+        type: 'error',
+        title: '添加用户失败',
+        subTitle: '此窗口3秒后关闭',
+        showFooter: false
+      })
+
+      let num = 3
+      const t = setInterval(() => {
+        a.subTitle = `此窗口${--num}秒后关闭`
+        if (num === 0) {
+          clearInterval(t)
+          a.close()
+        }
+      }, 1000)
+    },
+    warningInfoBox () {
+      this.$bkInfo({
+        type: 'warning',
+        title: '此操作存在安全风险',
+        confirmFn (vm) {
+          console.warn(vm)
+        },
+        cancelFn (vm) {
+          console.warn(vm)
+        },
+        afterLeaveFn (vm) {
+          console.log(vm)
+        }
+      })
+    },
+    loadingInfoBox () {
+      this.$bkInfo({
+        type: 'loading',
+        showFooter: false,
+        title: 'loading',
+        subTitle: '请稍等…'
+      })
+    }
+  }
+}
+
+</script>