UNIVPLMDataIntegration/Web/src/utils/flowLoading.ts

// utils/flowLoading.ts
/**
 * @author easycreatecode.com
 * @created 2025-03-05
 * @updated 2025-03-08
 * @version 1.2.0
 * @description 基于Element Plus的流程加载控制器，支持链式操作和动态文本更新，如果使用请保留作者信息
 */
import { ElLoading } from 'element-plus';
import type { Component, Ref } from 'vue';
import { isRef, unref } from 'vue';
import type { LoadingOptions } from 'element-plus/es/components/loading/src/types';

// 1. 明确控制器类型接口
interface LoadingController {
	step: (text: string | Ref<string>) => LoadingController;
	end: () => void;
}

type CustomLoadingOptions = Omit<LoadingOptions, 'text'> & {
	text?: string | Ref<string>;
	spinner?: string | Component;
};

const DEFAULT_CONFIG: CustomLoadingOptions = {
	lock: true,
	text: '',
	//background: 'rgba(0, 199, 255, 0.3)',
	background: 'rgba(94, 158, 214, 0.12)', // 景德镇青花色
	//spinner: 'circle-check'
	//spinner: 'el-icon-potato',
	spinner: 'el-icon-loading',
};

class FlowLoadingManager {
	private instance: ReturnType<typeof ElLoading.service> | null = null;

	// 2. 统一返回类型
	start(options?: string | Ref<string> | CustomLoadingOptions): LoadingController {
		try {
			if (this.instance) {
				console.warn('Existing loading instance detected');
				return this.createController();
			}

			const resolved = this.normalizeOptions(options);
			this.validateConfig(resolved);

			this.instance = ElLoading.service(resolved as LoadingOptions);
			return this.createController();
		} catch (e) {
			console.error('Loading initialization failed:', e);
			return this.createController(true); // 传入错误标记
		}
	}

	private normalizeOptions(options?: string | Ref<string> | CustomLoadingOptions): CustomLoadingOptions {
		const baseConfig = { ...DEFAULT_CONFIG };

		if (!options) return baseConfig;

		if (typeof options === 'string' || isRef(options)) {
			return {
				...baseConfig,
				text: unref(options),
			};
		}

		return {
			...baseConfig,
			...options,
			text: options.text ? unref(options.text) : baseConfig.text,
		};
	}

	private validateConfig(config: CustomLoadingOptions) {
		if (config.spinner && typeof config.spinner !== 'string') {
			console.warn('Custom spinner components require proper registration');
		}

		if (typeof config.text !== 'string') {
			throw new Error('Loading text must be a string');
		}
	}

	// 3. 增强控制器创建方法
	private createController(isError = false): LoadingController {
		return {
			step: (text: string | Ref<string>) => {
				if (!isError && this.instance) {
					this.instance.setText(unref(text));
				}
				return this.createController(isError); // 保持链式调用
			},
			end: () => {
				if (!isError) {
					this.instance?.close();
				}
				this.instance = null;
			},
		};
	}
}

export const flowLoading = new FlowLoadingManager();