uview-plus 3.8.39 → 3.8.42

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-tabs/props.js

@@ -63,9 +63,14 @@ export const props = defineMixin({
 			default: () => defProps.tabs.keyName
 		},
         // 左侧图标样式
-        iconStyle: {
-            type: [String, Object],
-            default: () => defProps.tabs.iconStyle
-        }
-    }
-})
+        iconStyle: {
+            type: [String, Object],
+            default: () => defProps.tabs.iconStyle
+        },
+        // 形态模式，可选：capsule/card/pill-arrow/tag
+        shapeMode: {
+            type: String,
+            default: () => defProps.tabs.shapeMode
+        }
+    }
+})

package/components/u-tabs/tabs.js

@@ -25,9 +25,10 @@ export default {
         itemStyle: {
             height: '44px'
         },
-        scrollable: true,
-		current: 0,
-		keyName: 'name',
-        iconStyle: {}
-    }
-}
+        scrollable: true,
+		current: 0,
+		keyName: 'name',
+        iconStyle: {},
+        shapeMode: ''
+    }
+}

package/components/u-tabs/u-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="u-tabs" :class="[customClass]">
+	<view class="u-tabs" :class="[customClass, shapeModeClass]">
 		<view class="u-tabs__wrapper">
 			<slot name="left" />
 			<view class="u-tabs__wrapper__scroll-view-wrapper">
@@ -9,7 +9,8 @@
 						<view class="u-tabs__wrapper__nav__item" v-for="(item, index) in tabList" :key="index"
 							@tap="clickHandler(item, index)" @longpress="longPressHandler(item,index)"
 							:ref="`u-tabs__wrapper__nav__item-${index}`"
-							:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
+							:style="[itemComputedStyle, {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
+								shapeMode && `u-tabs__wrapper__nav__item--${shapeMode}`,
 								item.disabled && 'u-tabs__wrapper__nav__item--disabled',
 								innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']">
 							<slot v-if="$slots.icon" name="icon" :item="item" :keyName="keyName" :index="index" />
@@ -36,6 +37,12 @@
 								:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
 								:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
 								customStyle="margin-left: 4px;"></u-badge>
+							<view
+								v-if="shapeMode === 'card' && innerCurrent == index && index < tabList.length - 1"
+								class="u-tabs__wrapper__nav__item__card-corner"></view>
+							<view
+								v-if="shapeMode === 'pill-arrow' && innerCurrent == index"
+								class="u-tabs__wrapper__nav__item__active-arrow"></view>
 						</view>
 						<!-- #ifdef APP-NVUE -->
 						<view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line" :style="[{
@@ -43,6 +50,7 @@
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
+								display: showLine ? 'block' : 'none'
 							}]">
 						</view>
 						<!-- #endif -->
@@ -55,7 +63,7 @@
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
-								display: lineShow ? 'block': 'none'
+								display: showLine ? 'block': 'none'
 							}]">
 						</view>
 						<!-- #endif -->
@@ -98,6 +106,7 @@
 	 * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
 	 * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
 	 * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
+	 * @property {String}	shapeMode 标签形态模式，可选capsule/card/pill-arrow/tag（默认 '' ）
 	 * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
 	 * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
 	 * @event {Function(index)} longPress 长按标签时触发 index: 点击了第几个tab，索引从0开始
@@ -151,6 +160,31 @@
 			}
 		},
 		computed: {
+			shapeModeClass() {
+				return this.shapeMode ? `u-tabs--shape-${this.shapeMode}` : ''
+			},
+			showLine() {
+				return this.lineShow && !['capsule', 'pill-arrow', 'tag'].includes(this.shapeMode)
+			},
+			itemComputedStyle() {
+				const style = addStyle(this.itemStyle) || {}
+				if (this.upHasProp('itemStyle')) {
+					return style
+				}
+				const defaultModeHeights = {
+					capsule: '30px',
+					card: '34px',
+					'pill-arrow': '32px',
+					tag: '28px'
+				}
+				const height = defaultModeHeights[this.shapeMode]
+				if (!height) {
+					return style
+				}
+				return deepMerge(style, {
+					height
+				})
+			},
 			textStyle() {
 				return index => {
 					const style = {}
@@ -165,10 +199,14 @@
 						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultActiveColor)
 					const isInactiveStyleOverridden = this.upHasProp('inactiveStyle')
 						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultInactiveColor)
-					if (isActive && !isActiveStyleOverridden) {
+					if (isActive && ['pill-arrow', 'tag'].includes(this.shapeMode) && !isActiveStyleOverridden) {
+						style.color = '#ffffff'
+					} else if (isActive && !isActiveStyleOverridden) {
 						style.color = this.upThemeVar('--up-main-color', this.$u.color.mainColor || defaultActiveColor)
 					}
-					if (!isActive && !isInactiveStyleOverridden) {
+					if (!isActive && ['pill-arrow', 'tag'].includes(this.shapeMode) && !isInactiveStyleOverridden) {
+						style.color = '#606266'
+					} else if (!isActive && !isInactiveStyleOverridden) {
 						style.color = this.upThemeVar('--up-content-color', this.$u.color.contentColor || defaultInactiveColor)
 					}
 					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
@@ -375,6 +413,7 @@
 				&__item {
 					padding: 0 11px;
 					@include flex;
+					position: relative;
 					align-items: center;
 					justify-content: center;
 					/* #ifdef H5 */
@@ -396,6 +435,30 @@
 							color: $u-disabled-color !important;
 						}
 					}
+
+					&__card-corner {
+						position: absolute;
+						top: 0;
+						right: -10px;
+						width: 20px;
+						height: 100%;
+						background-color: inherit;
+						transform: skewX(25deg);
+						border-top-right-radius: 10px;
+						z-index: 1;
+					}
+
+					&__active-arrow {
+						position: absolute;
+						left: 50%;
+						bottom: -6px;
+						width: 0;
+						height: 0;
+						border-left: 6px solid transparent;
+						border-right: 6px solid transparent;
+						border-top: 6px solid #ff3b30;
+						transform: translateX(-50%);
+					}
 				}
 
 				&__line {
@@ -410,5 +473,82 @@
 				}
 			}
 		}
+
+		&--shape-capsule {
+			.u-tabs__wrapper__scroll-view-wrapper {
+				padding: 3px;
+				border-radius: 999px;
+				background-color: #edf0f5;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 30px;
+				padding: 0 14px;
+				border-radius: 999px;
+				transition: background-color 0.2s;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #ffffff;
+			}
+		}
+
+		&--shape-card {
+			.u-tabs__wrapper__scroll-view-wrapper {
+				padding: 0;
+				border-radius: 10px;
+				background-color: #9ccde5;
+				box-shadow: inset 0 0 0 1px rgba(96, 98, 102, 0.06);
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 34px;
+				padding: 0;
+				border-radius: 10px 10px 0 0;
+				transition: background-color 0.2s;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #f6f8fb;
+				box-shadow: inset 0 0 0 1px rgba(96, 98, 102, 0.06);
+				z-index: 2;
+			}
+		}
+
+		&--shape-pill-arrow {
+			.u-tabs__wrapper__nav {
+				padding-bottom: 6px;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 32px;
+				padding: 0 12px;
+				border-radius: 8px;
+				background-color: #e8e8e8;
+				margin-right: 8px;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background: linear-gradient(90deg, #ff6c57 0%, #ff3b30 100%);
+			}
+		}
+
+		&--shape-tag {
+			.u-tabs__wrapper__nav {
+				padding: 2px 0;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 28px;
+				padding: 0 14px;
+				border-radius: 999px;
+				background-color: #f3f4f6;
+				margin-right: 8px;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #2a6bf6;
+			}
+		}
 	}
 </style>

package/libs/config/props.js

@@ -21,6 +21,7 @@ import Backtop from '../../components/u-back-top/backtop'
 import Badge from '../../components/u-badge/badge'
 import Button from '../../components/u-button/button'
 import Calendar from '../../components/u-calendar/calendar'
+import CalendarStrip from '../../components/u-calendar-strip/calendarStrip'
 import CarKeyboard from '../../components/u-car-keyboard/carKeyboard'
 import Card from '../../components/u-card/card'
 import Cell from '../../components/u-cell/cell'
@@ -42,6 +43,7 @@ import Empty from '../../components/u-empty/empty'
 import Form from '../../components/u-form/form'
 import FormItem from '../../components/u-form-item/formItem'
 import Gap from '../../components/u-gap/gap'
+import Guide from '../../components/u-guide/guide'
 import Grid from '../../components/u-grid/grid'
 import GridItem from '../../components/u-grid-item/gridItem'
 import Icon from '../../components/u-icon/icon'
@@ -112,6 +114,7 @@ const props = {
     ...Badge,
     ...Button,
     ...Calendar,
+    ...CalendarStrip,
     ...CarKeyboard,
     ...Card,
     ...Cell,
@@ -133,6 +136,7 @@ const props = {
     ...Form,
     ...FormItem,
     ...Gap,
+    ...Guide,
     ...Grid,
     ...GridItem,
     ...Icon,

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.8.39",
+  "version": "3.8.42",
   "description": "零云®uview-plus已兼容vue3支持多语言，120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",

package/types/comps/calendarStrip.d.ts

@@ -0,0 +1,116 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface CalendarStripPayload {
+  date: string
+  month: string
+  scene: string
+}
+
+declare interface CalendarStripProps {
+  /**
+   * 当前选中日期
+   */
+  modelValue?: string | number | Date | null
+  /**
+   * 最小可选日期
+   * @default 0
+   */
+  minDate?: string | number
+  /**
+   * 最大可选日期
+   * @default 0
+   */
+  maxDate?: string | number
+  /**
+   * 主题色
+   * @default "#3c9cff"
+   */
+  color?: string
+  /**
+   * 星期文案（周一到周日）
+   */
+  weekText?: string[]
+  /**
+   * 是否支持下拉展开完整月历
+   * @default true
+   */
+  fullCalendar?: boolean
+  /**
+   * 透传给内嵌 up-calendar 的额外参数
+   */
+  fullCalendarProps?: Record<string, any>
+  /**
+   * 完整月历可浏览月份数（仅在未传 minDate/maxDate 时生效）
+   * @default 24
+   */
+  fullMonthNum?: string | number
+  /**
+   * 下拉/上拉手势触发阈值，单位 px
+   * @default 40
+   */
+  pullDownThreshold?: string | number
+  /**
+   * 在完整月历中选择日期后是否自动收起
+   * @default true
+   */
+  collapseAfterSelect?: boolean
+  /**
+   * 是否只读
+   * @default false
+   */
+  readonly?: boolean
+  /**
+   * 是否高亮今天
+   * @default true
+   */
+  showToday?: boolean
+  /**
+   * 顶部月份格式化模板，遵循 dayjs 格式
+   */
+  monthFormat?: string
+  /**
+   * 收起状态提示文案
+   * @default "下拉展开月历"
+   */
+  expandHint?: string
+  /**
+   * 展开状态提示文案
+   * @default "上拉收起月历"
+   */
+  collapseHint?: string
+  /**
+   * 日期变更时触发
+   */
+  onChange?: (payload: CalendarStripPayload) => any
+  /**
+   * 日期确认时触发
+   */
+  onConfirm?: (payload: CalendarStripPayload) => any
+  /**
+   * 月份变更时触发
+   */
+  onMonthChange?: (payload: { month: string; scene: string }) => any
+  /**
+   * 展开/收起完整月历时触发
+   */
+  onToggleFull?: (payload: { show: boolean; source: string }) => any
+}
+
+declare interface _CalendarStrip {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      CalendarStripProps
+  }
+}
+
+declare interface _CalendarStripRef {
+  prevMonth: () => void
+  nextMonth: () => void
+  toggleFull: () => void
+}
+
+export declare const CalendarStrip: _CalendarStrip
+
+export declare const CalendarStripRef: _CalendarStripRef
+