@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/transfer/custom-option-demo.vue

@@ -0,0 +1,47 @@
+<template>
+  <bk-transfer
+    :display-key="'name'"
+    :setting-key="'code'"
+    :sort-key="'code'"
+    :source-list="rtxList"
+    :target-list="rtxValue"
+    sortable
+    @change="change"
+  >
+    <template #source-option="data">
+      <div>code: {{ data.code }}, name: {{ data.name }}</div>
+    </template>
+    <template #target-option="data">
+      <div>code: {{ data.code }}, name: {{ data.name }}</div>
+    </template>
+  </bk-transfer>
+</template>
+<script>
+  import BkTransfer from '@bkui-vue/transfer';
+
+  export default {
+    components: {
+      BkTransfer,
+    },
+    data() {
+      return {
+        rtxList: [
+          { name: 'zhangsan', code: 1 },
+          { name: 'lisi', code: 2 },
+          { name: 'laowang', code: 3 },
+          { name: 'zhaosi', code: 4 },
+          { name: 'liuer', code: 5 },
+          { name: 'zhousan', code: 6 },
+          { name: 'huangwu', code: 7 },
+          { name: 'tianliu', code: 8 },
+        ],
+        rtxValue: [1, 5, 7],
+      };
+    },
+    methods: {
+      change(...rest) {
+        console.log(...rest);
+      },
+    },
+  };
+</script>

package/knowledge/examples/transfer/index.tsx

@@ -0,0 +1,288 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { defineComponent } from 'vue';
+
+import DemoBox from '../../components/demo-box';
+import DemoTitle from '../../components/demo-title';
+import PropsBox from '../../components/props-box';
+import { IPropsTableItem } from '../../typings';
+import BaseDemo from './base-demo.vue';
+import CustomHeaderDemo from './custom-header-demo.vue';
+import CustomOptionDemo from './custom-option-demo.vue';
+import MultipleDemo from './multiple-demo.vue';
+import NormalListDemo from './normal-list-demo.vue';
+import SearchDemo from './search-demo.vue';
+import TargetListDemo from './target-list-demo.vue';
+
+const transferPropsJson: IPropsTableItem[] = [
+  {
+    name: 'title',
+    type: 'Array',
+    default: ['左侧列表', '右侧列表'],
+    desc: '顶部 title',
+    optional: [],
+  },
+  {
+    name: 'empty-content',
+    type: 'Array',
+    default: ['无数据', '未选择任何项'],
+    desc: '无数据时显示文案',
+    optional: [],
+  },
+  {
+    name: 'display-key',
+    type: 'String',
+    default: 'name',
+    desc: '循环 list 时，显示字段的 key 值',
+    optional: [],
+  },
+  {
+    name: 'setting-key',
+    type: 'String',
+    default: 'id',
+    desc: '具有唯一标识的 key 值',
+    optional: [],
+  },
+  {
+    name: 'sort-key',
+    type: 'Boolean',
+    default: '',
+    desc: '排序所依据的 key',
+    optional: [],
+  },
+  {
+    name: 'searchable',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否允许左侧搜索（以display-key来匹配）',
+    optional: [],
+  },
+  {
+    name: 'sortable',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否设置排序',
+    optional: [],
+  },
+  {
+    name: 'source-list',
+    type: 'Array',
+    default: '',
+    desc: '穿梭框数据源(必传)',
+    optional: [],
+  },
+  {
+    name: 'target-list',
+    type: 'Array',
+    default: [],
+    desc: '已选择的数据（唯一标识 setting-key 的数组），可以使用v-mode:targetList绑定',
+    optional: [],
+  },
+  // {
+  //   name: 'always-show-close',
+  //   type: 'Boolean',
+  //   default: 'true',
+  //   desc: '是否一直显示关闭icon',
+  //   optional: [],
+  // },
+  // {
+  //   name: 'show-overflow-tips',
+  //   type: 'Boolean',
+  //   default: 'false',
+  //   desc: '文本溢出时，是否使用气泡显示全部内容',
+  //   optional: [],
+  // },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '',
+    desc: '配置自定义样式类名，传入的类会被加在组件最外层的 DOM .bk-transfer 上',
+    optional: [],
+  },
+  {
+    name: 'multiple',
+    type: 'Boolean',
+    default: false,
+    desc: '勾选模式，支持多个内容同时穿梭',
+    optional: [],
+  },
+];
+
+const transferSlotsJson: IPropsTableItem[] = [
+  {
+    name: 'left-header',
+    type: 'Function',
+    default: '',
+    desc: '左侧头部插槽',
+    optional: [],
+  },
+  {
+    name: 'right-header',
+    type: 'Function',
+    default: '',
+    desc: '右侧头部插槽',
+    optional: [],
+  },
+  {
+    name: 'left-empty-content',
+    type: 'Function',
+    default: '',
+    desc: '左侧无数据时插槽',
+    optional: [],
+  },
+  {
+    name: 'right-empty-content',
+    type: 'Function',
+    default: '',
+    desc: '右侧无数据时插槽',
+    optional: [],
+  },
+  {
+    name: 'source-option',
+    type: 'Function',
+    default: '',
+    desc: '左侧选项卡插槽',
+    optional: [],
+  },
+  {
+    name: 'target-option',
+    type: 'Function',
+    default: '',
+    desc: '右侧选项卡插槽',
+    optional: [],
+  },
+];
+
+const transferChangeJson: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'Function(sourceList, targetList, targetValueList)',
+    default: '',
+    desc: '右侧选择数据改变时触发(sourceList:未选择数据，targetList 表示所选数据；targetValueList表示唯一标识 setting-key 的数组)',
+    optional: [],
+  },
+  {
+    name: 'update:targetList',
+    type: 'Function(targetList)',
+    default: '',
+    desc: '可使用v-mode:targetList绑定，也可以单独监听',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {},
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='通过双栏穿梭选择框，利用更大的空间展示更多可选项、已选项的信息。'
+          designLink='https://bkdesign.bk.tencent.com/design/125'
+          name='Transfer 穿梭框'
+        />
+        <DemoBox
+          componentName='transfer'
+          demoName='base-demo'
+          desc='默认配置 source-list 和 display-key，source-list 为必传 source-list 可以是普通数组(普通数组会自动去重)。当 source-list 为普通数组时，display-key 可不传。'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='transfer'
+          demoName='target-list-demo'
+          desc='配置 sortable 以及 sort-key 使得操作数据时数据的排序不变，配置 target-list 设置默认选择的数据。sortable 为 true 时开启排序功能，为 false 时则关闭，sort-key 为排序所依据的 key 值。注意：当 source-list 为普通数组时，开启排序时默认按照值排序，此时不需要传 sort-key。'
+          subtitle=''
+          title='配置 target-list 以及设置排序'
+        >
+          <TargetListDemo></TargetListDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='transfer'
+          demoName='normal-list-demo'
+          desc='此时根据值排序；display-key、sort-key、setting-key 不需要传。'
+          subtitle=''
+          title='普通数组配置'
+        >
+          <NormalListDemo></NormalListDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='transfer'
+          demoName='custom-header-demo'
+          desc='配置 slot 为 left-header 或 right-header 可自定义 header 内容，配置 slot 为 left-empty-content 和 right-empty-content 可自定义数据为空时所显示的内容(注意：当配置了 slot 时，其 title 和 empty-content 配置不会生效)'
+          subtitle=''
+          title='自定义 header 和无数据时显示内容'
+        >
+          <CustomHeaderDemo></CustomHeaderDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='transfer'
+          demoName='custom-option-demo'
+          desc='配置 slot 为 source-option 或 target-option 可自定义 选项 内容。'
+          subtitle=''
+          title='自定义 选项 模板'
+        >
+          <CustomOptionDemo></CustomOptionDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='transfer'
+          demoName='search-demo'
+          desc='配置 searchable 启用搜索功能'
+          subtitle=''
+          title='左侧带搜索'
+        >
+          <SearchDemo></SearchDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='transfer'
+          demoName='multiple-demo'
+          desc='配置 multiple 启用多选'
+          subtitle=''
+          title='勾选模式，支持多选'
+        >
+          <MultipleDemo></MultipleDemo>
+        </DemoBox>
+        <PropsBox
+          propsData={transferPropsJson}
+          subtitle=''
+          title='Transfer 属性'
+        />
+        <PropsBox
+          propsData={transferSlotsJson}
+          subtitle=''
+          title='Transfer 插槽'
+        />
+        <PropsBox
+          propsData={transferChangeJson}
+          subtitle=''
+          title='Transfer 事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/transfer/multiple-demo.vue

@@ -0,0 +1,41 @@
+<template>
+  <bk-transfer
+    v-model:targetList="targetList"
+    :display-key="'service_name'"
+    :setting-key="'service_code'"
+    :source-list="list"
+    sort-key="service_name"
+    multiple
+    show-overflow-tips
+    @change="change"
+  />
+</template>
+<script>
+  import BkTransfer from '@bkui-vue/transfer';
+
+  export default {
+    components: {
+      BkTransfer,
+    },
+    data() {
+      return {
+        targetList: ['pipeline', 'code'],
+        list: [
+          { service_code: 'pipeline', service_name: '流水线', disabled: true },
+          { service_code: 'codecc', service_name: '代码检查' },
+          { service_code: 'bcs', service_name: '容器服务' },
+          { service_code: 'artifactory', service_name: '版本仓库' },
+          { service_code: 'ticket', service_name: '凭证管理' },
+          { service_code: 'code', service_name: '代码库', disabled: true },
+          { service_code: 'experience', service_name: '版本体验' },
+          { service_code: 'environment', service_name: '环境管理' },
+          { service_code: 'quality', service_name: '质量红线' },
+          { service_code: 'turbo', service_name: '编译加速' },
+        ],
+      };
+    },
+    methods: {
+      change() {},
+    },
+  };
+</script>

package/knowledge/examples/transfer/normal-list-demo.vue

@@ -0,0 +1,30 @@
+<template>
+  <bk-transfer
+    :source-list="generalList"
+    :target-list="generalValue"
+    sortable
+    @change="change"
+  />
+</template>
+<script>
+  import BkTransfer from '@bkui-vue/transfer';
+
+  export default {
+    components: {
+      BkTransfer,
+    },
+    data() {
+      return {
+        generalList: [1, 4, 9, 'ab', 8, 5, 'bc', 3],
+        generalValue: [1, 4, 9, 'bc'],
+      };
+    },
+    methods: {
+      change(sourceList, targetList, targetValueList) {
+        console.log(sourceList);
+        console.log(targetList);
+        console.log(targetValueList);
+      },
+    },
+  };
+</script>

package/knowledge/examples/transfer/search-demo.vue

@@ -0,0 +1,152 @@
+<template>
+  <bk-transfer
+    :display-key="'name'"
+    :setting-key="'code'"
+    :sort-key="'code'"
+    :source-list="rtxList"
+    :target-list="rtxValue"
+    searchable
+    sortable
+    @change="change"
+  >
+    <template #left-header>
+      <div class="left-header">
+        <label>{{ '企业微信列表(' + sourceLength + ')' }}</label>
+        <div class="add-all">
+          <span
+            v-if="sourceLength"
+            @click="addAll"
+            >选择全部</span
+          >
+          <span
+            v-else
+            class="disabled"
+            >选择全部</span
+          >
+        </div>
+      </div>
+    </template>
+
+    <template #right-header>
+      <div class="right-header">
+        <label>{{ '已选人员(' + targetLength + ')' }}</label>
+        <div class="remove-all">
+          <span
+            v-if="targetLength"
+            @click="removeAll"
+            >全部移除</span
+          >
+          <span
+            v-else
+            class="disabled"
+            >全部移除</span
+          >
+        </div>
+      </div>
+    </template>
+
+    <template #left-empty-content>
+      <div>
+        <div class="empty-content">数据为空</div>
+      </div>
+    </template>
+
+    <template #right-empty-content>
+      <div>
+        <div class="empty-content">未选择任何数据</div>
+      </div>
+    </template>
+  </bk-transfer>
+</template>
+<script>
+  import BkTransfer from '@bkui-vue/transfer';
+
+  export default {
+    components: {
+      BkTransfer,
+    },
+    data() {
+      return {
+        rtxList: [
+          { name: 'zhangsan', code: 1 },
+          { name: 'lisi', code: 2 },
+          { name: 'laowang', code: 3 },
+          { name: 'zhaosi', code: 4 },
+          { name: 'liuer', code: 5 },
+          { name: 'zhousan', code: 6 },
+          { name: 'huangwu', code: 7 },
+          { name: 'tianliu', code: 8 },
+        ],
+        rtxValue: [1, 5, 7],
+        sourceLength: 5,
+        targetLength: 3,
+      };
+    },
+    methods: {
+      change(sourceList, targetList, targetValueList) {
+        this.sourceLength = sourceList.length;
+        this.targetLength = targetList.length;
+        console.log(sourceList);
+        console.log(targetList);
+        console.log(targetValueList);
+      },
+      addAll() {
+        const list = [];
+        this.rtxList.forEach(item => {
+          list.push(item.code);
+        });
+        this.rtxValue = [...list];
+      },
+      removeAll() {
+        this.rtxValue = [];
+      },
+    },
+  };
+</script>
+<style lang="postcss">
+  .left-header,
+  .right-header {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: space-between;
+
+    label {
+      font-size: 12px;
+    }
+  }
+
+  .add-all {
+    font-size: 14px;
+    cursor: pointer;
+
+    span {
+      color: #3a84ff;
+
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .remove-all {
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  .remove-all span {
+    color: #ea3636;
+  }
+
+  .empty-content {
+    position: relative;
+    top: 145px;
+    text-align: center;
+  }
+</style>

package/knowledge/examples/transfer/target-list-demo.vue

@@ -0,0 +1,46 @@
+<template>
+  <bk-transfer
+    :display-key="'service_name'"
+    :empty-content="emptyContent"
+    :setting-key="'service_code'"
+    :sort-key="'service_code'"
+    :source-list="list"
+    :target-list="value"
+    :title="title"
+    sortable
+    @change="change"
+  />
+</template>
+<script>
+  import BkTransfer from '@bkui-vue/transfer';
+
+  export default {
+    components: {
+      BkTransfer,
+    },
+    data() {
+      return {
+        title: ['服务列表', '已选服务'],
+        emptyContent: ['无数据', '未选择任何服务'],
+        list: [
+          { service_code: 'pipeline', service_name: '流水线' },
+          { service_code: 'codecc', service_name: '代码检查' },
+          { service_code: 'bcs', service_name: '容器服务' },
+          { service_code: 'artifactory', service_name: '版本仓库' },
+          { service_code: 'ticket', service_name: '凭证管理' },
+          { service_code: 'code', service_name: '代码库' },
+          { service_code: 'experience', service_name: '版本体验' },
+          { service_code: 'environment', service_name: '环境管理' },
+        ],
+        value: ['artifactory', 'ticket', 'code', 'experience'],
+      };
+    },
+    methods: {
+      change(sourceList, targetList, targetValueList) {
+        console.log(sourceList);
+        console.log(targetList);
+        console.log(targetValueList);
+      },
+    },
+  };
+</script>