@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/pop-components.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 BkButton from '@bkui-vue/button';
+import BkDialog from '@bkui-vue/dialog';
+import BkPopover from '@bkui-vue/popover';
+import BkSideslider from '@bkui-vue/sideslider';
+export default defineComponent({
+  name: 'PopConmponents',
+  data() {
+    return {
+      dialog1: {
+        isShow: false,
+      },
+      slider: {
+        isShow: false,
+      },
+      trigger: 'manual',
+      popShow: false,
+      showMask: true,
+    };
+  },
+  methods: {
+    handleIsShowChanged(isShow: boolean) {
+      this.dialog1.isShow = isShow;
+    },
+    handleSliderIsShowChanged(isShow: boolean) {
+      this.slider.isShow = isShow;
+    },
+    handlePopShowChanged() {
+      this.popShow = !this.popShow;
+    },
+    handleShowMaskChanged() {
+      this.showMask = !this.showMask;
+    },
+  },
+  render() {
+    return (
+      <div>
+        <BkButton onClick={() => this.handleSliderIsShowChanged(true)}>显示Sideslider</BkButton>
+        <BkSideslider
+          isShow={this.slider.isShow}
+          onClosed={() => this.handleSliderIsShowChanged(false)}
+        >
+          <button onClick={() => this.handleIsShowChanged(true)}>显示Dialog</button>
+          <button onClick={() => this.handleShowMaskChanged()}>ShowMask {`${this.showMask}`}</button>
+          <BkDialog
+            width={600}
+            height={400}
+            isShow={this.dialog1.isShow}
+            showMask={this.showMask}
+            onClosed={() => this.handleIsShowChanged(false)}
+          >
+            <p>【首部及导言】</p>
+            <p>欢迎您使用腾讯蓝鲸智云软件及服务。</p>
+            <p>
+              为使用腾讯蓝鲸智云软件（以下简称本软件）及服务，您应当阅读并遵守《腾讯蓝鲸智云软件许可及服务协议》
+              （以下简称本协议），以及《腾讯服务协议》。
+              请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，
+              并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
+            </p>
+            <p>
+              除非您已阅读并接受本协议所有条款，否则您无权下载、安装或使用本软件及相关服务。
+              您的下载、安装、使用、登录等行为即视为您已阅读并同意上述协议的约束。
+            </p>
+            <p>一、【协议的范围】</p>
+            <p>1.1【协议适用主体范围】</p>
+            <p>本协议是您与腾讯之间关于您下载、安装、使用、复制本软件，以及使用腾讯相关服务所订立的协议。</p>
+            <p>1.2【协议关系及冲突条款】</p>
+            <p>
+              本协议被视为《腾讯服务协议》（链接地址:http://www.qq.com/contract.shtml，若链接地址变更的，
+              则以变更后的链接地址所对应的内容为准；其他链接地址变更的情形，均适用前述约定。）的补充协议，
+              是其不可分割的组成部分是其不可分割的组成部分。
+            </p>
+            <p>【首部及导言】</p>
+            <p>欢迎您使用腾讯蓝鲸智云软件及服务。</p>
+            <p>
+              为使用腾讯蓝鲸智云软件（以下简称本软件）及服务，您应当阅读并遵守《腾讯蓝鲸智云软件许可及服务协议》
+              （以下简称本协议），以及《腾讯服务协议》。请您务必审慎阅读、充分理解各条款内容，
+              特别是免除或者限制责任的条款，以及开通或使用某项服务的单独协议，并选择接受或不接受。
+              限制、免责条款可能以加粗形式提示您注意。
+            </p>
+            <p>
+              除非您已阅读并接受本协议所有条款，否则您无权下载、安装或使用本软件及相关服务。您的下载、安装、使用、
+              登录等行为即视为您已阅读并同意上述协议的约束。
+            </p>
+            <p>一、【协议的范围】</p>
+
+            <p>1.1【协议适用主体范围】</p>
+            <p>本协议是您与腾讯之间关于您下载、安装、使用、复制本软件，以及使用腾讯相关服务所订立的协议。</p>
+            <p>1.2【协议关系及冲突条款】</p>
+
+            <BkPopover
+              isShow={this.popShow}
+              trigger={this.trigger}
+            >
+              {{
+                default: () => <p>1.2【协议关系及冲突条款】</p>,
+                content: () => (
+                  <p>
+                    本协议被视为《腾讯服务协议》 （链接地址:http://www.qq.com/contract.shtml，若链接地址变更的，
+                    则以变更后的链接地址所对应的内容为准；其他链接地址变更的情形，均适用前述约定。）
+                    的补充协议，是其不可分割的组成部分是其不可分割的组成部分。
+                  </p>
+                ),
+              }}
+            </BkPopover>
+            <button onClick={() => this.handlePopShowChanged()}>显示POP</button>
+            <BkPopover>
+              {{
+                default: () => <p>1.3【协议关系及冲突条款1.3】</p>,
+                content: () => (
+                  <p>
+                    本协议被视为《腾讯服务协议》 （链接地址:http://www.qq.com/contract.shtml，若链接地址变更的，
+                    则以变更后的链接地址所对应的内容为准；其他链接地址变更的情形，均适用前述约定。）
+                    的补充协议，是其不可分割的组成部分是其不可分割的组成部分。
+                  </p>
+                ),
+              }}
+            </BkPopover>
+          </BkDialog>
+        </BkSideslider>
+      </div>
+    );
+  },
+});

package/knowledge/examples/pop-confirm/demo-base.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <bk-pop-confirm
+      ref="popConfirmRef"
+      width="288"
+      content="删除操作无法撤回，请谨慎操作！"
+      title="确认删除该脚本？"
+      trigger="click"
+      @after-hidden="handleAfterHidden"
+      @after-show="handleAfterShow"
+      @confirm="ensure"
+    >
+      <bk-button>删除</bk-button>
+    </bk-pop-confirm>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {},
+    setup() {
+      const popConfirmRef = ref(null);
+      function ensure() {
+        console.error(popConfirmRef.value);
+        console.log('ensure');
+      }
+      function handleAfterShow() {
+        console.log('show');
+      }
+      function handleAfterHidden() {
+        console.log('hide');
+      }
+      return {
+        ensure,
+        popConfirmRef,
+        handleAfterShow,
+        handleAfterHidden,
+      };
+    },
+  });
+</script>

package/knowledge/examples/pop-confirm/demo-icon.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <bk-pop-confirm
+      ref="popConfirmRef"
+      width="288"
+      content="删除操作无法撤回，请谨慎操作！"
+      title="确认删除该脚本？"
+      trigger="click"
+      @confirm="ensure"
+    >
+      <template #icon>
+        <Error />
+      </template>
+      <bk-button>删除</bk-button>
+    </bk-pop-confirm>
+  </div>
+</template>
+<script setup>
+import { Error } from 'bkui-vue/lib/icon';
+import { defineComponent, ref } from 'vue';
+
+const popConfirmRef = ref(null);
+function ensure() {
+  console.error(popConfirmRef.value);
+  console.log('ensure');
+}
+</script>

package/knowledge/examples/pop-confirm/demo-select.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <bk-pop-confirm
+      width="288"
+      title="确认删除该脚本？"
+      trigger="click"
+      @confirm="ensure"
+    >
+      <bk-button>嵌入Select</bk-button>
+      <template #content>
+        <bk-select
+          :list="list"
+          :popover-options="{ boundary: 'parent' }"
+        />
+      </template>
+    </bk-pop-confirm>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {},
+    setup() {
+      const list = ref([
+        {
+          label: '爬山',
+          value: 1,
+        },
+        {
+          label: '跑步',
+          value: 2,
+        },
+      ]);
+      function ensure() {
+        console.log('ensure');
+      }
+      return {
+        ensure,
+        list,
+      };
+    },
+  });
+</script>

package/knowledge/examples/pop-confirm/demo-simple.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <bk-pop-confirm
+      width="288"
+      content="删除结果数据时，将同时删除该结果数据下的所有样本曲线，请确认！"
+      trigger="click"
+      @confirm="ensure"
+    >
+      <bk-button>删除</bk-button>
+    </bk-pop-confirm>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {},
+    setup() {
+      function ensure() {
+        console.log('ensure');
+      }
+      return {
+        ensure,
+      };
+    },
+  });
+</script>

package/knowledge/examples/pop-confirm/demo-slot.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <bk-pop-confirm
+      width="288"
+      content="删除操作无法撤回，请谨慎操作！"
+      title="确认删除该脚本？"
+      trigger="click"
+      @confirm="ensure"
+    >
+      <bk-button>删除</bk-button>
+      <template #icon>
+        <Help />
+      </template>
+      <template #content>
+        <div style="margin-bottom: 16px; color: red">
+          测试将同时删除该结果数据下的所有样本曲线
+        </div>
+      </template>
+    </bk-pop-confirm>
+  </div>
+</template>
+<script setup>
+import { Help } from 'bkui-vue/lib/icon';
+function ensure() {
+  console.log('ensure');
+}
+</script>

package/knowledge/examples/pop-confirm/hide-ignore-reference.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <bk-pop-confirm
+      ref="popConfirmRef"
+      width="288"
+      :popover-options="{
+        hideIgnoreReference: true,
+      }"
+      content="删除操作无法撤回，请谨慎操作！"
+      title="确认删除该脚本？"
+      trigger="click"
+      @after-hidden="handleAfterHidden"
+      @after-show="handleAfterShow"
+      @confirm="ensure"
+    >
+      <bk-button>删除(点我不收起弹窗)</bk-button>
+    </bk-pop-confirm>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    components: {},
+    setup() {
+      const popConfirmRef = ref(null);
+      function ensure() {
+        console.error(popConfirmRef.value);
+        console.log('ensure');
+      }
+      function handleAfterShow() {
+        console.log('show');
+      }
+      function handleAfterHidden() {
+        console.log('hide');
+      }
+      return {
+        ensure,
+        popConfirmRef,
+        handleAfterShow,
+        handleAfterHidden,
+      };
+    },
+  });
+</script>

package/knowledge/examples/pop-confirm/index.tsx

@@ -0,0 +1,266 @@
+/*
+ * 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 DemoBase from './demo-base.vue';
+import DemoIcon from './demo-icon.vue';
+import DemoSelect from './demo-select.vue';
+import DemoSimple from './demo-simple.vue';
+import DemoSlot from './demo-slot.vue';
+import HideIgnoreReference from './hide-ignore-reference.vue';
+
+const menuPropsJson: IPropsTableItem[] = [
+  {
+    name: 'trigger',
+    type: 'String',
+    default: 'hover',
+    desc: '触发方式',
+    optional: ['hover', 'click'],
+  },
+  {
+    name: 'title',
+    type: 'String',
+    default: '""',
+    desc: '标题',
+    optional: [],
+  },
+  {
+    name: 'content',
+    type: 'String',
+    default: '""',
+    desc: '正文',
+    optional: [],
+  },
+  {
+    name: 'confirmText',
+    type: 'String',
+    default: '""',
+    desc: '确认按钮文字',
+    optional: [],
+  },
+  {
+    name: 'cancelText',
+    type: 'String',
+    default: '""',
+    desc: '取消按钮文字',
+    optional: [],
+  },
+  {
+    name: 'placement',
+    type: 'String',
+    default: 'top-start',
+    desc: '组件显示位置',
+    optional: [
+      'auto',
+      'auto-start',
+      'auto-end',
+      'top',
+      'top-start',
+      'top-end',
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'right',
+      'right-start',
+      'right-end',
+      'left',
+      'left-start',
+      'left-end',
+    ],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'light',
+    desc: '组件主题色',
+    optional: ['dark', 'light'],
+  },
+  {
+    name: 'confirmConfig',
+    type: 'Object',
+    default: '',
+    desc: '确定按钮的配置，同Button的Props',
+    optional: [],
+  },
+  {
+    name: 'cancelConfig',
+    type: 'Object',
+    default: '',
+    desc: '取消按钮的配置，同Button的Props',
+    optional: [],
+  },
+  {
+    name: 'popover-options',
+    type: 'Object',
+    desc: 'Popover组件的配置项',
+    optional: [],
+    default: '{}',
+  },
+];
+
+const eventColumnMap = {
+  name: '名称',
+  desc: '说明',
+  type: '类型',
+  params: '参数',
+};
+
+const events: IPropsTableItem[] = [
+  {
+    name: 'confirm',
+    type: 'Function',
+    default: '',
+    desc: '确定操作回调函数',
+    optional: [],
+  },
+  {
+    name: 'cancel',
+    type: 'Function',
+    default: '',
+    desc: '取消操作回调函数',
+    optional: [],
+  },
+  {
+    name: 'after-show',
+    type: 'Function',
+    default: '',
+    desc: '显示提示框时触发函数',
+    optional: [],
+  },
+  {
+    name: 'after-hidden',
+    type: 'Function',
+    default: '',
+    desc: '隐藏提示框时触发函数',
+    optional: [],
+  },
+];
+
+const slotColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+
+const popConfirmSlotsJson = [
+  {
+    name: 'default',
+    default: [],
+    desc: '触发弹框插槽',
+    params: '--',
+  },
+  {
+    name: 'content',
+    default: [],
+    desc: '弹框内容插槽',
+    params: '--',
+  },
+  {
+    name: 'icon',
+    default: [],
+    desc: 'icon 插槽，只在 title 属性不为空时生效',
+    params: '--',
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='bkPopconfirm是基于bkPopover改造而来，继承了bkPopover所有属性，具体请参考bkPopover文档，本文主要列出bkPopconfirm独有或不同的属性。基础样式由标题、正文和按钮构成。'
+          designLink='https://bkdesign.bk.tencent.com/design/45'
+          name='Popconfirm 弹出确认框'
+        />
+        <DemoBox
+          componentName='pop-confirm'
+          demoName='demo-base'
+          desc='由标题+通知文本+按钮组成，例如提交表单，与 confirm 弹出的全屏居中模态对话框相比，在目标元素附近弹出浮层提示，询问用户。'
+          title='基础用法'
+        >
+          <DemoBase />
+        </DemoBox>
+        <DemoBox
+          componentName='pop-confirm'
+          demoName='demo-simple'
+          desc='由通知文本+按钮组成，比较轻量的交互模态，用于一句话承载的内容也相对较少，在目标元素附近弹出浮层提示，询问用户。'
+          title='简单样式'
+        >
+          <DemoSimple />
+        </DemoBox>
+        <DemoBox
+          componentName='pop-confirm'
+          demoName='demo-slot'
+          desc='插槽模式'
+          title='插槽模式'
+        >
+          <DemoSlot />
+        </DemoBox>
+        <DemoBox
+          componentName='pop-confirm'
+          demoName='demo-icon'
+          desc='通过 icon slot 自定义 icon'
+          title='自定义 icon'
+        >
+          <DemoIcon />
+        </DemoBox>
+        <DemoBox
+          componentName='pop-confirm'
+          demoName='demo-select'
+          desc='嵌入Select组件'
+          title='嵌入Select'
+        >
+          <DemoSelect />
+        </DemoBox>
+        <DemoBox
+          componentName='pop-confirm'
+          demoName='hide-ignore-reference'
+          desc='通过 popoverOptions 设置 hideIgnoreReference: true，若占位区为非行内元素，请配置 referenceCls: 类名'
+          title='点击占位区弹窗不收起'
+        >
+          <HideIgnoreReference />
+        </DemoBox>
+
+        <PropsBox propsData={menuPropsJson}></PropsBox>
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={events}
+          title='事件'
+        ></PropsBox>
+        <PropsBox
+          columnMap={slotColumnMap}
+          propsData={popConfirmSlotsJson}
+          title='插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/popover/demo/always.vue

@@ -0,0 +1,12 @@
+<template>
+  <bk-popover
+    width="300"
+    boundary="#oooxxxvvv"
+    content="这里是提示文字当鼠标经过这段文字时，会显示一个气泡框当鼠标经过这段文字时，会显示一个气泡框当鼠标经过这段文字时"
+    placement="right"
+    theme="light"
+    always
+  >
+    <bk-button>总是显示</bk-button>
+  </bk-popover>
+</template>

package/knowledge/examples/popover/demo/base.vue

@@ -0,0 +1,34 @@
+<template>
+  <bk-popover
+    width="400"
+    content="#hidden_pop_content"
+    render-type="auto"
+    theme="light xxxxx"
+    allow-html
+  >
+    <div>当鼠标经过这段文字时，会显示一个气泡框</div>
+  </bk-popover>
+  <div style="display: none">
+    <div id="hidden_pop_content">
+      {{ content }}
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    data() {
+      return {
+        content: `JSX value should be either an expression or a quoted JSX text ...
+      Quoted JSX attributes use XML-style escapes #1225 - GitHub
+      Substitution Scholia and Thucydides' Use of Prepositions`,
+      };
+    },
+    mounted() {
+      // setInterval(() => {
+      //   this.content = `${this.content}-${new Date().getTime()}`;
+      // }, 2000);
+    },
+  });
+</script>