@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/process.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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, reactive } from 'vue';
+
+import BkProcess from '@bkui-vue/process';
+export default defineComponent({
+  name: 'SiteProcess',
+  setup() {
+    const state = reactive({
+      objectSteps: [
+        { content: '测试一', icon: 1, description: '这是描述' },
+        { content: '测试二', description: '这是描述2', status: 'loading' },
+        { content: '测试三' },
+        { content: '测试四' },
+      ],
+      curprocess: 2,
+    });
+
+    // 改变当前选中值
+    const processChanged = (index: number) => {
+      state.curprocess = index;
+    };
+
+    return {
+      state,
+      processChanged,
+    };
+  },
+  render() {
+    return (
+      <div style='height: 400px;'>
+        <BkProcess
+          controllable={true}
+          curProcess={this.state.curprocess}
+          list={this.state.objectSteps}
+          onClick={this.processChanged}
+        ></BkProcess>
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,52 @@
+<template>
+  <div style="width: 100%">
+    <div class="mb10">
+      <bk-progress
+        :percent="0"
+        size="small"
+      />
+    </div>
+    <div class="mb10">
+      <bk-progress :percent="28"/>
+    </div>
+    <div class="mb10">
+      <bk-progress
+        :percent="46"
+        :theme="'warning'"
+        size="large"
+      />
+    </div>
+    <div class="mb10">
+      <bk-progress
+        :percent="73"
+        :theme="'danger'"
+        size="huge"
+      />
+    </div>
+    <div class="mb10">
+      <bk-progress
+        :percent="90"
+        :theme="'success'"
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  import BkProgress from '@bkui-vue/progress';
+
+  export default defineComponent({
+    name: 'SiteProgress',
+    components: {
+      BkProgress,
+    },
+    setup() {},
+  });
+</script>
+
+<style scoped>
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

package/knowledge/examples/progress/change-demo.vue

@@ -0,0 +1,43 @@
+<template>
+  <div style="width: 100%">
+    <div class="mb10">
+      <bk-progress :percent="percent" />
+    </div>
+    <bk-button
+      type="primary"
+      @click="changeRadius"
+    >
+      改变值
+    </bk-button>
+  </div>
+</template>
+<script>
+  import { defineComponent, ref } from 'vue';
+
+  import BkButton from '@bkui-vue/button';
+  import BkProgress from '@bkui-vue/progress';
+
+  export default defineComponent({
+    name: 'SiteProgress',
+    components: {
+      BkProgress,
+      BkButton,
+    },
+    setup() {
+      const percent = ref(0);
+      const changeRadius = () => {
+        percent.value = Number(Math.random() * 100);
+      };
+      return {
+        percent,
+        changeRadius,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

package/knowledge/examples/progress/index.tsx

@@ -0,0 +1,253 @@
+/*
+ * 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, ref } 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 ChangeDemo from './change-demo.vue';
+import SizeDemo from './size-demo.vue';
+import TextDemo from './text-demo.vue';
+import TypeDemo from './type-demo.vue';
+import TypeSizeDemo from './type-size-demo.vue';
+
+const progressPropsJson: IPropsTableItem[] = [
+  {
+    name: 'type',
+    type: 'String',
+    default: 'line',
+    desc: '进度条类型',
+    optional: ['line', 'circle', 'dashboard'],
+  },
+  {
+    name: 'percent',
+    type: 'Number',
+    default: '0',
+    desc: '进度条百分比',
+    optional: ['0～100'],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'primary',
+    desc: '线性进度条主题色',
+    optional: ['primary', 'warning', 'success', 'danger'],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: '',
+    desc: '线性进度条大小',
+    optional: ['small', 'large', 'huge'],
+  },
+  {
+    name: 'width',
+    type: 'Number',
+    default: '126',
+    desc: '环形/仪表盘大小,针对 circle 和 dashboard 类型有效',
+    optional: [],
+  },
+  {
+    name: 'stroke-width',
+    type: 'Number',
+    default: '',
+    desc: '进度条的粗细宽度',
+    optional: [],
+  },
+  {
+    name: 'stroke-linecap',
+    type: 'String',
+    default: 'round',
+    desc: '仪表盘进度路径两端形状',
+    optional: ['butt', 'round', 'square', 'inherit'],
+  },
+  {
+    name: 'text-inside',
+    type: 'Boolean',
+    default: 'false',
+    desc: '线性进度条是否显示文字到进度条内',
+    optional: [],
+  },
+  {
+    name: 'show-text',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否显示文案',
+    optional: [],
+  },
+  {
+    name: 'color',
+    type: 'String',
+    default: '#13ce66',
+    desc: '进度条颜色',
+    optional: [],
+  },
+  {
+    name: 'bg-color',
+    type: 'String',
+    default: '#f5f5f5',
+    desc: '环形/仪表盘路径背景颜色',
+    optional: [],
+  },
+  {
+    name: 'format',
+    type: 'Function',
+    default: '(value) => value%',
+    desc: '自定义的进度条文字格式',
+    optional: [],
+  },
+  {
+    name: 'fixed',
+    type: 'Number',
+    default: '0',
+    desc: '进度条百分比的小数位数，值必须为 0 到 20 之间',
+    optional: ['0 <= fixed <= 20'],
+  },
+  {
+    name: 'title-style',
+    type: 'Object',
+    default: "{ fontSize: '16px', verticalAlign: 'middle' }",
+    desc: '进度条文字的样式',
+    optional: [],
+  },
+  {
+    name: 'ext-cls',
+    type: 'String',
+    default: '',
+    desc: '自定义样式类名',
+    optional: [],
+  },
+];
+
+const progressSlotJson: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'String',
+    default: '',
+    desc: '自定义进度条文字插槽',
+    optional: [],
+  },
+];
+
+export default defineComponent({
+  setup() {
+    const separator = ref('/');
+    const list = [
+      { title: '首页', link: { path: '/' } },
+      { title: '进度条', link: { path: 'loading' } },
+      { title: '滑块开关', link: { path: 'switcher' } },
+      { title: '面包屑', link: null },
+    ];
+    return {
+      list,
+      separator,
+    };
+  },
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='进度条'
+          designLink='https://bkdesign.bk.tencent.com/design/141'
+          name='Progress 进度条'
+        />
+
+        <DemoBox
+          componentName='progress'
+          demoName='base-demo'
+          desc='percent 是 0 到 100 之间的数值，提供 4 种主题，由 theme 属性来定义，可选的主题有 primary, warning, success, danger，默认为 primary, 由 color 属性来自定义颜色值。'
+          subtitle='修改进度条主题'
+          title='基础用法'
+        >
+          <BaseDemo></BaseDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='progress'
+          demoName='size-demo'
+          desc='可以使用 size 属性来配置进度条的尺寸，可接受 small large huge，也可配置strokeWidth线宽'
+          subtitle=''
+          title='大小设置'
+        >
+          <SizeDemo></SizeDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='progress'
+          demoName='text-demo'
+          desc='Progress 组件可通过 show-text 来控制文案是否显示， 通过 text-inside 属性来将进度条描述置于进度条内部, titleStyle 属性来调整百分数显示的样式 format 过滤文案展示'
+          subtitle=''
+          title='文案内显'
+        >
+          <TextDemo></TextDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='progress'
+          demoName='change-demo'
+          desc='通过改变 percent 改变进度'
+          subtitle=''
+          title='动态值'
+        >
+          <ChangeDemo></ChangeDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='progress'
+          demoName='type-demo'
+          desc='通过改变 type 修改进度条形状， line 默认线性 circle 圆形 dashboard 仪表盘'
+          subtitle=''
+          title='环形/仪表盘'
+        >
+          <TypeDemo></TypeDemo>
+        </DemoBox>
+
+        <DemoBox
+          componentName='progress'
+          demoName='type-size-demo'
+          desc='通过改变 color 修改进度颜色，bgColor修改背景颜色 width 修改大小 strokeWidth修改线宽'
+          subtitle=''
+          title='环形/仪表盘大小颜色配置'
+        >
+          <TypeSizeDemo></TypeSizeDemo>
+        </DemoBox>
+        <PropsBox
+          propsData={progressPropsJson}
+          subtitle=''
+          title='Progress 属性'
+        />
+        <PropsBox
+          propsData={progressSlotJson}
+          subtitle='可以自定义文案'
+          title='Progress 插槽'
+        />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,100 @@
+<template>
+  <div style="width: 100%">
+    <div>
+      <div class="mb10">
+        <bk-progress
+          :percent="0"
+          :size="'small'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="28"
+          :size="'small'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="46"
+          :size="'small'"
+          :theme="'warning'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="73"
+          :size="'small'"
+          :theme="'danger'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="90"
+          :size="'small'"
+          :theme="'success'"
+        />
+      </div>
+    </div>
+    <div>
+      <div class="mb10">
+        <bk-progress
+          :percent="0"
+          :size="'large'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="28"
+          :size="'large'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="46"
+          :size="'large'"
+          :theme="'warning'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="73"
+          :size="'large'"
+          :theme="'danger'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="90"
+          :size="'large'"
+          :theme="'success'"
+        />
+      </div>
+      <div class="mb10">
+        <bk-progress
+          :percent="90"
+          :stroke-width="20"
+          :theme="'success'"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  import BkProgress from '@bkui-vue/progress';
+
+  export default defineComponent({
+    name: 'SiteProgress',
+    components: {
+      BkProgress,
+    },
+    setup() {},
+  });
+</script>
+
+<style scoped>
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

package/knowledge/examples/progress/text-demo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div style="width: 100%">
+    <div class="mb10">
+      <bk-progress
+        :percent="46"
+        :show-text="false"
+        :stroke-width="18"
+        text-inside
+      />
+    </div>
+    <div class="mb10">
+      <bk-progress
+        :percent="46"
+        :stroke-width="18"
+        text-inside
+      />
+    </div>
+    <div>
+      <bk-progress
+        :format="format"
+        :percent="70"
+        :stroke-width="22"
+        text-inside
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  import BkProgress from '@bkui-vue/progress';
+
+  export default defineComponent({
+    name: 'SiteProgress',
+    components: {
+      BkProgress,
+    },
+    setup() {
+      const format = value => `自定义过滤文案：${value}`;
+      return {
+        format,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .mb10 {
+    margin-bottom: 10px;
+  }
+</style>

package/knowledge/examples/progress/type-demo.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="width: 100%">
+    <div>
+      <bk-progress
+        :percent="30"
+        :text-inside="false"
+        bg-color="#3a84ff"
+        color="#f56c6c"
+        type="dashboard"
+      >
+        <span>未开始</span>
+      </bk-progress>
+      <bk-progress
+        :percent="10"
+        color="#f56c6c"
+        type="circle"
+        text-inside
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  import BkProgress from '@bkui-vue/progress';
+
+  export default defineComponent({
+    name: 'SiteProgress',
+    components: {
+      BkProgress,
+    },
+    setup() {},
+  });
+</script>
+
+<style scoped>
+  .mb10 {
+    margin-bottom: 10px;
+  }
+
+  .bk-progress {
+    margin-right: 30px;
+  }
+</style>

package/knowledge/examples/progress/type-size-demo.vue

@@ -0,0 +1,69 @@
+<template>
+  <div style="width: 100%">
+    <div style="margin-bottom: 20px">
+      <bk-progress
+        :percent="30"
+        :text-inside="false"
+        bg-color="#3a84ff"
+        type="circle"
+      />
+      <bk-progress
+        :percent="0"
+        :text-inside="false"
+        color="#f56c6c"
+        type="dashboard"
+      >
+        <span>未开始</span>
+      </bk-progress>
+    </div>
+    <div style="margin-bottom: 20px">
+      <bk-progress
+        :percent="10"
+        :stroke-width="8"
+        :width="48"
+        color="#f56c1c"
+        type="circle"
+        text-inside
+      />
+      <bk-progress
+        :percent="10"
+        :stroke-width="10"
+        :width="88"
+        color="#ff9c01"
+        type="circle"
+        text-inside
+      />
+      <bk-progress
+        :percent="10"
+        :stroke-width="12"
+        :width="128"
+        color="#f56c6c"
+        type="circle"
+        text-inside
+      />
+    </div>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  import BkProgress from '@bkui-vue/progress';
+
+  export default defineComponent({
+    name: 'SiteProgress',
+    components: {
+      BkProgress,
+    },
+    setup() {},
+  });
+</script>
+
+<style scoped>
+  .mb10 {
+    margin-bottom: 10px;
+  }
+
+  .bk-progress {
+    margin-right: 30px;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+<template>
+  <bk-radio-group v-model="radioGroupValue">
+    <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>