@mingto/mt-ui 1.1.42 → 1.1.45

package/dist/index.es.js

@@ -4704,6 +4704,9 @@ function useLocale() {
 //#region src/hooks/use-namespace/index.ts
 var defaultNamespace = "mt";
 var statePrefix$1 = "is-";
+function toKebabCase(key) {
+	return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
 function _bem$1(namespace, block, blockSuffix, element, modifier) {
 	let cls = `${namespace}-${block}`;
 	if (blockSuffix) cls += `-${blockSuffix}`;
@@ -4733,12 +4736,12 @@ function useNamespace(block, namespaceOverrides) {
 	};
 	const cssVar = (object) => {
 		const styles = {};
-		for (const key in object) if (object[key]) styles[`--${namespace.value}-${key}`] = object[key];
+		for (const key in object) if (object[key]) styles[`--${namespace.value}-${toKebabCase(key)}`] = object[key];
 		return styles;
 	};
 	const cssVarBlock = (object) => {
 		const styles = {};
-		for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${key}`] = object[key];
+		for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${toKebabCase(key)}`] = object[key];
 		return styles;
 	};
 	const cssVarName = (name) => `--${namespace.value}-${name}`;
@@ -8297,7 +8300,7 @@ var dialog_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MtTeleport), { to: props.appendTo }, {
 				default: withCtx(() => [createVNode(Transition, {
-					name: unref(ns).em("overlay", "fade"),
+					name: `${unref(ns).e("overlay")}-fade`,
 					onAfterLeave: handleAfterLeave
 				}, {
 					default: withCtx(() => [withDirectives(createVNode(unref(MtOverlay), {
@@ -19339,6 +19342,8 @@ var MtTabs = withInstall$1(/* @__PURE__ */ defineComponent({
 		const emits = __emit;
 		const ns = useNamespace("tabs");
 		const tabsRef = ref();
+		const barStyles = ref({});
+		const lineStyles = ref({});
 		const currentTabName = computed({
 			get() {
 				return props.modelValue;
@@ -19353,35 +19358,51 @@ var MtTabs = withInstall$1(/* @__PURE__ */ defineComponent({
 			onChange,
 			type: props.type
 		});
-		const barStyles = computed(() => {
-			const styles = {};
-			if (tabsRef.value) children.forEach((child, index) => {
-				const $el = tabsRef.value.querySelector(`#tab-${index}`);
-				if (!$el) return;
-				if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
-				styles.width = `${$el.clientWidth}px`;
-				styles.left = `${$el.offsetLeft}px`;
-			});
-			return styles;
-		});
-		const lineStyles = computed(() => {
+		function getActiveTabElement() {
+			if (!tabsRef.value) return null;
+			for (let index = 0; index < children.length; index++) {
+				const child = children[index];
+				if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) continue;
+				return tabsRef.value.querySelector(`#tab-${index}`);
+			}
+			return null;
+		}
+		async function updateActiveStyles() {
+			await nextTick();
+			const $el = getActiveTabElement();
+			if (!$el) {
+				barStyles.value = {};
+				lineStyles.value = {};
+				return;
+			}
+			barStyles.value = {
+				width: `${$el.clientWidth}px`,
+				left: `${$el.offsetLeft}px`
+			};
 			const styles = {};
-			if (tabsRef.value) children.forEach((child, index) => {
-				const $el = tabsRef.value.querySelector(`#tab-${index}`);
-				if (!$el) return;
-				if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
-				const tabStyles = window.getComputedStyle($el);
-				styles.width = `${$el.clientWidth - beParsedAsNumber(tabStyles.paddingLeft) - beParsedAsNumber(tabStyles.paddingRight)}px`;
-				styles.left = `${$el.offsetLeft + beParsedAsNumber(tabStyles.paddingLeft)}px`;
-			});
-			return styles;
-		});
+			const tabStyles = window.getComputedStyle($el);
+			styles.width = `${$el.clientWidth - beParsedAsNumber(tabStyles.paddingLeft) - beParsedAsNumber(tabStyles.paddingRight)}px`;
+			styles.left = `${$el.offsetLeft + beParsedAsNumber(tabStyles.paddingLeft)}px`;
+			lineStyles.value = styles;
+		}
 		const tabsClasses = computed(() => {
 			return [ns.b(), ns.m(props.type)];
 		});
 		function onChange(tabName) {
 			currentTabName.value = tabName;
 		}
+		watch(() => [
+			currentTabName.value,
+			children.length,
+			props.type
+		], updateActiveStyles, { flush: "post" });
+		onMounted(() => {
+			updateActiveStyles();
+			window.addEventListener("resize", updateActiveStyles);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", updateActiveStyles);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref_key: "tabsRef",
@@ -20816,10 +20837,88 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				copperPromiseDeferred?.resolve(newFile);
 			});
 		}
-		const isApplyingScale = ref(false);
-		async function applyImageScale(url) {
+		function fitSize(maxWidth, maxHeight, aspectRatio) {
+			let width = maxWidth;
+			let height = width / aspectRatio;
+			if (height > maxHeight) {
+				height = maxHeight;
+				width = height * aspectRatio;
+			}
+			return {
+				width: Math.max(Math.round(width), 1),
+				height: Math.max(Math.round(height), 1)
+			};
+		}
+		function getInitialCropSize(image) {
+			const cropper = cropperRef.value;
+			const containerWidth = cropper?.w || 0;
+			const containerHeight = cropper?.h || 0;
+			const maxWidth = containerWidth * .82;
+			const maxHeight = containerHeight * .82;
+			const cropWidth = Number(cropperProps.value.autoCropWidth || 0);
+			const cropHeight = Number(cropperProps.value.autoCropHeight || 0);
+			if (cropWidth > 0 && cropHeight > 0) return {
+				width: Math.min(cropWidth, containerWidth),
+				height: Math.min(cropHeight, containerHeight)
+			};
+			const fixedNumber = cropperProps.value.fixedNumber || [1, 1];
+			const aspectRatio = cropperProps.value.fixed ? fixedNumber[0] / fixedNumber[1] : image.width / image.height;
+			const fittedSize = fitSize(maxWidth, maxHeight, aspectRatio);
+			if (cropWidth > 0) return fitSize(Math.min(cropWidth, containerWidth), maxHeight, aspectRatio);
+			if (cropHeight > 0) return fitSize(maxWidth, Math.min(cropHeight, containerHeight), aspectRatio);
+			return fittedSize;
+		}
+		function centerCropBox(width, height) {
+			const cropper = cropperRef.value;
+			if (!cropper?.goAutoCrop) return;
+			const nextWidth = width || cropper.cropW;
+			const nextHeight = height || cropper.cropH;
+			if (!nextWidth || !nextHeight) return;
+			cropper.goAutoCrop(nextWidth, nextHeight);
+		}
+		function fitImageToCropBox() {
+			const cropper = cropperRef.value;
+			if (!cropper?.trueWidth || !cropper?.trueHeight || !cropper?.cropW || !cropper?.cropH) return;
+			const scale = Math.min(cropper.cropW / cropper.trueWidth, cropper.cropH / cropper.trueHeight);
+			const scaledWidth = cropper.trueWidth * scale;
+			const scaledHeight = cropper.trueHeight * scale;
+			cropper.scale = scale;
+			cropper.x = cropper.cropOffsertX + (cropper.cropW - scaledWidth) / 2 - (cropper.trueWidth - scaledWidth) / 2;
+			cropper.y = cropper.cropOffsertY + (cropper.cropH - scaledHeight) / 2 - (cropper.trueHeight - scaledHeight) / 2;
+			enlarge.value = 1 / scale;
+		}
+		function waitCropperReady() {
+			return new Promise((resolve) => {
+				let observer = null;
+				const cleanup = () => {
+					observer?.disconnect();
+					if (scaleIntervalId) {
+						clearInterval(scaleIntervalId);
+						scaleIntervalId = null;
+					}
+				};
+				const check = () => {
+					const cropper = cropperRef.value;
+					if (cropper?.w && cropper?.h && cropper?.trueWidth && cropper?.trueHeight) {
+						cleanup();
+						resolve();
+					}
+				};
+				observer = new MutationObserver(check);
+				const cropperElement = cropperRef.value?.$el;
+				if (cropperElement) observer.observe(cropperElement, {
+					childList: true,
+					subtree: true,
+					attributes: true
+				});
+				scaleIntervalId = setInterval(check, 50);
+				check();
+			});
+		}
+		const isApplyingInitialCrop = ref(false);
+		async function applyInitialCrop(url) {
 			try {
-				isApplyingScale.value = true;
+				isApplyingInitialCrop.value = true;
 				const image = new Image();
 				image.crossOrigin = "anonymous";
 				await new Promise((resolve, reject) => {
@@ -20827,54 +20926,18 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					image.onerror = () => reject(/* @__PURE__ */ new Error(`Failed to load image: ${url}`));
 					image.src = url;
 				});
-				await new Promise((resolve) => {
-					let observer = null;
-					const cleanup = () => {
-						observer?.disconnect();
-						if (scaleIntervalId) {
-							clearInterval(scaleIntervalId);
-							scaleIntervalId = null;
-						}
-					};
-					const checkCropper = () => {
-						if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
-							cleanup();
-							resolve();
-							return;
-						}
-						observer = new MutationObserver(() => {
-							if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
-								cleanup();
-								resolve();
-							}
-						});
-						if (cropperRef.value?.$el) observer.observe(cropperRef.value.$el, {
-							childList: true,
-							subtree: true,
-							attributes: true
-						});
-						scaleIntervalId = setInterval(() => {
-							if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
-								cleanup();
-								resolve();
-							}
-						}, 50);
-						checkCropper();
-					};
-					checkCropper();
-				});
+				await nextTick();
+				await waitCropperReady();
 				if (cropperRef.value) {
-					const imageNumber = [image.width, image.height];
-					const cropNumber = [cropperRef.value.cropW, cropperRef.value.cropH];
-					let scale = 1;
-					if (imageNumber[0] / imageNumber[1] >= cropNumber[0] / cropNumber[1]) scale = cropNumber[1] / imageNumber[1];
-					else scale = cropNumber[0] / imageNumber[0];
-					cropperRef.value.scale = scale;
+					const cropSize = getInitialCropSize(image);
+					centerCropBox(cropSize.width, cropSize.height);
+					await nextTick();
+					fitImageToCropBox();
 				}
 			} catch (error) {
-				console.error("应用图片缩放失败:", error);
+				console.error("应用初始裁剪框失败:", error);
 			} finally {
-				isApplyingScale.value = false;
+				isApplyingInitialCrop.value = false;
 			}
 		}
 		__expose({
@@ -20893,7 +20956,7 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				}
 				dialogVisible.value = true;
 				copperPromiseDeferred = new Deferred();
-				if (cropperProps.value.autoCropScale) applyImageScale(filePath.value);
+				if (cropperProps.value.autoCropScale) applyInitialCrop(filePath.value);
 				const newFile = await copperPromiseDeferred.promise;
 				copperPromiseDeferred = null;
 				URL.revokeObjectURL(filePath.value);
@@ -20919,7 +20982,7 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 			}, {
 				default: withCtx(() => [createVNode(unref(MtDialogConfirmLayout), {
 					loading: loading.value,
-					disabled: isApplyingScale.value,
+					disabled: isApplyingInitialCrop.value,
 					"confirm-text": unref(t)("mt.upload.confirm"),
 					"cancel-text": unref(t)("mt.upload.cancel"),
 					onCancel: handleCancel,
@@ -20928,7 +20991,7 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 					default: withCtx(() => [filePath.value ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: normalizeClass(unref(ns).e("content"))
-					}, [isApplyingScale.value ? (openBlock(), createElementBlock("div", {
+					}, [isApplyingInitialCrop.value ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: normalizeClass(unref(ns).e("loading"))
 					}, [createVNode(unref(MtLoading), { size: 80 })], 2)) : createCommentVNode("", true), createVNode(unref(M), mergeProps({
@@ -20965,7 +21028,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/upload/src/upload-image-copper.vue
-var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-01619ce0"]]);
+var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-47a8b76d"]]);
 //#endregion
 //#region src/upload/src/layout/upload-image-grid-layout.vue
 var upload_image_grid_layout_default = /* @__PURE__ */ defineComponent({

package/dist/index.umd.js

@@ -4733,6 +4733,9 @@
 	//#region src/hooks/use-namespace/index.ts
 	var defaultNamespace = "mt";
 	var statePrefix$1 = "is-";
+	function toKebabCase(key) {
+		return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+	}
 	function _bem$1(namespace, block, blockSuffix, element, modifier) {
 		let cls = `${namespace}-${block}`;
 		if (blockSuffix) cls += `-${blockSuffix}`;
@@ -4762,12 +4765,12 @@
 		};
 		const cssVar = (object) => {
 			const styles = {};
-			for (const key in object) if (object[key]) styles[`--${namespace.value}-${key}`] = object[key];
+			for (const key in object) if (object[key]) styles[`--${namespace.value}-${toKebabCase(key)}`] = object[key];
 			return styles;
 		};
 		const cssVarBlock = (object) => {
 			const styles = {};
-			for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${key}`] = object[key];
+			for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${toKebabCase(key)}`] = object[key];
 			return styles;
 		};
 		const cssVarName = (name) => `--${namespace.value}-${name}`;
@@ -8352,7 +8355,7 @@
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(MtTeleport), { to: props.appendTo }, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(vue.Transition, {
-						name: (0, vue.unref)(ns).em("overlay", "fade"),
+						name: `${(0, vue.unref)(ns).e("overlay")}-fade`,
 						onAfterLeave: handleAfterLeave
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(MtOverlay), {
@@ -19413,6 +19416,8 @@ triggerRef });
 			const emits = __emit;
 			const ns = useNamespace("tabs");
 			const tabsRef = (0, vue.ref)();
+			const barStyles = (0, vue.ref)({});
+			const lineStyles = (0, vue.ref)({});
 			const currentTabName = (0, vue.computed)({
 				get() {
 					return props.modelValue;
@@ -19427,35 +19432,51 @@ triggerRef });
 				onChange,
 				type: props.type
 			});
-			const barStyles = (0, vue.computed)(() => {
-				const styles = {};
-				if (tabsRef.value) children.forEach((child, index) => {
-					const $el = tabsRef.value.querySelector(`#tab-${index}`);
-					if (!$el) return;
-					if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
-					styles.width = `${$el.clientWidth}px`;
-					styles.left = `${$el.offsetLeft}px`;
-				});
-				return styles;
-			});
-			const lineStyles = (0, vue.computed)(() => {
+			function getActiveTabElement() {
+				if (!tabsRef.value) return null;
+				for (let index = 0; index < children.length; index++) {
+					const child = children[index];
+					if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) continue;
+					return tabsRef.value.querySelector(`#tab-${index}`);
+				}
+				return null;
+			}
+			async function updateActiveStyles() {
+				await (0, vue.nextTick)();
+				const $el = getActiveTabElement();
+				if (!$el) {
+					barStyles.value = {};
+					lineStyles.value = {};
+					return;
+				}
+				barStyles.value = {
+					width: `${$el.clientWidth}px`,
+					left: `${$el.offsetLeft}px`
+				};
 				const styles = {};
-				if (tabsRef.value) children.forEach((child, index) => {
-					const $el = tabsRef.value.querySelector(`#tab-${index}`);
-					if (!$el) return;
-					if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
-					const tabStyles = window.getComputedStyle($el);
-					styles.width = `${$el.clientWidth - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft) - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingRight)}px`;
-					styles.left = `${$el.offsetLeft + (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft)}px`;
-				});
-				return styles;
-			});
+				const tabStyles = window.getComputedStyle($el);
+				styles.width = `${$el.clientWidth - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft) - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingRight)}px`;
+				styles.left = `${$el.offsetLeft + (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft)}px`;
+				lineStyles.value = styles;
+			}
 			const tabsClasses = (0, vue.computed)(() => {
 				return [ns.b(), ns.m(props.type)];
 			});
 			function onChange(tabName) {
 				currentTabName.value = tabName;
 			}
+			(0, vue.watch)(() => [
+				currentTabName.value,
+				children.length,
+				props.type
+			], updateActiveStyles, { flush: "post" });
+			(0, vue.onMounted)(() => {
+				updateActiveStyles();
+				window.addEventListener("resize", updateActiveStyles);
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				window.removeEventListener("resize", updateActiveStyles);
+			});
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					ref_key: "tabsRef",
@@ -20894,10 +20915,88 @@ triggerRef });
 					copperPromiseDeferred?.resolve(newFile);
 				});
 			}
-			const isApplyingScale = (0, vue.ref)(false);
-			async function applyImageScale(url) {
+			function fitSize(maxWidth, maxHeight, aspectRatio) {
+				let width = maxWidth;
+				let height = width / aspectRatio;
+				if (height > maxHeight) {
+					height = maxHeight;
+					width = height * aspectRatio;
+				}
+				return {
+					width: Math.max(Math.round(width), 1),
+					height: Math.max(Math.round(height), 1)
+				};
+			}
+			function getInitialCropSize(image) {
+				const cropper = cropperRef.value;
+				const containerWidth = cropper?.w || 0;
+				const containerHeight = cropper?.h || 0;
+				const maxWidth = containerWidth * .82;
+				const maxHeight = containerHeight * .82;
+				const cropWidth = Number(cropperProps.value.autoCropWidth || 0);
+				const cropHeight = Number(cropperProps.value.autoCropHeight || 0);
+				if (cropWidth > 0 && cropHeight > 0) return {
+					width: Math.min(cropWidth, containerWidth),
+					height: Math.min(cropHeight, containerHeight)
+				};
+				const fixedNumber = cropperProps.value.fixedNumber || [1, 1];
+				const aspectRatio = cropperProps.value.fixed ? fixedNumber[0] / fixedNumber[1] : image.width / image.height;
+				const fittedSize = fitSize(maxWidth, maxHeight, aspectRatio);
+				if (cropWidth > 0) return fitSize(Math.min(cropWidth, containerWidth), maxHeight, aspectRatio);
+				if (cropHeight > 0) return fitSize(maxWidth, Math.min(cropHeight, containerHeight), aspectRatio);
+				return fittedSize;
+			}
+			function centerCropBox(width, height) {
+				const cropper = cropperRef.value;
+				if (!cropper?.goAutoCrop) return;
+				const nextWidth = width || cropper.cropW;
+				const nextHeight = height || cropper.cropH;
+				if (!nextWidth || !nextHeight) return;
+				cropper.goAutoCrop(nextWidth, nextHeight);
+			}
+			function fitImageToCropBox() {
+				const cropper = cropperRef.value;
+				if (!cropper?.trueWidth || !cropper?.trueHeight || !cropper?.cropW || !cropper?.cropH) return;
+				const scale = Math.min(cropper.cropW / cropper.trueWidth, cropper.cropH / cropper.trueHeight);
+				const scaledWidth = cropper.trueWidth * scale;
+				const scaledHeight = cropper.trueHeight * scale;
+				cropper.scale = scale;
+				cropper.x = cropper.cropOffsertX + (cropper.cropW - scaledWidth) / 2 - (cropper.trueWidth - scaledWidth) / 2;
+				cropper.y = cropper.cropOffsertY + (cropper.cropH - scaledHeight) / 2 - (cropper.trueHeight - scaledHeight) / 2;
+				enlarge.value = 1 / scale;
+			}
+			function waitCropperReady() {
+				return new Promise((resolve) => {
+					let observer = null;
+					const cleanup = () => {
+						observer?.disconnect();
+						if (scaleIntervalId) {
+							clearInterval(scaleIntervalId);
+							scaleIntervalId = null;
+						}
+					};
+					const check = () => {
+						const cropper = cropperRef.value;
+						if (cropper?.w && cropper?.h && cropper?.trueWidth && cropper?.trueHeight) {
+							cleanup();
+							resolve();
+						}
+					};
+					observer = new MutationObserver(check);
+					const cropperElement = cropperRef.value?.$el;
+					if (cropperElement) observer.observe(cropperElement, {
+						childList: true,
+						subtree: true,
+						attributes: true
+					});
+					scaleIntervalId = setInterval(check, 50);
+					check();
+				});
+			}
+			const isApplyingInitialCrop = (0, vue.ref)(false);
+			async function applyInitialCrop(url) {
 				try {
-					isApplyingScale.value = true;
+					isApplyingInitialCrop.value = true;
 					const image = new Image();
 					image.crossOrigin = "anonymous";
 					await new Promise((resolve, reject) => {
@@ -20905,54 +21004,18 @@ triggerRef });
 						image.onerror = () => reject(/* @__PURE__ */ new Error(`Failed to load image: ${url}`));
 						image.src = url;
 					});
-					await new Promise((resolve) => {
-						let observer = null;
-						const cleanup = () => {
-							observer?.disconnect();
-							if (scaleIntervalId) {
-								clearInterval(scaleIntervalId);
-								scaleIntervalId = null;
-							}
-						};
-						const checkCropper = () => {
-							if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
-								cleanup();
-								resolve();
-								return;
-							}
-							observer = new MutationObserver(() => {
-								if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
-									cleanup();
-									resolve();
-								}
-							});
-							if (cropperRef.value?.$el) observer.observe(cropperRef.value.$el, {
-								childList: true,
-								subtree: true,
-								attributes: true
-							});
-							scaleIntervalId = setInterval(() => {
-								if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
-									cleanup();
-									resolve();
-								}
-							}, 50);
-							checkCropper();
-						};
-						checkCropper();
-					});
+					await (0, vue.nextTick)();
+					await waitCropperReady();
 					if (cropperRef.value) {
-						const imageNumber = [image.width, image.height];
-						const cropNumber = [cropperRef.value.cropW, cropperRef.value.cropH];
-						let scale = 1;
-						if (imageNumber[0] / imageNumber[1] >= cropNumber[0] / cropNumber[1]) scale = cropNumber[1] / imageNumber[1];
-						else scale = cropNumber[0] / imageNumber[0];
-						cropperRef.value.scale = scale;
+						const cropSize = getInitialCropSize(image);
+						centerCropBox(cropSize.width, cropSize.height);
+						await (0, vue.nextTick)();
+						fitImageToCropBox();
 					}
 				} catch (error) {
-					console.error("应用图片缩放失败:", error);
+					console.error("应用初始裁剪框失败:", error);
 				} finally {
-					isApplyingScale.value = false;
+					isApplyingInitialCrop.value = false;
 				}
 			}
 			__expose({
@@ -20971,7 +21034,7 @@ triggerRef });
 					}
 					dialogVisible.value = true;
 					copperPromiseDeferred = new Deferred();
-					if (cropperProps.value.autoCropScale) applyImageScale(filePath.value);
+					if (cropperProps.value.autoCropScale) applyInitialCrop(filePath.value);
 					const newFile = await copperPromiseDeferred.promise;
 					copperPromiseDeferred = null;
 					URL.revokeObjectURL(filePath.value);
@@ -20997,7 +21060,7 @@ triggerRef });
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(MtDialogConfirmLayout), {
 						loading: loading.value,
-						disabled: isApplyingScale.value,
+						disabled: isApplyingInitialCrop.value,
 						"confirm-text": (0, vue.unref)(t)("mt.upload.confirm"),
 						"cancel-text": (0, vue.unref)(t)("mt.upload.cancel"),
 						onCancel: handleCancel,
@@ -21006,7 +21069,7 @@ triggerRef });
 						default: (0, vue.withCtx)(() => [filePath.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: 0,
 							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("content"))
-						}, [isApplyingScale.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						}, [isApplyingInitialCrop.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							key: 0,
 							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("loading"))
 						}, [(0, vue.createVNode)((0, vue.unref)(MtLoading), { size: 80 })], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(M), (0, vue.mergeProps)({
@@ -21043,7 +21106,7 @@ triggerRef });
 	};
 	//#endregion
 	//#region src/upload/src/upload-image-copper.vue
-	var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-01619ce0"]]);
+	var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-47a8b76d"]]);
 	//#endregion
 	//#region src/upload/src/layout/upload-image-grid-layout.vue
 	var upload_image_grid_layout_default = /* @__PURE__ */ (0, vue.defineComponent)({

package/dist/style.css

@@ -3468,6 +3468,7 @@
 }
 .mt-tab--card.is-active {
   color: var(--mt-color-blue-5d89f7);
+  background-color: var(--mt-color-white-ffffff);
 }
 .mt-tab--line {
   height: 40px;
@@ -3631,12 +3632,12 @@
 .mt-upload-file-list-layout--empty {
   margin-bottom: 0;
 }.vue-cropper[data-v-a742df44]{position:relative;width:100%;height:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;direction:ltr;touch-action:none;text-align:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-box[data-v-a742df44],.cropper-box-canvas[data-v-a742df44],.cropper-drag-box[data-v-a742df44],.cropper-crop-box[data-v-a742df44],.cropper-face[data-v-a742df44]{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none}.cropper-box-canvas img[data-v-a742df44]{position:relative;text-align:left;-webkit-user-select:none;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-a742df44]{overflow:hidden}.cropper-move[data-v-a742df44]{cursor:move}.cropper-crop[data-v-a742df44]{cursor:crosshair}.cropper-modal[data-v-a742df44]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-a742df44]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;-webkit-user-select:none;user-select:none}.cropper-view-box img[data-v-a742df44]{-webkit-user-select:none;user-select:none;text-align:left;max-width:none;max-height:none}.cropper-face[data-v-a742df44]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-a742df44]{position:absolute;left:0;min-width:65px;text-align:center;color:#fff;line-height:20px;background-color:#000c;font-size:12px}.crop-line[data-v-a742df44]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-a742df44]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-a742df44]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-a742df44]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-a742df44]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-a742df44]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-a742df44]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-a742df44]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-a742df44]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-a742df44]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-a742df44]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-a742df44]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-a742df44]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-a742df44]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width: 500px){.crop-point[data-v-a742df44]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-a742df44]{top:-10px;left:-10px}.point2[data-v-a742df44],.point4[data-v-a742df44],.point5[data-v-a742df44],.point7[data-v-a742df44]{display:none}.point3[data-v-a742df44]{top:-10px;right:-10px}.point4[data-v-a742df44]{top:0;left:0}.point6[data-v-a742df44]{bottom:-10px;left:-10px}.point8[data-v-a742df44]{bottom:-10px;right:-10px}}
-.mt-image-copper__content[data-v-01619ce0] {
+.mt-image-copper__content[data-v-47a8b76d] {
   position: relative;
   width: 80vh;
   height: 80vh;
 }
-.mt-image-copper__loading[data-v-01619ce0] {
+.mt-image-copper__loading[data-v-47a8b76d] {
   position: absolute;
   top: 0;
   left: 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mingto/mt-ui",
   "type": "module",
-  "version": "1.1.42",
+  "version": "1.1.45",
   "description": "UI组件库",
   "publishConfig": {
     "access": "public"