@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/exception/exception.tsx

@@ -0,0 +1,98 @@
+/*
+ * 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 PartDemo from './part-demo.vue';
+
+const props: IPropsTableItem[] = [
+  {
+    name: 'type',
+    type: 'String / Number',
+    desc: '异常类型',
+    optional: ['403', '404', '500', 'building', 'empty', 'search-empty'],
+    default: '404',
+  },
+  {
+    name: 'scene',
+    type: 'String',
+    desc: '异常类型',
+    optional: ['page（页面）', 'part（局部）'],
+    default: 'page',
+  },
+  {
+    name: 'title',
+    type: 'String',
+    desc: '异常 title',
+    optional: [],
+    default: '',
+  },
+  {
+    name: 'description',
+    type: 'String',
+    desc: '异常 description',
+    optional: [],
+    default: '',
+  },
+];
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc=''
+          name='Exception 异常提示'
+        />
+        <DemoBox
+          componentName='exception'
+          demoName='base-demo'
+          desc='配置 type 为异常类型 403、404、500、building、empty、search-empty，也可以不配置，默认为 404'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='exception'
+          demoName='part-demo'
+          desc='配置 scene 为使用场景为 part'
+          title='局部异常提示'
+        >
+          <PartDemo />
+        </DemoBox>
+        <PropsBox
+          propsData={props}
+          subtitle=''
+          title='属性'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/exception/part-demo.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      @click="isGray = !isGray"
+    >
+      切换{{ !isGray ? '灰色' : '白色' }}背景
+    </bk-button>
+  </div>
+  <div class="exception-wrap">
+    <bk-exception
+      class="exception-wrap-item exception-part"
+      :class="{ 'exception-gray': isGray }"
+      description="你没有相应业务的访问权限，请前往申请相关业务权限"
+      scene="part"
+      title="没有权限"
+      type="403"
+    >
+      <bk-button
+        theme="primary"
+        text
+      >
+        去申请
+      </bk-button>
+    </bk-exception>
+    <bk-exception
+      class="exception-wrap-item exception-part"
+      :class="{ 'exception-gray': isGray }"
+      description="没有数据"
+      scene="part"
+      type="empty"
+    />
+  </div>
+  <div class="exception-wrap">
+    <bk-exception
+      class="exception-wrap-item exception-part"
+      :class="{ 'exception-gray': isGray }"
+      description="服务维护中"
+      scene="part"
+      type="500"
+    />
+    <bk-exception
+      class="exception-wrap-item exception-part"
+      :class="{ 'exception-gray': isGray }"
+      description="搜索为空"
+      scene="part"
+      type="search-empty"
+    />
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import BkException from '@bkui-vue/exception';
+  const isGray = ref(false);
+</script>
+<style>
+  .exception-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -10px;
+  }
+
+  .exception-wrap .exception-wrap-item {
+    height: 420px;
+    padding-top: 22px;
+    margin: 10px;
+    border: 1px solid #dcdee5;
+  }
+
+  .exception-wrap-item.exception-part {
+    height: 260px;
+    padding-top: 48px;
+    flex: 1;
+  }
+
+  .exception-wrap-item.exception-gray {
+    background-color: #f5f6fa;
+  }
+</style>

package/knowledge/examples/exception.tsx

@@ -0,0 +1,147 @@
+/*
+ * 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 BkButton from '@bkui-vue/button';
+import BkException from '@bkui-vue/exception';
+
+export default defineComponent({
+  name: 'SiteException',
+  setup() {
+    const type = ref('404');
+    function handleClick() {
+      console.log('button click');
+      type.value = '500';
+    }
+    return {
+      type,
+      handleClick,
+    };
+  },
+  render() {
+    return (
+      <div>
+        <div
+          style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'
+          onClick={this.handleClick}
+        >
+          <BkException
+            scene='page'
+            type={this.type}
+          ></BkException>
+        </div>
+        <div style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='page'
+            type='403'
+          ></BkException>
+        </div>
+        <div style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='page'
+            type='500'
+          ></BkException>
+        </div>
+        <div style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='page'
+            type='building'
+          ></BkException>
+        </div>
+        <div style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='page'
+            type='empty'
+          ></BkException>
+        </div>
+        <div style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='page'
+            type='search-empty'
+          ></BkException>
+        </div>
+        <div style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='page'
+            type='login'
+          ></BkException>
+        </div>
+        <div style='min-height: 300px; padding: 10px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='page'
+            type='login'
+          >
+            <div class='slot-default'>
+              <div>这里是描述</div>
+              <BkButton>走你</BkButton>
+            </div>
+          </BkException>
+        </div>
+        <div style='display: flex; height: auto; padding: 20px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='part'
+            type='404'
+          ></BkException>
+          <BkException
+            scene='part'
+            type='403'
+          ></BkException>
+        </div>
+        <div style='display: flex; height: auto; padding: 20px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='part'
+            type='500'
+          ></BkException>
+          <BkException
+            scene='part'
+            type='building'
+          ></BkException>
+        </div>
+        <div style='display: flex; height: auto; padding: 20px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='part'
+            type='empty'
+          ></BkException>
+          <BkException
+            scene='part'
+            type='search-empty'
+          ></BkException>
+        </div>
+        <div style='display: flex; height: auto; padding: 20px 0; border: 1px solid #dcdcdc; margin: 10px 0;'>
+          <BkException
+            scene='part'
+            type='login'
+          ></BkException>
+          <BkException
+            scene='part'
+            type='login'
+          ></BkException>
+        </div>
+      </div>
+    );
+  },
+});

package/knowledge/examples/fixed-navbar/base-demo.vue

@@ -0,0 +1,29 @@
+<template>
+  <bk-switcher v-model="show" />
+  <bk-fixed-navbar
+    v-model="show"
+    :nav-items="navItems"
+  />
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  const navItems = [
+    {
+      icon: '',
+      text: '联系',
+      tooltip: '可以通过腾讯蓝鲸QQ联系我们',
+      action: () => {
+        window.open('http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzgwMDgwMjAwMV80NDMwOTZfODAwODAyMDAxXzJf');
+      },
+    },
+    {
+      icon: '',
+      text: '反馈',
+      action: () => {
+        window.open('https://bk.tencent.com/s-mart/community?page=1&keyword=%255BMagicBox%255D&sort=latest');
+      },
+    },
+  ];
+  const show = ref(true);
+</script>

package/knowledge/examples/fixed-navbar/index.tsx

@@ -0,0 +1,151 @@
+/*
+ * 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';
+
+const fixedNavBarPropsJson: IPropsTableItem[] = [
+  {
+    name: 'nav-items',
+    type: 'Array',
+    default: [],
+    desc: '需要固定展示的元素',
+    optional: [],
+  },
+  {
+    name: 'position',
+    type: 'String',
+    default: 'middle',
+    desc: '位置，可以分别设置为上、中、下的位置',
+    optional: ['top', 'middle', 'bottom'],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '',
+    desc: '自定义样式',
+    optional: [],
+  },
+  {
+    name: 'model-value',
+    type: 'Boolean',
+    default: true,
+    desc: '控制 FixedNavbar 的显示与隐藏',
+    optional: [],
+  },
+];
+
+const fixedItemPropsJson: IPropsTableItem[] = [
+  {
+    name: 'icon',
+    type: 'String',
+    default: '',
+    desc: '元素的icon',
+    optional: [],
+  },
+  {
+    name: 'text',
+    type: 'String',
+    default: '',
+    desc: '元素的显示的文字',
+    optional: [],
+  },
+  {
+    name: 'action',
+    type: 'Function',
+    default: '() => {}',
+    desc: '元素点击的回调函数',
+    optional: [],
+  },
+  {
+    name: 'tooltip',
+    type: 'Object',
+    default: '{ disabled: true }',
+    desc: '用于自定义鼠标悬浮内容的配置',
+    optional: [],
+  },
+];
+
+const fixedNavBarEventsJson: IPropsTableItem[] = [
+  {
+    name: 'update:modelValue',
+    type: 'Function',
+    default: '-',
+    desc: '当 modelValue 变化时触发的事件',
+    optional: [],
+  },
+  {
+    name: 'click',
+    type: 'Function',
+    default: '-',
+    desc: '当点击某个导航项时触发的事件',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <>
+        <DemoTitle
+          desc='FixedNavbar 悬浮导航组件，快速设置右侧悬浮面板'
+          designLink='https://bkdesign.bk.tencent.com/design/163'
+          name='FixedNavbar 悬浮导航'
+        />
+
+        <DemoBox
+          componentName='fixed-navbar'
+          demoName='base-demo'
+          desc='悬浮导航在右侧展示'
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <PropsBox
+          propsData={fixedNavBarPropsJson}
+          subtitle=''
+          title='FixedNavbar 属性'
+        />
+        <PropsBox
+          propsData={fixedItemPropsJson}
+          subtitle=''
+          title='NavItems 属性'
+        />
+        <PropsBox
+          propsData={fixedNavBarEventsJson}
+          subtitle=''
+          title='FixedNavbar 事件'
+        />
+      </>
+    );
+  },
+});

package/knowledge/examples/form/demo/compose-form-item.vue

@@ -0,0 +1,46 @@
+<template>
+  <bk-compose-form-item>
+    <bk-input
+      placeholder="请输入"
+      clearable
+    />
+    <bk-select>
+      <bk-option
+        label="本科以下"
+        value="1"
+      />
+      <bk-option
+        label="本科以上"
+        value="2"
+      />
+    </bk-select>
+    <bk-input
+      placeholder="请输入"
+      type="number"
+    />
+    <bk-tag-input
+      style="width: 100px"
+      :list="list"
+    />
+    <bk-date-picker />
+  </bk-compose-form-item>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import { BkComposeFormItem } from '@bkui-vue/form';
+  import BkInput from '@bkui-vue/input';
+  import BkSelect, { BkOption } from '@bkui-vue/select';
+
+  const list = ref([
+    { id: 'shenzhen', name: '深圳' },
+    { id: 'guangzhou', name: '广州' },
+    { id: 'beijing', name: '北京' },
+    { id: 'shanghai', name: '上海' },
+    { id: 'hangzhou', name: '杭州' },
+    { id: 'nanjing', name: '南京' },
+    { id: 'chongqing', name: '重庆' },
+    { id: 'taibei', name: '台北' },
+    { id: 'haikou', name: '海口' },
+  ]);
+</script>

package/knowledge/examples/form/demo/form-description.vue

@@ -0,0 +1,63 @@
+<template>
+  <bk-form class="example">
+    <bk-form-item
+      description="中文名"
+      label="姓名"
+    >
+      <bk-input
+        placeholder="请输入"
+        clearable
+      />
+    </bk-form-item>
+    <bk-form-item label="性别">
+      <bk-radio-group>
+        <bk-radio label="男" />
+        <bk-radio label="女" />
+      </bk-radio-group>
+    </bk-form-item>
+    <bk-form-item
+      description="常用联系方式"
+      label="联系方式"
+    >
+      <bk-checkbox-group>
+        <bk-checkbox label="QQ" />
+        <bk-checkbox label="微信" />
+        <bk-checkbox label="Email" />
+      </bk-checkbox-group>
+    </bk-form-item>
+    <bk-form-item label="学历">
+      <bk-select>
+        <bk-option
+          label="本科以下"
+          value="1"
+        />
+        <bk-option
+          label="本科以上"
+          value="2"
+        />
+      </bk-select>
+    </bk-form-item>
+    <bk-form-item label="介绍">
+      <bk-input
+        placeholder="请输入"
+        type="textarea"
+      />
+    </bk-form-item>
+    <bk-form-item style="margin-top: 32px">
+      <bk-button theme="primary"> 提交 </bk-button>
+    </bk-form-item>
+  </bk-form>
+</template>
+<script setup>
+  import BkButton from '@bkui-vue/button';
+  import BkCheckbox, { BkCheckboxGroup } from '@bkui-vue/checkbox';
+  import BkForm, { BkFormItem } from '@bkui-vue/form';
+  import BkInput from '@bkui-vue/input';
+  import BkRadio, { BkRadioGroup } from '@bkui-vue/radio';
+  import BkSelect, { BkOption } from '@bkui-vue/select';
+</script>
+<style lang="postcss" scoped>
+  .example {
+    max-width: 800px;
+  }
+</style>