@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/blueking/date-picker/index.tsx

@@ -0,0 +1,272 @@
+/*
+ * 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 BaselineTimeDemo from './baseline-time-demo.vue';
+import SimpleDemo from './simple-demo.vue';
+import TimeDemo from './time-demo.vue';
+import TimezoneDemo from './timezone-demo.vue';
+import ValidateDemo from './validate-demo.vue';
+const menuPropsJson: IPropsTableItem[] = [
+  {
+    name: 'behavior',
+    type: "'normal' | 'simplicity'",
+    default: "'normal'",
+    desc: '组件展示风格',
+    optional: ["'normal'", "'simplicity'"],
+  },
+  {
+    name: 'commonUseList',
+    type: 'DateValue[]',
+    default: '',
+    desc: '常用列表',
+    optional: [],
+  },
+  {
+    name: 'disabled',
+    type: 'boolean',
+    default: '',
+    desc: '是否禁用',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'format',
+    type: 'string',
+    default: '',
+    desc: '日期转换显示格式',
+    optional: [],
+  },
+  {
+    name: 'modelValue',
+    type: 'DateValue | dayjs.Dayjs[] | number[] | string[] | undefined',
+    default: '',
+    desc: '日期值',
+    optional: [],
+  },
+  {
+    name: 'needTimezone',
+    type: 'boolean',
+    default: '',
+    desc: '是否展示时区',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'timezone',
+    type: 'string',
+    default: '浏览器时区',
+    desc: '时区值',
+    optional: [],
+  },
+  {
+    name: 'validDateRange',
+    type: '[string,string]',
+    default: '',
+    desc: '有效可选的日期范围',
+    optional: [],
+  },
+  {
+    name: 'version',
+    type: 'number | string',
+    default: "'1.0'",
+    desc: '版本号 用于控制本地缓存',
+    optional: [],
+  },
+];
+const eventJson = [
+  {
+    name: 'update:modelValue',
+    desc: '更新date值的事件，以及相关信息',
+    params:
+      "value: IDatePickerProps['modelValue'], info: Array<{dayjs: dayjs.Dayjs | null, formatText: null | string}>",
+  },
+  {
+    name: 'update:timezone',
+    desc: '更新时区值的事件，以及时区信息',
+    params: 'value: string, timezoneInfo: ITimezoneItem',
+  },
+];
+const eventColumnMap = {
+  name: '名称',
+  desc: '说明',
+  params: '参数',
+};
+const exampleColumnJson = {
+  zh: '中文释义',
+  en: '英文释义',
+  from: 'from',
+  to: 'to',
+};
+const exampleJson = [
+  {
+    zh: '近5分钟',
+    en: 'last 5 minutes',
+    from: 'now-5m',
+    to: 'now',
+  },
+  {
+    zh: '今天到目前为止',
+    en: 'The day so far',
+    from: 'now/d',
+    to: 'now',
+  },
+  {
+    zh: '本周',
+    en: 'This week',
+    from: 'now/w',
+    to: 'now/w',
+  },
+  {
+    zh: '本周到目前为止',
+    en: 'This week so far',
+    from: 'now/w',
+    to: 'now',
+  },
+  {
+    zh: '本月',
+    en: 'This month',
+    from: 'now/M',
+    to: 'now/M',
+  },
+  {
+    zh: '本月到目前为止',
+    en: 'This month so far',
+    from: 'now/M',
+    to: 'now',
+  },
+  {
+    zh: '上个月',
+    en: 'Previous Month',
+    from: 'now-1M/M',
+    to: 'now-1M/M',
+  },
+  {
+    zh: '今年到目前为止',
+    en: 'This year so far',
+    from: 'now/Y',
+    to: 'now',
+  },
+  {
+    zh: '今年',
+    en: 'This Year',
+    from: 'now/Y',
+    to: 'now/Y',
+  },
+  {
+    zh: '去年',
+    en: 'Previous year',
+    from: 'now-1y/y',
+    to: 'now-1y/y',
+  },
+];
+export default defineComponent({
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='业务组件 Date Picker， 用于页面上更复杂的时间选择使用，支持 Vue2/Vue3 版本 无差别使用'
+          name='Date Picker'
+          npmLink='https://www.npmjs.com/package/@blueking/date-picker'
+        />
+        <DemoBox
+          componentName='blueking/date-picker'
+          demoName='base-demo'
+          desc='配置v-model直接使用'
+          subtitle='组件的基础用法'
+          title='基础用法'
+        >
+          <BaseDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/date-picker'
+          demoName='time-demo'
+          desc='组件支持过去时间、未来时间、自然时间、精确时间的配置和展示'
+          subtitle='不同的时间段配置'
+          title='时间段配置'
+        >
+          <TimeDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/date-picker'
+          demoName='timezone-demo'
+          desc='支持全球各个时区段和标志城市的时区配置'
+          subtitle='通过timezone属性来配置美国纽约时区'
+          title='时区配置'
+        >
+          <TimezoneDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/date-picker'
+          demoName='baseline-time-demo'
+          desc='基于某个时间点的最近时段'
+          subtitle='配置基准时间点'
+          title='基于某个时间点的最近时段'
+        >
+          <BaselineTimeDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/date-picker'
+          demoName='validate-demo'
+          desc='有效可选的日期范围'
+          subtitle='通过validDateRange属性来配置有效可选的日期范围'
+          title='可选时间段配置'
+        >
+          <ValidateDemo />
+        </DemoBox>
+        <DemoBox
+          componentName='blueking/date-picker'
+          demoName='simple-demo'
+          desc='配置behavior改变展示风格'
+          subtitle='简约风格'
+          title='展示风格'
+        >
+          <SimpleDemo />
+        </DemoBox>
+        <PropsBox
+          subtitle='组件支持以下时间单位： s (seconds) 、 m (minutes) 、 h (hours) 、 d (days) 、 w (weeks) 、 M (months) 、 和 y (years)。
+          (-)减号运算符是相对于当前日期和时间或 now 向后减一个时间单位。如果您想显示单位的完整周期（日、周、月等），请在末尾附加 /<time unit>。（+）加号同理。 '
+          columnMap={exampleColumnJson}
+          propsData={exampleJson}
+          title='now语法概述'
+        />
+        <PropsBox
+          propsData={menuPropsJson}
+          title='组件属性'
+        />
+        <PropsBox
+          columnMap={eventColumnMap}
+          propsData={eventJson}
+          title='组件事件'
+        />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,14 @@
+<template>
+  <date-picker
+    v-model="value"
+    behavior="simplicity"
+  />
+</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', 'now+1w']);
+</script>

package/knowledge/examples/blueking/date-picker/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-2d', 'now']);
+  const future = ref(['now', 'now+2d']);
+  const natural = ref(['now-1w/w', 'now-1w/w']);
+  const range = ref(['2024-03-11 00:20:00', 'now']);
+  const range2 = ref(['2024-03-11 00:20:00', '2024-06-11 00:20:00']);
+</script>
+<style>
+  .common-picker {
+    margin: 10px;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+<template>
+  <date-picker
+    v-model="value"
+    v-model:timezone="timezone"
+  />
+</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/d', 'now/d']);
+  const timezone = ref('America/New_York');
+</script>

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="common-picker-wrapper">
+    <span>可选范围: 今天（now/d ~ now/d）</span>
+    <date-picker
+      key="1"
+      class="common-picker"
+      v-model="recent"
+      :valid-date-range="['now/d', 'now/d']"
+    />
+    <span>可选范围: 本周（now/w ~ now/w）</span>
+    <date-picker
+      key="2"
+      class="common-picker"
+      v-model="future"
+      :valid-date-range="['now/w', 'now/w']"
+    />
+    <span>可选范围: 本月（now/M ~ now/M）</span>
+    <date-picker
+      key="3"
+      class="common-picker"
+      v-model="natural"
+      :valid-date-range="['now/M', 'now/M']"
+    />
+    <span>可选范围: 今年（now/y ~ now/y）</span>
+    <date-picker
+      key="4"
+      class="common-picker"
+      v-model="range"
+      :valid-date-range="['now/y', 'now/y']"
+    />
+    <span>可选范围: 特定的一个时间段（2024-03-11 00:20:00 ~ 2025-02-11 00:20:00）</span>
+    <date-picker
+      class="common-picker"
+      v-model="range2"
+      :valid-date-range="['2024-03-11 00:20:00', '2025-02-11 00:20:00']"
+    />
+  </div>
+</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-10m', 'now']);
+  const future = ref(['now', 'now+2d']);
+  const natural = ref(['now-2d/d', 'now-2d/d']);
+  const range = ref(['2024-03-11 00:20:00', 'now']);
+  const range2 = ref(['2024-03-11 00:20:00', '2024-06-11 00:20:00']);
+</script>
+<style lang="less">
+  .common-picker-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    > span {
+      font-weight: bold;
+      color: #333;
+    }
+
+    .common-picker {
+      display: flex;
+      width: fit-content;
+      margin: 2px 0 15px;
+    }
+  }
+</style>

package/knowledge/examples/blueking/ediatable/base-config-demo.vue

@@ -0,0 +1,97 @@
+<template>
+  <Ediatable :thead-list="theadList">
+      <template #data>
+        <RenderRow
+          v-for="(item, index) in tableData"
+          :key="item.rowKey"
+          ref="rowRefs"
+          :data="item"
+          :removeable="tableData.length < 2"
+          @add="payload => handleAppend(index, payload)"
+          @remove="handleRemove(index)"
+          @cluster-input-finish="value => handleClusterInputFinish(index, value)"
+        />
+      </template>
+    </Ediatable>
+    <Button
+      style="width: 88px; margin-top: 16px"
+      theme="primary"
+      @click="handleSubmit"
+    >
+      提交
+    </Button>
+</template>
+<script setup lang="tsx">
+  import { ref } from 'vue';
+  import Ediatable, { type IHead } from '@blueking/ediatable';
+  import RenderRow, { createRowData, type IDataRow } from './components/render-row.vue';
+  import { Button } from 'bkui-vue';
+
+  import '@blueking/ediatable/vue3/vue3.css';
+
+  const rowRefs = ref();
+  const tableData = ref([createRowData()]);
+
+  const theadList: IHead[] = [
+    {
+      minWidth: 120,
+      title: '目标集群',
+      width: 450,
+      renderAppend: () => <span style='color: red;margin-left:5px;font-size:10px'>必填</span>,
+      memo: '目标集群的提示',
+    },
+    {
+      minWidth: 110,
+      required: false,
+      title: '扩容节点类型',
+      width: 150,
+    },
+    {
+      minWidth: 100,
+      title: '扩容至(台)',
+      width: 300,
+    },
+    {
+      minWidth: 100,
+      title: '包含Key',
+      width: 300,
+    },
+    {
+      minWidth: 100,
+      title: '指定时间',
+      width: 300,
+    },
+    {
+      minWidth: 150,
+      required: false,
+      title: '切换模式',
+      width: 300,
+    },
+    {
+      fixed: 'right',
+      required: false,
+      title: '操作',
+      width: 120,
+    },
+  ];
+
+  const handleClusterInputFinish = (index: number, value: string) => {
+    tableData.value[index].cluster = value;
+    tableData.value[index].nodeType = 'Proxy';
+  };
+
+  // 追加一个集群
+  const handleAppend = (index: number, appendList: Array<IDataRow>) => {
+    tableData.value.splice(index + 1, 0, ...appendList);
+  };
+
+  // 删除一个集群
+  const handleRemove = (index: number) => {
+    tableData.value.splice(index, 1);
+  };
+
+  const handleSubmit = async () => {
+    const params = await Promise.all(rowRefs.value.map((item: { getValue: () => any }) => item.getValue()));
+    console.log('params>>>', params);
+  };
+</script>

package/knowledge/examples/blueking/ediatable/base-demo.vue

@@ -0,0 +1,106 @@
+<template>
+  <Ediatable>
+    <template #default>
+      <HeadColumn
+        :min-width="120"
+        :width="450"
+        memo="目标集群的提示"
+      >
+        <template #append>
+          <span style='color: red;margin-left:5px;font-size:10px'>必填</span>,
+        </template>
+        <span>目标集群</span>
+      </HeadColumn>
+      <HeadColumn
+        :required="false"
+        :min-width="110"
+        :width="150"
+      >
+        <span>扩容节点类型</span>
+      </HeadColumn>
+      <HeadColumn
+        :min-width="100"
+        :width="300"
+      >
+        <span>扩容至(台)</span>
+      </HeadColumn>
+      <HeadColumn
+        :min-width="100"
+        :width="300"
+      >
+        <span>包含Key</span>
+      </HeadColumn>
+      <HeadColumn
+        :min-width="100"
+        :width="300"
+      >
+        <span>指定时间</span>
+      </HeadColumn>
+      <HeadColumn
+        :required="false"
+        :min-width="150"
+        :width="300"
+      >
+        <span>切换模式</span>
+      </HeadColumn>
+      <HeadColumn
+        fixed="right"
+        :required="false"
+        :width="120"
+      >
+        操作
+      </HeadColumn>
+    </template>
+    <template #data>
+      <RenderRow
+        v-for="(item, index) in tableData"
+        :key="item.rowKey"
+        ref="rowRefs"
+        :data="item"
+        :removeable="tableData.length < 2"
+        @add="payload => handleAppend(index, payload)"
+        @remove="handleRemove(index)"
+        @cluster-input-finish="value => handleClusterInputFinish(index, value)"
+      />
+    </template>
+  </Ediatable>
+  <Button
+    style="width: 88px; margin-top: 16px"
+    theme="primary"
+    @click="handleSubmit"
+  >
+    提交
+  </Button>
+</template>
+<script setup lang="tsx">
+  import { ref } from 'vue';
+  import Ediatable, { HeadColumn } from '@blueking/ediatable';
+  import RenderRow, { createRowData, type IDataRow } from './components/render-row.vue';
+  import { Button } from 'bkui-vue';
+
+  import '@blueking/ediatable/vue3/vue3.css';
+
+  const rowRefs = ref();
+  const tableData = ref([createRowData()]);
+
+  const handleClusterInputFinish = (index: number, value: string) => {
+    tableData.value[index].cluster = value;
+    tableData.value[index].nodeType = 'Proxy';
+  };
+
+  // 追加一个集群
+  const handleAppend = (index: number, appendList: Array<IDataRow>) => {
+    tableData.value.splice(index + 1, 0, ...appendList);
+  };
+
+  // 删除一个集群
+  const handleRemove = (index: number) => {
+    tableData.value.splice(index, 1);
+  };
+
+  const handleSubmit = async () => {
+    const params = await Promise.all(rowRefs.value.map((item: { getValue: () => any }) => item.getValue()));
+    console.log('params>>>', params);
+  };
+</script>
+

package/knowledge/examples/blueking/ediatable/components/cluster-name.vue

@@ -0,0 +1,62 @@
+<template>
+  <InputColumn
+    ref="editRef"
+    v-model="localValue"
+    placeholder="请输入集群"
+    :rules="rules"
+    @submit="handleInputFinish"
+  />
+</template>
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  import { InputColumn } from '@blueking/ediatable';
+
+  interface Props {
+    data?: string;
+  }
+
+  interface Emits {
+    (e: 'input-finish', value: string): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: '',
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const localValue = ref(props.data);
+  const editRef = ref();
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(value),
+      message: '目标集群不能为空',
+    },
+  ];
+
+  watch(
+    () => props.data,
+    data => {
+      localValue.value = data;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleInputFinish = (value: string) => {
+    emits('input-finish', value);
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return editRef.value.getValue().then(() => localValue.value);
+    },
+  });
+</script>