uview-plus 3.8.37 → 3.8.42

package/components/u-guide/props.js

@@ -0,0 +1,51 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+        show: {
+            type: Boolean,
+            default: () => defProps.guide.show
+        },
+        list: {
+            type: Array,
+            default: () => defProps.guide.list
+        },
+        storageKey: {
+            type: String,
+            default: () => defProps.guide.storageKey
+        },
+        once: {
+            type: Boolean,
+            default: () => defProps.guide.once
+        },
+        showSkip: {
+            type: Boolean,
+            default: () => defProps.guide.showSkip
+        },
+        skipText: {
+            type: String,
+            default: () => defProps.guide.skipText
+        },
+        nextText: {
+            type: String,
+            default: () => defProps.guide.nextText
+        },
+        finishText: {
+            type: String,
+            default: () => defProps.guide.finishText
+        },
+        indicator: {
+            type: Boolean,
+            default: () => defProps.guide.indicator
+        },
+        bgColor: {
+            type: String,
+            default: () => defProps.guide.bgColor
+        },
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.guide.zIndex
+        }
+    }
+})

package/components/u-guide/u-guide.vue

@@ -0,0 +1,259 @@
+<template>
+	<view
+		v-if="innerShow && pageList.length"
+		class="up-guide"
+		:style="{ zIndex: `${zIndex}` }"
+		@touchmove.stop.prevent
+	>
+		<swiper
+			class="up-guide__swiper"
+			:current="current"
+			@change="onSwiperChange"
+		>
+			<swiper-item v-for="(item, index) in pageList" :key="index">
+				<view class="up-guide__page" :style="{ backgroundColor: item.backgroundColor || bgColor }">
+					<template v-if="item.image">
+						<image class="up-guide__image" :src="item.image" mode="aspectFit"></image>
+					</template>
+					<view v-else class="up-guide__placeholder">暂无引导图</view>
+					<text v-if="item.title" class="up-guide__title">{{ item.title }}</text>
+					<text v-if="item.desc" class="up-guide__desc">{{ item.desc }}</text>
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<view class="up-guide__footer">
+			<view v-if="indicator" class="up-guide__dots">
+				<view
+					v-for="(_, dotIndex) in pageList"
+					:key="dotIndex"
+					class="up-guide__dot"
+					:class="{ 'up-guide__dot--active': dotIndex === current }"
+				></view>
+			</view>
+			<view class="up-guide__actions">
+				<view v-if="showSkip" class="up-guide__btn up-guide__btn--ghost" @tap="onSkip">
+					{{ skipText }}
+				</view>
+				<view class="up-guide__btn up-guide__btn--primary" @tap="onPrimaryAction">
+					{{ isLastPage() ? finishText : nextText }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+
+	/**
+	 * Guide 首屏引导
+	 * @description 全屏首屏引导组件，支持一次性记忆与多页滑动
+	 */
+	export default {
+		name: 'up-guide',
+		mixins: [mpMixin, mixin, props],
+		emits: ['update:show', 'change', 'skip', 'finish', 'close'],
+		data() {
+			return {
+				innerShow: false,
+				current: 0,
+				closing: false
+			}
+		},
+		computed: {
+			pageList() {
+				return Array.isArray(this.list) ? this.list : []
+			},
+			resolvedStorageKey() {
+				return this.storageKey || 'up-guide-default'
+			}
+		},
+		watch: {
+			show(value) {
+				this.innerShow = !!value
+			}
+		},
+		mounted() {
+			this.bootstrap()
+		},
+		methods: {
+			bootstrap() {
+				if (!this.pageList.length) {
+					if (process.env.NODE_ENV !== 'production') {
+						console.warn('[up-guide] list is empty')
+					}
+					return
+				}
+				if (this.once && this.readRemembered()) {
+					this.innerShow = false
+					this.$emit('update:show', false)
+					return
+				}
+				this.innerShow = !!this.show
+			},
+			isLastPage() {
+				return this.current >= this.pageList.length - 1
+			},
+			onSwiperChange(event) {
+				const next = Number(event?.detail?.current ?? 0)
+				this.current = next
+				this.$emit('change', { current: next })
+			},
+			onPrimaryAction() {
+				if (this.isLastPage()) {
+					this.$emit('finish')
+					this.close(true)
+					return
+				}
+				this.current += 1
+				this.$emit('change', { current: this.current })
+			},
+			onSkip() {
+				this.$emit('skip')
+				this.close(true)
+			},
+			open() {
+				this.current = 0
+				this.innerShow = true
+				this.$emit('update:show', true)
+			},
+			close(remember = true) {
+				if (this.closing) return
+				this.closing = true
+				if (remember && this.once) {
+					this.writeRemembered()
+				}
+				this.innerShow = false
+				this.$emit('update:show', false)
+				this.$emit('close')
+				this.$nextTick(() => {
+					this.closing = false
+				})
+			},
+			reset() {
+				try {
+					uni.removeStorageSync(this.resolvedStorageKey)
+				} catch (error) {}
+			},
+			readRemembered() {
+				try {
+					const value = uni.getStorageSync(this.resolvedStorageKey)
+					return value === true || value === 1 || value === '1'
+				} catch (error) {
+					return false
+				}
+			},
+			writeRemembered() {
+				try {
+					uni.setStorageSync(this.resolvedStorageKey, 1)
+				} catch (error) {}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-guide {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.up-guide__swiper {
+		flex: 1;
+	}
+
+	.up-guide__page {
+		height: 100%;
+		padding: 120rpx 40rpx 40rpx;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		color: #ffffff;
+	}
+
+	.up-guide__image {
+		width: 560rpx;
+		height: 560rpx;
+	}
+
+	.up-guide__placeholder {
+		width: 560rpx;
+		height: 560rpx;
+		border-radius: 24rpx;
+		background: rgba(255, 255, 255, 0.12);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.up-guide__title {
+		margin-top: 48rpx;
+		font-size: 40rpx;
+		font-weight: 600;
+	}
+
+	.up-guide__desc {
+		margin-top: 18rpx;
+		font-size: 28rpx;
+		opacity: 0.85;
+		text-align: center;
+	}
+
+	.up-guide__footer {
+		padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
+	}
+
+	.up-guide__dots {
+		display: flex;
+		justify-content: center;
+		gap: 12rpx;
+		margin-bottom: 26rpx;
+	}
+
+	.up-guide__dot {
+		width: 14rpx;
+		height: 14rpx;
+		border-radius: 999px;
+		background: rgba(255, 255, 255, 0.35);
+	}
+
+	.up-guide__dot--active {
+		width: 34rpx;
+		background: #ffffff;
+	}
+
+	.up-guide__actions {
+		display: flex;
+		gap: 16rpx;
+	}
+
+	.up-guide__btn {
+		flex: 1;
+		height: 84rpx;
+		border-radius: 42rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 28rpx;
+	}
+
+	.up-guide__btn--ghost {
+		color: #ffffff;
+		border: 2rpx solid rgba(255, 255, 255, 0.42);
+	}
+
+	.up-guide__btn--primary {
+		color: #111111;
+		background: #ffffff;
+		font-weight: 600;
+	}
+</style>

package/components/u-signature/u-signature.vue

@@ -364,6 +364,17 @@
 				
 				this.canvasInstance.clearCanvas();
 			},
+
+			// 对外暴露的清空方法（供工具栏与ref调用）
+			clear() {
+				this.pathStack = []
+				this.currentPath = []
+				this.lastPoint = null
+				this.isDrawing = false
+				this.isEmpty = true
+				this.clearCanvas()
+				this.$emit('clear')
+			},
 			
 			// 导出签名图片
 			async exportSignature() {

package/components/u-tabbar/props.js

@@ -52,6 +52,41 @@ export const props = defineMixin({
         backgroundColor: {
             type: String,
             default: () => defProps.tabbar.backgroundColor
+        },
+        // 风格类型
+        styleType: {
+            type: String,
+            default: () => defProps.tabbar.styleType
+        },
+        // 激活动画类型
+        animationType: {
+            type: String,
+            default: () => defProps.tabbar.animationType
+        },
+        // 选中项背景色
+        activeBackgroundColor: {
+            type: String,
+            default: () => defProps.tabbar.activeBackgroundColor
+        },
+        // 未选中项背景色
+        inactiveBackgroundColor: {
+            type: String,
+            default: () => defProps.tabbar.inactiveBackgroundColor
+        },
+        // item 形状
+        itemShape: {
+            type: String,
+            default: () => defProps.tabbar.itemShape
+        },
+        // 图标缩放比例
+        iconScale: {
+            type: [String, Number],
+            default: () => defProps.tabbar.iconScale
+        },
+        // 文本显示模式
+        textMode: {
+            type: String,
+            default: () => defProps.tabbar.textMode
         }
     }
 })

package/components/u-tabbar/tabbar.js

@@ -19,6 +19,13 @@ export default {
         fixed: true,
         placeholder: true,
         borderColor: '',
-        backgroundColor: ''
+        backgroundColor: '',
+        styleType: 'default',
+        animationType: 'none',
+        activeBackgroundColor: '',
+        inactiveBackgroundColor: '',
+        itemShape: 'default',
+        iconScale: 1.1,
+        textMode: 'always'
     }
 }

package/components/u-tabbar/u-tabbar.vue

@@ -4,10 +4,21 @@
 		    class="u-tabbar__content"
 		    ref="u-tabbar__content"
 		    @touchmove.stop.prevent="noop"
-		    :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
+		    :class="[
+				border && 'u-border-top',
+				fixed && 'u-tabbar--fixed',
+				`u-tabbar--${styleType}`,
+				textMode === 'active' && 'u-tabbar--text-active'
+			]"
 		    :style="[tabbarStyle]"
 		>
-			<view class="u-tabbar__content__item-wrapper">
+			<view
+				class="u-tabbar__content__item-wrapper"
+				:class="[
+					`u-tabbar__content__item-wrapper--${styleType}`,
+					itemShape !== 'default' && `u-tabbar__content__item-wrapper--shape-${itemShape}`
+				]"
+			>
 				<slot />
 			</view>
 			<u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
@@ -59,19 +70,36 @@
 			tabbarStyle() {
 				const style = {
 					zIndex: this.zIndex,
-					backgroundColor: this.backgroundColor || this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
+					backgroundColor: this.backgroundColor || this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff'),
+					'--up-tabbar-active-bg': this.activeBackgroundColor || 'transparent',
+					'--up-tabbar-inactive-bg': this.inactiveBackgroundColor || 'transparent',
+					'--up-tabbar-icon-scale': `${this.iconScale}`
 				}
 				if (this.borderColor) {
 					style.borderColor = this.borderColor + ' !important'
 				} else {
 					style.borderColor = this.upThemeVar('--up-border-color', '#dadbde')
 				}
+				if (['pill', 'card', 'glow', 'convex'].includes(this.styleType)) {
+					style.padding = '8rpx 12rpx 12rpx'
+				}
 				// 合并来自父组件的customStyle样式
 				return deepMerge(style, addStyle(this.customStyle))
 			},
 			// 监听多个参数的变化，通过在computed执行对应的操作
 			updateChild() {
-				return [this.value, this.activeColor, this.inactiveColor]
+				return [
+					this.value,
+					this.activeColor,
+					this.inactiveColor,
+					this.styleType,
+					this.animationType,
+					this.activeBackgroundColor,
+					this.inactiveBackgroundColor,
+					this.itemShape,
+					this.iconScale,
+					this.textMode
+				]
 			},
 			updatePlaceholder() {
 				return [this.fixed, this.placeholder]
@@ -138,9 +166,59 @@
 				height: 50px;
 				@include flex(row);
 				justify-content: space-around;
+
+				&--pill,
+				&--card,
+				&--glow,
+				&--convex {
+					gap: 8rpx;
+				}
+
+				&--pill {
+					height: 50px;
+				}
+
+				&--shape-round {
+					border-radius: 999px;
+				}
+
+				&--shape-square {
+					border-radius: 16rpx;
+				}
 			}
 		}
 
+		&--default,
+		&--minimal,
+		&--underline,
+		&--dot {
+			padding: 0;
+		}
+
+		&--pill,
+		&--glow {
+			border-radius: 72rpx;
+			background: #ffffff;
+			margin-left: 24rpx;
+			margin-right: 24rpx;
+		}
+
+		&--card {
+			border-radius: 24rpx;
+			box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.06);
+		}
+
+		&--lift {
+			overflow: visible;
+		}
+
+		&--convex {
+			overflow: visible;
+			border-radius: 32rpx 32rpx 0 0;
+			background: #ffffff;
+			box-shadow: 0 -2rpx 18rpx rgba(148, 163, 184, 0.08);
+		}
+
 		&--fixed {
 			position: fixed;
 			bottom: 0;

package/components/u-tabbar-item/props.js

@@ -9,9 +9,19 @@ export const props = defineMixin({
         },
         // uview-plus内置图标或者绝对路径的图片
         icon: {
-            icon: String,
+            type: String,
             default: () => defProps.tabbarItem.icon
         },
+        // 激活态图标
+        activeIcon: {
+            type: String,
+            default: () => defProps.tabbarItem.activeIcon
+        },
+        // 未激活态图标
+        inactiveIcon: {
+            type: String,
+            default: () => defProps.tabbarItem.inactiveIcon
+        },
         // 右上角的角标提示信息
         badge: {
             type: [String, Number, null],
@@ -36,6 +46,46 @@ export const props = defineMixin({
         mode: {
             type: String,
             default: () => defProps.tabbarItem.mode
+        },
+        // 激活态附加类名
+        activeClass: {
+            type: String,
+            default: () => defProps.tabbarItem.activeClass
+        },
+        // 未激活态附加类名
+        inactiveClass: {
+            type: String,
+            default: () => defProps.tabbarItem.inactiveClass
+        },
+        // 中间按钮背景色
+        midButtonBgColor: {
+            type: String,
+            default: () => defProps.tabbarItem.midButtonBgColor
+        },
+        // 中间按钮图标颜色
+        midButtonIconColor: {
+            type: String,
+            default: () => defProps.tabbarItem.midButtonIconColor
+        },
+        // 中间按钮图标大小
+        midButtonIconSize: {
+            type: [String, Number],
+            default: () => defProps.tabbarItem.midButtonIconSize
+        },
+        // 中间按钮阴影
+        midButtonBoxShadow: {
+            type: String,
+            default: () => defProps.tabbarItem.midButtonBoxShadow
+        },
+        // 中间按钮内层阴影
+        midButtonInnerBoxShadow: {
+            type: String,
+            default: () => defProps.tabbarItem.midButtonInnerBoxShadow
+        },
+        // 中间按钮垂直偏移（负值为上移）
+        midButtonOffsetY: {
+            type: [String, Number],
+            default: () => defProps.tabbarItem.midButtonOffsetY
         }
     }
 })

package/components/u-tabbar-item/tabbarItem.js

@@ -12,10 +12,20 @@ export default {
     tabbarItem: {
         name: null,
         icon: '',
+        activeIcon: '',
+        inactiveIcon: '',
         badge: null,
         dot: false,
         text: '',
         badgeStyle: 'top: 6px;right:2px;',
-        mode: ''
+        mode: '',
+        activeClass: '',
+        inactiveClass: '',
+        midButtonBgColor: '',
+        midButtonIconColor: '',
+        midButtonIconSize: 26,
+        midButtonBoxShadow: '',
+        midButtonInnerBoxShadow: '',
+        midButtonOffsetY: -10
     }
 }