@sdata/web-vue 3.19.0 → 3.21.0

package/es/sender/use-speech.js

@@ -1,113 +1,331 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
 import { useI18n } from "../locale/index.js";
 import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/asyncToGenerator.js";
-import { computed, shallowRef, toValue, watch } from "vue";
-import { usePermission, useSpeechRecognition, useUserMedia } from "@vueuse/core";
+import { computed, onBeforeUnmount, onMounted, shallowRef, toValue, watch } from "vue";
 //#region components/sender/use-speech.ts
+var DEFAULT_PROCESSOR_NAME = "sd-sender-audio-processor";
+var DEFAULT_BUFFER_SIZE = 4096;
+var resolveBufferSize = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(128, Math.floor(value)) : DEFAULT_BUFFER_SIZE;
+var WORKLET_SOURCE = `
+class SdSenderAudioProcessor extends AudioWorkletProcessor {
+  constructor(options) {
+    super();
+    this.bufferSize = Math.max(128, options.processorOptions?.bufferSize || ${DEFAULT_BUFFER_SIZE});
+    this.buffer = new Float32Array(this.bufferSize);
+    this.offset = 0;
+    this.port.onmessage = (event) => {
+      if (event.data?.type !== 'flush') return;
+      if (this.offset > 0) {
+        const chunk = this.buffer.slice(0, this.offset);
+        this.port.postMessage(chunk.buffer, [chunk.buffer]);
+        this.offset = 0;
+      }
+      this.port.postMessage({ type: 'flushed' });
+    };
+  }
+
+  process(inputs) {
+    const channels = inputs[0];
+    if (!channels?.length) return true;
+    const frames = channels[0].length;
+    for (let frame = 0; frame < frames; frame += 1) {
+      let sample = 0;
+      for (let channel = 0; channel < channels.length; channel += 1) {
+        sample += channels[channel][frame] || 0;
+      }
+      this.buffer[this.offset] = sample / channels.length;
+      this.offset += 1;
+      if (this.offset === this.bufferSize) {
+        const chunk = this.buffer;
+        this.port.postMessage(chunk.buffer, [chunk.buffer]);
+        this.buffer = new Float32Array(this.bufferSize);
+        this.offset = 0;
+      }
+    }
+    return true;
+  }
+}
+registerProcessor('${DEFAULT_PROCESSOR_NAME}', SdSenderAudioProcessor);
+`;
 var isPermissionDeniedError = (error) => error instanceof DOMException ? error.name === "NotAllowedError" || error.name === "SecurityError" : error instanceof Error && (error.name === "NotAllowedError" || error.name === "SecurityError");
-function useSpeech(allowSpeech, onTranscript) {
+function useSpeech(allowSpeech, options) {
 	const { t } = useI18n();
 	const config = computed(() => toValue(allowSpeech));
-	const controlled = computed(() => typeof config.value === "object" && typeof config.value.recording === "boolean");
-	const forceBreak = shallowRef(false);
+	const controlled = computed(() => typeof config.value === "object" && typeof config.value.recording === "boolean" && typeof config.value.onRecordingChange === "function");
+	const supported = shallowRef(false);
+	const internalRecording = shallowRef(false);
 	const requesting = shallowRef(false);
-	const microphoneAuthorized = shallowRef(false);
-	const permissionRequestError = shallowRef();
-	const permissionDeniedByRequest = shallowRef(false);
-	const permission = usePermission("microphone");
-	const { isSupported: isUserMediaSupported, start: requestMicrophone, stop: stopMicrophone } = useUserMedia({ constraints: {
-		audio: true,
-		video: false
-	} });
-	const { isSupported: isSpeechSupported, isListening, isFinal, result, error: recognitionError, start: startRecognition, stop: stopRecognition } = useSpeechRecognition({
-		continuous: false,
-		interimResults: false,
-		lang: () => typeof navigator === "undefined" ? "zh-CN" : navigator.language || "zh-CN"
-	});
-	const permissionDenied = computed(() => permission.value === "denied" || permissionDeniedByRequest.value);
-	const recording = computed(() => controlled.value && typeof config.value === "object" ? Boolean(config.value.recording) : isListening.value);
-	const available = computed(() => Boolean(config.value) && (controlled.value || Boolean(isSpeechSupported.value && !permissionDenied.value)));
+	const captureError = shallowRef();
+	const stream = shallowRef();
+	const audioContext = shallowRef();
+	const sourceNode = shallowRef();
+	const workletNode = shallowRef();
+	const socket = shallowRef();
+	const startedAt = shallowRef(0);
+	const chunks = shallowRef(0);
+	const sequence = shallowRef(0);
+	let generatedWorkletUrl;
+	let resolveWorkletFlush;
+	let disposed = false;
+	const recording = computed(() => controlled.value && typeof config.value === "object" ? Boolean(config.value.recording) : internalRecording.value);
+	const available = computed(() => Boolean(config.value) && (controlled.value || supported.value) && !(captureError.value && isPermissionDeniedError(captureError.value.error)));
 	const statusText = computed(() => {
-		var _permissionRequestErr;
+		var _captureError$value;
 		if (requesting.value) return t("sender.speech.requestingPermission");
-		if (permissionDenied.value) return t("sender.speech.permissionDenied");
-		if (!controlled.value && !isSpeechSupported.value) return t("sender.speech.unsupported");
+		if (captureError.value && isPermissionDeniedError(captureError.value.error)) return t("sender.speech.permissionDenied");
+		if (!controlled.value && !supported.value) return t("sender.speech.unsupported");
 		if (recording.value) return t("sender.speech.stop");
-		if (((_permissionRequestErr = permissionRequestError.value) === null || _permissionRequestErr === void 0 ? void 0 : _permissionRequestErr.name) === "NotFoundError") return t("sender.speech.noMicrophone");
-		if (permissionRequestError.value) return t("sender.speech.microphoneUnavailable");
-		const recognitionErrorCode = recognitionError.value && "error" in recognitionError.value ? recognitionError.value.error : void 0;
-		if (recognitionErrorCode === "audio-capture") return t("sender.speech.noMicrophone");
-		if (recognitionErrorCode === "no-speech") return t("sender.speech.noSpeech");
-		if (recognitionError.value) return t("sender.speech.recognitionFailed");
+		if (((_captureError$value = captureError.value) === null || _captureError$value === void 0 ? void 0 : _captureError$value.error.name) === "NotFoundError") return t("sender.speech.noMicrophone");
+		if (captureError.value) return t("sender.speech.microphoneUnavailable");
 		return t("sender.speech.start");
 	});
-	const ensureMicrophonePermission = function() {
+	const resolveAudioContext = () => {
+		var _window$AudioContext;
+		const AudioContextConstructor = (_window$AudioContext = window.AudioContext) !== null && _window$AudioContext !== void 0 ? _window$AudioContext : window.webkitAudioContext;
+		if (!AudioContextConstructor) throw new Error("AudioContext is not supported");
+		return new AudioContextConstructor();
+	};
+	const resolveWorkletUrl = () => {
+		var _generatedWorkletUrl;
+		if (typeof config.value === "object" && config.value.workletUrl) return config.value.workletUrl;
+		(_generatedWorkletUrl = generatedWorkletUrl) !== null && _generatedWorkletUrl !== void 0 || (generatedWorkletUrl = URL.createObjectURL(new Blob([WORKLET_SOURCE], { type: "text/javascript" })));
+		return generatedWorkletUrl;
+	};
+	const connectTransport = (url, protocols) => new Promise((resolve, reject) => {
+		const nextSocket = protocols ? new WebSocket(url, protocols) : new WebSocket(url);
+		let opened = false;
+		socket.value = nextSocket;
+		nextSocket.binaryType = "arraybuffer";
+		nextSocket.onopen = (event) => {
+			opened = true;
+			options.onTransportOpen({
+				event,
+				socket: nextSocket
+			});
+			resolve(nextSocket);
+		};
+		nextSocket.onmessage = (event) => options.onTransportMessage({
+			event,
+			socket: nextSocket
+		});
+		nextSocket.onclose = (event) => options.onTransportClose({
+			event,
+			socket: nextSocket
+		});
+		nextSocket.onerror = () => {
+			const errorEvent = {
+				error: /* @__PURE__ */ new Error(`Unable to connect to speech URL: ${url}`),
+				phase: "transport"
+			};
+			if (opened) options.onError(errorEvent);
+			else reject(errorEvent.error);
+		};
+	});
+	const flushWorklet = () => new Promise((resolve) => {
+		var _workletNode$value;
+		const port = (_workletNode$value = workletNode.value) === null || _workletNode$value === void 0 ? void 0 : _workletNode$value.port;
+		if (!port) {
+			resolve();
+			return;
+		}
+		const timeout = window.setTimeout(resolve, 100);
+		resolveWorkletFlush = () => {
+			window.clearTimeout(timeout);
+			resolveWorkletFlush = void 0;
+			resolve();
+		};
+		port.postMessage({ type: "flush" });
+	});
+	const releaseResources = function() {
 		var _ref = _asyncToGenerator(function* () {
-			if (microphoneAuthorized.value || permission.value === "granted" || !isUserMediaSupported.value) return true;
+			var _workletNode$value2, _sourceNode$value, _stream$value, _audioContext$value, _audioContext$value2;
+			(_workletNode$value2 = workletNode.value) === null || _workletNode$value2 === void 0 || _workletNode$value2.disconnect();
+			(_sourceNode$value = sourceNode.value) === null || _sourceNode$value === void 0 || _sourceNode$value.disconnect();
+			(_stream$value = stream.value) === null || _stream$value === void 0 || _stream$value.getTracks().forEach((track) => track.stop());
+			if (((_audioContext$value = audioContext.value) === null || _audioContext$value === void 0 ? void 0 : _audioContext$value.state) !== "closed") yield (_audioContext$value2 = audioContext.value) === null || _audioContext$value2 === void 0 ? void 0 : _audioContext$value2.close();
+			if (socket.value && (socket.value.readyState === WebSocket.OPEN || socket.value.readyState === WebSocket.CONNECTING)) socket.value.close(1e3, "speech-ended");
+			workletNode.value = void 0;
+			sourceNode.value = void 0;
+			stream.value = void 0;
+			audioContext.value = void 0;
+			socket.value = void 0;
+		});
+		return function releaseResources() {
+			return _ref.apply(this, arguments);
+		};
+	}();
+	const stopCapture = function() {
+		var _ref2 = _asyncToGenerator(function* (reason = "manual") {
+			var _socket$value, _config$value$onRecor, _config$value;
+			if (!internalRecording.value) return;
+			yield flushWorklet();
+			const endedAt = performance.now();
+			internalRecording.value = false;
+			if (((_socket$value = socket.value) === null || _socket$value === void 0 ? void 0 : _socket$value.readyState) === WebSocket.OPEN && typeof config.value === "object" && config.value.sendMetadata !== false) socket.value.send(JSON.stringify({
+				type: "end",
+				reason
+			}));
+			yield releaseResources();
+			if (typeof config.value === "object") (_config$value$onRecor = (_config$value = config.value).onRecordingChange) === null || _config$value$onRecor === void 0 || _config$value$onRecor.call(_config$value, false);
+			options.onEnd({
+				source: "capture",
+				reason,
+				startedAt: startedAt.value,
+				endedAt,
+				duration: endedAt - startedAt.value,
+				chunks: chunks.value
+			});
+		});
+		return function stopCapture() {
+			return _ref2.apply(this, arguments);
+		};
+	}();
+	const startCapture = function() {
+		var _ref3 = _asyncToGenerator(function* () {
+			if (requesting.value || internalRecording.value || !available.value) return;
 			requesting.value = true;
-			permissionRequestError.value = void 0;
+			captureError.value = void 0;
+			let phase = "permission";
 			try {
-				yield requestMicrophone();
-				microphoneAuthorized.value = true;
-				permissionDeniedByRequest.value = false;
-				return true;
+				var _speechConfig$audioCo, _speechConfig$process, _socket$value3, _speechConfig$onRecor;
+				const speechConfig = typeof config.value === "object" ? config.value : void 0;
+				const bufferSize = resolveBufferSize(speechConfig === null || speechConfig === void 0 ? void 0 : speechConfig.bufferSize);
+				stream.value = yield navigator.mediaDevices.getUserMedia({
+					audio: (_speechConfig$audioCo = speechConfig === null || speechConfig === void 0 ? void 0 : speechConfig.audioConstraints) !== null && _speechConfig$audioCo !== void 0 ? _speechConfig$audioCo : true,
+					video: false
+				});
+				if (disposed) {
+					yield releaseResources();
+					return;
+				}
+				if (speechConfig === null || speechConfig === void 0 ? void 0 : speechConfig.url) {
+					phase = "transport";
+					yield connectTransport(speechConfig.url, speechConfig.protocols);
+					if (disposed) {
+						yield releaseResources();
+						return;
+					}
+				}
+				phase = "audioContext";
+				const nextAudioContext = resolveAudioContext();
+				audioContext.value = nextAudioContext;
+				phase = "audioWorklet";
+				yield nextAudioContext.audioWorklet.addModule(resolveWorkletUrl());
+				if (disposed) {
+					yield releaseResources();
+					return;
+				}
+				const processorName = (_speechConfig$process = speechConfig === null || speechConfig === void 0 ? void 0 : speechConfig.processorName) !== null && _speechConfig$process !== void 0 ? _speechConfig$process : DEFAULT_PROCESSOR_NAME;
+				const nextWorkletNode = new AudioWorkletNode(nextAudioContext, processorName, {
+					numberOfInputs: 1,
+					numberOfOutputs: 0,
+					channelCount: 1,
+					processorOptions: _objectSpread2(_objectSpread2({}, speechConfig === null || speechConfig === void 0 ? void 0 : speechConfig.processorOptions), {}, { bufferSize })
+				});
+				workletNode.value = nextWorkletNode;
+				sourceNode.value = nextAudioContext.createMediaStreamSource(stream.value);
+				nextWorkletNode.port.onmessage = (event) => {
+					var _socket$value2;
+					if (!(event.data instanceof ArrayBuffer) && "type" in event.data) {
+						if (event.data.type === "flushed") resolveWorkletFlush === null || resolveWorkletFlush === void 0 || resolveWorkletFlush();
+						return;
+					}
+					if (!internalRecording.value) return;
+					const buffer = event.data;
+					const dataEvent = {
+						buffer,
+						sampleRate: nextAudioContext.sampleRate,
+						sequence: sequence.value,
+						timestamp: performance.now()
+					};
+					sequence.value += 1;
+					chunks.value += 1;
+					options.onData(dataEvent);
+					if (((_socket$value2 = socket.value) === null || _socket$value2 === void 0 ? void 0 : _socket$value2.readyState) === WebSocket.OPEN) socket.value.send(buffer);
+				};
+				sourceNode.value.connect(nextWorkletNode);
+				startedAt.value = performance.now();
+				chunks.value = 0;
+				sequence.value = 0;
+				internalRecording.value = true;
+				if (((_socket$value3 = socket.value) === null || _socket$value3 === void 0 ? void 0 : _socket$value3.readyState) === WebSocket.OPEN && (speechConfig === null || speechConfig === void 0 ? void 0 : speechConfig.sendMetadata) !== false) socket.value.send(JSON.stringify({
+					type: "start",
+					format: "pcm-f32",
+					channels: 1,
+					sampleRate: nextAudioContext.sampleRate,
+					bufferSize
+				}));
+				speechConfig === null || speechConfig === void 0 || (_speechConfig$onRecor = speechConfig.onRecordingChange) === null || _speechConfig$onRecor === void 0 || _speechConfig$onRecor.call(speechConfig, true);
+				options.onStart({
+					source: "capture",
+					startedAt: startedAt.value,
+					stream: stream.value,
+					audioContext: nextAudioContext,
+					sampleRate: nextAudioContext.sampleRate
+				});
 			} catch (error) {
-				const normalizedError = error instanceof Error ? error : new Error(String(error));
-				permissionRequestError.value = normalizedError;
-				permissionDeniedByRequest.value = isPermissionDeniedError(error);
-				return false;
+				const errorEvent = {
+					error: error instanceof Error ? error : new Error(String(error)),
+					phase
+				};
+				captureError.value = errorEvent;
+				options.onError(errorEvent);
+				yield releaseResources();
 			} finally {
-				stopMicrophone();
 				requesting.value = false;
 			}
 		});
-		return function ensureMicrophonePermission() {
-			return _ref.apply(this, arguments);
+		return function startCapture() {
+			return _ref3.apply(this, arguments);
 		};
 	}();
 	const trigger = function() {
-		var _ref2 = _asyncToGenerator(function* (breakRecording = false) {
+		var _ref4 = _asyncToGenerator(function* (breakRecording = false) {
 			if (breakRecording && !recording.value) return;
-			forceBreak.value = breakRecording;
 			if (controlled.value && typeof config.value === "object") {
-				config.value.onRecordingChange(!recording.value);
-				return;
-			}
-			if (recording.value) {
-				stopRecognition();
-				if (typeof config.value === "object") config.value.onRecordingChange(false);
+				var _config$value$onRecor2, _config$value2;
+				const nextRecording = !recording.value;
+				(_config$value$onRecor2 = (_config$value2 = config.value).onRecordingChange) === null || _config$value$onRecor2 === void 0 || _config$value$onRecor2.call(_config$value2, nextRecording);
+				const now = performance.now();
+				if (nextRecording) {
+					startedAt.value = now;
+					options.onStart({
+						source: "controlled",
+						startedAt: now
+					});
+				} else options.onEnd({
+					source: "controlled",
+					reason: "controlled",
+					startedAt: startedAt.value,
+					endedAt: now,
+					duration: now - startedAt.value,
+					chunks: 0
+				});
 				return;
 			}
-			if (requesting.value || !available.value) return;
-			if (!(yield ensureMicrophonePermission())) return;
-			result.value = "";
-			recognitionError.value = void 0;
-			startRecognition();
-			if (typeof config.value === "object") config.value.onRecordingChange(true);
+			if (internalRecording.value) yield stopCapture();
+			else yield startCapture();
 		});
 		return function trigger() {
-			return _ref2.apply(this, arguments);
+			return _ref4.apply(this, arguments);
 		};
 	}();
-	watch(result, (transcript) => {
-		if (!transcript || !isFinal.value) return;
-		if (!forceBreak.value) onTranscript(transcript);
-		forceBreak.value = false;
-	});
-	watch(recognitionError, (nextError) => {
-		if (nextError && "error" in nextError && (nextError.error === "not-allowed" || nextError.error === "service-not-allowed")) permissionDeniedByRequest.value = true;
+	onMounted(() => {
+		var _navigator$mediaDevic;
+		supported.value = Boolean(typeof ((_navigator$mediaDevic = navigator.mediaDevices) === null || _navigator$mediaDevic === void 0 ? void 0 : _navigator$mediaDevic.getUserMedia) === "function" && typeof AudioContext !== "undefined" && typeof AudioWorkletNode !== "undefined");
 	});
-	watch(permission, (nextPermission) => {
-		if (nextPermission === "granted") {
-			microphoneAuthorized.value = true;
-			permissionDeniedByRequest.value = false;
-		} else if (nextPermission === "denied") {
-			microphoneAuthorized.value = false;
-			if (isListening.value) stopRecognition();
-		}
+	watch(() => Boolean(config.value), (enabled) => {
+		if (!enabled) stopCapture();
 	});
 	watch(controlled, (nextControlled) => {
-		if (nextControlled && isListening.value) stopRecognition();
+		if (nextControlled) stopCapture();
 	});
+	onBeforeUnmount(_asyncToGenerator(function* () {
+		disposed = true;
+		if (internalRecording.value) yield stopCapture("unmount");
+		else yield releaseResources();
+		if (generatedWorkletUrl) URL.revokeObjectURL(generatedWorkletUrl);
+	}));
 	return {
 		available,
 		recording,

package/es/spin/index.d.ts

@@ -7,6 +7,10 @@ declare const Spin: {
             type: NumberConstructor;
         };
         loading: BooleanConstructor;
+        delay: {
+            type: (BooleanConstructor | NumberConstructor)[];
+            default: boolean;
+        };
         dot: BooleanConstructor;
         tip: StringConstructor;
         hideIcon: {
@@ -16,6 +20,7 @@ declare const Spin: {
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         dot: boolean;
         loading: boolean;
+        delay: number | boolean;
         hideIcon: boolean;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -29,6 +34,10 @@ declare const Spin: {
             type: NumberConstructor;
         };
         loading: BooleanConstructor;
+        delay: {
+            type: (BooleanConstructor | NumberConstructor)[];
+            default: boolean;
+        };
         dot: BooleanConstructor;
         tip: StringConstructor;
         hideIcon: {
@@ -38,6 +47,7 @@ declare const Spin: {
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         dot: boolean;
         loading: boolean;
+        delay: number | boolean;
         hideIcon: boolean;
     }>;
     __isFragment?: never;
@@ -48,6 +58,10 @@ declare const Spin: {
         type: NumberConstructor;
     };
     loading: BooleanConstructor;
+    delay: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
     dot: BooleanConstructor;
     tip: StringConstructor;
     hideIcon: {
@@ -57,6 +71,7 @@ declare const Spin: {
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     dot: boolean;
     loading: boolean;
+    delay: number | boolean;
     hideIcon: boolean;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;

package/es/spin/spin.d.ts

@@ -3,6 +3,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
     };
     loading: BooleanConstructor;
+    delay: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
     dot: BooleanConstructor;
     tip: StringConstructor;
     hideIcon: {
@@ -14,6 +18,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
     };
     loading: BooleanConstructor;
+    delay: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
     dot: BooleanConstructor;
     tip: StringConstructor;
     hideIcon: {
@@ -23,6 +31,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     dot: boolean;
     loading: boolean;
+    delay: number | boolean;
     hideIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/spin/spin.js

@@ -2,8 +2,10 @@ import { configProviderInjectionKey } from "../config-provider/context.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { getFirstComponent } from "../_utils/vue-utils.js";
 import IconLoading from "../icon/icon-loading/index.js";
+import { useConfigProviderProp } from "../_hooks/use-config-provider-prop.js";
 import dot_loading_default from "./dot-loading.js";
-import { Fragment, cloneVNode, computed, createVNode, defineComponent, inject } from "vue";
+import { Fragment, cloneVNode, computed, createVNode, defineComponent, inject, shallowRef, toRef } from "vue";
+import { watchDebounced } from "@vueuse/core";
 //#region components/spin/spin.tsx
 var spin_default = /* @__PURE__ */ defineComponent({
 	name: "Spin",
@@ -19,6 +21,14 @@ var spin_default = /* @__PURE__ */ defineComponent({
 		*/
 		loading: Boolean,
 		/**
+		* @zh 加载指示器显示前的延迟时间。设置为 `true` 时延迟 400ms
+		* @en Delay before showing the loading indicator. Uses 400ms when set to `true`
+		*/
+		delay: {
+			type: [Boolean, Number],
+			default: false
+		},
+		/**
 		* @zh 是否使用点类型的动画
 		* @en Whether to use dot type animation
 		*/
@@ -55,9 +65,61 @@ var spin_default = /* @__PURE__ */ defineComponent({
 	setup(props, { slots }) {
 		const prefixCls = getPrefixCls("spin");
 		const configCtx = inject(configProviderInjectionKey, void 0);
+		const { mergedValue: mergedLoading } = useConfigProviderProp(toRef(props, "loading"), {
+			propNames: ["loading"],
+			getGlobalValue: (ctx) => {
+				var _ctx$spinProps;
+				return ctx === null || ctx === void 0 || (_ctx$spinProps = ctx.spinProps) === null || _ctx$spinProps === void 0 ? void 0 : _ctx$spinProps.loading;
+			}
+		});
+		const { mergedValue: mergedDelay } = useConfigProviderProp(toRef(props, "delay"), {
+			propNames: ["delay"],
+			getGlobalValue: (ctx) => {
+				var _ctx$spinProps2;
+				return ctx === null || ctx === void 0 || (_ctx$spinProps2 = ctx.spinProps) === null || _ctx$spinProps2 === void 0 ? void 0 : _ctx$spinProps2.delay;
+			}
+		});
+		const { mergedValue: mergedSize } = useConfigProviderProp(toRef(props, "size"), {
+			propNames: ["size"],
+			getGlobalValue: (ctx) => {
+				var _ctx$spinProps3;
+				return ctx === null || ctx === void 0 || (_ctx$spinProps3 = ctx.spinProps) === null || _ctx$spinProps3 === void 0 ? void 0 : _ctx$spinProps3.size;
+			}
+		});
+		const { mergedValue: mergedDot } = useConfigProviderProp(toRef(props, "dot"), {
+			propNames: ["dot"],
+			getGlobalValue: (ctx) => {
+				var _ctx$spinProps4;
+				return ctx === null || ctx === void 0 || (_ctx$spinProps4 = ctx.spinProps) === null || _ctx$spinProps4 === void 0 ? void 0 : _ctx$spinProps4.dot;
+			}
+		});
+		const { mergedValue: mergedTip } = useConfigProviderProp(toRef(props, "tip"), {
+			propNames: ["tip"],
+			getGlobalValue: (ctx) => {
+				var _ctx$spinProps5;
+				return ctx === null || ctx === void 0 || (_ctx$spinProps5 = ctx.spinProps) === null || _ctx$spinProps5 === void 0 ? void 0 : _ctx$spinProps5.tip;
+			}
+		});
+		const { mergedValue: mergedHideIcon } = useConfigProviderProp(toRef(props, "hideIcon"), {
+			propNames: ["hideIcon", "hide-icon"],
+			getGlobalValue: (ctx) => {
+				var _ctx$spinProps6;
+				return ctx === null || ctx === void 0 || (_ctx$spinProps6 = ctx.spinProps) === null || _ctx$spinProps6 === void 0 ? void 0 : _ctx$spinProps6.hideIcon;
+			}
+		});
+		const delayTime = computed(() => mergedDelay.value === true ? 400 : Math.max(0, Number(mergedDelay.value) || 0));
+		const requestedLoading = computed(() => slots.default ? Boolean(mergedLoading.value) : true);
+		const delayedLoading = shallowRef(false);
+		watchDebounced(requestedLoading, (loading) => {
+			delayedLoading.value = loading;
+		}, {
+			debounce: delayTime,
+			immediate: true
+		});
+		const activeLoading = computed(() => delayTime.value > 0 ? Boolean(requestedLoading.value && delayedLoading.value) : requestedLoading.value);
 		const cls = computed(() => [prefixCls, {
-			[`${prefixCls}-loading`]: props.loading,
-			[`${prefixCls}-with-tip`]: props.tip && !slots.default
+			[`${prefixCls}-loading`]: slots.default ? activeLoading.value : Boolean(mergedLoading.value),
+			[`${prefixCls}-with-tip`]: mergedTip.value && !slots.default
 		}]);
 		const renderIcon = () => {
 			if (slots.icon) {
@@ -65,28 +127,28 @@ var spin_default = /* @__PURE__ */ defineComponent({
 				if (iconVNode) return cloneVNode(iconVNode, { spin: true });
 			}
 			if (slots.element) return slots.element();
-			if (props.dot) return createVNode(dot_loading_default, { "size": props.size }, null);
+			if (mergedDot.value) return createVNode(dot_loading_default, { "size": mergedSize.value }, null);
 			if (configCtx === null || configCtx === void 0 ? void 0 : configCtx.slots.loading) return configCtx.slots.loading();
 			return createVNode(IconLoading, {
 				"spin": true,
-				"size": props.size
+				"size": mergedSize.value
 			}, null);
 		};
 		const renderSpinIcon = () => {
 			var _slots$tip, _slots$tip2, _slots$tip3;
-			const style = props.size ? { fontSize: `${props.size}px` } : void 0;
-			const hasTip = Boolean((_slots$tip = slots.tip) !== null && _slots$tip !== void 0 ? _slots$tip : props.tip);
-			return createVNode(Fragment, null, [!props.hideIcon && createVNode("div", {
+			const style = mergedSize.value ? { fontSize: `${mergedSize.value}px` } : void 0;
+			const hasTip = Boolean((_slots$tip = slots.tip) !== null && _slots$tip !== void 0 ? _slots$tip : mergedTip.value);
+			return createVNode(Fragment, null, [!mergedHideIcon.value && createVNode("div", {
 				"class": `${prefixCls}-icon`,
 				"style": style,
 				"aria-hidden": "true"
-			}, [renderIcon()]), hasTip && createVNode("div", { "class": `${prefixCls}-tip` }, [(_slots$tip2 = (_slots$tip3 = slots.tip) === null || _slots$tip3 === void 0 ? void 0 : _slots$tip3.call(slots)) !== null && _slots$tip2 !== void 0 ? _slots$tip2 : props.tip])]);
+			}, [renderIcon()]), hasTip && createVNode("div", { "class": `${prefixCls}-tip` }, [(_slots$tip2 = (_slots$tip3 = slots.tip) === null || _slots$tip3 === void 0 ? void 0 : _slots$tip3.call(slots)) !== null && _slots$tip2 !== void 0 ? _slots$tip2 : mergedTip.value])]);
 		};
 		return () => createVNode("div", {
 			"role": "status",
 			"aria-live": "polite",
 			"class": cls.value
-		}, [slots.default ? createVNode(Fragment, null, [slots.default(), props.loading && createVNode("div", { "class": `${prefixCls}-mask` }, [createVNode("div", { "class": `${prefixCls}-mask-icon` }, [renderSpinIcon()])])]) : renderSpinIcon()]);
+		}, [slots.default ? createVNode(Fragment, null, [slots.default(), activeLoading.value && createVNode("div", { "class": `${prefixCls}-mask` }, [createVNode("div", { "class": `${prefixCls}-mask-icon` }, [renderSpinIcon()])])]) : activeLoading.value ? renderSpinIcon() : null]);
 	}
 });
 //#endregion