first save

scoring/uni_modules/lime-overlay/components/l-overlay/index.scss

@@ -0,0 +1,40 @@
+@import '~@/uni_modules/lime-style/index.scss';
+$use-css-var: true;
+
+
+$overlay: #{$prefix}-overlay;
+$overlay-bg-color: create-var(overlay-bg-color, $bg-color-mask);
+$overlay-z-index: create-var(overlay-z-index, 998);
+$overlay-transition-duration: create-var(overlay-transition-duration, 300ms);
+/* #ifndef UNI-APP-X && APP */
+$overlay-blur: blur(create-var(overlay-blur, 4px));
+/* #endif */
+
+.#{$overlay}{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	bottom: 0;
+	background-color: $overlay-bg-color;
+	
+	transition-property: opacity;
+	transition-timing-function: ease;
+	z-index: $overlay-z-index;
+	opacity: 1; // uniapp x ios 必须要设置
+	/* #ifndef UNI-APP-X && APP */
+	backdrop-filter: $overlay-blur;
+	transition-duration: $overlay-transition-duration;
+	/* #endif */
+	/* #ifdef UNI-APP-X && APP */
+	transition-duration: 300ms;//$overlay-transition-duration;
+	/* #endif */
+}
+
+.l-fade-enter {
+	opacity: 0;
+}
+
+.l-fade-leave-to {
+	opacity: 0;
+}

scoring/uni_modules/lime-overlay/components/l-overlay/l-overlay.uvue

@@ -0,0 +1,103 @@
+<template>
+	<view v-if="inited"
+		class="l-overlay" 
+		ref="overlayRef"
+		:class="[lClass, classes]"
+		:style="[styles, lStyle]"
+		@click.stop="onClick" 
+		@touchmove.stop="noop" 
+		@transitionend="finished" 
+		:aria-role="ariaRole" 
+		:aria-label="ariaLabel">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="uts" setup>
+	/**
+	 * Overlay 遮罩层组件
+	 * @description 用于创建模态遮罩层，通常配合弹窗、对话框等组件使用
+	 * <br>插件类型：LOverlayComponentPublicInstance 
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-overlay
+	 * 
+	 * @property {string} ariaLabel 无障碍访问标签（需语义化描述作用）
+	 * @property {string} ariaRole ARIA角色属性（默认：'presentation'）
+	 * @property {string} lClass 自定义类名（会覆盖默认样式）
+	 * @property {string} bgColor 背景颜色（默认：'rgba(0, 0, 0, 0.7)'）
+	 * @property {string} lStyle 自定义样式（最高优先级，支持CSS字符串）
+	 * @property {number} duration 背景过渡动画时长（单位：ms，默认：300）
+	 * @property {boolean} preventScrollThrough 阻止滚动穿透（默认：true）
+	 * @property {boolean} visible 是否显示遮罩层（支持v-model）
+	 * @property {number} zIndex 层级（默认：1000）
+	 * @event {Function} click 点击遮罩层时触发（常用于关闭操作）
+	 * @event {Function} before-enter
+	 * @event {Function} enter 
+	 * @event {Function} after-enter
+	 * @event {Function} before-leave
+	 * @event {Function} leave
+	 * @event {Function} after-leave
+	 */
+	import { useTransition, type UseTransitionOptions, type TransitionEmitStatus } from '@/uni_modules/lime-transition';
+	import { OverlayProps } from './type';
+	// defineOptions({
+	// 	name:'l-overlay'	
+	// })
+	
+	const props = withDefaults(defineProps<OverlayProps>(), {
+		ariaLabel: '关闭',
+		ariaRole: 'button',
+		preventScrollThrough: true,
+		zIndex: 998,
+		visible: false,
+		duration: 300,
+	})
+	
+	const emit = defineEmits(['click', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'])
+	
+	const {inited, display, classes, finished} = useTransition({
+		defaultName: 'fade',
+		appear: props.visible,
+		emits: (name:TransitionEmitStatus) => { emit(name) },
+		visible: (): boolean => props.visible,
+		duration: props.duration,
+	} as UseTransitionOptions)
+	
+	const styles = computed<Map<string,any>>(():Map<string,any> => {
+		const style = new Map<string,any>();
+		if (props.bgColor != null) {
+			style.set("background-color", props.bgColor!)
+		}
+		if (props.zIndex > 0) {
+			style.set("z-index", props.zIndex)
+		}
+		// #ifndef APP || WEB
+		style.set('transition-duration', props.duration + 'ms')
+		if (!display.value) {
+			style.set("display", "none")
+		}
+		// #endif
+		return style
+	})
+	
+	const noop = () => {}
+	const onClick = (event: UniPointerEvent) =>{
+		// event.stopPropagation()
+		emit('click', !props.visible)
+	}
+	// #ifdef APP || WEB
+	const overlayRef = ref<UniElement|null>(null)
+	
+	watchEffect(()=>{
+		overlayRef.value?.style.setProperty('transition-duration', `${props.duration}ms`)
+		if(!display.value){
+			overlayRef.value?.style.setProperty('display', "none")
+		} else {
+			overlayRef.value?.style.setProperty('display', "flex")
+		}
+	})
+	// #endif
+	
+</script>
+<style lang="scss">
+	@import './index';
+</style>

scoring/uni_modules/lime-overlay/components/l-overlay/l-overlay.vue

@@ -0,0 +1,94 @@
+<template>
+	<view 
+		v-if="inited" 
+		class="l-overlay" 
+		:class="[lClass, classes]"
+		:style="[styles, lStyle]"
+		@click.stop="onClick" 
+		@touchmove.stop="noop" 
+		@transitionend="finished"
+		:aria-role="ariaRole || 'button'" 
+		:aria-label="ariaLabel || '关闭'">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+	// @ts-nocheck
+	/**
+	 * Overlay 遮罩层组件
+	 * @description 用于创建模态遮罩层，通常配合弹窗、对话框等组件使用
+	 * <br>插件类型：LOverlayComponentPublicInstance 
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-overlay
+	 * 
+	 * @property {string} ariaLabel 无障碍访问标签（需语义化描述作用）
+	 * @property {string} ariaRole ARIA角色属性（默认：'presentation'）
+	 * @property {string} lClass 自定义类名（会覆盖默认样式）
+	 * @property {string} bgColor 背景颜色（默认：'rgba(0, 0, 0, 0.7)'）
+	 * @property {string} lStyle 自定义样式（最高优先级，支持CSS字符串）
+	 * @property {number} duration 背景过渡动画时长（单位：ms，默认：300）
+	 * @property {boolean} preventScrollThrough 阻止滚动穿透（默认：true）
+	 * @property {boolean} visible 是否显示遮罩层（支持v-model）
+	 * @property {number} zIndex 层级（默认：1000）
+	 * @event {Function} click 点击遮罩层时触发（常用于关闭操作）
+	 * @event {Function} before-enter 
+	 * @event {Function} enter 
+	 * @event {Function} after-enter
+	 * @event {Function} before-leave
+	 * @event {Function} leave
+	 * @event {Function} after-leave
+	 */
+
+	import { computed, defineComponent } from '@/uni_modules/lime-shared/vue';
+	import { useTransition, type UseTransitionOptions, type TransitionEmitStatus } from '@/uni_modules/lime-transition';
+	import overlayProps from './props';
+
+	export default defineComponent({
+		props: overlayProps,
+		emits: ['click', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'],
+		options: {
+			addGlobalClass: true,
+			virtualHost: true,
+			externalClasses: true,
+		},
+		externalClasses: ['l-class'],
+		setup(props, { emit }) {
+			
+			const {inited, display, classes, finished} = useTransition({
+				defaultName: 'fade',
+				appear: props.visible,
+				emits: (name:TransitionEmitStatus) => { emit(name) },
+				visible: (): boolean => props.visible,
+				duration: props.duration,
+			} as UseTransitionOptions)
+
+
+			const styles = computed(() => ({
+				'transition-duration': props.duration + 'ms',
+				'background': props.bgColor,
+				'z-index': props.zIndex,
+				'display': !display.value ? 'none' : '',
+			}))
+
+			const onClick = () => {
+				emit('click', !props.visible)
+			}
+			const noop = (e) => {
+				e?.preventDefault();
+				return
+			}
+
+			return {
+				inited,
+				styles,
+				classes,
+				noop,
+				onClick,
+				finished
+			}
+		}
+	})
+</script>
+<style lang="scss">
+	@import './index';
+</style>

scoring/uni_modules/lime-overlay/components/l-overlay/props.ts

@@ -0,0 +1,20 @@
+export default {
+	visible: Boolean,
+	zIndex: {
+		type: Number,
+		default: 998,
+	},
+	duration: {
+		type: Number,
+		default: 300
+	},
+	preventScrollThrough: {
+		type: Boolean,
+		default: true
+	},
+	bgColor: String,
+	lStyle: [String, Object],
+	lClass: String,
+	ariaLabel: String,
+	ariaRole: String,
+}

scoring/uni_modules/lime-overlay/components/l-overlay/type.ts

@@ -0,0 +1,30 @@
+// @ts-nocheck
+export interface OverlayProps {
+	ariaLabel: string;
+	ariaRole: string;
+	lClass?: string;
+	/**
+	 * 遮罩层的背景色
+	 */
+	bgColor ?: string;
+	/**
+	 * 遮罩层自定义样式。优先级低于其他属性
+	 */
+	lStyle ?: string|UTSJSONObject;
+	/**
+	 * 背景色过渡时间，单位毫秒
+	 */
+	duration : number;
+	/**
+	 * 防止滚动穿透，即不允许点击和滚动
+	 */
+	preventScrollThrough : boolean;
+	/**
+	 * 是否展示
+	 */
+	visible : boolean;
+	/**
+	 * 遮罩的层级
+	 */
+	zIndex : number;
+}