@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/breadcrumb/index.tsx

@@ -0,0 +1,215 @@
+/*
+ * 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 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 PrefixDemo from './prefix-demo.vue';
+import SeparatorDemo from './separator-demo.vue';
+
+const breadcrumbPropsJson: IPropsTableItem[] = [
+  {
+    name: 'separator',
+    type: 'String',
+    default: "斜杠'/'",
+    desc: '分隔符',
+    optional: [],
+  },
+  {
+    name: 'separator-class',
+    type: 'String',
+    default: '',
+    desc: '图标分隔符 class',
+    optional: [],
+  },
+  {
+    name: 'back-router',
+    type: 'String/Object',
+    default: '',
+    desc: '点击回退按钮自定义的路由(路由跳转对象，同 vue-router 的 to)',
+    optional: [],
+  },
+  {
+    name: 'replace',
+    type: 'Boolean',
+    default: 'false',
+    desc: '开启backRouter并使用默认的icon跳转时，是否替换当前路由历史',
+    optional: [],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '',
+    desc: '自定义样式类名',
+    optional: [],
+  },
+];
+
+const breadcrumbSlotJson: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Function',
+    default: '',
+    desc: '默认插槽，放置 BreadcrumbItem 组件',
+    optional: [],
+  },
+  {
+    name: 'prefix',
+    type: 'Slot',
+    default: '-',
+    desc: '插槽，用于替换默认回退按钮',
+    optional: [],
+  }
+];
+
+const breadcrumbItemPropsJson: IPropsTableItem[] = [
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '',
+    desc: '自定义样式类名',
+    optional: [],
+  },
+  {
+    name: 'to',
+    type: 'String | Object',
+    default: '',
+    desc: '点击后跳转的链接，可以是一个路径或一个描述目标位置的对象',
+    optional: [],
+  },
+  {
+    name: 'replace',
+    type: 'Boolean',
+    default: false,
+    desc: '是否替换当前的历史记录',
+    optional: [],
+  },
+];
+
+const breadcrumbItemEvents: IPropsTableItem[] = [
+  {
+    name: 'click',
+    type: 'Function',
+    default: '-',
+    desc: '点击事件自身的回调函数',
+    optional: [],
+  },
+];
+
+const breadcrumbItemSlots: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Slot',
+    default: '-',
+    desc: '默认插槽，放置面包屑项的内容',
+    optional: [],
+  },
+  {
+    name: 'separator',
+    type: 'Slot',
+    default: '-',
+    desc: '自定义分隔符插槽',
+    optional: [],
+  },
+];
+export default defineComponent({
+  setup() {
+    const separator = ref('/');
+    const list = [
+      { title: '首页', link: { path: '/' } },
+      { title: '进度条', link: { path: 'loading' } },
+      { title: '滑块开关', link: { path: 'switcher' } },
+      { title: '面包屑', link: null },
+    ];
+    return {
+      list,
+      separator,
+    };
+  },
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Breadcrumb组件， 显示当前页面的路径，快速返回之前的任意页面。'
+          link='https://www.google.com.hk/'
+          name='Breadcrumb 面包屑'
+        />
+
+        <DemoBox
+          componentName='breadcrumb'
+          demoName='base-demo'
+          desc='通过设置 BkBreadcrumbItem 的 to 属性添加跳转链接。'
+          subtitle='垂直菜单，子菜单内嵌在菜单区域。'
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='breadcrumb'
+          demoName='separator-demo'
+          desc='通过设置 BkBreadcrumb 的 separator 属性设置分隔符，他可以是字符串或者是slot'
+          subtitle='通过自定义 字符串 如：> | / 分割。'
+          title='字符分割'
+        >
+          <SeparatorDemo></SeparatorDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='breadcrumb'
+          demoName='prefix-demo'
+          desc='通过设置 BkBreadcrumb 的 back-router 属性（和router参数一样）添加返回跳转链接，也可以使用slot自定义返回区域的内容。'
+          subtitle='增加前置插槽快速返回'
+          title='支持返回配置以及前置插槽'
+        >
+          <PrefixDemo></PrefixDemo>
+        </DemoBox>
+
+        <PropsBox
+          propsData={breadcrumbPropsJson}
+          subtitle=''
+          title='Breadcrumb 属性'
+        />
+        <PropsBox
+          propsData={breadcrumbSlotJson}
+          subtitle=''
+          title='Breadcrumb 插槽'
+        />
+        <PropsBox
+          propsData={breadcrumbItemPropsJson}
+          subtitle=''
+          title='Breadcrumb Item 属性'
+        />
+        <PropsBox propsData={breadcrumbItemEvents} subtitle='' title='Breadcrumb Item 事件' />
+        <PropsBox propsData={breadcrumbItemSlots} subtitle='' title='Breadcrumb Item 插槽' />
+      </div>
+    );
+  },
+});

package/knowledge/examples/breadcrumb/prefix-demo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <bk-breadcrumb :back-router="{ path: '/' }">
+      <bk-breadcrumb-item
+        v-for="(item, index) in list"
+        :key="index"
+        :to="item.link"
+      >
+        {{ item.title }}
+      </bk-breadcrumb-item>
+    </bk-breadcrumb>
+    <bk-breadcrumb style="margin-top: 10px">
+      <bk-breadcrumb-item
+        v-for="(item, index) in list"
+        :key="index"
+        :to="item.link"
+      >
+        {{ item.title }}
+      </bk-breadcrumb-item>
+      <template #prefix>
+        <angle-left @click="goBack" />
+      </template>
+    </bk-breadcrumb>
+  </div>
+</template>
+<script>
+  import { defineComponent, getCurrentInstance, ref } from 'vue';
+
+  import { BkBreadcrumb, BkBreadcrumbItem } from '@bkui-vue/breadcrumb';
+  import { AngleLeft } from 'bkui-vue/lib/icon';
+
+  export default defineComponent({
+    name: 'SiteBreadcrumb',
+    components: {
+      BkBreadcrumb,
+      BkBreadcrumbItem,
+      AngleLeft,
+    },
+    setup() {
+      const separator = ref('/');
+      const list = [
+        { title: '首页', link: { path: '/' } },
+        { title: '进度条', link: { path: 'loading' } },
+        { title: '滑块开关', link: { path: 'switcher' } },
+        { title: '面包屑', link: null },
+      ];
+      const { appContext } = getCurrentInstance();
+      const { $router } = appContext.config.globalProperties;
+      const goBack = () => {
+        $router.push({ path: '/' });
+      };
+      return {
+        list,
+        separator,
+        goBack,
+      };
+    },
+  });
+</script>

package/knowledge/examples/breadcrumb/separator-demo.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div style="margin-bottom: 10px">
+      分割符：<bk-input
+        style="width: 200px"
+        v-model="separator"
+        clearable
+      />
+    </div>
+    <bk-breadcrumb :separator="separator">
+      <bk-breadcrumb-item
+        v-for="(item, index) in list"
+        :key="index"
+        :to="item.link"
+      >
+        {{ item.title }}
+      </bk-breadcrumb-item>
+      <bk-breadcrumb-item :to="{ path: 'switcher' }">
+        <span>自定义separator</span>
+        <template #separator>
+          <span style="margin: 0px 9px">slot</span>
+        </template>
+      </bk-breadcrumb-item>
+      <bk-breadcrumb-item>
+        <a
+          href="https://magicbox.bk.tencent.com/static_api/v3/main/index.html"
+          target="_blank"
+          >MagicBox</a
+        >
+      </bk-breadcrumb-item>
+    </bk-breadcrumb>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import { BkBreadcrumb, BkBreadcrumbItem } from '@bkui-vue/breadcrumb';
+  import BkInput from '@bkui-vue/input';
+
+  export default defineComponent({
+    name: 'SiteBreadcrumb',
+    components: {
+      BkBreadcrumb,
+      BkBreadcrumbItem,
+      BkInput,
+    },
+    setup() {
+      const separator = ref('/');
+      const list = [
+        { title: '首页', link: { path: '/' } },
+        { title: '进度条', link: { path: 'loading' } },
+        { title: '滑块开关', link: { path: 'switcher' } },
+        { title: '面包屑', link: null },
+      ];
+      const list1 = [{ title: 'MagicBox', link: null }];
+      return {
+        list,
+        list1,
+        separator,
+      };
+    },
+  });
+</script>

package/knowledge/examples/button/demo/basic.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="basic-button-list">
+    <bk-button> 基础按钮 </bk-button>
+    <bk-button
+      class="ml10"
+      theme="primary"
+    >
+      主要按钮
+    </bk-button>
+  </div>
+</template>
+
+<style lang="postcss">
+  .basic-button-list {
+    display: flex;
+  }
+
+  .ml10 {
+    margin-left: 10px;
+  }
+</style>

package/knowledge/examples/button/demo/disabled.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="disabled-button-list">
+    <bk-button
+      class="ml10"
+      disabled
+    >
+      基础按钮
+    </bk-button>
+    <bk-button
+      class="ml10"
+      theme="primary"
+      disabled
+    >
+      主要按钮
+    </bk-button>
+  </div>
+</template>

package/knowledge/examples/button/demo/group.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="button-group-list">
+    <div class="mb10">
+      <bk-button-group size="small">
+        <bk-button
+          :selected="selected === '北京'"
+          @click="handleSelected('北京')"
+        >
+          北京
+        </bk-button>
+        <bk-button
+          :selected="selected === '上海'"
+          disabled
+          @click="handleSelected('上海')"
+        >
+          上海
+        </bk-button>
+        <bk-button
+          :selected="selected === '广州'"
+          @click="handleSelected('广州')"
+        >
+          广州
+        </bk-button>
+        <bk-button
+          :selected="selected === '深圳'"
+          disabled
+          @click="handleSelected('深圳')"
+        >
+          深圳
+        </bk-button>
+        <bk-button
+          :selected="selected === '其他'"
+          @click="handleSelected('其他')"
+        >
+          其他
+          <angle-down class="f20" />
+        </bk-button>
+      </bk-button-group>
+    </div>
+
+    <div class="mb10">
+      <bk-button-group>
+        <bk-button
+          :selected="selected === '北京'"
+          @click="handleSelected('北京')"
+        >
+          北京
+        </bk-button>
+        <bk-button
+          :selected="selected === '上海'"
+          @click="handleSelected('上海')"
+        >
+          上海
+        </bk-button>
+        <bk-button
+          :selected="selected === '广州'"
+          @click="handleSelected('广州')"
+        >
+          广州
+        </bk-button>
+        <bk-button
+          :selected="selected === '深圳'"
+          @click="handleSelected('深圳')"
+        >
+          深圳
+        </bk-button>
+        <bk-button
+          :selected="selected === '其他'"
+          @click="handleSelected('其他')"
+        >
+          其他
+          <angle-down class="f22" />
+        </bk-button>
+      </bk-button-group>
+    </div>
+
+    <div>
+      <bk-button-group size="large">
+        <bk-button
+          :selected="selected === '北京'"
+          @click="handleSelected('北京')"
+        >
+          北京
+        </bk-button>
+        <bk-button
+          :selected="selected === '上海'"
+          @click="handleSelected('上海')"
+        >
+          上海
+        </bk-button>
+        <bk-button
+          :selected="selected === '广州'"
+          @click="handleSelected('广州')"
+        >
+          广州
+        </bk-button>
+        <bk-button
+          :selected="selected === '深圳'"
+          @click="handleSelected('深圳')"
+        >
+          深圳
+        </bk-button>
+        <bk-button
+          :selected="selected === '其他'"
+          @click="handleSelected('其他')"
+        >
+          其他
+          <angle-down class="f24" />
+        </bk-button>
+      </bk-button-group>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { AngleDown } from 'bkui-vue/lib/icon';
+  const selected = ref('深圳');
+  function handleSelected(v) {
+    selected.value = v;
+  }
+</script>
+
+<style lang="postcss">
+  .mb10 {
+    margin-bottom: 10px;
+  }
+
+  .f20 {
+    font-size: 20px;
+  }
+
+  .f22 {
+    font-size: 22px;
+  }
+
+  .f24 {
+    font-size: 24px;
+  }
+</style>

package/knowledge/examples/button/demo/icon.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="basic-button-list">
+    <bk-button>
+      <plus class="f22" />
+      新增
+    </bk-button>
+    <bk-button
+      class="ml10"
+      theme="primary"
+    >
+      下拉
+      <angle-down class="f22" />
+    </bk-button>
+    <bk-button class="ml10">
+      <search class="f22" />
+    </bk-button>
+    <bk-button
+      class="ml10"
+      theme="primary"
+      circle
+    >
+      <search class="f22" />
+    </bk-button>
+    <bk-button class="ml10">
+      <loading
+        class="mr6"
+        mode="spin"
+        size="mini"
+        loading
+      />
+      loading
+    </bk-button>
+    <bk-button
+      class="ml10"
+      loading
+    />
+    <bk-button
+      class="ml10"
+      theme="primary"
+      loading
+    />
+    <bk-button
+      class="ml10"
+      loading-mode="spin"
+      loading
+    />
+    <bk-button
+      class="ml10"
+      loading-mode="spin"
+      theme="primary"
+      loading
+    />
+  </div>
+</template>
+
+<script setup>
+  import { Loading } from 'bkui-vue';
+  import { AngleDown, Plus, Search } from 'bkui-vue/lib/icon';
+</script>
+
+<style lang="postcss">
+  .ml10 {
+    margin-left: 10px;
+  }
+
+  .mr6 {
+    margin-right: 6px;
+  }
+
+  .f22 {
+    font-size: 22px;
+  }
+</style>

package/knowledge/examples/button/demo/loading-button.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="basic-button-list">
+    <bk-button loading />
+    <bk-button
+      class="ml10"
+      theme="primary"
+      loading
+    />
+    <bk-button
+      class="ml10"
+      theme="success"
+      loading
+    />
+    <bk-button
+      class="ml10"
+      theme="warning"
+      loading
+    />
+    <bk-button
+      class="ml10"
+      theme="danger"
+      loading
+    />
+    <bk-button
+      class="ml10"
+      loading-mode="spin"
+      theme="danger"
+      loading
+    />
+  </div>
+</template>

package/knowledge/examples/button/demo/mouse-hover.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="basic-button-list">
+    <bk-button hover-theme="primary"> primary </bk-button>
+    <bk-button
+      class="ml10"
+      hover-theme="success"
+    >
+      success
+    </bk-button>
+    <bk-button
+      class="ml10"
+      hover-theme="warning"
+    >
+      warning
+    </bk-button>
+    <bk-button
+      class="ml10"
+      hover-theme="danger"
+    >
+      danger
+    </bk-button>
+  </div>
+</template>
+
+<style lang="postcss">
+  .ml10 {
+    margin-left: 10px;
+  }
+</style>

package/knowledge/examples/button/demo/outline.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="basic-button-list">
+    <bk-button outline> 反色按钮 </bk-button>
+    <bk-button
+      class="ml10"
+      theme="primary"
+      outline
+    >
+      反色按钮
+    </bk-button>
+  </div>
+</template>
+
+<style lang="postcss">
+  .ml10 {
+    margin-left: 10px;
+  }
+</style>