@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/tree/search.vue

@@ -0,0 +1,108 @@
+<template>
+  <div style="width: 100%; overflow: auto">
+    <bk-input
+      v-model="searchVal"
+      placeholder="Search"
+      type="search"
+    />
+    <div class="row">
+      <div class="cell">
+        <span>简化配置: <code>search = string</code></span>
+        <bk-tree
+          :data="treeData"
+          :search="searchVal"
+          children="children"
+          label="name"
+        />
+      </div>
+      <div class="cell">
+        <span>详细配置：<code>search = { SearchOption }</code></span>
+        <bk-tree
+          :data="treeData"
+          :search="searchOption1"
+          children="children"
+          label="name"
+        />
+      </div>
+      <div class="cell">
+        <span>详细配置-自定义搜索条件：<code>search = { SearchOption }</code></span>
+        <bk-tree
+          :data="treeData"
+          :search="searchOption2"
+          children="children"
+          label="name"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { BASIC_DATA } from './options';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        treeData: [...BASIC_DATA],
+        searchVal: '',
+      };
+    },
+    computed: {
+      searchOption1() {
+        return {
+          /**
+           * 需要匹配的值
+           * 支持字符串
+           * */
+          value: this.searchVal,
+
+          /**
+           * 支持模糊匹配（fuzzy） || 完全匹配（full）
+           * 默认 模糊匹配（fuzzy）
+           * 支持自定义匹配函数 (searchValue, itemText, item) => true || false
+           */
+          match: 'fuzzy',
+
+          /**
+           * 显示为 tree || list
+           * 默认 tree
+           */
+          resultType: 'tree',
+        };
+      },
+      searchOption2() {
+        return {
+          /**
+           * 需要匹配的值
+           * */
+          value: this.searchVal,
+
+          /**
+           * 支持模糊匹配（fuzzy） || 完全匹配（full）
+           * 默认 模糊匹配（fuzzy）
+           * 支持自定义匹配函数 (searchValue, itemText, item) => true || false
+           */
+          match: this.searchFn,
+
+          /**
+           * 显示为 tree || list
+           * 默认 tree
+           */
+          resultType: 'tree',
+          showChildNodes: false,
+        };
+      },
+    },
+    methods: {
+      searchFn(searchValue, itemvalue) {
+        const match = new RegExp(searchValue, 'i').test(itemvalue);
+        return match;
+      },
+    },
+  });
+</script>
+<style scoped>
+  @import './tree.less';
+</style>

package/knowledge/examples/tree/selected.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="row">
+    <div class="column">
+      <bk-input style="width: 120px; margin: 0 15px 0 0" v-model="selectText" />
+      <bk-button @click="handleSelect"> 测试选中 </bk-button>
+      <div class="cell">
+        <bk-tree ref="refAutoSelect" :auto-open-parent-node="false" :data="treeData" :selected="selected" selectable
+          children="children" label="name" node-key="id" level-line show-checkbox @node-selected="handleNodeSelected" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+const cache = new WeakMap();
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      selectText: '2',
+      selected: ['2'],
+      treeData: [
+        {
+          id: '1',
+          name: '方案成熟',
+          isOpen: true,
+          content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+          children: [
+            {
+              id: '2',
+              name: 'child-1-方案成熟-拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+              content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+              children: [],
+            },
+            {
+              id: '3',
+              name: 'child-1-覆盖全面',
+              content:
+                '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+              children: [],
+            },
+            {
+              id: '4',
+              name: 'child-1-开放平台',
+              content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+              children: [
+                {
+                  id: '5',
+                  name: 'child-1-方案成熟',
+                  content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+                  children: [],
+                },
+                {
+                  id: '6',
+                  name: 'child-1-覆盖全面',
+                  content:
+                    '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+                  children: [],
+                },
+                {
+                  id: '7',
+                  name: 'child-1-开放平台',
+                  isOpen: true,
+                  content:
+                    '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSelect() {
+      this.selected = [this.selectText];
+    },
+    handleNodeSelected(...args) {
+      console.log(args);
+      if (cache.get(args[0].node)) {
+        setTimeout(() => {
+          this.$refs.refAutoSelect.setOpen(args[0].node, false);
+        });
+        cache.delete(args[0].node);
+        return;
+      }
+
+      cache.set(args[0].node, true);
+      // this.$refs.refAutoSelect.setNodeOpened()
+    },
+  },
+});
+</script>
+<style scoped>
+@import './tree.less';
+</style>

package/knowledge/examples/tree/tree.less

@@ -0,0 +1,14 @@
+.row {
+  display: flex;
+  .column {
+    flex: 1;
+    .cell {
+      padding: 0 15px;
+      overflow: hidden;
+      height: 300px;
+      width: 100%;
+      border-right: solid 1px #ddd;
+      flex: 1;
+    }
+  }
+}

package/knowledge/examples/tree/virtual-render.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="row">
+    <div class="column">
+      <div>
+        <bk-button
+          theme="primary"
+          @click="handleRandomRows"
+        >
+          随机数据
+        </bk-button>
+        <span style="padding: 4px" />
+        <bk-button
+          theme="primary"
+          @click="() => handleHeightChange(100)"
+        >
+          设置高度 +
+        </bk-button>
+        <span style="padding: 4px" />
+        <bk-button
+          theme="primary"
+          @click="() => handleHeightChange(-100)"
+        >
+          设置高度 -
+        </bk-button>
+        <span style="padding: 4px" />
+        <bk-button
+          theme="primary"
+          @click="handleScrollToTop"
+        >
+          ScrollToTop({{ scrollToPath }})
+        </bk-button>
+        <bk-input
+          style="width: 400px; margin-left: 20px"
+          v-model="search.value"
+          type="search"
+        />
+      </div>
+      <div
+        :style="{ height: `${height}px` }"
+        class="cell"
+      >
+        <bk-tree
+          ref="refTree"
+          :data="treeData"
+          :search="search"
+          children="children"
+          label="name"
+          expand-all
+          level-line
+          show-checkbox
+          virtual-render
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { BASIC_DATA } from './options';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        treeData: [...BASIC_DATA],
+        height: 500,
+        scrollToPath: '-',
+        search: {
+          value: '',
+          showChildNodes: true,
+        },
+      };
+    },
+    mounted() {
+      setTimeout(() => {
+        this.handleRandomRows();
+      }, 500);
+    },
+    methods: {
+      handleRandomRows() {
+        this.treeData.length = 0;
+        function randomChildren(depth = 5) {
+          if (depth > 0) {
+            const length = Math.ceil(Math.random() * depth);
+            return new Array(length)
+              .fill(depth)
+              .map((item, index) => ({ name: `depth-${item}-${index}`, children: randomChildren(depth - 1) }));
+          }
+
+          return [];
+        }
+        this.treeData = randomChildren();
+      },
+      handleHeightChange(value) {
+        this.height = this.height + value;
+        this.$refs.refTree.reset();
+      },
+      handleScrollToTop() {
+        const data = this.$refs.refTree.getData();
+        const targetItem = data.data[Math.ceil(data.data.length / 2)];
+        this.scrollToPath = targetItem.name;
+        this.$refs.refTree.scrollToTop(targetItem);
+      },
+    },
+  });
+</script>
+
+<style scoped>
+  @import './tree.less';
+</style>

package/knowledge/examples/upload/demo/accept-image.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :accept="'image/png,image/jpeg,image/jpg'"
+      :handle-res-code="handleRes"
+      :tip="'只允许上传JPG、PNG、JPEG的文件'"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      with-credentials
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkUpload from '@bkui-vue/upload';
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>

package/knowledge/examples/upload/demo/accept-zip.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :accept="'.zip'"
+      :handle-res-code="handleRes"
+      :tip="'只允许上传ZIP的文件'"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      with-credentials
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkUpload from '@bkui-vue/upload';
+  const handleRes = response => {
+    console.log(response, 'handleRes');
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>

package/knowledge/examples/upload/demo/base.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :handle-res-code="handleRes"
+      :select-change="handleSelectChange"
+      :tip="'只允许上传JPG、PNG、JPEG、ZIP的文件'"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      :files="fileList"
+      with-credentials
+      @done="handleDone"
+      @error="handleError"
+      @progress="handleProgress"
+      @success="handleSuccess"
+      :before-upload="handleBeforeUpload"
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkUpload from '@bkui-vue/upload';
+  import { Message } from 'bkui-vue';
+  import { ref } from 'vue';
+
+  let fileList = ref([]);
+  const handleSuccess = (file, fileList) => {
+    console.log(file, fileList, 'handleSuccess');
+  };
+  const handleProgress = (event, file, fileList) => {
+    console.log(event, file, fileList, 'handleProgress');
+  };
+  const handleError = (file, fileList, error) => {
+     Message({
+      theme: 'error',
+      message: error.message
+     })
+  };
+  const handleDone = fileList => {
+    console.log(fileList, 'handleDone');
+    fileList.value = [...fileList]
+  };
+  const handleRes = response => {
+    console.log(response, 'handleRes');
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+  const handleBeforeUpload = (file, fileList) => {
+    const whiteList = ['jpg', 'jpeg', 'png', 'zip'];
+    let AllFiles = fileList.filter((v) => whiteList.includes(v.name.substring(file.name.lastIndexOf('.') + 1)));
+    if(AllFiles.length !== fileList.length) {
+      fileList.pop();
+      Message({
+        theme: 'warning',
+        message: '允许上传JPG、PNG、JPEG、ZIP的文件'
+      });
+      return false;
+    }
+    return true;
+  };
+  const handleSelectChange = event => {
+    console.log(event, 'change');
+  };
+</script>
+
+<style lang="less">
+  .demo {
+    padding: 24px;
+  }
+</style>

package/knowledge/examples/upload/demo/limit.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :handle-res-code="handleRes"
+      :limit="limit"
+      :tip="'最多上传2个文件'"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      with-credentials
+      @exceed="handleExceed"
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkMessage from '@bkui-vue/message';
+  import BkUpload from '@bkui-vue/upload';
+
+  const limit = 2;
+
+  const handleExceed = (files, fileList) => {
+    console.log(files, fileList, 'handleExceed');
+    BkMessage({
+      theme: 'error',
+      message: `最多上传${limit}个文件`,
+    });
+  };
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>

package/knowledge/examples/upload/demo/max-size.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :handle-res-code="handleRes"
+      :size="5"
+      :tip="'最大上传5(Mb)的文件'"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      with-credentials
+      @error="handleError"
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkUpload from '@bkui-vue/upload';
+
+  const handleError = (file, fileList, error) => {
+    console.log(file, fileList, error, 'handleError');
+  };
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>

package/knowledge/examples/upload/demo/preview-image.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :files="files"
+      :handle-res-code="handleRes"
+      :is-show-preview="true"
+      :multiple="true"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      theme="picture"
+      with-credentials
+      @delete="handleDelete"
+      @preview="handlePreview"
+    />
+
+    <bk-dialog
+      v-model:is-show="previewVisible"
+      :close-icon="false"
+      :title="previewTitle"
+      quick-close
+    >
+      <img
+        width="100%"
+        :src="previewImage"
+      />
+    </bk-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import BkUpload from '@bkui-vue/upload';
+
+  import babyImgUrl from '../../../imgs/babyq.png';
+  import dovImgUlr from '../../../imgs/dov.png';
+  import qqImageUrl from '../../../imgs/qq.png';
+
+  const files = ref([
+    {
+      name: 'baby',
+      url: babyImgUrl,
+    },
+    {
+      name: 'qq',
+      url: qqImageUrl,
+    },
+    {
+      name: 'dov',
+      url: dovImgUlr,
+    },
+  ]);
+  const previewTitle = ref('图片预览');
+  const previewImage = ref('');
+  const previewVisible = ref(false);
+
+  const handleDelete = (file, fileList) => {
+    console.log(file, fileList, 'handleDelete');
+  };
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+
+  const handlePreview = async (file, fileList) => {
+    if (!file.url) {
+      file.url = await getBase64(file);
+    }
+    previewImage.value = file.url;
+    previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
+    previewVisible.value = true;
+  };
+
+  const getBase64 = file => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  };
+</script>
+
+<style scoped>
+  :deep(.bk-modal-footer) {
+    display: none;
+  }
+</style>

package/knowledge/examples/upload/demo/single-picture.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :files="files"
+      :handle-res-code="handleRes"
+      :multiple="false"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      theme="picture"
+      with-credentials
+      @delete="handleDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkUpload from '@bkui-vue/upload';
+
+  import babyqImgUrl from '../../../imgs/babyq.png';
+
+  const files = [
+    {
+      url: babyqImgUrl,
+    },
+  ];
+
+  const handleDelete = (file, fileList) => {
+    console.log(file, fileList, 'handleDelete');
+  };
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>