@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/link/index.tsx

@@ -0,0 +1,120 @@
+/*
+ * 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 DisabledDemo from './disable-demo.vue';
+import IconDemo from './icon-demo.vue';
+
+const linkPropsJson: IPropsTableItem[] = [
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'default',
+    desc: '链接的主题颜色',
+    optional: ['danger', 'default', 'primary', 'success', 'warning'],
+  },
+  {
+    name: 'href',
+    type: 'String',
+    default: '',
+    desc: '链接的 URL 地址',
+    optional: [],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: false,
+    desc: '是否禁用链接',
+    optional: [],
+  },
+  {
+    name: 'underline',
+    type: 'Boolean',
+    default: false,
+    desc: '是否显示下划线',
+    optional: [],
+  },
+  {
+    name: 'target',
+    type: 'String',
+    default: '_self',
+    desc: '链接的打开方式',
+    optional: ['_self', '_blank', '_parent', '_top'],
+  },
+];
+
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Link 文字超链接'
+          designLink='https://bkdesign.bk.tencent.com/design/143'
+          name='Link 文字链接'
+        />
+
+        <DemoBox
+          componentName='link'
+          demoName='base-demo'
+          desc='基础的文字链接用法'
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='link'
+          demoName='disable-demo'
+          desc='文字链接不可用状态，添加underline实现下划线'
+          title='禁用状态和下划线'
+        >
+          <DisabledDemo></DisabledDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='link'
+          demoName='icon-demo'
+          desc='在 slot 中直接设置图标'
+          title='支持设置图标'
+        >
+          <IconDemo></IconDemo>
+        </DemoBox>
+
+        <PropsBox
+          propsData={linkPropsJson}
+          subtitle=''
+          title='Link 属性'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/loading/demo/basic.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <bk-loading loading>
+      <div style="width: 100%; height: 360px" />
+    </bk-loading>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="postcss">
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

package/knowledge/examples/loading/demo/directive.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="loading-directive-control">
+    <div>
+      <span>loading</span>
+      <bk-switcher v-model="loading" />
+    </div>
+    <div>
+      <span>title</span>
+      <bk-input v-model="title" />
+    </div>
+  </section>
+  <div
+    class="directive-loading-box"
+    v-bkloading="loadingConf"
+  >
+    directive
+  </div>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue';
+  const loading = ref(true);
+  const title = ref('loading...');
+
+  const loadingConf = reactive({
+    loading,
+    title,
+  });
+</script>
+
+<style lang="postcss">
+  .loading-directive-control {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: max-content 1fr;
+    align-items: center;
+
+    > div {
+      display: grid;
+      align-items: center;
+      grid-gap: 10px;
+      grid-template-columns: max-content 1fr;
+    }
+  }
+
+  .directive-loading-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 360px;
+  }
+</style>

package/knowledge/examples/loading/demo/mask.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <bk-loading
+      :opacity="0.6"
+      :z-index="100"
+      color="#62ba62"
+      loading
+    >
+      <div class="loading-container">Content</div>
+    </bk-loading>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="postcss">
+  .loading-container {
+    position: relative;
+    z-index: 99;
+    display: flex;
+    width: 100%;
+    height: 360px;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

package/knowledge/examples/loading/demo/mode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <bk-radio-group v-model="size">
+      <bk-radio label="mini" />
+      <bk-radio label="small" />
+      <bk-radio label=""> normal </bk-radio>
+      <bk-radio label="large" />
+    </bk-radio-group>
+
+    <bk-loading
+      :size="size"
+      mode="spin"
+      theme="primary"
+      loading
+    >
+      <div style="width: 100%; height: 360px" />
+    </bk-loading>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const size = ref('small');
+</script>
+
+<style lang="postcss">
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

package/knowledge/examples/loading/demo/size.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <bk-radio-group v-model="size">
+      <bk-radio label="mini" />
+      <bk-radio label="small" />
+      <bk-radio label=""> normal </bk-radio>
+      <bk-radio label="large" />
+    </bk-radio-group>
+    <bk-loading
+      :size="size"
+      loading
+    >
+      <div style="width: 100%; height: 360px" />
+    </bk-loading>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const size = ref('small');
+</script>
+
+<style lang="postcss">
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <bk-radio-group v-model="theme">
+      <bk-radio label="primary" />
+      <bk-radio label="danger" />
+      <bk-radio label="warning" />
+      <bk-radio label="white" />
+      <bk-radio label=""> normal </bk-radio>
+      <bk-radio label="default" />
+    </bk-radio-group>
+    <bk-loading
+      :theme="theme"
+      loading
+    >
+      <div :style="`width: 100%; height: 360px; background: ${theme === 'white' ? 'gray' : 'white'};`" />
+    </bk-loading>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const theme = ref('');
+</script>
+
+<style lang="postcss">
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

package/knowledge/examples/loading/demo/title.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <bk-loading
+      title="数据加载中"
+      loading
+    >
+      <div class="loading-title-container">Content</div>
+    </bk-loading>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="postcss">
+  .loading-title-container {
+    display: flex;
+    width: 100%;
+    height: 360px;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

package/knowledge/examples/loading/index.tsx

@@ -0,0 +1,187 @@
+/*
+ * 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 Basic from './demo/basic.vue';
+import Directive from './demo/directive.vue';
+import Mask from './demo/mask.vue';
+import Mode from './demo/mode.vue';
+import Size from './demo/size.vue';
+import Theme from './demo/theme.vue';
+import Title from './demo/title.vue';
+// import Number from './demo/number.vue';
+// import Password from './demo/password.vue';
+// import Search from './demo/search.vue';
+// import Simple from './demo/simple.vue';
+// import Size from './demo/size.vue';
+// import Status from './demo/status.vue';
+// import Textarea from './demo/textarea.vue';;
+// 输入框属性列表
+const loadingProps: IPropsTableItem[] = [
+  {
+    name: 'loading',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否显示 loading',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'mode',
+    type: 'String',
+    default: 'normal',
+    desc: '空白提示',
+    optional: ['normal', 'spin'],
+  },
+  {
+    name: 'title',
+    type: 'String',
+    default: '',
+    desc: '是否不可用',
+    optional: [],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: '',
+    desc: 'primary danger warning(spin模式下支持: primary danger warning success, white)',
+    optional: ['default', 'primary', 'danger', 'warning', 'white'],
+  },
+  {
+    name: 'opacity',
+    type: 'number',
+    default: 0.9,
+    desc: 'loading 遮罩的背景透明度 （注：如设置了 color 属性为 rgba 类型颜色则此属性将被覆盖）',
+    optional: ['0-1之间的小数'],
+  },
+  {
+    name: 'color',
+    type: 'String',
+    default: '',
+    desc: 'loading 遮罩的背景色 支持 rgb/hex/rgba',
+    optional: [],
+  },
+];
+
+const loadingSlot: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Slot',
+    default: null,
+    desc: '默认插槽',
+    optional: [],
+  },
+];
+
+const demos = [
+  {
+    // '基础输入框',
+    title: '基础用法',
+    desc: '对指定 dom 节点添加 loading 效果',
+    componentName: 'loading',
+    demoName: 'demo/basic',
+    DemoComponent: Basic,
+  },
+  {
+    // '基础输入框',
+    title: '指令用法',
+    desc: '组件提供了自定义指令 v-bkloading，方便对指定 dom 节点添加 loading 效果',
+    componentName: 'loading',
+    demoName: 'demo/directive',
+    DemoComponent: Directive,
+  },
+  {
+    title: '配置大小',
+    desc: '传入 size，可以配置 loading 效果大小',
+    componentName: 'loading',
+    demoName: 'demo/size',
+    DemoComponent: Size,
+  },
+  {
+    title: '配置主题',
+    desc: '传入 theme，可以配置 loading 效果主题',
+    componentName: 'loading',
+    demoName: 'demo/theme',
+    DemoComponent: Theme,
+  },
+  {
+    title: '配置 mode loading的显示形式',
+    desc: '配置 mode 为 spin 可使其以spin的形式显示。',
+    componentName: 'loading',
+    demoName: 'demo/mode',
+    DemoComponent: Mode,
+  },
+  {
+    title: '配置 loading 遮罩的背景透明度与背景色',
+    desc: 'loading 遮罩的背景透明度会由传入的 opacity 参数决定，此参数为 0 至 1 之间的数字，默认为 0.9 背景色则由color属性决定。',
+    componentName: 'loading',
+    demoName: 'demo/mask',
+    DemoComponent: Mask,
+  },
+  {
+    title: '配置文案',
+    desc: '传入 title，值会被渲染到 loading 图标的下方',
+    componentName: 'loading',
+    demoName: 'demo/title',
+    DemoComponent: Title,
+  },
+];
+
+export default defineComponent({
+  name: 'Input',
+
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='覆盖正在加载数据的组件一个 loading 层'
+          designLink='https://bkdesign.bk.tencent.com/design/138'
+          name='Loading'
+          npmLink={`${import.meta.env.VITE_APP_BASE_URL ?? ''}/loading`}
+        />
+        {demos.map(({ DemoComponent, ...demo }) => (
+          <DemoBox {...demo}>
+            <DemoComponent />
+          </DemoBox>
+        ))}
+        <PropsBox
+          propsData={loadingProps}
+          subtitle=''
+          title='Loading 属性'
+        />
+        <PropsBox
+          propsData={loadingSlot}
+          subtitle=''
+          title='Loading 插槽'
+        />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,62 @@
+<template>
+  <bk-menu
+    :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 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 name="天美">
+      <bk-menu-item
+        key="王者荣耀"
+        @click="handleClick"
+      >
+        王者荣耀
+      </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>
+
+<script setup lang="ts">
+  import { bkTooltips } from '@bkui-vue/directives';
+
+  const vBkTooltips = bkTooltips;
+  const handleClick = () => {
+    console.log('click');
+  };
+</script>