@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/table/basic.tsx

@@ -0,0 +1,323 @@
+import { defineComponent } from 'vue';
+
+/*
+ * 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 { Table } from 'bkui-vue';
+
+export default defineComponent({
+  name: 'BaseTable',
+  render() {
+    // 渲染table
+    return (
+      <Table
+        columns={[
+          {
+            field: 'biz_id',
+            label: 'demo',
+            fixed: false,
+            sort: true,
+            filter: {
+              list: [
+                {
+                  text: '100141',
+                  value: '100141',
+                },
+                {
+                  text: '100325',
+                  value: '100325',
+                },
+                {
+                  text: '100376',
+                  value: '100376',
+                },
+                {
+                  text: '100378',
+                  value: '100378',
+                },
+                {
+                  text: '100387',
+                  value: '100387',
+                },
+                {
+                  text: '100391',
+                  value: '100391',
+                },
+                {
+                  text: '100566',
+                  value: '100566',
+                },
+                {
+                  text: '100738',
+                  value: '100738',
+                },
+                {
+                  text: '1019',
+                  value: '1019',
+                },
+                {
+                  text: '105',
+                  value: '105',
+                },
+                {
+                  text: '120',
+                  value: '120',
+                },
+                {
+                  text: '139',
+                  value: '139',
+                },
+                {
+                  text: '199',
+                  value: '199',
+                },
+                {
+                  text: '236',
+                  value: '236',
+                },
+                {
+                  text: '359',
+                  value: '359',
+                },
+                {
+                  text: '555',
+                  value: '555',
+                },
+                {
+                  text: '706',
+                  value: '706',
+                },
+                {
+                  text: '883',
+                  value: '883',
+                },
+                {
+                  text: '943',
+                  value: '943',
+                },
+                {
+                  text: '998',
+                  value: '998',
+                },
+              ],
+            },
+            width: '',
+            minWidth: 0,
+            render: ({ cell }) => (
+              <div
+                style={{
+                  height: '100%',
+                }}
+                class={'flex-row align-items-center'}
+              >
+                {cell}
+              </div>
+            ),
+          },
+          {
+            field: 'COUNT(visitor_group)',
+            label: 'COUNT(visitor_group)',
+            fixed: false,
+            sort: true,
+            filter: {
+              list: [
+                {
+                  text: 2,
+                  value: 2,
+                },
+                {
+                  text: 37,
+                  value: 37,
+                },
+                {
+                  text: 4,
+                  value: 4,
+                },
+                {
+                  text: 8,
+                  value: 8,
+                },
+                {
+                  text: 5,
+                  value: 5,
+                },
+                {
+                  text: 7,
+                  value: 7,
+                },
+                {
+                  text: 138,
+                  value: 138,
+                },
+                {
+                  text: 1,
+                  value: 1,
+                },
+                {
+                  text: 50,
+                  value: 50,
+                },
+                {
+                  text: 89,
+                  value: 89,
+                },
+                {
+                  text: 68,
+                  value: 68,
+                },
+                {
+                  text: 3,
+                  value: 3,
+                },
+                {
+                  text: 13,
+                  value: 13,
+                },
+                {
+                  text: 11,
+                  value: 11,
+                },
+                {
+                  text: 45,
+                  value: 45,
+                },
+                {
+                  text: 36,
+                  value: 36,
+                },
+              ],
+            },
+            width: '',
+            minWidth: 0,
+          },
+        ]}
+        data={[
+          {
+            'COUNT(visitor_group)': 2,
+            biz_id: '100141',
+            _unique_metric_: '100141',
+          },
+          {
+            'COUNT(visitor_group)': 37,
+            biz_id: '100325',
+            _unique_metric_: '100325',
+          },
+          {
+            'COUNT(visitor_group)': 2,
+            biz_id: '100376',
+            _unique_metric_: '100376',
+          },
+          {
+            'COUNT(visitor_group)': 4,
+            biz_id: '100378',
+            _unique_metric_: '100378',
+          },
+          {
+            'COUNT(visitor_group)': 8,
+            biz_id: '100387',
+            _unique_metric_: '100387',
+          },
+          {
+            'COUNT(visitor_group)': 5,
+            biz_id: '100391',
+            _unique_metric_: '100391',
+          },
+          {
+            'COUNT(visitor_group)': 7,
+            biz_id: '100566',
+            _unique_metric_: '100566',
+          },
+          {
+            'COUNT(visitor_group)': 137,
+            biz_id: '100738',
+            _unique_metric_: '100738',
+          },
+          {
+            'COUNT(visitor_group)': 1,
+            biz_id: '1019',
+            _unique_metric_: '1019',
+          },
+          {
+            'COUNT(visitor_group)': 50,
+            biz_id: '105',
+            _unique_metric_: '105',
+          },
+          {
+            'COUNT(visitor_group)': 89,
+            biz_id: '120',
+            _unique_metric_: '120',
+          },
+          {
+            'COUNT(visitor_group)': 68,
+            biz_id: '139',
+            _unique_metric_: '139',
+          },
+          {
+            'COUNT(visitor_group)': 8,
+            biz_id: '199',
+            _unique_metric_: '199',
+          },
+          {
+            'COUNT(visitor_group)': 1,
+            biz_id: '236',
+            _unique_metric_: '236',
+          },
+          {
+            'COUNT(visitor_group)': 3,
+            biz_id: '359',
+            _unique_metric_: '359',
+          },
+          {
+            'COUNT(visitor_group)': 13,
+            biz_id: '555',
+            _unique_metric_: '555',
+          },
+          {
+            'COUNT(visitor_group)': 3,
+            biz_id: '706',
+            _unique_metric_: '706',
+          },
+          {
+            'COUNT(visitor_group)': 11,
+            biz_id: '883',
+            _unique_metric_: '883',
+          },
+          {
+            'COUNT(visitor_group)': 45,
+            biz_id: '943',
+            _unique_metric_: '943',
+          },
+          {
+            'COUNT(visitor_group)': 36,
+            biz_id: '998',
+            _unique_metric_: '998',
+          },
+        ]}
+        virtualEnabled={true}
+        onColumnSort={data => console.log(data)}
+      ></Table>
+    );
+  },
+});

package/knowledge/examples/table/basic.vue

@@ -0,0 +1,229 @@
+<template>
+  <bk-button @click="clearSelection">取消全选</bk-button>
+  <bk-button @click="handleScrollTo">ScrollToLast</bk-button>
+  <bk-button @click="handleAppendToLastRow">追加一行</bk-button>
+  <div style="display: grid">
+    <div style="height: 300px">
+      <bk-table
+        ref="refTable"
+        height="auto"
+        :data="projectTable"
+        :fixed-bottom="fixedBottom"
+        :pagination="pagination"
+        max-height="100%"
+        row-draggable
+        show-overflow-tooltip
+        stripe
+      >
+        <bk-table-column
+          width="30"
+          :min-width="30"
+          align="center"
+          type="selection"
+        />
+        <bk-table-column
+          :sort="true"
+          label="用户组"
+          prop="groupName"
+        />
+        <bk-table-column
+          label="用户描述"
+          prop="groupDesc"
+        />
+        <bk-table-column
+          :filter="filterOption"
+          label="有效期"
+          prop="validityPeriod"
+        />
+        <bk-table-column
+          label="加入时间"
+          prop="joinedTime"
+        />
+        <bk-table-column
+          label="加入方式/操作人"
+          prop="operateSource"
+        >
+          <template #default="{ row }"> {{ row.operateSource }}/{{ row.operator }} </template>
+        </bk-table-column>
+      </bk-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, reactive, onMounted, computed } from 'vue';
+  const refTable = ref(null);
+
+  const handleScrollTo = () => {
+    refTable?.value.scrollTo(0, 1000);
+  };
+
+  const pagination = ref({ count: 11, limit: 10, current: 1 });
+  const clearSelection = () => {
+    refTable.value.clearSelection();
+  };
+
+  const filterList = reactive([]);
+  const filterOption = computed(() => ({
+    list: filterList,
+    checked: [],
+  }));
+
+  const lastRowIndex = ref(10);
+
+  const handleAppendToLastRow = () => {
+    lastRowIndex.value = lastRowIndex.value + 1;
+    projectTable.value.push({
+      groupId: lastRowIndex.value,
+      groupName: `last-group-${lastRowIndex.value}`,
+      groupDesc: `last-des-${lastRowIndex.value}`,
+      validityPeriod: `last-period-${lastRowIndex.value}`,
+      joinedTime: '08-18',
+      operateSource: `last-source-${lastRowIndex.value}`,
+      operator: `last-operator-${lastRowIndex.value}`,
+      removeMemberButtonControl: true,
+    });
+  };
+
+  const fixedBottom = reactive({
+    position: 'relative',
+    height: 42,
+  });
+  const projectTable = ref([]);
+  onMounted(() => {
+    setTimeout(() => {
+      projectTable.value = [
+        {
+          groupId: 1,
+          groupName: '11',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0506',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: true,
+        },
+        {
+          groupId: 2,
+          groupName: '22',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0505',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 3,
+          groupName: '33',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0605',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 4,
+          groupName: '44',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0506',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 5,
+          groupName: '55',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0605',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 6,
+          groupName: '66',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0506',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 7,
+          groupName: '77',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0605',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 8,
+          groupName: '88',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0605',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 9,
+          groupName: '99',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0605',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 10,
+          groupName: '1010',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0506',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+        {
+          groupId: 11,
+          groupName: '1111',
+          groupDesc: 'kjkjkjk',
+          validityPeriod: '0505',
+          joinedTime: '08-18',
+          operateSource: '加入组',
+          operator: '张三',
+          removeMemberButtonControl: false,
+        },
+      ];
+    });
+
+    setTimeout(() => {
+      filterList.push(
+        ...[
+          { text: '0506', value: '0506' },
+          { text: '0605', value: '0605' },
+        ],
+      );
+    });
+  });
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    flex: 1;
+    margin: 0 5px 0 5px;
+  }
+</style>

package/knowledge/examples/table/bordered.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="width: 100%; ">
+    <div style="display: flex; padding: 15px 0; align-items: center">
+      <bk-checkbox-group v-model="border">
+        <bk-checkbox label="none" />
+        <bk-checkbox label="row" disabled />
+        <bk-checkbox label="col" />
+        <bk-checkbox label="outer" />
+        <bk-checkbox label="horizontal" />
+      </bk-checkbox-group>
+      <bk-button style="margin-left: 20px" @click="() => (tableData = [])">
+        清空表格数据
+      </bk-button>
+    </div>
+
+  </div>
+  <bk-table :border="border" :columns="columns" :data="tableData" />
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+import { DATA_COLUMNS, DATA_TABLE } from './options';
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      tableData: [...DATA_TABLE],
+      columns: [...DATA_COLUMNS],
+      border: ['row'],
+    };
+  },
+});
+</script>

package/knowledge/examples/table/btn-demo.vue

@@ -0,0 +1,20 @@
+<template>
+  <bk-button theme="primary">
+    {{ btnText }}
+  </bk-button>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        btnText: 'Edit',
+      };
+    },
+    unmounted() {},
+
+    methods: {},
+  });
+</script>

package/knowledge/examples/table/cell-render.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { DATA_FIX_COLUMNS, DATA_TABLE } from './options';
+
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      tableData: [...DATA_TABLE],
+      columns: [...DATA_FIX_COLUMNS].map((col: any, index: number) => ({
+        ...col,
+        label: [0, 1].includes(index) ? this.renderTh : (col: any) => col.field,
+        render: [1, 2, 3, 4].includes(index) ? this.renderCell : undefined,
+      })),
+      pagination: { count: DATA_TABLE.length, limit: 10 },
+    };
+  },
+
+  methods: {
+    renderCell({ row, column }) {
+      return <div style='position: relative;'>{row[column.field]}</div>;
+    },
+    renderTh(column, index) {
+      return (
+        <bk-popover content={`${index}-xxxxxxxx`}>
+          <span>{column.field ?? index}</span>
+        </bk-popover>
+      );
+    },
+  },
+  render() {
+    return (
+      <div style='height: 300px; width: 100%;'>
+        <bk-table
+          columns={this.columns}
+          data={this.tableData}
+          pagination={this.pagination}
+          settings={true}
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/table/col-wrapper.vue

@@ -0,0 +1,10 @@
+<template>
+  <div :class="className">
+    <slot name="body" />
+    <slot />
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+  const className = ref('col-wrapper-xxx');
+</script>