@gct-paas/core-web 0.1.4-dev.12 → 0.1.4-dev.13

package/es/components/field-upload/src/components/upload-design.vue_vue_type_style_index_0_scoped_1e5189c1_lang.css

@@ -0,0 +1,43 @@
+.progress-wrap[data-v-1e5189c1] {
+  display: flex;
+  margin-top: 16px;
+}
+.progress-wrap .progress-box[data-v-1e5189c1] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  line-height: 22px;
+  align-self: center;
+}
+.progress-wrap .progress-box[data-v-1e5189c1] .ant-progress {
+  line-height: 0.4;
+}
+.progress-wrap .progress-box[data-v-1e5189c1] .ant-progress .ant-progress-text {
+  position: absolute;
+  right: 0;
+  top: -14px;
+  line-height: 0.6;
+  color: #797a7d;
+}
+.progress-wrap .progress-box[data-v-1e5189c1] .ant-progress-show-info .ant-progress-outer {
+  margin-right: 0;
+  padding-right: 0;
+}
+.progress-wrap .progress-box[data-v-1e5189c1] .ant-progress-show-info .ant-progress-outer .ant-progress-inner {
+  background: #e6e9ef;
+}
+.progress-wrap .icon[data-v-1e5189c1] {
+  margin-left: 24px;
+  font-size: 16px;
+  color: #212528 !important;
+  align-self: center;
+}
+[data-v-1e5189c1] .ant-upload.ant-upload-drag {
+  background: #f7f8fa;
+}
+[data-v-1e5189c1] .ant-upload.ant-upload-drag.ant-upload-disabled {
+  opacity: 0.5;
+}
+[data-v-1e5189c1] .ant-upload.ant-upload-drag .ant-upload {
+  padding: 40px 0;
+}

package/es/components/field-upload/src/hooks/hooks.d.ts

@@ -0,0 +1,4 @@
+import { UploadTypeEnum } from '../types';
+export declare const getFileSize: (url: string) => Promise<unknown>;
+export declare const sizeParser: (size: number) => string;
+export declare const typeParser: (fileName: string) => "img" | "PDF" | UploadTypeEnum.JPG | UploadTypeEnum.JPEG | UploadTypeEnum.PNG | UploadTypeEnum.BMP | UploadTypeEnum.DOCX | UploadTypeEnum.XLSX | UploadTypeEnum.DOC | UploadTypeEnum.MP4 | UploadTypeEnum.AVI | UploadTypeEnum.PPT | UploadTypeEnum.GIF | "MP4" | "ssl" | "attachment";

package/es/components/field-upload/src/hooks/hooks.mjs

@@ -0,0 +1,47 @@
+import { UploadTypeEnum } from "../types/index.mjs";
+//#region src/components/field-upload/src/hooks/hooks.ts
+var getFileSize = (url) => {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest();
+		xhr.open("GET", url);
+		xhr.responseType = "blob";
+		xhr.onload = () => {
+			if (xhr.status === 200) {
+				const blob = xhr.response;
+				const reader = new FileReader();
+				reader.onloadend = () => {
+					resolve(blob.size);
+				};
+				reader.readAsText(blob);
+			} else reject(`Error ${xhr.status}: ${xhr.statusText}`);
+		};
+		xhr.send();
+	});
+};
+var sizeParser = (size) => {
+	if (size / 1024 < 1) return (size / 1024).toFixed(2) + "K";
+	if (size / 1024 / 10 < 1) return (size / 1024).toFixed(1) + "K";
+	if (size / 1024 / 1024 < 1) return (size / 1024).toFixed(0) + "K";
+	if (size / 1024 / 1024 / 10 < 1) return (size / 1024 / 1024).toFixed(2) + "M";
+	return (size / 1024 / 1024).toFixed(2) + "M";
+};
+var typeParser = (fileName) => {
+	const arr = fileName?.split(".") ?? [];
+	let type = arr[arr.length - 1] || "png";
+	type = type.toLowerCase();
+	if ([
+		UploadTypeEnum.PNG,
+		UploadTypeEnum.JPG,
+		UploadTypeEnum.JPEG,
+		UploadTypeEnum.BMP,
+		UploadTypeEnum.GIF
+	].includes(type)) return "img";
+	if ([UploadTypeEnum.DOCX, UploadTypeEnum.DOC].includes(type)) return UploadTypeEnum.DOC;
+	if ([UploadTypeEnum.MP4, UploadTypeEnum.AVI].includes(type)) return "MP4";
+	if (type === UploadTypeEnum.PDF) return "PDF";
+	if (type === UploadTypeEnum.CER) return "ssl";
+	if (Object.values(UploadTypeEnum).includes(type)) return type;
+	return "attachment";
+};
+//#endregion
+export { getFileSize, sizeParser, typeParser };

package/es/components/field-upload/src/types/index.d.ts

@@ -0,0 +1,42 @@
+export declare enum UploadTypeEnum {
+    JPG = "jpg",
+    JPEG = "jpeg",
+    PNG = "png",
+    BMP = "bmp",
+    DOCX = "docx",
+    PDF = "pdf",
+    XLSX = "xlsx",
+    DOC = "doc",
+    MP4 = "mp4",
+    AVI = "avi",
+    PPT = "ppt",
+    GIF = "gif",
+    CER = "cer"
+}
+export interface AttrObjType {
+    /** 单个文件大小 */
+    maxSize?: number;
+    /** 最大上传数量 */
+    maxCount?: number;
+    /** 支持的格式数组 */
+    accept?: string[];
+    /** 支持的格式 */
+    acceptStr?: string;
+}
+export declare enum statusEnum {
+    EXCEPTION = "exception",
+    ACTIVE = "active"
+}
+export interface fileType {
+    name: string;
+    path: string;
+    size: number;
+}
+export interface FileItemType {
+    uid: string;
+    name?: string;
+    status?: statusEnum;
+    path?: string;
+    fileSize?: number;
+    percentNum?: number;
+}

package/es/components/field-upload/src/types/index.mjs

@@ -0,0 +1,24 @@
+//#region src/components/field-upload/src/types/index.ts
+var UploadTypeEnum = /* @__PURE__ */ function(UploadTypeEnum) {
+	UploadTypeEnum["JPG"] = "jpg";
+	UploadTypeEnum["JPEG"] = "jpeg";
+	UploadTypeEnum["PNG"] = "png";
+	UploadTypeEnum["BMP"] = "bmp";
+	UploadTypeEnum["DOCX"] = "docx";
+	UploadTypeEnum["PDF"] = "pdf";
+	UploadTypeEnum["XLSX"] = "xlsx";
+	UploadTypeEnum["DOC"] = "doc";
+	UploadTypeEnum["MP4"] = "mp4";
+	UploadTypeEnum["AVI"] = "avi";
+	UploadTypeEnum["PPT"] = "ppt";
+	UploadTypeEnum["GIF"] = "gif";
+	UploadTypeEnum["CER"] = "cer";
+	return UploadTypeEnum;
+}({});
+var statusEnum = /* @__PURE__ */ function(statusEnum) {
+	statusEnum["EXCEPTION"] = "exception";
+	statusEnum["ACTIVE"] = "active";
+	return statusEnum;
+}({});
+//#endregion
+export { UploadTypeEnum, statusEnum };

package/es/components/image-upload/index.d.ts

@@ -0,0 +1,2 @@
+import { WithInstall } from '../../utils';
+export declare const ImageUpload: WithInstall<unknown>;

package/es/components/image-upload/index.mjs

@@ -0,0 +1,7 @@
+import ImageUpload_default from "./src/ImageUpload.vue.mjs";
+import { withInstall } from "../../utils/with-install.mjs";
+import "../../utils/index.mjs";
+//#region src/components/image-upload/index.ts
+var ImageUpload = withInstall(ImageUpload_default);
+//#endregion
+export { ImageUpload };

package/es/components/image-upload/src/ImageUpload.vue.d.ts

@@ -0,0 +1,32 @@
+import { MaterialEnum } from '@gct-paas/core';
+type __VLS_Props = {
+    modelKey?: string;
+    modelValue?: string;
+    readonly: boolean;
+    disabled: boolean;
+    /** 设计模式 */
+    isDesign: boolean;
+    /** 单个文件大小 */
+    maxSize?: number;
+    /** 最大上传数量 */
+    maxCount?: number;
+    /** 支持的格式数组 */
+    accept?: string[];
+    materialType: MaterialEnum;
+    /** 表格模式 */
+    isTable?: boolean;
+    /** 表单校验 */
+    beforeUpload?: (file: File) => Promise<unknown>;
+    /** 浮层渲染父节点 */
+    getContainer?: () => HTMLElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    onBeforeUpload: (...args: any[]) => void;
+    saveTableRow: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onOnBeforeUpload?: ((...args: any[]) => any) | undefined;
+    onSaveTableRow?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/components/image-upload/src/ImageUpload.vue.mjs

@@ -0,0 +1,5 @@
+import ImageUpload_vue_vue_type_script_setup_true_name_ImageUpload_lang_default from "./ImageUpload.vue_vue_type_script_setup_true_name_ImageUpload_lang.mjs";
+//#region src/components/image-upload/src/ImageUpload.vue
+var ImageUpload_default = ImageUpload_vue_vue_type_script_setup_true_name_ImageUpload_lang_default;
+//#endregion
+export { ImageUpload_default as default };

package/es/components/image-upload/src/ImageUpload.vue_vue_type_script_setup_true_name_ImageUpload_lang.mjs

@@ -0,0 +1,74 @@
+import upload_design_default from "./components/upload-design.vue.mjs";
+import base_upload_default from "./components/base-upload.vue.mjs";
+import { createBlock, createElementBlock, defineComponent, openBlock } from "vue";
+import "@gct-paas/core";
+//#region src/components/image-upload/src/ImageUpload.vue?vue&type=script&setup=true&name=ImageUpload&lang.ts
+var _hoisted_1 = { class: "image-upload-wrapper w-full" };
+var ImageUpload_vue_vue_type_script_setup_true_name_ImageUpload_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ImageUpload",
+	props: {
+		modelKey: {},
+		modelValue: {},
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		isDesign: { type: Boolean },
+		maxSize: {},
+		maxCount: {},
+		accept: {},
+		materialType: {},
+		isTable: { type: Boolean },
+		beforeUpload: { type: Function },
+		getContainer: { type: Function }
+	},
+	emits: [
+		"update:modelValue",
+		"onBeforeUpload",
+		"saveTableRow"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const updateValue = (value) => {
+			return emit("update:modelValue", value);
+		};
+		const saveTableRowData = () => {
+			/**列字段时候触发保存 */
+			emit("saveTableRow");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [__props.isDesign ? (openBlock(), createBlock(upload_design_default, {
+				key: 0,
+				disabled: __props.disabled,
+				readonly: __props.readonly
+			}, null, 8, ["disabled", "readonly"])) : (openBlock(), createBlock(base_upload_default, {
+				key: 1,
+				readonly: __props.readonly,
+				disabled: __props.disabled,
+				"max-size": __props.maxSize,
+				"max-count": __props.maxCount,
+				accept: __props.accept,
+				"model-key": __props.modelKey,
+				"model-value": __props.modelValue,
+				"is-table": __props.isTable,
+				"before-upload": __props.beforeUpload,
+				"material-type": __props.materialType,
+				"get-container": __props.getContainer,
+				"onUpdate:modelValue": updateValue,
+				onSaveTableRow: saveTableRowData
+			}, null, 8, [
+				"readonly",
+				"disabled",
+				"max-size",
+				"max-count",
+				"accept",
+				"model-key",
+				"model-value",
+				"is-table",
+				"before-upload",
+				"material-type",
+				"get-container"
+			]))]);
+		};
+	}
+});
+//#endregion
+export { ImageUpload_vue_vue_type_script_setup_true_name_ImageUpload_lang_default as default };

package/es/components/image-upload/src/components/base-upload.vue.d.ts

@@ -0,0 +1,24 @@
+import { MaterialEnum } from '@gct-paas/core';
+type __VLS_Props = {
+    modelKey?: string;
+    modelValue?: string;
+    readonly: boolean;
+    disabled: boolean;
+    maxCount?: number;
+    maxSize?: number;
+    accept?: string[];
+    isTable?: boolean;
+    beforeUpload?: (file: File) => Promise<unknown>;
+    materialType?: MaterialEnum;
+    getContainer?: () => HTMLElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    onBeforeUpload: (...args: any[]) => void;
+    saveTableRow: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onOnBeforeUpload?: ((...args: any[]) => any) | undefined;
+    onSaveTableRow?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/image-upload/src/components/base-upload.vue.mjs

@@ -0,0 +1,8 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import base_upload_vue_vue_type_script_name_baseUpload_setup_true_lang_default from "./base-upload.vue_vue_type_script_name_baseUpload_setup_true_lang.mjs";
+import './base-upload.vue_vue_type_style_index_1_lang.css';import './base-upload.vue_vue_type_style_index_0_scoped_3248e630_lang.css';/* empty css                                                                  */
+/* empty css                                                  */
+//#region src/components/image-upload/src/components/base-upload.vue
+var base_upload_default = /* @__PURE__ */ _plugin_vue_export_helper_default(base_upload_vue_vue_type_script_name_baseUpload_setup_true_lang_default, [["__scopeId", "data-v-3248e630"]]);
+//#endregion
+export { base_upload_default as default };

package/es/components/image-upload/src/components/base-upload.vue_vue_type_script_name_baseUpload_setup_true_lang.mjs

@@ -0,0 +1,209 @@
+import { statusEnum } from "../types/index.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, resolveComponent, toDisplayString, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { cloneDeep } from "lodash-es";
+import { MaterialEnum, Uploader, t, uuid2 } from "@gct-paas/core";
+import { message } from "ant-design-vue";
+//#region src/components/image-upload/src/components/base-upload.vue?vue&type=script&name=baseUpload&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "ant-upload-text",
+	style: { "font-size": "14px" }
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "img-box"
+};
+var _hoisted_3 = ["onClick"];
+var base_upload_vue_vue_type_script_name_baseUpload_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "base-upload",
+	props: {
+		modelKey: {},
+		modelValue: {},
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		maxCount: {},
+		maxSize: {},
+		accept: {},
+		isTable: { type: Boolean },
+		beforeUpload: { type: Function },
+		materialType: {},
+		getContainer: { type: Function }
+	},
+	emits: [
+		"update:modelValue",
+		"onBeforeUpload",
+		"saveTableRow"
+	],
+	setup(__props, { emit: __emit }) {
+		const fileLen = ref(0);
+		const fileList = ref([]);
+		const emit = __emit;
+		const props = __props;
+		const getPopContainer = props.getContainer || document.body;
+		const value = computed({
+			get() {
+				try {
+					return props.modelValue ? props.modelValue.split(",") : [];
+				} catch (error) {
+					return [];
+				}
+			},
+			set(value) {
+				if (value?.length > 0) emit("update:modelValue", value);
+				else emit("update:modelValue", []);
+			}
+		});
+		watch(() => props.modelValue, async () => {
+			const P = (props.modelValue ? props.modelValue.split(",") : []).map(async (url) => {
+				const path = void 0 + url;
+				return {
+					uid: uuid2(16, 16),
+					path,
+					name: url.split("/").at(-1),
+					status: void 0,
+					fileSize: 0,
+					percentNum: 0
+				};
+			});
+			fileList.value = await Promise.all(P);
+		}, { immediate: true });
+		const acceptList = computed(() => {
+			const _accept = cloneDeep(props.accept || []);
+			const handleAccept = [...new Set(_accept)];
+			const allAccepts = [];
+			handleAccept.forEach((ext) => {
+				allAccepts.push(ext);
+				if (ext === ext.toLowerCase()) allAccepts.push(ext.toUpperCase());
+				if (ext === ext.toUpperCase()) allAccepts.push(ext.toLowerCase());
+			});
+			return [...new Set(allAccepts)].map((i) => "." + i);
+		});
+		const fileaccept = computed(() => {
+			return acceptList.value + "" || "image/*";
+		});
+		const showUpload = computed(() => {
+			if (props.maxCount === null || props.maxCount === void 0) return true;
+			return fileList.value.length < props.maxCount;
+		});
+		const isMultiple = computed(() => {
+			if (props.maxCount === null || props.maxCount === void 0) return true;
+			return props.maxCount > 1;
+		});
+		async function beforeUploadFn({ file }) {
+			fileLen.value += 1;
+			if (fileLen.value > props.maxCount) {
+				fileLen.value -= 1;
+				return;
+			}
+			const localPath = URL.createObjectURL(file);
+			console.log(file, localPath);
+			fileList.value = [...fileList.value, {
+				uid: file.uid,
+				name: file.name,
+				fileSize: file.size,
+				path: localPath,
+				percentNum: 0,
+				status: statusEnum.ACTIVE
+			}];
+			await uploadFile(file);
+		}
+		async function uploadFile(file) {
+			let findItem = fileList.value.find((item) => item.uid === file.uid) || {};
+			try {
+				await Uploader.beforeUploadFun(file, {
+					maxSize: props.maxSize || 5,
+					acceptList: (props.accept || []).map((i) => "." + i),
+					beforeUpload: async (file) => {
+						if (props.beforeUpload && Object.prototype.toString.call(props.beforeUpload) === "[object Function]") return props.beforeUpload(file);
+					}
+				});
+				const timer = setInterval(() => {
+					if (findItem.percentNum && findItem.percentNum < 95) findItem["percentNum"] += 7;
+				}, 100);
+				try {
+					const path = await Uploader.uploadByFile(file, true, props.modelKey);
+					value.value = [...value.value, path];
+					findItem = Object.assign(findItem, {
+						path: void 0 + path,
+						percentNum: 100,
+						status: void 0
+					});
+					clearInterval(timer);
+					await nextTick();
+					/**列字段时候触发保存 */
+					props.isTable && emit("saveTableRow");
+				} catch (err) {
+					fileLen.value -= 1;
+					console.warn(err);
+					findItem["status"] = statusEnum.EXCEPTION;
+					clearInterval(timer);
+				}
+			} catch (error) {
+				fileLen.value -= 1;
+				message.warn(error);
+				fileList.value.splice(fileList.value.length - 1, 1);
+			}
+		}
+		async function deleteFile(index) {
+			fileLen.value -= 1;
+			fileList.value.splice(index, 1);
+			value.value.splice(index, 1);
+			value.value = [...value.value];
+			await nextTick();
+		}
+		return (_ctx, _cache) => {
+			const _component_a_upload_dragger = resolveComponent("a-upload-dragger");
+			const _component_a_progress = resolveComponent("a-progress");
+			const _component_a_image = resolveComponent("a-image");
+			const _component_close_circle_filled = resolveComponent("close-circle-filled");
+			const _component_a_image_preview_group = resolveComponent("a-image-preview-group");
+			return openBlock(), createElementBlock(Fragment, null, [withDirectives(createVNode(_component_a_upload_dragger, {
+				class: normalizeClass(__props.disabled ? "upload-disabled" : ""),
+				style: { "margin": "4px 0" },
+				disabled: __props.disabled,
+				"custom-request": beforeUploadFn,
+				multiple: isMultiple.value,
+				"file-list": [],
+				accept: fileaccept.value
+			}, {
+				default: withCtx(() => [_cache[0] || (_cache[0] = createElementVNode("div", null, [createElementVNode("i", { class: "iconfont icon-tupian-shili" })], -1)), createElementVNode("p", _hoisted_1, toDisplayString(unref(t)("sys.pageDesigner.clickOrDragToUpload")), 1)]),
+				_: 1
+			}, 8, [
+				"class",
+				"disabled",
+				"multiple",
+				"accept"
+			]), [[vShow, showUpload.value && !__props.readonly]]), fileList.value.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_a_image_preview_group, { preview: { getContainer: unref(getPopContainer) } }, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (item, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: index,
+						class: normalizeClass(["img-item float-left mr-8px my-4px", { "material-table-field": __props.materialType === unref(MaterialEnum).MaterialTableField }])
+					}, [
+						item.status ? (openBlock(), createBlock(_component_a_progress, {
+							key: 0,
+							"stroke-width": 4,
+							"show-info": false,
+							percent: item.percentNum
+						}, null, 8, ["percent"])) : createCommentVNode("", true),
+						createVNode(_component_a_image, {
+							width: "100px",
+							height: "100px",
+							src: item.path,
+							preview: { maskClassName: "custom-image-preview" }
+						}, {
+							previewMask: withCtx(() => [..._cache[1] || (_cache[1] = [])]),
+							_: 1
+						}, 8, ["src"]),
+						!item.status && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: "delete-icon-box",
+							onClick: withModifiers(($event) => deleteFile(index), ["stop"])
+						}, [createVNode(_component_close_circle_filled, { class: "delete-icon" })], 8, _hoisted_3)) : createCommentVNode("", true)
+					], 2);
+				}), 128))]),
+				_: 1
+			}, 8, ["preview"])])) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+//#endregion
+export { base_upload_vue_vue_type_script_name_baseUpload_setup_true_lang_default as default };

package/es/components/image-upload/src/components/base-upload.vue_vue_type_style_index_0_scoped_3248e630_lang.css

@@ -0,0 +1,73 @@
+.icon-tupian-shili[data-v-3248e630] {
+  color: var(--ant-primary-color);
+  font-size: 56px;
+  line-height: 56px;
+}
+[data-v-3248e630] .ant-image-mask {
+  border-radius: 4px;
+  font-size: 18px;
+}
+[data-v-3248e630] .ant-image .ant-image-img {
+  border-radius: 4px;
+  object-fit: contain;
+}
+.img-box[data-v-3248e630] {
+  max-height: 268px;
+  overflow-y: auto;
+}
+.img-box[data-v-3248e630]::-webkit-scrollbar {
+  display: block;
+  width: 3px;
+}
+.img-box .img-item[data-v-3248e630] {
+  position: relative;
+  width: 102px;
+  height: 102px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  background-color: #f7f8fa;
+}
+.img-box .img-item .ant-progress[data-v-3248e630] {
+  display: flex;
+  position: absolute;
+  z-index: 1;
+  align-items: center;
+  height: 100%;
+  padding: 10px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.img-box .img-item.material-table-field[data-v-3248e630]:nth-child(4n + 4) {
+  margin-right: 0;
+}
+.img-box .img-item .delete-icon-box[data-v-3248e630] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+}
+.img-box .img-item .delete-icon-box .delete-icon[data-v-3248e630] {
+  color: rgba(0, 0, 0, 0.56);
+  font-size: 24px;
+}
+.img-box .img-item .delete-icon-box .delete-icon[data-v-3248e630]:hover {
+  color: rgba(0, 0, 0, 0.65);
+}
+[data-v-3248e630] .ant-upload.ant-upload-drag {
+  background: #f7f8fa;
+}
+[data-v-3248e630] .ant-upload.ant-upload-drag.ant-upload-disabled {
+  opacity: 1;
+}
+[data-v-3248e630] .ant-upload.ant-upload-drag .ant-upload {
+  padding: 40px 0;
+}
+.upload-disabled .icon-tupian-shili[data-v-3248e630] {
+  color: #c3c3c3;
+}
+[data-v-3248e630] .ant-upload.ant-upload-drag.upload-disabled p.ant-upload-text {
+  color: #c3c3c3;
+}
+[data-v-3248e630] .custom-image-preview.ant-image-mask {
+  background: transparent;
+}

package/es/components/image-upload/src/components/base-upload.vue_vue_type_style_index_1_lang.css

@@ -0,0 +1,3 @@
+.ant-image-preview-mask {
+  z-index: 1031;
+}

package/es/components/image-upload/src/components/upload-design.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    disabled: boolean;
+    readonly: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/es/components/image-upload/src/components/upload-design.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import upload_design_vue_vue_type_script_name_UploadDesign_setup_true_lang_default from "./upload-design.vue_vue_type_script_name_UploadDesign_setup_true_lang.mjs";
+import './upload-design.vue_vue_type_style_index_0_scoped_575d3a1a_lang.css';/* empty css                                                                    */
+//#region src/components/image-upload/src/components/upload-design.vue
+var upload_design_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_design_vue_vue_type_script_name_UploadDesign_setup_true_lang_default, [["__scopeId", "data-v-575d3a1a"]]);
+//#endregion
+export { upload_design_default as default };

package/es/components/image-upload/src/components/upload-design.vue_vue_type_script_name_UploadDesign_setup_true_lang.mjs

@@ -0,0 +1,33 @@
+import { createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, resolveComponent, toDisplayString, withCtx } from "vue";
+//#region src/components/image-upload/src/components/upload-design.vue?vue&type=script&name=UploadDesign&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "ant-upload-text",
+	style: { "font-size": "14px" }
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "upload-readonly"
+};
+var upload_design_vue_vue_type_script_name_UploadDesign_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "upload-design",
+	props: {
+		disabled: { type: Boolean },
+		readonly: { type: Boolean }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			const _component_a_upload_dragger = resolveComponent("a-upload-dragger");
+			return !__props.readonly ? (openBlock(), createBlock(_component_a_upload_dragger, {
+				key: 0,
+				class: normalizeClass(__props.disabled ? "upload-disabled" : ""),
+				"file-list": [],
+				disabled: __props.disabled
+			}, {
+				default: withCtx(() => [_cache[0] || (_cache[0] = createElementVNode("div", null, [createElementVNode("i", { class: "iconfont icon-tupian-shili" })], -1)), createElementVNode("p", _hoisted_1, toDisplayString(_ctx.$t("sys.pageDesigner.clickOrDragToUpload")), 1)]),
+				_: 1
+			}, 8, ["class", "disabled"])) : (openBlock(), createElementBlock("div", _hoisted_2, [..._cache[1] || (_cache[1] = [createElementVNode("i", { class: "iconfont icon-tupian-shili" }, null, -1)])]));
+		};
+	}
+});
+//#endregion
+export { upload_design_vue_vue_type_script_name_UploadDesign_setup_true_lang_default as default };