@cloudbase/weda-ui 3.5.3 → 3.6.0

package/dist/configs/components/wd-upload-file.js

@@ -1,36 +1,138 @@
 import { defineConfig, Type } from '../type-utils';
+import { FORM_ITEM_DATA, FORM_ITEM_EVENTS, FORM_ITEM_METHODS, FORM_ITEM_META, ItemData, pickWithXCategory, X_CATEGORY, getFormItemDataTitle, } from '../type-utils/type-form';
+import { getClasses } from '../type-utils/classes';
+import { templateInitNameWithId } from './common/init-name-with-id';
+const SELECT = pickWithXCategory(FORM_ITEM_DATA, ['extra', 'downloadVisible', 'deleteVisible', 'borderedH5'], X_CATEGORY.FILE_CONTENT);
+const TITLE = getFormItemDataTitle('文件上传');
 // 属性类型定义
-const data = Type.Object({});
+const data = Type.Partial(Type.Object({
+    // 通用
+    name: Object.assign({}, FORM_ITEM_DATA.name, {
+        'x-helper-text': '文件上传后，文件 https 链接默认仅可在微搭应用中访问，有效期 2 小时，可在[云存储权限设置](https://console.cloud.tencent.com/tcb/storage/index?envId=lowcode-3gp1xflvc8844909&rid=4&tabId=auth)中调整访问权限。',
+    }),
+    value: Object.assign({}, FORM_ITEM_DATA._valueInUpload, {
+        title: '文件值',
+    }),
+    // 标题
+    ...TITLE,
+    // 内容
+    ...SELECT,
+    // 状态校验
+    acceptTypes: FORM_ITEM_DATA._acceptTypesInFile,
+    maxSize: FORM_ITEM_DATA._maxSizeInFile,
+    single: Object.assign({}, FORM_ITEM_DATA.single, {
+        title: '上传单个文件',
+        'x-helper-text': '如需上传多个文件，可关闭该属性，但需绑定数组-文件字段，以保证表单的正常提交 [了解详情](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormUploadFile#%E7%BB%91%E5%AE%9A%E6%96%87%E4%BB%B6%E6%95%B0%E7%BB%84%E5%AD%97%E6%AE%B5)',
+    }),
+    maxUploadCount: Object.assign({}, FORM_ITEM_DATA.maxUploadCount, {
+        title: '文件数量上限',
+    }),
+    status: FORM_ITEM_DATA.status,
+    required: FORM_ITEM_DATA.required,
+    requiredMsg: FORM_ITEM_DATA.requiredMsg,
+    requiredFlag: FORM_ITEM_DATA.requiredFlag,
+    callbacks: Type.Object({
+        beforeUpload: Type.Function([
+            Type.Object({
+                files: Type.Optional(Type.Array(Type.Unknown({
+                    title: 'file 对象',
+                    'x-platforms': ['WEB', 'MOBILEWEB', 'PCWEB'],
+                }))),
+                base64Uri: Type.Optional(Type.Array(Type.String({
+                    title: 'base64',
+                }), {
+                    'x-platforms': ['WEB', 'MOBILEWEB', 'PCWEB'],
+                })),
+                tmpFilePaths: Type.Optional(Type.Array(Type.String({
+                    title: '文件临时地址',
+                }), { 'x-platforms': ['MP'] })),
+            }),
+        ], Type.Any(), {
+            title: '上传前处理函数',
+            required: false,
+        }),
+    }, {
+        'x-category': X_CATEGORY.FILE_CONTENT,
+        'x-index': FORM_ITEM_DATA.acceptTypes['x-index'] - 5,
+        'x-props': {
+            'data-hidebind': true,
+        },
+        title: '',
+        description: '配置相关的函数',
+    }),
+}));
+const properties = Type.Composite([
+    Type.Pick(data, ['name', 'label', 'value', 'required']),
+    Type.Pick(ItemData, ['visible', 'disabled', 'readOnly']),
+]);
+const CLASSES = getClasses('upload-file');
+const classes = [
+    CLASSES.root,
+    CLASSES.root_h5,
+    CLASSES.root_pc,
+    CLASSES.root_mp,
+    CLASSES.item_label,
+    CLASSES.item_control,
+    CLASSES.item_error,
+    CLASSES.item_help,
+];
+const paramValueType = Type.Object({ value: Type.Unknown({ title: '值' }) });
 // export default
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
-    // 属性定义
     data,
-    // 只读属性定义
-    // properties,
-    // 样式API
-    classes: [],
-    // 组件方法
-    methods: [],
-    // 组件对外暴露事件
-    events: [],
-    // 组件元信息
+    properties,
+    classes,
+    methods: [
+        Object.assign({}, FORM_ITEM_METHODS.setValue, { params: paramValueType }),
+        FORM_ITEM_METHODS.setVisible,
+        FORM_ITEM_METHODS.setDisabled,
+        FORM_ITEM_METHODS.clearValue,
+        FORM_ITEM_METHODS.setReadOnly,
+        FORM_ITEM_METHODS.handleValidate,
+        FORM_ITEM_METHODS.clearValidate,
+    ],
+    events: [
+        { ...{}, ...FORM_ITEM_EVENTS.change, detail: paramValueType },
+        FORM_ITEM_EVENTS.success,
+        FORM_ITEM_EVENTS.error,
+    ],
     meta: {
-        name: 'WdUploadFile',
+        description: '用于上传本地文件资源，如视频、音频、PDF、Excel、Word等文件类型。',
+        figureIcon: '../figureIcons/WdUploadFile.svg',
+        icon: '../icons/FormUploadFile.svg',
         title: '文件上传',
-        description: '表单布局',
-        icon: '../../icons/Form.svg',
-        category: '展示',
-        categoryOrder: 1,
-        componentOrder: 1,
-        visible: ['APP'],
+        name: 'WdUploadFile',
+        componentName: 'UploadFile',
+        categoryOrder: 500,
+        componentOrder: 430,
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdUploadFile',
+        category: FORM_ITEM_META.category,
+        shortcut: FORM_ITEM_META.shortcut,
+        group: FORM_ITEM_META.group,
+        visible: FORM_ITEM_META.visible,
+        inlineStyleForm: FORM_ITEM_META.inlineStyleForm,
+        keyWords: ['上传', '文件', 'upload', '视频', 'Video', '视频上传'],
+        templates: [
+            templateInitNameWithId,
+            {
+                body: `
+      [attributes.callbacks]
+      ":beforeUpload" = "
+      result => {
+        // console.log('beforeUpload', result);
+        return true;
+
+        // 可以通过返回false，禁用默认上传逻辑，自定义上传
+        // return false;
+      }"
+      `,
+                when: '$attached',
+            },
+        ],
     },
-    configMeta: {
-        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdForm',
-        // 快捷编辑时展示在编辑区的属性
-        shortcut: {
-            props: ['type'],
-        },
+    compConfig: {
+        componentType: 'formField',
     },
 });
 export default config;

package/dist/configs/components/wd-upload-image.d.ts

@@ -1,28 +1,224 @@
 import { Static } from '../type-utils';
 import type { Simplify } from 'type-fest';
-declare const data: import("@sinclair/typebox").TObject<{}>;
-export type DataType = Simplify<Static<typeof data>>;
+export declare const WD_TAG_CAPTURE_TYPE: {
+    label: string;
+    value: string;
+}[];
+declare const data: import("@sinclair/typebox").TObject<{
+    isCompressBeforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    compressQuality: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    compressedWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    compressedHeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    sourceType: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    acceptTypes: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TUnsafe<string>>>;
+    maxSize: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    single: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    maxUploadCount: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+    status: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    required: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    requiredMsg: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    requiredFlag: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    callbacks: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
+        beforeUpload: import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+            files: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TUnknown>>;
+            base64Uri: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+            tmpFilePaths: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+        }>], import("@sinclair/typebox").TAny>;
+    }>>;
+    extra: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    isChooseAvatar: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    showShape: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    borderedH5: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    label: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    labelVisible: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    labelAlign: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    labelWrap: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    layout: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+    labelWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    labelTips: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+    name: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString & {
+        'x-helper-text': string;
+    }>;
+    value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+}>;
+export type EventsType = {
+    events: Partial<{
+        success: (arg: {
+            value: unknown;
+            file?: File;
+        }) => void;
+        change: (arg: {
+            value: unknown;
+        }) => void;
+        error: (err: unknown) => void;
+    }>;
+};
 declare const config: {
-    readonly $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
-    readonly data: import("@sinclair/typebox").TObject<{}>;
-    readonly classes: readonly [];
-    readonly methods: readonly [];
-    readonly events: readonly [];
-    readonly meta: {
-        readonly name: "WdUploadImage";
-        readonly title: "图片上传";
-        readonly description: "表单布局";
-        readonly icon: "../../icons/Form.svg";
-        readonly category: "展示";
-        readonly categoryOrder: 1;
-        readonly componentOrder: 1;
-        readonly visible: readonly ["APP"];
-    };
-    readonly configMeta: {
-        readonly docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdForm";
-        readonly shortcut: {
-            readonly props: readonly ["type"];
+    $schema: "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json";
+    data: import("@sinclair/typebox").TObject<{
+        isCompressBeforeUpload: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        compressQuality: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        compressedWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        compressedHeight: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        sourceType: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        acceptTypes: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TUnsafe<string>>>;
+        maxSize: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        single: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        maxUploadCount: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
+        status: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        required: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        requiredMsg: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        requiredFlag: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        callbacks: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
+            beforeUpload: import("@sinclair/typebox").TFunction<[import("@sinclair/typebox").TObject<{
+                files: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TUnknown>>;
+                base64Uri: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+                tmpFilePaths: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+            }>], import("@sinclair/typebox").TAny>;
+        }>>;
+        extra: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        isChooseAvatar: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        showShape: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        borderedH5: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        label: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        labelVisible: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        labelAlign: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        labelWrap: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        layout: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<string>>;
+        labelWidth: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        labelTips: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        name: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString & {
+            'x-helper-text': string;
+        }>;
+        value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+    }>;
+    properties: import("@sinclair/typebox").TObject<{
+        label: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
+        name: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString & {
+            'x-helper-text': string;
+        }>;
+        value: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TArray<import("@sinclair/typebox").TString>>;
+        required: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        disabled: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        visible: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+        readOnly: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
+    }>;
+    classes: {
+        name: string;
+        selector: string;
+        description: string;
+    }[];
+    methods: {
+        name: string;
+        label: string;
+        description: string;
+    }[];
+    events: ({
+        name: string;
+        title: string;
+    } | {
+        detail: import("@sinclair/typebox").TObject<{
+            value: import("@sinclair/typebox").TUnknown;
+        }>;
+        name: string;
+        title: string;
+        description: string;
+    })[];
+    meta: {
+        description: string;
+        figureIcon: string;
+        icon: "../icons/FormImageUploader.svg";
+        title: string;
+        name: string;
+        componentName: string;
+        categoryOrder: number;
+        componentOrder: number;
+        docsUrl: "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdUploadImage";
+        category: string;
+        shortcut: {
+            props: string[];
+        };
+        group: {
+            标签项: {
+                'x-index': number;
+                expand: boolean;
+            };
+            通用: {
+                'x-index': number;
+                expand: boolean;
+            };
+            标题风格: {
+                'x-index': number;
+                expand: boolean;
+            };
+            输入框: {
+                'x-index': number;
+                expand: boolean;
+            };
+            标签风格: {
+                'x-index': number;
+                expand: boolean;
+            };
+            选择框: {
+                'x-index': number;
+                expand: boolean;
+            };
+            内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            图片内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            文件内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            地图内容: {
+                'x-index': number;
+                expand: boolean;
+            };
+            开关按钮: {
+                'x-index': number;
+                expand: boolean;
+            };
+            小程序能力: {
+                'x-index': number;
+                expand: boolean;
+            };
+            '\u72B6\u6001/\u6821\u9A8C': {
+                'x-index': number;
+                expand: boolean;
+            };
         };
+        visible: any;
+        inlineStyleForm: {
+            $text: {
+                visible: boolean;
+            };
+            justifyContent: {
+                visible: boolean;
+            };
+            flexDirection: {
+                visible: boolean;
+            };
+            alignItems: {
+                visible: boolean;
+            };
+        };
+        templates: ({
+            readonly when: "$attached";
+            readonly body: "\n  [attributes]\n  name = \"{{$self.id}}\"\n  ";
+            readonly __k: "init-name-with-id";
+        } | {
+            body: string;
+            when: string;
+        })[];
+    };
+    compConfig: {
+        componentType: string;
     };
 };
 export default config;
+export type DataType = Simplify<Static<typeof data>>;

package/dist/configs/components/wd-upload-image.js

@@ -1,36 +1,196 @@
-import { defineConfig, Type } from '../type-utils';
+import { defineConfig, Type, Tuple } from '../type-utils';
+import { FORM_ITEM_DATA, FORM_ITEM_EVENTS, FORM_ITEM_METHODS, FORM_ITEM_META, ItemData, pickWithXCategory, X_CATEGORY, getFormItemDataTitle, getFormItemClasses, } from '../type-utils/type-form';
+import { templateInitNameWithId } from './common/init-name-with-id';
+// 图片来源
+export const WD_TAG_CAPTURE_TYPE = [
+    { label: '拍照与相册', value: 'both' },
+    { label: '仅拍照', value: 'camera' },
+    { label: '仅相册', value: 'album' },
+];
+const SELECT = pickWithXCategory(FORM_ITEM_DATA, ['extra', 'showShape', 'borderedH5', 'isChooseAvatar'], X_CATEGORY.IMAGE_CONTENT);
+const TITLE = getFormItemDataTitle('图片上传');
 // 属性类型定义
-const data = Type.Object({});
+const data = Type.Partial(Type.Object({
+    // 通用
+    name: Object.assign({}, FORM_ITEM_DATA.name, {
+        'x-helper-text': '图片上传后，图片 https 链接默认仅可在微搭应用中访问，有效期 2 小时，可在[云存储权限设置](https://console.cloud.tencent.com/tcb/storage/index?envId=lowcode-3gp1xflvc8844909&rid=4&tabId=auth)中调整访问权限。',
+    }),
+    value: FORM_ITEM_DATA._valueInUpload,
+    // 标题
+    ...TITLE,
+    // 内容
+    ...SELECT,
+    isCompressBeforeUpload: Type.Boolean({
+        title: '上传前压缩图片',
+        'x-runtime-default': false,
+        'x-category': X_CATEGORY.IMAGE_CONTENT,
+        'x-index': FORM_ITEM_DATA.acceptTypes['x-index'] - 4,
+        'x-helper-text': 'iOS小程序端仅支持压缩JPG格式图片',
+        'x-props': {
+            'data-hidebind': true,
+        },
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: '*(compressQuality,compressedWidth,compressedHeight)',
+                condition: '{{$self.value === true}}',
+            },
+        ],
+    }),
+    compressQuality: Type.Number({
+        maximum: 100,
+        title: '压缩质量',
+        'x-runtime-default': 70,
+        'x-category': X_CATEGORY.IMAGE_CONTENT,
+        'x-index': FORM_ITEM_DATA.acceptTypes['x-index'] - 3,
+        'x-helper-text': '该属性仅对JPG格式图片有效，范围0~100，数值越小，质量越低，压缩率越高',
+    }),
+    compressedWidth: Type.Number({
+        title: '压缩后图片宽度（px）',
+        'x-index': FORM_ITEM_DATA.acceptTypes['x-index'] - 2,
+        'x-category': X_CATEGORY.IMAGE_CONTENT,
+        'x-helper-text': '若为空则以「压缩后图片高度」为准等比缩放；两个属性均为空时，保持图片原尺寸',
+    }),
+    compressedHeight: Type.Number({
+        title: '压缩后图片高度（px）',
+        'x-index': FORM_ITEM_DATA.acceptTypes['x-index'] - 1,
+        'x-category': X_CATEGORY.IMAGE_CONTENT,
+        'x-helper-text': '若为空则以「压缩后图片宽度」为准等比缩放；两个属性均为空时，保持图片原尺寸',
+    }),
+    sourceType: Type.StringEnum({
+        title: '图片来源',
+        'x-runtime-default': 'both',
+        'x-category': X_CATEGORY.IMAGE_CONTENT,
+        'x-index': FORM_ITEM_DATA.isChooseAvatar['x-index'] - 1,
+        enum: Tuple(WD_TAG_CAPTURE_TYPE),
+        description: '图片选择的来源',
+        'x-helper-text': '仅拍照模式支持小程序、H5端；仅相册模式支持小程序、PC端',
+    }),
+    // 状态校验
+    acceptTypes: FORM_ITEM_DATA.acceptTypes,
+    maxSize: FORM_ITEM_DATA.maxSize,
+    single: FORM_ITEM_DATA.single,
+    maxUploadCount: FORM_ITEM_DATA.maxUploadCount,
+    status: FORM_ITEM_DATA.status,
+    required: FORM_ITEM_DATA.required,
+    requiredMsg: FORM_ITEM_DATA.requiredMsg,
+    requiredFlag: FORM_ITEM_DATA.requiredFlag,
+    callbacks: Type.Object({
+        beforeUpload: Type.Function([
+            Type.Object({
+                files: Type.Optional(Type.Array(Type.Unknown({
+                    title: 'file 对象',
+                    'x-platforms': ['WEB', 'MOBILEWEB', 'PCWEB'],
+                }))),
+                base64Uri: Type.Optional(Type.Array(Type.String({
+                    title: 'base64',
+                }), {
+                    'x-platforms': ['WEB', 'MOBILEWEB', 'PCWEB'],
+                })),
+                tmpFilePaths: Type.Optional(Type.Array(Type.String({
+                    title: '文件临时地址',
+                }), { 'x-platforms': ['MP'] })),
+            }),
+        ], Type.Any(), {
+            title: '上传前处理函数',
+            required: false,
+        }),
+    }, {
+        'x-category': X_CATEGORY.IMAGE_CONTENT,
+        'x-index': FORM_ITEM_DATA.acceptTypes['x-index'] - 5,
+        title: '',
+        description: '配置相关的函数',
+        'x-props': {
+            'data-hidebind': true,
+        },
+    }),
+}));
+const paramValueType = Type.Object({ value: Type.Unknown({ title: '值' }) });
+const events = [
+    { ...{}, ...FORM_ITEM_EVENTS.change, detail: paramValueType },
+    FORM_ITEM_EVENTS.success,
+    FORM_ITEM_EVENTS.error,
+];
+const properties = Type.Composite([
+    Type.Pick(data, ['name', 'label', 'value', 'required']),
+    Type.Pick(ItemData, ['visible', 'disabled', 'readOnly']),
+]);
+const classes = [
+    ...getFormItemClasses('upload-image', { isInput: false }),
+    ...[
+        {
+            name: '图片上传前的容器样式',
+            selector: `.weui-uploader__input-box`,
+            description: '图片上传前的北京框样式',
+        },
+        {
+            name: '图片上传的 + 号竖线样式',
+            selector: `.weui-uploader__input-box::before `,
+            description: '图片上传的 + 号竖线样式',
+        },
+        {
+            name: '图片上传的 + 号横线样式',
+            selector: `.weui-uploader__input-box::after `,
+            description: '图片上传的 + 号横线样式',
+        },
+        {
+            name: '图片上传后的容器样式',
+            selector: `weui-uploader__file`,
+            description: '图片上传后的容器样式',
+        },
+    ],
+];
 // export default
 const config = defineConfig({
     $schema: 'https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json',
-    // 属性定义
     data,
-    // 只读属性定义
-    // properties,
-    // 样式API
-    classes: [],
-    // 组件方法
-    methods: [],
-    // 组件对外暴露事件
-    events: [],
-    // 组件元信息
+    properties,
+    classes,
+    methods: [
+        Object.assign({}, FORM_ITEM_METHODS.setValue, { params: paramValueType }),
+        FORM_ITEM_METHODS.setVisible,
+        FORM_ITEM_METHODS.setDisabled,
+        FORM_ITEM_METHODS.clearValue,
+        FORM_ITEM_METHODS.setReadOnly,
+        FORM_ITEM_METHODS.handleValidate,
+        FORM_ITEM_METHODS.clearValidate,
+    ],
+    events,
     meta: {
-        name: 'WdUploadImage',
+        description: '用于上传图片、保存图片数据。',
+        figureIcon: '../figureIcons/WdUploadImage.svg',
+        icon: '../icons/FormImageUploader.svg',
         title: '图片上传',
-        description: '表单布局',
-        icon: '../../icons/Form.svg',
-        category: '展示',
-        categoryOrder: 1,
-        componentOrder: 1,
-        visible: ['APP'],
+        name: 'WdUploadImage',
+        componentName: 'UploadImage',
+        categoryOrder: 500,
+        componentOrder: 420,
+        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/WdUploadImage',
+        category: FORM_ITEM_META.category,
+        shortcut: FORM_ITEM_META.shortcut,
+        group: FORM_ITEM_META.group,
+        visible: FORM_ITEM_META.visible,
+        inlineStyleForm: FORM_ITEM_META.inlineStyleForm,
+        templates: [
+            templateInitNameWithId,
+            {
+                body: `
+      [attributes.callbacks]
+      ":beforeUpload" = "
+      (result) => {
+        // console.log('beforeUpload', result);
+        return true;
+
+        // 可以通过返回false，禁用默认上传逻辑，自定义上传
+        // return false;
+      }"
+      `,
+                when: '$attached',
+            },
+        ],
     },
-    configMeta: {
-        docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdForm',
-        // 快捷编辑时展示在编辑区的属性
-        shortcut: {
-            props: ['type'],
-        },
+    compConfig: {
+        componentType: 'formField',
     },
 });
 export default config;