@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/tooltips/demo/boundary.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="box">
+    <div style="border: 1px solid #ccc; height: 50px">
+      <div
+        class="bk-tooltips-base"
+        v-bk-tooltips="{ content: '提示信息', boundary: 'parent' }"
+      >
+        <info />
+      </div>
+    </div>
+    &nbsp;&nbsp;&nbsp;&nbsp;
+    <div
+      class="bk-tooltips-base"
+      v-bk-tooltips="{ content: '提示信息2,延迟3s', boundary: box }"
+    >
+      <info />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import { bkTooltips } from 'bkui-vue';
+  import { Info } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    components: {
+      Info,
+    },
+    directives: {
+      bkTooltips,
+    },
+    setup() {
+      const box = ref(null);
+      const demo = ref(null);
+      return {
+        box,
+        demo,
+      };
+    },
+  });
+</script>
+
+<style lang="postcss">
+  .bk-tooltips-base {
+    font-size: 18px;
+    color: #3a84ff;
+  }
+</style>

package/knowledge/examples/tooltips/demo/callback.vue

@@ -0,0 +1,52 @@
+<template>
+  <span
+    class="bk-tooltips-base"
+    v-bk-tooltips="config"
+  >
+    <info />
+  </span>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { bkTooltips, Message } from 'bkui-vue';
+  import { Info } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    components: {
+      Info,
+    },
+    directives: {
+      bkTooltips,
+    },
+    setup() {
+      const config = {
+        content: '提示信息',
+        onShow: () => {
+          Message({
+            theme: 'success',
+            message: 'onShow',
+          });
+        },
+        onHide: () => {
+          Message({
+            theme: 'error',
+            message: 'onHide',
+          });
+        },
+      };
+      return {
+        config,
+      };
+    },
+  });
+</script>
+
+<style lang="postcss">
+  .bk-tooltips-base {
+    font-size: 18px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>

package/knowledge/examples/tooltips/demo/click.vue

@@ -0,0 +1,42 @@
+<template>
+  <span
+    class="bk-tooltips-base"
+    v-bk-tooltips="config"
+  >
+    <info />
+  </span>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { bkTooltips } from 'bkui-vue';
+  import { Info } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    components: {
+      Info,
+    },
+    directives: {
+      bkTooltips,
+    },
+    setup() {
+      const config = {
+        content: '提示信息',
+        trigger: 'click',
+        theme: 'light',
+      };
+      return {
+        config,
+      };
+    },
+  });
+</script>
+
+<style lang="postcss">
+  .bk-tooltips-base {
+    font-size: 18px;
+    color: #3a84ff;
+    cursor: pointer;
+  }
+</style>

package/knowledge/examples/tooltips/demo/position.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="bk-tooltips-position-top">
+    <span
+      class="info mr20"
+      v-bk-tooltips="{ content: '提示信息', placement: 'top-start' }"
+    >
+      <info />
+    </span>
+    <span
+      class="info mr20"
+      v-bk-tooltips="{ content: '提示信息', placement: 'top' }"
+    >
+      <info />
+    </span>
+    <span
+      class="info"
+      v-bk-tooltips="{ content: '提示信息', placement: 'top-end' }"
+    >
+      <info />
+    </span>
+  </div>
+
+  <div class="bk-tooltips-position-center">
+    <div class="bk-tooltips-position-center-left">
+      <span
+        class="info"
+        v-bk-tooltips="{ content: '提示信息', placement: 'left' }"
+      >
+        <info />
+      </span>
+    </div>
+
+    <div class="bk-tooltips-position-center-right">
+      <span
+        class="info"
+        v-bk-tooltips="{ content: '提示信息', placement: 'right' }"
+      >
+        <info />
+      </span>
+    </div>
+  </div>
+
+  <div class="bk-tooltips-position-bottom">
+    <span
+      class="info mr20"
+      v-bk-tooltips="{ content: '提示信息', placement: 'bottom-start' }"
+    >
+      <info />
+    </span>
+    <span
+      class="info mr20"
+      v-bk-tooltips="{ content: '提示信息', placement: 'bottom' }"
+    >
+      <info />
+    </span>
+    <span
+      class="info"
+      v-bk-tooltips="{ content: '提示信息', placement: 'bottom-end' }"
+    >
+      <info />
+    </span>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { bkTooltips } from 'bkui-vue';
+  import { Info } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    components: {
+      Info,
+    },
+    directives: {
+      bkTooltips,
+    },
+    setup() {
+      const config = {
+        content: '提示信息',
+      };
+      return {
+        config,
+      };
+    },
+  });
+</script>
+
+<style lang="postcss">
+  .info {
+    font-size: 18px;
+    color: #3a84ff;
+  }
+
+  .mr20 {
+    margin-right: 20px;
+  }
+
+  .bk-tooltips-position-center {
+    margin: 10px auto;
+  }
+
+  .bk-tooltips-position-center-left {
+    display: inline-block;
+  }
+
+  .bk-tooltips-position-center-right {
+    display: inline-block;
+    margin-left: 58px;
+  }
+</style>

package/knowledge/examples/tooltips/index.tsx

@@ -0,0 +1,218 @@
+/*
+ * 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 DemoJsx from './demo/base';
+import Base from './demo/base.vue';
+import Boundary from './demo/boundary.vue';
+import Callback from './demo/callback.vue';
+import Click from './demo/click.vue';
+import Position from './demo/position.vue';
+
+import type { IPropsTableItem } from '../../typings';
+
+const props: IPropsTableItem[] = [
+  {
+    name: 'content',
+    type: 'String',
+    default: '',
+    desc: '提示信息内容',
+    optional: [],
+  },
+  {
+    name: 'placement',
+    type: 'String',
+    default: 'top',
+    desc: '组件显示位置',
+    optional: [
+      'auto',
+      'auto-start',
+      'auto-end',
+      'top',
+      'top-start',
+      'top-end',
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'right',
+      'right-start',
+      'right-end',
+      'left',
+      'left-start',
+      'left-end',
+    ],
+  },
+  {
+    name: 'boundary',
+    type: 'Element',
+    default: 'document.body',
+    desc: '弹窗插入位置',
+    optional: ['parent'],
+  },
+  {
+    name: 'showOnInit',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否在初始化时默认显示',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'dark',
+    desc: '组件主题色',
+    optional: ['dark', 'light'],
+  },
+  {
+    name: 'trigger',
+    type: 'String',
+    default: 'hover',
+    desc: '触发方式',
+    optional: ['click', 'hover'],
+  },
+  {
+    name: 'arrow',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示箭头',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用提示框',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'delay',
+    type: 'Number',
+    default: '0',
+    desc: '显示的延迟，毫秒',
+    optional: [],
+  },
+  {
+    name: 'extCls',
+    type: 'String',
+    default: '',
+    desc: '配置自定义样式类名，传入的类会被加在组件最外层的 DOM',
+    optional: [],
+  },
+  {
+    name: 'onShow',
+    type: 'Function',
+    default: '',
+    desc: '显示提示框时触发函数',
+    optional: [],
+  },
+  {
+    name: 'onHide',
+    type: 'Function',
+    default: '',
+    desc: '隐藏提示框时触发函数',
+    optional: [],
+  },
+];
+
+const demos = [
+  {
+    title: '基础用法（通过绑定对象来配置）',
+    desc: '通过指令配置简单的 tooltips，通过配置 delay 属性来设置显示的延迟',
+    componentName: 'tooltips',
+    demoName: 'demo/base',
+    DemoComponent: Base,
+  },
+  {
+    title: '不同位置',
+    desc: '通过 placement 属性展示不同位置的提示',
+    componentName: 'tooltips',
+    demoName: 'demo/position',
+    DemoComponent: Position,
+  },
+  {
+    title: '插入不同位置',
+    desc: '通过 boundary 属性控制弹窗插入位置',
+    componentName: 'tooltips',
+    demoName: 'demo/boundary',
+    DemoComponent: Boundary,
+  },
+  {
+    title: '点击触发',
+    desc: '通过给 v-bk-tooltips 配置 trigger 为 click 来设置点击触发 tooltips',
+    componentName: 'tooltips',
+    demoName: 'demo/click',
+    DemoComponent: Click,
+  },
+  {
+    title: '自定义回调函数',
+    desc: '自定义显示以及隐藏时的回调函数',
+    componentName: 'tooltips',
+    demoName: 'demo/callback',
+    DemoComponent: Callback,
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='当鼠标指向页面元素时给出简单的提示'
+          designLink='https://bkdesign.bk.tencent.com/design/115'
+          name='Tooltips 工具提示 （指令）'
+        />
+        {demos.map(({ DemoComponent, ...demo }) => (
+          <DemoBox {...demo}>
+            <DemoComponent />
+          </DemoBox>
+        ))}
+        <DemoBox
+          componentName='tooltips'
+          demoName='demo/base'
+          desc='tsx 写法,content 为Vnode'
+          suffix='.tsx'
+          title='tsx用法'
+        >
+          <DemoJsx />
+        </DemoBox>
+        <PropsBox
+          propsData={props}
+          subtitle=''
+          title='属性'
+        ></PropsBox>
+        {/* <PropsBox
+          propsData={events}
+          subtitle=''
+          title='事件'
+        ></PropsBox> */}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,47 @@
+<template>
+  <bk-transfer
+    v-model="targetList"
+    :display-key="'service_name'"
+    :setting-key="'service_code'"
+    :source-list="list"
+    sort-key="service_name"
+    searchable
+    show-overflow-tips
+    sortable
+    @change="change"
+  />
+</template>
+<script>
+  import BkTransfer from '@bkui-vue/transfer';
+
+  export default {
+    components: {
+      BkTransfer,
+    },
+    data() {
+      return {
+        targetList: ['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(sourceList, targetList, targetValueList) {
+        console.log(sourceList);
+        console.log(targetList);
+        console.log(targetValueList);
+        console.log(this.targetList);
+      },
+    },
+  };
+</script>

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

@@ -0,0 +1,147 @@
+<template>
+  <bk-transfer
+    :display-key="'name'"
+    :setting-key="'code'"
+    :sort-key="'code'"
+    :source-list="rtxList"
+    :target-list="rtxValue"
+    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 class="empty-content">数据为空</div>
+    </template>
+
+    <template #right-empty-content>
+      <div class="empty-content">未选择任何数据</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>