@blueking/bkui-knowledge 0.0.1-beta.1

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

@@ -0,0 +1,93 @@
+<template>
+  <ul class="icon-list">
+    <li
+      v-for="(icon, name) in Icons"
+      class="icon-list-item"
+      :key="name"
+      @mousedown="handleCopyIcon(name)"
+    >
+      <component
+        class="item-icon"
+        :is="icon"
+      />
+      <span class="item-name">{{ name }}</span>
+    </li>
+  </ul>
+</template>
+<script setup>
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+  import { Message } from 'bkui-vue';
+  import * as IconModule from 'bkui-vue/lib/icon';
+  import ClipboardJS from 'clipboard';
+  const Icons = Object.keys(IconModule).reduce((pre, name) => {
+    pre[name.replace(/([A-Z]+)/gm, (_, match, offset) => `${offset < 1 ? '' : '-'}${match.toLowerCase()}`)] =
+      IconModule[name];
+    return pre;
+  }, {});
+  const activeCode = ref('');
+  let copyInstance;
+  onMounted(() => {
+    copyInstance = new ClipboardJS('.icon-list-item', {
+      text: () => activeCode.value,
+    });
+    ['success', 'error'].forEach(theme => {
+      copyInstance.on(theme, () =>
+        Message({
+          theme,
+          message: theme === 'success' ? `复制成功 ${activeCode.value}` : '复制失败',
+        }),
+      );
+    });
+  });
+  onBeforeUnmount(() => {
+    copyInstance?.destroy();
+  });
+  const handleCopyIcon = name => {
+    activeCode.value = `<${name}/>`;
+  };
+</script>
+<style lang="less">
+  .icon-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: auto;
+
+    &-item {
+      display: flex;
+      width: calc(12.5% - 4px);
+      height: 70px;
+      margin: 10px 2px;
+      transition: all 0.3s ease-in-out;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .item-icon {
+        font-size: 26px;
+        transition: all 0.3s ease-in-out;
+      }
+
+      &:hover {
+        color: white;
+        cursor: pointer;
+        background-color: #3a84ff;
+        border-radius: 2px;
+
+        .item-icon {
+          transform: scale(1.4);
+        }
+      }
+
+      .item-name {
+        max-width: 100%;
+        margin-top: 6px;
+        overflow: hidden;
+        font-size: 12px;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+</style>

package/knowledge/examples/icon/import-demo.vue

@@ -0,0 +1,12 @@
+<template>
+  <AngleDoubleLeftLine class="angle-left" />
+</template>
+<script setup>
+import { AngleDoubleLeftLine } from 'bkui-vue/lib/icon';
+</script>
+<style lang="less">
+.angle-left {
+  color: red;
+  font-size: 24px;
+}
+</style>

package/knowledge/examples/icon/index.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 ImportDemo from './import-demo.vue';
+
+const menuProps: IPropsTableItem[] = [
+  {
+    name: 'width',
+    type: 'String',
+    default: '1em',
+    desc: 'svg元素的宽度',
+    optional: [],
+  },
+  {
+    name: 'height',
+    type: 'String',
+    default: [],
+    desc: 'svg元素的高度',
+    optional: [],
+  },
+  {
+    name: 'fill',
+    type: 'String',
+    default: 'currentColor',
+    desc: 'svg元素的填充颜色',
+    optional: [],
+  },
+];
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Icon组件， 可以通过组件的使用方式按需加载。'
+          designLink='https://bkdesign.bk.tencent.com/design/5'
+          name='Icon'
+        />
+        <DemoBox
+          componentName='icon'
+          demoName='base-demo'
+          desc='点击复制使用Icon组件'
+          subtitle='这里展示了我们UI所用到的所有Icon, 点击复制使用'
+          title='Icon展示'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='icon'
+          demoName='import-demo'
+          desc='使用单个icon'
+          subtitle='如何导入单个icon使用'
+          title='ICON使用'
+        >
+          <ImportDemo />
+        </DemoBox>
+        <PropsBox propsData={menuProps} />
+      </div>
+    );
+  },
+});

package/knowledge/examples/info-box/align-demo.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      @click="handleShow"
+    >
+      提示框
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import InfoBox from '@bkui-vue/info-box';
+
+  const handleShow = () => {
+    InfoBox({
+      title: '左对齐 title',
+      content: '集中 centen',
+      headerAlign: 'left',
+      contentAlign: 'center',
+      footerAlign: 'right',
+      onConfirm() {
+        console.log('删除成功');
+      },
+      onCancel() {
+        console.log('删除失败');
+      },
+    });
+  };
+</script>

package/knowledge/examples/info-box/base-demo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      @click="handleDefault1"
+    >
+      提示框
+    </bk-button>
+    <bk-button
+      style="margin-left: 15px"
+      theme="primary"
+      @click="handleDefault2"
+    >
+      提示框2
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import InfoBox from '@bkui-vue/info-box';
+
+  const handleDefault1 = () => {
+    InfoBox({
+      title: '确认要删除？',
+      confirmFn() {},
+    });
+  };
+
+  const handleDefault2 = () => {
+    InfoBox({
+      title: '请确认是否重置？',
+      content: '重置后不可恢复',
+    });
+  };
+</script>

package/knowledge/examples/info-box/button-text-demo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      @click="handleDefault"
+    >
+      提示框
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import InfoBox from '@bkui-vue/info-box';
+
+  const handleDefault = () => {
+    InfoBox({
+      title: '确认要删除1？',
+      content: '确认要删除？',
+      headerAlign: 'center',
+      footerAlign: 'center',
+      confirmText: '删除',
+      cancelText: '取消',
+    });
+  };
+</script>

package/knowledge/examples/info-box/callback-demo.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      @click="handleShow"
+    >
+      点击删除(成功)
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import InfoBox from '@bkui-vue/info-box';
+
+  const handleShow = () => {
+    InfoBox({
+      title: '确认要删除1？',
+      content: '删除后不可恢复',
+      onConfirm() {
+        console.log('删除成功');
+      },
+      onCancel() {
+        console.log('删除失败');
+      },
+    });
+  };
+</script>

package/knowledge/examples/info-box/index.tsx

@@ -0,0 +1,272 @@
+/*
+ * 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 AlignDemo from './align-demo.vue';
+import BaseDemo from './base-demo.vue';
+import ButtonTextDemo from './button-text-demo.vue';
+import CallbackDemo from './callback-demo.vue';
+import StatusDemo from './status-demo.vue';
+
+import type { IPropsTableItem } from '../../typings';
+
+const props: IPropsTableItem[] = [
+  {
+    name: 'isShow',
+    type: 'Boolean',
+    default: 'false',
+    desc: '初始化时否展示',
+    optional: [],
+  },
+  {
+    name: 'width',
+    type: 'String | Number',
+    default: 400,
+    desc: '自定义对话框宽度',
+    optional: [],
+  },
+  {
+    name: 'class',
+    type: 'String | Array',
+    default: '',
+    desc: '配置自定义样式类名',
+    optional: [],
+  },
+  {
+    name: 'type',
+    type: 'String',
+    default: '',
+    desc: '实现成功，错误，警告，加载中的不同Icon提示的弹窗类型',
+    optional: ['success', 'danger', 'warning', 'loading'],
+  },
+  {
+    name: 'title',
+    type: 'String | VNode | () => VNode',
+    default: '',
+    desc: '弹框的标题',
+    optional: [],
+  },
+  {
+    name: 'content',
+    type: 'String | VNode | () => VNode',
+    default: '',
+    desc: '弹窗内容',
+    optional: [],
+  },
+  {
+    name: 'showContentBgColor',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否设置content或subTitle内容默认背景颜色',
+    optional: [],
+  },
+  {
+    name: 'closeIcon',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否显示右上角的关闭 icon',
+    optional: [],
+  },
+
+  {
+    name: 'headerAlign',
+    type: 'String',
+    default: 'center',
+    desc: '显示 header 的位置',
+    optional: ['left', 'center', 'right'],
+  },
+  {
+    name: 'contentAlign',
+    type: 'String',
+    default: 'center',
+    desc: '显示 content 的位置',
+    optional: ['left', 'center', 'right'],
+  },
+  {
+    name: 'footerAlign',
+    type: 'String',
+    default: 'center',
+    desc: '显示 footer 的位置',
+    optional: ['left', 'center', 'right'],
+  },
+  {
+    name: 'showMask',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否允许出现遮罩',
+    optional: [],
+  },
+  {
+    name: 'quickClose',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否允许点击遮罩关闭弹框',
+    optional: [],
+  },
+  {
+    name: 'escClose',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否允许 esc 按键关闭弹框',
+    optional: [],
+  },
+  {
+    name: 'confirmText',
+    type: 'String',
+    default: '确定',
+    desc: '确认按钮文字',
+    optional: [],
+  },
+  {
+    name: 'confirmButtonTheme',
+    type: 'String',
+    default: 'primary',
+    desc: 'comfirm Button 的 theme',
+    optional: ['primary', 'warning', 'success', 'danger'],
+  },
+  {
+    name: 'cancelText',
+    type: 'String',
+    default: '取消',
+    desc: '取消按钮文字',
+    optional: [],
+  },
+
+  {
+    name: 'beforeClose',
+    type: '(action: string) => boolean | Promise<boolean>',
+    default: '',
+    desc: '关闭前执行函数',
+    optional: [],
+  },
+  {
+    name: 'onConfirm',
+    type: 'Function',
+    default: '',
+    desc: '确定执行函数',
+    optional: [],
+  },
+  {
+    name: 'onCancel',
+    type: 'Function',
+    default: '',
+    desc: '关闭执行函数',
+    optional: [],
+  },
+];
+const infoBox: IPropsTableItem[] = [
+  {
+    name: 'show',
+    type: 'Function',
+    default: '',
+    desc: '展示',
+    optional: [],
+  },
+  {
+    name: 'hide',
+    type: 'Function',
+    default: '',
+    desc: '隐藏',
+    optional: [],
+  },
+  {
+    name: 'update',
+    type: 'Function',
+    default: '',
+    desc: '更新',
+    optional: [],
+  },
+];
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='用户操作后的消息提示，用于成功、失败、警告等消息提醒。'
+          designLink='https://bkdesign.bk.tencent.com/design/33'
+          name='infoBox 消息提示'
+        />
+        <DemoBox
+          componentName='info-box'
+          demoName='base-demo'
+          desc='配置 title, content 等参数'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='info-box'
+          demoName='status-demo'
+          desc='配置 type 的值，实现成功，错误，警告，加载中的不同类型'
+          subtitle=''
+          title='各种状态'
+        >
+          <StatusDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='info-box'
+          demoName='button-text-demo'
+          desc='配置 confirmText，cancelText'
+          subtitle='按钮文字配置'
+          title='自定义按钮文字'
+        >
+          <ButtonTextDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='info-box'
+          demoName='callback-demo'
+          desc='onConfirm, onCancel'
+          subtitle='确认，取消回调'
+          title='事件回调'
+        >
+          <CallbackDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='info-box'
+          demoName='align-demo'
+          desc='headerAlign、contentAlign、footerAlign'
+          subtitle='确认，取消回调'
+          title='文本对齐方式'
+        >
+          <AlignDemo />
+        </DemoBox>
+        <PropsBox
+          propsData={props}
+          subtitle='InfoBox函数参数（以Dialog为准）'
+        />
+        <PropsBox
+          propsData={infoBox}
+          subtitle='InfoBox函数返回实例'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/info-box/status-demo.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <bk-button
+      theme="success"
+      @click="handleDefault1"
+    >
+      成功
+    </bk-button>
+
+    <bk-button
+      style="margin-left: 15px"
+      class="ml10"
+      theme="danger"
+      @click="handleDefault2"
+    >
+      错误
+    </bk-button>
+
+    <bk-button
+      style="margin-left: 15px"
+      class="ml10"
+      theme="warning"
+      @click="handleDefault3"
+    >
+      警告
+    </bk-button>
+
+    <bk-button
+      style="margin-left: 15px"
+      class="ml10"
+      @click="handleDefault4"
+    >
+      loading
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import { h } from 'vue';
+
+  import InfoBox from '@bkui-vue/info-box';
+  const handleDefault1 = () => {
+    InfoBox({
+      type: 'success',
+      title: '添加用户成功',
+      content: h(
+        'a',
+        {
+          style: {
+            color: '#3a84ff',
+            textDecoration: 'none',
+            cursor: 'pointer',
+          },
+        },
+        '继续添加',
+      ),
+    });
+  };
+
+  const handleDefault2 = () => {
+    InfoBox({
+      type: 'danger',
+      title: '添加用户失败',
+    });
+  };
+
+  const handleDefault3 = () => {
+    InfoBox({
+      type: 'warning',
+      title: '此操作存在安全风险',
+    });
+  };
+
+  const handleDefault4 = () => {
+    InfoBox({
+      type: 'loading',
+      title: 'loding',
+      content: '请稍等',
+    });
+  };
+</script>