uview-pro 0.3.16 → 0.4.1

package/components/u-icon/types.ts

@@ -28,7 +28,7 @@ export const IconProps = {
     /** label的大小，单位rpx（默认28） */
     labelSize: { type: [String, Number] as PropType<string | number>, default: '28' },
     /** label的颜色 */
-    labelColor: { type: String, default: '#606266' },
+    labelColor: { type: String, default: 'var(--u-content-color)' },
     /** label与图标的距离(横向排列)，单位rpx（默认6） */
     marginLeft: { type: [String, Number] as PropType<string | number>, default: '6' },
     /** label与图标的距离(竖向排列)，单位rpx（默认6） */
@@ -50,7 +50,7 @@ export const IconProps = {
     /** 是否为DecimalIcon */
     showDecimalIcon: { type: Boolean, default: false },
     /** 背景颜色，可接受主题色，仅Decimal时有效 */
-    inactiveColor: { type: String, default: '#ececec' },
+    inactiveColor: { type: String, default: 'var(--u-divider-color)' },
     /** 显示的百分比，仅Decimal时有效 */
     percent: { type: [Number, String] as PropType<string | number>, default: '50' }
 };

package/components/u-icon/u-icon.vue

@@ -51,7 +51,7 @@ import { IconProps } from './types';
  * @property {String | Number} label-size label字体大小，单位rpx（默认28）
  * @property {String} label 图标右侧的label文字（默认28）
  * @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
- * @property {String} label-color label字体颜色（默认#606266）
+ * @property {String} label-color label字体颜色（默认var(--u-content-color)）
  * @property {Object} custom-style icon的样式，对象形式
  * @property {String} custom-prefix 自定义字体图标库时，需要写上此值
  * @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
@@ -69,7 +69,7 @@ import { IconProps } from './types';
  * @property {String | Number} percent 显示的百分比，仅Decimal时有效
  * @event {Function} click 点击图标时触发
  * @event {Function} touchstart 图标触摸时触发
- * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+ * @example <u-icon name="photo" color="var(--u-type-primary)" size="28"></u-icon>
  */
 
 const emit = defineEmits<{

package/components/u-image/types.ts

@@ -1,8 +1,10 @@
 import { type ComponentPublicInstance, type ExtractPropTypes, type PropType } from 'vue';
 import type { ImgMode, Shape } from '../../types/global';
+import { baseProps } from '../common/props';
 
 // 定义 ImageProps 的类型
 export const ImageProps = {
+    ...baseProps,
     /** 图片地址 */
     src: { type: String, default: '' },
     /** 裁剪模式 */
@@ -33,8 +35,8 @@ export const ImageProps = {
     webp: { type: Boolean, default: false },
     /** 搭配fade参数的过渡时间，单位ms（默认 500） */
     duration: { type: [String, Number], default: 500 },
-    /** 背景颜色，用于深色页面加载图片时，为了和背景色融合（默认 #f3f4f6） */
-    bgColor: { type: String, default: '#f3f4f6' },
+    /** 背景颜色，用于深色页面加载图片时，为了和背景色融合（默认 var(--u-bg-color)） */
+    bgColor: { type: String, default: 'var(--u-bg-color)' },
     /** 使用插槽名称对象，用于自定义插槽，默认 undefined，当动态切换slot隐藏时，需要使用useSlots使用，兼容头条小程序 */
     useSlots: { type: Object as PropType<Record<string, boolean>>, default: undefined }
 };

package/components/u-image/u-image.vue

@@ -1,5 +1,10 @@
 <template>
-    <view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
+    <view
+        class="u-image"
+        @tap="onClick"
+        :style="$u.toStyle(wrapStyle, backgroundStyle, customStyle)"
+        :class="customClass"
+    >
         <image
             v-if="!isError"
             :src="src"
@@ -67,7 +72,7 @@ import { $u } from '../..';
  * @property {Boolean} fade 是否需要淡入效果（默认 true）
  * @property {Boolean} webp 只支持网络资源，只对微信小程序有效（默认 false）
  * @property {String | Number} duration 搭配fade参数的过渡时间，单位ms（默认 500）
- * @property {String} bg-color 背景颜色，用于深色页面加载图片时，为了和背景色融合（默认 #f3f4f6）
+ * @property {String} bg-color 背景颜色，用于深色页面加载图片时，为了和背景色融合（默认 var(--u-bg-color)）
  * @event {Function} click 点击图片时触发
  * @event {Function} error 图片加载失败时触发
  * @event {Function} load 图片加载成功时触发

package/components/u-index-anchor/u-index-anchor.vue

@@ -103,18 +103,18 @@ defineExpose({
 .u-index-anchor {
     box-sizing: border-box;
     padding: 14rpx 24rpx;
-    color: #606266;
+    color: var(--u-content-color);
     width: 100%;
     font-weight: 500;
     font-size: 28rpx;
     line-height: 1.2;
-    background-color: rgb(245, 245, 245);
+    background-color: $u-bg-color;
 }
 
 .u-index-anchor--active {
     right: 0;
     left: 0;
     color: $u-type-primary;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
 }
 </style>

package/components/u-index-list/u-index-list.vue

@@ -331,7 +331,7 @@ defineExpose({
     margin-top: -60rpx;
     border-radius: 24rpx;
     font-size: 50rpx;
-    color: #fff;
+    color: var(--u-white-color);
     background-color: rgba(0, 0, 0, 0.65);
     @include vue-flex;
     justify-content: center;

package/components/u-input/types.ts

@@ -44,10 +44,10 @@ export const InputProps = {
         type: Boolean,
         default: false
     },
-    /** placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;") */
+    /** placeholder的样式，字符串形式，如"color: red;"(默认 "color: var(--u-light-color);") */
     placeholderStyle: {
         type: String,
-        default: 'color: #c0c4cc;'
+        default: 'color: var(--u-light-color);'
     },
     /** 设置键盘右下角按钮的文字，仅在type为text时生效(默认done) */
     confirmType: {
@@ -74,10 +74,10 @@ export const InputProps = {
         type: Boolean,
         default: false
     },
-    /** 输入框的边框颜色(默认#dcdfe6) */
+    /** 输入框的边框颜色(默认var(--u-border-color)) */
     borderColor: {
         type: String,
-        default: '#dcdfe6'
+        default: 'var(--u-border-color)'
     },
     /** 是否自动增高输入区域，type为textarea时有效(默认true) */
     autoHeight: {

package/components/u-input/u-input.vue

@@ -65,7 +65,7 @@
                 class="u-input__right-icon__clear u-input__right-icon__item"
                 v-if="clearable && modelValue != '' && !disabled"
             >
-                <u-icon size="32" name="close-circle-fill" color="#c0c4cc" @click="onClear" />
+                <u-icon size="32" name="close-circle-fill" color="var(--u-light-color)" @click="onClear" />
             </view>
             <view
                 class="u-input__right-icon__clear u-input__right-icon__item"
@@ -74,7 +74,7 @@
                 <u-icon
                     size="32"
                     :name="!showPassword ? 'eye' : 'eye-fill'"
-                    color="#c0c4cc"
+                    color="var(--u-light-color)"
                     @click="showPassword = !showPassword"
                 />
             </view>
@@ -85,13 +85,13 @@
                     'u-input__right-icon--select--reverse': selectOpen
                 }"
             >
-                <u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
+                <u-icon name="arrow-down-fill" size="26" color="var(--u-light-color)"></u-icon>
             </view>
         </view>
         <text
             class="u-input__count"
             :style="{
-                'background-color': props.disabled ? 'transparent' : '#fff'
+                'background-color': props.disabled ? 'transparent' : 'var(--u-bg-white)'
             }"
             v-if="props.type === 'textarea' && props.count"
         >
@@ -256,7 +256,7 @@ defineExpose({
     @include vue-flex;
 
     &__input {
-        //height: $u-form-item-height;
+        //height: 70rpx;
         font-size: 28rpx;
         color: $u-main-color;
         flex: 1;
@@ -277,7 +277,7 @@ defineExpose({
         bottom: 0;
         font-size: 12px;
         color: $u-tips-color;
-        background-color: #ffffff;
+        background-color: var(--u-bg-white);
         padding: 1px 4px;
         border-radius: 10px;
         line-height: 16px;
@@ -285,7 +285,7 @@ defineExpose({
 
     &--border {
         border-radius: 4px;
-        border: 1px solid $u-form-item-border-color;
+        border: 1px solid $u-border-color;
     }
 
     &--error {

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

@@ -145,7 +145,7 @@ function backspace() {
 }
 
 .u-tooltip-item {
-    color: #333333;
+    color: var(--u-main-color);
     flex: 0 0 33.333333%;
     text-align: center;
     padding: 20rpx 10rpx;
@@ -165,7 +165,7 @@ function backspace() {
     flex-grow: 1;
     flex-wrap: 0;
     padding-left: 40rpx;
-    color: #888888;
+    color: var(--u-tips-color);
 }
 
 .u-tooltips-submit-hover {
@@ -173,6 +173,6 @@ function backspace() {
 }
 
 .u-tooltip-cancel-hover {
-    color: #333333;
+    color: var(--u-main-color);
 }
 </style>

package/components/u-lazy-load/u-lazy-load.vue

@@ -229,7 +229,7 @@ onMounted(() => {
 @import '../../libs/css/style.components.scss';
 
 .u-wrap {
-    background-color: #eee;
+    background-color: var(--u-divider-color);
     overflow: hidden;
 }
 

package/components/u-line/types.ts

@@ -9,7 +9,7 @@ export const LineProps = {
     /** 线条的颜色 */
     color: {
         type: String,
-        default: '#e4e7ed'
+        default: 'var(--u-border-color)'
     },
     /** 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等 */
     length: {

package/components/u-line/u-line.vue

@@ -24,7 +24,7 @@ import { LineProps } from './types';
  * line 线条
  * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
  * @tutorial https://uviewpro.cn/zh/components/line.html
- * @property {String} color 线条的颜色(默认#e4e7ed)
+ * @property {String} color 线条的颜色(默认var(--u-border-color))
  * @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
  * @property {String} direction 线条的方向，row-横向，col-竖向(默认row)
  * @property {String} border-style 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线(默认solid)

package/components/u-line-progress/types.ts

@@ -18,12 +18,12 @@ export const LineProgressProps = {
     /** 激活部分的颜色 */
     activeColor: {
         type: String,
-        default: '#19be6b'
+        default: 'var(--u-type-success)'
     },
     /** 进度条的底色 */
     inactiveColor: {
         type: String,
-        default: '#ececec'
+        default: 'var(--u-divider-color)'
     },
     /** 进度百分比，数值 */
     percent: {

package/components/u-line-progress/u-line-progress.vue

@@ -48,8 +48,8 @@ import { LineProgressProps } from './types';
  * @property {String Number} percent 进度条百分比值，为数值类型，0-100
  * @property {Boolean} round 进度条两端是否为半圆（默认true）
  * @property {String} type 如设置，active-color值将会失效
- * @property {String} active-color 进度条激活部分的颜色（默认#19be6b）
- * @property {String} inactive-color 进度条的底色（默认#ececec）
+ * @property {String} active-color 进度条激活部分的颜色（默认var(--u-type-success)）
+ * @property {String} inactive-color 进度条的底色（默认var(--u-divider-color)）
  * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true）
  * @property {String Number} height 进度条的高度，单位rpx（默认28）
  * @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false）
@@ -92,7 +92,7 @@ const progressStyle = computed(() => {
     justify-items: flex-end;
     justify-content: space-around;
     font-size: 20rpx;
-    color: #ffffff;
+    color: var(--u-white-color);
     transition: all 0.4s ease;
 }
 

package/components/u-link/u-link.vue

@@ -34,7 +34,7 @@ import { LinkProps } from './types';
  * link 超链接
  * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
  * @tutorial https://uviewpro.cn/zh/components/link.html
- * @property {String} color 文字颜色（默认#606266）
+ * @property {String} color 文字颜色（默认var(--u-content-color)）
  * @property {String Number} font-size 字体大小，单位rpx（默认28）
  * @property {Boolean} under-line 是否显示下划线（默认false）
  * @property {String} href 跳转的链接，要带上http(s)

package/components/u-loading/types.ts

@@ -15,7 +15,7 @@ export const LoadingProps = {
     /** 动画的颜色 */
     color: {
         type: String,
-        default: '#c7c7c7'
+        default: 'var(--u-light-color)'
     },
     /** 加载图标的大小，单位rpx */
     size: {

package/components/u-loading/u-loading.vue

@@ -30,7 +30,7 @@ import { LoadingProps } from './types';
  * @description 此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
  * @tutorial https://uviewpro.cn/zh/components/loading.html
  * @property {String} mode 模式选择，见官网说明（默认circle）
- * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
+ * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认var(--u-light-color)）
  * @property {String|Number} size 加载图标的大小，单位rpx（默认34）
  * @property {Boolean} show 是否显示动画（默认true）
  * @example <u-loading mode="circle"></u-loading>
@@ -47,7 +47,7 @@ const cricleStyle = computed(() => {
     style.height = props.size + 'rpx';
     // 只对圆圈模式生效
     if (props.mode === 'circle') {
-        style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${props.color ? props.color : '#c7c7c7'}`;
+        style.borderColor = `var(--u-divider-color) var(--u-divider-color) var(--u-divider-color) ${props.color ? props.color : 'var(--u-light-color)'}`;
     }
     return style;
 });
@@ -66,7 +66,7 @@ const cricleStyle = computed(() => {
     background: 0 0;
     border-radius: 50%;
     border: 2px solid;
-    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+    border-color: var(--u-divider-color) var(--u-divider-color) var(--u-divider-color) var(--u-tips-color);
     animation: u-circle 1s linear infinite;
 }
 

package/components/u-loading-popup/types.ts

@@ -18,7 +18,7 @@ export const LoadingPopupProps = {
     /** 动画的类型 */
     mode: { type: String as PropType<LoadingMode>, default: 'circle' },
     /** 动画的颜色 */
-    color: { type: String, default: '#c7c7c7' },
+    color: { type: String, default: 'var(--u-light-color)' },
     /** 加载图标的大小，单位rpx */
     size: { type: [String, Number] as PropType<string | number>, default: '48' }
 };

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

@@ -215,7 +215,7 @@ defineExpose({
     transform: translate(-50%, -50%);
     z-index: 9999;
     font-size: 30rpx;
-    color: #fff;
+    color: var(--u-white-color);
     background: rgba(0, 0, 0, 0.7);
     border-radius: 7px;
 
@@ -223,7 +223,7 @@ defineExpose({
         position: absolute;
         top: 4rpx;
         right: 2rpx;
-        color: #ffffff;
+        color: var(--u-white-color);
         opacity: 0.8;
     }
 

package/components/u-loadmore/types.ts

@@ -25,7 +25,7 @@ export const LoadmoreProps = {
     /** 字体颜色 */
     color: {
         type: String,
-        default: '#606266'
+        default: 'var(--u-content-color)'
     },
     /** 组件状态，loadmore-加载前，loading-加载中，nomore-没有更多 */
     status: {
@@ -54,7 +54,7 @@ export const LoadmoreProps = {
     /** 加载中显示圆圈动画时，动画的颜色 */
     iconColor: {
         type: String,
-        default: '#b7b7b7'
+        default: 'var(--u-light-color)'
     },
     /** 上边距 */
     marginTop: {

package/components/u-loadmore/u-loadmore.vue

@@ -8,7 +8,7 @@
             height: $u.addUnit(props.height)
         }"
     >
-        <u-line color="#d4d4d4" length="50"></u-line>
+        <u-line color="var(--u-divider-color)" length="50"></u-line>
         <!-- 加载中和没有更多的状态才显示两边的横线 -->
         <view :class="props.status == 'loadmore' || props.status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
             <view class="u-loadmore-icon-wrap">
@@ -29,7 +29,7 @@
                 {{ showText }}
             </view>
         </view>
-        <u-line color="#d4d4d4" length="50"></u-line>
+        <u-line color="var(--u-divider-color)" length="50"></u-line>
     </view>
 </template>
 
@@ -56,12 +56,12 @@ import { LoadmoreProps } from './types';
  * @description 此组件一般用于标识页面底部加载数据时的状态。
  * @tutorial https://uviewpro.cn/zh/components/loadMore.html
  * @property {String} status 组件状态（默认loadmore）
- * @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
+ * @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认var(--u-bg-white)）
  * @property {Boolean} icon 加载中时是否显示图标（默认true）
  * @property {String} icon-type 加载中时的图标类型（默认circle）
- * @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
+ * @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认var(--u-light-color)）
  * @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
- * @property {String} color 字体颜色（默认#606266）
+ * @property {String} color 字体颜色（默认var(--u-content-color)）
  * @property {String|Number} margin-top 到上一个相邻元素的距离
  * @property {String|Number} margin-bottom 到下一个相邻元素的距离
  * @property {Object} load-text 自定义显示的文字，见上方说明示例
@@ -89,7 +89,7 @@ const loadTextStyle = computed(() => {
 // 加载中圆圈动画的样式
 const cricleStyle = computed(() => {
     return {
-        borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${props.iconColor}`
+        borderColor: `var(--u-divider-color) var(--u-divider-color) var(--u-divider-color) ${props.iconColor}`
     };
 });
 

package/components/u-message-input/u-message-input.vue

@@ -101,7 +101,7 @@ import { $u } from '../../';
  * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
  * @property {String|Number} font-size 字体大小，单位rpx（默认60）
  * @property {String} active-color 当前激活输入框的样式（默认主题色primary）
- * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
+ * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认var(--u-content-color)）
  * @property {String|Number} width 输入框宽度，单位rpx，高等于宽（默认80）
  * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
  * @event {Function} change 输入内容发生改变时触发，具体见官网说明
@@ -210,7 +210,7 @@ function getVal(e: { detail: { value: string } }) {
 
 .u-box {
     box-sizing: border-box;
-    border: 2rpx solid #cccccc;
+    border: 2rpx solid var(--u-light-color);
     border-radius: 6rpx;
 }
 
@@ -241,7 +241,7 @@ function getVal(e: { detail: { value: string } }) {
     transform: translate(-50%, -50%);
     width: 2rpx;
     height: 40rpx;
-    background: #333333;
+    background: var(--u-main-color);
     animation: twinkling 1.5s infinite ease;
 }
 
@@ -256,7 +256,7 @@ function getVal(e: { detail: { value: string } }) {
 
 .u-middle-line {
     height: 4px;
-    background: #000000;
+    background: var(--u-bg-black);
     width: 80%;
     position: absolute;
     border-radius: 2px;
@@ -271,7 +271,7 @@ function getVal(e: { detail: { value: string } }) {
 
 .u-bottom-line {
     height: 4px;
-    background: #000000;
+    background: var(--u-bg-black);
     width: 80%;
     position: absolute;
     border-radius: 2px;

package/components/u-modal/u-modal.vue

@@ -87,7 +87,7 @@ import { ModalProps } from './types';
  * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
  * @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
  * @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
- * @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
+ * @property {String} cancel-color 取消按钮的颜色（默认"var(--u-content-color)"）
  * @property {String} confirm-color 确认按钮的文字内容（默认主题色primary）
  * @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
  * @property {Object} title-style 自定义标题样式，对象形式
@@ -180,7 +180,7 @@ defineExpose({
     height: auto;
     overflow: hidden;
     font-size: 32rpx;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
 
     &__btn--hover {
         background-color: rgb(230, 230, 230);

package/components/u-navbar/types.ts

@@ -13,7 +13,7 @@ export const NavbarProps = {
     /** 返回箭头的颜色 */
     backIconColor: {
         type: String,
-        default: '#606266'
+        default: 'var(--u-content-color)'
     },
     /** 左边返回的图标 */
     backIconName: {
@@ -33,7 +33,7 @@ export const NavbarProps = {
     /** 返回的文字的 样式 */
     backTextStyle: {
         type: Object as PropType<Record<string, any>>,
-        default: () => ({ color: '#606266' })
+        default: () => ({ color: 'var(--u-content-color)' })
     },
     /** 导航栏标题 */
     title: {
@@ -48,7 +48,7 @@ export const NavbarProps = {
     /** 标题的颜色 */
     titleColor: {
         type: String,
-        default: '#606266'
+        default: 'var(--u-content-color)'
     },
     /** 标题字体是否加粗 */
     titleBold: {
@@ -68,7 +68,7 @@ export const NavbarProps = {
     /** 导航栏背景设置 */
     background: {
         type: Object as PropType<Record<string, any>>,
-        default: () => ({ background: '#ffffff' })
+        default: () => ({ background: 'var(--u-bg-white)' })
     },
     /** 导航栏是否固定在顶部 */
     isFixed: {

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

@@ -46,7 +46,7 @@
         <view
             class="u-navbar-placeholder"
             v-if="props.isFixed && !props.immersive"
-            :style="{ width: '100%', height: Number(navbarHeight) + Number(statusBarHeight) + 'px' }"
+            :style="{ width: '100%', height: `${Number(navbarPlaceholderHeight)}px` }"
         ></view>
     </view>
 </template>
@@ -74,19 +74,19 @@ import { NavbarProps } from './types';
  * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
  * @tutorial https://uviewpro.cn/zh/components/navbar.html
  * @property {String|Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
- * @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
+ * @property {String} back-icon-color 左边返回图标的颜色（默认var(--u-content-color)）
  * @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
  * @property {String|Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
  * @property {String} back-text 返回图标右边的辅助提示文字
- * @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
+ * @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: 'var(--u-content-color)' }）
  * @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
  * @property {String|Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
- * @property {String} title-color 标题的颜色（默认#606266）
+ * @property {String} title-color 标题的颜色（默认var(--u-content-color)）
  * @property {String|Number} title-size 导航栏标题字体大小，单位rpx（默认32）
  * @property {Function} custom-back 自定义返回逻辑方法
  * @property {String|Number} z-index 固定在顶部时的z-index值（默认980）
  * @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
- * @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
+ * @property {Object} background 导航栏背景设置，见官网说明（默认{ background: 'var(--u-bg-white)' }）
  * @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
  * @property {Boolean} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
  * @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
@@ -95,6 +95,8 @@ import { NavbarProps } from './types';
 const props = defineProps(NavbarProps);
 // 获取系统状态栏的高度
 const systemInfo = uni.getSystemInfoSync();
+const windowInfo = uni.getWindowInfo();
+
 let menuButtonInfo: any = {};
 // 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
 // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
@@ -102,7 +104,26 @@ menuButtonInfo = uni.getMenuButtonBoundingClientRect();
 // #endif
 
 // 状态栏高度
-const statusBarHeight = ref(systemInfo.statusBarHeight);
+const statusBarHeight = ref(windowInfo.statusBarHeight);
+
+// 转换字符数值为真正的数值
+const navbarHeight = computed(() => {
+    // #ifdef APP || H5
+    return props.height ? props.height : 44;
+    // #endif
+    // #ifdef MP
+    // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
+    // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
+    // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
+    let height = systemInfo.platform == 'ios' ? 44 : 48;
+    return props.height ? props.height : height;
+    // #endif
+});
+
+// 导航栏高度加上状态栏高度
+const navbarPlaceholderHeight = computed(() => {
+    return Number(navbarHeight.value) + Number(statusBarHeight.value);
+});
 
 // 导航栏内部盒子的样式
 const navbarInnerStyle = computed(() => {
@@ -147,20 +168,6 @@ const titleStyle = computed(() => {
     return style;
 });
 
-// 转换字符数值为真正的数值
-const navbarHeight = computed(() => {
-    // #ifdef APP-PLUS || H5
-    return props.height ? props.height : 44;
-    // #endif
-    // #ifdef MP
-    // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
-    // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
-    // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
-    let height = systemInfo.platform == 'ios' ? 44 : 48;
-    return props.height ? props.height : height;
-    // #endif
-});
-
 /**
  * 返回按钮点击事件
  * 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑

package/components/u-no-network/u-no-network.vue

@@ -250,7 +250,7 @@ defineExpose({
 @import '../../libs/css/style.components.scss';
 
 .u-no-network {
-    background-color: #fff;
+    background-color: var(--u-bg-white);
     position: fixed;
     top: 0;
     left: 0;
@@ -297,7 +297,7 @@ defineExpose({
 }
 
 .u-retry-hover {
-    color: #fff;
+    color: var(--u-white-color);
     background-color: $u-tips-color;
 }
 </style>