perf: ApiUpload component

@@ -9,7 +9,8 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { computed, ref, unref, useAttrs } from 'vue';
   import { cloneDeep } from 'lodash-es';
-  import { isFunction, isObject } from '/@/utils/is';
+  import { isFunction, isNumber, isObject } from '/@/utils/is';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export interface FileItem {
     uid: string;
@@ -19,6 +20,7 @@
     url?: string;
   }
 
+  const { prefixCls } = useDesign('api-upload');
   const emit = defineEmits(['update:fileList', 'preview', 'download']);
 
   const attrs = useAttrs();
@@ -42,6 +44,7 @@
       disabled?: boolean;
       listType?: string;
       multiple?: boolean;
+      maxFileLimit?: number;
       showUploadList?: boolean | { showPreviewIcon?: boolean; showRemoveIcon?: boolean };
       transformFile?: (file: File) => string | Blob | Promise<string | Blob | File>;
       api: (file: string | Blob | Promise<string | Blob | File>) => Promise<FileItem>;
@@ -75,7 +78,14 @@
       if (api && isFunction(api)) {
         const data = await api(file);
         if (isObject(data) && Reflect.has(data, 'uid') && Reflect.has(data, 'name')) {
-          emit('update:fileList', cloneDeep([...props.fileList, data]));
+          const { fileList, maxFileLimit } = props;
+          let _fileList = cloneDeep(fileList);
+
+          if (isNumber(maxFileLimit) && _fileList.length === maxFileLimit) {
+            _fileList.splice(0, 1);
+          }
+
+          emit('update:fileList', cloneDeep([..._fileList, data]));
           return;
         }
         window.console.error(
@@ -124,6 +134,7 @@
 <template>
   <Upload.Dragger
     class="block"
+    :class="prefixCls"
     :file-list="props.fileList"
     :disabled="getDisabled"
     :before-upload="handleBeforeUpload"
@@ -140,4 +151,19 @@
   </Upload.Dragger>
 </template>
 
-<style></style>
+<style lang="less">
+  @basic-form: ~'@{namespace}-basic-form';
+  @prefix-cls: ~'@{namespace}-api-upload';
+
+  .@{basic-form} {
+    // .ant-form-item-control-input-content > div > div {
+    //   width: 100% !important;
+    // }
+
+    .@{prefix-cls} {
+      .ant-upload-list-item-name {
+        width: calc(100% - 22px);
+      }
+    }
+  }
+</style>

 import { BasicColumn, FormSchema } from '/@/components/Table';
-
+import { PackageField } from './packageDetail.config';
 export const columns: BasicColumn[] = [
   {
     title: '创建时间',
-    dataIndex: 'createTime',
+    dataIndex: PackageField.CREATE_TIME,
     width: 120,
   },
   {
     title: '标题',
-    dataIndex: 'title',
+    dataIndex: PackageField.TITLE,
     width: 120,
   },
   {
     title: '版本',
-    dataIndex: 'version',
+    dataIndex: PackageField.VERSION,
     width: 120,
   },
   {
     title: '版本标签',
-    dataIndex: 'versionLabel',
+    dataIndex: PackageField.VERSION_LABEL,
     width: 120,
   },
   {
     title: '包类型',
-    dataIndex: 'pkgType',
+    dataIndex: PackageField.PACKAGE_TYPE,
     width: 120,
   },
   {
     title: '直接URL',
-    dataIndex: 'url',
+    dataIndex: PackageField.PACKAGE_EXTERNAL_URL,
     width: 120,
   },
   {
     title: '文件大小',
-    dataIndex: 'fileSize',
+    dataIndex: PackageField.FILE_SIZE,
     width: 120,
   },
   {
     title: '校验和',
-    dataIndex: 'vaildateTotal',
+    dataIndex: PackageField.CHECK_SUM,
     width: 120,
   },
 ];
 
 export const searchFormSchema: FormSchema[] = [
   {
-    field: 'name',
+    field: PackageField.TITLE,
     label: '标题',
     component: 'Input',
     colProps: { span: 8 },

@@ -13,6 +13,9 @@ export enum PackageField {
   ALG = 'alg',
   CHECK_SUM = 'checkSum',
   DESCRIPTION = 'description',
+
+  CREATE_TIME = 'createTIme',
+  FILE_SIZE = 'fileSize',
 }
 
 export enum PackageUpdateType {
@@ -123,8 +126,10 @@ export const formSchema: FormSchema[] = [
     valueField: PackageField.PACKAGE_BINARY_FILE,
     changeEvent: `update:${PackageField.PACKAGE_BINARY_FILE}`,
     componentProps: {
+      maxFileLimit: 1,
       api: (_file: File) => {
-        return {};
+        console.log({ _file });
+        return { uid: _file.uid, name: _file.name };
       },
     },
   },