@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/tree/options.ts

@@ -0,0 +1,463 @@
+/*
+ * 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.
+ */
+export const BASIC_DATA = [
+  {
+    name: '方案成熟',
+    isOpen: true,
+    content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+    id: '/',
+    children: [
+      {
+        name: 'child-1-方案成熟-拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-1-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-1-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [
+          {
+            name: 'child-1-方案成熟',
+            content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+            children: [],
+          },
+          {
+            name: 'child-1-覆盖全面',
+            content:
+              '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+            children: [],
+          },
+          {
+            name: 'child-1-开放平台',
+            isOpen: true,
+            content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: '覆盖全面',
+    content:
+      '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+    id: '//',
+    children: [
+      {
+        name: 'child-2-方案成熟',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-2-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-2-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+        checked: true,
+      },
+    ],
+  },
+  {
+    name: '开放平台',
+    content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+    children: [
+      {
+        name: 'child-3-方案成熟',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-3-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-3-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+      },
+    ],
+  },
+];
+
+export const ASYNC_DATA = [
+  {
+    name: '方案成熟',
+    async: true,
+    content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+    id: '1',
+    children: [],
+  },
+  {
+    name: '覆盖全面',
+    async: true,
+    content:
+      '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+    id: '2',
+    children: [],
+  },
+  {
+    name: '开放平台',
+    async: true,
+    content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+    id: '3',
+    children: [],
+  },
+];
+
+export const AUTO_OPEN_DATA = [
+  {
+    name: '方案成熟',
+    content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+    children: [
+      {
+        name: 'child-1-方案成熟-拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-1-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-1-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [
+          {
+            name: 'child-1-方案成熟',
+            content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+            children: [],
+          },
+          {
+            name: 'child-1-覆盖全面',
+            content:
+              '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+            children: [],
+          },
+          {
+            name: 'child-1-开放平台',
+            isOpen: true,
+            content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: '覆盖全面',
+    content:
+      '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+    children: [
+      {
+        name: 'child-2-方案成熟',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-2-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-2-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+      },
+    ],
+  },
+  {
+    name: '开放平台',
+    content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+    isOpen: true,
+    children: [
+      {
+        name: 'child-3-方案成熟',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-3-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-3-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+      },
+    ],
+  },
+];
+
+export const AUTO_CHECKED_DATA = [
+  {
+    name: '方案成熟',
+    content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+    children: [
+      {
+        name: 'child-1-方案成熟-拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-1-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-1-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [
+          {
+            name: 'child-1-方案成熟',
+            content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+            children: [],
+          },
+          {
+            name: 'child-1-覆盖全面',
+            content:
+              '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+            children: [],
+          },
+          {
+            name: 'child-1-开放平台',
+            content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: '覆盖全面',
+    content:
+      '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+    children: [
+      {
+        name: 'child-2-方案成熟',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-2-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-2-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+      },
+    ],
+  },
+  {
+    name: '开放平台',
+    content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+    isOpen: true,
+    children: [
+      {
+        name: 'child-3-方案成熟',
+        isOpen: true,
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-3-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        name: 'child-3-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        checked: true,
+        children: [],
+      },
+    ],
+  },
+];
+
+export const SINGLE_NODE_DATA = [
+  {
+    name: '方案成熟',
+    content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+    id: '/',
+    children: [
+      {
+        id: '/1/',
+        name: 'child-1-方案成熟-拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        id: '/2/',
+        name: 'child-1-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+        children: [],
+      },
+      {
+        id: '/3/',
+        name: 'child-1-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [
+          {
+            id: '/3/1/',
+            name: 'child-1-方案成熟',
+            content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+            children: [],
+          },
+          {
+            id: '/3/2/',
+            name: 'child-1-覆盖全面',
+            content:
+              '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+            children: [],
+          },
+          {
+            id: '/3/3/',
+            name: 'child-1-开放平台',
+            content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+];
+export const DRAG_TEST_DATA = [
+  {
+    name: '方案成熟',
+    isOpen: true,
+    content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+    id: '/',
+    isFolder: true,
+    children: [
+      {
+        name: 'child-1-方案成熟-拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        isFolder: true,
+        children: [],
+      },
+      {
+        name: 'child-1-覆盖全面',
+        disabled: true,
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+      },
+      {
+        name: 'child-1-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        isFolder: true,
+        children: [
+          {
+            isFolder: true,
+            name: 'child-1-方案成熟',
+            content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+            children: [],
+          },
+          {
+            name: 'child-1-覆盖全面',
+            disabled: true,
+            content:
+              '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+          },
+          {
+            name: 'child-1-开放平台',
+            isOpen: true,
+            content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: '覆盖全面',
+    disabled: true,
+    content:
+      '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+    id: '//',
+    isFolder: true,
+    children: [
+      {
+        name: 'child-2-方案成熟',
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+      },
+      {
+        name: 'child-2-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+      },
+      {
+        name: 'child-2-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+        children: [],
+        isFolder: true,
+        checked: true,
+      },
+    ],
+  },
+  {
+    name: '开放平台',
+    content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+    children: [
+      {
+        name: 'child-3-方案成熟',
+        isFolder: true,
+        content: '拥有支撑数百款腾讯业务的经验沉淀，兼容各种复杂的系统架构，生于运维 · 精于运维',
+        children: [],
+      },
+      {
+        name: 'child-3-覆盖全面',
+        content:
+          '从配置管理，到作业执行、任务调度和监控自愈，再通过运维大数据分析辅助运营决策，全方位覆盖业务运营的全周期保障管理。',
+      },
+      {
+        name: 'child-3-开放平台',
+        content: '开放的PaaS，具备强大的开发框架和调度引擎，以及完整的运维开发培训体系，助力运维快速转型升级。',
+      },
+    ],
+  },
+];

package/knowledge/examples/tree/prefix-icon-jsx.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 { BASIC_DATA } from './options';
+
+import './tree.less';
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      treeData: [...BASIC_DATA],
+    };
+  },
+  methods: {
+    getPrefixIcon(params, renderType) {
+      const {
+        __attr__: { hasChildNode, isOpen, isRoot },
+      } = params;
+      const isAction = renderType === 'node_action';
+      const childeFont = hasChildNode ? '+' : '*';
+      const openFont = isOpen ? '-' : childeFont;
+      const rootFont = isRoot ? 'R' : 'C';
+      const fontIcon = !isAction ? rootFont : openFont;
+      return (
+        <span
+          style='font-size: 8px; text-align: center;'
+          class='custom-node'
+        >
+          {fontIcon}
+        </span>
+      );
+    },
+  },
+  render() {
+    return (
+      <div class={'row'}>
+        <div class={'column'}>
+          <span>function 返回对象</span>
+          <div class={'cell'}>
+            <bk-tree
+              children='children'
+              data={this.treeData}
+              label='name'
+              levelLine={true}
+              prefix-icon={this.getPrefixIcon}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+});

package/knowledge/examples/tree/prefix-icon.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="row">
+    <div class="column">
+      <span>prefix-icon: true</span>
+
+      <div class="cell">
+        <bk-tree
+          :data="treeData"
+          children="children"
+          label="name"
+          level-line
+          prefix-icon
+        />
+      </div>
+    </div>
+    <div class="column">
+      <span>function 函数返回 'default' 将会调用系统默认样式</span>
+      <div class="cell">
+        <bk-tree
+          :data="treeData"
+          :prefix-icon="getPrefixIcon"
+          children="children"
+          label="name"
+          level-line
+        />
+      </div>
+    </div>
+    <div class="column">
+      <span>function 返回字符串</span>
+      <div class="cell">
+        <bk-tree
+          :data="treeData"
+          :prefix-icon="getPrefixIcon2"
+          children="children"
+          label="name"
+          level-line
+        />
+      </div>
+    </div>
+    <div class="column">
+      <span>function 返回对象</span>
+      <div class="cell">
+        <bk-tree
+          :data="treeData"
+          :prefix-icon="getPrefixIcon3"
+          children="children"
+          label="name"
+          level-line
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { BASIC_DATA } from './options';
+  const treeData = [...BASIC_DATA];
+  /**
+   * Tree Prop: prefixIcon function
+   * @param {} isRoot 是否为分跟节点
+   * @param {} hasChildNode 是否有孩子节点
+   * @param {} isOpened 当前节点是否展开
+   * @param {} renderType 当前渲染类型（node_action: 用来标识当前节点状态，展开 | 收起, node_type：节点类型，文件、文件夹）
+   */
+
+  const getPrefixIcon = () => 'default';
+
+  const getPrefixIcon2 = (item, renderType) => {
+    const { isRoot } = item;
+    if (renderType === 'node_action') {
+      return 'default';
+    }
+
+    if (isRoot) {
+      return null;
+    }
+
+    return 'Node-';
+  };
+
+  const getPrefixIcon3 = (item, renderType) => {
+    const { isRoot } = item;
+    if (renderType === 'node_action') {
+      return 'default';
+    }
+
+    if (isRoot) {
+      return {
+        node: 'span',
+        className: 'custom-node custom-root',
+        text: '0',
+        style: {
+          fontSize: '12px',
+        },
+      };
+    }
+
+    return {
+      node: 'span',
+      className: 'custom-node',
+      text: '1',
+      style: {
+        fontSize: '8px',
+      },
+    };
+  };
+</script>
+<style>
+  .custom-node {
+    display: flex;
+    width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    margin: 0 2px 0 0;
+    background: #cccc;
+    align-items: center;
+  }
+
+  .custom-root {
+    background: #fafb;
+  }
+</style>
+<style scoped>
+  @import './tree.less';
+  .column {
+    width: 25%;
+  }
+</style>