feat(fittingRoom): 添加 Clothespic 组件并集成到试衣间页面

- 创建 Clothespic.vue 组件，包含试穿按钮和样式
- 在 fittingRoom/index.vue 中引入并使用 Clothespic 组件- 调整组件导入顺序以优化代码结构- 添加 uv-button 和 uv-loading-icon 组件模块及相关配置
- 更新组件 changelog、package.json、props.js 和 readme.md 文件
- 实现按钮和加载图标的基础样式与功能配置

uni_modules/uv-button/changelog.md

@@ -0,0 +1,33 @@
+## 1.0.15（2023-12-20）
+1. 优化
+## 1.0.14（2023-12-06）
+1. 优化
+## 1.0.13（2023-12-06）
+1. 阻止事件冒泡处理
+## 1.0.12（2023-10-19）
+1. 增加后置插槽
+## 1.0.11（2023-09-21）
+1. 修复通过customStyle修改按钮宽度，组件中最外层节点不改变的问题
+## 1.0.10（2023-09-15）
+1. 按钮支持open-type="agreePrivacyAuthorization"
+## 1.0.9（2023-09-11）
+1. 增加参数iconSize，用于控制图标的大小
+## 1.0.8（2023-09-10）
+1. 修复多个按钮在一行宽度不正常的BUG
+## 1.0.7（2023-09-07）
+1. 修复warning颜色对应错误的BUG
+## 1.0.6（2023-07-25）
+1. 增加customTextStyle属性，方便自定义文字样式
+## 1.0.5（2023-07-20）
+1. 解决微信小程序动态设置hover-class点击态不消失的BUG
+## 1.0.4（2023-06-29）
+1. 修改上次更新出现nvue报错异常
+## 1.0.3（2023-06-28）
+ 修复：设置open-type="chooseAvatar"等值不生效的BUG
+## 1.0.2（2023-06-01）
+1. 修复按钮点击触发两次的BUG
+## 1.0.1（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.0（2023-05-10）
+uv-button 按钮

uni_modules/uv-button/components/uv-button/nvue.scss

@@ -0,0 +1,46 @@
+$uv-button-active-opacity:0.75 !default;
+$uv-button-loading-text-margin-left:4px !default;
+$uv-button-text-color: #FFFFFF !default;
+$uv-button-text-plain-error-color:$uv-error !default;
+$uv-button-text-plain-warning-color:$uv-warning !default;
+$uv-button-text-plain-success-color:$uv-success !default;
+$uv-button-text-plain-info-color:$uv-info !default;
+$uv-button-text-plain-primary-color:$uv-primary !default;
+.uv-button {
+	&--active {
+		opacity: $uv-button-active-opacity;
+	}
+	
+	&--active--plain {
+		background-color: rgb(217, 217, 217);
+	}
+	
+	&__loading-text {
+		margin-left:$uv-button-loading-text-margin-left;
+	}
+	
+	&__text,
+	&__loading-text {
+		color:$uv-button-text-color;
+	}
+	
+	&__text--plain--error {
+		color:$uv-button-text-plain-error-color;
+	}
+	
+	&__text--plain--warning {
+		color:$uv-button-text-plain-warning-color;
+	}
+	
+	&__text--plain--success{
+		color:$uv-button-text-plain-success-color;
+	}
+	
+	&__text--plain--info {
+		color:$uv-button-text-plain-info-color;
+	}
+	
+	&__text--plain--primary {
+		color:$uv-button-text-plain-primary-color;
+	}
+}

uni_modules/uv-button/components/uv-button/props.js

@@ -0,0 +1,163 @@
+export default {
+	props: {
+		// 是否细边框
+		hairline: {
+			type: Boolean,
+			default: true
+		},
+		// 按钮的预置样式，info，primary，error，warning，success
+		type: {
+			type: String,
+			default: 'info'
+		},
+		// 按钮尺寸，large，normal，small，mini
+		size: {
+			type: String,
+			default: 'normal'
+		},
+		// 按钮形状，circle（两边为半圆），square（带圆角）
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 按钮是否镂空
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁止状态
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否加载中
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 加载中提示文字
+		loadingText: {
+			type: [String, Number],
+			default: ''
+		},
+		// 加载状态图标类型
+		loadingMode: {
+			type: String,
+			default: 'spinner'
+		},
+		// 加载图标大小
+		loadingSize: {
+			type: [String, Number],
+			default: 14
+		},
+		// 开放能力，具体请看uniapp稳定关于button组件部分说明
+		// https://uniapp.dcloud.io/component/button
+		openType: {
+			type: String,
+			default: ''
+		},
+		// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+		// 取值为submit（提交表单），reset（重置表单）
+		formType: {
+			type: String,
+			default: ''
+		},
+		// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+		// 只微信小程序、QQ小程序有效
+		appParameter: {
+			type: String,
+			default: ''
+		},
+		// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+		hoverStopPropagation: {
+			type: Boolean,
+			default: true
+		},
+		// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+		lang: {
+			type: String,
+			default: 'en'
+		},
+		// 会话来源，open-type="contact"时有效。只微信小程序有效
+		sessionFrom: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片标题，open-type="contact"时有效
+		// 默认当前标题，只微信小程序有效
+		sendMessageTitle: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+		// 默认当前分享路径，只微信小程序有效
+		sendMessagePath: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片图片，open-type="contact"时有效
+		// 默认当前页面截图，只微信小程序有效
+		sendMessageImg: {
+			type: String,
+			default: ''
+		},
+		// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+		// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+		showMessageCard: {
+			type: Boolean,
+			default: true
+		},
+		// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+		dataName: {
+			type: String,
+			default: ''
+		},
+		// 节流，一定时间内只能触发一次
+		throttleTime: {
+			type: [String, Number],
+			default: 0
+		},
+		// 按住后多久出现点击态，单位毫秒
+		hoverStartTime: {
+			type: [String, Number],
+			default: 0
+		},
+		// 手指松开后点击态保留时间，单位毫秒
+		hoverStayTime: {
+			type: [String, Number],
+			default: 200
+		},
+		// 按钮文字，之所以通过props传入，是因为slot传入的话
+		// nvue中无法控制文字的样式
+		text: {
+			type: [String, Number],
+			default: ''
+		},
+		// 按钮图标
+		icon: {
+			type: String,
+			default: ''
+		},
+		// 按钮图标大小
+		iconSize: {
+			type: [String, Number],
+			default: ''
+		},
+		// 按钮图标颜色
+		iconColor: {
+			type: String,
+			default: '#000000'
+		},
+		// 按钮颜色，支持传入linear-gradient渐变色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 自定义按钮文本样式
+		customTextStyle: {
+			type: [Object,String],
+			default: ''
+		},
+		...uni.$uv?.props?.button
+	}
+}

uni_modules/uv-button/components/uv-button/uv-button.vue

@@ -0,0 +1,528 @@
+<template>
+	<view 
+		class="uv-button-wrapper"
+		:style="[btnWrapperStyle]"
+	>
+    <!-- #ifndef APP-NVUE -->
+		<!-- #ifdef MP -->
+		<!-- 为了解决微信小程序动态设置hover-class点击态不消失的BUG -->
+		<view class="uv-button-wrapper--dis" v-if="disabled || loading"></view>
+		<button
+		  :hover-start-time="Number(hoverStartTime)"
+		  :hover-stay-time="Number(hoverStayTime)"
+		  :form-type="formType"
+		  :open-type="openType"
+		  :app-parameter="appParameter"
+		  :hover-stop-propagation="hoverStopPropagation"
+		  :send-message-title="sendMessageTitle"
+		  :send-message-path="sendMessagePath"
+		  :lang="lang"
+		  :data-name="dataName"
+		  :session-from="sessionFrom"
+		  :send-message-img="sendMessageImg"
+		  :show-message-card="showMessageCard"
+		  @getphonenumber="onGetPhoneNumber"
+		  @getuserinfo="onGetUserInfo"
+		  @error="onError"
+		  @opensetting="onOpenSetting"
+		  @launchapp="onLaunchApp"
+			@contact="onContact"
+			@chooseavatar="onChooseavatar"
+			@agreeprivacyauthorization="onAgreeprivacyauthorization"
+			@addgroupapp="onAddgroupapp"
+			@chooseaddress="onChooseaddress"
+			@subscribe="onSubscribe"
+			@login="onLogin"
+			@im="onIm"
+		  hover-class="uv-button--active"
+		  class="uv-button uv-reset-button"
+		  :style="[baseColor, $uv.addStyle(customStyle)]"
+		  @tap="clickHandler"
+		  :class="bemClass"
+		>
+		<!-- #endif -->
+    <!-- #ifndef MP -->
+    <button
+      :hover-start-time="Number(hoverStartTime)"
+      :hover-stay-time="Number(hoverStayTime)"
+      :form-type="formType"
+      :open-type="openType"
+      :app-parameter="appParameter"
+      :hover-stop-propagation="hoverStopPropagation"
+      :send-message-title="sendMessageTitle"
+      :send-message-path="sendMessagePath"
+      :lang="lang"
+      :data-name="dataName"
+      :session-from="sessionFrom"
+      :send-message-img="sendMessageImg"
+      :show-message-card="showMessageCard"
+      :hover-class="!disabled && !loading ? 'uv-button--active' : ''"
+      class="uv-button uv-reset-button"
+      :style="[baseColor, $uv.addStyle(customStyle)]"
+      @tap="clickHandler"
+      :class="bemClass"
+    >
+    <!-- #endif -->
+      <template v-if="loading">
+        <uv-loading-icon
+          :mode="loadingMode"
+          :size="loadingSize * 1.15"
+          :color="loadingColor"
+        ></uv-loading-icon>
+          <text
+            class="uv-button__loading-text"
+            :style="[
+							{ fontSize: textSize + 'px' },
+							$uv.addStyle(customTextStyle)
+						]"
+          >{{ loadingText || text }}</text>
+      </template>
+      <template v-else>
+        <uv-icon
+          v-if="icon"
+          :name="icon"
+          :color="iconColorCom"
+          :size="getIconSize"
+          :customStyle="{ marginRight: '2px' }"
+        ></uv-icon>
+        <slot>
+          <text
+            class="uv-button__text"
+            :style="[
+							{ fontSize: textSize + 'px' },
+							$uv.addStyle(customTextStyle)
+						]"
+            >{{ text }}</text>
+        </slot>
+				<slot name="suffix"></slot>
+      </template>
+    </button>
+    <!-- #endif -->
+    <!-- #ifdef APP-NVUE -->
+    <view
+      :hover-start-time="Number(hoverStartTime)"
+      :hover-stay-time="Number(hoverStayTime)"
+      class="uv-button"
+      :hover-class="
+        !disabled && !loading && !color && (plain || type === 'info')
+          ? 'uv-button--active--plain'
+          : !disabled && !loading && !plain
+          ? 'uv-button--active'
+          : ''
+      "
+      @tap="clickHandler"
+      :class="bemClass"
+      :style="[baseColor, $uv.addStyle(customStyle)]"
+    >
+      <template v-if="loading">
+        <uv-loading-icon
+          :mode="loadingMode"
+          :size="loadingSize * 1.15"
+          :color="loadingColor"
+        ></uv-loading-icon>
+        <text
+          class="uv-button__loading-text"
+          :style="[nvueTextStyle,$uv.addStyle(customTextStyle)]"
+          :class="[plain && `uv-button__text--plain--${type}`]"
+          >{{ loadingText || text }}</text>
+      </template>
+      <template v-else>
+        <uv-icon
+          v-if="icon"
+          :name="icon"
+          :color="iconColorCom"
+          :size="getIconSize"
+        ></uv-icon>
+        <text
+          class="uv-button__text"
+          :style="[
+            {
+              marginLeft: icon ? '2px' : 0,
+            },
+            nvueTextStyle,
+						$uv.addStyle(customTextStyle)
+          ]"
+          :class="[plain && `uv-button__text--plain--${type}`]"
+          >{{ text }}</text>
+				<slot name="suffix"></slot>
+      </template>
+    </view>
+    <!-- #endif -->
+	</view>
+</template>
+
+<script>
+import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
+import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+import button from '@/uni_modules/uv-ui-tools/libs/mixin/button.js'
+import openType from '@/uni_modules/uv-ui-tools/libs/mixin/openType.js'
+import props from "./props.js";
+/**
+ * button 按钮
+ * @description Button 按钮
+ * @tutorial https://www.uvui.cn/components/button.html
+ * @property {Boolean}			hairline				是否显示按钮的细边框 (默认 true )
+ * @property {String}			type					按钮的预置样式，info，primary，error，warning，success (默认 'info' )
+ * @property {String}			size					按钮尺寸，large，normal，mini （默认 normal）
+ * @property {String}			shape					按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
+ * @property {Boolean}			plain					按钮是否镂空，背景色透明 （默认 false）
+ * @property {Boolean}			disabled				是否禁用 （默认 false）
+ * @property {Boolean}			loading					按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
+ * @property {String | Number}	loadingText				加载中提示文字
+ * @property {String}			loadingMode				加载状态图标类型 （默认 'spinner' ）
+ * @property {String | Number}	loadingSize				加载图标大小 （默认 15 ）
+ * @property {String}			openType				开放能力，具体请看uniapp稳定关于button组件部分说明
+ * @property {String}			formType				用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ * @property {String}			appParameter			打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
+ * @property {Boolean}			hoverStopPropagation	指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
+ * @property {String}			lang					指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
+ * @property {String}			sessionFrom				会话来源，openType="contact"时有效
+ * @property {String}			sendMessageTitle		会话内消息卡片标题，openType="contact"时有效
+ * @property {String}			sendMessagePath			会话内消息卡片点击跳转小程序路径，openType="contact"时有效
+ * @property {String}			sendMessageImg			会话内消息卡片图片，openType="contact"时有效
+ * @property {Boolean}			showMessageCard			是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
+ * @property {String}			dataName				额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ * @property {String | Number}	throttleTime			节流，一定时间内只能触发一次 （默认 0 )
+ * @property {String | Number}	hoverStartTime			按住后多久出现点击态，单位毫秒 （默认 0 )
+ * @property {String | Number}	hoverStayTime			手指松开后点击态保留时间，单位毫秒 （默认 200 )
+ * @property {String | Number}	text					按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
+ * @property {String}			icon					按钮图标
+ * @property {String}			iconColor				按钮图标颜色
+ * @property {String}			color					按钮颜色，支持传入linear-gradient渐变色
+ * @property {Object}			customStyle				定义需要用到的外部样式
+ * @event {Function}	click			非禁止并且非加载中，才能点击
+ * @event {Function}	getphonenumber	open-type="getPhoneNumber"时有效
+ * @event {Function}	getuserinfo		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
+ * @event {Function}	error			当使用开放能力时，发生错误的回调
+ * @event {Function}	opensetting		在打开授权设置页并关闭后回调
+ * @event {Function}	launchapp		打开 APP 成功的回调
+ * @example <uv-button>月落</uv-button>
+ */
+export default {
+		name: "uv-button",
+		// #ifdef MP
+		mixins: [mpMixin, mixin, button, openType, props],
+		// #endif
+		// #ifndef MP
+		mixins: [mpMixin, mixin, props],
+		// #endif
+		emits: ['click'],
+		data() {
+			return {};
+		},
+		computed: {
+			// 生成bem风格的类名
+			bemClass() {
+				// this.bem为一个computed变量，在mixin中
+				if (!this.color) {
+					return this.bem("button",
+						["type", "shape", "size"],
+						["disabled", "plain", "hairline"]);
+				} else {
+					// 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
+					return this.bem("button",
+						["shape", "size"],
+						["disabled", "plain", "hairline"]);
+				}
+			},
+			loadingColor() {
+				if (this.plain) {
+					// 如果有设置color值，则用color值，否则使用type主题颜色
+					return this.color ? this.color : '#3c9cff';
+				}
+				if (this.type === "info") {
+					return "#c9c9c9";
+				}
+				return "rgb(200, 200, 200)";
+			},
+			iconColorCom() {
+				// 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
+				// uv-icon的color能接受一个主题颜色的值
+				if (this.iconColor) return this.iconColor;
+				if (this.plain) {
+					return this.color ? this.color : this.type;
+				} else {
+					return this.type === "info" ? "#000000" : "#ffffff";
+				}
+			},
+			baseColor() {
+				let style = {};
+				if (this.color) {
+					// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+					style.color = this.plain ? this.color : "white";
+					if (!this.plain) {
+						// 非镂空，背景色使用自定义的颜色
+						style["background-color"] = this.color;
+					}
+					if (this.color.indexOf("gradient") !== -1) {
+						// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
+						// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
+						// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
+						style.borderTopWidth = 0;
+						style.borderRightWidth = 0;
+						style.borderBottomWidth = 0;
+						style.borderLeftWidth = 0;
+						if (!this.plain) {
+							style.backgroundImage = this.color;
+						}
+					} else {
+						// 非渐变色，则设置边框相关的属性
+						style.borderColor = this.color;
+						style.borderWidth = "1px";
+						style.borderStyle = "solid";
+					}
+				}
+				return style;
+			},
+			// nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
+			nvueTextStyle() {
+				let style = {};
+				// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+				if (this.type === "info") {
+					style.color = "#323233";
+				}
+				if (this.color) {
+					style.color = this.plain ? this.color : "white";
+				}
+				style.fontSize = this.textSize + "px";
+				return style;
+			},
+			// 字体大小
+			textSize() {
+				let fontSize = 14,
+					{ size } = this;
+				if (size === "large") fontSize = 16;
+				if (size === "normal") fontSize = 14;
+				if (size === "small") fontSize = 12;
+				if (size === "mini") fontSize = 10;
+				return fontSize;
+			},
+			// 设置图标大小
+			getIconSize() {
+				const size = this.iconSize ? this.iconSize : this.textSize * 1.35;
+				return this.$uv.addUnit(size);
+			},
+			// 设置外层盒子的宽度，其他样式不需要
+			btnWrapperStyle() {
+				const style = {};
+				const customStyle = this.$uv.addStyle(this.customStyle);
+				if(customStyle.width) style.width = customStyle.width;
+				return style;
+			}
+		},
+		methods: {
+			clickHandler() {
+				// 非禁止并且非加载中，才能点击
+				if (!this.disabled && !this.loading) {
+					// 进行节流控制，每this.throttle毫秒内，只在开始处执行
+					throttle(() => {
+						this.$emit("click");
+					}, this.throttleTime);
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+$show-reset-button: 1;
+@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
+@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
+
+/* #ifndef APP-NVUE */
+@import "./vue.scss";
+/* #endif */
+
+/* #ifdef APP-NVUE */
+@import "./nvue.scss";
+/* #endif */
+
+$uv-button-uv-button-height: 40px !default;
+$uv-button-text-font-size: 15px !default;
+$uv-button-loading-text-font-size: 15px !default;
+$uv-button-loading-text-margin-left: 4px !default;
+$uv-button-large-width: 100% !default;
+$uv-button-large-height: 50px !default;
+$uv-button-normal-padding: 0 12px !default;
+$uv-button-large-padding: 0 15px !default;
+$uv-button-normal-font-size: 14px !default;
+$uv-button-small-min-width: 60px !default;
+$uv-button-small-height: 30px !default;
+$uv-button-small-padding: 0px 8px !default;
+$uv-button-mini-padding: 0px 8px !default;
+$uv-button-small-font-size: 12px !default;
+$uv-button-mini-height: 22px !default;
+$uv-button-mini-font-size: 10px !default;
+$uv-button-mini-min-width: 50px !default;
+$uv-button-disabled-opacity: 0.5 !default;
+$uv-button-info-color: #323233 !default;
+$uv-button-info-background-color: #fff !default;
+$uv-button-info-border-color: #ebedf0 !default;
+$uv-button-info-border-width: 1px !default;
+$uv-button-info-border-style: solid !default;
+$uv-button-success-color: #fff !default;
+$uv-button-success-background-color: $uv-success !default;
+$uv-button-success-border-color: $uv-button-success-background-color !default;
+$uv-button-success-border-width: 1px !default;
+$uv-button-success-border-style: solid !default;
+$uv-button-primary-color: #fff !default;
+$uv-button-primary-background-color: $uv-primary !default;
+$uv-button-primary-border-color: $uv-button-primary-background-color !default;
+$uv-button-primary-border-width: 1px !default;
+$uv-button-primary-border-style: solid !default;
+$uv-button-error-color: #fff !default;
+$uv-button-error-background-color: $uv-error !default;
+$uv-button-error-border-color: $uv-button-error-background-color !default;
+$uv-button-error-border-width: 1px !default;
+$uv-button-error-border-style: solid !default;
+$uv-button-warning-color: #fff !default;
+$uv-button-warning-background-color: $uv-warning !default;
+$uv-button-warning-border-color: $uv-button-warning-background-color !default;
+$uv-button-warning-border-width: 1px !default;
+$uv-button-warning-border-style: solid !default;
+$uv-button-block-width: 100% !default;
+$uv-button-circle-border-top-right-radius: 100px !default;
+$uv-button-circle-border-top-left-radius: 100px !default;
+$uv-button-circle-border-bottom-left-radius: 100px !default;
+$uv-button-circle-border-bottom-right-radius: 100px !default;
+$uv-button-square-border-top-right-radius: 3px !default;
+$uv-button-square-border-top-left-radius: 3px !default;
+$uv-button-square-border-bottom-left-radius: 3px !default;
+$uv-button-square-border-bottom-right-radius: 3px !default;
+$uv-button-icon-min-width: 1em !default;
+$uv-button-plain-background-color: #fff !default;
+$uv-button-hairline-border-width: 0.5px !default;
+
+.uv-button {
+    height: $uv-button-uv-button-height;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    @include flex;
+    /* #ifndef APP-NVUE */
+    box-sizing: border-box;
+    /* #endif */
+    flex-direction: row;
+
+    &__text {
+        font-size: $uv-button-text-font-size;
+    }
+
+    &__loading-text {
+        font-size: $uv-button-loading-text-font-size;
+        margin-left: $uv-button-loading-text-margin-left;
+    }
+
+    &--large {
+        /* #ifndef APP-NVUE */
+        width: $uv-button-large-width;
+        /* #endif */
+        height: $uv-button-large-height;
+        padding: $uv-button-large-padding;
+    }
+
+    &--normal {
+        padding: $uv-button-normal-padding;
+        font-size: $uv-button-normal-font-size;
+    }
+
+    &--small {
+        /* #ifndef APP-NVUE */
+        min-width: $uv-button-small-min-width;
+        /* #endif */
+        height: $uv-button-small-height;
+        padding: $uv-button-small-padding;
+        font-size: $uv-button-small-font-size;
+    }
+
+    &--mini {
+        height: $uv-button-mini-height;
+        font-size: $uv-button-mini-font-size;
+        /* #ifndef APP-NVUE */
+        min-width: $uv-button-mini-min-width;
+        /* #endif */
+        padding: $uv-button-mini-padding;
+    }
+
+    &--disabled {
+        opacity: $uv-button-disabled-opacity;
+    }
+
+    &--info {
+        color: $uv-button-info-color;
+        background-color: $uv-button-info-background-color;
+        border-color: $uv-button-info-border-color;
+        border-width: $uv-button-info-border-width;
+        border-style: $uv-button-info-border-style;
+    }
+
+    &--success {
+        color: $uv-button-success-color;
+        background-color: $uv-button-success-background-color;
+        border-color: $uv-button-success-border-color;
+        border-width: $uv-button-success-border-width;
+        border-style: $uv-button-success-border-style;
+    }
+
+    &--primary {
+        color: $uv-button-primary-color;
+        background-color: $uv-button-primary-background-color;
+        border-color: $uv-button-primary-border-color;
+        border-width: $uv-button-primary-border-width;
+        border-style: $uv-button-primary-border-style;
+    }
+
+    &--error {
+        color: $uv-button-error-color;
+        background-color: $uv-button-error-background-color;
+        border-color: $uv-button-error-border-color;
+        border-width: $uv-button-error-border-width;
+        border-style: $uv-button-error-border-style;
+    }
+
+    &--warning {
+        color: $uv-button-warning-color;
+        background-color: $uv-button-warning-background-color;
+        border-color: $uv-button-warning-border-color;
+        border-width: $uv-button-warning-border-width;
+        border-style: $uv-button-warning-border-style;
+    }
+
+    &--block {
+        @include flex;
+        width: $uv-button-block-width;
+    }
+
+    &--circle {
+        border-top-right-radius: $uv-button-circle-border-top-right-radius;
+        border-top-left-radius: $uv-button-circle-border-top-left-radius;
+        border-bottom-left-radius: $uv-button-circle-border-bottom-left-radius;
+        border-bottom-right-radius: $uv-button-circle-border-bottom-right-radius;
+    }
+
+    &--square {
+        border-bottom-left-radius: $uv-button-square-border-top-right-radius;
+        border-bottom-right-radius: $uv-button-square-border-top-left-radius;
+        border-top-left-radius: $uv-button-square-border-bottom-left-radius;
+        border-top-right-radius: $uv-button-square-border-bottom-right-radius;
+    }
+
+    &__icon {
+        /* #ifndef APP-NVUE */
+        min-width: $uv-button-icon-min-width;
+        line-height: inherit !important;
+        vertical-align: top;
+        /* #endif */
+    }
+
+    &--plain {
+        background-color: $uv-button-plain-background-color;
+    }
+
+    &--hairline {
+        border-width: $uv-button-hairline-border-width !important;
+    }
+}
+</style>

uni_modules/uv-button/components/uv-button/vue.scss

@@ -0,0 +1,93 @@
+@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
+// nvue下hover-class无效
+$uv-button-before-top:50% !default;
+$uv-button-before-left:50% !default;
+$uv-button-before-width:100% !default;
+$uv-button-before-height:100% !default;
+$uv-button-before-transform:translate(-50%, -50%) !default;
+$uv-button-before-opacity:0 !default;
+$uv-button-before-background-color:#000 !default;
+$uv-button-before-border-color:#000 !default;
+$uv-button-active-before-opacity:.15 !default;
+$uv-button-icon-margin-left:4px !default;
+$uv-button-plain-uv-button-info-color:$uv-info;
+$uv-button-plain-uv-button-success-color:$uv-success;
+$uv-button-plain-uv-button-error-color:$uv-error;
+$uv-button-plain-uv-button-warning-color:$uv-warning;
+
+.uv-button-wrapper {
+	position: relative;
+	&--dis {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 9;
+	}
+}
+
+.uv-button {
+	width: 100%;
+	
+	&__text {
+		white-space: nowrap;
+		line-height: 1;
+	}
+	
+	&:before {
+		position: absolute;
+		top:$uv-button-before-top;
+		left:$uv-button-before-left;
+		width:$uv-button-before-width;
+		height:$uv-button-before-height;
+		border: inherit;
+		border-radius: inherit;
+		transform:$uv-button-before-transform;
+		opacity:$uv-button-before-opacity;
+		content: " ";
+		background-color:$uv-button-before-background-color;
+		border-color:$uv-button-before-border-color;
+	}
+	
+	&--active {
+		&:before {
+			opacity: .15
+		}
+	}
+	
+	&__icon+&__text:not(:empty),
+	&__loading-text {
+		margin-left:$uv-button-icon-margin-left;
+	}
+	
+	&--plain {
+		&.uv-button--primary {
+			color: $uv-primary;
+		}
+	}
+	
+	&--plain {
+		&.uv-button--info {
+			color:$uv-button-plain-uv-button-info-color;
+		}
+	}
+	
+	&--plain {
+		&.uv-button--success {
+			color:$uv-button-plain-uv-button-success-color;
+		}
+	}
+	
+	&--plain {
+		&.uv-button--error {
+			color:$uv-button-plain-uv-button-error-color;
+		}
+	}
+	
+	&--plain {
+		&.uv-button--warning {
+			color:$uv-button-plain-uv-button-warning-color;
+		}
+	}
+}

uni_modules/uv-button/package.json

@@ -0,0 +1,89 @@
+{
+	"id": "uv-button",
+	"displayName": "uv-button 按钮 全面兼容vue3+2、app、h5、小程序等多端",
+	"version": "1.0.15",
+	"description": "按钮组件内部实现以uni-app的button组件为基础，进行二次封装，灵活配置，功能齐全，兼容全端。",
+	"keywords": [
+        "uv-button",
+        "uvui",
+        "uv-ui",
+        "button",
+        "按钮"
+    ],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.1.0"
+	},
+	"dcloudext": {
+		"type": "component-vue",
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "插件不采集任何数据",
+			"permissions": "无"
+		},
+		"npmurl": ""
+	},
+	"uni_modules": {
+		"dependencies": [
+			"uv-ui-tools",
+			"uv-loading-icon",
+			"uv-icon"
+		],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "y"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
+}

uni_modules/uv-button/readme.md

@@ -0,0 +1,19 @@
+## Button 按钮
+
+> **组件名：uv-button**
+
+该组件内部实现以`uni-app`的`button`组件为基础，进行二次封装，灵活配置，功能齐全，兼容全端。灵活配置，内置状态设置，开箱即用。
+
+# <a href="https://www.uvui.cn/components/button.html" target="_blank">查看文档</a>
+
+## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
+
+### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
+
+![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
+
+</a>
+
+#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>

uni_modules/uv-loading-icon/changelog.md

@@ -0,0 +1,9 @@
+## 1.0.3（2023-08-14）
+1. 新增参数textStyle，自定义文本样式
+## 1.0.2（2023-06-27）
+优化
+## 1.0.1（2023-05-16）
+1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
+2. 优化部分功能
+## 1.0.0（2023-05-10）
+1. 新增uv-loading-icon组件

uni_modules/uv-loading-icon/components/uv-loading-icon/props.js

@@ -0,0 +1,67 @@
+export default {
+	props: {
+		// 是否显示组件
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 颜色
+		color: {
+			type: String,
+			default: '#909193'
+		},
+		// 提示文字颜色
+		textColor: {
+			type: String,
+			default: '#909193'
+		},
+		// 文字和图标是否垂直排列
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		// 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形
+		mode: {
+			type: String,
+			default: 'spinner'
+		},
+		// 图标大小，单位默认px
+		size: {
+			type: [String, Number],
+			default: 24
+		},
+		// 文字大小
+		textSize: {
+			type: [String, Number],
+			default: 15
+		},
+		// 文字样式
+		textStyle: {
+			type: Object,
+			default () {
+				return {}
+			}
+		},
+		// 文字内容
+		text: {
+			type: [String, Number],
+			default: ''
+		},
+		// 动画模式 https://www.runoob.com/cssref/css3-pr-animation-timing-function.html
+		timingFunction: {
+			type: String,
+			default: 'linear'
+		},
+		// 动画执行周期时间
+		duration: {
+			type: [String, Number],
+			default: 1200
+		},
+		// mode=circle时的暗边颜色
+		inactiveColor: {
+			type: String,
+			default: ''
+		},
+		...uni.$uv?.props?.loadingIcon
+	}
+}

uni_modules/uv-loading-icon/components/uv-loading-icon/uv-loading-icon.vue

@@ -0,0 +1,347 @@
+<template>
+	<view
+		class="uv-loading-icon"
+		:style="[$uv.addStyle(customStyle)]"
+		:class="[vertical && 'uv-loading-icon--vertical']"
+		v-if="show"
+	>
+		<view
+			v-if="!webviewHide"
+			class="uv-loading-icon__spinner"
+			:class="[`uv-loading-icon__spinner--${mode}`]"
+			ref="ani"
+			:style="{
+				color: color,
+				width: $uv.addUnit(size),
+				height: $uv.addUnit(size),
+				borderTopColor: color,
+				borderBottomColor: otherBorderColor,
+				borderLeftColor: otherBorderColor,
+				borderRightColor: otherBorderColor,
+				'animation-duration': `${duration}ms`,
+				'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
+			}"
+		>
+			<block v-if="mode === 'spinner'">
+				<!-- #ifndef APP-NVUE -->
+				<view
+					v-for="(item, index) in array12"
+					:key="index"
+					class="uv-loading-icon__dot"
+				>
+				</view>
+				<!-- #endif -->
+				<!-- #ifdef APP-NVUE -->
+				<!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
+				<loading-indicator
+					v-if="!webviewHide"
+					class="uv-loading-indicator"
+					:animating="true"
+					:style="{
+						color: color,
+						width: $uv.addUnit(size),
+						height: $uv.addUnit(size)
+					}"
+				/>
+				<!-- #endif -->
+			</block>
+		</view>
+		<text
+			v-if="text"
+			class="uv-loading-icon__text"
+			:style="[{
+				fontSize: $uv.addUnit(textSize),
+				color: textColor,
+			},$uv.addStyle(textStyle)]"
+		>{{text}}</text>
+	</view>
+</template>
+
+<script>
+	import { colorGradient } from '@/uni_modules/uv-ui-tools/libs/function/colorGradient.js'
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const animation = weex.requireModule('animation');
+	// #endif
+	/**
+	 * loading 加载动画
+	 * @description 警此组件为一个小动画，目前用在uvui的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://www.uvui.cn/components/loading.html
+	 * @property {Boolean}			show			是否显示组件  (默认 true)
+	 * @property {String}			color			动画活动区域的颜色，只对 mode = flower 模式有效（默认#909193）
+	 * @property {String}			textColor		提示文本的颜色（默认#909193）
+	 * @property {Boolean}			vertical		文字和图标是否垂直排列 (默认 false )
+	 * @property {String}			mode			模式选择，见官网说明（默认 'circle' ）
+	 * @property {String | Number}	size			加载图标的大小，单位px （默认 24 ）
+	 * @property {String | Number}	textSize		文字大小（默认 15 ）
+	 * @property {String | Number}	text			文字内容 
+	 * @property {Object}	textStyle 文字样式
+	 * @property {String}			timingFunction	动画模式 （默认 'ease-in-out' ）
+	 * @property {String | Number}	duration		动画执行周期时间（默认 1200）
+	 * @property {String}			inactiveColor	mode=circle时的暗边颜色 
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @example <uv-loading mode="circle"></uv-loading>
+	 */
+	export default {
+		name: 'uv-loading-icon',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// Array.form可以通过一个伪数组对象创建指定长度的数组
+				// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
+				array12: Array.from({
+					length: 12
+				}),
+				// 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
+				// 在iOS nvue上，则会一开始默认执行两个周期的动画
+				aniAngel: 360, // 动画旋转角度
+				webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
+				loading: false, // 是否运行中，针对nvue使用
+			}
+		},
+		computed: {
+			// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
+			// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
+			// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
+			otherBorderColor() {
+				const lightColor = colorGradient(this.color, '#ffffff', 100)[80]
+				if (this.mode === 'circle') {
+					return this.inactiveColor ? this.inactiveColor : lightColor
+				} else {
+					return 'transparent'
+				}
+			}
+		},
+		watch: {
+			show(n) {
+				// nvue中，show为true，且为非loading状态，就重新执行动画模块
+				// #ifdef APP-NVUE
+				if (n && !this.loading) {
+					setTimeout(() => {
+						this.startAnimate()
+					}, 30)
+				}
+				// #endif
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				setTimeout(() => {
+					// #ifdef APP-NVUE
+					this.show && this.nvueAnimate()
+					// #endif
+					// #ifdef APP-PLUS 
+					this.show && this.addEventListenerToWebview()
+					// #endif
+				}, 20)
+			},
+			// 监听webview的显示与隐藏
+			addEventListenerToWebview() {
+				// webview的堆栈
+				const pages = getCurrentPages()
+				// 当前页面
+				const page = pages[pages.length - 1]
+				// 当前页面的webview实例
+				const currentWebview = page.$getAppWebview()
+				// 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+				currentWebview.addEventListener('hide', () => {
+					this.webviewHide = true
+				})
+				currentWebview.addEventListener('show', () => {
+					this.webviewHide = false
+				})
+			},
+			// #ifdef APP-NVUE
+			nvueAnimate() {
+				// nvue下，非spinner类型时才需要旋转，因为nvue的spinner类型，使用了weex的
+				// loading-indicator组件，自带旋转功能
+				this.mode !== 'spinner' && this.startAnimate()
+			},
+			// 执行nvue的animate模块动画
+			startAnimate() {
+				this.loading = true
+				const ani = this.$refs.ani
+				if (!ani) return
+				animation.transition(ani, {
+					// 进行角度旋转
+					styles: {
+						transform: `rotate(${this.aniAngel}deg)`,
+						transformOrigin: 'center center'
+					},
+					duration: this.duration,
+					timingFunction: this.timingFunction,
+					// delay: 10
+				}, () => {
+					// 每次增加360deg，为了让其重新旋转一周
+					this.aniAngel += 360
+					// 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
+					// nvue安卓，页面隐藏后依然会继续执行startAnimate方法
+					this.show && !this.webviewHide ? this.startAnimate() : this.loading = false
+				})
+			}
+			// #endif
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
+	$uv-loading-icon-color: #c8c9cc !default;
+	$uv-loading-icon-text-margin-left:4px !default;
+	$uv-loading-icon-text-color:$uv-content-color !default;
+	$uv-loading-icon-text-font-size:14px !default;
+	$uv-loading-icon-text-line-height:20px !default;
+	$uv-loading-width:30px !default;
+	$uv-loading-height:30px !default;
+	$uv-loading-max-width:100% !default;
+	$uv-loading-max-height:100% !default;
+	$uv-loading-semicircle-border-width: 2px !default;
+	$uv-loading-semicircle-border-color:transparent !default;
+	$uv-loading-semicircle-border-top-right-radius: 100px !default;
+	$uv-loading-semicircle-border-top-left-radius: 100px !default;
+	$uv-loading-semicircle-border-bottom-left-radius: 100px !default;
+	$uv-loading-semicircle-border-bottom-right-radiu: 100px !default;
+	$uv-loading-semicircle-border-style: solid !default;
+	$uv-loading-circle-border-top-right-radius: 100px !default;
+	$uv-loading-circle-border-top-left-radius: 100px !default;
+	$uv-loading-circle-border-bottom-left-radius: 100px !default;
+	$uv-loading-circle-border-bottom-right-radiu: 100px !default;
+	$uv-loading-circle-border-width:2px !default;
+	$uv-loading-circle-border-top-color:#e5e5e5 !default;
+	$uv-loading-circle-border-right-color:$uv-loading-circle-border-top-color !default;
+	$uv-loading-circle-border-bottom-color:$uv-loading-circle-border-top-color !default;
+	$uv-loading-circle-border-left-color:$uv-loading-circle-border-top-color !default;
+	$uv-loading-circle-border-style:solid !default;
+	$uv-loading-icon-host-font-size:0px !default;
+	$uv-loading-icon-host-line-height:1 !default;
+	$uv-loading-icon-vertical-margin:6px 0 0 !default;
+	$uv-loading-icon-dot-top:0 !default;
+	$uv-loading-icon-dot-left:0 !default;
+	$uv-loading-icon-dot-width:100% !default;
+	$uv-loading-icon-dot-height:100% !default;
+	$uv-loading-icon-dot-before-width:2px !default;
+	$uv-loading-icon-dot-before-height:25% !default;
+	$uv-loading-icon-dot-before-margin:0 auto !default;
+	$uv-loading-icon-dot-before-background-color:currentColor !default;
+	$uv-loading-icon-dot-before-border-radius:40% !default;
+
+	.uv-loading-icon {
+		/* #ifndef APP-NVUE */
+		// display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		color: $uv-loading-icon-color;
+
+		&__text {
+			margin-left: $uv-loading-icon-text-margin-left;
+			color: $uv-loading-icon-text-color;
+			font-size: $uv-loading-icon-text-font-size;
+			line-height: $uv-loading-icon-text-line-height;
+		}
+
+		&__spinner {
+			width: $uv-loading-width;
+			height: $uv-loading-height;
+			position: relative;
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			max-width: $uv-loading-max-width;
+			max-height: $uv-loading-max-height;
+			animation: uv-rotate 1s linear infinite;
+			/* #endif */
+		}
+
+		&__spinner--semicircle {
+			border-width: $uv-loading-semicircle-border-width;
+			border-color: $uv-loading-semicircle-border-color;
+			border-top-right-radius: $uv-loading-semicircle-border-top-right-radius;
+			border-top-left-radius: $uv-loading-semicircle-border-top-left-radius;
+			border-bottom-left-radius: $uv-loading-semicircle-border-bottom-left-radius;
+			border-bottom-right-radius: $uv-loading-semicircle-border-bottom-right-radiu;
+			border-style: $uv-loading-semicircle-border-style;
+		}
+
+		&__spinner--circle {
+			border-top-right-radius: $uv-loading-circle-border-top-right-radius;
+			border-top-left-radius: $uv-loading-circle-border-top-left-radius;
+			border-bottom-left-radius: $uv-loading-circle-border-bottom-left-radius;
+			border-bottom-right-radius: $uv-loading-circle-border-bottom-right-radiu;
+			border-width: $uv-loading-circle-border-width;
+			border-top-color: $uv-loading-circle-border-top-color;
+			border-right-color: $uv-loading-circle-border-right-color;
+			border-bottom-color: $uv-loading-circle-border-bottom-color;
+			border-left-color: $uv-loading-circle-border-left-color;
+			border-style: $uv-loading-circle-border-style;
+		}
+
+		&--vertical {
+			flex-direction: column
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	:host {
+		font-size: $uv-loading-icon-host-font-size;
+		line-height: $uv-loading-icon-host-line-height;
+	}
+
+	.uv-loading-icon {
+		&__spinner--spinner {
+			animation-timing-function: steps(12)
+		}
+
+		&__text:empty {
+			display: none
+		}
+
+		&--vertical &__text {
+			margin: $uv-loading-icon-vertical-margin;
+			color: $uv-content-color;
+		}
+
+		&__dot {
+			position: absolute;
+			top: $uv-loading-icon-dot-top;
+			left: $uv-loading-icon-dot-left;
+			width: $uv-loading-icon-dot-width;
+			height: $uv-loading-icon-dot-height;
+
+			&:before {
+				display: block;
+				width: $uv-loading-icon-dot-before-width;
+				height: $uv-loading-icon-dot-before-height;
+				margin: $uv-loading-icon-dot-before-margin;
+				background-color: $uv-loading-icon-dot-before-background-color;
+				border-radius: $uv-loading-icon-dot-before-border-radius;
+				content: " "
+			}
+		}
+	}
+
+	@for $i from 1 through 12 {
+		.uv-loading-icon__dot:nth-of-type(#{$i}) {
+			transform: rotate($i * 30deg);
+			opacity: 1 - 0.0625 * ($i - 1);
+		}
+	}
+
+	@keyframes uv-rotate {
+		0% {
+			transform: rotate(0deg)
+		}
+
+		to {
+			transform: rotate(1turn)
+		}
+	}
+
+	/* #endif */
+</style>

uni_modules/uv-loading-icon/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uv-loading-icon",
+  "displayName": "uv-loading-icon 加载动画 全面兼容vue3+2、app、h5、小程序等多端",
+  "version": "1.0.3",
+  "description": "此组件为一个小动画，目前用在uv-ui的uv-load-more加载更多等组件，还可以运用在项目中正在加载状态场景。",
+  "keywords": [
+    "uv-loading-icon",
+    "uvui",
+    "uv-ui",
+    "loading",
+    "加载动画"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+    	"ads": "无",
+    	"data": "插件不采集任何数据",
+    	"permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uv-ui-tools"
+		],
+    "encrypt": [],
+    "platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "y"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "y",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "y",
+					"字节跳动": "y",
+					"QQ": "y",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+  }
+}

uni_modules/uv-loading-icon/readme.md

@@ -0,0 +1,19 @@
+## LoadingIcon 加载动画
+
+> **组件名：uv-loading-icon**
+
+此组件为一个小动画，目前用在 `uv-ui` 的 `uv-load-more` 加载更多等组件，还可以运用在项目中正在加载状态场景。
+
+# <a href="https://www.uvui.cn/components/loadingIcon.html" target="_blank">查看文档</a>
+
+## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
+
+### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
+
+![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
+
+</a>
+
+#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>