@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/badge/badge-demo.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="badge-demo">
+    <bk-badge style="margin-right: 40px">
+      <bk-button theme="primary"> top-right </bk-button>
+      <template #icon>
+        <help />
+      </template>
+    </bk-badge>
+    <bk-badge
+      style="margin-right: 40px"
+      :count="999"
+      position="bottom-left"
+      theme="success"
+    >
+      <bk-button theme="primary"> bottom-left </bk-button>
+    </bk-badge>
+    <bk-badge
+      style="margin-right: 40px"
+      :count="999"
+      position="top-left"
+      theme="danger"
+      dot
+    >
+      <bk-button theme="primary"> top-left </bk-button>
+    </bk-badge>
+    <bk-badge
+      style="margin-right: 40px"
+      :count="999"
+      position="top-right"
+      theme="danger"
+      dot
+    >
+      <bk-button theme="primary"> top-right </bk-button>
+    </bk-badge>
+    <bk-badge
+      style="margin-right: 40px"
+      :count="'数字字符串'"
+      :radius="'0px'"
+      position="bottom-right"
+      theme="warning"
+    >
+      <bk-button theme="primary"> bottom-right </bk-button>
+    </bk-badge>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { Help } from 'bkui-vue/lib/icon';
+  export default defineComponent({
+    components: {
+      Help,
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .badge-demo {
+    width: 90%;
+    padding: 30px;
+    margin: 0 auto;
+  }
+</style>

package/knowledge/examples/badge/badge-dot.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="badge-demo">
+    <bk-badge
+      style="margin-right: 40px"
+      :count="999"
+      position="top-left"
+      theme="danger"
+      dot
+    >
+      <bk-button theme="primary"> top-left </bk-button>
+    </bk-badge>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    components: {},
+  });
+</script>
+<style lang="less" scoped>
+  .badge-demo {
+    width: 90%;
+    padding: 30px;
+    margin: 0 auto;
+  }
+</style>

package/knowledge/examples/badge/badge.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="badge-demo">
+    <span style="position: relative">
+      未读消息
+      <bk-badge
+        style="margin-left: 5px"
+        :count="2"
+        theme="danger"
+      />
+    </span>
+    <span style="position: relative">
+      <bk-badge
+        style="margin-right: 5px; margin-left: 40px"
+        theme="danger"
+        dot
+      />
+      未读消息
+    </span>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    components: {},
+  });
+</script>
+<style lang="less" scoped>
+  .badge-demo {
+    width: 90%;
+    padding: 30px;
+    margin: 0 auto;
+  }
+</style>

package/knowledge/examples/badge/index.tsx

@@ -0,0 +1,191 @@
+/*
+ * 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 Badge from './badge.vue';
+import BadgeDemo from './badge-demo.vue';
+import BadgeDot from './badge-dot.vue';
+const badgeProps: IPropsTableItem[] = [
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'primary',
+    desc: 'badge 主题',
+    optional: ['primary', 'success', 'info', 'warning', 'danger', 'default'],
+  },
+  {
+    name: 'count',
+    type: 'String | Number',
+    default: 1,
+    desc: '显示的数字',
+    optional: [],
+  },
+  {
+    name: 'position',
+    type: 'String',
+    default: 'top-right',
+    desc: 'badge 显示位置',
+    optional: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+  },
+  {
+    name: 'radius',
+    type: 'String',
+    default: '18px',
+    desc: '设置边框的 radius 属性值',
+    optional: [],
+  },
+  {
+    name: 'valLength',
+    type: 'Number',
+    default: 3,
+    desc: '数字显示最大长度，最大值建议英文不超过3个字母，中文不超过2个汉字',
+    optional: [],
+  },
+  {
+    name: 'overflowCount',
+    type: 'Number',
+    default: 99,
+    desc: '组件显示的最大值，当 count 超过 overflowCount，显示数字 +；仅当设置了 Number 类型的 count 值时生效',
+    optional: [],
+  },
+  {
+    name: 'dot',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否仅显示红点；当设置 dot 为 true 时，count, icon, overflowCount 均会被忽略',
+    optional: [],
+  },
+  {
+    name: 'visible',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否显示 badge',
+    optional: [],
+  },
+  {
+    name: 'extCls',
+    type: 'String',
+    default: '-',
+    desc: '外部设置的 class 名',
+    optional: [],
+  },
+];
+const badgeEvents: IPropsTableItem[] = [
+  {
+    name: 'hover',
+    type: 'Function',
+    default: '-',
+    desc: 'hover 事件的回调',
+    optional: [],
+  },
+  {
+    name: 'leave',
+    type: 'Function',
+    default: '-',
+    desc: 'leave 事件的回调',
+    optional: [],
+  },
+];
+const badgeSlots: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Slot',
+    default: '-',
+    desc: '默认插槽，用于放置需要标记的内容',
+    optional: [],
+  },
+  {
+    name: 'icon',
+    type: 'Slot',
+    default: '-',
+    desc: '图标插槽，用于显示图标内容',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Badge 组件， 可以出现在任意 DOM 节点角上的数字或状态标记。'
+          designLink='https://bkdesign.bk.tencent.com/design/37'
+          name='Badge'
+        />
+        <DemoBox
+          componentName='badge'
+          demoName='badge-demo'
+          desc='用默认配置初始化组件'
+          subtitle=''
+          title='基础用法'
+        >
+          <BadgeDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='badge'
+          demoName='badge'
+          desc='可在不包裹任何元素情况下，独立使用 badge'
+          subtitle=''
+          title='不包裹任何元素，独立使用'
+        >
+          <Badge />
+        </DemoBox>
+        <DemoBox
+          componentName='badge'
+          demoName='badge-dot'
+          desc='配置参数 dot'
+          subtitle=''
+          title='无内容红点'
+        >
+          <BadgeDot />
+        </DemoBox>
+        <PropsBox
+          propsData={badgeProps}
+          subtitle=''
+          title='Badge 属性'
+        />
+        <PropsBox
+          propsData={badgeEvents}
+          subtitle=''
+          title='Badge 事件'
+        />
+        <PropsBox
+          propsData={badgeSlots}
+          subtitle=''
+          title='Badge 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/blueking/crontab/demo/base.vue

@@ -0,0 +1,7 @@
+<template>
+  <BkCrontab model-value="* * * * *" />
+</template>
+<script setup lang="ts">
+  import BkCrontab from '@blueking/crontab';
+  import('@blueking/crontab/vue3/vue3.css');
+</script>

package/knowledge/examples/blueking/crontab/index.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 './demo/base.vue';
+const menuPropsJson: IPropsTableItem[] = [
+  {
+    name: 'modelValue',
+    type: 'string',
+    default: '',
+    desc: '表达式',
+    optional: [],
+  },
+  {
+    name: 'shortcuts',
+    type: '{label: string; value: string}[]',
+    default: '',
+    desc: '快捷选项',
+    optional: [],
+  },
+  {
+    name: 'renderExtends',
+    type: '() => VNode',
+    default: '',
+    desc: '自定义内容',
+    optional: [],
+  },
+];
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='Liunx 定时任务表达'
+          name='Cronatb'
+          npmLink='https://www.npmjs.com/package/@blueking/crontab'
+        />
+        <DemoBox
+          componentName='blueking/crontab'
+          demoName='demo/base'
+          desc='modelValue 设置值'
+          subtitle='组件的基础用法'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <PropsBox
+          propsData={menuPropsJson}
+          title='组件属性'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/blueking/date-picker/base-demo.vue

@@ -0,0 +1,11 @@
+<template>
+  <date-picker v-model="value" />
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import DatePicker from '@blueking/date-picker';
+
+  import '@blueking/date-picker/vue3/vue3.css';
+  const value = ref(['now-1d', 'now']);
+</script>

package/knowledge/examples/blueking/date-picker/baseline-time-demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <date-picker
+    class="common-picker"
+    v-model="recent"
+  />
+  <date-picker
+    class="common-picker"
+    v-model="future"
+  />
+  <date-picker
+    class="common-picker"
+    v-model="natural"
+  />
+  <date-picker
+    class="common-picker"
+    v-model="range"
+  />
+  <date-picker
+    class="common-picker"
+    v-model="range2"
+  />
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import DatePicker from '@blueking/date-picker';
+
+  import '@blueking/date-picker/vue3/vue3.css';
+  const recent = ref(['(now/d)-1d', '(now/d)']);
+  const future = ref(['(now-1d/d)-1h', '(now-1d/d)']);
+  const natural = ref(['(now-2d/d)-30m', '(now-2d/d)']);
+  const range = ref(['(now-12d/d)-88m', '(now-12d/d)']);
+  const range2 = ref(['(2024-03-11 00:20:00)-3d', '(2024-03-11 00:20:00)']);
+</script>
+<style>
+  .common-picker {
+    margin: 10px;
+  }
+</style>