@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/affix/index.tsx

@@ -0,0 +1,165 @@
+/*
+ * 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 { type IPropsTableItem } from '../../typings';
+import DemoAffix from './demo/affix.vue';
+import DemoAffixBottom from './demo/affix-bottom.vue';
+import DemoAffixCallback from './demo/affix-callback.vue';
+import DemoAffixContainer from './demo/affix-container.vue';
+import DemoAffixTop from './demo/affix-top.vue';
+import DemoAffixZIndex from './demo/affix-z-index.vue';
+
+const affixProps: IPropsTableItem[] = [
+  {
+    name: 'offset-top',
+    type: 'Number',
+    default: 0,
+    desc: '距离窗口顶部达到指定偏移量后触发',
+    optional: [],
+  },
+  {
+    name: 'offset-bottom',
+    type: 'Number',
+    default: undefined,
+    desc: '距离窗口底部达到指定偏移量后触发',
+    optional: [],
+  },
+  {
+    name: 'z-index',
+    type: 'Number',
+    default: 1000,
+    desc: '设置 affix 对象的层级',
+    optional: [],
+  },
+  {
+    name: 'target',
+    type: 'String',
+    default: 'window',
+    desc: '设置 affix 需要监听其滚动事件的容器的选择器',
+    optional: [],
+  },
+];
+
+const affixEvents: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'Function',
+    default: '-',
+    desc: '在固定状态发生改变时触发，回调参数为 true 或 false',
+    optional: [],
+  },
+];
+
+const affixSlots: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Slot',
+    default: '-',
+    desc: '默认插槽，用于放置需要固定的内容',
+    optional: [],
+  },
+];
+export default defineComponent({
+  name: 'Affix',
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='使用图钉，可以将内容固定在屏幕上，并且不随页面的滚动而滚动。'
+          name='Affix图钉'
+        />
+        <DemoBox
+          componentName='affix'
+          demoName='demo/affix'
+          desc='不传值时：默认直接固定在最顶端'
+          title='基础用法'
+        >
+          <DemoAffix />
+        </DemoBox>
+        <DemoBox
+          componentName='affix'
+          demoName='demo/affix-top'
+          desc='设置offset-top属性'
+          title='固定在顶部'
+        >
+          <DemoAffixTop />
+        </DemoBox>
+        <DemoBox
+          componentName='affix'
+          demoName='demo/affix-z-index'
+          desc='设置z-index属性，设置affix对象的层级'
+          title='对象层级'
+        >
+          <DemoAffixZIndex />
+        </DemoBox>
+        <DemoBox
+          componentName='affix'
+          demoName='demo/affix-bottom'
+          desc='设置offset-bottom属性, offset-top和offset-bottom只可以设置一个，如果都设置会使用offset-bottom'
+          title='固定在底部'
+        >
+          <DemoAffixBottom />
+        </DemoBox>
+        <DemoBox
+          componentName='affix'
+          demoName='demo/affix-callback'
+          desc='设置on-change属性，固定状态改变时的回调'
+          title='固定状态改变时的回调'
+        >
+          <DemoAffixCallback />
+        </DemoBox>
+        <DemoBox
+          componentName='affix'
+          demoName='demo/affix-container'
+          desc='设置target属性，target为需要监听其滚动事件容器的id，默认为 window。'
+          title='设置滚动容器'
+        >
+          <DemoAffixContainer />
+        </DemoBox>
+        <PropsBox
+          propsData={affixProps}
+          subtitle=''
+          title='Affix 属性'
+        />
+        <PropsBox
+          propsData={affixEvents}
+          subtitle=''
+          title='Affix 事件'
+        />
+        <PropsBox
+          propsData={affixSlots}
+          subtitle=''
+          title='Affix 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/alert/demo/alert-close-text.vue

@@ -0,0 +1,38 @@
+<template>
+  <bk-alert
+    close-text="继续努力"
+    theme="success"
+    title="成功的提示文字"
+    closable
+  />
+  <bk-alert
+    close-text="下次见！"
+    theme="info"
+    title="消息的提示文字"
+    closable
+  >
+    <template #close>
+      <BkButton
+        theme="primary"
+        text
+      >
+        下次见！
+      </BkButton>
+    </template>
+  </bk-alert>
+  <bk-alert
+    close-text="删掉"
+    theme="warning"
+    title="警告的提示文字"
+    closable
+  />
+</template>
+<script setup>
+  import BkAlert from '@bkui-vue/alert';
+  import BkButton from '@bkui-vue/button';
+</script>
+<style lang="postcss">
+  .bk-alert ~ .bk-alert {
+    margin-top: 20px;
+  }
+</style>

package/knowledge/examples/alert/demo/alert-close.vue

@@ -0,0 +1,30 @@
+<template>
+  <bk-alert
+    theme="success"
+    title="成功的提示文字"
+    closable
+  />
+  <bk-alert
+    theme="info"
+    title="消息的提示文字"
+    closable
+  />
+  <bk-alert
+    theme="warning"
+    title="警告的提示文字"
+    closable
+  />
+  <bk-alert
+    theme="error"
+    title="错误的提示文字"
+    closable
+  />
+</template>
+<script setup>
+  import BkAlert from '@bkui-vue/alert';
+</script>
+<style lang="postcss">
+  .bk-alert ~ .bk-alert {
+    margin-top: 20px;
+  }
+</style>

package/knowledge/examples/alert/demo/alert-show-icon.vue

@@ -0,0 +1,30 @@
+<template>
+  <bk-alert
+    :show-icon="false"
+    theme="success"
+    title="成功的提示文字"
+  />
+  <bk-alert
+    :show-icon="false"
+    theme="info"
+    title="消息的提示文字"
+  />
+  <bk-alert
+    :show-icon="false"
+    theme="warning"
+    title="警告的提示文字"
+  />
+  <bk-alert
+    :show-icon="false"
+    theme="error"
+    title="错误的提示文字"
+  />
+</template>
+<script setup>
+  import BkAlert from '@bkui-vue/alert';
+</script>
+<style lang="postcss">
+  .bk-alert ~ .bk-alert {
+    margin-top: 20px;
+  }
+</style>

package/knowledge/examples/alert/demo/alert.vue

@@ -0,0 +1,26 @@
+<template>
+  <bk-alert
+    theme="success"
+    title="成功的提示文字"
+  />
+  <bk-alert
+    theme="info"
+    title="消息的提示文字"
+  />
+  <bk-alert
+    theme="warning"
+    title="警告的提示文字"
+  />
+  <bk-alert
+    theme="error"
+    title="错误的提示文字"
+  />
+</template>
+<script setup>
+  import BkAlert from '@bkui-vue/alert';
+</script>
+<style lang="postcss">
+  .bk-alert ~ .bk-alert {
+    margin-top: 20px;
+  }
+</style>

package/knowledge/examples/alert/index.tsx

@@ -0,0 +1,171 @@
+/*
+ * 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 { type IPropsTableItem } from '../../typings';
+import DemoAlert from './demo/alert.vue';
+import DemoAlertClose from './demo/alert-close.vue';
+import DemoAlertCloseText from './demo/alert-close-text.vue';
+import DemoAlertShowIcon from './demo/alert-show-icon.vue';
+
+const alertProps: IPropsTableItem[] = [
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'info',
+    desc: '主题',
+    optional: ['info', 'success', 'warning', 'error'],
+  },
+  {
+    name: 'title',
+    type: 'String',
+    default: '',
+    desc: '标题',
+    optional: [],
+  },
+  {
+    name: 'closable',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否可以关闭',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'close-text',
+    type: 'String',
+    default: '',
+    desc: '自定义关闭按钮文案',
+    optional: [],
+  },
+  {
+    name: 'show-icon',
+    type: 'Boolean',
+    default: '',
+    desc: '是否显示ICON',
+    optional: [],
+  },
+];
+
+const alertEvents: IPropsTableItem[] = [
+  {
+    name: 'close',
+    type: 'Function',
+    default: '',
+    desc: '关闭事件',
+    optional: [],
+  },
+];
+
+const alertSlots: IPropsTableItem[] = [
+  {
+    name: 'title',
+    type: '',
+    default: '',
+    desc: '',
+    optional: [],
+  },
+  {
+    name: 'icon',
+    type: '',
+    default: '',
+    desc: '',
+    optional: [],
+  },
+  {
+    name: 'close',
+    type: '',
+    default: '',
+    desc: '',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  name: 'Alert',
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='展示页面的提示信息'
+          designLink='https://bkdesign.bk.tencent.com/design/46'
+          link={`${import.meta.env.VITE_APP_BASE_URL ?? ''}/alert`}
+          name='Alert'
+        />
+        <DemoBox
+          componentName='alert'
+          demoName='/demo/alert'
+          desc=''
+          title='基本用法'
+        >
+          <DemoAlert />
+        </DemoBox>
+        <DemoBox
+          componentName='alert'
+          demoName='/demo/alert-show-icon'
+          desc=''
+          title='不显示ICON'
+        >
+          <DemoAlertShowIcon />
+        </DemoBox>
+        <DemoBox
+          componentName='alert'
+          demoName='/demo/alert-close'
+          desc=''
+          title='可关闭'
+        >
+          <DemoAlertClose />
+        </DemoBox>
+        <DemoBox
+          componentName='alert'
+          demoName='/demo/alert-close-text'
+          desc=''
+          title='自定义关闭按钮文字'
+        >
+          <DemoAlertCloseText />
+        </DemoBox>
+        <PropsBox
+          propsData={alertProps}
+          subtitle=''
+          title='Alert 属性'
+        />
+        <PropsBox
+          propsData={alertEvents}
+          subtitle=''
+          title='Alert 事件'
+        />
+        <PropsBox
+          propsData={alertSlots}
+          subtitle=''
+          title='Alert 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/animate-number/base-demo.vue

@@ -0,0 +1,17 @@
+<template>
+  <bk-animate-number
+    :digits="2"
+    :value="numValue"
+  />
+  <bk-button @click="handleClick"> + </bk-button>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const numValue = ref(20.75);
+
+  const handleClick = () => {
+    numValue.value += 20;
+  };
+</script>

package/knowledge/examples/animate-number/index.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 animateNumberPropsJson: IPropsTableItem[] = [
+  {
+    name: 'value',
+    type: 'Number',
+    default: '0',
+    desc: '数字',
+    optional: [],
+  },
+  {
+    name: 'digits',
+    type: 'Number',
+    default: '0',
+    desc: '小数位',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {},
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='动态数字组件'
+          name='AnimateNumber 动态数字'
+        />
+
+        <DemoBox
+          componentName='animate-number'
+          demoName='base-demo'
+          desc='通过 value 设置初始值, 通过 digits 设置小数位。'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <PropsBox
+          propsData={animateNumberPropsJson}
+          subtitle=''
+          title='AnimateNumber 属性'
+        />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,4 @@
+<template>
+  滚动页面，滚动条超过40px后，按钮会出现在右下角
+  <bk-backtop target=".body-wrapper" />
+</template>

package/knowledge/examples/backtop/index.tsx

@@ -0,0 +1,102 @@
+/*
+ * 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 backtopPropsJson: IPropsTableItem[] = [
+  {
+    name: 'visibility-height',
+    type: 'Number',
+    default: 200,
+    desc: '滚动高度达到此参数值才出现 Backtop',
+    optional: [],
+  },
+  {
+    name: 'target',
+    type: 'String',
+    default: '',
+    desc: '触发滚动的对象，可以是选择器字符串',
+    optional: [],
+  },
+  {
+    name: 'right',
+    type: 'Number',
+    default: 40,
+    desc: 'Backtop 距离页面右侧的距离',
+    optional: [],
+  },
+  {
+    name: 'bottom',
+    type: 'Number',
+    default: 40,
+    desc: 'Backtop 距离页面底部的距离',
+    optional: [],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '',
+    desc: '自定义样式类名',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {},
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Backtop 回到页面顶部的操作按钮'
+          designLink='https://bkdesign.bk.tencent.com/design/162'
+          name='Backtop 回到顶部'
+        />
+
+        <DemoBox
+          componentName='backtop'
+          demoName='base-demo'
+          desc='向下滚动以显示按钮'
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <PropsBox
+          style='height: 1000px'
+          propsData={backtopPropsJson}
+          subtitle=''
+          title='Backtop 属性'
+        />
+      </div>
+    );
+  },
+});