uview-plus 3.7.36 → 3.8.32

package/components/u-navbar/navbar.js

@@ -7,7 +7,6 @@
  * @lastTime     : 2025-12-19 08:55:21
  * @FilePath     : /uview-plus/libs/config/props/navbar.js
  */
-import color from '../../libs/config/color'
 export default {
     // navbar 组件
     navbar: {
@@ -21,11 +20,11 @@ export default {
         rightIcon: '',
         title: '',
         titleColor: '',
-        bgColor: '#ffffff',
+        bgColor: '',
         titleWidth: '400rpx',
         height: '44px',
 		leftIconSize: 20,
-		leftIconColor: color.mainColor,
+		leftIconColor: '',
 		autoBack: false,
 		titleStyle: ''
     }

package/components/u-navbar/theme-vars.scss

@@ -0,0 +1,21 @@
+:root,
+page,
+body {
+	--up-navbar-bg-color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-navbar-bg-color: #1c1c1e;
+	}
+}
+
+[data-up-theme='light'] {
+	--up-navbar-bg-color: #ffffff;
+}
+
+[data-up-theme='dark'] {
+	--up-navbar-bg-color: #1c1c1e;
+}

package/components/u-navbar/u-navbar.vue

@@ -10,14 +10,14 @@
 		<view :class="[fixed && 'u-navbar--fixed']">
 			<u-status-bar
 				v-if="safeAreaInsetTop"
-				:bgColor="statusBarBgColor ? statusBarBgColor : bgColor"
+				:bgColor="statusBarBgColor ? statusBarBgColor : navbarBgColor"
 			></u-status-bar>
 			<view
 				class="u-navbar__content"
 				:class="[border && 'u-border-bottom']"
 				:style="{
 					height: addUnit(height),
-					backgroundColor: bgColor,
+					backgroundColor: navbarBgColor,
 				}"
 			>
 				<view
@@ -31,12 +31,12 @@
 							v-if="leftIcon"
 							:name="leftIcon"
 							:size="leftIconSize"
-							:color="leftIconColor"
+							:color="navbarLeftIconColor"
 						></up-icon>
 						<text
 							v-if="leftText"
 							:style="{
-								color: leftIconColor
+								color: navbarLeftIconColor
 							}"
 							class="u-navbar__content__left__text"
 						>{{ leftText }}</text>
@@ -47,7 +47,7 @@
 						class="u-line-1 u-navbar__content__title"
 						:style="[{
 							width: addUnit(titleWidth),
-							color: titleColor,
+							color: navbarTitleColor,
 						}, addStyle(titleStyle)]"
 					>{{ title }}</text>
 				</slot>
@@ -61,10 +61,12 @@
 							v-if="rightIcon"
 							:name="rightIcon"
 							size="20"
+							:color="navbarRightColor"
 						></up-icon>
 						<text
 							v-if="rightText"
 							class="u-navbar__content__right__text"
+							:style="{ color: navbarRightColor }"
 						>{{ rightText }}</text>
 					</slot>
 				</view>
@@ -112,6 +114,23 @@
 			return {
 			}
 		},
+		computed: {
+			navbarBgColor() {
+				if (this.bgColor) return this.bgColor
+				return this.upThemeVar('--up-navbar-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
+			},
+			navbarTitleColor() {
+				if (this.titleColor) return this.titleColor
+				return this.upThemeVar('--up-main-color', this.$u.color.mainColor)
+			},
+			navbarLeftIconColor() {
+				if (this.leftIconColor) return this.leftIconColor
+				return this.upThemeVar('--up-main-color', this.$u.color.mainColor)
+			},
+			navbarRightColor() {
+				return this.upThemeVar('--up-main-color', this.$u.color.mainColor)
+			}
+		},
 		emits: ["leftClick", "rightClick"],
 		methods: {
 			addStyle,
@@ -138,6 +157,10 @@
 	}
 </script>
 
+<style lang="scss">
+	@import "./theme-vars.scss";
+</style>
+
 <style lang="scss" scoped>
 
 	.u-navbar {
@@ -154,7 +177,7 @@
 			@include flex(row);
 			align-items: center;
 			height: 44px;
-			background-color: #9acafc;
+			background-color: $u-bg-color;
 			position: relative;
 			justify-content: center;
 
@@ -178,6 +201,7 @@
 				&__text {
 					font-size: 15px;
 					margin-left: 3px;
+					color: $u-main-color;
 				}
 			}
 

package/components/u-notice-bar/theme-vars.scss

@@ -0,0 +1,25 @@
+:root,
+page,
+body {
+	--up-notice-bar-color: #f9ae3d;
+	--up-notice-bar-bg-color: #fdf6ec;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root,
+	page,
+	body {
+		--up-notice-bar-color: #f9ae3d;
+		--up-notice-bar-bg-color: #3d2f1b;
+	}
+}
+
+[data-up-theme='light'] {
+	--up-notice-bar-color: #f9ae3d;
+	--up-notice-bar-bg-color: #fdf6ec;
+}
+
+[data-up-theme='dark'] {
+	--up-notice-bar-color: #f9ae3d;
+	--up-notice-bar-bg-color: #3d2f1b;
+}

package/components/u-notice-bar/u-notice-bar.vue

@@ -3,13 +3,13 @@
 		class="u-notice-bar"
 		v-if="show"
 		:style="[{
-			backgroundColor: bgColor
+			backgroundColor: resolvedBgColor
 		}, addStyle(customStyle)]"
 	>
 		<template v-if="direction === 'column' || (direction === 'row' && step)">
 			<u-column-notice
-				:color="color"
-				:bgColor="bgColor"
+				:color="resolvedColor"
+				:bgColor="resolvedBgColor"
 				:text="text"
 				:mode="mode"
 				:step="step"
@@ -24,8 +24,8 @@
 		</template>
 		<template v-else>
 			<u-row-notice
-				:color="color"
-				:bgColor="bgColor"
+				:color="resolvedColor"
+				:bgColor="resolvedBgColor"
 				:text="text"
 				:mode="mode"
 				:fontSize="fontSize"
@@ -43,6 +43,7 @@
 	import { props } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
+	import defProps from '../../libs/config/props.js';
 	import { addStyle } from '../../libs/function/index';
 	/**
 	 * noticeBar 滚动通知
@@ -75,6 +76,20 @@
 				show: true
 			}
 		},
+		computed: {
+			resolvedColor() {
+				if (this.upHasProp('color') || this.color !== defProps.noticeBar.color) {
+					return this.color
+				}
+				return this.upThemeVar('--up-notice-bar-color', this.$u.color.warning || '#f9ae3d')
+			},
+			resolvedBgColor() {
+				if (this.upHasProp('bgColor') || this.bgColor !== defProps.noticeBar.bgColor) {
+					return this.bgColor
+				}
+				return this.upThemeVar('--up-notice-bar-bg-color', this.$u.color.warningLight || '#fdf6ec')
+			}
+		},
 		emits: ["click", "close"],
 		methods: {
 			addStyle,
@@ -95,6 +110,10 @@
 	};
 </script>
 
+<style lang="scss">
+	@import "./theme-vars.scss";
+</style>
+
 <style lang="scss" scoped>
 
 	.u-notice-bar {

package/components/u-number-box/numberBox.js

@@ -24,13 +24,13 @@ export default {
         showPlus: true,
         decimalLength: null,
         longPress: true,
-        color: '#323233',
+        color: '',
         buttonWidth: 30,
         buttonSize: 30,
         buttonRadius: '0px',
-        bgColor: '#EBECEE',
-        disabledBgColor: '#f7f8fa',
-        inputBgColor: '#EBECEE',
+        bgColor: '',
+        disabledBgColor: '',
+        inputBgColor: '',
         cursorSpacing: 100,
         disableMinus: false,
         disablePlus: false,

package/components/u-number-box/u-number-box.vue

@@ -22,7 +22,7 @@
 		>
 			<up-icon
 			    name="minus"
-			    :color="isDisabled('minus') ? '#c8c9cc' : '#323233'"
+			    :color="isDisabled('minus') ? resolvedDisabledIconColor : resolvedColor"
 			    size="15"
 			    bold
 				:customStyle="iconStyle"
@@ -83,7 +83,7 @@
 		>
 			<up-icon
 			    name="plus"
-			    :color="isDisabled('plus') ? '#c8c9cc' : '#323233'"
+			    :color="isDisabled('plus') ? resolvedDisabledIconColor : resolvedColor"
 			    size="15"
 			    bold
 				:customStyle="iconStyle"
@@ -166,6 +166,21 @@
 			// #endif
 		},
 		computed: {
+			resolvedColor() {
+				return this.color || this.upThemeVar('--up-main-color', '#303133')
+			},
+			resolvedDisabledIconColor() {
+				return this.upThemeVar('--up-disabled-color', '#c8c9cc')
+			},
+			resolvedBgColor() {
+				return this.bgColor || this.upThemeVar('--up-bg-color', '#EBECEE')
+			},
+			resolvedDisabledBgColor() {
+				return this.disabledBgColor || this.upThemeVar('--up-card-bg-color', '#f7f8fa')
+			},
+			resolvedInputBgColor() {
+				return this.inputBgColor || this.resolvedBgColor
+			},
 			hideMinus() {
 				return this.currentValue == 0 && this.miniMode == true
 			},
@@ -177,24 +192,23 @@
 			buttonStyle() {
 				return (type) => {
 					const style = {
-						backgroundColor: this.bgColor,
+						backgroundColor: this.resolvedBgColor,
 						width: addUnit(this.buttonWidth),
 						height: addUnit(this.buttonSize),
-						color: this.color,
+						color: this.resolvedColor,
 						borderRadius: this.buttonRadius
 					}
 					if (this.isDisabled(type)) {
-						style.backgroundColor = this.disabledBgColor
+						style.backgroundColor = this.resolvedDisabledBgColor
 					}
 					return style
 				}
 			},
 			// 输入框的样式
 			inputStyle() {
-				const disabled = this.disabled || this.disabledInput
 				const style = {
-					color: this.color,
-					backgroundColor: this.inputBgColor || this.bgColor,
+					color: this.resolvedColor,
+					backgroundColor: this.resolvedInputBgColor,
 					height: addUnit(this.buttonSize),
 					width: addUnit(this.inputWidth)
 				}
@@ -407,17 +421,17 @@
 </script>
 
 <style lang="scss" scoped>
-	$u-numberBox-hover-bgColor: #E6E6E6 !default;
-	$u-numberBox-disabled-color: #c8c9cc !default;
-	$u-numberBox-disabled-bgColor: #f7f8fa !default;
+	$u-numberBox-hover-bgColor: var(--up-border-color, #E6E6E6) !default;
+	$u-numberBox-disabled-color: var(--up-disabled-color, #c8c9cc) !default;
+	$u-numberBox-disabled-bgColor: var(--up-card-bg-color, #f7f8fa) !default;
 	$u-numberBox-plus-radius: 4px !default;
 	$u-numberBox-minus-radius: 4px !default;
 	$u-numberBox-input-text-align: center !default;
 	$u-numberBox-input-font-size: 15px !default;
 	$u-numberBox-input-padding: 0 !default;
 	$u-numberBox-input-margin: 0 2px !default;
-	$u-numberBox-input-disabled-color: #c8c9cc !default;
-	$u-numberBox-input-disabled-bgColor: #f2f3f5 !default;
+	$u-numberBox-input-disabled-color: var(--up-disabled-color, #c8c9cc) !default;
+	$u-numberBox-input-disabled-bgColor: var(--up-bg-color, #f2f3f5) !default;
 
 	.u-number-box {
 		@include flex(row);

package/components/u-number-keyboard/u-number-keyboard.vue

@@ -30,7 +30,7 @@
 			>
 				<up-icon
 					name="backspace"
-					color="#303133"
+					:color="upThemeVar('--up-main-color', '#303133')"
 					size="28"
 				></up-icon>
 			</view>
@@ -134,7 +134,7 @@
 </script>
 
 <style lang="scss" scoped>
-	$u-number-keyboard-background-color:rgb(224, 228, 230) !default;
+	$u-number-keyboard-background-color:var(--up-bg-color, rgb(224, 228, 230)) !default;
 	$u-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
 	$u-number-keyboard-button-width:222rpx !default;
 	$u-number-keyboard-button-margin:4px 6rpx !default;
@@ -143,13 +143,13 @@
 	$u-number-keyboard-button-border-bottom-left-radius:4px !default;
 	$u-number-keyboard-button-border-bottom-right-radius:4px !default;
 	$u-number-keyboard-button-height: 90rpx!default;
-	$u-number-keyboard-button-background-color:#FFFFFF !default;
+	$u-number-keyboard-button-background-color:var(--up-card-bg-color, #ffffff) !default;
 	$u-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
 	$u-number-keyboard-text-font-size:20px !default;
 	$u-number-keyboard-text-font-weight:500 !default;
-	$u-number-keyboard-text-color:$u-main-color !default;
-	$u-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
-	$u-number-keyboard-u-hover-class-background-color: #BBBCC6 !default;
+	$u-number-keyboard-text-color:var(--up-main-color, #303133) !default;
+	$u-number-keyboard-gray-background-color:var(--up-border-color, rgb(200, 202, 210)) !default;
+	$u-number-keyboard-u-hover-class-background-color: var(--up-border-color, #BBBCC6) !default;
 
 	.u-keyboard {
 		@include flex;

package/components/u-picker/picker.js

@@ -1,43 +1,43 @@
-/*
- * @Author       : LQ
- * @Description  :
- * @version      : 3.0
- * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : jry
- * @lastTime     : 2025-12-19 08:55:21
- * @FilePath     : /uview-plus/libs/config/props/picker.js
- */
-import { t } from '../../libs/i18n';
-
-export default {
-    // picker
-    picker: {
-        show: false,
-        popupMode: 'bottom',
-        showToolbar: true,
-        title: '',
-        columns: [],
-        loading: false,
-        itemHeight: 44,
-        cancelText: t('up.common.cancel'),
-        confirmText: t('up.common.confirm'),
-        cancelColor: '#909193',
-        confirmColor: '',
-        visibleItemCount: 5,
-        keyName: 'text',
-        valueName: 'value',
-        closeOnClickOverlay: false,
-        defaultIndex: [],
-        immediateChange: true,
-        zIndex: 10076,
-        disabled: false,
-        disabledColor: '',
-        placeholder: t('up.common.pleaseChoose'),
-        inputProps: {},
-        bgColor: '#FFFFFF',
-        round: 0,
-        duration: 300,
-        overlayOpacity: 0.5,
-        pageInline: false
-    }
-};
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-19 08:55:21
+ * @FilePath     : /uview-plus/libs/config/props/picker.js
+ */
+import { t } from '../../libs/i18n';
+
+export default {
+    // picker
+    picker: {
+        show: false,
+        popupMode: 'bottom',
+        showToolbar: true,
+        title: '',
+        columns: [],
+        loading: false,
+        itemHeight: 44,
+        cancelText: t('up.common.cancel'),
+        confirmText: t('up.common.confirm'),
+        cancelColor: '#909193',
+        confirmColor: '',
+        visibleItemCount: 5,
+        keyName: 'text',
+        valueName: 'value',
+        closeOnClickOverlay: false,
+        defaultIndex: [],
+        immediateChange: true,
+        zIndex: 10076,
+        disabled: false,
+        disabledColor: '',
+        placeholder: t('up.common.pleaseChoose'),
+        inputProps: {},
+        bgColor: '',
+        round: 0,
+        duration: 300,
+        overlayOpacity: 0.5,
+        pageInline: false
+    }
+};

package/components/u-picker/u-picker.vue

@@ -44,7 +44,7 @@
 				<picker-view
 					class="u-picker__view"
 					:mask-class="maskClass"
-					:mask-style="maskStyle"
+					:mask-style="maskStyleInner"
 					:indicatorStyle="`height: ${addUnit(itemHeight, 'px')}`"
 					:value="innerIndex"
 					:immediateChange="immediateChange"
@@ -238,6 +238,18 @@ export default {
 				});
 			}
 			return res
+		},
+		maskStyleInner() {
+			// 显式传入时，始终以外部传参为准（即使传空字符串）
+			if (this.upHasProp('maskStyle')) {
+				return this.maskStyle || ''
+			}
+			if (this.upThemeIsDark) {
+				const topBottomStrong = 'rgba(28, 28, 30, 0.95)'
+				const topBottomWeak = 'rgba(28, 28, 30, 0.6)'
+				return `background-image: linear-gradient(180deg, ${topBottomStrong}, ${topBottomWeak}), linear-gradient(0deg, ${topBottomStrong}, ${topBottomWeak});`
+			}
+			return ''
 		}
     },
 	methods: {
@@ -471,7 +483,7 @@ export default {
 			@include flex;
 			justify-content: center;
 			align-items: center;
-			background-color: rgba(255, 255, 255, 0.87);
+			background-color: var(--up-card-bg-color, #ffffff);
 			z-index: 1000;
 		}
 	}

package/components/u-popup/popup.js

@@ -23,7 +23,7 @@ export default {
         closeIconPos: 'top-right',
         round: '20px',
         zoom: true,
-        bgColor: '#fff',
+        bgColor: '',
         overlayOpacity: 0.5,
         pageInline: false,
         touchable: false,

package/components/u-popup/u-popup.vue

@@ -45,7 +45,7 @@
 					@touchcancel="onTouchEnd"
 				>
 					<!-- iOS风格的横条指示器 -->
-					<view class="u-popup__content__indicator"></view>
+					<view class="u-popup__content__indicator" :style="indicatorStyle"></view>
 				</view>
 				<slot></slot>
 				<view
@@ -58,7 +58,7 @@
 				>
 					<up-icon
 						name="close"
-						color="#909399"
+						:color="closeIconColor"
 						size="18"
 						bold
 					></up-icon>
@@ -195,8 +195,8 @@
 				if (this.mode !== 'center') {
 					style.flex = 1
 				}
-				// 背景色，一般用于设置为transparent，去除默认的白色背景
-				style.backgroundColor = this.bgColor
+				// 背景色，留空时跟随主题卡片背景
+				style.backgroundColor = this.bgColor || this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
 				if(this.round) {
 					const value = addUnit(this.round)
 					if(this.mode === 'top') {
@@ -212,6 +212,14 @@
 				
 				return deepMerge(style, addStyle(this.customStyle))
 			},
+			closeIconColor() {
+				return this.upThemeVar('--up-content-color', '#606266')
+			},
+			indicatorStyle() {
+				return {
+					backgroundColor: this.upThemeVar('--up-light-color', '#c0c4cc')
+				}
+			},
 			position() {
 				if (this.mode === 'center') {
 					return this.zoom ? 'fade-zoom' : 'fade'
@@ -413,7 +421,7 @@
 				width: 100px;
 				height: 5px;
 				border-radius: 100px;
-				background-color: #c0c4cc;
+				background-color: var(--up-light-color, #c0c4cc);
 			}
 
 			&__close {
@@ -445,4 +453,4 @@
 			}
 		}
 	}
-</style>
+</style>

package/components/u-poster/u-poster.vue

@@ -359,6 +359,14 @@ export default {
             const lineHeight = css.lineHeight ? this.convertRpxToPx(css.lineHeight) : 20;
             const lines = [];
             let currentLine = '';
+            const ellipsis = '...';
+            const appendEllipsis = (line) => {
+                let fitLine = line;
+                while (ctx.measureText(fitLine + ellipsis).width > maxWidth && fitLine.length > 0) {
+                    fitLine = fitLine.substring(0, fitLine.length - 1);
+                }
+                return fitLine + ellipsis;
+            };
             
             for (let i = 0; i < text.length; i++) {
                 const char = text[i];
@@ -367,20 +375,14 @@ export default {
                 
                 if (metrics.width > maxWidth && currentLine !== '') {
                     lines.push(currentLine);
-                    currentLine = char;
                     
                     // 如果已达最大行数，添加省略号并结束
                     if (lines.length === lineClamp) {
-                        if (metrics.width > maxWidth) {
-                            // 添加省略号
-                            let fitLine = currentLine.substring(0, currentLine.length - 1);
-                            while (ctx.measureText(fitLine + '...').width > maxWidth && fitLine.length > 0) {
-                                fitLine = fitLine.substring(0, fitLine.length - 1);
-                            }
-                            lines[lines.length - 1] = fitLine + '...';
-                        }
+                        lines[lines.length - 1] = appendEllipsis(currentLine);
                         break;
                     }
+                    
+                    currentLine = char;
                 } else {
                     currentLine = testLine;
                 }
@@ -626,4 +628,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

package/components/u-pull-refresh/u-pull-refresh.vue

@@ -22,7 +22,7 @@
         <!-- 默认下拉状态 -->
         <view class="refresh-content">
           <view class="refresh-indicator">
-            <up-icon name="arrow-downward" size="26px"></up-icon>
+            <up-icon name="arrow-downward" size="26px" color="var(--up-content-color, #606266)"></up-icon>
           </view>
           <text class="refresh-text">{{ t("up.pullRefresh.pull") }}</text>
         </view>
@@ -37,7 +37,7 @@
         <!-- 默认释放状态 -->
         <view class="refresh-content">
           <view class="refresh-indicator">
-            <up-icon name="arrow-upward" size="26px"></up-icon>
+            <up-icon name="arrow-upward" size="26px" color="var(--up-content-color, #606266)"></up-icon>
           </view>
           <text class="refresh-text">{{ t("up.pullRefresh.release") }}</text>
         </view>
@@ -316,8 +316,8 @@ export default {
 .spinner {
   width: 16px;
   height: 16px;
-  border: 2px solid #f3f3f3;
-  border-top: 2px solid #666;
+  border: 2px solid var(--up-border-color, #f3f3f3);
+  border-top: 2px solid var(--up-content-color, #666);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -329,6 +329,6 @@ export default {
 
 .refresh-text {
   font-size: 14px;
-  color: #666;
+  color: var(--up-main-color, #303133);
 }
-</style>
+</style>