@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/resize-layout/auto-minimize-demo.vue

@@ -0,0 +1,16 @@
+<template>
+  <bk-resize-layout
+    style="height: 500px"
+    auto-minimize
+  >
+    <template #aside>
+      <div>aside</div>
+    </template>
+    <template #main>
+      <div>main</div>
+    </template>
+  </bk-resize-layout>
+</template>
+<script setup>
+  import BkResizeLayout from '@bkui-vue/resize-layout';
+</script>

package/knowledge/examples/resize-layout/base-demo.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <bk-radio-group v-model="radioGroupValue">
+      <bk-radio label="left" />
+      <bk-radio label="right" />
+      <bk-radio label="top" />
+      <bk-radio label="bottom" />
+    </bk-radio-group>
+    <bk-resize-layout
+      style="height: 500px"
+      :initial-divide="'40%'"
+      :placement="radioGroupValue"
+    >
+      <template #aside>
+        <div>aside</div>
+      </template>
+      <template #main>
+        <div>main</div>
+      </template>
+    </bk-resize-layout>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import BkResizeLayout from '@bkui-vue/resize-layout';
+  const radioGroupValue = ref('left');
+</script>

package/knowledge/examples/resize-layout/collapsible-demo.vue

@@ -0,0 +1,16 @@
+<template>
+  <bk-resize-layout style="height: 500px" collapsible :isCollapsed="isCollapsed">
+    <template #aside>
+      <div>aside</div>
+    </template>
+    <template #main>
+      <div>main</div>
+    </template>
+  </bk-resize-layout>
+</template>
+<script setup>
+import BkResizeLayout from '@bkui-vue/resize-layout';
+import { ref } from 'vue';
+
+const isCollapsed = ref(true);
+</script>

package/knowledge/examples/resize-layout/immediate-demo.vue

@@ -0,0 +1,18 @@
+<template>
+  <bk-resize-layout
+    style="height: 500px"
+    :max="400"
+    :min="50"
+    immediate
+  >
+    <template #aside>
+      <div>aside</div>
+    </template>
+    <template #main>
+      <div>main</div>
+    </template>
+  </bk-resize-layout>
+</template>
+<script setup>
+  import BkResizeLayout from '@bkui-vue/resize-layout';
+</script>

package/knowledge/examples/resize-layout/resize-layout.tsx

@@ -0,0 +1,251 @@
+/*
+ * 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 AdvanceDemo from './advance-demo.vue';
+import AutoMiniMizeDemo from './auto-minimize-demo.vue';
+import BaseDemo from './base-demo.vue';
+import CollapsibleDemo from './collapsible-demo.vue';
+import ImmediateDemo from './immediate-demo.vue';
+
+const eventColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+
+const slotColumnMap = {
+  name: '名称',
+  desc: '说明',
+  type: '类型',
+  params: '参数',
+};
+
+const propsJson = [
+  {
+    name: 'placement',
+    type: 'string',
+    default: 'left',
+    desc: '侧栏在布局中的位置',
+    optional: ['top', 'left', 'right', 'bottom'],
+  },
+  {
+    name: 'min',
+    type: 'number',
+    default: '3',
+    desc: '侧栏最小像素宽度',
+    optional: [],
+  },
+  {
+    name: 'max',
+    type: 'number',
+    default: '无穷大',
+    desc: '侧栏最大像素宽度',
+    optional: [],
+  },
+  {
+    name: 'triggerWidth',
+    type: 'number',
+    default: '5',
+    desc: '拖拽区域大小',
+    optional: [],
+  },
+  {
+    name: 'triggerOffset',
+    type: 'number',
+    default: '3',
+    desc: '',
+    optional: [],
+  },
+  {
+    name: 'initialDivide',
+    type: 'string|number',
+    default: '20%',
+    desc: '侧栏初始大小,当同时设置initialDivide与min都为number类型时以最大值为默认值',
+    optional: [],
+  },
+  {
+    name: 'immediate',
+    type: 'boolean',
+    default: 'false',
+    desc: '是否实时拉伸',
+    optional: ['false', 'true'],
+  },
+  {
+    name: 'disabled',
+    type: 'boolean',
+    default: 'false',
+    desc: '是否禁用',
+    optional: ['false', 'true'],
+  },
+  {
+    name: 'collapsible',
+    type: 'boolean',
+    default: 'false',
+    desc: '是否开启折叠功能',
+    optional: ['false', 'true'],
+  },
+  {
+    name: 'isCollapsed',
+    type: 'boolean',
+    default: 'false',
+    desc: '折叠状态',
+    optional: ['false', 'true'],
+  },
+  {
+    name: 'autoMinimize',
+    type: 'boolean',
+    default: 'false',
+    desc: '是否自定最小化',
+    optional: ['false', 'true'],
+  },
+  {
+    name: 'border',
+    type: 'boolean',
+    default: 'true',
+    desc: '是否显示外边框',
+    optional: ['false', 'true'],
+  },
+];
+
+const eventJson = [
+  {
+    name: 'before-resize',
+    desc: '拉伸前的回调',
+    params: 'event',
+  },
+  {
+    name: 'resizing',
+    desc: '拉伸时的回调',
+    params: 'width/height',
+  },
+  {
+    name: 'after-resize',
+    desc: '拉伸后的回调',
+    params: 'width/height',
+  },
+  {
+    name: 'collapse-change',
+    desc: '展开/折叠状态变更事件',
+    params: 'collapsed',
+  },
+];
+
+const slotJson = [
+  {
+    name: 'aside',
+    type: 'Slot',
+    default: null,
+    desc: '侧栏内容',
+    optional: [],
+  },
+  {
+    name: 'main',
+    type: 'Slot',
+    default: null,
+    desc: '主要内容',
+    optional: [],
+  },
+  {
+    name: 'collapse-trigger',
+    type: 'Slot',
+    default: null,
+    desc: '折叠按钮',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='通过拉伸侧栏调整布局大小'
+          designLink='https://bkdesign.bk.tencent.com/design/156'
+          name='Resize Layout'
+        />
+        <DemoBox
+          componentName='resize-layout'
+          demoName='base-demo'
+          desc=''
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='resize-layout'
+          demoName='auto-minimize-demo'
+          desc=''
+          title='最小化'
+        >
+          <AutoMiniMizeDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='resize-layout'
+          demoName='immediate-demo'
+          desc=''
+          title='实时拉伸'
+        >
+          <ImmediateDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='resize-layout'
+          demoName='collapsible-demo'
+          desc=''
+          title='可折叠'
+        >
+          <CollapsibleDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='resize-layout'
+          demoName='advance-demo'
+          desc=''
+          title='多级嵌套'
+        >
+          <AdvanceDemo />
+        </DemoBox>
+        <PropsBox
+          propsData={propsJson}
+          subtitle=''
+        />
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={eventJson}
+          title='Select 事件'
+        />
+        <PropsBox
+          columnMap={slotColumnMap}
+          propsData={slotJson}
+          subtitle=''
+          title='Select 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/search-select/base-demo.vue

@@ -0,0 +1,152 @@
+<template>
+  <bk-search-select
+    v-model="value"
+    :data="data"
+    unique-select
+  />
+</template>
+<script setup>
+  import { ref, shallowRef } from 'vue';
+  function generateRandomIPs(count) {
+    const generateIP = () => Array.from({ length: 4 }, () => Math.floor(Math.random() * 256)).join('.');
+    return Array.from({ length: count }, (_, index) => ({
+      id: index + 1,
+      name: generateIP(),
+    }));
+  }
+  const ipList = generateRandomIPs(20);
+  function generateRandomValues(count) {
+    const arrayCopy = ipList.slice();
+    for (let i = arrayCopy.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [arrayCopy[i], arrayCopy[j]] = [arrayCopy[j], arrayCopy[i]];
+    }
+    return arrayCopy.slice(0, count);
+  }
+  const data = shallowRef([
+    {
+      name: '访问入口',
+      id: 'domain',
+      multiple: true,
+      async: false,
+    },
+    {
+      name: 'IP 或 IP:Port',
+      id: 'instance',
+      multiple: true,
+    },
+    {
+      name: 'ID',
+      id: 'id',
+    },
+    {
+      name: '集群名称',
+      id: 'name',
+    },
+    {
+      name: '管控区域',
+      id: 'bk_cloud_id',
+      multiple: true,
+      children: [
+        {
+          id: 0,
+          name: '直连区域',
+        },
+      ],
+    },
+    {
+      name: '状态',
+      id: 'status',
+      multiple: true,
+      children: [
+        {
+          id: 'normal',
+          name: '正常',
+        },
+        {
+          id: 'abnormal',
+          name: '异常',
+        },
+      ],
+    },
+    {
+      name: '所属 DB 模块',
+      id: 'db_module_id',
+      multiple: true,
+      children: [
+        {
+          id: 2,
+          name: 'tendbha57',
+        },
+        {
+          id: 19,
+          name: 'xiaog56',
+        },
+      ],
+    },
+    {
+      name: '版本',
+      id: 'major_version',
+      multiple: true,
+      children: [
+        {
+          id: 'MySQL-5.7',
+          name: 'MySQL-5.7',
+        },
+        {
+          id: 'MySQL-5.6',
+          name: 'MySQL-5.6',
+        },
+      ],
+    },
+    {
+      name: '地域',
+      id: 'region',
+      multiple: true,
+      children: [
+        {
+          id: '',
+          name: '',
+        },
+        {
+          id: 'default',
+          name: 'default',
+        },
+      ],
+    },
+    {
+      name: '创建人',
+      id: 'creator',
+    },
+    {
+      name: '时区',
+      id: 'time_zone',
+      multiple: true,
+      children: [
+        {
+          id: '+08:00',
+          name: '+08:00',
+        },
+      ],
+    },
+  ]);
+  const getMenuList = async (item, keyword) => {
+    console.info(item, keyword);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    if (!item && keyword) {
+      return [
+        {
+          id: 'sdfds',
+          name: 'sdfsdfds',
+          value: {
+            id: 'sdfsdfsdfsdf',
+            name: `测试${keyword}`,
+          },
+        },
+      ];
+    }
+    if (!item) return data;
+    return data.value.find(set => set.id === item.id)?.children;
+  };
+  const value = ref([{ name: 'IP地址', id: '3', values: generateRandomValues(6) }]);
+</script>

package/knowledge/examples/search-select/comprehensive-use.vue

@@ -0,0 +1,133 @@
+t
+<template>
+  <bk-search-select
+    v-model="value"
+    :conditions="[
+      { id: 'or', name: '或' },
+      { id: 'and', name: '且' },
+    ]"
+    :data="data"
+    :get-menu-list="getMenuList"
+    :validate-values="validateValues"
+    unique-select
+  />
+</template>
+<script setup>
+  import { ref, shallowRef } from 'vue';
+  function generateRandomIPs(count) {
+    const generateIP = () => Array.from({ length: 4 }, () => Math.floor(Math.random() * 256)).join('.');
+    return Array.from({ length: count }, (_, index) => ({
+      id: index + 1,
+      name: generateIP(),
+    }));
+  }
+  const ipList = generateRandomIPs(20);
+  function generateRandomValues(count) {
+    const arrayCopy = ipList.slice();
+    for (let i = arrayCopy.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [arrayCopy[i], arrayCopy[j]] = [arrayCopy[j], arrayCopy[i]];
+    }
+    return arrayCopy.slice(0, count);
+  }
+  const data = shallowRef([
+    {
+      name: 'IP地址',
+      id: '3',
+      multiple: true,
+      placeholder: 'IP地址',
+      children: ipList,
+      async: false,
+    },
+    {
+      name: '实例状态',
+      id: '1',
+      multiple: true,
+      showLogicalPanel: true,
+      placeholder: '有逻辑关系的状态',
+      async: false,
+      children: [
+        {
+          name: '创建中',
+          id: '1-2',
+        },
+        {
+          name: '运行中',
+          id: '1-3',
+          disabled: true,
+        },
+        {
+          name: '已关机',
+          id: '1-4',
+        },
+      ],
+    },
+    {
+      name: '实例业务',
+      id: '2',
+      async: false,
+      children: [
+        {
+          name: '王者荣耀',
+          id: '2-1',
+          disabled: true,
+        },
+        {
+          name: '刺激战场',
+          id: '2-2',
+        },
+        {
+          name: '绝地求生',
+          id: '2-3',
+        },
+      ],
+    },
+    {
+      name: '异步获取的业务',
+      id: '7',
+      multiple: false,
+      placeholder: '异步获取的业务',
+      async: true,
+      children: [],
+    },
+    {
+      name: '搜索文本',
+      id: '4',
+      multiple: false,
+      async: false,
+    },
+    {
+      name: '不可选择',
+      id: '5',
+      disabled: true,
+      async: false,
+    },
+  ]);
+  const value = ref([{ name: 'IP地址', id: '3', values: generateRandomValues(6) }]);
+  function validateValues(seletedItem, values) {
+    console.info(seletedItem, values, '===');
+    if (!seletedItem.children?.length) return true;
+    if (values.length < 1) return '必选项';
+    const validate = values.every(v => seletedItem.children.some(item => item.id === v.id));
+    return !validate ? `请选择正确的${seletedItem.name}` : true;
+  }
+  async function getMenuList(seletedItem) {
+    console.info(seletedItem);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    return [
+      {
+        name: '王者荣耀',
+        id: '2-1',
+        disabled: true,
+      },
+      {
+        name: '刺激战场',
+        id: '2-2',
+      },
+      {
+        name: '绝地求生',
+        id: '2-3',
+      },
+    ];
+  }
+</script>