@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/timeline/index.tsx

@@ -0,0 +1,212 @@
+/*
+ * 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 { type IPropsTableItem } from '../../typings';
+import BaseDemo from './base-demo.vue';
+import CustomDemo from './custom-demo.vue';
+import HtmlDemo from './html-demo.vue';
+import NodeDemo from './node-demo.vue';
+import StatusDemo from './status-demo.vue';
+import VnodeDemo from './vnode-demo.vue';
+
+const timelineProps: IPropsTableItem[] = [
+  {
+    name: 'list',
+    type: 'Array',
+    default: '-',
+    desc: '时间轴数据源（必传)',
+    optional: ['-'],
+  },
+  {
+    name: 'list[].tag',
+    type: 'String | VNode',
+    default: '-',
+    desc: '标题（一般是时间标识）',
+    optional: ['-'],
+  },
+  {
+    name: 'list[].content',
+    type: 'String | Object | VNode',
+    default: '-',
+    desc: '内容',
+    optional: ['-'],
+  },
+  {
+    name: 'list[].border',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否需要边框',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'list[].type',
+    type: 'String',
+    default: 'primary',
+    desc: '节点样式',
+    optional: ['default', 'primary', 'warning', 'success', 'danger'],
+  },
+  {
+    name: 'list[].size',
+    type: 'String',
+    default: '-',
+    desc: '节点大小',
+    optional: ['large'],
+  },
+  {
+    name: 'list[].color',
+    type: 'String',
+    default: '-',
+    desc: '节点颜色',
+    optional: ['blue', 'red', 'green', 'yellow', 'gray'],
+  },
+  {
+    name: 'list[].icon',
+    type: 'Function',
+    default: '-',
+    desc: '节点图标，可使用蓝鲸 ICON',
+    optional: ['-'],
+  },
+  {
+    name: 'list[].theme',
+    type: 'String',
+    default: 'primary',
+    desc: '组件的主题色',
+    optional: ['primary', 'success', 'warning', 'danger'],
+  },
+  {
+    name: 'list[].filled',
+    type: 'Boolean',
+    default: 'primary',
+    desc: '是否填充节点(实心)',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'list[].nodeType',
+    type: 'String',
+    default: 'primary',
+    desc: '时间轴节点渲染类型，缺省值为 template 默认使用 v-html ，填写 vnode 则支持 JSX 渲染',
+    optional: ['template', 'vnode'],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '-',
+    desc: '配置自定义样式类名，传入的类会被加在组件最外层的 DOM .bk-timeline 上',
+    optional: ['-'],
+  },
+];
+const timelineEvents: IPropsTableItem[] = [
+  {
+    name: 'select',
+    type: 'Function',
+    default: '-',
+    desc: '相应点击项的数据data',
+    optional: ['-'],
+  },
+];
+export default defineComponent({
+  name: 'Steps',
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Timeline 时间轴，用于时间轴的场景组件'
+          link={`${import.meta.env.VITE_APP_BASE_URL ?? ''}/timeline`}
+          name='Timeline 时间轴'
+        />
+        <DemoBox
+          componentName='timeline'
+          demoName='base-demo'
+          desc='默认配置 list，list 为必传。可根据具体的应用场景，灵活地配置 list.tag 和 list.content，可以将时间作为标题，也可以作为内容的一部分'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='timeline'
+          demoName='status-demo'
+          desc='在 list 数据源中配置 size color filled 属性呈现不同状态。绿色代表成功/已完成，蓝色代表正在进行，红色代表错误/失败，黄色代表告警/暂停，灰色代表未开始。实心代表已完成。'
+          title='节点状态'
+        >
+          <StatusDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='timeline'
+          demoName='custom-demo'
+          desc='在 list 数据源中配置 icon 属性'
+          title='自定义节点图标'
+        >
+          <CustomDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='timeline'
+          demoName='node-demo'
+          desc='在 list 数据源中配置 type 属性（值可取 defult, primary, warning, success, danger），默认为 defult'
+          title='节点样式可配置'
+        >
+          <NodeDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='timeline'
+          demoName='html-demo'
+          desc='对 list 数据源中的 content 属性配置正确的 HTML 模板内容(注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击)'
+          title='可配置 HTML 模板'
+        >
+          <HtmlDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='timeline'
+          demoName='vnode-demo'
+          desc='content 和 tag 支持 vnode 类型，支持jsx语法'
+          title='使用 Vnode 渲染'
+        >
+          <VnodeDemo />
+        </DemoBox>
+
+        <PropsBox
+          propsData={timelineProps}
+          subtitle=''
+          title='属性'
+        />
+        <PropsBox
+          propsData={timelineEvents}
+          subtitle=''
+          title='事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/timeline/node-demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <bk-timeline :list="state.list" />
+  </div>
+</template>
+<script>
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        list: [
+          {
+            tag: '一天前',
+            content: '由pony上线到蓝鲸市场',
+            type: 'default',
+          },
+          {
+            tag: '步骤1',
+            content: '<span style="font-size: 12px;">2019-12-15 11:00</span>',
+            type: 'primary',
+          },
+          {
+            tag: '步骤2',
+            content: '<span style="font-size: 12px;">2020-12-15 11:00</span>',
+            type: 'warning',
+          },
+          {
+            tag: '步骤3',
+            content: '<span style="font-size: 12px;">2021-12-15 11:00</span>',
+            type: 'success',
+          },
+          {
+            tag: '步骤4',
+            content: '<span style="font-size: 12px;">2022-12-15 11:00</span>',
+            type: 'danger',
+          },
+        ],
+      });
+      return {
+        state,
+      };
+    },
+  });
+</script>

package/knowledge/examples/timeline/status-demo.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="wrapper">
+    <bk-container :col="12">
+      <bk-row>
+        <bk-col :span="4">
+          <div class="content">
+            <bk-timeline :list="state.list" />
+          </div>
+        </bk-col>
+        <bk-col :span="4">
+          <div class="content">
+            <bk-timeline :list="state.list1" />
+          </div>
+        </bk-col>
+        <bk-col :span="4">
+          <div class="content">
+            <bk-timeline :list="state.list2" />
+          </div>
+        </bk-col>
+      </bk-row>
+    </bk-container>
+  </div>
+</template>
+<script>
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        list: [
+          {
+            tag: 'pony审批通过，并附“同意”',
+            content: '由pony上线到蓝鲸市场',
+            color: 'green',
+            filled: true,
+          },
+          {
+            tag: 'tony审批通过，并附“同意”',
+            content: '<span style="font-size: 12px;">2019-12-15 11:00</span>',
+            color: 'green',
+            filled: true,
+          },
+          {
+            tag: 'allen正在审批',
+            content: '<span style="font-size: 12px;">2020-12-15 11:00</span>',
+            color: 'blue',
+            size: 'large',
+          },
+          {
+            tag: '步骤3',
+            content: '<span style="font-size: 12px;">2021-12-15 11:00</span>',
+          },
+          {
+            tag: '步骤4',
+            content: '<span style="font-size: 12px;">2022-12-15 11:00</span>',
+          },
+        ],
+
+        list1: [
+          {
+            tag: 'pony审批通过，并附“同意”',
+            content: '由pony上线到蓝鲸市场',
+            color: 'green',
+            filled: true,
+          },
+          {
+            tag: 'tony审批通过，并附“同意”',
+            content: '<span style="font-size: 12px;">2019-12-15 11:00</span>',
+            color: 'green',
+            filled: true,
+          },
+          {
+            tag: 'allen审批不通过，并附“不同意”',
+            content: '<span style="font-size: 12px;">2020-12-15 11:00</span>',
+            color: 'red',
+            size: 'large',
+          },
+          {
+            tag: '步骤3',
+            content: '<span style="font-size: 12px;">2021-12-15 11:00</span>',
+          },
+          {
+            tag: '步骤4',
+            content: '<span style="font-size: 12px;">2022-12-15 11:00</span>',
+          },
+        ],
+
+        list2: [
+          {
+            tag: 'pony审批通过，并附“同意”',
+            content: '由pony上线到蓝鲸市场',
+            color: 'green',
+            filled: true,
+          },
+          {
+            tag: 'tony审批通过，并附“同意”',
+            content: '<span style="font-size: 12px;">2019-12-15 11:00</span>',
+            color: 'blue',
+            filled: true,
+          },
+          {
+            tag: 'allen暂停审批',
+            content: '<span style="font-size: 12px;">2020-12-15 11:00</span>',
+            color: 'yellow',
+            size: 'large',
+          },
+          {
+            tag: '步骤3',
+            content: '<span style="font-size: 12px;">2021-12-15 11:00</span>',
+          },
+          {
+            tag: '步骤4',
+            content: '<span style="font-size: 12px;">2022-12-15 11:00</span>',
+          },
+        ],
+      });
+
+      return {
+        state,
+      };
+    },
+  });
+</script>
+<style lang="postcss">
+  .wrapper {
+    padding: 20px 0;
+    overflow: hidden;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+  }
+</style>

package/knowledge/examples/timeline/vnode-demo.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <bk-timeline
+      :list="state.list"
+      @select="timeLineChanged"
+    />
+  </div>
+</template>
+<script>
+  import { defineComponent, h, reactive } from 'vue';
+
+  import { BkButton } from '@bkui-vue/button';
+  import { Success, Spinner } from '@bkui-vue/icon';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        list: [
+          {
+            tag: h(
+              BkButton,
+              {
+                theme: 'primary',
+              },
+              '一天前',
+            ),
+            content: '由pony上线到蓝鲸市场',
+            size: 'large',
+            nodeType: 'vnode',
+          },
+          {
+            tag: '步骤1',
+            content: h(
+              'span',
+              {
+                style: {
+                  color: 'gold',
+                  fontWeight: 'bold',
+                },
+              },
+              [
+                h(Success, {
+                  style: {
+                    marginRight: '5px',
+                  },
+                  fill: '#2DCB56',
+                }),
+                h(Spinner, {
+                  style: {
+                    marginRight: '5px',
+                  },
+                  fill: '#3A84FF',
+                }),
+              ],
+            ),
+            nodeType: 'vnode',
+          },
+          {
+            tag: '步骤2',
+            content: '<span style="font-size: 12px;">2020-12-15 11:00</span>',
+            nodeType: 'template',
+          },
+          {
+            tag: '步骤3',
+            content: '<span style="font-size: 12px;">2021-12-15 11:00</span>',
+          },
+          {
+            tag: '步骤4',
+            content: '<span style="font-size: 12px;">2022-12-15 11:00</span>',
+          },
+        ],
+      });
+
+      // 改变当前选中值
+      const timeLineChanged = data => {
+        alert(`选择了：${data.tag}`);
+      };
+      return {
+        state,
+        timeLineChanged,
+      };
+    },
+  });
+</script>

package/knowledge/examples/timeline.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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, reactive } from 'vue';
+
+import { Bk } from '@bkui-vue/icon';
+import BkTimeline from '@bkui-vue/timeline';
+
+export default defineComponent({
+  name: 'SiteTimeline',
+  setup() {
+    const state = reactive({
+      list: [
+        {
+          tag: '一天前',
+          content: '由pony上线到蓝鲸市场',
+          type: 'default',
+          color: 'green',
+        },
+        {
+          tag: '步骤1',
+          content: '<span style="font-size: 12px;">2019-12-15 11:00</span>',
+          type: 'primary',
+        },
+        {
+          tag: '步骤2',
+          content: '<span style="font-size: 12px;">2020-12-15 11:00</span>',
+          type: 'success',
+          filled: true,
+        },
+        {
+          tag: '步骤3',
+          content: '<span style="font-size: 12px;">2021-12-15 11:00</span>',
+          type: 'warning',
+          // color: 'blue',
+          // filled: true,
+          size: 'large',
+        },
+        {
+          tag: '步骤4',
+          content: '<span style="font-size: 12px;">2022-12-15 11:00</span>',
+          // type: 'danger',
+          icon: <Bk></Bk>,
+          // border: false,
+        },
+      ],
+    });
+
+    // 点击标题
+    const select = (data: any) => {
+      alert(`选择了：${data.tag}`);
+    };
+
+    return {
+      state,
+      select,
+    };
+  },
+  render() {
+    return (
+      // v-slots={{
+      //   icon: () => (
+      //     <>
+      //       <Search></Search>
+      //       <Search></Search>
+      //     </>
+      //   ),
+      // }}
+      <div style='height: 400px; margin-left: 40px; margin-top: 40px'>
+        <BkTimeline
+          style={{ marginBottom: '40px' }}
+          list={this.state.list}
+          onSelect={this.select}
+        ></BkTimeline>
+      </div>
+    );
+  },
+});

package/knowledge/examples/tooltips/demo/base.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { bkTooltips } from '@bkui-vue/directives';
+import { Info } from '@bkui-vue/icon';
+
+export default defineComponent({
+  name: 'TooltipsDemo',
+  directives: {
+    bkTooltips,
+  },
+  setup() {
+    return () => (
+      <div>
+        <Info
+          class='bk-tooltips-base'
+          v-bk-tooltips={{
+            content: (
+              <div>
+                22
+                <br />
+                222
+              </div>
+            ),
+          }}
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/tooltips/demo/base.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <span
+      ref="nodeRef"
+      class="bk-tooltips-base"
+      v-bk-tooltips="{ content: '提示信息' }"
+    >
+      <info />
+    </span>
+    &nbsp;&nbsp;&nbsp;&nbsp;
+    <span
+      ref="nodeRef"
+      class="bk-tooltips-base"
+      v-bk-tooltips="{ content: '提示信息2,延迟3s', delay: 3000 }"
+    >
+      <info />
+    </span>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { bkTooltips } from 'bkui-vue';
+  import { Info } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    components: {
+      Info,
+    },
+    directives: {
+      bkTooltips,
+    },
+  });
+</script>
+
+<style lang="postcss">
+  .bk-tooltips-base {
+    font-size: 18px;
+    color: #3a84ff;
+  }
+</style>