@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/upload/demo/slots-file.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      ref="uploader"
+      :files="files"
+      :handle-res-code="handleRes"
+      :size="5"
+      :tip="'最大上传5(Mb)的文件'"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      theme="button"
+      with-credentials
+    >
+      <template #file="{ file }">
+        <div>
+          {{ file.name }}
+          <a
+            class="action-link"
+            href="javascrip:;"
+            @click.stop.prevent="handleRemove(file)"
+            >删除</a
+          >
+          <a
+            v-if="file.status === 'fail'"
+            class="action-link"
+            href="javascrip:;"
+            @click="handleRetry(file)"
+            >重试</a
+          >
+        </div>
+      </template>
+    </bk-upload>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  import BkUpload from '@bkui-vue/upload';
+
+  const uploader = ref(null);
+
+  const files = [
+    {
+      name: 'test.ppt',
+    },
+  ];
+
+  const handleRemove = file => {
+    uploader.value?.handleRemove(file);
+  };
+
+  const handleRetry = file => {
+    uploader.value?.handleRetry(file);
+  };
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>
+
+<style scoped>
+  .action-link {
+    margin: 4px;
+  }
+</style>

package/knowledge/examples/upload/demo/theme-button.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :files="files"
+      :handle-res-code="handleRes"
+      :size="5"
+      :tip="'最大上传5(Mb)的文件'"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      theme="button"
+      with-credentials
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkUpload from '@bkui-vue/upload';
+
+  const files = [
+    {
+      name: 'test.ppt',
+    },
+  ];
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>

package/knowledge/examples/upload/demo/theme-picture.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="demo">
+    <bk-upload
+      :files="files"
+      :handle-res-code="handleRes"
+      :url="'https://jsonplaceholder.typicode.com/posts/'"
+      theme="picture"
+      with-credentials
+    />
+  </div>
+</template>
+
+<script setup>
+  import BkUpload from '@bkui-vue/upload';
+
+  import dovImgUlr from '../../../imgs/dov.png';
+  import qqImageUrl from '../../../imgs/qq.png';
+
+  const files = [
+    {
+      name: 'qq',
+      url: qqImageUrl,
+    },
+    {
+      name: 'dov',
+      url: dovImgUlr,
+    },
+  ];
+
+  const handleRes = response => {
+    if (response.id) {
+      return true;
+    }
+    return false;
+  };
+</script>

package/knowledge/examples/upload/index.tsx

@@ -0,0 +1,407 @@
+/*
+ * 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 AcceptImage from './demo/accept-image.vue';
+import AcceptZip from './demo/accept-zip.vue';
+import Base from './demo/base.vue';
+import Limit from './demo/limit.vue';
+import MaxSize from './demo/max-size.vue';
+import PreviewImage from './demo/preview-image.vue';
+import SinglePicture from './demo/single-picture.vue';
+import SlotsFile from './demo/slots-file.vue';
+import ThemeButton from './demo/theme-button.vue';
+import ThemePicture from './demo/theme-picture.vue';
+
+const uploadProps: IPropsTableItem[] = [
+  {
+    name: 'type',
+    type: 'String',
+    default: 'formdata',
+    desc: '上传类型。formdata为表单形式上传，文件流包裹在表单数据中。binary为纯文件流传输。',
+    optional: ['formdata', 'binary'],
+  },
+  {
+    name: 'theme',
+    type: 'String',
+    default: 'draggable',
+    desc: '上传组件类型',
+    optional: ['支持拖拽和点击(draggable)', '按钮(button)', '图片卡片(picture)'],
+  },
+  {
+    name: 'accept',
+    type: 'String',
+    default: null,
+    desc: '可选的文件类型。theme为 picture 时且 accept 没有配置时，可接受文件文类型为："image/png,image/jpeg,image/jpg"',
+    optional: ['image/png', '.zip'],
+  },
+  {
+    name: 'url',
+    type: 'String',
+    default: null,
+    desc: '服务器地址（必传）',
+    optional: [],
+  },
+  {
+    name: 'header',
+    type: 'Array / Object',
+    default: null,
+    desc: '请求头 { name: " ", value: " " }',
+    optional: [],
+  },
+  {
+    name: 'handle-res-code',
+    type: 'Function',
+    default: null,
+    desc: '处理返回码的函数，默认参数 response，需要返回 true 或 false',
+    optional: [],
+  },
+  {
+    name: 'multiple',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否支持多选',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'name',
+    type: 'String',
+    default: 'upload_file',
+    desc: '后台读取文件的 key',
+    optional: [],
+  },
+  {
+    name: 'size',
+    type: 'Number/ Object',
+    default: '5(MB)',
+    desc: '限制上传文件体积 { maxFileSize: 1, maxImgSize: 1 }',
+    optional: [],
+  },
+  {
+    name: 'limit',
+    type: 'Number',
+    default: null,
+    desc: '限制上传文件个数',
+    optional: [],
+  },
+  {
+    name: 'form-data-attributes',
+    type: 'Array | [{ name: "attrName", value: Object }]',
+    default: null,
+    desc: '自定义上传属性',
+    optional: [],
+  },
+  {
+    name: 'with-credentials	',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否允许带上 cookie',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'tip',
+    type: 'String',
+    default: null,
+    desc: '提示信息',
+    optional: [],
+  },
+  {
+    name: 'validate-name',
+    type: 'RegExp',
+    default: null,
+    desc: '用来验证文件名是否合法的',
+    optional: [],
+  },
+  {
+    name: 'custom-request',
+    type: 'Function',
+    default: null,
+    desc: '覆盖默认的上传行为，自定义上传的实现',
+    optional: [],
+  },
+  {
+    name: 'files',
+    type: 'Array',
+    default: null,
+    desc: '默认图片',
+    optional: [],
+  },
+  {
+    name: 'select-change',
+    type: 'Function',
+    default: null,
+    desc: 'input 元素 change 事件或拖拽事件处理函数，若返回 false 则取消文件选择',
+    optional: [],
+  },
+  {
+    name: 'before-upload',
+    type: 'Function',
+    default: null,
+    desc: '上传文件之前的钩子，参数为上传的文件，若返回false或者返回 Promise 且被 reject，则停止上传',
+    optional: [],
+  },
+  {
+    name: 'before-remove',
+    type: 'Function',
+    default: null,
+    desc: '删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除',
+    optional: [],
+  },
+  {
+    name: 'slice-upload',
+    type: 'Boolean',
+    default: 'false',
+    desc: '是否采用大文件分片上传',
+    optional: ['true', 'false'],
+  },
+  {
+    name: 'slice-url',
+    type: 'String',
+    default: null,
+    desc: '分片上传chunk服务器路径',
+    optional: [],
+  },
+  {
+    name: 'merge-url',
+    type: 'String',
+    default: null,
+    desc: '分片上传合并chunk服务器路径',
+    optional: [],
+  },
+  {
+    name: 'chunk-size',
+    type: 'Number',
+    default: '10M',
+    desc: '分片大小',
+    optional: [],
+  },
+  {
+    name: 'is-show-preview',
+    type: 'Boolean',
+    default: 'true',
+    desc: '是否显示预览按钮',
+    optional: ['true', 'false'],
+  },
+];
+
+const uploadEvents: IPropsTableItem[] = [
+  {
+    name: 'done',
+    type: 'Function',
+    default: null,
+    desc: '所有文件上传完毕后的事件',
+    optional: ['fileList'],
+  },
+  {
+    name: 'progress',
+    type: 'Function',
+    default: null,
+    desc: '文件上传进行时的事件',
+    optional: ['event', 'file', 'fileList'],
+  },
+  {
+    name: 'success',
+    type: 'Function',
+    default: null,
+    desc: '文件上传成功后的事件',
+    optional: ['file', 'fileList'],
+  },
+  {
+    name: 'error',
+    type: 'Function',
+    default: null,
+    desc: '文件上传失败后的事件',
+    optional: ['file', 'fileList', 'error'],
+  },
+  {
+    name: 'exceed',
+    type: 'Function',
+    default: null,
+    desc: '文件上传个数超出限制后的事件',
+    optional: ['file', 'fileList'],
+  },
+  {
+    name: 'delete',
+    type: 'Function',
+    default: null,
+    desc: '文件上传成功后，点击删除文件触发的事件	',
+    optional: ['file（删除的哪个文件对象）', 'fileList（删除后的文件列表）'],
+  },
+  {
+    name: 'preview',
+    type: 'Function',
+    default: null,
+    desc: '文件上传成功后，点击预览文件触发的事件	',
+    optional: ['file（预览的哪个文件对象）', 'fileList（预览的文件列表）'],
+  },
+];
+
+const uploadSlots: IPropsTableItem[] = [
+  {
+    name: 'default',
+    type: 'String',
+    default: null,
+    desc: '自定义默认内容',
+    optional: [],
+  },
+  {
+    name: 'trigger',
+    type: 'String',
+    default: null,
+    desc: '触发文件选择框的内容',
+    optional: [],
+  },
+  {
+    name: 'tip',
+    type: 'String',
+    default: null,
+    desc: '提示说明文字',
+    optional: [],
+  },
+  {
+    name: 'file',
+    type: 'String',
+    default: null,
+    desc: '文件列表项内容',
+    optional: ['{ file: UploadFile }'],
+  },
+];
+
+export default defineComponent({
+  name: 'Checkbox',
+
+  render() {
+    return (
+      <div>
+        <DemoTitle
+          desc='通过点击或者拖拽上传文件'
+          designLink='https://bkdesign.bk.tencent.com/design/41'
+          name='Upload'
+        />
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/base'
+          desc='上传组件提供图片和文件上传的功能，由 accept 属性来定义允许上传的文件类型，默认为 *'
+          title='基础用法'
+        >
+          <Base />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/accept-image'
+          desc='配置 accept 属性，限制用户只允许上传 jpg、jpeg、png 格式的图片'
+          title='上传图片'
+        >
+          <AcceptImage />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/accept-zip'
+          desc='配置 accept 属性，限制用户只允许上传 zip 格式的文件'
+          title='上传 zip 文件'
+        >
+          <AcceptZip />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/max-size'
+          desc='配置 size 属性，限制上传文件的大小'
+          title='设置文件大小'
+        >
+          <MaxSize />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/limit'
+          desc='配置 limit 属性，设置上传文件个数'
+          title='设置上传文件个数'
+        >
+          <Limit />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/theme-button'
+          desc='设置 theme 属性为 button'
+          title='点击按钮上传'
+        >
+          <ThemeButton />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/theme-picture'
+          desc='设置 theme 属性为 picture，限制文件类型为图片类型，比如：png，jpeg，jpg'
+          title='照片墙'
+        >
+          <ThemePicture />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/single-picture'
+          desc='设置 theme 属性为 picture，multiple 属性设置为 false，并限制文件类型为图片类型，比如：png，jpeg，jpg'
+          title='头像上传'
+        >
+          <SinglePicture />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/preview-image'
+          desc='isShowPreview属性控制是否显示展开按钮，默认显示'
+          title='预览图片'
+        >
+          <PreviewImage />
+        </DemoBox>
+        <DemoBox
+          componentName='upload'
+          demoName='/demo/slots-file'
+          desc='使用 slot 自定义文件列表项'
+          title='自定义文件列表项'
+        >
+          <SlotsFile />
+        </DemoBox>
+        <PropsBox
+          propsData={uploadProps}
+          subtitle=''
+          title='Upload 属性'
+        />
+        <PropsBox
+          propsData={uploadEvents}
+          subtitle=''
+          title='Upload 事件'
+        />
+        <PropsBox
+          propsData={uploadSlots}
+          subtitle=''
+          title='Upload 插槽'
+        />
+      </div>
+    );
+  },
+});

package/knowledge/examples/utils/index.ts

@@ -0,0 +1,81 @@
+/*
+ * 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.
+ */
+
+/**
+ * 前端格式转换为服务器格式
+ * @param fieldName ：字段名称
+ */
+export function formatPropName(fieldName: string): string {
+  let name = fieldName;
+  if (name === undefined || name === null) {
+    name = '';
+  }
+  function upperToServeLower(match: string) {
+    return `-${match.toLowerCase()}`;
+  }
+  return (name.startsWith('-') && name) || name.replace(/[A-Z]/g, upperToServeLower);
+}
+
+/**
+ * 解析Props为说明文档
+ * @param props
+ * @returns
+ */
+export const resolvePropsToDesData = (props: any) => {
+  const getType = (obj: any) => {
+    if (Array.isArray(obj)) {
+      return obj.map((t: any) => getType(t)).join('|');
+    }
+
+    if (typeof obj === 'function') {
+      const val = obj();
+      if (typeof val === 'object') {
+        return Array.isArray(val) ? 'Array' : 'Object';
+      }
+
+      const typeStr = typeof val;
+      return `${typeStr.toLocaleUpperCase()[0]}${typeStr.slice(1)}`;
+    }
+  };
+
+  const getDefaultVal = (val: any) => {
+    if (typeof val === 'function') {
+      return String(val());
+    }
+
+    return '--';
+  };
+  return Object.keys(props).map((key: string) => {
+    const item = props[key];
+    return {
+      name: formatPropName(key),
+      type: getType(item.type),
+      default: getDefaultVal(item.default),
+      desc: '',
+      optional: [],
+    };
+  });
+};