@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/message/multi-demo.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <bk-button
+      type="primary"
+      @click="handleAdvanceShow(null)"
+    >
+      默认配置 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      type="error"
+      @click="handleAdvanceShow('key-value')"
+    >
+      key-value显示 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      type="primary"
+      @click="handleAdvanceShow('json')"
+    >
+      JSON显示 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      type="primary"
+      @click="handleAdvanceDisabledShow('json')"
+    >
+      自定义工具列表-不显示助手操作
+    </bk-button>
+    &nbsp;&nbsp;
+    <bk-button
+      type="primary"
+      @click="handleAdvanceCustomShow('json')"
+    >
+      自定义工具列表-只读-自定义Text
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import { Message } from 'bkui-vue';
+
+  const handleAdvanceShow = type => {
+    const messageConfig = {
+      theme: 'error',
+      message: {
+        code: 10086,
+        overview: '算法载入失败。',
+        suggestion:
+          '请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。',
+        type,
+        details: {
+          code: 'UNAUTHENTICATED',
+          message: '用户未登录或登录态失效',
+          code1: 'UNAUTHENTICATED',
+          message1: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code2: 'UNAUTHENTICATED',
+          message2: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code3: 'UNAUTHENTICATED',
+          message3: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code4: 'UNAUTHENTICATED',
+          message4: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code5: 'UNAUTHENTICATED',
+          message5: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code6: 'UNAUTHENTICATED',
+          message6: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code7: 'UNAUTHENTICATED',
+          message7: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code8: 'UNAUTHENTICATED',
+          message8: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code9: 'UNAUTHENTICATED',
+          message9: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code10: 'UNAUTHENTICATED',
+          message10: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code81: 'UNAUTHENTICATED',
+          message81: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code91: 'UNAUTHENTICATED',
+          message91: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+          code101: 'UNAUTHENTICATED',
+          message101: '用户未登录或登录态失效，请使用登录链接重新登录 (UNAUTHORIZED)',
+        },
+        assistant: '',
+      },
+    };
+    Message(messageConfig);
+  };
+
+  const handleAdvanceDisabledShow = type => {
+    const messageConfig = {
+      theme: 'error',
+      actions: [
+        {
+          id: 'assistant',
+          disabled: true,
+        },
+      ],
+      message: {
+        code: 10086,
+        overview: '算法载入失败。',
+        suggestion:
+          '请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。',
+        type,
+        details: `{
+              "code": "UNAUTHENTICATED"
+            }`,
+        assistant: '',
+      },
+    };
+    Message(messageConfig);
+  };
+
+  const handleAdvanceCustomShow = type => {
+    const messageConfig = {
+      theme: 'error',
+      actions: [
+        {
+          id: 'fix',
+          text: 'FIX',
+          onClick: () => {
+            alert('On Click');
+          },
+        },
+      ],
+      message: {
+        code: 10086,
+        overview: '算法载入失败。',
+        suggestion:
+          '请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。请确认文件内容是否正确，并和所选框架匹配。',
+        type,
+        details: `{
+              "code": "UNAUTHENTICATED"
+            }`,
+        assistant: '',
+      },
+    };
+    Message(messageConfig);
+  };
+</script>

package/knowledge/examples/message/theme-demo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <bk-button
+      theme="primary"
+      @click="handlePrimary"
+    >
+      消息 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      theme="success"
+      @click="handleSuccess"
+    >
+      成功 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      theme="warning"
+      @click="handleWarning"
+    >
+      警告 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      theme="danger"
+      @click="handleError"
+    >
+      失败
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import { h } from 'vue';
+
+  import { Message } from 'bkui-vue';
+
+  const handlePrimary = () => {
+    Message({
+      theme: 'primary',
+      message: '选择你导入的构建机并填写相关信息，系统将为你安装必要的软件',
+    });
+  };
+  const handleSuccess = () => {
+    Message({
+      theme: 'success',
+      message: h('div', '恭喜！你提交的申请已经审核通过，请及时跟进了解下一步操作方式'),
+    });
+  };
+  const handleWarning = () => {
+    Message({
+      theme: 'warning',
+      message: '系统即将于19：00-21：00进行升个级，请及时保存你的资料',
+    });
+  };
+  const handleError = () => {
+    Message({
+      theme: 'error',
+      message: '系统错误，请稍后重试',
+    });
+  };
+</script>

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="navigation-demo">
+    <bk-radio-group
+      class="navigation-demo-radio"
+      v-model="navigationType"
+    >
+      <bk-radio label="left-right"> 左右结构 </bk-radio>
+      <bk-radio label="top-bottom"> 上下结构 </bk-radio>
+    </bk-radio-group>
+    <span v-bk-tooltips="{ content: 'test' }">test</span>
+    <bk-navigation
+      class="navigation-demo-content"
+      :default-open="!collapse"
+      :navigation-type="navigationType"
+      side-title="监控平台"
+      @toggle="handleCollapse"
+    >
+      <template #menu>
+        <bk-menu
+          :collapse="collapse"
+          :opened-keys="['数字']"
+          active-key="腾讯微视"
+        >
+          <bk-menu-item key="QQ音乐"> QQ音乐 </bk-menu-item>
+          <bk-menu-item key="腾讯视频"> 腾讯视频 </bk-menu-item>
+          <bk-menu-item key="微信"> 微信 </bk-menu-item>
+          <bk-menu-item key="QQ"> QQ </bk-menu-item>
+          <bk-menu-group
+            fold-name="GX"
+            name="光子"
+          >
+            <bk-menu-item key="和平精英"> 和平精英 </bk-menu-item>
+            <bk-menu-item
+              key="黎明觉醒"
+              disabled
+            >
+              <span v-bk-tooltips="{ content: '暂未开放' }">黎明觉醒</span>
+            </bk-menu-item>
+            <bk-menu-item key="自由幻想"> 自由幻想 </bk-menu-item>
+            <bk-menu-item key="欢乐斗地主"> 欢乐斗地主 </bk-menu-item>
+          </bk-menu-group>
+          <bk-menu-group
+            fold-name="TiMi"
+            name="天美世界"
+          >
+            <bk-menu-item key="王者荣耀"> 王者荣耀 </bk-menu-item>
+            <bk-menu-item key="QQ飞车"> QQ飞车 </bk-menu-item>
+            <bk-menu-item key="天天酷跑"> 天天酷跑 </bk-menu-item>
+            <bk-menu-item key="重返帝国"> 重返帝国 </bk-menu-item>
+          </bk-menu-group>
+          <bk-submenu
+            key="数字"
+            title="数字"
+          >
+            <bk-menu-item key="腾讯微视"> 腾讯微视 </bk-menu-item>
+            <bk-menu-item key="腾讯云"> 腾讯云 </bk-menu-item>
+            <bk-menu-item key="微众银行"> 微众银行 </bk-menu-item>
+            <bk-menu-item key="腾讯体育"> 腾讯体育 </bk-menu-item>
+            <bk-menu-item key="腾讯看点"> 腾讯看点 </bk-menu-item>
+          </bk-submenu>
+          <bk-submenu
+            key="内容"
+            title="内容"
+          >
+            <bk-menu-item key="腾讯影业"> 腾讯影业 </bk-menu-item>
+            <bk-menu-item key="腾讯新闻"> 腾讯新闻 </bk-menu-item>
+            <bk-menu-item key="腾讯动漫"> 腾讯动漫 </bk-menu-item>
+            <bk-menu-item key="阅文集团"> 阅文集团 </bk-menu-item>
+            <bk-menu-item key="腾讯电竞"> 腾讯电竞 </bk-menu-item>
+          </bk-submenu>
+        </bk-menu>
+      </template>
+      <template #side-icon>
+        <tree-application-shape />
+      </template>
+      <div class="content-demo">这里填写内容</div>
+      <template #header>
+        <div class="header-demo">这里是头部导航</div>
+      </template>
+    </bk-navigation>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { bkTooltips } from '@bkui-vue/directives';
+  import { TreeApplicationShape } from 'bkui-vue/lib/icon';
+
+  // 注册 bkTooltips 指令
+  const vBkTooltips = bkTooltips;
+  const collapse = ref(true);
+  const navigationType = ref('left-right');
+  const handleCollapse = v => {
+    collapse.value = !v;
+  };
+</script>
+<style lang="less">
+  .navigation-demo {
+    &-radio {
+      margin: 10px 0 20px 0;
+    }
+
+    &-content {
+      border: 1px solid #ddd;
+
+      .content-demo {
+        font-size: 24px;
+      }
+
+      .header-demo {
+        margin-right: auto;
+        font-size: 20px;
+      }
+    }
+  }
+</style>

package/knowledge/examples/navigation/index.tsx

@@ -0,0 +1,175 @@
+/*
+ * 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 navgationProps: IPropsTableItem[] = [
+  {
+    name: 'nav-width',
+    type: 'Number | String',
+    default: '60',
+    desc: '初始左侧折叠导航的宽度',
+    optional: [],
+  },
+  {
+    name: 'hover-width',
+    type: 'Number | String',
+    default: '260',
+    desc: '展开左侧导航的宽度',
+    optional: [],
+  },
+  {
+    name: 'side-title',
+    type: 'String',
+    default: '',
+    desc: '左侧导航的主标题',
+    optional: [],
+  },
+  {
+    name: 'header-title',
+    type: 'String',
+    default: '',
+    desc: '头部导航条的标题',
+    optional: [],
+  },
+  {
+    name: 'hover-leave-delay',
+    type: 'Number',
+    default: '0',
+    desc: '左侧栏hover离开后折叠的延迟时长',
+    optional: [],
+  },
+  {
+    name: 'hover-enter-delay',
+    type: 'Number',
+    default: '100',
+    desc: '左侧栏hover进入后展开的延迟时长',
+    optional: [],
+  },
+  {
+    name: 'default-open',
+    type: 'Boolean',
+    default: 'false',
+    desc: '左侧栏初始状态',
+    optional: [],
+  },
+  {
+    name: 'need-menu',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否显示左侧导航',
+    optional: [],
+  },
+  {
+    name: 'navigation-type',
+    type: 'String',
+    default: 'left-right',
+    desc: '导航风格 （left-right: 左右导航风格 top-bottom: 上下导航风格）',
+    optional: ['left-right', 'top-bottom'],
+  },
+];
+const navgationSlotsJson = [
+  {
+    name: 'default',
+    default: [],
+    desc: 'default 内容插槽',
+    params: '--',
+  },
+  {
+    name: 'header',
+    default: [],
+    desc: 'header 插槽',
+    params: '--',
+  },
+  {
+    name: 'footer',
+    default: [],
+    desc: 'footer 插槽',
+    params: '--',
+  },
+  {
+    name: 'menu',
+    default: [],
+    desc: '左侧menu 插槽',
+    params: '--',
+  },
+  {
+    name: 'side-icon',
+    default: [],
+    desc: '左侧header Icon 插槽',
+    params: '--',
+  },
+  {
+    name: 'side-header',
+    default: [],
+    desc: '左侧header 插槽',
+    params: '--',
+  },
+  {
+    name: 'side-footer',
+    default: [],
+    desc: '左侧footer 插槽',
+    params: '--',
+  },
+];
+const slotColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Navigation组件， 为应用提供导航的整体布局。'
+          link='https://www.google.com.hk/'
+          name='Navigation'
+        />
+        <DemoBox
+          componentName='navigation'
+          demoName='base-demo'
+          desc='通过属性配置切换不同的导航风格'
+          subtitle='点击下面按钮可以切换不同的导航风格'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <PropsBox propsData={navgationProps} />
+        <PropsBox
+          columnMap={slotColumnMap}
+          propsData={navgationSlotsJson}
+          title='SubMenu 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/navigation/theme-demo.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="navigation-demo">
+    <bk-radio-group
+      class="navigation-demo-radio"
+      v-model="navigationType"
+    >
+      <bk-radio label="dark"> 黑色 </bk-radio>
+      <bk-radio label="light"> 白色 </bk-radio>
+    </bk-radio-group>
+    <bk-navigation
+      :class="`navigation-demo-content theme-${navigationType}`"
+      :default-open="!collapse"
+      :navigation-type="'top-bottom'"
+      side-title="监控平台"
+      @toggle="handleCollapse"
+    >
+      <template #menu>
+        <bk-menu
+          :collapse="collapse"
+          :opened-keys="['数字']"
+          active-key="腾讯微视"
+        >
+          <bk-menu-item key="QQ音乐"> QQ音乐 </bk-menu-item>
+          <bk-menu-item key="腾讯视频"> 腾讯视频 </bk-menu-item>
+          <bk-menu-item key="微信"> 微信 </bk-menu-item>
+          <bk-menu-item key="QQ"> QQ </bk-menu-item>
+          <bk-menu-group
+            fold-name="GX"
+            name="光子"
+          >
+            <bk-menu-item key="和平精英"> 和平精英 </bk-menu-item>
+            <bk-menu-item
+              key="黎明觉醒"
+              disabled
+            >
+              <span v-bk-tooltips="{ content: '暂未开放' }">黎明觉醒</span>
+            </bk-menu-item>
+            <bk-menu-item key="自由幻想"> 自由幻想 </bk-menu-item>
+            <bk-menu-item key="欢乐斗地主"> 欢乐斗地主 </bk-menu-item>
+          </bk-menu-group>
+          <bk-menu-group
+            fold-name="TiMi"
+            name="天美世界"
+          >
+            <bk-menu-item key="王者荣耀"> 王者荣耀 </bk-menu-item>
+            <bk-menu-item key="QQ飞车"> QQ飞车 </bk-menu-item>
+            <bk-menu-item key="天天酷跑"> 天天酷跑 </bk-menu-item>
+            <bk-menu-item key="重返帝国"> 重返帝国 </bk-menu-item>
+          </bk-menu-group>
+          <bk-submenu
+            key="数字"
+            title="数字"
+          >
+            <bk-menu-item key="腾讯微视"> 腾讯微视 </bk-menu-item>
+            <bk-menu-item key="腾讯云"> 腾讯云 </bk-menu-item>
+            <bk-menu-item key="微众银行"> 微众银行 </bk-menu-item>
+            <bk-menu-item key="腾讯体育"> 腾讯体育 </bk-menu-item>
+            <bk-menu-item key="腾讯看点"> 腾讯看点 </bk-menu-item>
+          </bk-submenu>
+          <bk-submenu
+            key="内容"
+            title="内容"
+          >
+            <bk-menu-item key="腾讯影业"> 腾讯影业 </bk-menu-item>
+            <bk-menu-item key="腾讯新闻"> 腾讯新闻 </bk-menu-item>
+            <bk-menu-item key="腾讯动漫"> 腾讯动漫 </bk-menu-item>
+            <bk-menu-item key="阅文集团"> 阅文集团 </bk-menu-item>
+            <bk-menu-item key="腾讯电竞"> 腾讯电竞 </bk-menu-item>
+          </bk-submenu>
+        </bk-menu>
+      </template>
+      <template #side-icon>
+        <tree-application-shape />
+      </template>
+      <div class="content-demo">这里填写内容</div>
+      <template #header>
+        <div class="header-demo">这里是头部导航</div>
+      </template>
+    </bk-navigation>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { bkTooltips } from '@bkui-vue/directives';
+  import { TreeApplicationShape } from 'bkui-vue/lib/icon';
+
+  // 注册 bkTooltips 指令
+  const vBkTooltips = bkTooltips;
+  const collapse = ref(true);
+  const navigationType = ref('dark');
+  const handleCollapse = v => {
+    collapse.value = !v;
+  };
+</script>
+<style lang="less">
+  .navigation-demo {
+    &-radio {
+      margin: 10px 0 20px 0;
+    }
+
+    &-content {
+      border: 1px solid #ddd;
+
+      &.theme-dark {
+        --nav-header-bg-color: #182132
+      }
+
+      &.theme-light {
+        --nav-header-bg-color: #182132
+      }
+
+      .content-demo {
+        font-size: 24px;
+      }
+
+      .header-demo {
+        margin-right: auto;
+        font-size: 20px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <bk-button
+    type="primary"
+    @click="handleDefault"
+  >
+    默认配置的通知提示 </bk-button
+  >&nbsp;&nbsp;
+  <bk-button
+    type="primary"
+    @click="handleHideTitle"
+  >
+    默认没有标题
+  </bk-button>
+</template>
+
+<script setup>
+  import { ref, h } from 'vue';
+
+  import { Notify } from 'bkui-vue';
+
+  const title = ref('你好！欢迎你使用蓝鲸智云产品');
+  const message = ref(
+    '你好，你申请的功能权限现已开通，请及时登录查询。如有疑问，请与蓝鲸智云管理人员联系或关注微信公众账号。',
+  );
+
+  function handleDefault() {
+    Notify({
+      title: title.value,
+      message: h('div', { style: 'color: red;' }, message.value),
+    });
+  }
+  function handleHideTitle() {
+    Notify({
+      message: message.value,
+    });
+  }
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <bk-button
+      type="primary"
+      @click="handleSingle({ delay: 10000 })"
+    >
+      10s 后关闭 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      type="primary"
+      @click="handleSingle({ delay: 0 })"
+    >
+      不自动关闭 </bk-button
+    >&nbsp;&nbsp;
+    <bk-button
+      type="primary"
+      @click="handleSingle({ dismissable: false })"
+    >
+      不显示关闭 icon
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import { Notify } from 'bkui-vue';
+
+  const title = ref('你好！欢迎你使用蓝鲸智云产品');
+  const message = ref(
+    '你好，你申请的功能权限现已开通，请及时登录查询。如有疑问，请与蓝鲸智云管理人员联系或关注微信公众账号。',
+  );
+
+  function handleSingle(config) {
+    const notifyConfig = {
+      title: title.value,
+      message: message.value,
+      ...config,
+    };
+    Notify(notifyConfig);
+  }
+</script>