@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/tab/index.tsx

@@ -0,0 +1,334 @@
+/*
+ * 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 DemoAdd from './demo-add.vue';
+import DemoBase from './demo-base.vue';
+import CardDemo from './demo-card.vue';
+import DemoCardGrid from './demo-card-grid.vue';
+import DemoCardTab from './demo-card-tab.vue';
+import DemoDrag from './demo-drag.vue';
+import DemoExtend from './demo-extend.vue';
+import DemoJsx from './demo-jsx';
+import DemoNumber from './demo-number.vue';
+import DemoPosition from './demo-position.vue';
+
+const tabPropsJson: IPropsTableItem[] = [
+  {
+    name: 'active',
+    type: 'Number|String',
+    default: '--',
+    desc: '选中的 tab',
+  },
+  {
+    name: 'type',
+    type: 'String',
+    default: '--',
+    desc: '选项卡样式',
+    optional: ['card', 'border-card', 'unborder-card', 'vertical-card card-grid'],
+  },
+  {
+    name: 'tab-position',
+    type: 'String',
+    default: '--',
+    desc: '选项卡样式',
+    optional: ['left', 'right', 'top'],
+  },
+  {
+    name: 'closable',
+    type: 'Boolean',
+    default: '--',
+    desc: '动态删除选项卡',
+  },
+  {
+    name: 'addable',
+    type: 'Boolean',
+    default: '--',
+    desc: '动态添加选项卡',
+  },
+  {
+    name: 'sortable',
+    type: 'Boolean',
+    default: '--',
+    desc: '拖拽排序选项卡',
+  },
+  {
+    name: 'sort-type',
+    type: 'Boolean',
+    default: '--',
+    desc: '拖拽排序选项卡',
+    optional: ['insert', 'replace'],
+  },
+  {
+    name: 'label-height',
+    type: 'Number',
+    default: '--',
+    desc: '选项卡 高度',
+  },
+  {
+    name: 'scroll-step',
+    type: 'Number',
+    default: '--',
+    desc: '选项卡 高度',
+  },
+  {
+    name: 'validate-active',
+    type: 'Boolean',
+    default: '--',
+    desc: '有效选中',
+  },
+  {
+    name: 'active-bar-size',
+    type: 'Number',
+    default: '--',
+    desc: '选中条宽度',
+  },
+  {
+    name: 'active-bar-color',
+    type: 'Number',
+    default: '--',
+    desc: '选中条颜色',
+  },
+  {
+    name: 'before-change',
+    type: 'Function',
+    default: 'undefined',
+    desc: '点击Tab激活之前回调函数， 如果需要阻止点击激活，返回 false，其他状态都会激活',
+  },
+];
+// const tabPanelPropsJson: IPropsTableItem[] = resolvePropsToDesData(tabPanelProps);
+const tabPanelPropsJson: IPropsTableItem[] = [
+  {
+    name: 'name',
+    type: 'String|Number',
+    default: '--',
+    desc: 'Panel 标记',
+  },
+  {
+    name: 'label',
+    type: 'String|Function',
+    default: '--',
+    desc: 'Panel 渲染内容',
+  },
+  {
+    name: 'tips',
+    type: 'String',
+    default: '--',
+    desc: '选项卡提示',
+  },
+  {
+    name: 'closable',
+    type: 'Boolean',
+    default: '--',
+    desc: '选项卡关闭',
+  },
+  {
+    name: 'visible',
+    type: 'Boolean',
+    default: '--',
+    desc: '选项卡可见',
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: '--',
+    desc: '选项卡禁用',
+  },
+  {
+    name: 'sortable',
+    type: 'Boolean',
+    default: '--',
+    desc: '选项卡排序',
+  },
+  {
+    name: 'render-directive',
+    type: 'Boolean',
+    default: 'show|if',
+    desc: 'Panel 渲染方式',
+  },
+  {
+    name: 'panel',
+    type: 'String|Function',
+    default: '--',
+    desc: 'Panel 渲染',
+  },
+  {
+    name: 'num',
+    type: 'Number',
+    default: '--',
+    desc: '支持panel数字展示',
+  },
+  {
+    name: 'numDisplayType',
+    type: 'String',
+    default: '--',
+    desc: '通过numDisplayType设置数字样式，支持的属性有bracket(括号)、square(方形)、elliptic(椭圆)',
+  },
+];
+const tabEventPropsJson = [
+  {
+    name: 'add',
+    desc: '添加选项卡事件',
+    params: '{ e: MouseEvent }',
+  },
+  {
+    name: 'change',
+    desc: '切换选项卡选中事件',
+    params: 'name',
+  },
+  {
+    name: 'remove',
+    desc: '移除选项卡事件',
+    params: 'index, panel',
+  },
+  {
+    name: 'sort',
+    desc: '排序事件',
+    params: 'dragTabIndex, dropTabIndex, sortType',
+  },
+  {
+    name: 'drag',
+    desc: '拖拽事件',
+    params: 'dragTabIndex, dragEvent',
+  },
+];
+const eventColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='选项卡切换组件。'
+          designLink='https://bkdesign.bk.tencent.com/design/80'
+          name='Tab 选项卡'
+        />
+        <DemoBox
+          componentName='tab'
+          demoName='demo-base'
+          desc='基础的、简洁的标签页。'
+          title='基础用法'
+        >
+          <DemoBase />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-card'
+          desc='通过配置 type 属性，设置选项卡样式。支持的属性有 card, border-card, unborder-card, vertical-card card-grid'
+          title='选项卡样式'
+        >
+          <CardDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-card-tab'
+          desc='通过配置 type 属性，设置选项卡样式。支持的属性有 card, border-card, unborder-card, vertical-card card-grid'
+          title='标签样式 '
+        >
+          <DemoCardTab />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-card-grid'
+          desc='通过配置 type 属性，设置选项卡样式。支持的属性有 card, border-card, unborder-card, vertical-card card-grid'
+          title='card-grid'
+        >
+          <DemoCardGrid />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-position'
+          desc='通过配置 tab-position 属性，设置选项卡位置。支持的属性有 left, right, top。当 tab-position 属性配置为 left 和 right 时，addable 属性以及 closable 属性无效。'
+          title='选项卡位置'
+        >
+          <DemoPosition />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-add'
+          desc='配置 addable 属性可动态添加选项卡；配置 closable 可以动态删除选项卡'
+          title='可增删的选项卡'
+        >
+          <DemoAdd />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-drag'
+          desc='sortType 为replace时，为交换位置；为jump时，为插入当前位置。bk-tab :sortable=“true” 。tab 可拖拽排序。bk-tab-panel :unsortable=“ture”,此选项不可排序'
+          title='拖拽排序'
+        >
+          <DemoDrag />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-extend'
+          desc='通过使用 slot 自定义选项卡内容'
+          title='自定义选项卡内容'
+        >
+          <DemoExtend />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-jsx'
+          desc='tsx 写法'
+          suffix='.tsx'
+          title='tsx用法'
+        >
+          <DemoJsx />
+        </DemoBox>
+        <DemoBox
+          componentName='tab'
+          demoName='demo-number'
+          desc='通过配置num属性设置是否显示数字，通过numDisplayType设置数字样式，支持的属性有bracket(括号)、square(方形)、elliptic(椭圆)。'
+          title='带数字样式'
+        >
+          <DemoNumber />
+        </DemoBox>
+        <PropsBox
+          propsData={tabPropsJson}
+          title='tab 属性'
+        />
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={tabEventPropsJson}
+          title='tab 事件'
+        />
+        <PropsBox
+          propsData={tabPanelPropsJson}
+          title='tab-Panel 属性'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/table/basic-filter.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="cell">
+      <span
+        style="margin-right: 20px"
+        class="title"
+        >默认过滤</span
+      >
+      <bk-button
+        style="margin-right: 20px"
+        @click="handleClear"
+      >
+        清理过滤条件
+      </bk-button>
+      <bk-button
+        style="margin-right: 20px"
+        @click="handleAdd"
+      >
+        添加过滤
+      </bk-button>
+      <bk-input
+        style="width: 120px"
+        v-model="filterValue"
+      />
+      <bk-table
+        style="margin-top: 20px"
+        :columns="columns1"
+        :data="tableData"
+        :pagination="pagination"
+        :pagination-heihgt="60"
+      />
+    </div>
+    <div
+      style="height: 300px"
+      class="cell"
+    >
+      <span class="title">自定义过滤</span>
+      <bk-table
+        height="100%"
+        :columns="columns1"
+        :data="tableData"
+        :pagination="pagination"
+        :pagination-heihgt="60"
+        @dblclick="handleDblClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_COLUMNS1, DATA_FIX_COLUMNS } from './options';
+  const DATA_ROWS = new Array(Math.ceil(Math.random() * 100) + 100).fill('').map((_, index) => ({
+    ip: `${index}--192.168.0.x`,
+    source: ['QQ', 'WeiXin', 'Email', 'Telphone'][index % 4],
+    status: '创建中',
+    create_time: `2018-05-25 15:02:24.${index}`,
+  }));
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        tableData: DATA_ROWS,
+        columns: DATA_FIX_COLUMNS.map(item => ({ ...item })),
+        columns1: [...DATA_COLUMNS1],
+        pagination: { count: DATA_ROWS.length, limit: 10 },
+        filterValue: '',
+        settings: {
+          fields: [],
+          checked: [],
+        },
+      };
+    },
+    mounted() {
+      setTimeout(() => {
+        this.settings.checked.push('index');
+        this.settings.fields.push(
+          ...[
+            {
+              label: '序号',
+              field: 'index',
+              disabled: true,
+            },
+            {
+              label: '名称/内网IP',
+              field: 'ip',
+            },
+            {
+              label: '来源',
+              field: 'source',
+            },
+            {
+              label: '创建时间',
+              field: 'create_time',
+            },
+          ],
+        );
+        // this.columns1[2].filter.list.length = 0;
+        // for (let i = 0; i < 50; i++) {
+        //   this.columns1[2].filter.list.push({ text: i + 1, value: i + 1 });
+        // }
+      }, 1000);
+    },
+    methods: {
+      handleAdd() {
+        this.columns1[2].filter.checked = [this.filterValue];
+      },
+      handleClear() {
+        this.columns1[2].filter.checked.length = 0;
+      },
+      handleSortBy(arg) {
+        console.log('handleSortBy', arg);
+      },
+      handleDblClick(...args) {
+        console.log(args);
+      },
+    },
+  });
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    margin: 0px 5px 20px 5px;
+  }
+</style>

package/knowledge/examples/table/basic-sort-behavior.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="cell">
+    <span class="title">默认排序: col-sort-behavior = independent</span>
+    <bk-table
+      :columns="columns"
+      :data="tableData"
+      :pagination="pagination"
+    />
+  </div>
+  <div class="cell">
+    <span class="title">col-sort-behavior = interdependent</span>
+    <bk-table
+      :columns="columns1"
+      :data="tableData"
+      :pagination="pagination"
+      col-sort-behavior="interdependent"
+    />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_COLUMNS, DATA_COLUMNS1 } from './options';
+  const DATA_ROWS = new Array(Math.ceil(Math.random() * 100) + 100).fill('').map((_, index) => ({
+    ip: `${index}--192.168.0.x`,
+    source: `${index}_QQ`,
+    status: '创建中',
+    create_time: `2018-05-25 15:02:24.${index}`,
+  }));
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        columns: [...DATA_COLUMNS],
+        columns1: [...DATA_COLUMNS1],
+        tableData: DATA_ROWS,
+        pagination: { count: DATA_ROWS.length, limit: 10 },
+      };
+    },
+
+    methods: {
+      handleSortBy(arg) {
+        console.log('handleSortBy', arg);
+      },
+      handleDblClick(...args) {
+        console.log(args);
+      },
+    },
+  });
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    flex: 1;
+    margin: 0px 5px 20px 5px;
+  }
+</style>

package/knowledge/examples/table/basic-sort.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="cell">
+    <span class="title">默认排序: sort scope = current</span>
+    <bk-table
+      :columns="columns"
+      :data="tableData"
+      :pagination="pagination"
+      draggable
+    />
+  </div>
+  <div class="cell">
+    <span class="title">sort scope = all</span>
+    <bk-table
+      :columns="columns1"
+      :data="tableData"
+      :pagination="pagination"
+      @column-sort="handleSortBy"
+    />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_COLUMNS, DATA_COLUMNS1 } from './options';
+  const DATA_ROWS = new Array(Math.ceil(Math.random() * 100) + 100).fill('').map((_, index) => ({
+    ip: `${index}--192.168.0.x`,
+    source: `${index}_QQ`,
+    status: '创建中',
+    create_time: `2018-05-25 15:02:24.${index}`,
+    priority: index,
+  }));
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        columns: [...DATA_COLUMNS],
+        columns1: DATA_COLUMNS1.map(col => Object.assign({}, col, { sort: { sortScope: 'all' } })),
+        tableData: DATA_ROWS,
+        pagination: { count: DATA_ROWS.length, limit: 10 },
+      };
+    },
+
+    methods: {
+      handleSortBy(arg) {
+        console.log('handleSortBy', arg);
+      },
+      handleDblClick(...args) {
+        console.log(args);
+      },
+    },
+  });
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    flex: 1;
+    margin: 0px 5px 20px 5px;
+  }
+</style>

package/knowledge/examples/table/basic-span.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="row">
+    <bk-table
+      :columns="columns"
+      :data="tableData"
+      row-hover="auto"
+      settings
+      show-overflow-tooltip
+      @column-sort="handleSortBy"
+      @dblclick="handleDblClick"
+    />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_TABLE, DATE_COL_SPAN } from './options';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        isLoading: false,
+        tableData: [...DATA_TABLE],
+        columns: [...DATE_COL_SPAN],
+        settings: {
+          fields: [
+            {
+              label: '序号',
+              field: 'index',
+              disabled: true,
+            },
+            {
+              label: '名称/内网IP',
+              field: 'ip',
+            },
+            {
+              label: '来源',
+              field: 'source',
+            },
+            {
+              label: '创建时间',
+              field: 'create_time',
+            },
+          ],
+          checked: ['ip', 'index'],
+        },
+      };
+    },
+    methods: {
+      handleSortBy(arg) {
+        console.log('handleSortBy', arg);
+      },
+      handleDblClick(...args) {
+        console.log(args);
+      },
+    },
+  });
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    flex: 1;
+    margin: 0 5px 0 5px;
+  }
+</style>