@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/switcher/before-change-demo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <bk-switcher
+      v-model="loadingDemo"
+      :before-change="requestHandler"
+    />
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSwitcher from '@bkui-vue/switcher';
+
+  export default defineComponent({
+    name: 'SiteBkSwitcher',
+    components: {
+      BkSwitcher,
+    },
+    setup() {
+      const loadingDemo = ref(true);
+      const requestHandler = lastValue =>
+        new Promise(resolve => {
+          setTimeout(() => {
+            console.log(lastValue);
+            resolve();
+          }, 3000);
+        });
+
+      return {
+        loadingDemo,
+        requestHandler,
+      };
+    },
+  });
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="mb20 block">
+      <span class="mr20 f14">选中时禁用</span>
+      <bk-switcher
+        v-model="value1"
+        disabled
+      />
+      <bk-switcher
+        v-model="value1"
+        theme="primary"
+        disabled
+      />
+    </div>
+    <div class="mb20 block">
+      <span class="mr20 f14">未选中时禁用</span>
+      <bk-switcher
+        v-model="value2"
+        disabled
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSwitcher from '@bkui-vue/switcher';
+
+  export default defineComponent({
+    name: 'SiteBkSwitcher',
+    components: {
+      BkSwitcher,
+    },
+    setup() {
+      const value1 = ref(true);
+      const value2 = ref(false);
+      return {
+        value1,
+        value2,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .bk-switcher {
+    margin-right: 10px;
+  }
+
+  .mb20 {
+    margin-bottom: 20px;
+  }
+
+  .mr20 {
+    display: inline-block;
+    margin-right: 20px;
+  }
+
+  .f14 {
+    font-size: 14px;
+  }
+
+  .block {
+    display: block;
+    width: 100%;
+  }
+</style>

package/knowledge/examples/switcher/index.tsx

@@ -0,0 +1,261 @@
+/*
+ * 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 BeforeChangeDemo from './before-change-demo.vue';
+import DisabledDemo from './disabled-demo.vue';
+import SizeDemo from './size-demo.vue';
+import TextDemo from './text-demo.vue';
+import ThemeDemo from './theme-demo.vue';
+import TypeDemo from './type-demo.vue';
+
+const switcherPropsJson: IPropsTableItem[] = [
+  {
+    name: 'value',
+    type: 'String | Number | Boolean',
+    default: 'false',
+    desc: '是否打开',
+    optional: [],
+  },
+  {
+    name: 'model-value',
+    type: 'String | Number | Boolean',
+    default: false,
+    desc: '双向绑定的值',
+    optional: [],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'success',
+    desc: '开关的主题',
+    optional: ['primary', 'success'],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否禁用',
+    optional: [],
+  },
+  {
+    name: 'show-text',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示文本',
+    optional: [],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: '',
+    desc: '尺寸，显示文本时此属性无效',
+    optional: ['large', 'small'],
+  },
+  {
+    name: 'is-outline',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否为描边效果',
+    optional: [],
+  },
+  {
+    name: 'is-square',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否为方形效果',
+    optional: [],
+  },
+  {
+    name: 'true-value',
+    type: 'Boolean',
+    default: 'true',
+    desc: '表示开状态的值',
+    optional: [],
+  },
+  {
+    name: 'false-value',
+    type: 'Boolean',
+    default: 'false',
+    desc: '表示关状态的值',
+    optional: [],
+  },
+  {
+    name: 'on-text',
+    type: 'String',
+    default: 'ON',
+    desc: '打开状态显示的文本',
+    optional: [],
+  },
+  {
+    name: 'off-text',
+    type: 'String',
+    default: 'OFF',
+    desc: '关闭状态显示的文本',
+    optional: [],
+  },
+  {
+    name: 'before-change',
+    type: 'Function',
+    default: '',
+    desc: '状态切换的前置检测接收操作后的状态（lastValue），返回true，false，Promise',
+    optional: [],
+  },
+  {
+    name: 'with-validate',
+    type: 'Boolean',
+    default: true,
+    desc: '是否在切换时进行校验',
+    optional: [],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '',
+    desc: '自定义样式类名',
+    optional: [],
+  },
+];
+
+const switcherChangeJson: IPropsTableItem[] = [
+  {
+    name: 'update:modelValue',
+    type: 'Function',
+    default: '-',
+    desc: '更新 modelValue 的事件',
+    optional: [],
+  },
+  {
+    name: 'change',
+    type: 'Function',
+    default: '-',
+    desc: '状态发生变化时触发的事件',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {},
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='在两种状态之间的切换'
+          designLink='https://bkdesign.bk.tencent.com/design/118'
+          name='Switcher 开关'
+        />
+
+        <DemoBox
+          componentName='switcher'
+          demoName='base-demo'
+          desc='可以通过 value / v-model 属性来定义开关状态，'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='switcher'
+          demoName='size-demo'
+          desc='可以通过 size 属性来定义开关的尺寸，需要更大或更小尺寸时使用 large、small 值配置，不配置即为默认尺寸。当设置 show-text 时将显示为特定尺寸同时 size 将失效。'
+          subtitle=''
+          title='尺寸'
+        >
+          <SizeDemo></SizeDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='switcher'
+          demoName='theme-demo'
+          desc='可以通过 theme 属性来定义开关的主题'
+          subtitle=''
+          title='主题'
+        >
+          <ThemeDemo></ThemeDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='switcher'
+          demoName='disabled-demo'
+          desc='可以使用 disabled 属性来定义开关是否禁用，它接受一个 Boolean 值'
+          subtitle='不可用状态'
+          title='禁用状态'
+        >
+          <DisabledDemo></DisabledDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='switcher'
+          demoName='before-change-demo'
+          desc='可以通过 before-change 接收一个函数来做前置状态检测，返回 false状态切换失败；返回true状态切换成功；返回一个promise，resolve状态切换成功，reject状态切换失败'
+          subtitle=''
+          title='前置状态检测'
+        >
+          <BeforeChangeDemo></BeforeChangeDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='switcher'
+          demoName='text-demo'
+          desc='可以通过 onText/offText 来修改展示的文案'
+          subtitle=''
+          title='自定义文案'
+        >
+          <TextDemo></TextDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='switcher'
+          demoName='type-demo'
+          desc=''
+          subtitle=''
+          title='更多示例'
+        >
+          <TypeDemo></TypeDemo>
+        </DemoBox>
+
+        <PropsBox
+          propsData={switcherPropsJson}
+          subtitle=''
+          title='Switcher 属性'
+        />
+
+        <PropsBox
+          propsData={switcherChangeJson}
+          subtitle=''
+          title='Switcher 事件'
+        />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <bk-switcher
+      v-model="demo1"
+      size="large"
+    />
+    <bk-switcher v-model="demo1" />
+    <bk-switcher
+      v-model="demo1"
+      size="small"
+    />
+    <!-- 配置 show-text 时 size 失效 -->
+    <bk-switcher
+      v-model="demo1"
+      size="small"
+      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>

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <bk-switcher
+      v-model="demo1"
+      false-value="b"
+      true-value="a"
+      @change="handleChange"
+    />
+    <bk-switcher
+      v-model="demo1"
+      false-value="b"
+      off-text="假值"
+      true-value="a"
+      show-text
+      on-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('a');
+      const handleChange = value => {
+        console.log(value);
+      };
+      return {
+        demo1,
+        handleChange,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .bk-switcher {
+    margin-right: 10px;
+  }
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <bk-switcher
+      v-model="demo1"
+      theme="success"
+    />
+    <bk-switcher
+      v-model="demo1"
+      theme="primary"
+    />
+  </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>

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

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <bk-switcher
+      v-model="demo1"
+      :before-change="requestHandler"
+      theme="success"
+      is-outline
+    />
+    <bk-switcher
+      v-model="demo1"
+      :before-change="requestHandler"
+      size="large"
+      is-outline
+    />
+    <bk-switcher
+      v-model="demo1"
+      :before-change="requestHandler"
+      size="small"
+      is-outline
+    />
+
+    <bk-switcher
+      v-model="demo1"
+      :before-change="requestHandler"
+      theme="success"
+      is-outline
+      show-text
+    />
+    <bk-switcher
+      v-model="demo1"
+      :before-change="requestHandler"
+      size="large"
+      is-outline
+      show-text
+    />
+    <bk-switcher
+      v-model="demo1"
+      :before-change="requestHandler"
+      size="small"
+      is-outline
+      show-text
+    />
+
+    <div class="mt20">
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        theme="primary"
+        is-square
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        size="large"
+        theme="primary"
+        is-square
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        size="small"
+        theme="primary"
+        is-square
+      />
+
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        theme="primary"
+        is-square
+        show-text
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        size="large"
+        theme="primary"
+        is-square
+        show-text
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        size="small"
+        theme="primary"
+        is-square
+        show-text
+      />
+    </div>
+
+    <div class="mt20">
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        is-outline
+        is-square
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        size="large"
+        is-outline
+        is-square
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        size="small"
+        is-outline
+        is-square
+      />
+
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        is-outline
+        is-square
+        show-text
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        is-outline
+        is-square
+        show-text
+      />
+      <bk-switcher
+        v-model="demo1"
+        :before-change="requestHandler"
+        is-outline
+        is-square
+        show-text
+      />
+    </div>
+  </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);
+      const requestHandler = lastValue =>
+        new Promise(resolve => {
+          setTimeout(() => {
+            console.log(lastValue);
+            resolve();
+          }, 1000);
+        });
+
+      return {
+        demo1,
+        requestHandler,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .bk-switcher {
+    margin-right: 10px;
+  }
+
+  .mt20 {
+    margin-top: 20px;
+  }
+</style>

package/knowledge/examples/tab/demo-add.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <bk-tab
+      v-model:active="active"
+      type="card"
+      addable
+      closable
+      @add="addPanel"
+      @remove="removePanel"
+    >
+      <bk-tab-panel
+        v-for="(item, index) in panels"
+        :key="item.name"
+        :label="item.label"
+        :name="item.name"
+      >
+        {{ item.label }}-{{ index }}
+      </bk-tab-panel>
+    </bk-tab>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  const panels = ref([
+    { name: 'mission', label: '任务报表', count: 10 },
+    { name: 'config', label: '加速配置', count: 20 },
+    { name: 'history', label: '历史版本', count: 30 },
+    { name: 'deleted', label: '已归档加速任务', count: 40 },
+  ]);
+
+  const active = ref('mission');
+
+  const addPanel = () => {
+    const name = Math.random().toString(16).substring(4, 10);
+    panels.value.push({
+      name,
+      label: `新标签页-${name.substring(0, 4)}`,
+      count: 50,
+    });
+    active.value = name;
+  };
+
+  const removePanel = (index, panel) => {
+    console.log(panel);
+    panels.value.splice(index, 1);
+  };
+</script>