@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/table/options.tsx

@@ -0,0 +1,385 @@
+/*
+ * 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 BtnDemo from './btn-demo.vue';
+export const DATA_TABLE = [
+  {
+    ip: '192.168.0.1-2018-05-25 15:02:241',
+    source: 'QQ',
+    status: '创建中',
+    create_time: '2018-05-25 15:02:241',
+    selected: false,
+    priority: 1,
+    percent: '15%',
+    children: [
+      {
+        ip: '192.168.0.2',
+        source: '微信',
+        status: '正常',
+        create_time: '2018-05-25 15:02:242',
+        selected: false,
+      },
+      {
+        ip: '192.168.0.3',
+        source: 'QQ',
+        status: '创建中',
+        create_time: '2018-05-25 15:02:243',
+        selected: false,
+      },
+      {
+        ip: '192.168.0.3',
+        source: 'QQ',
+        status: '创建中',
+        create_time: '2018-05-25 15:02:244',
+        selected: true,
+      },
+    ],
+  },
+  {
+    ip: '192.168.0.26',
+    source: '微信',
+    status: '正常',
+    priority: 3,
+    create_time: '2018-05-25 15:02:242',
+    selected: false,
+    percent: '10.01%',
+  },
+  {
+    ip: '192.168.0.37',
+    source: 'QQ',
+    status: '创建中',
+    priority: 2,
+    create_time: '2018-05-25 15:02:243',
+    selected: false,
+    percent: '50%',
+  },
+  {
+    ip: '192.168.0.38',
+    source: 'QQ',
+    status: '创建中',
+    priority: 6,
+    create_time: '2018-05-25 15:02:244',
+    selected: true,
+    percent: '1%',
+  },
+  {
+    ip: '192.168.0.39',
+    source: 'QQ',
+    status: '创建中',
+    priority: 5,
+    create_time: '2018-05-25 15:02:24',
+    selected: false,
+    percent: '0.1%',
+  },
+];
+
+/**
+ * DATA_COLUMNS
+ *
+ *
+ *
+ */
+export const DATA_COLUMNS = [
+  {
+    label: '序号',
+    type: 'index',
+    width: 350,
+    minWidth: 80,
+    sort: true,
+    fixed: true,
+    showOverflowTooltip: {
+      mode: 'static',
+      content: '这是个静态的提示，限制最大宽度为200px，测试一下是否生效，长度不够，数字来凑，哈哈哈',
+      popoverOption: {
+        maxWidth: 250,
+      },
+    },
+    className: () => 'custom-class',
+  },
+  {
+    label: () => (
+      <div>
+        <i>H</i>名称/内网IP
+      </div>
+    ),
+    field: 'ip',
+    width: 100,
+    showOverflowTooltip: {
+      disabled: false,
+      showHead: true,
+    },
+    sort: true,
+    explain: {
+      content: '当表格中的字段或数据需要做解释说明时，可增加 [下划线] 提示，hover 可查看解释说明的 tooltips',
+      head: 'Head当表格中的字段或数据需要做解释说明时，可增加 [下划线] 提示，hover 可查看解释说明的 tooltips',
+    },
+  },
+  {
+    label: '来源',
+    field: 'source',
+    width: 80,
+    filter: {
+      list: new Array(20).fill('').map((_, index) => ({ text: `${index}_QQ`, value: `${index}_QQ` })),
+      checked: [],
+    },
+  },
+  {
+    label: '创建时间',
+    field: 'create_time',
+    sort: 'custom',
+  },
+  {
+    label: '优先级',
+    field: 'priority',
+    sort: true,
+    filter: {
+      list: [
+        { text: '1', value: 1 },
+        { text: '2', value: 2 },
+        { text: '3', value: 3 },
+      ],
+    },
+  },
+  {
+    label: '完成度',
+    field: 'percent',
+    sort: true,
+  },
+  {
+    label: (column, index) => `状态-${index}-${column.field}`,
+    field: 'status',
+    render: ({ row }) => `${row.status}-${row.priority}`,
+    sort: true,
+  },
+];
+
+/**
+ * DATA_COLUMNS
+ *
+ *
+ */
+export const DATA_COLUMNS2 = [
+  ...DATA_COLUMNS,
+  {
+    label: '创建时间2',
+    field: 'create_time',
+    sort: 'custom',
+    filter: true,
+  },
+  {
+    label: '创建时间3',
+    field: 'create_time',
+    sort: 'custom',
+    filter: true,
+  },
+  {
+    label: '创建时间4',
+    field: 'create_time',
+    sort: 'custom',
+  },
+  {
+    label: '创建时间5',
+    field: 'create_time',
+    sort: 'custom',
+  },
+  {
+    label: '创建时间6',
+    field: 'create_time',
+    sort: 'custom',
+  },
+  {
+    label: '创建时间7',
+    field: 'create_time',
+    sort: 'custom',
+  },
+  {
+    label: (column, index) => `状态-${index}-${column.field}`,
+    field: 'status',
+    sort: true,
+  },
+];
+
+/**
+ * DATA_COLUMNS
+ *
+ *
+ */
+export const DATA_COLUMNS1 = [...DATA_COLUMNS2];
+
+/**
+ * DATA_COLUMNS
+ *
+ *
+ */
+export const DATA_EXPAND_COLUMNS = [
+  {
+    type: 'selection',
+    width: 20,
+    minWidth: 20,
+  },
+  {
+    type: 'expand',
+    width: 140,
+    minWidth: 30,
+  },
+  ...DATA_COLUMNS,
+];
+
+/**
+ * DATA_COLUMNS
+ *
+ *
+ */
+export const DATA_FIX_TABLE = [
+  ...new Array(100).fill('').map((_, index) => ({
+    ip: `192.168.0.${index} 192.168.${index}.255 ${index}.168.255.255 192.${index}.0.255`,
+    source: `source ${index}`,
+    status: '创建中',
+    create_by: `user ${index}`,
+    create_time: `2018-05-25 15:02:${index}`,
+    update_time: `2018-05-25 15:02:${index}`,
+  })),
+];
+
+/**
+ * DATA_COLUMNS
+ *
+ *
+ */
+export const DATA_FIX_COLUMNS = [
+  {
+    type: 'selection',
+    width: 40,
+    minWidth: 40,
+    fixed: true,
+    acrossPage: true,
+    showOverflowTooltip: {
+      mode: 'static',
+      content: (_column, _row) => 'xxx_uuu',
+      disabled: (_column, _row) => false,
+    },
+  },
+  {
+    label: '序号',
+    type: 'index',
+    sort: true,
+    minWidth: 30,
+    fixed: true,
+  },
+  {
+    label: '名称/内网IP',
+    field: 'ip',
+    minWidth: 50,
+    fixed: true,
+  },
+  {
+    label: '来源',
+    field: 'source',
+    fixed: true,
+    filter: {
+      list: [
+        { text: '1_QQ', value: '1_QQ' },
+        { text: '2_QQ', value: '2_QQ' },
+        { text: 'QQ', value: 'QQ' },
+      ],
+      match: 'fuzzy',
+    },
+    minWidth: 280,
+  },
+  {
+    label: '创建者',
+    field: 'create_by',
+    width: 280,
+  },
+  {
+    label: '更新时间',
+    field: 'create_time',
+    width: 280,
+  },
+  {
+    label: '状态',
+    field: 'status',
+    width: 180,
+    // fixed: 'right',
+  },
+  {
+    label: '操作',
+    render: ({ data }) => {
+      return <bk-input v-model={data.status}></bk-input>;
+    },
+    width: 180,
+    // fixed: 'right',
+  },
+];
+
+/**
+ * DATA_COLUMNS
+ *
+ *
+ */
+export const DATE_COL_SPAN = [
+  {
+    label: '序号',
+    type: 'index',
+    sort: {
+      value: 'asc',
+    },
+    width: 50,
+    minWidth: 80,
+  },
+  {
+    label: '名称/内网IP',
+    field: 'ip',
+    width: 100,
+    colspan: 2,
+    showOverflowTooltip: {
+      mode: 'auto',
+    },
+  },
+  {
+    label: '来源',
+    field: 'source',
+    width: 80,
+    filter: {
+      list: [
+        { text: 'Resolving deltas: 100% (16/16), completed with 15 local objects', value: 'QQ' },
+        { text: 'create mode 100644 site/views/search-select/value-behavior.vue', value: '微信' },
+        { text: 'Writing objects: 100% (19/19), 2.19 KiB | 1.09 MiB/s, done.', value: 'Email' },
+      ],
+    },
+  },
+  {
+    label: '创建时间',
+    field: 'create_time',
+    rowspan: ({ rowIndex }) => (rowIndex > 2 ? 2 : 1),
+    sort: 'custom',
+  },
+  {
+    label: (column, index) => `状态-${index}-${column.field}`,
+    field: 'status',
+    sort: true,
+  },
+];

package/knowledge/examples/table/pagination.vue

@@ -0,0 +1,31 @@
+<template>
+  <div style="width: 100%; height: 500px" v-if="isShow">
+    <bk-table ref="refTable" height="100%" :columns="columns" :data="tableData" :pagination="pagination"
+      empty-cell-text="--" :pagination-heihgt="60" show-overflow-tooltip shift-multi-checked
+      @selection-change="handleSelectionChange" />
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+
+import { DATA_FIX_COLUMNS } from './options';
+const appendColumns = new Array(20).fill('').map((item, index) => ({ label: `新增列${index}`, field: `new-${index}`, width: 50 }));
+
+const tableData = reactive(new Array(Math.ceil(Math.random() * 100) + 500).fill('').map((_, index) => ({
+  ip: `${index}--192.168.0.x`,
+  source: index,
+  create_by: `user-admin-${index}`,
+  status: '',
+  create_time: `2018-05-25 15:02:24.${index}`,
+  ...appendColumns.reduce((acc, cur, curIndex) => ({ ...acc, [`new-${curIndex}`]: `随机数据-${curIndex}-${index}` }), {})
+})));
+
+const isShow = ref(true);
+const renderTable = () => { isShow.value = !isShow.value; }
+const pagination = ref({ count: tableData.length, limit: 20 });
+const columns = reactive(DATA_FIX_COLUMNS.concat(appendColumns));
+const refTable = ref(null);
+const handleSelectionChange = args => {
+};
+</script>

package/knowledge/examples/table/remotePagination.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <bk-table :columns="columns" :data="tableData" :pagination="pagination" border="horizontal" remote-pagination
+      @column-sort="handleColumnSort" @page-limit-change="handlePageLimitChange" maxHeight="400"
+      @page-value-change="handlePageValueChange" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+import { DATA_FIX_COLUMNS } from './options';
+
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      tableData: [],
+      columns: [...DATA_FIX_COLUMNS],
+      pagination: { count: 0, current: 1, limit: 50 },
+    };
+  },
+  mounted() {
+    this.setCurrentData();
+  },
+  methods: {
+    setCurrentData(current = 1) {
+      const start = (this.pagination.current - 1) * this.pagination.limit;
+      setTimeout(() => {
+        this.pagination.count = 100;
+        this.pagination.current = current;
+        this.tableData = new Array(this.pagination.limit).fill('').map((_, index) => ({
+          ip: `${start + index}--192.168.0.x`,
+          source: `${start + index}_QQ`,
+          status: '创建中',
+          create_time: `2018-05-25 15:02:24.${start + index}`,
+        }));
+      }, 100);
+    },
+    handlePageValueChange(value) {
+      this.pagination.current = value;
+      console.log('handlePageValueChange', value);
+      this.setCurrentData(value);
+    },
+    handlePageLimitChange(limit) {
+      this.pagination.limit = limit;
+      this.setCurrentData();
+    },
+    handleColumnSort(...args) {
+      console.log('sort', args);
+    },
+  },
+});
+</script>

package/knowledge/examples/table/scroll-horizontal.vue

@@ -0,0 +1,45 @@
+<template>
+  <div style="height: 300px">
+    <bk-table height="100%" :columns="columns" :data="tableData" settings />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      tableData: new Array(10).fill('').map((_r, rIndex) =>
+        new Array(20).fill('').reduce(
+          (output, _cr, cIndex) =>
+            Object.assign(output, {
+              [`col_${cIndex + 1}`]: `row_${rIndex + 1}_col_${cIndex + 1}`,
+            }),
+          {},
+        ),
+      ),
+      columns: new Array(20).fill('').map((_c, index) => ({
+        label: `Column${index + 1}`,
+        field: `col_${index + 1}`,
+        minWidth: 200,
+        render: ({ row }) => {
+          return row[`col_${index + 1}`]
+        }
+      })),
+    };
+  },
+});
+</script>
+<style scoped>
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.cell {
+  flex: 1;
+  margin: 0 5px 0 5px;
+}
+</style>

package/knowledge/examples/table/scroll-loading-slot.vue

@@ -0,0 +1,56 @@
+<template>
+  <div style="height: 300px">
+    <bk-table height="100%" :columns="columns" :data="tableData" @scroll-bottom="handleScrollBottom"
+      :fixedBottom="fixedBottom">
+      <template #prepend>
+        <div style="background-color: red; width: 100%; color: #fff; opacity: 0.4; padding: 10px">Fixed TOP</div>
+      </template>
+      <template #fixedBottom>
+        <div style="background-color: red; width: 100%; color: #fff; opacity: 0.4; padding: 10px">
+          {{ `Fixed Bottom` }}
+        </div>
+      </template>
+    </bk-table>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+import { DATA_FIX_COLUMNS, DATA_FIX_TABLE } from './options';
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      tableData: [...DATA_FIX_TABLE],
+      columns: [...DATA_FIX_COLUMNS],
+      isScrollLoading: false,
+      fixedBottom: {
+        position: 'relative',
+        height: 42
+      }
+    };
+  },
+  methods: {
+    handleScrollBottom(arg) {
+      console.log('handleScrollBottom', arg);
+      this.isScrollLoading = true;
+
+      setTimeout(() => {
+        this.isScrollLoading = false;
+      }, 1500);
+    },
+  },
+});
+</script>
+<style scoped>
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.cell {
+  flex: 1;
+  margin: 0 5px 0 5px;
+}
+</style>

package/knowledge/examples/table/scroll-loading.vue

@@ -0,0 +1,65 @@
+<template>
+  <div style="height: 300px">
+    <bk-table height="100%" :columns="columns" :data="tableData" :scroll-loading="isScrollLoading" :settings="settings"
+      @scroll-bottom="handleScrollBottom" />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+import { DATA_FIX_COLUMNS, DATA_FIX_TABLE } from './options';
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      tableData: [...DATA_FIX_TABLE],
+      columns: [...DATA_FIX_COLUMNS],
+      isScrollLoading: false,
+      settings: {
+        fields: [
+          {
+            label: '序号',
+            field: 'index',
+            //  disabled: true,
+          },
+          {
+            label: '名称/内网IP',
+            field: 'ip',
+          },
+          {
+            label: '来源',
+            field: 'source',
+          },
+          {
+            label: '创建时间',
+            field: 'create_time',
+          },
+        ],
+        checked: ['ip', 'source', 'create_time'],
+      },
+    };
+  },
+  methods: {
+    handleScrollBottom(arg) {
+      console.log('handleScrollBottom', arg);
+      this.isScrollLoading = true;
+
+      setTimeout(() => {
+        this.isScrollLoading = false;
+      }, 1500);
+    },
+  },
+});
+</script>
+<style scoped>
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.cell {
+  flex: 1;
+  margin: 0 5px 0 5px;
+}
+</style>

package/knowledge/examples/table/selection.vue

@@ -0,0 +1,48 @@
+<template>
+  <bk-table ref="refTable" pagination :data="tableData" :border="['outer']" :is-row-select-enable="isRowSelectEnable">
+    <bk-table-column :width="100" type="selection" sort />
+    <bk-table-column field="ip" label="名称/内网IP" />
+    <bk-table-column field="source" label="来源" />
+    <bk-table-column field="create_time" label="创建时间" />
+  </bk-table>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+import { DATA_TABLE } from './options';
+const DATA_ROWS = DATA_TABLE.map((item) => ({
+  ...item,
+}));
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      activeIndex: [1, 2],
+      tableData: DATA_ROWS,
+      checked: DATA_ROWS,
+      pagination: { count: DATA_ROWS.length, limit: 10 },
+    };
+  },
+
+  methods: {
+    isRowSelectEnable({ index, isCheckAll }) {
+      if (isCheckAll) {
+        return true;
+      }
+      return index % 3;
+    },
+  },
+});
+</script>
+<style scoped>
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.cell {
+  flex: 1;
+  margin: 0 5px 0 5px;
+}
+</style>