Initial commit of akmon project

2026-01-20 08:04:15 +08:00
commit 77a2bab985
1309 changed files with 343305 additions and 0 deletions
--- a/uni_modules/lime-loading/components/l-loading/index-u.scss
+++ b/uni_modules/lime-loading/components/l-loading/index-u.scss
@@ -0,0 +1,254 @@
+@import '@/uni_modules/lime-style/index.scss';
+
+$loading-color: create-var(loading-color, $primary-color);
+$loading-size: create-var(loading-size, 40rpx);
+$loading-text-color: create-var(loading-text-color, $text-color-3);
+$loading-font-size: create-var(loading-font-size, $font-size);
+
+/* #ifndef APP-ANDROID || APP-HARMONY || APP-IOS || APP-NVUE */
+/* #ifndef MP-ALIPAY */
+$loading-duration: var(--l-loading-duration, 2s);
+
+@property --l-loading-start {
+	syntax: '<length-percentage>';
+	initial-value: 1%;
+	inherits: false;
+}
+@property --l-loading-end {
+	syntax: '<length-percentage>';
+	initial-value: 1%;
+	inherits: false;
+}
+@property --l-left {
+	syntax: '<length-percentage>';
+	initial-value: 1%;
+	inherits: false;
+}
+@property --l-loadding-ball-size {
+	syntax: '<length> | <length-percentage>';
+	// initial-value: 1%;
+	inherits: false;
+}
+
+/* #endif */
+/* #ifdef MP-ALIPAY */
+$loading-duration: var(--l-loading-duration, 1s);
+/* #endif */
+
+
+/* #endif */
+
+
+
+.l-loading {
+	display: flex;
+	position: relative;
+	flex-direction: row;
+	align-items: center;
+	// align-self: flex-start;
+	/* #ifdef APP-ANDROID || APP-HARMONY || APP-IOS */
+	border-left-color: $loading-color;
+	border-left-width: 0;
+	/* #endif */
+	/* #ifndef APP-ANDROID || APP-HARMONY || APP-IOS || APP-NVUE */
+	color: $loading-color;
+	&--ball{
+		display: inline-flex;
+		align-items: center;
+		
+		.l-loading {
+			&__ball {
+				position: relative;
+				perspective: calc(var(--l-loadding-ball-size) * 4);
+				transform-style: preserve-3d;
+				// border: 1px solid;
+				
+				&:before{
+					background-color: $primary-color;
+					left: 0%;
+					// mix-blend-mode: darken;
+					animation-name: l-ball-before;
+				}
+				&:after{
+					right: 0;
+					background-color: red;
+					// mix-blend-mode: darken;
+					animation-name: l-ball-after;
+				}
+				&:before,&:after{
+					top: 0;
+					content: '';
+					position: absolute;
+					// width: 100%;
+					height: 100%;
+					aspect-ratio: 1/1;
+					border-radius: 50%;
+					animation-iteration-count: infinite;
+					animation-delay: -100ms;
+					animation-duration: 900ms;
+					mix-blend-mode: darken;
+					animation-play-state: var(--l-play-state, running);
+				}
+			}
+		}
+	}
+	&--circular {
+		.l-loading {
+			&__circular {
+				display: inline-block;
+				position: relative;
+				animation: l-rotate $loading-duration linear infinite;
+				animation-play-state: var(--l-play-state, running);
+				vertical-align: middle;
+				&:before {
+					content: '';
+					display: block;
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+					/* #ifndef MP-ALIPAY */
+					background: conic-gradient(
+						transparent 0%, 
+						transparent var(--l-loading-start, 0%), var(--l-loading-color-1, currentColor) var(--l-loading-start, 0%), 
+						var(--l-loading-color-2, currentColor) var(--l-loading-end, 0%), transparent var(--l-loading-end, 0%), 
+						transparent 100%);
+					/* #endif */
+					/* #ifdef MP-ALIPAY */
+					background: conic-gradient(
+						var(--l-loading-color-1, transparent) 0%, 
+						var(--l-loading-color-2, currentColor) 100%);
+					/* #endif */
+					mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
+					-webkit-mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
+					animation: l-circular 3s ease-in-out infinite;
+					animation-play-state: var(--l-play-state, running);
+					transform: rotate(90deg);
+				}
+			}
+		}
+	}
+	&--spinner {
+		.l-loading {
+			&__spinner {
+				position: relative;
+				box-sizing: border-box;
+				// width: 100%;
+				// height: 100%;
+				// max-width: 100%;
+				// max-height: 100%;
+				animation-timing-function: steps(12);
+				animation: l-rotate 1.5s linear infinite;
+				animation-play-state: var(--l-play-state, running)
+			}
+			&__dot {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				transform: rotate(calc(var(--l-loading-dot, 1) * 30deg));
+				opacity: calc(var(--l-loading-dot, 1) / 12);
+				&::before {
+				  display: block;
+				  width: 5rpx;
+				  height: 25%;
+				  margin: 0 auto;
+				  background-color: currentColor;
+				  border-radius: 40%;
+				  content: ' ';
+				}
+			}
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-ANDROID || APP-HARMONY || APP-IOS || APP-NVUE */
+	&__view{
+		// background-color: aqua;
+		// background-color: #1677ff;
+		// transition-duration: 1.5s;
+		// transition-property: transform;
+		// transition-timing-function: linear;
+	}
+	/* #endif */
+	&__text {
+		margin-left: $spacer-xs;
+		color: $loading-text-color;
+		font-size: $loading-font-size;
+	}
+	
+	
+	&.is-vertical {
+		flex-direction: column;
+		.l-loading__text {
+			margin: $spacer-tn 0 0;
+		}
+	}
+	&__ball,&__circular,&__spinner {
+		width: $loading-size;
+		height: $loading-size;
+	}
+}
+
+
+/* #ifndef APP-ANDROID || APP-HARMONY || APP-IOS || APP-NVUE */
+@keyframes l-circular {
+	0% {
+		--l-loading-start: 0%;
+		--l-loading-end: 0%;
+	}
+	50% {
+		--l-loading-start: 0%;
+		--l-loading-end: 100%;
+	}
+	100% {
+		--l-loading-start: 100%;
+		--l-loading-end: 100%;
+	}
+}
+@keyframes l-rotate {
+	to {
+		transform: rotate(1turn)
+	}
+}
+
+@keyframes l-ball-before {
+	0%{
+		animation-timing-function: ease-in;
+	}
+	25% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
+		transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
+	}
+	50% {
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)));
+		animation-timing-function:ease-in;
+		transform: translate3d(var(--l-left), 0, 0);
+	}
+	75% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
+		transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
+	}
+}
+@keyframes l-ball-after {
+	0%{
+		animation-timing-function: ease-in;
+	}
+	25% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
+		transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
+	}
+	50% {
+		animation-timing-function:ease-in;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) * -1);
+		transform: translate3d(var(--l-left), 0, 0);
+	}
+	75% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
+		transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
+	}
+}
+/* #endif */
--- a/uni_modules/lime-loading/components/l-loading/index.scss
+++ b/uni_modules/lime-loading/components/l-loading/index.scss
@@ -0,0 +1,246 @@
+@import '@/uni_modules/lime-style/index.scss';
+
+$loading-color: create-var(loading-color, $primary-color);
+$loading-size: create-var(loading-size, 40rpx);
+$loading-text-color: create-var(loading-text-color, $text-color-3);
+$loading-font-size: create-var(loading-font-size, $font-size);
+
+/* #ifndef MP-ALIPAY */
+$loading-duration: create-var(loading-duration, 2s);
+/* #endif */
+/* #ifdef MP-ALIPAY */
+$loading-duration: create-var(loading-duration, 1s);
+/* #endif */
+
+/* #ifndef APP-NVUE */
+
+
+
+/* #ifndef MP-ALIPAY */
+@property --l-loading-start {
+	syntax: '<length-percentage>';
+	initial-value: 1%;
+	inherits: false;
+}
+@property --l-loading-end {
+	syntax: '<length-percentage>';
+	initial-value: 1%;
+	inherits: false;
+}
+@property --l-left {
+	syntax: '<length-percentage>';
+	initial-value: 1%;
+	inherits: false;
+}
+@property --l-loadding-ball-size {
+	syntax: '<length> | <length-percentage>';
+	// initial-value: 1%;
+	inherits: false;
+}
+/* #endif */
+
+:host {
+	display: inline-flex;
+}
+/* #endif */
+
+
+.l-loading {
+	position: relative;
+	// color: #c8c9cc;
+	color: $loading-color;
+	font-size: 0;
+	vertical-align: middle;
+	&--ball{
+		display: inline-flex;
+		align-items: center;
+		.l-loading {
+			&__ball {
+				position: relative;
+				perspective: calc(var(--l-loadding-ball-size) * 4);
+				transform-style: preserve-3d;
+				// border: 1px solid;
+				
+				&:before{
+					background-color: $primary-color;
+					left: 0%;
+					// mix-blend-mode: darken;
+					animation-name: l-ball-before;
+				}
+				&:after{
+					right: 0;
+					background-color: red;
+					// mix-blend-mode: darken;
+					animation-name: l-ball-after;
+				}
+				&:before,&:after{
+					top: 0;
+					content: '';
+					position: absolute;
+					// width: 100%;
+					height: 100%;
+					aspect-ratio: 1/1;
+					border-radius: 50%;
+					animation-iteration-count: infinite;
+					animation-delay: -100ms;
+					animation-duration: 900ms;
+					mix-blend-mode: darken;
+					animation-play-state: var(--l-play-state, running);
+				}
+			}
+		}
+	}
+	&--circular {
+		.l-loading {
+			&__circular {
+				display: inline-block;
+				position: relative;
+				/* #ifndef APP-NVUE */
+				animation: l-rotate $loading-duration linear infinite;
+				vertical-align: middle;
+				animation-play-state: var(--l-play-state, running);
+				&:before {
+					content: '';
+					display: block;
+					width: 100%;
+					height: 100%;
+					border-radius: 50%;
+					/* #ifndef MP-ALIPAY || APP-VUE */
+					background-image: conic-gradient(
+						transparent 0%, 
+						transparent var(--l-loading-start, 0%), var(--l-loading-color-1, currentColor) var(--l-loading-start, 0%), 
+						var(--l-loading-color-2, currentColor) var(--l-loading-end, 0%), transparent var(--l-loading-end, 0%), 
+						transparent 100%);
+					/* #endif */
+					/* #ifdef MP-ALIPAY  || APP-VUE */
+					background-image: conic-gradient(
+						var(--l-loading-color-1, transparent) 0%, 
+						var(--l-loading-color-2, currentColor) 100%);
+					/* #endif */
+					mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
+					-webkit-mask: radial-gradient(closest-side, transparent calc(80% - 1px), #fff 80%);
+					animation: l-circular 2.5s ease-in-out infinite;
+					transform: rotate(90deg);
+					animation-play-state: var(--l-play-state, running);
+				}
+				/* #endif */
+			}
+		}
+	}
+	&--spinner {
+		.l-loading {
+			&__spinner {
+				position: relative;
+				box-sizing: border-box;
+				width: 100%;
+				height: 100%;
+				max-width: 100%;
+				max-height: 100%;
+				animation-timing-function: steps(12);
+				animation: l-rotate 0.8s linear infinite;
+				animation-play-state: var(--l-play-state, running);
+			}
+			&__dot {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				transform: rotate(calc(var(--l-loading-dot, 1) * 30deg));
+				opacity: calc(var(--l-loading-dot, 1) / 12);
+				&::before {
+				  display: block;
+				  width: 5rpx;
+				  height: 25%;
+				  margin: 0 auto;
+				  background-color: currentColor;
+				  border-radius: 40%;
+				  content: ' ';
+				}
+			}
+		}
+		
+	}
+	&__text{
+		display: inline-block;
+		margin-left: $spacer-xs;
+		color: $loading-text-color;
+		font-size: $loading-font-size;
+		vertical-align: middle;
+	}
+	&.is-vertical {
+		display: inline-flex;    
+		flex-direction: column;
+		align-items: center;
+		
+		.l-loading__text {
+			margin: $spacer-tn 0 0;
+		}
+	}
+	&__ball,&__circular,&__spinner {
+		width: $loading-size;
+		height: $loading-size;
+	}
+}
+/* #ifndef APP-NVUE */
+@keyframes l-circular {
+	0% {
+		--l-loading-start: 0%;
+		--l-loading-end: 0%;
+	}
+	50% {
+		--l-loading-start: 0%;
+		--l-loading-end: 100%;
+	}
+	100% {
+		--l-loading-start: 100%;
+		--l-loading-end: 100%;
+	}
+}
+@keyframes l-rotate {
+	to {
+		transform: rotate(1turn)
+	}
+}
+
+@keyframes l-ball-before {
+	0%{
+		animation-timing-function: ease-in;
+	}
+	25% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
+		transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
+	}
+	50% {
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)));
+		animation-timing-function:ease-in;
+		transform: translate3d(var(--l-left), 0, 0);
+	}
+	75% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2);
+		transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
+	}
+}
+@keyframes l-ball-after {
+	0%{
+		animation-timing-function: ease-in;
+	}
+	25% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
+		transform: translate3d(var(--l-left), 0, calc(var(--l-loadding-ball-size) * -1));
+	}
+	50% {
+		animation-timing-function:ease-in;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) * -1);
+		transform: translate3d(var(--l-left), 0, 0);
+	}
+	75% {
+		animation-timing-function: ease-out;
+		--l-left: calc((var(--l-loadding-ball-size,100%) * 2.1 - var(--l-loadding-ball-size,100%)) / 2 * -1);
+		transform: translate3d(var(--l-left), 0, var(--l-loadding-ball-size));
+	}
+}
+/* #endif */
--- a/uni_modules/lime-loading/components/l-loading/l-loading.uvue
+++ b/uni_modules/lime-loading/components/l-loading/l-loading.uvue
@@ -0,0 +1,117 @@
+<template>
+	<view class="l-loading" :class="classes">
+		<!-- #ifndef APP-ANDROID || APP-IOS || APP-HARMONY -->
+		<view class="l-loading__ball" v-if="type == 'ball'" :style="[spinnerStyle]"></view>
+		<view class="l-loading__circular" v-if="type == 'circular'" :style="[spinnerStyle]"></view>
+		<view class="l-loading__spinner" v-if="type == 'spinner'" :style="[spinnerStyle]">
+			<view class="l-loading__dot" v-for="item in 12" :key="item" :style="{'--l-loading-dot': item}"></view>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef APP-ANDROID || APP-IOS || APP-HARMONY -->
+		<view class="l-loading__view" ref="loadingRef" :style="spinnerStyle"></view>
+		<!-- #endif -->
+		<text class="l-loading__text" v-if="$slots['default'] != null || text != null" :style="textStyle">
+			<slot>{{text}}</slot>
+		</text>
+	</view>
+</template>
+<script lang="uts" setup>
+	/**
+	 * Loading 加载指示器
+	 * @description 用于表示加载中的过渡状态，支持多种动画类型和布局方式
+	 * <br> 插件类型：LLoadingComponentPublicInstance 
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-loading
+	 * 
+	 * @property {string} color 加载图标颜色（默认：主题色）
+	 * @property {'circular' | 'spinner' | 'failed'} mode 动画实现的模式.只针对APP
+	 * @value raf 延时
+	 * @value animate 基于元素的annimate方法
+	 * @property {'circular' | 'spinner' | 'failed'} type 加载状态类型
+	 * @value circular  环形旋转动画（默认）
+	 * @value spinner   菊花转动画
+	 * @value failed    加载失败提示
+	 * @property {string} text 提示文字内容
+	 * @property {string} textColor 文字颜色（默认同color）
+	 * @property {string} textSize 文字字号（默认：14px）
+	 * @property {boolean} vertical 是否垂直排列图标和文字
+	 * @property {boolean} animated 是否启用旋转动画（failed类型自动禁用）
+	 * @property {string} size 图标尺寸（默认：'40px'）
+	 */
+	import { LoadingProps } from './type'
+	// #ifdef APP
+	// import {useLoading} from './useLoading'
+	import {useLoading} from '@/uni_modules/lime-loading'
+	// #endif
+	const name = 'l-loading'
+	const props = withDefaults(defineProps<LoadingProps>(), {
+		// #ifdef APP
+		size: '40rpx',
+		// #endif
+		type: 'circular',
+		mode: 'raf',
+		animated: true,
+		vertical: false,
+	})
+	
+	
+	const classes = computed<Map<string,any>>(():Map<string,any> => {
+		const cls = new Map<string,any>()
+		cls.set(name + '--' + props.type, true)
+		if (props.vertical) {
+			cls.set('is-vertical', props.vertical)
+		} else {
+			cls.set('is-horizontal', !props.vertical)
+		}
+		return cls
+	})
+	
+	const spinnerStyle = computed<Map<string,any>>(():Map<string,any> => {
+		const style = new Map<string,any>()
+		style.set('width', props.size)
+		style.set('height', props.size)
+		// #ifndef APP
+		style.set('color', props.color)
+		style.set('--l-play-state', props.animated ? 'running' : 'paused')
+		// #endif
+		return style
+	})
+	
+	const textStyle = computed<Map<string,any>>(():Map<string,any> => {
+		const style = new Map<string,any>()
+		if (props.textColor != null) {
+			style.set('color', props.textColor!)
+		}
+		if (props.textSize != null) {
+			style.set('font-size', props.textSize!)
+		}
+		return style
+	})
+	// #ifdef APP
+	const loadingRef = ref<UniElement|null>(null)
+	// const {state, color} =  useLoading(loadingRef, props.type, props.color, 1)
+	const loading = useLoading(loadingRef)
+	loading.type = props.type;
+	loading.mode = props.mode;
+	if(props.animated){
+		loading.play()
+	}
+	
+	// state.value = true
+	watchEffect(()=>{
+		if(loadingRef.value == null) return
+		const color = props.color  ?? loadingRef.value?.style.getPropertyValue('border-left-color')
+		loading.color = color == null || color.length == 0 ? '#1677ff' : color
+		
+		if(props.animated){
+			loading.play()
+		} else {
+			loading.pause()
+		}
+	})
+	// #endif
+	
+</script>
+
+<style lang="scss">
+	@import './index-u.scss';
+</style>
--- a/uni_modules/lime-loading/components/l-loading/l-loading.vue
+++ b/uni_modules/lime-loading/components/l-loading/l-loading.vue
@@ -0,0 +1,79 @@
+<template>
+	<view class="l-class l-loading" :class="['l-loading--' + type, {'is-vertical': vertical}]" :style="{color: inheritColor ? 'inherit': ''}">
+		<!-- #ifdef APP-NVUE -->
+		<loading-indicator class="l-loading__circular" :style="[spinnerStyle]" :animating="true"/>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<view class="l-loading__ball" v-if="type == 'ball'" :style="[spinnerStyle]"></view>
+		<view class="l-loading__circular" v-if="type == 'circular'" :style="[spinnerStyle]"></view>
+		<view class="l-loading__spinner" v-if="type == 'spinner'" :style="[spinnerStyle]">
+			<view class="l-loading__dot" v-for="item in 12" :key="item" :style="{'--l-loading-dot': item}"></view>
+		</view>
+		<!-- #endif -->
+		<text class="l-loading__text" v-if="$slots['default']||text" :style="[textStyle]">
+			{{text}}<slot></slot>
+		</text>
+	</view>
+</template>
+<script lang="ts">
+	/**
+	 * Loading 加载指示器
+	 * @description 用于表示加载中的过渡状态，支持多种动画类型和布局方式
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-loading
+	 * 
+	 * @property {string} color 加载图标颜色（默认：主题色）
+	 * @property {'circular' | 'spinner' | 'failed'} type 加载状态类型
+	 * @value circular  环形旋转动画（默认）
+	 * @value spinner   菊花转动画
+	 * @value failed    加载失败提示
+	 * @property {string} text 提示文字内容
+	 * @property {string} textColor 文字颜色（默认同color）
+	 * @property {string} textSize 文字字号（默认：14px）
+	 * @property {boolean} vertical 是否垂直排列图标和文字
+	 * @property {boolean} animated 是否启用旋转动画（failed类型自动禁用）
+	 * @property {string} size 图标尺寸（默认：'40px'）
+	 */
+	import {computed, defineComponent} from '@/uni_modules/lime-shared/vue';
+	import {addUnit} from '@/uni_modules/lime-shared/addUnit';
+	import {unitConvert} from '@/uni_modules/lime-shared/unitConvert';
+	import LoadingProps from './props';
+	const name = 'l-loading';
+	
+	export default defineComponent({
+		// name,
+		props:LoadingProps,
+		setup(props) {
+			const classes = computed(() => {
+				const {type, vertical} = props
+				return {
+					[name + '--' + type]: type,
+					['is-vertical']: vertical,
+				}
+			})
+			const spinnerStyle = computed(() => {
+				const size = unitConvert(props.size ?? 0) * (props.type == 'ball' ? 0.6 : 1);
+				return {
+					color: props.color,
+					width: size != 0 && (props.type == 'ball' ? addUnit(size * 2.1) : addUnit(size)),
+					height: size != 0 && addUnit(size),
+					'--l-loadding-ball-size': size != 0 && addUnit(size)
+				}
+			})
+			const textStyle = computed(() => {
+				return {
+					color: props.textColor,
+					fontSize: props.textSize,
+				}
+			})
+			return {
+				classes,
+				spinnerStyle,
+				textStyle
+			}
+		}
+	})
+</script>
+
+<style lang="scss">
+	@import './index.scss';
+</style>
--- a/uni_modules/lime-loading/components/l-loading/props.ts
+++ b/uni_modules/lime-loading/components/l-loading/props.ts
@@ -0,0 +1,26 @@
+// import {PropType} from 'vue'
+export default {
+	color: {
+		type: String,
+		// default: '#c9c9c9'
+	},
+	type: {
+		type: String, //as PropType<'circular'|'spinner'>,
+		default: 'circular'
+	},
+	size: {
+		type: String,
+		// #ifdef APP-NVUE
+		default: '40rpx'
+		// #endif
+	},
+	text: String,
+	textColor: String,
+	textSize: String,
+	vertical: Boolean,
+	inheritColor: Boolean,
+	animated: {
+		type: Boolean,
+		default: true
+	}
+}
--- a/uni_modules/lime-loading/components/l-loading/type.ts
+++ b/uni_modules/lime-loading/components/l-loading/type.ts
@@ -0,0 +1,59 @@
+// 完整类型定义
+export interface LoadingProps {
+  color?: string;
+  type: 'circular' | 'spinner' | 'failed';
+  // #ifndef APP
+  size?: string;
+  // #endif
+  // #ifdef APP
+  size: string;
+  // #endif
+  text?: string;
+  textColor?: string;
+  textSize?: string;
+  mode: 'raf' | 'animate';
+  vertical: boolean;
+  animated: boolean;
+}
+
+// defineOptions({
+	// 	name: 'l-loading'
+	// })
+	// const props = defineProps({
+	// 	color: {
+	// 		type: String,
+	// 		// #ifdef APP
+	// 		default: '#1677ff' // '#c9c9c9'
+	// 		// #endif
+	// 	},
+	// 	type: {
+	// 		type: String,
+	// 		default: 'circular'
+	// 	},
+	// 	size: {
+	// 		type: String,
+	// 		// #ifdef APP
+	// 		default: '40rpx',
+	// 		// #endif
+	// 	},
+	// 	text: {
+	// 		type: String,
+	// 		default: ''
+	// 	},
+	// 	textColor: {
+	// 		type: String,
+	// 		default: ''
+	// 	},
+	// 	textSize: {
+	// 		type: String,
+	// 		default: ''
+	// 	},
+	// 	vertical: {
+	// 		type: Boolean,
+	// 		default: false
+	// 	},
+	// 	animated: {
+	// 		type: Boolean,
+	// 		default: true
+	// 	}
+	// })
--- a/uni_modules/lime-loading/components/l-loading/useLoading.uts
+++ b/uni_modules/lime-loading/components/l-loading/useLoading.uts
@@ -0,0 +1,330 @@
+// type UseLoadingOtions = {
+// 	type: string,
+// 	color: string,
+// 	el: UniElement
+// }
+import {tinyColor} from '@/uni_modules/lime-color'
+function easeInOutCubic(t : number) : number {
+	return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+}
+
+type useLoadingReturnType = {
+	state : Ref<boolean>
+	color : Ref<string>
+	play: () => void
+	failed: () => void
+	clear : () => void
+	destroy : () => void
+}
+type Point = {
+	x1: number
+	y1: number
+	x2: number
+	y2: number
+}
+export function useLoading(
+	element : Ref<UniElement | null>, 
+	type : 'circular' | 'spinner', 
+	strokeColor : string, 
+	ratio : number,
+	immediate: boolean = false,
+	) : useLoadingReturnType {
+	const state = ref(false)
+	const color = ref(strokeColor)
+	let tick = 0 // 0 不绘制 | 1 旋转 | 2 错误
+	let init = false
+	let isDestroy = ref(false)
+	let width = 0
+	let height = 0
+	let size = 0
+	let x = 0
+	let y = 0
+	let ctx : DrawableContext | null = null
+	let timer = -1
+	let isClear = false;
+	let drawing = false;
+	const updateSize = () => {
+		if (element.value == null) return
+		
+		const rect = element.value!.getBoundingClientRect();
+		ctx = element.value!.getDrawableContext()! as DrawableContext
+		width = rect.width
+		height = rect.height
+		size = ratio > 1 ? ratio : Math.floor(Math.min(width, height) * ratio)
+		x = width / 2
+		y = height / 2
+	}
+	const circular = () => {
+		if (ctx == null) return
+		let _ctx = ctx!
+		let startAngle = 0;
+		let endAngle = 0;
+		let startSpeed = 0;
+		let endSpeed = 0;
+		let rotate = 0;
+
+		// 不使用360的原因是加上rotate后，会导致闪烁
+		const ARC_LENGTH = 359.5
+		const PI = Math.PI / 180
+		const SPEED = 0.018
+		const ROTATE_INTERVAL = 0.09
+		const center = size / 2
+		const lineWidth = size / 10;
+
+		function draw() {
+			if(isClear) return
+			_ctx.reset();
+			_ctx.beginPath();
+			_ctx.arc(
+				x,
+				y,
+				center - lineWidth,
+				startAngle * PI + rotate,
+				endAngle * PI + rotate);
+			_ctx.lineWidth = lineWidth;
+			_ctx.strokeStyle = color.value;
+			_ctx.stroke();
+
+			if (endAngle < ARC_LENGTH && startAngle == 0) {
+				endSpeed += SPEED
+				endAngle = Math.min(ARC_LENGTH, easeInOutCubic(endSpeed) * ARC_LENGTH)
+			} else if (endAngle == ARC_LENGTH && startAngle < ARC_LENGTH) {
+				startSpeed += SPEED
+				startAngle = Math.min(ARC_LENGTH, easeInOutCubic(startSpeed) * ARC_LENGTH);
+			} else if (endAngle >= ARC_LENGTH && startAngle >= ARC_LENGTH) {
+				endSpeed = 0
+				startSpeed = 0
+				startAngle = 0;
+				endAngle = 0;
+			}
+			rotate += ROTATE_INTERVAL;
+			_ctx.update()
+			// clearTimeout(timer)
+			
+			timer = setTimeout(() => draw(), 24)
+		}
+		draw()
+	}
+	const spinner = () =>  {
+		if (ctx == null) return
+		let _ctx = ctx!
+		const steps = 12;
+		let step = 0;
+		const lineWidth = size / 10;
+		// 线长度和距离圆心距离
+		const length = size / 4 - lineWidth;
+		const offset = size / 4;
+
+		
+		function generateColorGradient(hex: string, steps: number):string[]{
+			const colors:string[] = []
+			const _color = tinyColor(hex)
+			for (let i = 1; i <= steps; i++) {
+				_color.setAlpha(i/steps);
+				colors.push(_color.toRgbString()); 
+			}
+			return colors
+		}
+		let colors = computed(():string[]=> generateColorGradient(color.value, steps)) 
+		
+		function draw() {
+			if(tick == 0) return
+			_ctx.reset();
+			for (let i = 0; i < steps; i++) {
+				const stepAngle = 360 / steps
+				const angle = stepAngle * i;
+				const index =(steps + i - (step % steps)) % steps
+				// 正余弦
+				const sin = Math.sin(angle / 180 * Math.PI);
+				const cos = Math.cos(angle / 180 * Math.PI);
+				// 开始绘制
+				_ctx.lineWidth = lineWidth;
+				_ctx.lineCap = 'round';
+				_ctx.beginPath();
+				_ctx.moveTo(size / 2 + offset * cos, size / 2 + offset * sin);
+				_ctx.lineTo(size / 2 + (offset + length) * cos, size / 2 + (offset + length) * sin);
+				_ctx.strokeStyle = colors.value[index]
+				_ctx.stroke();
+			}
+			step += 1
+			_ctx.update()
+			timer = setTimeout(() => draw(), 1000/10)
+		}
+		draw()
+	}
+	const clear = () => {
+		clearTimeout(timer)
+		drawing = false
+		tick = 0
+		if(ctx == null) return
+		// ctx?.reset()
+		// ctx?.update()
+		setTimeout(()=>{
+			ctx!.reset()
+			ctx!.update()
+		},1000)
+		
+	}
+	const failed = () =>  {
+		if(tick == 1) {
+			drawing = false
+		}
+		clearTimeout(timer)
+		tick = 2
+		if (ctx == null || drawing) return
+		let _ctx = ctx!
+		const _size = size * 0.61
+		const _sizeX = _size * 0.65
+		const lineWidth = _size / 6;
+		const lineLength = Math.ceil(Math.sqrt(Math.pow(_sizeX, 2) * 2))
+		
+		const startX1 = (width - _sizeX) * 0.5
+		const startY = (height - _sizeX) * 0.5
+		const startX2 = startX1 + _sizeX
+
+		// 添加圆的参数
+		const centerX = width / 2;
+		const centerY = height / 2;
+		const radius = (_size * Math.sqrt(2)) / 2 + lineWidth / 2;
+		const totalSteps = 36;
+		
+		function generateSteps(stepsCount: number):Point[][] {
+			
+			const halfStepsCount = stepsCount / 2;
+			const step = lineLength / halfStepsCount //Math.floor(lineLength / 18);
+			const steps:Point[][] = []
+			for (let i = 0; i < stepsCount; i++) {
+				const sub:Point[] = []
+				const index = i % 18 + 1
+				if(i < halfStepsCount) {
+					
+					const x2 = Math.sin(45 * Math.PI / 180) * step * index + startX1
+					const y2 = Math.cos(45 * Math.PI / 180) * step * index + startY
+					
+					const start1 = {
+						x1: startX1,
+						y1: startY,
+						x2,
+						y2,
+					} as Point
+					
+					sub.push(start1)
+				} else {
+					sub.push(steps[halfStepsCount-1][0])
+					const x2 = Math.sin((45 - 90) * Math.PI / 180) * step * index + startX2
+					const y2 = Math.cos((45 - 90) * Math.PI / 180) * step * index + startY
+					
+					const start2 = {
+						x1: startX2,
+						y1: startY,
+						x2,
+						y2,
+					} as Point
+					sub.push(start2)
+				}
+				steps.push(sub)
+			}	
+			
+			return steps
+		}
+		const steps = generateSteps(36);
+		function draw(){
+			if(steps.length == 0 || tick == 0) {
+				clearTimeout(timer)
+				return
+			}
+			const drawStep = steps.shift()!
+			_ctx.reset()
+			_ctx.lineWidth = lineWidth;
+			_ctx.strokeStyle = color.value;
+			
+			// 绘制逐渐显示的圆
+			_ctx.beginPath();
+			_ctx.arc(centerX, centerY, radius, 0, (2 * Math.PI) * (totalSteps - steps.length) / totalSteps);
+			_ctx.lineWidth = lineWidth;
+			_ctx.strokeStyle = color.value;
+			_ctx.stroke();
+			
+			// 绘制X
+			_ctx.beginPath();
+			drawStep.forEach(item => {
+				_ctx.beginPath();
+				_ctx.moveTo(item.x1, item.y1)
+				_ctx.lineTo(item.x2, item.y2)
+				_ctx.stroke();
+			})
+			_ctx.update()
+			timer = setTimeout(() => draw(), 1000/30)
+		}
+		draw()
+	}
+	const destroy = () => {
+		isDestroy.value = true;
+		clear()
+	}
+	const play = () => {
+		if(tick == 2) {
+			drawing = false
+		}
+		if(drawing) return
+		tick = 1
+		if(width == 0 || height == 0) return
+		if (type == 'circular') {
+			circular()
+		} else if (type == 'spinner') {
+			spinner()
+		}
+		drawing = true
+	}
+	
+	const _watch = (v:boolean) => {
+		if(isDestroy.value) return
+		if (v) {
+			play() 
+		} else {
+			failed()
+		}
+	}
+	const stopWatchState = watch(state, _watch)
+	
+	const ob = new UniResizeObserver((entries: UniResizeObserverEntry[])=>{
+		if(isDestroy.value) return
+		entries.forEach(entry => {
+			if(isDestroy.value) return
+			const rect = entry.target.getBoundingClientRect();
+			if(rect.width > 0 && rect.height > 0) {
+				updateSize();
+				if(tick == 1) {
+					play()
+					state.value = true
+				} else if(tick == 2) {
+					failed()
+					state.value = false
+				} else if(immediate && !init) {
+					_watch(state.value)
+					init = true
+				}
+			}
+		})
+	})
+	
+	const stopWatchElement = watch(element, (el:UniElement|null) => {
+		if(el == null || isDestroy.value) return
+		ob.observe(el)
+	})
+
+	onUnmounted(()=>{
+		stopWatchState()
+		stopWatchElement()
+		clear()
+		ob.disconnect()
+	})
+	return {
+		state,
+		play,
+		failed,
+		clear,
+		color,
+		destroy
+	} as useLoadingReturnType
+}
--- a/uni_modules/lime-loading/components/lime-loading/lime-loading.uvue
+++ b/uni_modules/lime-loading/components/lime-loading/lime-loading.uvue
@@ -0,0 +1,125 @@
+<template>
+	<view class="demo-block">
+		<text class="demo-block__title-text ultra">加载</text>
+		<text class="demo-block__desc-text">用于表示加载中的过渡状态。</text>
+		<view class="demo-block__body">
+
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">基础</text>
+				<view class="demo-block__body">
+					<view class="row">
+						<l-loading :animated="animated"></l-loading>
+						<l-loading type="spinner" :color="color"></l-loading>
+					</view>
+				</view>
+			</view>
+
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">文字</text>
+				<view class="demo-block__body">
+					<l-loading>加载中…</l-loading>
+					<l-loading text="加载中…"></l-loading>
+				</view>
+			</view>
+
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">垂直</text>
+				<view class="demo-block__body">
+					<l-loading :vertical="true">加载中…</l-loading>
+					<l-loading :vertical="true" text="加载中…"></l-loading>
+				</view>
+			</view>
+
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">尺寸</text>
+				<view class="demo-block__body">
+					<view class="row">
+						<l-loading size="40rpx"></l-loading>
+						<l-loading size="60rpx"></l-loading>
+					</view>
+				</view>
+			</view>
+
+			<view class="demo-block card">
+				<text class="demo-block__title-text large">颜色</text>
+				<view class="demo-block__body">
+					<view class="row">
+						<l-loading color="red"></l-loading>
+						<l-loading color="red" type="spinner"></l-loading>
+					</view>
+				</view>
+			</view>
+
+		</view>
+	</view>
+</template>
+<script setup lang="uts">
+	const color = ref('')
+	const animated = ref(true)
+	
+	setTimeout(()=>{
+		color.value = '#34c471'
+		animated.value = false
+	},2000)
+</script>
+<style lang="scss">
+	.row {
+		display: flex;
+		flex-direction: row;
+		/* #ifndef UNI-APP-X */
+		gap: 50rpx;
+		/* #endif */
+	}
+
+	.demo-block {
+		margin: 32px 10px 0;
+		overflow: visible;
+		&.card{
+			padding: 30rpx;
+			background-color: white;
+			margin-bottom: 20rpx !important;
+		}
+		&__title {
+			margin: 0;
+			margin-top: 8px;
+
+			&-text {
+				color: rgba(0, 0, 0, 0.6);
+				font-weight: 400;
+				font-size: 14px;
+				line-height: 16px;
+
+				&.large {
+					color: rgba(0, 0, 0, 0.9);
+					font-size: 18px;
+					font-weight: 700;
+					line-height: 26px;
+				}
+
+				&.ultra {
+					color: rgba(0, 0, 0, 0.9);
+					font-size: 24px;
+					font-weight: 700;
+					line-height: 32px;
+				}
+			}
+		}
+
+		&__desc-text {
+			color: rgba(0, 0, 0, 0.6);
+			margin: 8px 16px 0 0;
+			font-size: 14px;
+			line-height: 22px;
+		}
+
+		&__body {
+			margin: 16px 0;
+			overflow: visible;
+
+			.demo-block {
+				// margin-top: 0px;
+				margin: 0;
+			}
+		}
+	}
+</style>
--- a/uni_modules/lime-loading/components/lime-loading/lime-loading.vue
+++ b/uni_modules/lime-loading/components/lime-loading/lime-loading.vue
@@ -0,0 +1,52 @@
+<template>
+	<demo-block title="加载" type="ultra">
+		<demo-block title="基础">
+			<view class="row">
+				<l-loading></l-loading>
+				<l-loading type="spinner"></l-loading>
+				<l-loading inherit-color type="ball"></l-loading>
+			</view>
+		</demo-block>
+		<demo-block title="文字">
+			<!-- <l-loading>加载中…</l-loading> -->
+			<l-loading text="加载中…"></l-loading>
+		</demo-block>
+		<demo-block title="垂直">
+			<!-- <l-loading :vertical="true">加载中…</l-loading> -->
+			<l-loading :vertical="true" text="加载中…"></l-loading>
+		</demo-block>
+		<demo-block title="尺寸">
+			<view class="row">
+				<l-loading size="40rpx"></l-loading>
+				<l-loading size="60rpx"></l-loading>
+			</view>
+		</demo-block>
+		<demo-block title="颜色">
+			<view class="row">
+				<!-- #ifndef UNI-APP-X -->
+				<l-loading inherit-color></l-loading>
+				<l-loading inherit-color type="spinner"></l-loading>
+				<l-loading color="red"></l-loading>
+				<!-- #endif -->
+				<!-- #ifdef UNI-APP-X -->
+				<l-loading color="red"></l-loading>
+				<l-loading color="red" type="spinner"></l-loading>
+				<!-- #endif -->
+			</view>
+		</demo-block>
+	</demo-block>
+</template>
+<script>
+	export default {
+
+	 }
+</script>
+<style lang="scss">
+	.row {
+		display: flex;
+		flex-direction: row;
+		/* #ifndef UNI-APP-X */
+		gap: 50rpx;
+		/* #endif */
+	}
+</style>