@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/radio/demo/radio-card.vue

@@ -0,0 +1,15 @@
+<template>
+  <bk-radio-group
+    v-model="radioGroupValue"
+    type="card"
+  >
+    <bk-radio-button label="QQ" />
+    <bk-radio-button label="微信" />
+    <bk-radio-button label="Email" />
+  </bk-radio-group>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  const radioGroupValue = ref('微信');
+</script>

package/knowledge/examples/radio/demo/radio-checked.vue

@@ -0,0 +1,11 @@
+<template>
+  <bk-radio label="QQ" />
+  <bk-radio
+    label="微信"
+    checked
+  />
+  <bk-radio label="Email" />
+</template>
+<script setup>
+  import { BkRadio } from '@bkui-vue/radio';
+</script>

package/knowledge/examples/radio/demo/radio-disabled.vue

@@ -0,0 +1,16 @@
+<template>
+  <bk-radio-group v-model="radioGroupValue">
+    <bk-radio
+      label="QQ"
+      disabled
+    />
+    <bk-radio label="微信" />
+    <bk-radio label="Email" />
+  </bk-radio-group>
+  <div style="margin-top: 10px">选中：{{ radioGroupValue }}</div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  const radioGroupValue = ref('微信');
+</script>

package/knowledge/examples/radio/demo/radio-group-capsule.vue

@@ -0,0 +1,17 @@
+<template>
+  <bk-radio-group
+    v-model="radioGroupValue"
+    type="capsule"
+  >
+    <bk-radio-button label="QQ" />
+    <bk-radio-button label="原始数据" />
+    <bk-radio-button label="字典翻译" />
+    <bk-radio-button label="微信" />
+    <bk-radio-button label="Email" />
+  </bk-radio-group>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  const radioGroupValue = ref('微信');
+</script>

package/knowledge/examples/radio/demo/radio-group.vue

@@ -0,0 +1,41 @@
+<template>
+  <bk-radio-group v-model="radioGroupValue">
+    <bk-radio
+      :before-change="() => handleBeforeChange('QQ')"
+      label="QQ"
+    />
+    <bk-radio
+      :before-change="() => handleBeforeChange('微信')"
+      label="微信"
+    />
+    <bk-radio
+      :before-change="() => handleBeforeChange('Email')"
+      label="Email"
+    />
+  </bk-radio-group>
+  <div style="margin-top: 10px">选中：{{ radioGroupValue }}</div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import InfoBox from '@bkui-vue/info-box';
+  const flag = ref(false);
+  const hasPackage = ref(true);
+  const radioGroupValue = ref('微信');
+  function handleBeforeChange(item) {
+    if (hasPackage.value && !flag.value) {
+      InfoBox({
+        title: '确认要切换类型吗',
+        subTitle: 'before-change 配置项示例',
+        confirmText: '确认',
+        cancelText: '取消',
+        onCancel: () => {},
+        onConfirm: () => {
+          radioGroupValue.value = item;
+        },
+      });
+      return false;
+    }
+    return true;
+  }
+</script>

package/knowledge/examples/radio/demo/radio.vue

@@ -0,0 +1,45 @@
+<template>
+  <bk-radio
+    v-model="value"
+    :before-change="() => handleBeforeChange('QQ')"
+    label="QQ"
+  />
+  <bk-radio
+    v-model="value"
+    :before-change="() => handleBeforeChange('微信')"
+    label="微信"
+  />
+  <bk-radio
+    v-model="value"
+    :before-change="() => handleBeforeChange('Email')"
+    label="Email"
+  />
+  <div style="margin-top: 10px">选中：{{ value }}</div>
+</template>
+<script setup>
+  import { ref } from 'vue';
+
+  import InfoBox from '@bkui-vue/info-box';
+  import { BkRadio } from '@bkui-vue/radio';
+  const flag = ref(false);
+  const hasPackage = ref(true);
+  const value = ref('微信');
+
+  function handleBeforeChange(item) {
+    console.log('进来了吗？');
+    if (hasPackage.value && !flag.value) {
+      InfoBox({
+        title: '确认要切换类型吗？',
+        subTitle: 'before-change 配置项示例',
+        confirmText: '确认',
+        cancelText: '取消',
+        onCancel: () => {},
+        onConfirm: () => {
+          value.value = item;
+        },
+      });
+      return false;
+    }
+    return true;
+  }
+</script>

package/knowledge/examples/radio/index.tsx

@@ -0,0 +1,300 @@
+/*
+ * 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 DemoRadio from './demo/radio.vue';
+import DemoRadioButton from './demo/radio-button.vue';
+import DemoRadioCard from './demo/radio-card.vue';
+import DemoRadioChecked from './demo/radio-checked.vue';
+import DemoRadioDisabled from './demo/radio-disabled.vue';
+import DemoRadioGroup from './demo/radio-group.vue';
+import DemoRadioGroupCapsule from './demo/radio-group-capsule.vue';
+
+const radioProps: IPropsTableItem[] = [
+  {
+    name: 'model-value / v-model',
+    type: 'String',
+    default: null,
+    desc: '绑定值',
+    optional: [],
+  },
+  {
+    name: 'label',
+    type: 'String / Number / Boolean',
+    default: null,
+    desc: '选中状态的值',
+    optional: [],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: '禁用',
+    optional: [],
+  },
+  {
+    name: 'checked',
+    type: 'Boolean',
+    default: 'false',
+    desc: '默认是否选中',
+    optional: [],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: null,
+    desc: '尺寸',
+    optional: ['large', 'small'],
+  },
+  {
+    name: 'beforeChange',
+    type: 'function',
+    default: null,
+    desc: '值改变之前的回调函数，返回值为 false 会终止值改变',
+    optional: [],
+  },
+];
+
+const radioEvents: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'String',
+    default: null,
+    desc: '当绑定值变化时触发的事件',
+    optional: [],
+  },
+];
+
+const radioGroupProps: IPropsTableItem[] = [
+  {
+    name: 'model-value / v-model',
+    type: 'String',
+    default: null,
+    desc: '绑定值',
+    optional: [],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: '禁用',
+    optional: [],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: null,
+    desc: '尺寸',
+    optional: ['large', 'small'],
+  },
+  {
+    name: 'withValidate',
+    type: 'Boolean',
+    default: true,
+    desc: '值改变时是否触发表单的校验',
+  },
+  {
+    name: 'beforeChange',
+    type: 'function',
+    default: null,
+    desc: '值改变之前的回调函数，返回值为 false 会终止值改变',
+    optional: [],
+  },
+];
+
+const radioGroupEvents: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'String',
+    default: null,
+    desc: '当绑定值变化时触发的事件',
+    optional: [],
+  },
+];
+
+const radioButtonProps: IPropsTableItem[] = [
+  {
+    name: 'model-value / v-model',
+    type: 'String',
+    default: null,
+    desc: '绑定值',
+    optional: [],
+  },
+  {
+    name: 'label',
+    type: 'String / Number / Boolean',
+    default: null,
+    desc: '选中状态的值',
+    optional: [],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: 'false',
+    desc: '禁用',
+    optional: [],
+  },
+  {
+    name: 'checked',
+    type: 'Boolean',
+    default: 'false',
+    desc: '默认是否选中',
+    optional: [],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: null,
+    desc: '尺寸',
+    optional: ['large', 'small'],
+  },
+  {
+    name: 'before-change',
+    type: '(event: boolean | number | string) => Promise<boolean> | boolean',
+    default: '() => true',
+    desc: '值改变之前的回调函数，返回值为 false 会终止值改变',
+  },
+];
+
+const radioButtonEvents: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'String',
+    default: null,
+    desc: '当绑定值变化时触发的事件',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  name: 'Radio',
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='表单-单选框，在一组选项中进行单选'
+          designLink='https://bkdesign.bk.tencent.com/design/128'
+          name='Radio'
+        />
+        <DemoBox
+          componentName='radio'
+          demoName='/demo/radio'
+          desc=''
+          title='基础用法'
+        >
+          <DemoRadio />
+        </DemoBox>
+        <DemoBox
+          componentName='radio'
+          demoName='/demo/radio-group'
+          desc='配合 bk-radio-group 使用'
+          title='单选框组'
+        >
+          <DemoRadioGroup />
+        </DemoBox>
+        <DemoBox
+          componentName='radio'
+          demoName='/demo/radio-checked'
+          desc=''
+          title='默认选中'
+        >
+          <DemoRadioChecked />
+        </DemoBox>
+        <DemoBox
+          componentName='radio'
+          demoName='/demo/radio-disabled'
+          desc=''
+          title='禁用状态'
+        >
+          <DemoRadioDisabled />
+        </DemoBox>
+
+        <DemoBox
+          componentName='radio'
+          demoName='/demo/radio-button'
+          desc=''
+          title='按钮样式'
+        >
+          <DemoRadioButton />
+        </DemoBox>
+
+        <DemoBox
+          componentName='radio'
+          demoName='/demo/radio-card'
+          desc='100%充满父容器，每个子项等分父容器宽度'
+          title='卡片样式'
+        >
+          <DemoRadioCard />
+        </DemoBox>
+
+        <DemoBox
+          componentName='radio'
+          demoName='/demo/radio-group-capsule'
+          desc=''
+          title='胶囊样式'
+        >
+          <DemoRadioGroupCapsule />
+        </DemoBox>
+
+        <PropsBox
+          propsData={radioGroupProps}
+          subtitle=''
+          title='Radios-Groups 属性'
+        />
+        <PropsBox
+          propsData={radioProps}
+          subtitle=''
+          title='Radios 属性'
+        />
+        <PropsBox
+          propsData={radioButtonProps}
+          subtitle=''
+          title='Radios-Button 属性'
+        />
+        <PropsBox
+          propsData={radioGroupEvents}
+          subtitle=''
+          title='Radios-Groups 事件'
+        />
+        <PropsBox
+          propsData={radioEvents}
+          subtitle=''
+          title='Radios 事件'
+        />
+        <PropsBox
+          propsData={radioButtonEvents}
+          subtitle=''
+          title='Radios-Button 事件'
+        />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,11 @@
+<template>
+  <bk-rate
+    :editable="false"
+    :model-value="disableRate"
+    size="default"
+  />
+</template>
+
+<script setup>
+  const disableRate = 3.4;
+</script>

package/knowledge/examples/rate/edit-demo.vue

@@ -0,0 +1,16 @@
+<template>
+  <bk-rate
+    v-model="rateValue"
+    @change="handleRateChange"
+  />
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const rateValue = ref(3);
+
+  const handleRateChange = rate => {
+    alert(rate);
+  };
+</script>

package/knowledge/examples/rate/index.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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 EditDemo from './edit-demo.vue';
+import SizeDemo from './size-demo.vue';
+
+const ratePropsJson: IPropsTableItem[] = [
+  {
+    name: 'model-value / v-model',
+    type: 'Number',
+    default: '0',
+    desc: '分数',
+    optional: [],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: 'default',
+    desc: '尺寸',
+    optional: ['small', 'default', 'large', 'huge'],
+  },
+  {
+    name: 'editable',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否可编辑',
+    optional: [],
+  },
+  {
+    name: 'withValidate',
+    type: 'Boolean',
+    default: 'true',
+    desc: '值改变的时候是否触发校验',
+    optional: [],
+  },
+];
+
+const rateEventJson: IPropsTableItem[] = [
+  {
+    name: 'change',
+    type: 'Function',
+    default: '',
+    desc: '评分发生变化的时候',
+    optional: [],
+  },
+  {
+    name: 'hover-change',
+    type: 'Function',
+    default: '',
+    desc: '鼠标hover评分的时候',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {},
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='评分组件'
+          designLink='https://bkdesign.bk.tencent.com/design/147'
+          name='Rate 评分'
+        />
+
+        <DemoBox
+          componentName='rate'
+          demoName='base-demo'
+          desc='通过 editable 设置为 false, 让 rate 组件只能查看不能编辑，只有非编辑态可以展示小数'
+          subtitle=''
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='rate'
+          demoName='size-demo'
+          desc='通过 size 属性控制组件大小'
+          subtitle=''
+          title='控制组件大小'
+        >
+          <SizeDemo></SizeDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='rate'
+          demoName='edit-demo'
+          desc='通过监听 change 事件来做出响应'
+          subtitle=''
+          title='监听 change 事件'
+        >
+          <EditDemo></EditDemo>
+        </DemoBox>
+
+        <PropsBox
+          propsData={ratePropsJson}
+          subtitle=''
+          title='Rate 属性'
+        />
+
+        <PropsBox
+          propsData={rateEventJson}
+          subtitle=''
+          title='Rate 事件'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/rate/size-demo.vue

@@ -0,0 +1,19 @@
+<template>
+  <p
+    v-for="(size, index) in sizeArr"
+    :key="index"
+  >
+    {{ size }}:
+    <bk-rate
+      v-model="rateValue"
+      :size="size"
+    />
+  </p>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  const rateValue = ref(3);
+  const sizeArr = ref(['small', 'default', 'large', 'huge']);
+</script>

package/knowledge/examples/resize-layout/advance-demo.vue

@@ -0,0 +1,52 @@
+<template>
+  <bk-resize-layout
+    style="height: 500px"
+    collapsible
+  >
+    <template #aside>
+      <bk-resize-layout
+        style="height: 100%"
+        :border="false"
+        placement="top"
+        collapsible
+      >
+        <template #aside>
+          <div>aside-top</div>
+        </template>
+        <template #main>
+          <div>main-1</div>
+        </template>
+      </bk-resize-layout>
+    </template>
+    <template #main>
+      <bk-resize-layout
+        style="height: 100%"
+        :border="false"
+        placement="bottom"
+        collapsible
+      >
+        <template #aside>
+          <div>aside-bottom</div>
+        </template>
+        <template #main>
+          <bk-resize-layout
+            style="height: 100%"
+            :border="false"
+            placement="right"
+            collapsible
+          >
+            <template #aside>
+              <div>aside-right</div>
+            </template>
+            <template #main>
+              <div>main-3</div>
+            </template>
+          </bk-resize-layout>
+        </template>
+      </bk-resize-layout>
+    </template>
+  </bk-resize-layout>
+</template>
+<script setup>
+  import BkResizeLayout from '@bkui-vue/resize-layout';
+</script>