@blueking/bkui-knowledge 0.0.1-beta.1

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

@@ -0,0 +1,139 @@
+<template>
+  <div class="button-group-list">
+    <div class="mb10 basic-button-list">
+      <span>小尺寸</span>
+      <bk-button
+        class="ml10"
+        size="small"
+      >
+        基础按钮
+      </bk-button>
+      <bk-button
+        class="ml10"
+        size="small"
+      >
+        <plus class="f20" />
+        新增
+      </bk-button>
+      <bk-button
+        class="ml10"
+        size="small"
+      >
+        下拉
+        <angle-down class="f20" />
+      </bk-button>
+      <bk-button
+        class="ml10"
+        size="small"
+        loading
+      />
+      <bk-button
+        class="ml10"
+        size="small"
+        theme="primary"
+        loading
+      />
+      <bk-button
+        class="ml10"
+        size="small"
+      >
+        <bk class="f20 mr6" />
+        成功
+      </bk-button>
+    </div>
+
+    <div class="mb10 basic-button-list">
+      <span>默认尺寸</span>
+      <bk-button class="ml10"> 基础按钮 </bk-button>
+      <bk-button class="ml10">
+        <plus class="f22" />
+        新增
+      </bk-button>
+      <bk-button class="ml10">
+        下拉
+        <angle-down class="f22" />
+      </bk-button>
+      <bk-button
+        class="ml10"
+        loading
+      />
+      <bk-button
+        class="ml10"
+        theme="primary"
+        loading
+      />
+      <bk-button class="ml10">
+        <bk class="f22 mr6" />
+        成功
+      </bk-button>
+    </div>
+
+    <div class="basic-button-list">
+      <span>大尺寸</span>
+      <bk-button
+        class="ml10"
+        size="large"
+      >
+        基础按钮
+      </bk-button>
+      <bk-button
+        class="ml10"
+        size="large"
+      >
+        <plus class="f24" />
+        新增
+      </bk-button>
+      <bk-button
+        class="ml10"
+        size="large"
+      >
+        下拉
+        <angle-down class="f24" />
+      </bk-button>
+      <bk-button
+        class="ml10"
+        size="large"
+        loading
+      />
+      <bk-button
+        class="ml10"
+        size="large"
+        theme="primary"
+        loading
+      />
+      <bk-button
+        class="ml10"
+        size="large"
+      >
+        <bk class="f24 mr6" />
+        成功
+      </bk-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { AngleDown, Bk, Plus } from 'bkui-vue/lib/icon';
+</script>
+
+<style lang="postcss">
+  .mb10 {
+    margin-bottom: 10px;
+  }
+
+  .mr6 {
+    margin-right: 6px;
+  }
+
+  .f20 {
+    font-size: 20px;
+  }
+
+  .f22 {
+    font-size: 22px;
+  }
+
+  .f24 {
+    font-size: 24px;
+  }
+</style>

package/knowledge/examples/button/demo/text.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="basic-button-list">
+    <bk-button
+      theme="primary"
+      text
+    >
+      文字按钮
+    </bk-button>
+    <bk-button
+      class="ml10"
+      theme="primary"
+      disabled
+      loading
+      text
+    >
+      加载中
+    </bk-button>
+    <bk-button
+      class="ml10"
+      disabled
+      text
+    >
+      禁用状态
+    </bk-button>
+  </div>
+</template>
+
+<script setup>
+  // import Loading from '@bkui-vue/loading';
+</script>
+
+<style lang="postcss">
+  .ml10 {
+    margin-left: 10px;
+  }
+</style>

package/knowledge/examples/button/index.tsx

@@ -0,0 +1,210 @@
+/*
+ * 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 Disabled from './demo/disabled.vue';
+import Group from './demo/group.vue';
+import Icon from './demo/icon.vue';
+import LoadingButton from './demo/loading-button.vue';
+import MouseHover from './demo/mouse-hover.vue';
+import Outline from './demo/outline.vue';
+import Size from './demo/size.vue';
+import Text from './demo/text.vue';
+
+const buttonProps: IPropsTableItem[] = [
+  {
+    name: 'theme',
+    type: 'String',
+    default: '',
+    desc: '按钮主题',
+    optional: ['priamry', 'success', 'warning', 'danger'],
+  },
+  {
+    name: 'hover-theme',
+    type: 'String',
+    default: '',
+    desc: 'mouseHover 按钮样式, 当设置了此属性时，theme 和 text 失效',
+    optional: ['priamry', 'success', 'warning', 'danger'],
+  },
+  {
+    name: 'disabled',
+    type: 'Boolean',
+    default: false,
+    desc: '是否不可用',
+    optional: [],
+  },
+  {
+    name: 'text',
+    type: 'Boolean',
+    default: false,
+    desc: '是否为文字按钮',
+    optional: [],
+  },
+  {
+    name: 'outline',
+    type: 'Boolean',
+    default: false,
+    desc: '是否为反色按钮',
+    optional: [],
+  },
+  {
+    name: 'size',
+    type: 'String',
+    default: null,
+    desc: '按钮尺寸大小',
+    optional: ['small', 'large'],
+  },
+];
+
+const buttonEvents: IPropsTableItem[] = [
+  {
+    name: 'click',
+    type: 'String',
+    default: null,
+    desc: '点击时触发事件',
+    optional: [],
+  },
+];
+
+const buttonSlot: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'Slot',
+    default: null,
+    desc: '默认插槽',
+    optional: [],
+  },
+];
+
+const demos = [
+  {
+    title: '基础按钮',
+    desc: '基础按钮提供 5 种主题，由 theme 属性来定义，可选的主题有 default, primary, warning, success, danger，默认为 default。',
+    componentName: 'button',
+    demoName: 'demo/basic',
+    DemoComponent: Basic,
+  },
+  {
+    title: '禁用按钮',
+    desc: '配置 disabled 属性来使按钮禁用',
+    componentName: 'button',
+    demoName: 'demo/disabled',
+    DemoComponent: Disabled,
+  },
+  {
+    title: '图标按钮',
+    desc: '可以在slot自定义icon ，设置loading 的时候，会显示 loading 效果。可以用loading-mode【spin | default 】属性指定Loading效果，',
+    componentName: 'button',
+    demoName: 'demo/icon',
+    DemoComponent: Icon,
+  },
+  {
+    title: '按钮组',
+    desc: '可以使用 ButtonGroup实现按钮组效果',
+    componentName: 'button',
+    demoName: 'demo/group',
+    DemoComponent: Group,
+  },
+  {
+    title: '尺寸',
+    desc: '可以使用 size 属性来定义按钮的尺寸，可接受 small large',
+    componentName: 'button',
+    demoName: 'demo/size',
+    DemoComponent: Size,
+  },
+  {
+    title: '文字按钮',
+    desc: '通过设置 text 属性来配置文字按钮。文字按钮同样提供 5 种主题，由 theme 属性来定义，可选的主题有 default,primary,warning,success,danger，默认为 default。另外可以使用 disabled 属性来定义按钮是否禁用，它接受一个 Boolean 值',
+    componentName: 'button',
+    demoName: 'demo/text',
+    DemoComponent: Text,
+  },
+  {
+    title: '加载中状态',
+    desc: '可以使用 loading 属性来定义按钮是否显示加载中状态，它接受一个 Boolean 值。同时可以通过loading-mode属性指定loading指示器类型',
+    componentName: 'button',
+    demoName: 'demo/loading-button',
+    DemoComponent: LoadingButton,
+  },
+  {
+    title: '反色按钮',
+    desc: '通过配置 outline 属性来实现反色按钮的效果',
+    componentName: 'button',
+    demoName: 'demo/outline',
+    DemoComponent: Outline,
+  },
+  {
+    title: 'mousehover 颜色自定义',
+    desc: '提供 4 种 mousehover 颜色主题，由 hover-theme 属性来定义，可选的主题有 primary, warning, success, danger。当设置了 hover-theme 属性时，theme 和 text 失效。',
+    componentName: 'button',
+    demoName: 'demo/mouse-hover',
+    DemoComponent: MouseHover,
+  },
+];
+
+export default defineComponent({
+  name: 'Button',
+
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          name='Button'
+          desc='常用的操作按钮'
+          npmLink={`${import.meta.env.VITE_APP_BASE_URL ?? ''}/button`}
+          designLink='https://bkdesign.bk.tencent.com/design/9'
+        />
+        {demos.map(({ DemoComponent, ...demo }) => (
+          <DemoBox {...demo}>
+            <DemoComponent />
+          </DemoBox>
+        ))}
+        <PropsBox
+          title='Button 事件'
+          subtitle=''
+          propsData={buttonEvents}
+        />
+        <PropsBox
+          title='Button 属性'
+          subtitle=''
+          propsData={buttonProps}
+        />
+        <PropsBox
+          title='Button 插槽'
+          subtitle=''
+          propsData={buttonSlot}
+        />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="card-demo">
+    <div class="card-demo-item">
+      <bk-card
+        title="Card卡片标题"
+        is-collapse
+        @edit="editHandler"
+      >
+        <div class="card-content-wrapper">
+          <p>卡片内容 1</p>
+          <p>卡片内容 2</p>
+          <p>卡片内容 3</p>
+        </div>
+      </bk-card>
+    </div>
+    <div class="card-demo-item">
+      <bk-card
+        class="mr40"
+        title="Card卡片标题"
+        show-footer
+        show-header
+      >
+        <div class="card-content-wrapper">
+          <p>卡片内容 1</p>
+          <p>卡片内容 2</p>
+          <p>卡片内容 3</p>
+        </div>
+        <template #footer>
+          <div class="card-demo-foot">
+            <span class="card-demo-foot-item"> <help-document-fill /></span>
+            <span class="card-demo-foot-item"> <help /></span>
+            <span class="card-demo-foot-item"> <help-fill /></span>
+          </div>
+        </template>
+      </bk-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { Help, HelpDocumentFill, HelpFill } from 'bkui-vue/lib/icon';
+  const editHandler = v => {
+    console.log(v);
+  };
+</script>
+
+<style lang="less" scoped>
+  .card-demo {
+    display: flex;
+    width: 100%;
+    padding: 30px;
+    margin: 0 auto;
+
+    .card-content-wrapper {
+      padding: 16px 0 24px 0;
+
+      p {
+        margin: 0;
+
+        &:not(:last-of-type) {
+          margin-bottom: 15px;
+        }
+      }
+    }
+
+    .card-demo-item {
+      display: inline-block;
+      width: 400px;
+      margin-left: 30px;
+    }
+
+    .card-demo-foot {
+      height: 48px;
+      text-align: center;
+      background: #fafbfd;
+    }
+
+    .card-demo-foot-item {
+      display: inline-block;
+      width: 33.15%;
+      color: #979ba5;
+      border-right: 1px solid #f0f2f5;
+
+      &:last-child {
+        border: none;
+      }
+    }
+  }
+</style>

package/knowledge/examples/card/card-edit.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="card-demo">
+    <div class="card-demo-item">
+      <bk-card
+        position="right"
+        title="Card卡片标题"
+        is-collapse
+        is-edit
+      >
+        <div class="card-content-wrapper">
+          <p>卡片内容 1</p>
+          <p>卡片内容 2</p>
+          <p>卡片内容 3</p>
+        </div>
+      </bk-card>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    components: {},
+  });
+</script>
+<style lang="less" scoped>
+  .card-demo {
+    display: flex;
+    width: 100%;
+    padding: 30px;
+    margin: 0 auto;
+
+    .card-content-wrapper {
+      padding: 16px 0 24px 0;
+
+      p {
+        margin: 0;
+
+        &:not(:last-of-type) {
+          margin-bottom: 15px;
+        }
+      }
+    }
+
+    .card-demo-item {
+      display: inline-block;
+      width: 400px;
+      margin-left: 30px;
+    }
+
+    .card-demo-foot {
+      height: 48px;
+      text-align: center;
+      background: #fafbfd;
+    }
+
+    .card-demo-foot-item {
+      display: inline-block;
+      width: 33.15%;
+      color: #979ba5;
+      border-right: 1px solid #f0f2f5;
+
+      &:last-child {
+        border: none;
+      }
+    }
+  }
+</style>