@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/notify/demo/position.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <p>
+      <bk-button
+        theme="danger"
+        @click="handleSingle({ position: placement.topLeft, theme: 'error' })"
+      >
+        左上角 </bk-button
+      >&nbsp;&nbsp;
+      <bk-button
+        theme="success"
+        @click="handleSingle({ position: placement.topRight, theme: 'success' })"
+      >
+        右上角
+      </bk-button>
+    </p>
+    <p>
+      <bk-button
+        theme="warning"
+        @click="handleSingle({ position: placement.bottomLeft, theme: 'warning' })"
+      >
+        左下角 </bk-button
+      >&nbsp;&nbsp;
+      <bk-button
+        theme="primary"
+        @click="handleSingle({ position: placement.bottomRight, theme: 'primary' })"
+      >
+        右下角
+      </bk-button>
+    </p>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { Notify } from 'bkui-vue';
+
+  const title = ref('你好！欢迎你使用蓝鲸智云产品');
+  const message = ref(
+    '你好，你申请的功能权限现已开通，请及时登录查询。如有疑问，请与蓝鲸智云管理人员联系或关注微信公众账号。',
+  );
+  const placement = ref({
+    topLeft: 'top-left',
+    topRight: 'top-right',
+    bottomLeft: 'bottom-left',
+    bottomRight: 'bottom-right',
+  });
+
+  function handleSingle(config) {
+    config.title = title.value;
+    config.message = message.value;
+    Notify(config);
+  }
+</script>

package/knowledge/examples/notify/demo/theme.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      @click="handleSingle({ theme: 'primary' })"
+    >
+      消息 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      theme="success"
+      @click="handleSingle({ theme: 'success' })"
+    >
+      成功 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      theme="warning"
+      @click="handleSingle({ theme: 'warning' })"
+    >
+      警告 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      theme="danger"
+      @click="handleSingle({ theme: 'error' })"
+    >
+      失败
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { Notify } from 'bkui-vue';
+
+  const title = ref('你好！欢迎你使用蓝鲸智云产品');
+  const message = ref(
+    '你好，你申请的功能权限现已开通，请及时登录查询。如有疑问，请与蓝鲸智云管理人员联系或关注微信公众账号。',
+  );
+
+  function handleSingle(config) {
+    config.title = title.value;
+    config.message = message.value;
+    Notify(config);
+  }
+</script>

package/knowledge/examples/notify/index.tsx

@@ -0,0 +1,177 @@
+/*
+ * 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 Base from './demo/base.vue';
+import Close from './demo/close.vue';
+import Position from './demo/position.vue';
+import Theme from './demo/theme.vue';
+
+import type { IPropsTableItem } from '../../typings';
+
+const props: IPropsTableItem[] = [
+  {
+    name: 'id',
+    type: 'String',
+    default: '--',
+    desc: '弹框的 id，值相同时表示同一弹框',
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'primary',
+    desc: '组件主题色',
+    optional: ['primary', 'warning', 'success', 'error'],
+  },
+  {
+    name: 'title',
+    type: 'String',
+    default: '',
+    desc: '组件的标题',
+    optional: [],
+  },
+  {
+    name: 'message',
+    type: 'String | Function | VNode',
+    default: '',
+    desc: '组件显示的文字内容，支持字符串、函数、VNode',
+    optional: [],
+  },
+  {
+    name: 'position',
+    type: 'String',
+    default: '',
+    desc: '组件出现的方向',
+    optional: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+  },
+  {
+    name: 'delay',
+    type: 'Number',
+    default: '5000',
+    desc: '组件延时关闭时间，值为 0 时需要手动关闭',
+    optional: [],
+  },
+  {
+    name: 'dismissable',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否显示右侧关闭 icon',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'offsetX',
+    type: 'Number',
+    default: '10',
+    desc: '组件出现时距离视口的水平偏移量',
+    optional: [],
+  },
+  {
+    name: 'offsetY',
+    type: 'Number',
+    default: '30',
+    desc: '组件出现时距离视口顶部的偏移量',
+    optional: [],
+  },
+  {
+    name: 'spacing',
+    type: 'Number',
+    default: '10',
+    desc: '多个组件之间的垂直距离',
+    optional: [],
+  },
+  {
+    name: 'extCls',
+    type: 'String',
+    default: '',
+    desc: '配置自定义样式类名，传入的类会被加在组件最外层的 DOM .bk-message 上',
+    optional: [],
+  },
+  {
+    name: 'onClose',
+    type: 'Function',
+    default: '',
+    desc: '关闭组件时的回调函数, 参数为组件实例',
+    optional: [],
+  },
+];
+
+const demos = [
+  {
+    title: '基础用法',
+    desc: '使用默认配置的通知提示',
+    componentName: 'notify',
+    demoName: 'demo/base',
+    DemoComponent: Base,
+  },
+  {
+    title: '内置主题',
+    desc: '通知提示提供消息、成功、警告、失败四种主题',
+    componentName: 'notify',
+    demoName: 'demo/theme',
+    DemoComponent: Theme,
+  },
+  {
+    title: '通知出现的位置',
+    desc: '通知出现可以从 4 个方向出现：左上角、右上角、左下角、右下角',
+    componentName: 'notify',
+    demoName: 'demo/position',
+    DemoComponent: Position,
+  },
+  {
+    title: '通知关闭',
+    desc: '配置 delay 字段定义通知自动关闭的时间，当值为 0 时不自动关闭。配置 dismissable 字段控制是否显示右侧的手动关闭 icon。',
+    componentName: 'notify',
+    demoName: 'demo/close',
+    DemoComponent: Close,
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='用来给用户推送通知提示信息，通知可配置为从界面的四个角出现'
+          designLink='https://bkdesign.bk.tencent.com/design/142'
+          name='Notify 通知提示'
+        />
+        {demos.map(({ DemoComponent, ...demo }) => (
+          <DemoBox {...demo}>
+            <DemoComponent />
+          </DemoBox>
+        ))}
+        <PropsBox
+          propsData={props}
+          subtitle=''
+        ></PropsBox>
+      </div>
+    );
+  },
+});

package/knowledge/examples/overflow-title/base-demo.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <div style="width: 100px; margin-bottom: 20px">
+      <bk-overflow-title>文本超出33333222222222222222222222222</bk-overflow-title>
+    </div>
+    <div style="width: 100px; margin-bottom: 20px">
+      <bk-overflow-title type="tips"> 文本超出33333222222222222222222222222 </bk-overflow-title>
+    </div>
+    <div style="width: 800px; margin-bottom: 20px">
+      <bk-overflow-title type="tips"> 文本超出33333222222222222222222222222 </bk-overflow-title>
+    </div>
+  </div>
+</template>
+
+<script setup></script>

package/knowledge/examples/overflow-title/directive.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div style="width: 100px; margin-bottom: 20px">
+      <div class="text-ov" v-overflow-title>
+        222222222222222222222222
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from 'vue';
+
+import { overflowTitle } from 'bkui-vue';
+
+export default defineComponent({
+  directives: {
+    overflowTitle,
+  },
+  setup() { },
+});
+</script>

package/knowledge/examples/overflow-title/index.tsx

@@ -0,0 +1,153 @@
+/*
+ * 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 Directive from './directive.vue';
+
+const overflowComponent: IPropsTableItem[] = [
+  {
+    name: 'content',
+    type: 'String',
+    default: '',
+    desc: '文本内容。该值没有的时候则默认取default slot',
+    optional: [],
+  },
+  {
+    name: 'type',
+    type: 'String',
+    default: 'title',
+    desc: '默认给文本加上title，如果tips，则鼠标悬浮添加添加tooltips，但是如果不是纯文本',
+    optional: ['tips', 'title'],
+  },
+  {
+    name: 'resizeable',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否监听文本内容变化',
+    optional: [],
+  },
+  {
+    name: 'boundary',
+    type: 'String, HTMLElement',
+    default: 'document.body',
+    desc: 'popover弹出内容绑定元素，可以被popoverOptions覆盖',
+    optional: [],
+  },
+  {
+    name: 'placement',
+    type: 'String,',
+    default: 'top-start',
+    desc: 'popover组件显示位置，可以被popoverOptions覆盖',
+    optional: [],
+  },
+  {
+    name: 'popoverOptions',
+    type: 'Object',
+    default: '--',
+    desc: 'Popover组件的配置项,type为title无效',
+    optional: [],
+  },
+];
+
+const overflowComponentSlots: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Slot',
+    default: '-',
+    desc: '默认插槽',
+    optional: [],
+  }
+];
+
+const overflowDirective: IPropsTableItem[] = [
+  {
+    name: 'content',
+    type: 'String',
+    default: '',
+    desc: '文本内容。该值没有的时候则默认取default slot',
+    optional: [],
+  },
+  {
+    name: 'calType',
+    type: 'String',
+    default: 'dom',
+    desc: '计算文本宽度方式，默认通过dom计算机文本宽度，canvas则通过measureText计算',
+    optional: ['dom', 'canvas'],
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='overflowTitle 文本溢出，通过title 或者tooltips展示全部内容.'
+          link='#/overflowTitle'
+          name='overflowTitle 文件溢出处理'
+        />
+
+        <DemoBox
+          componentName='overflow-title'
+          demoName='base-demo'
+          desc='组件用法'
+          title='组件用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+        <DemoBox
+          componentName='overflow-title'
+          demoName='directive'
+          desc='指令用法'
+          title='指令用法'
+        >
+          <Directive></Directive>
+        </DemoBox>
+
+        <PropsBox
+          propsData={overflowComponent}
+          subtitle=''
+          title='overflowTitle 组件属性'
+        />
+        <PropsBox
+          title='overflowTitle 插槽'
+          subtitle=''
+          propsData={overflowComponentSlots}
+        />
+
+        <PropsBox
+          title='overflowTitle 指令属性(计算父元素宽度)'
+          subtitle=''
+          propsData={overflowDirective}
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/pagination/demo/pagination-small.vue

@@ -0,0 +1,16 @@
+<template>
+  <bk-pagination
+    v-model="current"
+    :count="count"
+    :limit="10"
+    small
+  />
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import { BkPagination } from '@bkui-vue/pagination';
+
+  const count = ref(100);
+  const current = ref(1);
+</script>

package/knowledge/examples/pagination/demo/pagination.vue

@@ -0,0 +1,16 @@
+<template>
+  <bk-pagination
+    v-model="current"
+    :count="count"
+    :limit="10"
+    size="small"
+  />
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import { BkPagination } from '@bkui-vue/pagination';
+
+  const count = ref(100);
+  const current = ref(1);
+</script>

package/knowledge/examples/pagination/index.tsx

@@ -0,0 +1,193 @@
+/*
+ * 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 DemoPagination from './demo/pagination.vue';
+import DemoPaginationSmall from './demo/pagination-small.vue';
+
+const paginationProps: IPropsTableItem[] = [
+  {
+    name: 'model-value / v-model',
+    type: 'String',
+    default: '当前页码',
+    desc: '',
+    optional: [],
+  },
+  {
+    name: 'count',
+    type: 'Number',
+    default: '0',
+    desc: '数据总数',
+    optional: [],
+  },
+  {
+    name: 'limit',
+    type: 'Number',
+    default: '',
+    desc: '每页显示条数(须存在于limit-list中) ',
+    optional: [],
+  },
+  {
+    name: 'limit-list',
+    type: 'String',
+    default: '[10, 20, 50, 100]',
+    desc: '每页显示条数可选项列表',
+    optional: [],
+  },
+  {
+    name: 'show-limit',
+    type: 'Number',
+    default: 'true',
+    desc: '是否显示每页显示条数控件',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'type',
+    type: 'String',
+    default: '',
+    desc: '组件外观类型',
+    optional: ['default', 'compact'],
+  },
+  {
+    name: 'align',
+    type: 'String',
+    default: 'left',
+    desc: '分页控件位置，优先级高于location',
+    optional: ['left', 'center', 'right'],
+  },
+  {
+    name: 'location',
+    type: 'String',
+    default: 'right',
+    desc: '每页显示条数控件位置',
+    optional: ['left', 'right'],
+  },
+  {
+    name: 'small',
+    type: 'Boolean',
+    default: 'false',
+    desc: '小型分页',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'show-total-count',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否显示总计',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: ' 禁用',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'layout',
+    type: 'Array',
+    default: "['total', 'list', 'limit']",
+    desc: '控件布局',
+    optional: [],
+  },
+  {
+    name: 'prev-text',
+    type: 'String',
+    default: '',
+    desc: '上一页按钮文案',
+    optional: [],
+  },
+  {
+    name: 'next-text',
+    type: 'String',
+    default: '',
+    desc: '下一页按钮文案',
+    optional: [],
+  },
+];
+
+const paginationEvents: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'Function',
+    default: '',
+    desc: '当前页码变化时的回调',
+    optional: [],
+  },
+  {
+    name: 'limit-change',
+    type: 'Function',
+    default: '',
+    desc: '当前分页尺寸变化时的回调',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  name: 'Pagination',
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='数据分页'
+          designLink='https://bkdesign.bk.tencent.com/design/55'
+          name='Pagination'
+        />
+        <DemoBox
+          componentName='pagination'
+          demoName='/demo/pagination'
+          desc=''
+          title='基本用法'
+        >
+          <DemoPagination />
+        </DemoBox>
+        <DemoBox
+          componentName='pagination'
+          demoName='/demo/pagination-small'
+          desc=''
+          title='小型分页'
+        >
+          <DemoPaginationSmall />
+        </DemoBox>
+        <PropsBox
+          propsData={paginationProps}
+          subtitle=''
+          title='Pagination 属性'
+        />
+        <PropsBox
+          propsData={paginationEvents}
+          subtitle=''
+          title='Pagination 事件'
+        />
+      </div>
+    );
+  },
+});