uview-plus 3.8.32 → 3.8.39

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
     }
 }

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

@@ -1,50 +1,61 @@
 <template>
 	<view
 	    class="u-tabbar-item"
-	    :style="[addStyle(customStyle)]"
-	    :class="[isMidButton ? 'u-tabbar-item--mid-button' : '']"
+	    :style="[itemInlineStyle, addStyle(customStyle)]"
+	    :class="itemClassNames"
 	    @tap="clickHandler"
 	>
-		<view 
-			class="u-tabbar-item__icon"
-			:class="[isMidButton ? 'u-tabbar-item__icon--mid-button' : '']"
-		>
-			<view class="u-tabbar-item--mid-button-cover" v-if="isMidButton">
+		<view class="u-tabbar-item__content" :class="contentClassNames">
+			<view class="u-tabbar-item__bubble" :class="bubbleClassNames">
+				<view
+					class="u-tabbar-item__icon"
+					:class="iconClassNames"
+				>
+					<view v-if="isMidButton" class="u-tabbar-item__mid-button-arc">
+						<svg viewBox="0 0 72 72" preserveAspectRatio="none">
+							<path d="M 4 36 A 32 32 0 0 1 68 36"></path>
+						</svg>
+					</view>
+					<view v-if="isMidButton" class="u-tabbar-item__mid-button-inner"></view>
+					<up-icon
+						v-if="resolvedIconName"
+						:name="resolvedIconName"
+						:color="isMidButton ? resolvedMidButtonIconColor : (isActive ? resolvedActiveColor : resolvedInactiveColor)"
+						:size="isMidButton ? midButtonIconSize : 24"
+					></up-icon>
+					<template v-else>
+						<slot
+							v-if="isActive"
+							name="active-icon"
+						/>
+						<slot
+							v-else
+							name="inactive-icon"
+						/>
+					</template>
+					<u-badge
+						absolute
+						:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
+						:customStyle="badgeStyle"
+						:isDot="dot"
+						:value="badge || (dot ? 1 : null)"
+						:show="dot || badge > 0"
+					></u-badge>
+				</view>
+
+				<slot name="text">
+					<text
+						class="u-tabbar-item__text"
+						:class="textClassNames"
+						:style="{
+							color: isActive ? resolvedActiveColor : resolvedInactiveColor
+						}"
+					>{{ text }}</text>
+				</slot>
 			</view>
-			<up-icon
-			    v-if="icon"
-			    :name="icon"
-			    :color="isActive ? resolvedActiveColor : resolvedInactiveColor"
-			    :size="isMidButton ? 26 : 20"
-			></up-icon>
-			<template v-else>
-				<slot
-				    v-if="isActive"
-				    name="active-icon"
-				/>
-				<slot
-				    v-else
-				    name="inactive-icon"
-				/>
-			</template>
-			<u-badge
-				absolute
-				:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
-			    :customStyle="badgeStyle"
-			    :isDot="dot"
-			    :value="badge || (dot ? 1 : null)"
-			    :show="dot || badge > 0"
-			></u-badge>
 		</view>
-		
-		<slot name="text">
-			<text
-			    class="u-tabbar-item__text"
-			    :style="{
-					color: isActive ? resolvedActiveColor : resolvedInactiveColor
-				}"
-			>{{ text }}</text>
-		</slot>
+		<view v-if="resolvedStyleType === 'underline'" class="u-tabbar-item__underline"></view>
+		<view v-if="resolvedStyleType === 'dot'" class="u-tabbar-item__active-dot"></view>
 	</view>
 </template>
 
@@ -76,7 +87,14 @@
 				parentData: {
 					value: null,
 					activeColor: '',
-					inactiveColor: ''
+					inactiveColor: '',
+					styleType: 'default',
+					animationType: 'none',
+					activeBackgroundColor: '',
+					inactiveBackgroundColor: '',
+					itemShape: 'default',
+					iconScale: 1.1,
+					textMode: 'always'
 				}
 			}
 		},
@@ -98,6 +116,67 @@
 				return !this.parentData.inactiveColor || this.parentData.inactiveColor === '#7d7e80'
 					? this.upThemeVar('--up-content-color', '#7d7e80')
 					: this.parentData.inactiveColor
+			},
+			resolvedStyleType() {
+				return this.parentData.styleType || 'default'
+			},
+			resolvedAnimationType() {
+				return this.parentData.animationType || 'none'
+			},
+			resolvedItemShape() {
+				return this.parentData.itemShape || 'default'
+			},
+			resolvedIconName() {
+				if (this.$slots['active-icon'] || this.$slots['inactive-icon']) return ''
+				if (this.isActive) return this.activeIcon || this.icon
+				return this.inactiveIcon || this.icon
+			},
+			resolvedMidButtonIconColor() {
+				if (this.midButtonIconColor) return this.midButtonIconColor
+				return this.isMidButton ? '#3c9cff' : this.resolvedActiveColor
+			},
+			itemClassNames() {
+				return [
+					this.isActive ? 'u-tabbar-item--active' : 'u-tabbar-item--inactive',
+					this.isMidButton ? 'u-tabbar-item--mid-button' : '',
+					`u-tabbar-item--${this.resolvedStyleType}`,
+					this.resolvedAnimationType !== 'none' && this.isActive ? `u-tabbar-item--anim-${this.resolvedAnimationType}` : '',
+					this.resolvedItemShape !== 'default' ? `u-tabbar-item--shape-${this.resolvedItemShape}` : '',
+					this.isActive ? this.activeClass : this.inactiveClass
+				]
+			},
+			iconClassNames() {
+				return [
+					this.isMidButton ? 'u-tabbar-item__icon--mid-button' : '',
+					`u-tabbar-item__icon--${this.resolvedStyleType}`,
+					this.isActive && this.resolvedAnimationType !== 'none' ? `u-tabbar-item__icon--anim-${this.resolvedAnimationType}` : ''
+				]
+			},
+			contentClassNames() {
+				return [
+					`u-tabbar-item__content--${this.resolvedStyleType}`,
+					this.isMidButton ? 'u-tabbar-item__content--mid-button' : ''
+				]
+			},
+			bubbleClassNames() {
+				return [
+					`u-tabbar-item__bubble--${this.resolvedStyleType}`,
+					this.isActive ? 'u-tabbar-item__bubble--active' : '',
+					this.isMidButton ? 'u-tabbar-item__bubble--mid-button' : ''
+				]
+			},
+			textClassNames() {
+				return [
+					`u-tabbar-item__text--${this.resolvedStyleType}`,
+					this.parentData.textMode === 'active' && !this.isActive ? 'u-tabbar-item__text--muted' : ''
+				]
+			},
+			itemInlineStyle() {
+				return {
+					backgroundColor: this.isActive
+						? (this.parentData.activeBackgroundColor || 'transparent')
+						: (this.parentData.inactiveBackgroundColor || 'transparent')
+				}
 			}
 		},
 		created() {
@@ -147,6 +226,7 @@
 		align-items: center;
 		justify-content: center;
 		flex: 1;
+		position: relative;
 		/* #ifndef APP-NVUE */
 		width: 100%;
 		height: 100%;
@@ -160,42 +240,231 @@
 			position: relative;
 			width: 150rpx;
 			justify-content: center;
+			min-height: 46rpx;
+			transition: transform 0.22s ease, opacity 0.22s ease;
+
+			&--pill,
+			&--card,
+			&--glow,
+			&--convex {
+				width: 100%;
+			}
+
+			&--anim-scale {
+				transform: scale(var(--up-tabbar-icon-scale, 1.1));
+			}
+
+			&--anim-lift {
+				transform: translateY(-6rpx) scale(var(--up-tabbar-icon-scale, 1.08));
+			}
+
+			&--anim-swing {
+				transform: rotate(-10deg) scale(var(--up-tabbar-icon-scale, 1.08));
+			}
+
+			&--anim-pulse {
+				transform: scale(var(--up-tabbar-icon-scale, 1.14));
+			}
+		}
+
+		&__content {
+			@include flex(column);
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+
+			&--mid-button {
+				justify-content: center;
+			}
+		}
+
+		&__bubble {
+			@include flex(column);
+			align-items: center;
+			justify-content: center;
+			min-width: 0;
+			padding: 0;
+			max-width: 100rpx;
+			border-radius: 999px;
+			transition: background-color 0.22s ease, transform 0.22s ease;
+
+			&--pill.u-tabbar-item__bubble--active {
+				background-color: transparent;
+			}
+
+			&--glow.u-tabbar-item__bubble--active {
+				background-color: var(--up-tabbar-active-bg, rgba(125, 211, 252, 0.12));
+			}
+
+			&--mid-button {
+				padding: 0;
+				background-color: transparent !important;
+			}
 		}
 
 		&__text {
 			margin-top: 2px;
 			font-size: 12px;
 			color: $u-content-color;
+			transition: transform 0.22s ease, opacity 0.22s ease;
+
+			&--muted {
+				opacity: 0.68;
+				transform: scale(0.94);
+			}
 		}
+
+		&__underline {
+			position: absolute;
+			left: 50%;
+			bottom: 2rpx;
+			width: 34rpx;
+			height: 6rpx;
+			border-radius: 999px;
+			background-color: currentColor;
+			transform: translateX(-50%);
+		}
+
+		&__active-dot {
+			position: absolute;
+			left: 50%;
+			bottom: 8rpx;
+			width: 10rpx;
+			height: 10rpx;
+			border-radius: 50%;
+			background-color: currentColor;
+			transform: translateX(-50%);
+		}
+	}
+
+	.u-tabbar-item--active {
+		color: inherit;
+	}
+
+	.u-tabbar-item--pill,
+	.u-tabbar-item--glow,
+	.u-tabbar-item--card {
+		margin: 0;
+		border-radius: 999px;
+	}
+
+	.u-tabbar-item--card {
+		border-radius: 24rpx;
+	}
+
+	.u-tabbar-item--active.u-tabbar-item--pill,
+	.u-tabbar-item--active.u-tabbar-item--card {
+		box-shadow: none;
+	}
+
+	.u-tabbar-item--active.u-tabbar-item--glow {
+		box-shadow: none;
+	}
+
+	.u-tabbar-item--lift.u-tabbar-item--active {
+		transform: none;
+	}
+
+	.u-tabbar-item--lift.u-tabbar-item--active .u-tabbar-item__icon {
+		transform: translateY(-6rpx) scale(1.04);
+	}
+
+	.u-tabbar-item--underline,
+	.u-tabbar-item--dot {
+		padding-bottom: 10rpx;
+	}
+
+	.u-tabbar-item--convex.u-tabbar-item--active:not(.u-tabbar-item--mid-button) {
+		transform: none;
 	}
 	
 	// 中间按钮样式
 	.u-tabbar-item--mid-button {
 		/* #ifndef APP-NVUE */
-		transform: translateY(-10px);
+		transform: translateY(v-bind('`${midButtonOffsetY}px`'));
 		/* #endif */
-	}
-	
-	.u-tabbar-item--mid-button-cover {
-		background-color: var(--up-card-bg-color, #fff);
-		position: absolute;
-		top: 22px;
-		left: -10px;
-		// right: -10px;
-		width: 90px;
-		bottom: 0;
+		z-index: 2;
+		flex: 1;
 	}
 	
 	.u-tabbar-item__icon--mid-button {
-		width: 70px;
-		height: 70px;
-		border-radius: 100px;
-		background-color: var(--up-card-bg-color, #ffffff);
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-		border: 1px solid var(--up-border-color, rgba(0, 0, 0, 0.08));
+		width: 64px;
+		height: 64px;
+		border-radius: 999px;
+		background: #ffffff;
+		box-shadow: v-bind('midButtonBoxShadow || "none"');
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		position: relative;
+		overflow: visible;
+	}
+
+	.u-tabbar-item__mid-button-arc {
+		position: absolute;
+		left: -4px;
+		top: -4px;
+		width: calc(100% + 8px);
+		height: calc(100% + 8px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.u-tabbar-item__mid-button-arc svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.u-tabbar-item__mid-button-arc path {
+		fill: none;
+		stroke: none;
+		stroke-width: 0;
+		stroke-linecap: round;
+	}
+
+	.u-tabbar-item__mid-button-inner {
+		position: absolute;
+		left: 6px;
+		top: 6px;
+		right: 6px;
+		bottom: 6px;
+		border-radius: 999px;
+		background: v-bind('midButtonBgColor || "#ffffff"');
+		box-shadow: v-bind('midButtonInnerBoxShadow');
+		z-index: 1;
+	}
+
+	.u-tabbar-item__icon--mid-button .u-icon,
+	.u-tabbar-item__icon--mid-button .u-badge {
+		position: relative;
+		z-index: 2;
+	}
+
+	.u-tabbar-item--mid-button .u-tabbar-item__text {
+		margin-top: 0;
+		transform: translateY(-4px);
+	}
+
+	.u-tabbar-item--lift .u-tabbar-item__bubble {
+		background-color: transparent !important;
+	}
+
+	.u-tabbar-item--lift.u-tabbar-item--active .u-tabbar-item__text {
+		transform: translateY(-4rpx);
+	}
+
+	.u-tabbar-item--anim-pulse .u-tabbar-item__icon {
+		animation: u-tabbar-item-pulse 1.4s ease-in-out infinite;
+	}
+
+	@keyframes u-tabbar-item-pulse {
+		0%, 100% {
+			transform: scale(var(--up-tabbar-icon-scale, 1.1));
+		}
+		50% {
+			transform: scale(calc(var(--up-tabbar-icon-scale, 1.1) + 0.08));
+		}
 	}
 
 	/* #ifdef MP */