@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/tag-input/example-demo.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <bk-tag-input
+      v-model="state.tags"
+      :list="state.list"
+      :max-data="3"
+      :search-key="searchKey"
+      :tag-tpl="tagTpl"
+      :tpl="tpl"
+      display-key="username"
+      placeholder="请输入 username 或 nickname"
+      save-key="username"
+      trigger="focus"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+
+  const searchKey = ['username', 'nickname'];
+  const state = reactive({
+    tags: [],
+    list: [
+      { username: 'Jack', nickname: '杰克' },
+      { username: 'Json', nickname: '杰森' },
+      { username: 'Jane', nickname: '简' },
+      { username: 'Arman', nickname: '阿尔曼' },
+    ],
+  });
+  const tpl = (node, highlightKeyword, h) => {
+    const innerHTML = `${highlightKeyword(node.username)} (${node.nickname})`;
+    return h('div', { class: 'bk-selector-node' }, [
+      h('span', {
+        class: 'text',
+        innerHTML,
+      }),
+    ]);
+  };
+  const tagTpl = (node, h) =>
+    h('div', { class: 'tag' }, [
+      h('span', {
+        class: 'text',
+        innerHTML: `<span style="text-decoration: underline;">${node.username}</span> (${node.nickname})`,
+      }),
+    ]);
+</script>

package/knowledge/examples/tag-input/group-demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <bk-tag-input
+    v-model="state.tags"
+    :list="state.list"
+    placeholder="请选择"
+    trigger="focus"
+    use-group
+  />
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+
+  const state = reactive({
+    tags: [],
+    list: [
+      {
+        id: '1',
+        name: '华中地区',
+        children: [
+          { id: '1-1', name: '河南省' },
+          { id: '1-2', name: '湖北省' },
+          { id: '1-3', name: '湖南省' },
+        ],
+      },
+      {
+        id: '2',
+        name: '华北地区',
+        children: [
+          { id: '2-1', name: '北京市' },
+          { id: '2-2', name: '天津市' },
+          { id: '2-3', name: '河北省' },
+        ],
+      },
+      {
+        id: '3',
+        name: '华南地区',
+        children: [
+          { id: '3-1', name: '广东省' },
+          { id: '3-2', name: '海南省' },
+        ],
+      },
+    ],
+  });
+</script>

package/knowledge/examples/tag-input/index.tsx

@@ -0,0 +1,438 @@
+/*
+ * 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 ClearDemo from './clear-demo.vue';
+import CopyDemo from './copy-demo.vue';
+import CreateDemo from './create-demo.vue';
+import DisabledDemo from './disabled-demo.vue';
+import ExampleDemo from './example-demo.vue';
+import GroupDemo from './group-demo.vue';
+import ListDisabledDemo from './list-disabled-demo.vue';
+import MatchDemo from './match-demo.vue';
+import MoreDemo from './more-demo.vue';
+import PasteDemo from './paste-demo.vue';
+import SingleDemo from './single-demo.vue';
+import TooltipsDemo from './tooltips-demo.vue';
+import TriggerDemo from './trigger-demo.vue';
+
+const propsJson: IPropsTableItem[] = [
+  {
+    name: 'list',
+    type: 'Array',
+    default: '[]',
+    desc: '下拉菜单所需的数据列表',
+    optional: [],
+  },
+  {
+    name: 'placeholder',
+    type: 'String',
+    default: '请输入并按 Enter 结束',
+    desc: '空数据时显示的提示文案',
+    optional: [],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用组件	',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'allow-next-focus',
+    type: 'Boolean',
+    default: 'true',
+    desc: '多选时，是否允许选中后继续展示下拉选项',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'save-key',
+    type: 'String',
+    default: 'id',
+    desc: '循环 list 时，保存字段的 key 值',
+    optional: [],
+  },
+  {
+    name: 'display-key',
+    type: 'String',
+    default: 'name',
+    desc: '循环 list 时，展示字段的 key 值',
+    optional: [],
+  },
+  {
+    name: 'search-key',
+    type: 'String',
+    default: 'name',
+    desc: '输入时，搜索的 key 值',
+    optional: [],
+  },
+  {
+    name: 'tooltip-key',
+    type: 'String',
+    default: '',
+    desc: '让选中的标签在鼠标移上去时显示提示文案',
+    optional: [],
+  },
+  {
+    name: 'has-delete-icon',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示标签删除按钮',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'clear-text-space',
+    type: 'Boolean',
+    default: 'true',
+    desc: '自定义标签是否允许字符中间存在空格',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'clearable',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否允许清空',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'allow-create',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否允许自定义标签输入',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'max-data',
+    type: 'Number',
+    default: '-1',
+    desc: '是否限制可选个数，-1为不限制',
+    optional: [],
+  },
+  {
+    name: 'max-result',
+    type: 'Number',
+    default: '10',
+    desc: '下拉列表搜索结果显示个数，默认为 10',
+    optional: [],
+  },
+  {
+    name: 'use-group',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否启用分组',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'allow-auto-match',
+    type: 'Boolean',
+    default: 'false',
+    desc: '配置输入时失焦点后，如果完全匹配则自动选中，如果自定义则自动输入',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'content-width',
+    type: 'Number',
+    default: '190',
+    desc: '自定义设置下拉弹框的宽度，单选会撑满因此失效',
+    optional: [],
+  },
+  {
+    name: 'content-max-height',
+    type: 'Number',
+    default: '300',
+    desc: '自定义设置下拉弹框的长度',
+    optional: [],
+  },
+  {
+    name: 'separator',
+    type: 'String',
+    default: '',
+    desc: '输入分隔符号，支持批量输入',
+    optional: [],
+  },
+  {
+    name: 'tpl',
+    type: 'Function',
+    default: '',
+    desc: '自定义下拉列表模板',
+    optional: [],
+  },
+  {
+    name: 'tag-tpl',
+    type: 'Function',
+    default: '',
+    desc: '自定义标签模板',
+    optional: [],
+  },
+  {
+    name: 'paste-fn',
+    type: 'Function',
+    default: '',
+    desc: '批量粘贴处理文本返回格式',
+    optional: [],
+  },
+  {
+    name: 'left-space',
+    type: 'Number',
+    default: '0',
+    desc: '文字与左边框距离',
+    optional: [],
+  },
+  {
+    name: 'trigger',
+    type: 'String',
+    default: 'search',
+    desc: '搜索列表触发展示方式，默认是输入关键字搜索时展示，也可以获取焦点是展示（用在数据量少的时候）',
+    optional: ['search', 'focus'],
+  },
+  {
+    name: 'create-tag-validator',
+    type: 'Function',
+    default: '',
+    desc: '自定义标签校验函数，返回 boolean，参数(tag)，tag表示当前输入值，在自定义标签时，可以自定义添加标签的校验',
+    optional: [],
+  },
+  {
+    name: 'filter-callback',
+    type: 'Function',
+    default: '',
+    desc: '过滤函数，参数 (filterVal, filterKey, data)，分别表示当前过滤的文本、当前数据使用的 key、所有数据，方便使用者根据自己的逻辑来筛选数据',
+    optional: [],
+  },
+  {
+    name: 'show-clear-only-hover',
+    type: 'Boolean',
+    default: '',
+    desc: '是否在只有 hover 的时候才显示 clear 清除按钮',
+    optional: [],
+  },
+  {
+    name: 'is-async-list',
+    type: 'Boolean',
+    default: '',
+    desc: '如果为 true 则表示将会传入异步 list，配合通过输入后再获取异步 list 传入组件时使用。',
+    optional: [],
+  },
+  {
+    name: 'collapse-tags',
+    type: 'Boolean',
+    default: 'false',
+    desc: '失焦是否折叠 tags',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'tag-overflow-tips',
+    type: 'Object',
+    default: '{}',
+    desc: '定义 tag 超出内容的 v-bk-tooltips 配置',
+    optional: [],
+  },
+];
+
+const eventJson: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'Function',
+    default: '',
+    desc: '值改变触发',
+  },
+  {
+    name: 'select',
+    type: 'Function',
+    default: '',
+    desc: '选择值时触发',
+  },
+  {
+    name: 'focus',
+    type: 'Function',
+    default: '',
+    desc: '获得焦点时触发',
+  },
+  {
+    name: 'blur',
+    type: 'Function',
+    default: '',
+    desc: '失去焦点时触发',
+  },
+  {
+    name: 'remove',
+    type: 'Function',
+    default: '',
+    desc: '删除 Tag 时触发',
+  },
+  {
+    name: 'removeAll',
+    type: 'Function',
+    default: '',
+    desc: '清空时触发',
+  },
+  {
+    name: 'input',
+    type: 'Function',
+    default: '',
+    desc: '输入时触发',
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='常用于对标签列表的填写、关键字的输入'
+          name='TagInput 标签输入框'
+        />
+        <DemoBox
+          componentName='tag-input'
+          demoName='base-demo'
+          desc='通过 bk-tag-input 来使用组件，其中 list 属性为下拉选择列表选项'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='trigger-demo'
+          desc='配置 trigger 来设置下拉框的显示方式，有 focus（获焦点时显示）, search（搜索时显示）两种'
+          title='触发方式'
+        >
+          <TriggerDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='clear-demo'
+          desc='设置 show-clear-only-hover 为 true，则其 clear 按钮在 hover 时才会显示'
+          title='hover 时才显示 clear 按钮'
+        >
+          <ClearDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='create-demo'
+          desc='设置 allow-create 属性来输入自定义标签，按 Enter 键结束；设置 has-delete-icon 属性可显示标签删除按钮'
+          title='自定义标签'
+        >
+          <CreateDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='match-demo'
+          desc='设置 allow-auto-match 属性当输入内容时失去焦点后，如果完全匹配则自动选中，如果设置 allow-create 属性则创建标签'
+          title='失去焦点自动匹配'
+        >
+          <MatchDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='more-demo'
+          desc='设置 save-key 属性定义选项的保存 key 值；设置 display-key 属性定义选项展示名称；search-key 属性定义多字段索引；tpl 属性可自定义下拉列表展示'
+          title='更多自定义配置'
+        >
+          <MoreDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='group-demo'
+          desc='配置 use-group 来启用分组功能， 数据源必须加上 children 的配置'
+          title='分组展示'
+        >
+          <GroupDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='tooltips-demo'
+          desc='配置 tooltip-key 定义选中标签 hover 时的显示文案'
+          title='设置选中标签 tooltips'
+        >
+          <TooltipsDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='list-disabled-demo'
+          desc='设置列表数据源 disabled 属性来禁用列表中的某些项，禁止用户选择'
+          title='列表项禁用'
+        >
+          <ListDisabledDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='disabled-demo'
+          desc='设置 disabled 属性来禁用组件'
+          title='组件禁用状态'
+        >
+          <DisabledDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='paste-demo'
+          desc='粘贴内容默认按“;”来分割内容，设置 paste-fn 方法可以自定义粘贴输出内容'
+          title='批量输入'
+        >
+          <PasteDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='copy-demo'
+          desc='设置 copyable 允许复制；设置 copy-eparator 定义复制内容的分隔符（默认为回车）'
+          title='复制'
+        >
+          <CopyDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='example-demo'
+          desc='设置 tpl 方法自定义下拉列表展示；设置 tagTpl 方法自定义标签展示，通过 max-data 属性限制最大可选数量'
+          title='综合例子(多选)'
+        >
+          <ExampleDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tag-input'
+          demoName='single-demo'
+          desc='设置 filter-callback 定义过滤方法；设置 create-tag-validator 定义创建标签校验方法'
+          title='综合例子(单选)'
+        >
+          <SingleDemo />
+        </DemoBox>
+        <PropsBox
+          propsData={propsJson}
+          subtitle=''
+        />
+        <PropsBox
+          propsData={eventJson}
+          subtitle=''
+          title='事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/tag-input/list-disabled-demo.vue

@@ -0,0 +1,27 @@
+<template>
+  <bk-tag-input
+    v-model="state.tags"
+    :list="state.list"
+    placeholder="请选择城市"
+    trigger="focus"
+  />
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+
+  const state = reactive({
+    tags: ['shenzhen'],
+    list: [
+      { id: 'shenzhen', name: '深圳' },
+      { id: 'guangzhou', name: '广州' },
+      { id: 'beijing', name: '北京' },
+      { id: 'shanghai', name: '上海', disabled: true },
+      { id: 'hangzhou', name: '杭州' },
+      { id: 'nanjing', name: '南京', disabled: true },
+      { id: 'chongqing', name: '重庆' },
+      { id: 'taibei', name: '台北' },
+      { id: 'haikou', name: '海口', disabled: true },
+    ],
+  });
+</script>

package/knowledge/examples/tag-input/match-demo.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>选择的数据为：{{ state.tags }}</div>
+  <bk-tag-input
+    v-model="state.tags"
+    :list="state.list"
+    placeholder="请选择城市"
+    allow-auto-match
+    allow-create
+    has-delete-icon
+    @change="handleChange"
+    trigger="focus"
+    separator=";"
+  />
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+
+  const state = reactive({
+    tags: ['shenzhen'],
+    // tags: ['111111', '222222', '333333'],
+    list: [
+      { id: 'shenzhen', name: '深圳' },
+      { id: 'guangzhou', name: '广州' },
+      { id: 'beijing', name: '北京' },
+      { id: 'shanghai', name: '上海' },
+      { id: 'hangzhou', name: '杭州' },
+      { id: 'nanjing', name: '南京' },
+      { id: 'chongqing', name: '重庆' },
+      { id: 'taibei', name: '台北' },
+      { id: 'haikou', name: '海口' },
+    ],
+  });
+
+  const handleChange = val => {
+    console.error('vuevuevue file handleChange', val);
+  };
+</script>

package/knowledge/examples/tag-input/more-demo.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <bk-tag-input
+      v-model="state.tags"
+      :list="state.list"
+      :search-key="searchKey"
+      :tpl="tpl"
+      display-key="username"
+      placeholder="请输入 username 或 nickname"
+      save-key="username"
+    />
+    <p>请输入 J 或 杰 来体验下搜索效果</p>
+  </div>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+
+  const searchKey = ['username', 'nickname'];
+  const state = reactive({
+    tags: [],
+    list: [
+      { username: 'Jack', nickname: '杰克' },
+      { username: 'Json', nickname: '杰森' },
+      { username: 'Jane', nickname: '简' },
+      { username: 'Arman', nickname: '阿尔曼' },
+    ],
+  });
+  const tpl = (node, highlightKeyword, h) => {
+    const innerHTML = `${highlightKeyword(node.username)} (${node.nickname})`;
+    return h('div', { class: 'bk-selector-node' }, [
+      h('span', {
+        class: 'text',
+        innerHTML,
+      }),
+    ]);
+  };
+</script>

package/knowledge/examples/tag-input/paste-demo.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <bk-tag-input
+      v-model="state.tags"
+      :list="state.list"
+      :paste-fn="pasteFn"
+      placeholder="请选择城市"
+    />
+    <p>复制内容 guangzhou|chongqing|beijing 来体验粘贴多输入效果</p>
+  </div>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+
+  const state = reactive({
+    tags: ['shenzhen'],
+    list: [
+      { id: 'shenzhen', name: '深圳' },
+      { id: 'guangzhou', name: '广州' },
+      { id: 'beijing', name: '北京' },
+      { id: 'shanghai', name: '上海' },
+      { id: 'hangzhou', name: '杭州' },
+      { id: 'nanjing', name: '南京' },
+      { id: 'chongqing', name: '重庆' },
+      { id: 'taibei', name: '台北' },
+      { id: 'haikou', name: '海口' },
+    ],
+  });
+  const pasteFn = value => value.split('|').map(tag => ({ id: tag, name: tag }));
+</script>