@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/steps/controllable-demo.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <bk-steps
+      :controllable="controllable"
+      :cur-step="state.curStep"
+      @click="stepChanged"
+    />
+  </div>
+</template>
+<script>
+  import { defineComponent, reactive, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const controllable = ref(true);
+
+      const state = reactive({
+        curStep: 1,
+      });
+
+      // 改变当前选中值
+      const stepChanged = index => {
+        state.curStep = index;
+      };
+      return {
+        controllable,
+        state,
+        stepChanged,
+      };
+    },
+  });
+</script>

package/knowledge/examples/steps/custom-demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <bk-steps
+      class="mb20"
+      :controllable="state.controllable"
+      :cur-step="state.curStep"
+      :steps="state.objectSteps"
+      @click="stepChanged"
+    />
+  </div>
+</template>
+<script>
+  import { defineComponent, reactive } from 'vue';
+
+  import { Bk } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        objectSteps: [
+          { title: '测试一', icon: Bk, description: '这是描述' },
+          { title: '测试二', icon: 2, description: '这是描述2', status: 'error' },
+          { title: '测试三', icon: 3 },
+          { title: '测试四', disabled: true },
+        ],
+        curStep: 1,
+        controllable: true,
+      });
+
+      // 改变当前选中值
+      const stepChanged = index => {
+        state.curStep = index;
+      };
+      return {
+        state,
+        stepChanged,
+      };
+    },
+  });
+</script>
+<style>
+  .mb20 {
+    margin-bottom: 20px;
+  }
+</style>

package/knowledge/examples/steps/direction-demo.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="height: 400px">
+    <bk-steps
+      class="mb5"
+      :line-type="state.lineType"
+    />
+    <bk-steps direction="vertical" />
+  </div>
+</template>
+<script>
+  import { defineComponent, reactive } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        lineType: 'solid',
+      });
+      return {
+        state,
+      };
+    },
+  });
+</script>
+<style>
+  .mb5 {
+    margin-bottom: 5px;
+  }
+</style>

package/knowledge/examples/steps/index.tsx

@@ -0,0 +1,206 @@
+/*
+ * 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 ControllableDemo from './controllable-demo.vue';
+import CustomDemo from './custom-demo.vue';
+import DirectionDemo from './direction-demo.vue';
+import SizeDemo from './size-demo.vue';
+import StatusDemo from './status-demo.vue';
+import ThemeDemo from './theme-demo.vue';
+
+const stepsProps: IPropsTableItem[] = [
+  {
+    name: 'steps',
+    type: 'Array',
+    default: '--',
+    desc: '	组件步骤内容，有四个可选的key：title icon description status。',
+    optional: [],
+  },
+  {
+    name: 'cur-step',
+    type: 'Number',
+    default: '1',
+    desc: '当前步骤的索引值，从 1 开始',
+    optional: [],
+  },
+  {
+    name: 'direction',
+    type: 'String',
+    default: 'horizontal',
+    desc: '步骤条方向，支持水平（horizontal）和竖直（vertical）两种方向',
+    optional: ['horizontal', 'vertical'],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: '-',
+    desc: '指定大小，目前支持普通（不设置）和小尺寸（small）',
+    optional: ['small'],
+  },
+  {
+    name: 'line-type',
+    type: 'String',
+    default: '-',
+    desc: '连线样式',
+    optional: ['solid', 'dashed'],
+  },
+  {
+    name: 'status',
+    type: 'String',
+    default: '-',
+    desc: '指定当前步骤状态，不指定则为默认状态（是否完成）',
+    optional: ['error', 'loading'],
+  },
+  {
+    name: 'controllable',
+    type: 'Boolean',
+    default: '-',
+    desc: '步骤可否被控制前后跳转',
+    optional: ['false'],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'primary',
+    desc: '组件的主题色',
+    optional: ['primary', 'success', 'warning', 'danger'],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '-',
+    desc: '配置自定义样式类名，传入的类会被加在组件最外层的 DOM .bk-steps 上',
+    optional: [],
+  },
+  {
+    name: 'before-change',
+    type: 'Function(nextStep)',
+    default: '-',
+    desc: '步骤切换前的钩子函数，支持异步函数',
+    optional: [],
+  },
+];
+const stepsEvents: IPropsTableItem[] = [
+  {
+    name: 'click',
+    type: 'Function',
+    default: '回调参数（变化后的步骤 index）',
+    desc: '当前步骤变化时的回调',
+    optional: [],
+  },
+];
+export default defineComponent({
+  name: 'Steps',
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Steps步骤条，用于步骤类的场景组件'
+          designLink='https://bkdesign.bk.tencent.com/design/148'
+          link={`${import.meta.env.VITE_APP_BASE_URL ?? ''}/steps`}
+          name='Steps步骤条'
+        />
+        <DemoBox
+          componentName='steps'
+          demoName='base-demo'
+          desc='不传值时：默认选中第一个节点，颜色为蓝鲸主题色'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='steps'
+          demoName='size-demo'
+          desc='可以使用 size 属性来定义尺寸，可接受 small'
+          title='小尺寸'
+        >
+          <SizeDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='steps'
+          demoName='theme-demo'
+          desc='可以通过 theme 属性来定义主题'
+          title='设置主题'
+        >
+          <ThemeDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='steps'
+          demoName='controllable-demo'
+          desc='可以通过 controllable为true 属性来使组件每个步骤可点击'
+          title='可点击'
+        >
+          <ControllableDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='steps'
+          demoName='direction-demo'
+          desc='可以通过 direction属性来设置组件排列方式，可接受horizontal，vertical，默认为horizontal。指定 line-type 值为 solid 显示为实线'
+          title='垂直方向和实线'
+        >
+          <DirectionDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='steps'
+          demoName='status-demo'
+          desc='使用 status 属性设置当前步骤状态为错误或加载中，分别对应 error、loading 值，清空则还原为默认状态'
+          title='错误和加载中状态'
+        >
+          <StatusDemo />
+        </DemoBox>
+
+        <DemoBox
+          componentName='steps'
+          demoName='custom-demo'
+          desc='配置 steps 参数，具体内容参考下方属性表格'
+          title='自定义步骤内容'
+        >
+          <CustomDemo />
+        </DemoBox>
+
+        <PropsBox
+          propsData={stepsProps}
+          subtitle=''
+          title='属性'
+        />
+        <PropsBox
+          propsData={stepsEvents}
+          subtitle=''
+          title='事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/steps/size-demo.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <bk-steps size="small" />
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <bk-steps
+      class="mb20"
+      :cur-step="2"
+      status="error"
+    />
+
+    <bk-steps
+      class="mb20"
+      :cur-step="2"
+      status="loading"
+    />
+  </div>
+</template>
+<style>
+  .mb20 {
+    margin-bottom: 20px;
+  }
+</style>

package/knowledge/examples/steps/theme-demo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <bk-steps
+      class="mb20"
+      theme="primary"
+    />
+    <bk-steps
+      class="mb20"
+      theme="success"
+    />
+    <bk-steps
+      class="mb20"
+      theme="warning"
+    />
+    <bk-steps
+      class="mb20"
+      theme="danger"
+    />
+  </div>
+</template>
+<style>
+  .mb20 {
+    margin-bottom: 20px;
+  }
+</style>

package/knowledge/examples/steps.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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 BkSteps from '@bkui-vue/steps';
+
+export default defineComponent({
+  name: 'SiteSteps',
+  setup() {
+    const state = reactive({
+      objectSteps: [
+        { title: '测试一', description: '这是描述' },
+        { title: '测试二', description: '这是描述2' },
+        { title: '测试三' },
+        { title: '测试四' },
+      ],
+      curStep: 2,
+    });
+
+    // 改变当前选中值
+    const stepChanged = (index: number) => {
+      state.curStep = index;
+    };
+
+    // 步骤切换前的钩子函数，支持异步函数
+    const beforeChangeFunc = (index: number) => {
+      const promise = new Promise(reslove => {
+        setTimeout(() => {}, 1000);
+
+        reslove(index);
+      });
+      promise.then(res => {
+        console.log('res', res);
+      });
+      return promise;
+    };
+
+    return {
+      state,
+      stepChanged,
+      beforeChangeFunc,
+    };
+  },
+  render() {
+    // const stepsSlots = {
+    //   1: () => <span><Eye /></span>,
+    //   2: () => <span><Error /></span>,
+    //   3: () => <span><Help /></span>,
+    // };
+    // {stepsSlots}
+    return (
+      <div style='height: 400px;'>
+        <BkSteps
+          style={{ marginBottom: '40px' }}
+          controllable={true}
+          cur-step={this.state.curStep}
+          status='error'
+          theme='success'
+        ></BkSteps>
+        <BkSteps
+          style={{ marginBottom: '40px' }}
+          cur-step={2}
+          theme='danger'
+        ></BkSteps>
+        <BkSteps
+          style={{ marginBottom: '40px' }}
+          cur-step={2}
+          size='small'
+          theme='warning'
+        ></BkSteps>
+        <BkSteps
+          beforeChange={this.beforeChangeFunc}
+          controllable={true}
+          cur-step={this.state.curStep}
+          direction='vertical'
+          size='small'
+          steps={this.state.objectSteps}
+          onClick={this.stepChanged}
+        ></BkSteps>
+      </div>
+    );
+  },
+});

package/knowledge/examples/swiper/base-demo.vue

@@ -0,0 +1,24 @@
+<template>
+  <bk-swiper
+    class="swiper"
+    :height="400"
+    :loop-time="6000"
+    :pics="picList"
+  />
+</template>
+
+<script setup>
+  import firstSwiper from '../../imgs/firstswiper.jpg';
+  import secondSwiper from '../../imgs/secondswiper.jpg';
+
+  const picList = [
+    { url: firstSwiper, link: 'https://www.npmjs.com/package/bkui-vue' },
+    { url: secondSwiper },
+    { url: firstSwiper, link: 'https://www.npmjs.com/package/bkui-vue' },
+    { url: secondSwiper },
+    { url: firstSwiper, link: 'https://www.npmjs.com/package/bkui-vue' },
+    { url: secondSwiper },
+    { url: firstSwiper, link: 'https://www.npmjs.com/package/bkui-vue' },
+    { url: secondSwiper },
+  ];
+</script>

package/knowledge/examples/swiper/index.tsx

@@ -0,0 +1,135 @@
+/*
+ * 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 BaseDemo from './base-demo.vue';
+import SlotDemo from './slot-demo.vue';
+
+const swiperPropsJson: IPropsTableItem[] = [
+  {
+    name: 'is-loop',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否自动轮询',
+    optional: [],
+  },
+  {
+    name: 'loop-time',
+    type: 'Number',
+    default: '8000',
+    desc: '自动轮询间隔时间',
+    optional: [],
+  },
+  {
+    name: 'pics',
+    type: 'Array',
+    default: '[]',
+    desc: '图片列表，[{ link: String, url: String, color: String, class: String }]',
+    optional: [],
+  },
+  {
+    name: 'list',
+    type: 'Array',
+    default: '[]',
+    desc: '数据列表，配合 slot 使用',
+    optional: [],
+  },
+  {
+    name: 'height',
+    type: 'Number',
+    default: '父元素高度',
+    desc: '轮播图高度，如果不传将使用父元素高度',
+    optional: [],
+  },
+  {
+    name: 'width',
+    type: 'Number',
+    default: '父元素宽度',
+    desc: '轮播图宽度，如果不传将使用父元素宽度',
+    optional: [],
+  },
+];
+
+const swiperEventJson: IPropsTableItem[] = [
+  {
+    name: 'index-change',
+    type: 'Function',
+    default: '',
+    desc: '轮播索引发生变化时回调函数',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {},
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='在多个面板之间切换'
+          name='Swiper 轮播'
+        />
+
+        <DemoBox
+          componentName='swiper'
+          demoName='base-demo'
+          desc='通过传递 pics 或者 list 属性，来直接展示图片。通过 loop-time 控制轮播间隔时间。通过 height 控制轮播图高度'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='swiper'
+          demoName='slot-demo'
+          desc='通过传递 pics 或者 list 属性传递数据，通过 default 作用域插槽自定义显示内容'
+          subtitle=''
+          title='通过 Slot 自定义显示内容'
+        >
+          <SlotDemo></SlotDemo>
+        </DemoBox>
+
+        <PropsBox
+          propsData={swiperPropsJson}
+          subtitle=''
+          title='Swiper 属性'
+        />
+
+        <PropsBox
+          propsData={swiperEventJson}
+          subtitle=''
+          title='Swiper 事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/swiper/slot-demo.vue

@@ -0,0 +1,18 @@
+<template>
+  <bk-swiper
+    class="swiper"
+    :height="200"
+    :is-loop="false"
+    :list="list"
+  >
+    <template #default="item">
+      <div style="text-align: center">
+        {{ item }}
+      </div>
+    </template>
+  </bk-swiper>
+</template>
+
+<script setup>
+  const list = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6'];
+</script>

package/knowledge/examples/switcher/base-demo.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <bk-switcher v-model="demo1" />
+    <bk-switcher
+      v-model="demo1"
+      show-text
+    />
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSwitcher from '@bkui-vue/switcher';
+
+  export default defineComponent({
+    name: 'SiteBkSwitcher',
+    components: {
+      BkSwitcher,
+    },
+    setup() {
+      const demo1 = ref(true);
+      return {
+        demo1,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .bk-switcher {
+    margin-right: 10px;
+  }
+</style>