@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/sideslider/before-close-demo.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      text
+      @click="handleOpen"
+    >
+      打开侧栏
+    </bk-button>
+
+    <bk-sideslider
+      v-model:isShow="isShow"
+      :before-close="beforeClose"
+      title="我是标题"
+    >
+      hello world!!!
+    </bk-sideslider>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import InfoBox from '@bkui-vue/info-box';
+
+  const isShow = ref(false);
+
+  const beforeClose = () =>
+    new Promise((resolve, reject) => {
+      InfoBox({
+        title: '确认关闭?',
+        infoType: 'warning',
+        onConfirm: () => resolve(true),
+        onCancel: () => reject(),
+      });
+    });
+
+  const handleOpen = () => {
+    isShow.value = true;
+  };
+</script>

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

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      text
+      @click="handleRight"
+    >
+      右侧
+    </bk-button>
+    <bk-button
+      style="margin-left: 10px"
+      theme="primary"
+      text
+      @click="handleLeft"
+    >
+      左侧
+    </bk-button>
+
+    <bk-sideslider
+      v-model:isShow="isShowRight"
+      title="我是标题"
+      quick-close
+      transfer
+    >
+      right
+    </bk-sideslider>
+    <bk-sideslider
+      v-model:isShow="isShowLeft"
+      direction="left"
+      title="我是标题"
+      quick-close
+      transfer
+    >
+      left
+    </bk-sideslider>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const isShowRight = ref(false);
+  const isShowLeft = ref(false);
+
+  const handleRight = () => {
+    isShowRight.value = true;
+  };
+
+  const handleLeft = () => {
+    isShowLeft.value = true;
+  };
+</script>

package/knowledge/examples/sideslider/footer-demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      text
+      @click="handleOpen"
+    >
+      自定义footer
+    </bk-button>
+    <bk-sideslider
+      v-model:isShow="isShow"
+      title="我是自定义标题"
+      quick-close
+    >
+      <template #default>
+        <div :style="{ height: `${contentHeight}px` }" />
+      </template>
+      <template #footer>
+        <bk-button
+          theme="primary"
+          @click="contentHeight = 1000"
+        >
+          设置内容高度1000px
+        </bk-button>
+        <bk-button
+          style="margin-left: 8px"
+          @click="contentHeight = 400"
+        >
+          设置内容高度400px
+        </bk-button>
+      </template>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script setup>
+  import { defineComponent, ref } from 'vue';
+
+  const isShow = ref(false);
+  const contentHeight = ref(400);
+
+  const handleOpen = () => {
+    isShow.value = true;
+  };
+</script>

package/knowledge/examples/sideslider/index.tsx

@@ -0,0 +1,248 @@
+/*
+ * 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 BeforeCloseDemo from './before-close-demo.vue';
+import DirectionDemo from './direction-demo.vue';
+import FooterDemo from './footer-demo.vue';
+import TitleDemo from './title-demo.vue';
+
+const SideSliserPropsJson: IPropsTableItem[] = [
+  {
+    name: 'is-show',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示组件，支持v-model写法',
+    optional: [],
+  },
+  {
+    name: 'title',
+    type: 'String',
+    default: [],
+    desc: '自定义组件的标题',
+    optional: [],
+  },
+
+  {
+    name: 'width',
+    type: 'Number',
+    default: '400',
+    desc: '组件的宽度',
+    optional: [],
+  },
+  {
+    name: 'direction',
+    type: 'String',
+    default: 'right',
+    desc: '组件滑出的方向',
+    optional: ['left', 'right'],
+  },
+  {
+    name: 'esc-close',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否允许 esc 按键关闭弹框',
+    optional: [],
+  },
+  {
+    name: 'show-mask',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否允许出现遮罩',
+    optional: [],
+  },
+  {
+    name: 'quick-close',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否允许点击遮罩关闭弹框',
+    optional: [],
+  },
+  {
+    name: 'transfer',
+    type: 'Boolean',
+    default: 'false',
+    desc: '控制 sidslider 是否出现在 body 内',
+    optional: ['false', 'true', 'DOM 选择器'],
+  },
+  {
+    name: 'zIndex',
+    type: 'Number',
+    default: '',
+    desc: '设置侧栏的z-index值，在transfer为true的情况下，改值会自动+1',
+    optional: [],
+  },
+  {
+    name: 'backgroundColor',
+    type: 'String',
+    default: '',
+    desc: '内容区背景颜色',
+  },
+  {
+    name: 'render-directive',
+    type: 'String',
+    default: 'if',
+    desc: '弹框的渲染方式',
+    optional: ['if', 'show'],
+  },
+  {
+    name: 'before-close',
+    type: 'Function',
+    default: '',
+    desc: '关闭前的钩子函数',
+    optional: [],
+  },
+];
+
+const SideSliserEventJson: IPropsTableItem[] = [
+  {
+    name: 'closed',
+    type: '',
+    default: null,
+    desc: '组件关闭',
+  },
+  {
+    name: 'shown',
+    type: '',
+    default: null,
+    desc: '显示组件后的回调函数',
+  },
+  {
+    name: 'hidden',
+    type: '',
+    default: null,
+    desc: '关闭组件后的回调函数',
+  },
+  {
+    name: 'animation-end',
+    type: '',
+    default: null,
+    desc: '关闭组件后动画结束的回调函数',
+  },
+];
+
+const SideSliserSlotJson: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Function',
+    default: null,
+    desc: '默认插槽',
+    optional: [],
+  },
+  {
+    name: 'header',
+    type: 'Function',
+    default: null,
+    desc: '头部插槽',
+    optional: [],
+  },
+  {
+    name: 'footer',
+    type: 'Function',
+    default: null,
+    desc: '底部插槽',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Sideslider组件， 提供一个从两侧滑入的组件，供用户填写/查看更多信息。'
+          name='Sideslider侧栏'
+        />
+        <DemoBox
+          componentName='sideslider'
+          demoName='base-demo'
+          desc='使用默认配置的组件'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='sideslider'
+          demoName='before-close-demo'
+          desc='配置 before-close参数，点击遮罩关闭组件前会执行before-close函数'
+          subtitle=''
+          title='关闭前确认'
+        >
+          <BeforeCloseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='sideslider'
+          demoName='direction-demo'
+          desc='配置 direction参数，配置组件滑出的方向'
+          subtitle=''
+          title='显示方向'
+        >
+          <DirectionDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='sideslider'
+          demoName='title-demo'
+          desc='配置title参数和添加slot'
+          subtitle=''
+          title='自定义标题和内容'
+        >
+          <TitleDemo></TitleDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='sideslider'
+          demoName='footer-demo'
+          desc='配置footer插槽，footer插槽内容会随着高度的变化而变化'
+          subtitle=''
+          title='自定义footer'
+        >
+          <FooterDemo></FooterDemo>
+        </DemoBox>
+        <PropsBox
+          propsData={SideSliserPropsJson}
+          subtitle=''
+          title='Sideslider 属性'
+        />
+        <PropsBox
+          propsData={SideSliserEventJson}
+          subtitle=''
+          title='Sideslider 事件'
+        />
+        <PropsBox
+          propsData={SideSliserSlotJson}
+          subtitle=''
+          title='Sideslider 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/sideslider/sideslider.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 Button from '@bkui-vue/button';
+import Sideslider from '@bkui-vue/sideslider';
+export default defineComponent({
+  name: 'Sideslider',
+  setup() {
+    const isShow = ref(false);
+    const handleOpenSlider = () => {
+      isShow.value = !isShow.value;
+    };
+    // const sleep = ms => new Promise((resolve) => {
+    //   setTimeout(() => {
+    //     resolve(true);
+    //   }, ms);
+    // });
+    const handleCloseBefore = async () => {
+      console.log('关闭前触发');
+      // await sleep(3000);
+      return true;
+    };
+    const handleHidden = () => {
+      console.log('关闭后触发');
+    };
+    const handleShown = () => {
+      console.log('显示后触发');
+    };
+    const handleAnimationEnd = () => {
+      console.log('动画结束后触发');
+    };
+    function handleChange() {
+      console.log(123);
+    }
+    return {
+      handleOpenSlider,
+      handleCloseBefore,
+      handleHidden,
+      handleShown,
+      handleAnimationEnd,
+      handleChange,
+      isShow,
+    };
+  },
+  render() {
+    const sideSliderSlot = {
+      default: () => <div style='height: 1200px;width: 80px;'>我是内容</div>,
+      footer: () => <div>我是尾部asjdjas</div>,
+    };
+    return (
+      <div>
+        <Button
+          theme='primary'
+          onClick={this.handleOpenSlider}
+        >
+          测试
+        </Button>
+        <Sideslider
+          width='500'
+          extCls='custom-sideslider'
+          v-model={[this.isShow, 'isShow']}
+          beforeClose={this.handleCloseBefore}
+          direction='right'
+          quickClose={true}
+          scrollable={true}
+          showMask={true}
+          title='我是自定义标题'
+          transfer={true}
+          onAnimationEnd={this.handleAnimationEnd}
+          // @ts-ignore
+          onChange={this.handleChange}
+          onHidden={this.handleHidden}
+          onShown={this.handleShown}
+        >
+          {sideSliderSlot}
+        </Sideslider>
+      </div>
+    );
+  },
+});

package/knowledge/examples/sideslider/title-demo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      text
+      @click="handleOpen"
+    >
+      自定义标题和内容
+    </bk-button>
+    <bk-sideslider
+      v-model:isShow="isShow"
+      title="我是自定义标题"
+    >
+      <template #default>
+        <div style="height: 1200px">我是自定义内容</div>
+      </template>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const isShow = ref(false);
+
+  const handleOpen = () => {
+    isShow.value = true;
+  };
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="demo">
+    <div>
+      <bk-slider
+        v-model="demo1"
+        show-tip
+      />
+    </div>
+    <div :style="{ marginTop: '30px' }">
+      <bk-slider
+        v-model="demo2"
+        range
+      />
+    </div>
+    <div :style="{ marginTop: '30px' }">
+      <bk-slider
+        v-model="demo3"
+        disable
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSlider from '@bkui-vue/slider';
+
+  export default defineComponent({
+    name: 'SiteBkSlider',
+    components: {
+      BkSlider,
+    },
+    setup() {
+      const demo1 = ref(20);
+      const demo2 = ref([5, 20]);
+      const demo3 = ref(10);
+      return {
+        demo1,
+        demo2,
+        demo3,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .demo {
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="demo">
+    <div :style="{ margin: '0 10px 30px 10px' }">
+      <bk-slider
+        v-model="demo1"
+        :custom-content="customContent"
+        :step="20"
+        show-tip
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSlider from '@bkui-vue/slider';
+
+  export default defineComponent({
+    name: 'SiteBkSlider',
+    components: {
+      BkSlider,
+    },
+    setup() {
+      const demo1 = ref(20);
+      const customContent = {
+        0: {
+          label: '糟糕',
+        },
+        20: {
+          label: '一般',
+        },
+        40: {
+          label: '还行',
+          tip: '还行勉勉强强',
+        },
+        60: {
+          label: '满意',
+        },
+        80: {
+          label: '很好',
+        },
+        100: {
+          label: '非常满意',
+        },
+      };
+      return {
+        demo1,
+        customContent,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .demo {
+    width: 100%;
+  }
+</style>

package/knowledge/examples/slider/input-demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="demo">
+    <div>
+      <bk-slider
+        v-model="demo1"
+        show-input
+      />
+    </div>
+    <div :style="{ marginTop: '30px' }">
+      <bk-slider
+        v-model="demo2"
+        :min-value="-100"
+        range
+        show-input
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkSlider from '@bkui-vue/slider';
+
+  export default defineComponent({
+    name: 'SiteBkSlider',
+    components: {
+      BkSlider,
+    },
+    setup() {
+      const demo1 = ref(20);
+      const demo2 = ref([5, 20]);
+      const demo3 = ref(10);
+      return {
+        demo1,
+        demo2,
+        demo3,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .demo {
+    width: 100%;
+  }
+</style>