@blueking/bkui-knowledge 0.0.1-beta.1

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

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <bk-tab
+      v-model:active="active"
+      :before-change="beforeChange"
+      type="unborder-card"
+    >
+      <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 beforeChange = () => {
+    // args: name
+    // 如果需要控制change，这里处理返回值
+    // return name === 'config'
+  };
+</script>

package/knowledge/examples/tab/demo-border-card.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <bk-tab
+      v-model:active="active"
+      type="border-card"
+    >
+      <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');
+</script>

package/knowledge/examples/tab/demo-card-grid.vue

@@ -0,0 +1,29 @@
+<template>
+  <div style="background: #f5f7fa; padding: 10px 20px">
+    <bk-tab
+      v-model:active="active"
+      type="card-grid"
+    >
+      <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');
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <div style="padding: 10px 20px; background: #f5f7fa">
+    <bk-tab
+      v-model:active="active"
+      type="card-tab"
+    >
+      <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');
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div style="margin-bottom: 15px">
+      <bk-select v-model="currentType">
+        <bk-option
+          v-for="item in type"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
+      </bk-select>
+    </div>
+    <bk-tab
+      v-model:active="active"
+      :type="currentType"
+    >
+      <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 currentType = ref('card');
+  const type = ref(['card', 'card-tab', 'border-card', 'unborder-card', 'vertical-card', 'card-grid']);
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <bk-tab
+      v-model:active="active"
+      type="card"
+      sortable
+    >
+      <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');
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <bk-tab
+      v-model:active="active"
+      type="card"
+      addable
+    >
+      <template #add>
+        <div @click="addPanel">+ 新增</div>
+      </template>
+      <template #setting>
+        <div style="margin: 0 10px">设置</div>
+      </template>
+
+      <bk-tab-panel
+        v-for="(item, index) in panels"
+        :key="index"
+        :label="item.label"
+        :name="item.name"
+      >
+        <template #label>
+          <div>自定义标签：{{ index }}---{{ item.name }}</div>
+        </template>
+        <template #panel>
+          <div>自定义内容:{{ item.label }}</div>
+        </template>
+      </bk-tab-panel>
+    </bk-tab>
+  </div>
+</template>
+<script setup>
+  import { ref, onMounted } 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;
+  };
+
+  onMounted(() => {
+    setTimeout(() => {
+      panels.value[0] = { name: 'mission111', label: '任务报表1111', count: 102 };
+    }, 5000);
+  });
+</script>

package/knowledge/examples/tab/demo-jsx.tsx

@@ -0,0 +1,196 @@
+/*
+ * 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, ref } from 'vue';
+
+import { CogShape } from '@bkui-vue/icon/';
+import { BkTab, BkTabPanel } from '@bkui-vue/tab';
+
+export default defineComponent({
+  name: 'TabDemo',
+  setup() {
+    const active = ref('mission');
+    const panels = ref([
+      { name: 'mission', label: '任务报表', count: 10 },
+      { name: 'config', label: '加速配置', count: 20 },
+      { name: 'history', label: '历史版本', count: 30 },
+      { name: 'deleted', label: '已归档加速任务', count: 40 },
+    ]);
+    return {
+      active,
+      panels,
+    };
+  },
+  methods: {
+    tabChange(name: string) {
+      console.log(name);
+    },
+    changeActive(name: string) {
+      this.active = name;
+    },
+    addPanel() {
+      const name = Math.random().toString(16).substring(4, 10);
+      this.panels.push({
+        name,
+        label: `新标签页-${name.substring(0, 4)}`,
+        count: 50,
+      });
+      this.active = name;
+    },
+    removePanel(index, panel) {
+      console.log(panel);
+      this.panels.splice(index, 1);
+    },
+    tabSort(dragStartIndex, index) {
+      console.log(dragStartIndex, index);
+    },
+    tabDrag(index, $event) {
+      console.log(index, $event);
+    },
+  },
+  render() {
+    const slots = {
+      add: () => <div onClick={this.addPanel}> +&nbsp;新增</div>,
+      setting: () => (
+        <div style='margin: 0 10px'>
+          <CogShape />
+        </div>
+      ),
+    };
+    const panels = this.panels.map((item, index) => (
+      <BkTabPanel
+        key={index}
+        label={item.label}
+        name={item.name}
+      >
+        {item.label}-{index}
+      </BkTabPanel>
+    ));
+    return (
+      <div style='text-align:left;'>
+        <div class='mt40'>
+          <h2>基础用法</h2>
+          <div class='mb20'>基础的、简洁的标签页。</div>
+          <BkTab
+            v-model={[this.active, 'active']}
+            type='unborder-card'
+          >
+            {panels}
+          </BkTab>
+          <button
+            class='mt20'
+            onClick={() => this.changeActive('history')}
+          >
+            {' '}
+            更改为：history
+          </button>
+        </div>
+        <div class='mt40'>
+          <h2>选项卡样式</h2>
+          <div class='mb20'>基础的、简洁的标签页。</div>
+          <BkTab
+            v-model={[this.active, 'active']}
+            type='card'
+          >
+            {panels}
+          </BkTab>
+        </div>
+        <div class='mt40'>
+          <h2>卡片样式</h2>
+          <div class='mb20'>基础的、简洁的标签页。</div>
+          <BkTab
+            v-model={[this.active, 'active']}
+            type='border-card'
+          >
+            {panels}
+          </BkTab>
+        </div>
+        <div class='mt40'>
+          <h2>垂直居左-基础样式</h2>
+          <div class='mb20'>left</div>
+          <BkTab
+            v-model={[this.active, 'active']}
+            tabPosition='left'
+          >
+            {panels}
+          </BkTab>
+        </div>
+        <div class='mt40'>
+          <h2>垂直居右-基础样式</h2>
+          <div class='mb20'>right</div>
+          <BkTab
+            v-model={[this.active, 'active']}
+            tabPosition='right'
+            onAdd={this.addPanel}
+          >
+            {panels}
+          </BkTab>
+        </div>
+        <div class='mt40'>
+          <h2>拖动</h2>
+          <div class='mb20'>排序</div>
+          <BkTab
+            v-model={[this.active, 'active']}
+            sortable
+          >
+            {panels}
+          </BkTab>
+        </div>
+        <div class='mt40'>
+          <h2>自定义内容</h2>
+          <div class='mb20'>slot用法</div>
+          <BkTab
+            v-model={[this.active, 'active']}
+            v-slots={slots}
+            addable
+            closable
+            onAdd={this.addPanel}
+          >
+            {this.panels.map((item, index) => (
+              <BkTabPanel
+                key={index}
+                v-slots={{
+                  label: () => (
+                    <div>
+                      {index}---{item.name}
+                    </div>
+                  ),
+                  panel: () => (
+                    <div>
+                      tab内容：{index}---{item.name}
+                    </div>
+                  ),
+                }}
+                label={item.label}
+                name={item.name}
+              />
+            ))}
+          </BkTab>
+        </div>
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <h3 class="demo-number-title">文字数字</h3>
+    <bk-tab
+      v-model:active="active"
+      type="unborder-card"
+      @change="handleChange"
+    >
+      <bk-tab-panel
+        v-for="(item, index) in panels"
+        :closable="true"
+        :key="item.name"
+        :label="item.label"
+        :name="item.name"
+        :num="item.count"
+        :num-display-type="bracketDisplayType"
+      >
+        {{ item.label }}-{{ index }}
+      </bk-tab-panel>
+    </bk-tab>
+    <h3 class="demo-number-title">标签数字</h3>
+    <div style="padding: 10px 20px; background: #f5f7fa">
+      <bk-tab
+        v-model:active="active"
+        type="card-tab"
+      >
+        <bk-tab-panel
+          v-for="(item, index) in panels"
+          :key="item.name"
+          :label="item.label"
+          :name="item.name"
+          :num="item.count"
+        >
+          {{ item.label }}-{{ index }}
+        </bk-tab-panel>
+      </bk-tab>
+    </div>
+    <bk-tab
+      v-model:active="active"
+      tab-position="left"
+      type="card"
+    >
+      <bk-tab-panel
+        v-for="(item, index) in panels"
+        :key="item.name"
+        :label="item.label"
+        :name="item.name"
+        :num="item.count"
+        :num-display-type="ellipticDisplayType"
+      >
+        {{ item.label }}-{{ index }}
+      </bk-tab-panel>
+    </bk-tab>
+    <bk-tab
+      v-model:active="active"
+      tab-position="right"
+      type="card"
+    >
+      <bk-tab-panel
+        v-for="(item, index) in panels"
+        :key="item.name"
+        :label="item.label"
+        :name="item.name"
+        :num="item.count"
+        :num-display-type="squareDisplayType"
+      >
+        {{ item.label }}-{{ index }}
+      </bk-tab-panel>
+    </bk-tab>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  const active = ref('mission');
+  // 数字显示默认提供三种格式bracket(文字数字)、square(方形tag)、elliptic(椭圆tag), 传空就是普通文字数字
+  const bracketDisplayType = ref('bracket');
+  const squareDisplayType = ref('square');
+  const ellipticDisplayType = ref('elliptic');
+  let panels = ref([
+    { name: 'mission', label: '任务报表', count: 10 },
+    { name: 'config', label: '加速配置加速配置加速配置加速配置加速配置', count: 20 },
+    { name: 'history', label: '历史版本', count: 30 },
+    { name: 'deleted', label: '已归档加速任务', count: 40 },
+  ]);
+  const handleChange = payload => {
+    console.log(payload);
+  };
+</script>
+
+<style>
+  .demo-number-title {
+    font-size: 14px;
+  }
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <h3>垂直居左-基础样式</h3>
+    <bk-tab
+      v-model:active="active"
+      tab-position="left"
+      type="card"
+    >
+      <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>
+    <h3>垂直居右-基础样式</h3>
+    <bk-tab
+      v-model:active="active"
+      tab-position="right"
+      type="card"
+    >
+      <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');
+</script>